Tuesday, January 19, 2010

Mengubah Dropdown List dengan Ajax dan PHP


Sudah banyak artikel yang mengupas tentang mengubah dropdown list dengan Ajax dan PHP. Saya hanya akan mereview aja. Mungkin aja boz lupa sintaknya, betul gak? Keuntungan kalau website atau aplikasi yang kita buat telah menggunakan Ajax adalah halaman tidak perlu direfresh saat menampilkan data. Itu artinya pengguna tidak harus menunggu lama untuk melihat data yang diinginkan.

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');

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 :
<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;
}

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;
?>

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 :



Tags: ,

2 Responses to “Mengubah Dropdown List dengan Ajax dan PHP”

MLM Software said...
December 15, 2010 at 10:56 PM

Nice Post

Pooja

MLM Developers India

http://mlmdevelopers.com/products/mlm-software/corporate-mlm-soft/f

eature.html


Anonymous said...
March 16, 2011 at 10:19 PM

Sip.. mantaf... makasih-makasih


Post a Comment

Jangan ragu untuk menghubungi saya kapan saja boz memiliki pertanyaan, saran, pengumuman atau hanya ingin mengatakan "Hai!".

© 2013 CoPas Galeria. All rights reserved.
Designed by SpicyTricks