Kita langsung membahas contoh kasusnya ya boz. Misalnya pada sebuah aplikasi terdapat sebuah form untuk memasukkan data barang dimana setiap barang tergabung ke dalam sebuah grup barang. Contohnya kita punya sebuah grup barang dengan nama TV yang mempunyai beberapa merk barang seperti Soni, Sarap, ElGe, Dijitak, dan Sungsang.
Mari kita mulai dengan membuat dua buah tabel yaitu tabel grupbarang dan tabel barang. Kemudian masukkan beberapa sample data.
CREATE TABLE IF NOT EXISTS `grupbarang` (
`idgrupbarang` varchar(10) NOT NULL,
`grupbarang` varchar(40) NOT NULL,
PRIMARY KEY (`idgrupbarang`)
);
INSERT INTO `grupbarang` (`idgrupbarang`, `grupbarang`) VALUES
('Tv', 'Televisi'),
('Ant', 'Antena'),
('Kbl', 'Kabel');
CREATE TABLE IF NOT EXISTS `barang` (
`idbarang` varchar(20) NOT NULL,
`idgrupbarang` varchar(10) NOT NULL,
`barang` varchar(50) NOT NULL,
PRIMARY KEY (`idbarang`)
);
INSERT INTO `barang` (`idbarang`, `idgrupbarang`, `barang`) VALUES
('Tv1', 'Tv', 'Soni'),
('Tv2', 'Tv', 'Sarap'),
('Tv3', 'Tv', 'ElGe'),
('Ant1', 'Ant', 'Antena UHF PF Goceng'),
('Ant2', 'Ant', 'Antena UHF PF Ceban'),
('Tv4', 'Tv', 'Dijitak'),
('Tv5', 'Tv', 'Sungsang'),
('Kbl1', 'Kbl', 'Kabel Roll Hitam'),
('Kbl2', 'Kbl', 'Kabel Rol Bening'),
('Kbl3', 'Kbl', 'Kabel Antena Gepeng'),
('Kbl4', 'Kbl', 'Kabel Antena Bulat');
`idgrupbarang` varchar(10) NOT NULL,
`grupbarang` varchar(40) NOT NULL,
PRIMARY KEY (`idgrupbarang`)
);
INSERT INTO `grupbarang` (`idgrupbarang`, `grupbarang`) VALUES
('Tv', 'Televisi'),
('Ant', 'Antena'),
('Kbl', 'Kabel');
CREATE TABLE IF NOT EXISTS `barang` (
`idbarang` varchar(20) NOT NULL,
`idgrupbarang` varchar(10) NOT NULL,
`barang` varchar(50) NOT NULL,
PRIMARY KEY (`idbarang`)
);
INSERT INTO `barang` (`idbarang`, `idgrupbarang`, `barang`) VALUES
('Tv1', 'Tv', 'Soni'),
('Tv2', 'Tv', 'Sarap'),
('Tv3', 'Tv', 'ElGe'),
('Ant1', 'Ant', 'Antena UHF PF Goceng'),
('Ant2', 'Ant', 'Antena UHF PF Ceban'),
('Tv4', 'Tv', 'Dijitak'),
('Tv5', 'Tv', 'Sungsang'),
('Kbl1', 'Kbl', 'Kabel Roll Hitam'),
('Kbl2', 'Kbl', 'Kabel Rol Bening'),
('Kbl3', 'Kbl', 'Kabel Antena Gepeng'),
('Kbl4', 'Kbl', 'Kabel Antena Bulat');
Sekarang kita buat file PHP dan Javascript.
InputForm.php
<?php
// sesuaikan path penyimpanan library adodb anda
include("../libs/adodb/adodb.inc.php");
$db=ADONewConnection('mysql');
$db->Connect('localhost','root', '','test');
?>
<!-- Sertakan file ajax.js -->
<script language="javascript" src="ajax.js"></script>
<h2>Input Data Barang</h2>
<form method="post" action="" name="inputform" id="inputform">
<?php
// ambil data grup barang dari tabel grubarang
$GB=$db->Execute("SELECT idgrupbarang, grupbarang FROM grupbarang");
?>
Grup barang :
<?php
while(!$GB->EOF){
?>
<option value="<?php echo $GB->fields['idgrupbarang']?>"><?php echo $GB->fields['grupbarang']?></option>
<?php
$GB->MoveNext();
}
?>
</select>
<br />City :
</select>
</form>
// sesuaikan path penyimpanan library adodb anda
include("../libs/adodb/adodb.inc.php");
$db=ADONewConnection('mysql');
$db->Connect('localhost','root', '','test');
?>
<!-- Sertakan file ajax.js -->
<script language="javascript" src="ajax.js"></script>
<h2>Input Data Barang</h2>
<form method="post" action="" name="inputform" id="inputform">
<?php
// ambil data grup barang dari tabel grubarang
$GB=$db->Execute("SELECT idgrupbarang, grupbarang FROM grupbarang");
?>
Grup barang :
<select name="idgrupbarang" onChange="showHint(this.value)">
<option value="" selected="selected">Pilih Grup Barang</option><?php
while(!$GB->EOF){
?>
<option value="<?php echo $GB->fields['idgrupbarang']?>"><?php echo $GB->fields['grupbarang']?></option>
<?php
$GB->MoveNext();
}
?>
</select>
<br />City :
<select name="idbarang" id="idbarang">
<option>-</option></select>
</form>
ajax.js
var xmlHttp
function showHint(str){
if (str.length==0){
document.getElementById("idbarang").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
alert ("Browser anda tidak support AJAX!");
return;
}
var url="CariBarang.php";
url=url+"?id="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4){
document.getElementById("idbarang").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function showHint(str){
if (str.length==0){
document.getElementById("idbarang").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
alert ("Browser anda tidak support AJAX!");
return;
}
var url="CariBarang.php";
url=url+"?id="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4){
document.getElementById("idbarang").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
CariBarang.php
<?php
// sesuaikan path penyimpanan library adodb anda
include("../libs/adodb/adodb.inc.php");
$db=ADONewConnection('mysql');
$db->Connect('localhost','root', '','test');
/*
Nilai variabel $id diambil dari variabel id yang dideklarasikan pada file ajax.js
*/
$id=$_GET['id'];
$B=$db->Execute("SELECT idbarang, barang FROM barang WHERE idgrupbarang='$id'");
$hint="";
while(!$B->EOF){
$hint.="<option value=".$B->fields['idbarang'].">".$B->fields['barang']."</option>";
$B->MoveNext();
}
if ($hint == ""){
$response="Tidak ada data barang";
}else{
$response=$hint;
}
//output responnya
echo $response;
?>
// sesuaikan path penyimpanan library adodb anda
include("../libs/adodb/adodb.inc.php");
$db=ADONewConnection('mysql');
$db->Connect('localhost','root', '','test');
/*
Nilai variabel $id diambil dari variabel id yang dideklarasikan pada file ajax.js
*/
$id=$_GET['id'];
$B=$db->Execute("SELECT idbarang, barang FROM barang WHERE idgrupbarang='$id'");
$hint="";
while(!$B->EOF){
$hint.="<option value=".$B->fields['idbarang'].">".$B->fields['barang']."</option>";
$B->MoveNext();
}
if ($hint == ""){
$response="Tidak ada data barang";
}else{
$response=$hint;
}
//output responnya
echo $response;
?>
Antara file InputForm.php, ajax.js, dan CariBarang.php saling berhubungan. Pada InputForm.php kita menyertakan ajax.js.
<script language="javascript" src="ajax.js"></script>
Pada saat grup barang sudah kita pilih, method onChange="showHint(this.value)" akan mengirimkan data idgrupbarang yang baru saja dipilih ke ajax.js dan disimpan pada variabel id (url=url+"?id="+str;). Oleh ajax.js diteruskan ke file CariBarang.php, di file inilah terjadi query ke tabel barang berdasarkan nilai dari variabel id. Setelah proses query selesai, CariBarang.php mengirimkan hasil query ke ajax.js kemudian diteruskan ke InputForm.php dan diletakkan pada atribut id="idbarang".
Preview
Saat pertama kali dibuka, file InputForm.php akan menampilkan form seperti ini :
Setelah memilih salah satu grup barang, maka akan muncul daftar barang berdasar grub barang yang dipilih seperti ini :
