Menampilkan Hasil Search Data dengan PHP dan AJAX
Setelah kita mengetahui apa itu AJAX, sekarang saya akan mencoba memberikan contoh sederhana dari penggunaan AJAX di PHP. Pada artikel sebelumnya tentang Membuat Fasilitas Search seperti Facebook dengan PHP, saya telah memberikan sebuah contoh tentang penggunaan AJAX di PHP. Sekarang saya akan memberikan contoh tentang menampilkan hasil search data dengan PHP, dan AJAX tanpa berpindah halaman. Pertama kita membuat database barang.sql :
`id` int(5) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`stock` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
INSERT INTO `barang` VALUES (1, ‘Baju’, 405);
INSERT INTO `barang` VALUES (2, ‘Celana’, 1);
INSERT INTO `barang` VALUES (3, ‘Kemeja’, 4);
Setelah kita membuat database, kemudian kita membuat halaman search.php :
<head>
<title>Menampilkan Hasil Search Data dengan PHP dan AJAX by Erick Lisangan</title>
<script language=’JavaScript’>
var ajaxRequest;
function cekAjax() //fungsi untuk mengecek apakah browser mendukung AJAX atau tidak
{
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
// Something went wrong
alert(“Your browser broke!”);
return false;
}
}
}
}
function tampilData() //fungsi untuk menangkap id yang dicari, dan menampilkan data
{
cekAjax();
var idBarang = document.getElementById(‘idbarang’).value; //menangkap id barang yang dicari
ajaxRequest.open(“GET”,”hasilcaridata.php?id=” + idBarang,true); //mengirim id barang ke halaman
//hasilcaridata.php
ajaxRequest.send(null);
ajaxRequest.onreadystatechange = function()
{
document.getElementById(‘bukadata’).innerHTML = ajaxRequest.responseText; //membuka halaman
//hasilcaridata.php
}
}
</script>
</head>
<body>
<form>
<select id=’idbarang’>
<?php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db (“barang”);
$query = mysql_query(“SELECT id,nama FROM barang”);
while ($data = mysql_fetch_row($query))
{
?>
<option value=’<?=$data[0]?>’><?=$data[1]?></option>
<?php
}
?>
</select>
<input type=’button’ value=’Cari’ onClick=’tampilData();’>
</form>
<div id=’bukadata’></div>
</body>
</html>
Setelah membuat halaman search.php, kemudian kita membuat halaman hasilcaridata.php, yaitu :
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db (“barang”);
$idbarang = $_GET['id']; //menangkap id barang yang dikirm dari halaman search.php
$query = mysql_query(“SELECT * FROM barang WHERE id=’$idbarang’”);
$tampil = mysql_fetch_row($query);
?>
<!– menampilkan data hasil dari id barang yang dicari –>
<table>
<tr>
<td>Id Barang</td>
<td>:</td>
<td><?=$tampil[0]?></td>
</tr>
<tr>
<td>Nama Barang</td>
<td>:</td>
<td><?=$tampil[1]?></td>
</tr>
<tr>
<td>Stock Barang</td>
<td>:</td>
<td><?=$tampil[2]?></td>
</tr>
</table>
Apabila kita menjalankan script search,php di atas, maka kita akan memperoleh tampilan seperti di bawah ini :
Apabila kita memilih pilihan celana, maka diperoleh tampilan seperti gambar di samping. Hasil yang diperoleh akan sama apabila Anda melakukan pilihan pada baju, atau kemeja.
Semoga artikel ini dapat berguna bagi Anda. Gbu…
Salam kenal…
Ijin mengunduh script ya…
Aq masih newbie ni. artikel qm bener2 sangat membantu. Trims
thanx…semoga bermanfaat….Gbu
wah gan…artikel loe keren2..nice posting…salam kenal
thanx…semoga artikel tersebut berguna untuk Anda…hehehhe….