Tutorial Pencarian dengan Ajax + PHP seperti Google Search

Saat anda mencari dengan Google, anda bisa mendapatkan hasil pencarian bahkan sebelum anda menekan tombol ‘cari’? Betul ga? itu adalah teknologi Google Instant Search. Dalam tutorial ini, kira kira begitulah yang akan kita buat. Alih alih cuma menampilkan autocomplete, kenapa ga sekalian menampilkan hasilnya.

Skenenario

Sistem yang akan kita buat adalah sistem pencarian data film. Saat user memasukan data misalkan “the” secara otomatis hasil pencarian akan menampilkan “The Amazing spiderman”, “The Avenger” dan setiap film yang berawalan The. Namun, dalam data contoh hanya desediakan 16 film populer saja, anda bisa menambahkannya sendiri nanti. Yang lebih menarik, hasil pencarian yang kita lakukan bukan hanya menampilkan judul film saja, namun juga gambar poster dan deskripsinya, Cool kan?

Rancangan Database

source code

01 02 03 04 05 06 07 08 09 10 11

-- -- Struktur dari tabel `film` -- CREATE TABLE IF NOT EXISTS `film` (   `idfilm` int(11) NOT NULL AUTO_INCREMENT,   `judul` varchar(100) NOT NULL,   `poster` varchar(50) NOT NULL,   `sinopsis` text NOT NULL,   PRIMARY KEY (`idfilm`) ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

Tabel terdiri dari 4 kolom yaitu idfilm,judul,poster dan sinopsis.

Rancangan Form

Form hanya berisi 1 buah input dan tombol search disamping.

source code

01 02 03 04 05 06 07 08 09 10

<form class="form-search">     <div class="input-append">       <input type="text"  name="search_query" id="search_query"       placeholder=" Judul film yang dicari? ex: 'The Avenger'"       class="input-xxlarge search-query">       <button type="submit" id="button_find" class="btn">         <i class='icon-search' ></i>       </button>     </div>   </form>

Script jQuery Ajax

source code

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//$("#search_results").slideUp();     $("#button_find").click(function(event) {       event.preventDefault();       //search_ajax_way();       ajax_search();     });     $("#search_query").keyup(function(event) {       event.preventDefault();       //search_ajax_way();       ajax_search();     });   });   function ajax_search() {     var judul = $("#search_query").val();     $.ajax({       url : "cari.php",       data : "judul=" + judul,       success : function(data) {   // jika data sukses diambil dari server tampilkan         // di div display_results         $("#display_results").html(data);       }     });

Script PHP untuk mengambil data dari MySQL

<?php
$connection = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('belajarphpdb', $connection);
$term = strip_tags(substr($_GET['judul'],0, 100));
$term = mysql_escape_string($term); // Attack Prevention
if($term=="")
echo "<p class=\"text-error\">Masukan judul film yang akan anda cari!";
else{
 
$query = mysql_query("select * 
from film 
where judul like '%$term%'")  or die(mysql_error());
$hasil = '';

if (mysql_num_rows($query)){
while($rows = mysql_fetch_array($query)){

$hasil=$hasil." <div class=\"row\">
 <div class=\"span8\">
  <div class=\"row\">
   <div class=\"span8\">
    <h4>$rows[judul]</h4>
   </div>
  </div>
  <div class=\"row\">
   <div class=\"span2\">
     <img src=\"image/$rows[poster]\"  class=\"img-polaroid\">
   </div>
   <div class=\"span6\">
    <p align='justify'>
     $rows[sinopsis]
    </p>
    
    
   </div>
  </div>
</div>
</div>";

}
} else{
$hasil = " 
<h4 style='color:red'>Film tidak ditemukan!</h4>
<img src='image/404.jpg'>";
}

echo $hasil;
}
?>

Demo dan source code

Bagi yang ingin mencobanya, silahkan klik disini, bagi yang ingin mendownload source code lengkapnya silahkan download sini.

sumber candra.web.id