Membuat Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql

Sudah lazim dalam sebuah website atau aplikasi web untuk memiliki fitur pencarian data berdasarkan...

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
Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Membuat Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql
Membuat Pencarian Data Berbasis Ajax Menggunakan PHP, jQuery dan MySql
https://2.bp.blogspot.com/-Qz_f8KMVCfI/Ub8MlaS9KMI/AAAAAAAALhI/Jlc91BaE2WE/s320/php.png
https://2.bp.blogspot.com/-Qz_f8KMVCfI/Ub8MlaS9KMI/AAAAAAAALhI/Jlc91BaE2WE/s72-c/php.png
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2013/06/membuat-pencarian-data-berbasis-ajax.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2013/06/membuat-pencarian-data-berbasis-ajax.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy