Silahkan download database nya terlebih dahulu jika agan-agan belum ada database nya
http://www.4shared.com/document/OY5UeaQp/motor_1_.html?
dan langkah selanjutnya download dulu plugin JQuerynya di http://www.4shared.com/document/a7xL0t1l/Plugin.html
simpan file jquery di folder kerja kita , pertama buat file formnya terlebih dahulu seperti berikut
<html>
<head>
<title>Search with JQuery</title>
<script type="text/javascript" src="Plugin.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("#kata").keyup(function(){
var kata = $("#kata");
$.ajax({
type : "POST",
url : "search.php",
data : "kata="+kata.val(),
success : function(data){
$("#hasil").html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="kata">
<div id="hasil">
</body>
</html>
Penjelasan kode :
1. $("#kata").keyup(function())
fungsi ini berguna untuk menjalankan event ketika kita mengetikan karakter di textbox yang memiliki id kata
2.$.ajax({
type : "POST",
url : "search.php",
data : "kata="+kata.val(),
success : function(data){
$("#hasil").html(data);
}
});
-type berguna untuk method yang akan kita gunakan
-url merupakan file yang akan kita gunakan untuk proses ajax/pertukaran data
-data merupakan inputan yang akan kita kirim pada url
-success , jika kita berhasil maka data akan dikirim ke url dan div hasil akan berubah sesuai dengan isi yang ditentukan pada file search.php
sekarang buat file search.php,berikut codenya
<html>
<head>
<title></title>
<style type="text/css">
#hasil{
border:1px solid blue;
background-color: cyan;
width: 200px;
}
</style>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db('motor');
$kata = $_POST['kata'];
$sql = "select * from motor where Nama like '%$kata%'";
$query= mysql_query($sql);
$row = mysql_num_rows($query);
if($row==0){
echo "hasil tidak ada";
}else{
while($array=mysql_fetch_array($query)){
echo "<div id=hasil>".$array['Nama'];
echo "<img src='motor/$array[Gambar]'></div>";
}
}
?>
</body>
</html>
penjelasan code :
1.$kata = $_POST['kata'];
variable tersebut merupakan variable yang di bawa dari file formnya
2.$sql = "select * from motor where Nama like '%$kata%'";
memanggil data berdasarkan nama yang sesuai dengan karakter yang kita inputkan
maka tampilannya akan seperti berikut
pada data saya , terdapat motor dengan nama mx , selamat mencoba dan semoga bermanfaat
No comments:
Post a Comment