Sudah lazim dalam sebuah website atau aplikasi web untuk memiliki fitur pencarian data berdasarkan kata kunci tertentu. Misalnya pencarian data buku berdasarkan judul buku bisa juga pencarian berdasarkan penulis buku tersebut. Fitur pencarian ini sangat memudahkan pengguna untuk melakukan pencarian data. Jadi tidak ada alasan untuk tidak mengimplementasikannya pada website atau aplikasi web yang sedang kita kembangkan.
Pada artikel kali ini saya akan menunjukkan cara Membuat Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql. Tidak seperti fitur pencarian pada umumnya, disini kita akan menerapkan Ajax untuk berkomunikasi dengan PHP untuk mendapatkan data dari database yang kemudian data tersebut akan dimunculkan pada halaman pencarian tanpa ada proses reload.
Menyiapkan Database
Buat sebuah tabel dengan nama artikel sebagai berikut
[CREATE TABLE `artikel` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`judul` varchar(75) NOT NULL,
`link` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1]
Isikan data sampel seperti pada gambar berikut ini
Membuat halaman HTML+CSS
Untuk html-nya kita buat sederhana saja, yaitu terdiri dari 3 komponen. Sebuah input text, sebuah tombol dan sebuah list untuk menampilkan hasil pencarian.
Berikut ini adalah kode-nya.
[<body>
<div id="container">
<input type="text" id="search" placeholder="Cari Artikel Berdasarkan Judul"/>
<input type="button" id="button" value="Cari" />
<ul id="result"></ul>
</div>
</body>]
Selanjutnya kita tambahkan CSS untuk mempercantik HTML yang telah kita buat tadi.
[<style type="text/css">
#container{
width:800px;
margin:0 auto;
}
#search{
width:700px;
padding:10px;
}
#button{
display: block;
width: 100px;
height:30px;
border:solid #366FEB 1px;
background: #91B2FA;
}
ul{
margin-left:-40px;
}
ul li{
list-style-type: none;
border-bottom: dotted 1px black;
height: 50px;
}
li:hover{
background: #A592E8;
}
a{
text-decoration: none;
font-size: 18px;
}
</style>]
Ajax Menggunakan jQuery
Sekarang kita akan menulis kode jQuery untuk melakukan komunikasi Ajax dengan PHP untuk mendapatkan data dari database.
Ketika pengguna memasukkan kata pencarian judul artikel maka kata kunci akan dikirimkan ke PHP. PHP akan mengirimkan query ke MySql berdasarkan kata kunci tersebut. Selama masa loading tersebut, halaman web akan menampilkan gambar loading khas Ajax. Ketika query sudah selesai dijalankan maka hasilnya akan dikirim balik ke jQuery dan ditampilkan oleh HTML. Saat data pencarian tidak ditemukan maka pesan bahwa data tidak ditemukan akan ditamplikan, sebaliknya jika data ditemukan maka data tersebut yang akan dimunculkan.
Berikut ini adalah kode untuk jQuery-nya
[<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
function search(){
var judul=$("#search").val();
if(judul!=""){
$("#result").html("<img src='img/ajax-loader.gif'/>");
$.ajax({
type:"post",
url:"search.php",
data:"judul="+judul,
success:function(data){
$("#result").html(data);
$("#search").val("");
}
});
}
}
$("#button").click(function(){
search();
});
$('#search').keyup(function(e) {
if(e.keyCode == 13) {
search();
}
});
});
</script>]
Pencarian akan dilakukan jika pengguna menekan tombol atau menekan enter. Selain itu jika teks input kosong pencarian tidak akan dilakukan walaupun kita menekan tombol atau enter.
Kode PHP
Untuk sisi server kita menggunakan PHP. Pertama buat untuk koneksi databasenya
file : db.php
[<?php
mysql_connect("localhost","root","") or die("error koneksi");
mysql_select_db("twd_ajaxsearch") or die("error pilih db");
?>]
Dan berikut ini adalah kode yang bertanggung jawab melakukan query database dan mengirim hasil pencarian.
[<?php
include "db.php";
$judul=$_POST["judul"];
$result=mysql_query("SELECT * FROM artikel where judul like '%$judul%' ");
$found=mysql_num_rows($result);
if($found>0){
while($row=mysql_fetch_array($result)){
echo "
<li>$row[judul]</br>
<a href=\"$row[link]\">$row[link]</a></li>
";
}
}else{
echo "
<li>Tidak ada artikel yang ditemukan
<li>";
}
?>]
Screnshot.
Source Code
Bagi yang ingin mendapatkan source code dari tutorial ini sekaligus beberapa file pendukung seperti gambar, javascript dan file sql bisa mendownloadnya
Disini
