Melanjutkan dari artikel yang sebelumnya tentang Cara pengambilan data dari database dengan Ajax dan PHP sangat mungkin juga kita membuat proses pencarian tanpa reload seperti data table, Jika sebelumnya untuk keyword nya sudah tersedia lewat option-option, pada artikel kali ini kita akan mendapatkannya dari masukan pengguna yang di tulis pada kolom search.
Pada artikel kali ini, kita menggunakan pernyataan SQL yang melibatkan klausa LIKE Berikut script index.php yang menyajikan form masukan data.
<html>
<head>
<title>Tutorial Ajax - Dewa Coding 21</title>
<script type='text/javascript' src='ajax.js'></script>
</head>
<body onload='search()'>
<form>
<input type='text' id='q' placeholder='search...' />
</form>
<!-- Untuk menampilkan data -->
<div id='tampil'></div>
</body>
</html>
Untuk kode Ajax yang diperlukan, secara umum mirip dengan kode ajax yang terdapat pada artikel sebelumnya. Hanya ada perbedaan sedikit. Berikut script Ajax.js .
var xmlHttp = false;
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function search() {
xmlHttp = createXmlHttpRequest();
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
var k = document.getElementById('q').value;
var url = 'search.php';
url = url + "?q=" + k;
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} else {
setTimeout('search()', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById('tampil').innerHTML = xmlHttp.responseText;
setTimeout('search()', 1000);
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
function createXmlHttpRequest() {
var xmlHttp = false;
if (window.ActivateXObject) {
xmlHttp = new ActivateXObject("Microsoft.XMLHTTP");
} else {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp) {
alert("Gagal Menciptakan objek");
}
return xmlHttp;
}
function search() {
xmlHttp = createXmlHttpRequest();
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
var k = document.getElementById('q').value;
var url = 'search.php';
url = url + "?q=" + k;
xmlHttp.onreadystatechange = handleRespon;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
} else {
setTimeout('search()', 1000);
}
}
function handleRespon() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
document.getElementById('tampil').innerHTML = xmlHttp.responseText;
setTimeout('search()', 1000);
} else {
alert("Error: " + xmlHttp.statusText);
}
}
}
Langkah selanjutnya adalah menyediakan kode PHP untuk proses pencarian di database. berikut script search.php
<?php
$mysqli = new mysqli('localhost', 'root', '', 'ajax');
$sql = 'SELECT * FROM mahasiswa WHERE nama LIKE ?';
$stmt = $mysqli->prepare($sql);
$stmt->bind_param('s', $val);
$val = '%' .trim($_GET['q']). '%';
$res = $stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $nama, $alamat);
if($res) {
if($stmt->num_rows) { ?>
<table width='100%' border='1'>
<tr>
<th width='30px'>ID</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<?php while($stmt->fetch()) { ?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php
$stmt->free_result();
} else {
echo "Data Not Found";
}
}
$stmt->close;
?>
$mysqli = new mysqli('localhost', 'root', '', 'ajax');
$sql = 'SELECT * FROM mahasiswa WHERE nama LIKE ?';
$stmt = $mysqli->prepare($sql);
$stmt->bind_param('s', $val);
$val = '%' .trim($_GET['q']). '%';
$res = $stmt->execute();
$stmt->store_result();
$stmt->bind_result($id, $nama, $alamat);
if($res) {
if($stmt->num_rows) { ?>
<table width='100%' border='1'>
<tr>
<th width='30px'>ID</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<?php while($stmt->fetch()) { ?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php
$stmt->free_result();
} else {
echo "Data Not Found";
}
}
$stmt->close;
?>
Hasilnya, jikan Anda tidak memasukkan keyword apapun, maka akan ditampilkan semua data, dan sebaliknya jika anda memasukkan sebuah data maka tampilan juga akan menampilkan dengan apa yang anda masukkan.
Untuk source code / semua file berikut design nya bisa anda Download Disini / Here
Terima kasih telah mengunjungi blog Dewa Coding 21 Jangan lupa berkomentar :)
Tutorial cara membuat search tanpa reload dengan Ajax dan PHP
4/
5
Oleh
Unknown
