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
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 ; |
Rancangan Form
Form hanya berisi 1 buah input dan tombol search disamping.
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
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
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 Preventionif($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