AJAX Live Search dengan XAJAX Bagian 1

Posted on 14/06/2009 by Zaki'

Sejak dikembangkannya metode pengembangan aplikasi web menggunakan AJAX, banyak aplikasi yang terpengaruh oleh kemudahan (kalau itu memang lebih mudah) metode proses asinkron. Salah satunya adalah live search, seperti yang diterapkan pada Yahoo. Oke langsung saja, kali ini (cie….kayak dah banyak nulis artikel aja) kita akan membuat aplikasi live search menggunakan teknologi AJAX dengan bantuan XAJAX framework.

Idenya adalah pada saat kita mengetikkan kata kunci pencarian, maka akan tampil data yang sesuai atau paling tidak mendekati kata kunci yang kita masukkan.

Pertama-tama kita mesti menyiapkan bahan-bahan yang akan diperlukan, yaitu satu siung bawang merah ….(hehehehe kayak mo masak aja neh). Sebuah komputer yang terinstall Trio Kompak (Apache, PHP, MySQL) lalu kamu juga harus pasang framework XAJAX dan sudah dikonfigurasi.

Struktur foldernya seperti dibawah ini, dalam hal ini saya memakai XAMPP dan Dreamweaver sebagai editor PHP nya.

XAJAX Live Search_img001

Berati kita harus membuat tiga file baru, yaitu config.inc.php, index.php 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);

if(!$konek){

$konek=mysql_connect($host,$user,$pass) or die(‘Server database gagal beroperasi’);

}

$pilihdb=mysql_select_db($db);

if(!$pilihdb){

echo”pemilihan database gagal”;

exit();

}

require (‘../configuration/xajax/xajax_core/xajax.inc.php’);

?>

Selanjutnya adalah file index.php, isinya seperti ini coy.

<?php

include(“../configuration/config.inc.php”);

include(“livesearch.php”);

?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Untitled Document</title>

<?php

$xajax->printJavascript();

?>

</head>

<body>

<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr>

<td>Pencarian Username :</td>

<td><input type=”text” onkeyup=”xajax_listdata(’searchHint’,this.value)” /></td>

<td><input type=”submit” value=”Cari” /></td>

</tr>

</table>

<br />

<div id=”searchHint”></div>

</body>

</html>

Dan yang terakhir adalah file livesearch.php yang isinya seperti ini.

<?php

$xajax = new xajax();

$xajax->configure(‘javascript URI’, ‘../configuration/xajax/’);

$xajax->registerFunction(“listdata”);

function listdata($selectedId,$key){

$objResponse = new xajaxResponse();

$kueri_tampil=”

SELECT

username,

email,

origin

FROM

person

ORDER BY username

“;

$hasil_tampil=mysql_query($kueri_tampil);

while($data_tampil=mysql_fetch_array($hasil_tampil)){

$username[]=$data_tampil['username'];

$email[]=$data_tampil['email'];

$origin[]=$data_tampil['origin'];;

}

if (strlen($key)>=3){

$hit=” “;

$table=’<table width=”825″ border=”0″ cellpadding=”0″ cellspacing=”1″>

<tr>

<td width=”207″ bgcolor=”#999999″><div align=”center”>Username</div></td>

<td width=”207″ bgcolor=”#999999″><div align=”center”>Email</div></td>

<td width=”172″ bgcolor=”#999999″><div align=”center”>Origin</div></td>

</tr>

‘;

for($i=0;$i<count($username);$i++){

if (strtolower($key)==strtolower(substr($username[$i],0,strlen($key)))){

if ($table!=”){

$table.=’<tr align=”center”>

<td>’.$username[$i].’</td>

<td>’.$email[$i].’</td>

<td>’.$origin[$i].’</td>

</tr>’;

}

}

}

}

$table.=’</table>’;

$objResponse->assign($selectedId,”innerHTML”,$table);

return $objResponse;

}

$xajax->processRequest();

?>

Oh iya hampir lupa, databasenya kan belum dibuat ya, hehehe, ini SQL nya .

CREATE DATABASE lab-xajax;

CREATE TABLE IF NOT EXISTS `person` (

`id` int(4) NOT NULL auto_increment,

`username` varchar(25) NOT NULL,

`email` varchar(35) NOT NULL default ”,

`origin` varchar(35) NOT NULL default ”,

PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `person` (`id`, `username`, `email`, `origin`) VALUES

(1, ‘Ani Malia’, ‘jjvema@yahoo.com’, ‘Guadalaja, Jalisco, Mexico’),

(2, ‘Bobi Baboon’, ‘vianney.vazquez@gmail.com’, ‘Talpa de Allende, Jalisco, Mexico’),

(3, ‘Charlie Chaplin’, ‘paulina.velazquez@gmail.com’, ‘Zapopan, Jalisco, Mexico’),

(4, ‘Delta Box’, ‘mariana.velazquez@gmail.com’, ‘Zapopan, Jalisco, Mexico’),

(5, ‘Erick robert’, ‘ccontrer@cybercable.net.mx’, ‘Monterrey, Nuevo Leon, Mexico’),

(8, ‘Abi Bakar’, ‘abi@bakar.com’, ‘Jakarta’),

(9, ‘Anis Rosalina’, ‘anis@rosalina.com’, ‘Bogor’);

Oke brow, demikianlah cerita kali ini semoga bermanfaat, dan jika masakan kita sukses maka pada browser akan tampil hasil kurang lebih seperti di bawah ini.

XAJAX Live Search_img002

Artikel di atas bisa di download dalam PDF dan juga source-nya.

DIarsipkan di bawah: Pemrograman Web

« »

Tinggalkan Balasan