Membuat Aplikasi Pencarian Menggunakan JQuery
Aplikasi
pencarian merupakan aplikasi yang sangat dibutuhkan pada setiap
website, yang digunakan untuk memudahkan mencari keyword yang dituju.
Contohnya google, twitter, bahkan facebook yang sampai saat ini masih
menggunakan aplikasi pencarian. Bayangkan saja jika suatu website tidak
mempunyai fitur pencarian, tentunya ini akan menyusahkan pengunjung
untuk mencari kata kunci yang diinginkan. Pada kali ini kita akan
mencoba membuat aplikasi pencarian yang dimiliki oleh jejaring sosial
raksasa saat ini yaitu facebook.
Dalam tahap pembuatannya mungkin terbilang cukup sulit,
untuk itu ikuti tutorial ini dari awal sampai akhir.
langkah pertama anda harus menginstal web server pada komputer anda.
bisa berupa XAMPP, WAMP, ataupun AppServ.
Selanjutnya buatlah database dengan nama "hadisearch", tanpa kutip.
kemudian buatlah satu tabel dengan nama "penulis" tanpa kutip.
dengan 6 buah field, yaitu: NIP, nama, blog, motto, kota, dan foto.
selanjutnya bukalah notepad++ anda.
dan ketikan programnya seperti ini:
simpan dengan nama index.html
<html>
<head>
<title>Search Penulis</title>
</head>
<body bgcolor="#82c0fa"><center> <h2>DAFTAR NAMA PENULIS BUKU IT</h2>
Cari Penulis: <input type="text" id="suggest" /><br /><br />
<table id="penulisDetail" style="display:none">
<tr>
<td colspan="4"><div class="detail_title">Detail Penulis</div></td>
</tr>
<tr valign="top">
<td rowspan="5"><img src="" id="dataFoto" /></td>
<td>NIP</td>
<td>:</td>
<td id="dataNIP"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td id="dataNama"></td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td id="datakota"></td>
</tr>
<tr>
<td>Facebook</td>
<td>:</td>
<td id="datablog"></td>
</tr>
<tr>
<td>Motto</td>
<td>:</td>
<td id="datamotto"></td>
</tr>
</table>
</body>
</html>
Jika anda jalankan program tersebut dan mengetikan nama pada caripenulis.
akan keluar output seperti pada gambar dibawahi ini:
tidak akan keluar apa2. karena program tersebut masih baru menampilkan interfacenya saja.
Selanjutnya buatlah file baru dengan nama search.php.
lalu ketikkan programnya seperti ini:
<?php
if(isset($_GET['q'])){
mysql_connect('localhost','root',''); # koneksi ke database
mysql_select_db('hadisearch'); # pilih table
$param = mysql_escape_string($_GET['q']);
# lakukan pencarian, tampilkan nama pegawai yang berawalan nilai parameter "q"
$query = mysql_query("SELECT * FROM penulis WHERE nama LIKE '$param%'") or die(mysql_error());
if(mysql_num_rows($query) > 0){
$data = array(); # siapkan variable untuk menampung keseluruhan data
while($row = mysql_fetch_object($query)){
$data[] = $row; # input data ke variable array satu per satu baris hasil query
}
/*
* Variable yang mengandung keseluruhan data dari query lalu di konversi
* ke JSON dengan fungsi dari PHP5 "json_encode". Hasil keluaran ini akan
* diterima dan di proses oleh Ajax di plugin autocomplete pada file "index.html"
* */
die(json_encode($data));
}
}
?>
lalu masuk kedatabase anda.
dengan URL : localhost/phpmyadmin
dan pada tabel penulis, masukan datanya sesuai keinginan anda,
atau sperti pada gambar dibawah ini:
Masukanlah 3 data ataupun lebih.
pada field foto, masukan link tempat foto anda disimpan.
Selanjutnya anda membutuhkan library 2 buah library jquery.
yaitu: jquery.min.js dan jquery.autocomplete.js
jquery tersebut bisa anda download dilink dibawah ini:
ekstrack hasil downloadn tadi.
dan kembali pada file index.html tadi.
tambahkan skrip berikut untuk memanggil jquery yang baru saja kita download.
letakan tepat dibawah kode </title>
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
selanjutnya tambahkan javaskript berikut tepat dibawah kode </skript>
<script language="javascript">
$(function(){
$('#suggest').autocomplete('search.php',
{
parse: function(data){
var parsed = [];
for (var i=0; i < data.length; i++) {
parsed[i] = {
data: data[i],
value: data[i].nama // nama field yang dicari
};
}
return parsed;
},
formatItem: function(data,i,max){
var str = '<div class="search_content">';
str += '<img src="'+(data.foto ? data.foto : 'foto/unknown.jpeg')+'" height="70" align="left" />';
str += '<u>'+data.nama+'</u><br />Kota '+data.kota;;
str += '</div>';
return str;
},
width: 350, // panjang tampilan pencarian autocomplete yang akan muncul di bawah textbox pencarian
dataType: 'json' // tipe data yang diterima oleh library ini disetup sebagai JSON
}
).result( // fungsi ini akan dipanggil setelah user memilih salah satu result pencarian autocomplete
function(event,data,formated){
$('#penulisDetail').show(); // tampilan table detail yang di hide sebelumnya
$('#dataNIP').text(data.NIP);
$('#dataNama').text(data.nama);
$('#datakota').text(data.kota);
$('#datablog').text(data.blog);
$('#datamotto').text(data.motto);
// tampilkan foto pada element <img id="dataFoto">, apabila foto kosong, maka tampilkan default unknown image
$('#dataFoto').attr('src',data.foto ? data.foto : 'foto/unknown.jpeg');
}
);
});
</script>
simpan program anda, dan coba anda jalankan lagi.
ketikan nama yang sudah anda buat didatabase.
misalnya hadi, maka akan keluar output sepeti pada gambar dibawah ini:
dan jika anda klik pada nama yang keluar, maka akan menampilkan output seperti ini:
sekarang pada kolom search, coba anda ketikan huruf m.
maka akan keluar nama yang berawal huruf m
setelah testing program,
program anda berjalan dengan lancar, hanya saja tampilannya masih berantakan.
untuk itu buatlah file baru dengan nama jquery.autocomplete.css
dan buatlah programnya seperti ini:
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
selanjutnya kembali lagi pada file index.html.
tambahkan skrip berikut untuk memanggil file css yang baru saja dibuat
letakan tepat dibawah kode </skript>
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css">
sekarang coba anda testing program anda lagi.
jika berhasil akan keluar output seperti gambar dibawah ini:
sekarang anda tinggal merapihkan pada bagian detail penulis saja.
untuk itu buatlah file baru lagi,misalnya dengan nama: custom_search.css
lalu buatlah programnya seperti ini:
body,table{
font-family: Arial;
font-size: 12px;
}
.search_content{
clear: left;
height: 85px;
padding: 4px;
}
.detail_title{
background-color: #00417d;
padding: 2px;
-moz-border-radius: 2px;
color:yellow;
}
sekarang
kembali lagi pada file index.html
tambahkan kode berikut tepat dibawah kode </skript>
<link rel="stylesheet" href="css/custom_search.css" type="text/css">
Sekarng uji coba lagi program anda.
jika semua berhasil akan keluar output seperti gambar dibawh ini:
0 Comments
