Tutoral kali ini merupakan lanjutan tutorial
AutoComplite, kali ini akan ditambahkan proses pencarian dengan metode
JSON.
- Langkah pertama buat database barang
Struktur database dan contoh datanya
CREATE TABLE `tbbarang` (
`kodebarang` char(25) NOT NULL,
`namabarang` varchar(100) DEFAULT NULL,
`hargabeli` int(11) DEFAULT NULL,
`hargajual` int(11) DEFAULT NULL,
`stokawal` smallint(6) DEFAULT NULL,
PRIMARY KEY (`kodebarang`)
);
INSERT INTO `tbbarang` VALUES ('001', 'TOP Kopi', '950', '1000', '1000');
INSERT INTO `tbbarang` VALUES ('002', 'Pulpy Orange', '4500', '5000', '10');
- Langkah kedua buat file barang.php
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript">
$().ready(function() {
$("#barang").autocomplete("proses_barang.php", {
width: 150
});
$("#barang").result(function(event, data, formatted) {
var kode = formatted;
$.ajax({
type : "POST",
data : "kode="+kode,
url : "cari_barang.php",
dataType: "json",
success: function(data){
$("#namabarang").val(data.namabarang);
$("#hargabeli").val(data.hargabeli);
}
});
});
$("#barang").keyup(function() {
var kode = $('#barang').val();
$.ajax({
type : "POST",
data : "kode="+kode,
url : "cari_barang.php",
dataType: "json",
success: function(data){
$("#namabarang").val(data.namabarang);
$("#hargabeli").val(data.hargabeli);
}
});
});
});
</script>
</head>
<body>
<div class="demo" style="width: 450px;">
<div>
<p>Kode Barang : <input type="text" id="barang"></p></div>
<p>Nama Barang : <input type="text" id="namabarang" size="50" disabled></p>
<p>Harga Beli : <input type="text" id="hargabeli" size="15" align="right" disabled></p>
</div>
</div>
</body>
</html>
- Langkah ketiga buat file proses_barang.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("tutorial_jquery");
$q = strtolower($_GET["q"]);
if (!$q) return;
$sql = mysql_query("select kodebarang from tbbarang where kodebarang LIKE '%$q%'");
while($r = mysql_fetch_array($sql)) {
$kode_barang = $r['kodebarang'];
echo "$kode_barang \n";
}
?>
- Langkah keempat buat file cari_barang.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("tutorial_jquery");
$kode = $_POST[kode];
$sql = mysql_query("select * from tbbarang where kodebarang='$kode'");
$row = mysql_num_rows($sql);
if($row>0){
$r = mysql_fetch_array($sql);
$data['namabarang'] = $r[namabarang];
$data['hargabeli'] = $r[hargabeli];
echo json_encode($data);
}else{
$data['namabarang'] = '';
$data['hargabeli'] = '';
echo json_encode($data);
}
?>
Kode Program
Download
pak Deddy, bgmn kalau menggabungkan autocomplete yg menggunakan source : caring_barang.php
BalasHapusSaya mau nangkap field, dari array menjadi id.
tks.
mantap gan ijin coba dulu
BalasHapusmaaf kok pencariaannya gak bisa knp ya mas,mohon bimbingannya??
BalasHapuspak, saya ingin belajar membuat web responsive tentang membuat aplikasi CRUD dengan PHP & PostgreSQL. bisa buatkan saya TUTOR lengkap dasar-lanjut, jika cocok saya bersedia membeli TUTOR nya.
BalasHapusThz, Eddy - 0823 020 73513
kok linknya error?? bisa di perbarui ??
BalasHapus