Home > AJAX, PHP > Menampilkan Hasil Search Data dengan PHP dan AJAX

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 :

CREATE TABLE `barang` (
`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 :

<html>
<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 :

<?php
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.

download script

Semoga  artikel ini dapat berguna bagi Anda. Gbu…

Categories: AJAX, PHP
  1. 7 March 2013 at 12:01

    apa bisa di generate langsung mas???

    seperti di google???

    • 9 March 2013 at 10:08

      maksud generatenya seperti langsung terpindah halaman y?

  2. edi
    4 July 2012 at 23:01

    thx, awalnya sy kotak katik ga mau tau2xnya cma di settingan tag pembuka, klo sy pke php5 yg ga support short tag, btw thx

  3. 16 February 2011 at 16:14

    Salam kenal…
    Ijin mengunduh script ya…
    Aq masih newbie ni. artikel qm bener2 sangat membantu. Trims

  4. 21 April 2010 at 16:08

    wah gan…artikel loe keren2..nice posting…salam kenal

    • 21 April 2010 at 19:25

      thanx…semoga artikel tersebut berguna untuk Anda…hehehhe….:-)

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: