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. Unknown3 March 2014 at 22:24

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

    ReplyDelete
    Replies
    1. Dziks G15 May 2014 at 23:32

      untuk pencarian pada joomla saya belum pernah membuatnya...thanks

      Delete

Post a Comment

Popular posts from this blog

Error Login Lokomet..???

-
Image
Saya baru saja membeli buku "Rahasia Inti Master PHP dan MySQLi (improved)" karya Lukmanul Hakim dan dengan tidak sabar langsung mencoba skrip lokomet yang disertakan di CD nya. Namun tidak seperti biasanya ketika saya coba mengakses halaman administrasi  terjadi error seperti gambar dibawah ini:
Read more

10 Tips Untuk Mempercepat Akses Database MySQL

-
Image
Relational Database Management System erat kaitannya dengan pengembangan aplikasi yang dinamis. Karena dinamis, database memegang peranan yang vital dalam proses berjalannya sebuah logika program. Untuk itu, performa dari sebuah database sangat menentukan kelancaran kerja sebuah aplikasi dinamis. Yang mempengaruhi kecepatan akses sebuah database tidak hanya masalah hardware yang digunakan. Kita bisa juga meningkatkan performa dari sebuah query ke database dengan beberapa trik. Berikut tip-tip mempercepat query SQL pada RDBMS open-source yang paling banyak dipakai saat ini, MySQL. Relational Database Management System Desain database Anda dengan benar Mungkin terdengar sangat standar, tetapi nyatanya banyak masalah yang timbul berkenaan dengan database yang bersumber dari disain awal yang buruk. Bisa dibilang, pondasi yang buruk akan mnyebabkan masalah-masalah lain yang kadang lebih buruk. Sebagai seorang programer pemula, kadang kita terbiasa menyimpan informasi, ...
Read more

Cara menambahkan Custom CSS ke Admin Wordpress

-
Image
Tambahkan kode dibawah ini ke namafilemu.php di plugin anda. add_action( 'admin_head' , 'my_custom_paging' ); function my_custom_paging() { echo '<style> .pagination{padding: 10px 0;font-size: 14px; border-top:2px solid #4D4D4D; } .pagination a {padding: 4px 5px; color: #333; margin: 0 1px; background:#fff; border:1px solid #ddd; text-decoration: none;} .pagination a:hover {background:#666; color: #fff; border:1px solid #333;} .pagination strong {font-weight:bold;padding: 4px 5px; margin: 0 1px; border:1px solid #888888; background:#98BF21; color: #fff;} .pagination-info{font-size:11px; padding: 6px 0 0 0;} #paging{ font-family: Tahoma; font-size: 8pt; } </style>'; } Hasilnya...
Read more