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

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/