Pada postingan kali ini saya akan membagikan cara membuat pencarian PHP berbasis Jquery + Ajax. Terkadang pada suatu kasus tertentu, kita membutuhkan pencarian yang memanfaatkan ajax untuk memberikan kemudahan pada pengguna aplikasi yang kita buat.
Konsep dalam pencarian PHP ini adalah, kita akan menyediakan suatu text box dan pada saat pengguna mengetikkan kata pencarian maka aplikasi langsung merespon dan menampilkan hasil pencarian.
Jangan lupa sediakan library jquery yang bisa anda download di http://jquery.com/download/ dalam tutorial ini saya menggunakan jquery 11.0.
Menyiapkan database pencarian PHP Ajax Jquery
Silahkan anda buat database serta tabel terserah anda fieldnya apa saja dan isikan beberapa data. Dalam tutorial PHP ini saya menggunakan Database dengan nama pencarian dan table pengguna. Field nama dalam tabel pengguna akan dijadikan sebagai objek untuk pencariannya.
Ok, database telah siap sekarang buat sebuah folder dalam root direktori web server lokal yang anda gunakan contoh: C:xampphtdocs.
Buat file index.php dan simpan dalam folder yang baru anda buat.
<!DOCTYPE HTML>
<html>
<head>
<title>Pencarian PHP Ajax + Jquery</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
function cari(){
//membuat variabel val_cari dan mengisinya dengan nilai pada field cari
var val_cari = $('#cari').val();
//kode 1
var request = $.ajax ({
url : "cari.php",
data : "cari="+val_cari,
type : "GET",
dataType: "html"
});
//menampilkan pesan Sedang mencari saat aplikasi melakukan proses pencarian
$('#hasil-cari').html('Sedang Mencari…');
//Jika pencarian selesai
request.done(function(output) {
//Tampilkan hasil pencarian pada tag div dengan id hasil-cari
$('#hasil-cari').html(output);
});
}
</script>
</head>
<body>
<input type="text" id="cari" onkeyup="cari();">
<div id="hasil-cari">
<!– Data akan tampil disini –>
</div>
</body>
</html>
Saya jelaskan sedikit mengenai file yang baru kita buat, pada tag head kita memanggil library jquery. Jangan lupa untuk menyertakannya karena jika tidak maka aplikasi pencarian PHP yang akan kita buat tidak akan berjalan.
Masih dalam tag head, di sini saya mendefinisikan function (fungsi) yang saya beri nama cari. fungsi inilah yang akan dijalankan pada saat pengguna mengetikkan kata kunci. Pemanggilan fungsi ini dapat anda lihat pada tag input dengan atribut onkeydown yang artinya jalankan fungsi cari saat pengguna mengetikkan sesuatu pada field.
Anda bisa melihat penjelasan singkat dalam scriptnya yang berupa komentar.
Nah sekarang kita buat file cari.php lalu simpan satu folder dengan file index.php.
file cari.php ini yang akan melakukan pencarian pada database.
cari.php
<?php
//Koneksi database
$koneksi = mysql_connect('localhost','db_username','db_password');
mysql_select_db('db_name', $koneksi);
//Mengambil isi parameter cari
$cari = $_GET['cari'];
if ( !empty ( $cari ) ) {
//Query sql untuk mencari data
$sql = mysql_query("SELECT nama from pengguna where nama LIKE '%$cari%'");
//Cek apakah data ditemukan
$row = mysql_num_rows( $sql );
//Jika ditemukan maka tampilkan
if ( $row != 0 ) {
while ( $r = mysql_fetch_object( $sql ) ) {
echo $r->nama . "<br>";
}
//Jika tidak ditemukan tampilkan pesan berikut
} else { echo "Tidak menemukan data"; }
}
?>
Ok, sekarang aplikasi pencarian PHP ajax kita sudah jadi. Silahkan berkreasi.
