Langkah - langkah Membuat Pencarian Data dengan jQuery Ajax dan PHP
1. Buat sebuah database dengan nama latihan lalu buat table dengan nama mhs
create table mhs (
npm varchar(15) primary key,
nama varchar(30),
jurusan varchar(30),
alamat varchar(50)
)
2. Buat sebuah file dengan nama index.php dan masukan script dibawah ini
<!-- include file koneksi.php -->
<?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>[Tutorial_Koding]_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" /></div>
<div id="hasil"></div>
</body>
</html>
3. Buat sebuah file dengan nama koneksi.php dan masukan script dibawah ini
<?php
$koneksi=mysql_connect("localhost","root","root"); // koneksi ke server
$db=mysql_select_db("latihan"); // memilih database yang akan digunakan
?>
4. Buat sebuah file dengan nama cari.php dan masukan script 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>";
}
?>
5. Buka browser lalu masukan url http://localhost/nama_folder_tempat_menyimpan_file_php/
Anda bisa mendownload source codenya disini
dan untuk passwordnya disini
Sekian dari saya.
Terima kasih atas kunjugannya semoga bermanfaat
0 komentar:
Post a Comment