Membuat Fasilitas Search seperti Facebook dengan PHP
Kita semua tentu mengetahui, dan memiliki akun di Facebook kan??Dan saya yakin, pasti Anda semua pernah menggunakan fasilitas Search Friend yang disediakan oleh Facebook.. Pada artikel ini, saya akan mencoba membuat sebuah fasilitas search, seperti search friend yang dimiliki oleh facebook.
Sebelum membuat scriptnya, terlebih dahulu saya ingin mengenalkan suatu teknik pemrograman yang akan digunakan, yaitu AJAX (Asynchronous JavaScript And XML). Fungsi dari AJAX adalah me-load suatu halaman tanpa perlu di-refresh sehinggan web menjadi lebih interaktif dengan user.
Baik…kita mulai membuat fasilitas search yang mirip dengan FB. Pertama kita membuat database barang, berikut SQL dari 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 script untuk tempat kita menginput nama barang yang akan kita cari, yaitu search.html
<head>
<title>Search seperti FB by Erick Lisangan</title>
<script language=’JavaScript’>
var ajaxRequest;
function getAjax() //memeriksa apakah web browser mendukung AJAX
{
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 validasi(keyEvent) //untuk mendapatkan nilai dari inputan yang dimasukkan
{
keyEvent = (keyEvent) ? keyEvent: window.event;
input = (keyEvent.target) ? keyEvent.target: keyEvent.srcElement;
if (keyEvent.type == “keyup”)
{
var targetDiv = document.getElementById(“hasil”);
targetDiv.innerHTML = “<div></div>”;
if (input.value)
{
getData(“search.php?nama=” + input.value);
}
}
}
function bukaInfo(id) //membuka link dari hasil pencarian
{
ajaxRequest.open(“GET”,”search.php?id=”+id);
ajaxRequest.onreadystatechange =
function()
{
var targetDiv = document.getElementById(“info”);
targetDiv.innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
function getData(dataSource) //menampilkan kemungkinan hasil nama barang yang diinput
{
getAjax();
if (ajaxRequest)
{
ajaxRequest.open(“GET”,dataSource);
ajaxRequest.onreadystatechange =
function()
{
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
{
var targetDiv = document.getElementById(“hasil”);
targetDiv.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
}
</script>
</head>
<body>
Nama Barang : <BR><input type=’text’ onkeyup=”validasi(event)” id=’inputan’> <div id=’hasil’></div><BR><div id=’info’></div>
</body>
</html>
Setelah kita membuat script HTML, kemudian kita membuat script PHP untuk mencari dan menampilkan hasil input nama barang yang kita cari, yaitu search.php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“barang”);
if (isset($_GET['nama']))
{
$nama = $_GET['nama'];
$query = mysql_query(“SELECT id,nama FROM barang WHERE nama LIKE ‘%$nama%’”); //query ke database untuk
//mencari nama barang yang mirip dengan inputan kita
$hasil = mysql_num_rows($query); //mengecek jumlah hasil query dari $query
if ($hasil > 0)
{
while ($data = mysql_fetch_row($query)) //menampilkan kemungkinan dari hsil input
{
?>
<a href=’javascript:bukaInfo(<?=$data[0]?>);’ title=’<?=$data[1]?>’><?=$data[1]?><BR>
<?php
}
}
else //jika tidak terdapat data yang kita inginkan
{
echo “Data tidak ditemukan”;
}
}
else if(isset($_GET['id'])) //menampilkan info dari hasil pencarian
{
$id = $_GET['id'];
$query = mysql_query(“SELECT * FROM barang WHERE id=’$id’”);
$info = mysql_fetch_row($query);
echo “ID : “.$info[0].”<BR>Nama : “.$info[1].”<BR>Stock : “.$info[2];
}
?>
Apabila kita menjalankan script search.html melalui web server, maka kita mendapatkan tampilan seperti dibawah ini
Apabila kita memasukkan huruf a pada form input nama barang, maka secara otomatis, script PHP search.php akan mencari nama barang yang memiliki huruf a.
Apabila kita mengklik salah satu link dari hasil pencarian yang kita cari, misalnya baju, maka kita akan memperoleh tampilan sebagai berikut :
Sehingga tanpa tombol search pun kita dapat melihat kemungkinan dari nama barang yang akan kita cari.
Dengan menggunakan AJAX, maka script PHP yang kita buat akan menjadi lebih interaktif tanpa perlu melakukan refresh. Semoga artikel ini bermanfaat bagi Anda. Gbu….
kalo id nya di rubah jadi varchar kok ga bisa tampil ?
thanks bro…
saya coba belajar dulu …
thanx…semoga bermanfaat….
salam mas broo, mau nnya ini pke database apa yah?
mas kalau mw edit nis siswa tapi nis tidak primary key gmna y
pake query UPDATE saja…hehehe…UPDATE nama_tabel SET atribut=’……’ WHERE atribut_patokan=’……’;
Nice, sngat membantu..
thanx…semoga bermanfaat…Gbu…
bro, kalo inputan text nya lebih dari 1 gimana ya?
mohon bantuan dong. thx
berarti fungsi dalam ajax-nya harus ditambahkan lg…
bagian mana nya ya kak ?
“berarti fungsi dalam ajax-nya harus ditambahkan lg…”
bagian mana ya yang harus ditambahkan .. mohon bantuannya ..