Membuat Aplikasi Pencarian Buku Menggunakan AJAX Suggest


Bismillaah, kali ini saya mencoba berbagi info tentang bagaimana membuat pencarian dengan menggunakan AJAX Suggest. Langsung saja lah yaaa… Ikuti dan simak baik-baik.

  1. Buatlah database dengan nama databuku dengan relasi tabel sebagai berikut :
  2.  Nah, kalau sudah bikin dulu file untuk koneksi databasenya.
    <?php
     $host='localhost';
     $user='root';
     $pwd='';
     $database='databuku';
    
     $conn=mysql_connect($host,$user,$pwd) or die (mysql_error());
     mysql_select_db($database,$conn);
    ?>
    
    
  3. Buatlah kode seperti di bawah ini, sebagai interface utamanya!
    <?php
     include "db_connect.php";
    ?>
    <html>
    <head>
     <title>Bukuku</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <script language="javascript" type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
    <div id="top"></div>
    <div id="undertop">
     <img id="logo" src="MyBooks.gif"></img>
     <form id="form_cari" method="post">
     <select id='pilihan' name="pilihan">
     <option value="judul">Judul</option>
     <option value="pengarang">Pengarang</option>
     <option value="penerbit">Penerbit</option>
     <option value="kategori">Kategori</option>
     </select>
     <input type="text" id="kata" name="kata" onkeyup="lihat(this.value)">
     <input type="submit" id="cari" value="Cari"/>
     <div id="kotaksugest" style="font-style:bold;
     position:absolute;background-color:#F8F8F8;
     border:1px solid #D8D8D8;width:393px;visibility:hidden;
     margin-left:353px;z-index:100;list-style:none;
     font:14px Arial bold;padding:5px 0 5px 5px;margin-left:352px;"></div>
     </form>
    </div>
    <?php
     include "searchQry.php";
    ?>
    </body>
    </html>
    
  4. Kemudian buat file baru dengan nama ajax.js yang memuat fungsi-fungsi javascript untuk menampilkan suggestion!
    var drz;
     function lihat(kata){
     if(kata.length==0){
     document.getElementById("kotaksugest").style.visibility = "hidden";
     }else{
     drz = buatajax();
     var url="searchSuggest.php";
     drz.onreadystatechange=stateChanged;
     var pilihan=encodeURIComponent(document.getElementById("pilihan").value)
     var kata=encodeURIComponent(document.getElementById("kata").value)
     drz.open("GET", "searchSuggest.php?pilihan="+pilihan+"&kata="+kata, true)
     drz.send(null)
     }
    
     }
    
     function buatajax(){
     if (window.XMLHttpRequest){
     return new XMLHttpRequest();
     }
     if (window.ActiveXObject){
     return new ActiveXObject("Microsoft.XMLHTTP");
     }
     return null;
     }
    
     function stateChanged(){
     var data;
     if (drz.readyState==4 && drz.status==200){
     data=drz.responseText;
     if(data.length>0){
     document.getElementById("kotaksugest").innerHTML = data;
     document.getElementById("kotaksugest").style.visibility = "";
     }else{
     document.getElementById("kotaksugest").innerHTML = "";
     document.getElementById("kotaksugest").style.visibility = "hidden";
     }
     }
     }
    
     function isi(kata){
     document.getElementById("kata").value = kata;
     document.getElementById("kotaksugest").style.visibility = "hidden";
     document.getElementById("kotaksugest").innerHTML = "";
     }
    
  5. Setelah itu ketik kode di bawah ini untuk menampilkan data suggestion berdasar  inputan dari user ! File ini akan dipanggil pada fungsi lihat(kata) yang terdapat dalam file ajax.js.  Simpan file ini dengan nama searchSuggest.php!
    <?php
     include "db_connect.php";
    
     $pilihan = $_GET['pilihan'];
     $kata = $_GET['kata'];
    
     $query=null;
     if($pilihan == 'judul'){
     $query ="select judul_buku from buku where judul_buku like '$kata%' ";
     }
     else if($pilihan == 'pengarang'){
     $query = "select pengarang_buku from buku where pengarang_buku like '$kata%' ";
     }
     else if($pilihan == 'penerbit'){
     $query = "SELECT distinct penerbit.nama_penerbit FROM buku ,penerbit
     where buku.id_penerbit_buku = penerbit.id_penerbit
     and penerbit.nama_penerbit LIKE '$kata%' ";
     }
     else if($pilihan == 'kategori'){
     $query = "SELECT distinct kategori.nama_kategori FROM buku,
     kategori where buku.id_kategori_buku = kategori.id_kategori
     and kategori.nama_kategori LIKE '$kata%' ";
     }
    
     $res=mysql_query($query) or die(mysql_error());
    
     while($k=mysql_fetch_array($res) ){
     echo '<li id="list" onClick="isi(\''.$k[0].'\');" style="cursor:pointer">'.$k[0].'</li>';
     }
    
    ?>
    
  6. Buatlah file baru dengan nama searchQry.php yang akan menampilkan hasil pencarian!
    <?php
     $kata = $_POST['kata'];
     $pilihan = $_POST['pilihan'];
    
     if ((isset($kata)) and (!empty($kata))){
     echo "<div id='freespace'>";
     echo "<div id='left'>Penelusuran</div>
     <div id='right'>Hasil pencarian berdasar $pilihan</div>";
     echo "</div>";
     echo "<div id='result'>";
     echo "<table>";
     echo "<tr>";
     echo "<th>No</th>
     <th>Judul Buku</th>
     <th>Pengarang</th>
     <th>Penerbit</th>
     <th>Kategori</th>
     <th>Kode Rak</th>";
     echo "</tr>";
    
     $query = mysql_query("SELECT * FROM buku
     LEFT JOIN penerbit ON buku.id_penerbit_buku = penerbit.id_penerbit
     LEFT JOIN kategori ON buku.id_kategori_buku = kategori.id_kategori
     WHERE buku.judul_buku LIKE '$kata%'
     OR buku.pengarang_buku LIKE '$kata%'
     OR penerbit.nama_penerbit LIKE '$kata%'
     OR kategori.nama_kategori LIKE '$kata%'");
    
     $i=0;
     while($data=mysql_fetch_array($query)){
     $i++;
     echo"<tr>
     <td align='center'>".$i."</td>
     <td>".$data['judul_buku']."</td>
     <td>".$data['pengarang_buku']."</td>
     <td>".$data['nama_penerbit']."</td>
     <td>".$data['nama_kategori']."</td>
     <td>".$data['kd_rak_buku']."</td>
     </tr>";
     }
     echo "</table>";
     echo "</div>";
     }
    ?>
    
  7. Agar lebih menarik, berikan style dengan code CSS berikut ini :
    *{
     margin:0;
     padding:0;
    }
    table{
     border-collapse:collapse;
     width:auto;
    }
    th{
     border:1px solid #686868;
     padding:2px 2px 2px 5px;
     background:#F0F0F0;
    }
    td{
     border:1px solid #686868;
     padding:2px 2px 2px 5px;
    }
    #result{
     margin-top:30px;
     margin-left:100px;
    }
    #top{
     width:100%;
     height:30px;
     background:black;
    }
    #undertop{
     width:100%;
     height:70px;
     background:#F0F0F0;
     border-bottom:1px solid #E0E0E0;
    }
    #logo{
     padding:5px 100px 0 50px;
     width:200px;
     height:65px;
     float:left;
    }
    #form_cari{
     padding:23px 0 0 100px;
    }
    #pilihan{
     border:1px solid #D8D8D8;
     padding:5px 5px 5px 5px;
    }
    #kata{
     width:400px;
     height:30px;
     border:1px solid #D8D8D8;
     padding:0 0 0 5px;
    }
    #list{
     padding-bottom:5px;
    }
    #cari{
     width:40px;
     height:30px;
     border:1px solid #808080;
     border-radius:5px;
     background:#0066FF;
     color:white;
    }
    #freespace{
     height:40px;
     border-bottom:1px solid #E0E0E0;
     color:#FF0033;
     text-align:left;
     padding-top:20px;
     padding-left:50px;
    }
    #left{
     float:left;
     font:18px "Arial";
    }
    #right{
     font:14px "Arial";
     color:#808080;
     margin-left:300px;
     margin-top:4px;
    }
    
    
  8. Tampilan saat user menginputkan kata kunci :

Selamat mencoba dan selamat menikmati. Sekian dan terimakasih. Oh ya, silahkan download source code nya di sini

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s