Pertama buat database dengan nama latihan seperti gambar dibawah ini :
Yang kedua buat file koneksi.php, script dapat dilihat seperti dibawah ini :
<?php
$koneksi=mysql_connect("localhost","root",""); // koneksi ke server
$db=mysql_select_db("latihan"); // memilih database yang akan digunakan
?>
Yang ketiga buat file index.php, script dapat dilihat seperti dibawah ini :
<?php include "koneksi.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pencarian_data_Jquery-Ajax-PHP</title>
<!-- menginclude file jquery.min.js -->
<script src="jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
<!-- event textbox keyup
$("#txtcari").keyup(function() {
var strcari = $("#txtcari").val(); <!-- mendapatkan nilai dari textbox -->
if (strcari != "") <!-- jika value strcari tidak kosong-->
{
$("#hasil").html("<img src='loading.gif'/>") <!-- menampilkan animasi loading -->
<!-- request data ke cari.php lalu menampilkan ke <div id="hasil"></div> -->
$.ajax({
type:"post",
url:"cari.php",
data:"q="+ strcari,
success: function(data){
$("#hasil").html(data);
}
});
}
});
});
</script>
<div>Cari Data : <input type="text" name="textcari" id="txtcari" /> Isikan Nama</div>
<div id="hasil"></div>
</body>
</html>
Yang keempat buat file dengan nama cari.php , script dapat dilihat seperti dibawah ini :
<?php
include "koneksi.php";
$q=$_POST['q'];
// query untuk melakukan pencarian
$query=mysql_query("select * from mhs where nama like '%".$q."%'");
// mendapatkan jumlah baris
$row=mysql_num_rows($query);
if ($row > 0) // jika baris lebih dari 0 / data ditemukan
{
while ($data=mysql_fetch_array($query)) // perulangna untuk menampilkan data
{
// menampilkan data dalam bentuk table
echo "<table width='500'>
<tr>
<td>NPM</td>
<td>Nama</td>
<td>Jurusan</td>
<td>Alamat</td>
</tr>
<tr>
<td>".$data['npm']."</td>
<td>".$data['nama']."</td>
<td>".$data['jurusan']."</td>
<td>".$data['alamat']."</td>
</tr>
</table>";
}
}
else // jika data tidak ditemukan
{
echo "<strong>Data tidak ditemukan</strong>";
}
?>
Setelah semua itu dibuat, coba dijalankan pada browser kalian. Hasil dari script diatas seperti gambar dibawah ini :
0 komentar:
Post a Comment