Tutorial Pencarian dengan Ajax + PHP


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?

Tampilan Live Movie Search yang akan kita bangun
Tampilan Live Movie Search yang akan kita bangun

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

?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?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 : http://www.candra.web.id/2013/03/02/tutorial-pencarian-dengan-ajax-php/

No comments:

Post a Comment