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
Menyiapkan Database
Buat sebuah tabel dengan nama artikel sebagai berikut
1CREATE 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
data sample
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<body>
2   <div id="container">
3     <input type="text" id="search" placeholder="Cari Artikel Berdasarkan Judul"/>
4     <input type="button" id="button" value="Cari" />
5     <ul id="result"></ul>
6   </div>
7</body>
Selanjutnya kita tambahkan CSS untuk mempercantik HTML yang telah kita buat tadi.
1<style type="text/css">
2#container{
3   width:800px;
4   margin:0 auto;
5}
6
7#search{
8    width:700px;
9    padding:10px;
10}
11
12#button{
13    display: block;
14    width: 100px;
15    height:30px;
16    border:solid #366FEB 1px;
17    background: #91B2FA;
18}
19
20ul{
21    margin-left:-40px;
22}
23
24ul li{
25    list-style-type: none;
26    border-bottom: dotted 1px black;
27    height: 50px;
28}
29
30li:hover{
31    background: #A592E8;
32}
33
34a{
35    text-decoration: none;
36    font-size: 18px;
37}
38</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
1<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
2<script type="text/javascript">
3  $(document).ready(function(){
4                  
5      function search(){
6
7         var judul=$("#search").val();
8
9          if(judul!=""){
10              $("#result").html("<img src='img/ajax-loader.gif'/>");
11                $.ajax({
12                    type:"post",
13                    url:"search.php",
14                    data:"judul="+judul,
15                    success:function(data){
16                      $("#result").html(data);
17                      $("#search").val("");
18                    }
19                });
20          }                                   
21      }
22
23      $("#button").click(function(){
24          search();
25      });
26
27      $('#search').keyup(function(e) {
28          if(e.keyCode == 13) {
29             search();
30          }
31      });
32  });
33</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
1<?php
2  mysql_connect("localhost","root","") or die("error koneksi");
3  mysql_select_db("twd_ajaxsearch") or die("error pilih db");
4?>
Dan berikut ini adalah kode yang bertanggung jawab melakukan query database dan mengirim hasil pencarian.
1<?php
2 include "db.php";
3  
4 $judul=$_POST["judul"];
5
6 $result=mysql_query("SELECT * FROM artikel where judul like '%$judul%' ");
7 $found=mysql_num_rows($result);
8  
9 if($found>0){
10    while($row=mysql_fetch_array($result)){
11    echo "<li>$row[judul]</br>
12            <a href=\"$row[link]\">$row[link]</a></li>";
13    }  
14 }else{
15    echo "<li>Tidak ada artikel yang ditemukan <li>";
16 }
17?>
Screenshot

Tampilan Awal Program
Tampilan Awal Program
Tampilan Data Ditemukan
Tampilan Data Tidak Ditemukan
Tampilan Data Tidak Ditemukan
Source Code
Bagi yang ingin mendapatkan source code dari tutorial ini sekaligus beberapa file pendukung seperti gambar, javascript dan file sql bisa mendownloadnya disini
Semoga bermanfaat :)

Sumber:http://www.tutorial-webdesign.com/membuat-fitur-pencarian-data-berbasis-ajax-menggunakan-php-jquery-dan-mysql/

Comments

  1. mohon share pengetahuan. saya ingin membuat halamn pencarian melalui CMS joomla. Bagaimana caranya?dan kalau boleh dijelaskan langkah-langkahnya?
    Trims.

    ReplyDelete
    Replies
    1. untuk pencarian pada joomla saya belum pernah membuatnya...thanks

      Delete

Post a Comment

Popular posts from this blog

10 Tips Untuk Mempercepat Akses Database MySQL

Membuat pencarian data lebih dari satu table pada database dengan php script

Membuat Tabel View di PHPMyAdmin