{"id":846,"date":"2022-03-23T08:11:00","date_gmt":"2022-03-23T01:11:00","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=846"},"modified":"2022-09-11T13:48:28","modified_gmt":"2022-09-11T06:48:28","slug":"script-mudah-membuat-simple-lookup-dengan-popup-colorbox","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/","title":{"rendered":"Easy script to make simple lookup with Colorbox popup"},"content":{"rendered":"In making applications, we often need a window to search for certain data, this function we usually call lookup.\r\n\r\nThis time we will create a simple lookup script with the popup library colorbox for the web.\r\n\r\nThe following is a lookup script for the web that functions to display and select data from all existing data lists.\r\n\r\n<strong>Display the results of the script\r\n<\/strong>\r\n<a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"604\" height=\"164\" class=\"wp-image-849\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup1.jpg\" alt=\"simplepopup1\" \/><\/a>\r\n<a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"220\" class=\"wp-image-850\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2-290x220.jpg\" alt=\"simplepopup2\" \/><\/a>\r\n\r\nSteps:\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#1_First_create_an_employee_table_in_the_test_database\" >1. First create an employee table in the test database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#2_Create_an_indexhtml_file_with_the_following_code\" >2. Create an index.html file with the following code:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#3_Create_the_file_register_pegawaiphp_with_the_following_code\" >3. Create the file register_pegawai.php with the following code:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_First_create_an_employee_table_in_the_test_database\"><\/span>1. First create an employee table in the test database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n<pre class=\"wp-block-preformatted\">CREATE TABLE `pegawai` (\r\n `no_int` int(5) NOT NULL auto_increment,\r\n `NIP` char(5) collate latin1_general_ci default NULL,\r\n `nama` varchar(30) collate latin1_general_ci NOT NULL,\r\n `umur` int(2) NOT NULL,\r\n `alamat` varchar(100) collate latin1_general_ci NOT NULL,\r\n PRIMARY KEY (`no_int`)\r\n);\r\n<\/pre>\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"2_Create_an_indexhtml_file_with_the_following_code\"><\/span>2. Create an index.html file with the following code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-markup line-numbers\" lang=\"markup\">&lt;html&gt;\r\n&lt;head&gt;\r\n &lt;title&gt;Searching By Ajax&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/colorbox.css\" \/&gt;\r\n &lt;script src=\"js\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script src=\"js\/jquery.colorbox.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script&gt;\r\n\t\t\t$(document).ready(function(){\r\n\t\t\t\t\/\/Examples of how to assign the ColorBox event to elements\r\n\r\n\t\t\t\t$(\".ajax\").colorbox({width:'650px',height:'450px'});\r\n \r\n\t\t\t\t\r\n\t\t\t});\r\n\t\t&lt;\/script&gt;\r\n&lt;!-- new --&gt;\r\n\t&lt;script language=\"javascript\"&gt;\r\n\r\n\t\tvar my_variable = new Array(); \/\/ for example\r\n\t\t\r\n\t\tfunction passingToParent(){\r\n\t\t\r\n\t\t\tarrayOfStrings = my_variable[0].split(',');\r\n\t\t\t\r\n\t\t\tfor (var i=1; i &lt; my_variable.length; i++) {\r\n\t\t\t\t$('#' + arrayOfStrings[i-1]).val(my_variable[i]);\r\n\t\t\t}\r\n\t\t\t\/\/ single form\r\n\t\t\t\/\/parent.$.fn.colorbox.close();\r\n\r\n\t\t\t\/\/ framework form\r\n\t\t\tjQuery.colorbox.close();;\r\n\t\t}\r\n\r\n\t&lt;\/script&gt;\r\n &lt;style&gt;\r\n   body,table,input{\r\n   \tfont-size:12px\r\n   }\r\n &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;form action=\"\" method=\"post\"&gt; \r\n\t\r\n Pilih Pegawai: &lt;input type=\"text\" id=\"no_int\" name=\"no_int\" size=\"4\"&gt; \r\n &lt;input id=\"id\" type=\"text\" name=\"pegawai\" size=\"4\" \/&gt; \r\n &lt;input type=\"text\"  id=\"nama_pegawai\" name=\"nama_pegawai\" size=\"20\" readonly \/&gt; \r\n &lt;!-- semua element anchor dengan class=\"thickbox\" akan otomatis menampilkan dialog thickbox, \r\n \t  isi href bisa dimasukan setting thickbox berupa width dan height dari dialog thickbox --&gt;\r\n &lt;a href=\"daftar_pegawai.php\" class=\"ajax\" onClick=\"my_variable[0]='no_int,id,nama_pegawai'\"&gt;\r\n &lt;img src=\"button_search.png\" border=\"0\" \/&gt;&lt;\/a&gt;\r\n &lt;small id=\"divAlertPegawai\"&gt;&lt;\/small&gt;\r\n&lt;\/form&gt;\t\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\r\n&nbsp;\r\n\r\nExplanation of the script: first we include the jquery script and colorbox, then we create a function <strong>passingToParent<\/strong> to receive data passing from the lookup to the form, the id name of the data receiving component is set on the link\r\n<strong>&lt;a href=&#8221;employee_registration.php&#8221; class=&#8221;ajax&#8221; onClick=&#8221;my_variable[0]=&#8217;no_int,id,employee_name'&#8221;&gt;<\/strong>\r\n\r\nwith the onClick attribute containing the input id <strong>my_variable[0]=&#8217;no_int,id,employee_name<\/strong>\r\n<h2><span class=\"ez-toc-section\" id=\"3_Create_the_file_register_pegawaiphp_with_the_following_code\"><\/span>3. Create the file register_pegawai.php with the following code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nExplanation: input component to perform a search, can receive <strong>Enter<\/strong> as search submit, the script function <strong>findRecord<\/strong> will perform an ajax call to <strong>cari_pegawai.php<\/strong> with the search value from the search id, namely the input component, the result of the response is directly written to the result id\r\n\r\n<strong>4. Create the file cari_pegawai.php with the following code:<\/strong>\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-php line-numbers\" lang=\"php\">\t&lt;script language=\"javascript\"&gt;\r\n\t\tfunction getSelected(no_int, id, nama){\t\r\n\t\t\t\r\n\t\t\tvar args = new Array();\r\n\t\t\t\r\n\t\t\tfor (var i = 0; i &lt; arguments.length; i++)\r\n\t\t\t\twindow.parent.my_variable[i+1] = arguments[i];\r\n\t\t\t\t\r\n\t\t\twindow.parent.passingToParent();\r\n\t\t}\r\n\r\n  &lt;\/script&gt;\r\n\t&lt;style&gt;\r\n\ttable {\r\n\t border-collapse: collapse;\r\n\t width: 100%;\r\n\t}\r\n\tth, td {\r\n\t text-align: left;\r\n\t padding: 8px;\r\n\t}\r\n\ttr:nth-child(even){background-color: #f2f2f2}\r\n\tth {\r\n\t background-color: #4CAF50;\r\n\t color: white;\r\n\t}\r\n\t&lt;\/style&gt;\r\n\r\n&lt;?php\r\n\r\n\tif (empty($_POST[\"cari\"]))\r\n\t\t$_POST[\"cari\"] = \"\";\r\n\t\r\n\t$mysqli = new mysqli(\"localhost\", \"admin\", \"\", \"test\");\r\n\t\r\n\t $ssql = \"SELECT * FROM pegawai \r\n\t WHERE nip like '%$_POST[cari]%'\r\n\t or nama like '%$_POST[cari]%'\";\r\n\t $query = $mysqli-&gt;query($ssql);\r\n \r\n?&gt;\r\n&lt;table bgcolor=\"#000000\" cellspacing=\"1\" cellpadding=\"3\"&gt;\t\r\n\t&lt;tr bgcolor=\"#DDDDDD\"&gt;\r\n\t\t&lt;th&gt;No. Peg&lt;\/th&gt;\r\n\t\t&lt;th&gt;Nama&lt;\/th&gt;\r\n\t\t&lt;th&gt;Umur&lt;\/th&gt;\r\n\t\t&lt;th&gt;Alamat&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;?php while($row = $query-&gt;fetch_object()): ?&gt;\r\n\t\r\n\t&lt;tr bgcolor=\"#FFFFFF\"&gt;\r\n\t\t&lt;!-- fungsi selectPegawai di deklarasikan di index.html dan file ini bisa memanggilnya selama file ini\r\n\t\t\t dipanggil oleh thickbox dari index.html, fungsi dari selectPegawai adalah untuk memasukan nilai\r\n\t\t\t NIP dan nama pegawai dari masing-masing baris di daftar pegawai ini --&gt;\r\n\t\t&lt;td align=\"center\"&gt;\r\n\t\t\t&lt;a href=\"javascript:getSelected('&lt;?=$row-&gt;no_int?&gt;','&lt;?=$row-&gt;NIP?&gt;','&lt;?=$row-&gt;nama?&gt;')\"&gt;\r\n\t\t\t\t&lt;?=$row-&gt;NIP?&gt;\r\n\t\t\t&lt;\/a&gt;\r\n\t\t&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;?=$row-&gt;nama?&gt;&lt;\/td&gt;\r\n\t\t&lt;td align=\"center\"&gt;&lt;?=$row-&gt;umur?&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;?=$row-&gt;alamat?&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;?php endwhile; ?&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\r\n\r\n\r\nHere&#8217;s a download link for a <a href=\"https:\/\/www.bagi2info.com\/sample\/simplelookup.zip\">simple lookup sample file with a popup colorbox.<\/a>\r\n\r\nNotes:\r\n\r\nThe article above assumes that you already have knowledge about using mysql databases starting from login connections, creating databases, running scripts and creating tables","protected":false},"excerpt":{"rendered":"<p>In making applications, we often need a window to search for certain data, this function we usually call lookup. This time we will create a simple lookup script with the popup library colorbox for&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2,14],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-komputer","category-recommended"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=846"}],"version-history":[{"count":0,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/850"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}