Jasa Toko Online

Tutorial Pencarian dengan Ajax + PHP seperti Google Search

ADSENSE HERE!

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
ADSENSE HERE!

FOLLOWER

Copyright © Dumai Web Blog. All rights reserved. Template by CB