EKSTRA WEB DESIGN

Membuat Fitur Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql 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 sebuah fitur pencarian data artikel berdasarkan judul. 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. Image From Mike Artikel Sejenis • Membuat Form Login dengan PHP, Jquery & CSS3 + Download Menyiapkan Database Buat sebuah tabel dengan nama artikel sebagai berikut 1 CREATE TABLE `artikel` ( 2 `id` int(11) NOT NULL AUTO_INCREMENT, 3 `judul` varchar(75) NOT NULL, 4 `link` varchar(100) NOT NULL, 5 PRIMARY KEY (`id`) 6 ) 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 1 2

3 4 5

6

7 Selanjutnya kita tambahkan CSS untuk mempercantik HTML yang telah kita buat tadi. 1 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 1 2 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 1 Dan berikut ini adalah kode yang bertanggung jawab melakukan query database dan mengirim hasil pencarian. 1 0){ 10 while($row=mysql_fetch_array($result)){ 11 echo "

$row[judul]
12 $row[link]

"; 13 } 14 }else{ 15 echo "

Tidak ada artikel yang ditemukan

"; 16 } 17 ?> Screenshot