Anda di halaman 1dari 5

AJAX Live Search dengan XAJAX Bagian 1

Sej ak dikem bangkannya m et ode pengem bangan aplikasi web m enggunakan AJAX, banyak aplikasi yang t erpengaruh oleh kem udahan ( kalau it u m em ang lebih m udah) m et ode proses asinkron. Salah sat unya adalah live search, sepert i yang dit erapkan pada Yahoo. Oke langsung saj a, kali ini ( cie .kayak dah banyak nulis art ikel aj a) kit a akan m em buat aplikasi live search m enggunakan t eknologi AJAX dengan bant uan XAJAX framework. I denya adalah pada saat kit a m enget ikkan kat a kunci pencarian, m aka akan t am pil data yang sesuai atau paling tidak mendekati kata kunci yang kita masukkan. Pertama- t am a kit a m est i m enyiapkan bahan- bahan yang akan diperlukan, yait u sat u siung baw ang m erah .( hehehehe kayak m o m asak aj a neh) . Sebuah kom put er

yang t erinst all Trio Kompak ( Apache, PHP, MySQL) lalu kam u j uga harus pasang framework XAJAX dan sudah dikonfigurasi. St rukt ur foldernya sepert i dibawah ini, dalam hal ini saya m em akai XAMPP dan Dreamweaver sebagai editor PHP nya.

Berat i kit a harus m em buat t iga file baru, yait u config.inc.ph p, inde x .ph p dan livesearch.php. Berikut adalah isi dari file config.inc.php <?php $user="root"; $pass="password"; $host="localhost"; $db="LAB- xajax"; $konek=mysql_connect($host,$user,$pass);

.org/1999/xhtml"> <head> <meta http.Type" content="text/html.0 Transit ional/ / EN" "http://www.8" /> <title>Untitled Document</title> <?php $xajax.php"). } require ('.transitional.php'). exit()./configuration/config.this. if(!$pilihdb){ echo"pemilihan database gagal". <?php include(".$pass) beroperasi'). ?> or die( 'Server dat abase gagal < ! DOCTYPE ht m l PUBLI C " .w3.equiv="Content.if(!$konek){ $konek= m ysql_connect ( $host .w3. } $pilihdb=mysql_select_db($db). charset=utf.inc./ / W3C/ / DTD XHTML 1.>printJavascript().inc./configuration/xajax/xajax_core/xajax.. include("livesearch. ?> Selanjutnya adalah file index.php"). isinya seperti ini coy. ?> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>Pencarian Username :</td> < t d> < input t ype= " t ext " nam e= " t ext field" id= " t ext field" onkeyup="xajax_listdata('searchHint'.$user.value)" /></td> .org/TR/xhtml1/DTD/xhtml1.php.dtd"> <html xmlns="http://www.

$xajax. $hasil_tampil=mysql_query($kueri_tampil).$key){ $objResponse = new xajaxResponse(). while($data_tampil=mysql_fetch_array($hasil_tampil)){ $username[]=$data_tampil['username'].. function listdata($selectedId.< t d> < input /></td> </tr> </table> t ype= " subm it " nam e= "cari_BTN" id= " cari_BTN" value= "Cari" <br /> <div id="searchHint"></div> </body> </html> Dan yang terakhir adalah file livesearch. $xajax. '..>registerFunction("listdata"). origin FROM person ORDER BY username ". $email[]=$data_tampil['email'].php yang isinya seperti ini. <?php $xajax = new xajax(). $origin[]=$data_tampil['origin']. email. } . $kueri_tampil=" SELECT username.>configure('javascript URI'./configuration/xajax/').

strlen($key)))){ if ($table!=''){ $table. $t able= '< t able cellspacing="1"> <tr> < td align="center">Username</div></td> < td align="center">Email</div></td> < td align="center">Origin</div></td> </tr> '."innerHTML". $objResponse.if (strlen($key)>=3){ $hit=" ".$origin[$i].$email[$i].='<tr align="center"> <td>'. } } } } $table.0.>assign($selectedId.'</td> <td>'. return $objResponse.$i++){ if (strtolower($key)==strtolower(substr($username[$i].='</table>'.$table). ?> widt h= " 172" bgcolor= " # 999999" > < div widt h= " 207" bgcolor= " # 999999" > < div widt h= " 207" bgcolor= " # 999999" > < div widt h= "825" border= " 0" cellpadding= " 0" .>processRequest().$username[$i]. } $xajax. for($i=0.'</td> </tr>'.'</td> <td>'.$i<count($username).

kalo ada kom ent silakan aj a. Nuevo Leon.velazquez@gmail. (2. 'mariana. Jalisco. 'vianney. 'Anis Rosalina'. . 'Charlie Chaplin'. Jalisco. 'Zapopan. (4. 'paulina.xajax. 'Ani Malia'.net. `email`. Mexico'). Ya udah karena aku lagi baek hat i dan t idak som bong.vazquez@gmail. ini SQL nya . (9. j angan sungkan anggap sepert i rum ah sendiri . 'jjvema@yahoo. (3. Pada input it u yang dim asukkan adalah kat a ani . 'Zapopan. Mexico'). 'Guadalaja. CREATE TABLE IF NOT EXISTS `person` ( `id` int(4) NOT NULL auto_increment. 'ccontrer@cybercable.velazquez@gmail. 'Jakarta'). 'Bogor').com'.duanya. dan j ika m asakan kit a sukses maka pada browser akan tampil hasil kurang lebih seperti di bawah ini. (8. Mexico').. `origin` varchar(35) NOT NULL default ''. 'Abi Bakar'.wekekekeke.kelar deh . 'Talpa de Allende. 'Monterrey.CMI I W . CREATE DATABASE lab. Karena pada dat abase yang kit a buat t adi ada dua data yang memiliki value ani. databasenya kan belum dibuat ya. `email` varchar(35) NOT NULL default ''. 'Delta Box'. Unt uk bagian kedua akan m enysusul . (5. `username` varchar(25) NOT NULL.mx'. `username`. 'Erick robert'. hehehe. Jalisco. 'anis@rosalina.. maka akan ditampilkan dua. `origin`) VALUES (1.com'. 'Bobi Baboon'. INSERT INTO `person` (`id`.com'. Mexico').com'. dem ikianlah cerit a kali ini sem oga berm anfaat . Mexico').com'. PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 . Jalisco. 'abi@bakar. aku j elasin deh. Oke brow. Eh keliat an gak seh? Hehehe kalo gak keliat an ya syukurin .Oh iya hampir lupa.com'. Ah .