INDONESIANWARE - Pada Artikel yang anda baca kali ini dengan judul Membuat Pencarian Data dengan jQuery Ajax dan PHP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Pencarian Data dengan jQuery Ajax dan PHP
link : Membuat Pencarian Data dengan jQuery Ajax dan PHP
Membuat Pencarian Data dengan jQuery Ajax dan PHP
Karena sudah sangat lama sekali saya tidak memposting tentang PHP, pada malam hari ini saya memutuskan untuk memposting tentang PHP, pada postingan malam hari ini saya akan share tentang cara membuat Pencarian Data dengan jQuery Ajax dan PHP. dengan cara ini Ajax akan melakukan request data ke php lalu data tersebut akan di tampilkan ke website tanpa perlu reload halaman web.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
Sekianlah artikel Membuat Pencarian Data dengan jQuery Ajax dan PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Pencarian Data dengan jQuery Ajax dan PHP dengan alamat link https://ware-id.blogspot.com/2014/09/membuat-pencarian-data-dengan-jquery.html
EmoticonEmoticon