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

Image From Mike

Artikel Sejenis

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
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

<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>";
 }
?>

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 :)

Image by: makeuseof





Penulis :

Software Engineer | .NET | Beautiful Code | Book Lover View all posts by Agung Setiawan

Comments

35 thoughts on “Membuat Fitur Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql

  1. AnimO says:

    TWD tutorialnya emang bagus2 dan lengkap gan, tpi untuk tutorial kali ini kok gak ada demonya ya? tpi ga ppa lah saya coba tutorialnya tadi bisa,hehe
    aku ikutin terus tutorialnya lewat email ya gan, semoga totorialnya semakin bagus dan menarik :)

    • Thanks…
      Iya tidak ada demo, karena menghindari penggunaan database & file2 demi penghematan :)
      dan agar membuat pembaca jadi mencoba sendiri agar lebih paham :)

    • wow banyak juga referensinya lumayan euy. Sekalian share juga yang belum skripsi beresin dulu. :D

      Download aplikasi web Gratis untuk TA dan skripsi.
      Download Aplikasi Koperasi Berbasis Web.ZIP – New !!
      Download Aplikasi Latihan Kepegawaian.ZIP – New !!
      Download Aplikasi Penjualan Tiket.ZIP
      Download Aplikasi Persediaan Barang.ZIP
      Download Aplikasi Peternakan Ayam Gratis.ZIP

      Download disini

  2. busra says:

    kok resultnya ngk aktif mas

  3. busra says:

    yang muncul sperti ini mas

    Warning: mysql_connect(): Access denied for user ‘root’@’localhost’ (using password: NO) in /home/u658197877/public_html/db.php on line 2 error koneksi

  4. makasih mastah,, semoga ilmunya selalu bermanfaat buat orang lain,,
    ane belum bisa komentar lain,, soalnya masih newbie,,

  5. Aris says:

    Mas sebelumnya makasih tor’y, ini mas saya mau tanya, kalau iven keyup‘y di ganti yang lain bisa gak, contohnya sebelum enter (pada saat mengetik) itu uda muncul hasil pencahariannya? kayak google searc gitu mas, maskasih?? kalau mas tidak keberatan, kirim ke email saya mas, makasih banyak mas.

  6. Makasih banget gan, udah sukses ane install di http://jtronik.com/cekhlr
    :)

  7. ae says:

    mas nulis jquerynya dimana mas?

  8. aldi says:

    mas klo kasus ny diubah sdikit menjadi sperti, misalnya :
    isi fieldnya tetp sma ada id, judul, dan link. contoh isinya =
    1. programmer http://www.prog.com
    2. database http://www.db.com
    3. css http://www.css.com

    lalu di form pencariannya saya ingin menacari dengan mengetikkan programmer,css kemudian saya klik search.

    maka nanti data yang keluar adlah :
    1. programmer http://www.prog.com
    3. css http://www.css.com

    kira” scriptnya bgaimana ya mas agar di textbox pencariannya jika penulisannya sperti yg diatas ( programmer,css ) jadi ada koma sbg pemisahny…
    thnks…

  9. risma says:

    mas, bgaimana klw untuk form inputan ditampilkan data berdasarkan data dalam database. misalnya sy input nama pembimbing dari data dosen y sudah ada dalam database cukup ketik a muncul semua nama dosen y ada huruf a nya. jadi tinggal dipilih aja. mohon bimbingannya
    thanks..

    • ya artikel ini untuk membuat seperti itu, tinggal modifikasi aja sesuai kebutuhannya.

      • Udin says:

        cara modifnya gmn agar bisa, ketika kita ketik input trus tampil teks yg ada dari database “judul”, terus ketika dienter atau tekan cari baru tampil dibawahnya (list)
        mas, jika bisa dikasih secrip modifannya agar bs kyk di atas..
        atas bantuannya terimakasih,.
        atau diemailkan di cepat12@gmail.com

  10. Yanto says:

    thx bermanfaat baru dapet dr forum.

  11. anto says:

    gan , itu hasilnya kog harus di mouse ya , klu pake navigasi keyboard naik turun gak bisa …… ? itu gmana gan ?

  12. abdul says:

    gan mohon, pencerahannya. bagaimana cara agar yang keluar hanya 1 field rujukan saja dan kata kuncinya harus sama dengan di database.
    terima kasih

    • Ini satu rujukan kok, yang dicari cuma field “judul” saja. Kalau yang mau dicetak hanya judul ya tinggal rubah di html nya field kedua jangan di cetak.
      Kalau untuk kata kunci harus sama, ya yang dibuat ini memang sudah sama dengan database, kalau mau lebih sama jangan make “like” di query nya, tapi pakai saja “where” (not recommended).

  13. Elgi says:

    Makasih tutornya admin,,,
    saya mau nanya,,, gimana caranya kalo datanya itu ditampilkan semuanya dulu, ntar kalo udah tekan tombol cari baru di filter sesuai variabel?

  14. bella says:

    kalo serch data berdasarkan tahun dan bulan gimana ya

  15. dimas says:

    agan trus inputnya gmn?

  16. hanip says:

    kalo querynya menggunakan 3 table itu gmna yaa???

  17. medi says:

    Makasih gan, atasi tutorialnya.
    Bagus bangt gan, mirip pencarian google hasilnya.
    Ijin sedot dulu ya gan..

    Salam, kalau ada waktu mampir ke blog ku ya…

  18. Tia says:

    mantep tutorialnya,,
    membuat pencerahan,, hehe
    tapi mau tanya, kalo misalnya kolom cari disana agar tidak bsa memfungsikan spasi gmn yah?
    jadi cuma mencari 1 kata saja,,

  19. Iqbal says:

    Saat saya search dengan tombol cari. tidak ada isinya? apakah ini diisi di query database? Dan isinya apakah di skrip atau di sql difolder database yg sy telah download

  20. franata says:

    thx TWD tutorialnya sangat bermanfaat

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development