Membuat Aplikasi Pencarian Data dengan Efek Highlight

Sebelumnya saya sudah menulis artikel yang berjudul membuat aplikasi pencarian data menggunakan fungsi if. Artikel ini hampir sama dengan sebelumnya, hanya saja akan ditambah dengan efek highlight, dimana ketika hasil dari pencarian disorot, maka akan menampilkan efek highlight.

Jika anda ingin mencobanya,

pertama buatlah file html berikut untuk menampilkan kolom pencarian.

<center><h2>APLIKASI PENCARIAN</h2>
<form method=GET action='cari_highlight.php'>
 Masukkan nama yang ingin dicari: 
  <input type='text' name='keyword'>
  <input type='submit' name='Submit' value='Submit'><br><br>
  <b>algoritma-cyber.blogspot.com</b>
</form>
<hr width="509"> 
<h3> Hasil Pencarian </h3>
<table border="1">

jika anda jalankan program tersebut.

akan keluar output seperti ini:

sekarang buatlah sebuah database dengan satu tabel yang mempunyai field id, nama, dan blog. Database ini nantinya digunakan sebagai hasil pencarian pada program yang kita buat.
Jika sudah, tambahkan skrip php berikut ini:

<?php
error_reporting(0);
mysql_connect("localhost","root","");
mysql_select_db("hadisearch");

if ($_GET['Submit']){
 $keyword = $_GET['keyword'];
 $sql = mysql_query("SELECT NIP, nama FROM penulis WHERE nama LIKE '%$keyword%'");
 while ($data = mysql_fetch_array($sql)){
  echo "<tr><td>$data[NIP], $data[nama] </td></tr>";
 }
}
?>
</table>

sebelumnya anda harus memiliki library jquery dulu,

bisa anda DOWNLOAD DISINI 

setelah itu tambahkan skrip berikut tepat diatas kode <center>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

skrip diatas digunakan untuk memanggil library jquery yang baru saja anda download.

setelah itu tambahkan javascript tepat dibawah kode </table>

<script type="text/javascript">
$("tr").not(':first').hover(
 function () {
  $(this).css("background","yellow");
 }, 
 function () {
  $(this).css("background","");
 }
);
</script>

simpan program anda,

dan sekarang coba anda jalankan lagi.

jika berhasil akan keluar output seperti ini: