Dengan menggunakan Ajax halaman kita tidak perlu me-reload semua halaman. Sekarang langsung saja ke study kasus, study kasus kali ini adalah saat memilih dropdown propinsi maka dropdown kabupaten berubah.
Langkah-langkah untuk membuat combobox dengan ajax adalah sebagai berikut:
Pertama-tama buatlah database dengan nama combobox beserta tabelnya..
buat database dengan nama combobox, lalu buat tabel propinsi yang di dalamnya terdapat idPropinsi dan propinsi. buat tabel kabupaten yang didalamnya terdapat idKabupaten, kabupaten dan idPropinsi
CREATE DATABASE combobox;
CREATE TABLE propinsi (
idPropinsi varchar(5) NOT NULL,
propinsi varchar(50) NOT NULL,
PRIMARY KEY (idPropinsi)
);
INSERT INTO propinsi VALUES ('001', 'propinsi A');
INSERT INTO propinsi VALUES ('002', 'propinsi B');
INSERT INTO propinsi VALUES ('003', 'propinsi C');
INSERT INTO propinsi VALUES ('004', 'propinsi D');
CREATE TABLE kabupaten (
idKabupaten varchar(5) NOT NULL,
kabupaten varchar(50) NOT NULL,
idPropinsi varchar(5) NOT NULL,
PRIMARY KEY (idKabupaten)
);
INSERT INTO kabupaten VALUES ('001', 'kabupaten A1', '001');
INSERT INTO kabupaten VALUES ('002', 'kabupaten A2', '001');
INSERT INTO kabupaten VALUES ('003', 'kabupaten A3', '001');
INSERT INTO kabupaten VALUES ('011', 'kabupaten B1', '002');
INSERT INTO kabupaten VALUES ('012', 'kabupaten B2', '002');
INSERT INTO kabupaten VALUES ('013', 'kabupaten B3', '002');
INSERT INTO kabupaten VALUES ('021', 'kabupaten C1', '003');
INSERT INTO kabupaten VALUES ('022', 'kabupaten C2', '003');
INSERT INTO kabupaten VALUES ('023', 'kabupaten C3', '003');
INSERT INTO kabupaten VALUES ('031', 'kabupaten D1', '004');
INSERT INTO kabupaten VALUES ('032', 'kabupaten D2', '004');
INSERT INTO kabupaten VALUES ('033', 'kabupaten D3', '004');
CREATE TABLE propinsi (
idPropinsi varchar(5) NOT NULL,
propinsi varchar(50) NOT NULL,
PRIMARY KEY (idPropinsi)
);
INSERT INTO propinsi VALUES ('001', 'propinsi A');
INSERT INTO propinsi VALUES ('002', 'propinsi B');
INSERT INTO propinsi VALUES ('003', 'propinsi C');
INSERT INTO propinsi VALUES ('004', 'propinsi D');
CREATE TABLE kabupaten (
idKabupaten varchar(5) NOT NULL,
kabupaten varchar(50) NOT NULL,
idPropinsi varchar(5) NOT NULL,
PRIMARY KEY (idKabupaten)
);
INSERT INTO kabupaten VALUES ('001', 'kabupaten A1', '001');
INSERT INTO kabupaten VALUES ('002', 'kabupaten A2', '001');
INSERT INTO kabupaten VALUES ('003', 'kabupaten A3', '001');
INSERT INTO kabupaten VALUES ('011', 'kabupaten B1', '002');
INSERT INTO kabupaten VALUES ('012', 'kabupaten B2', '002');
INSERT INTO kabupaten VALUES ('013', 'kabupaten B3', '002');
INSERT INTO kabupaten VALUES ('021', 'kabupaten C1', '003');
INSERT INTO kabupaten VALUES ('022', 'kabupaten C2', '003');
INSERT INTO kabupaten VALUES ('023', 'kabupaten C3', '003');
INSERT INTO kabupaten VALUES ('031', 'kabupaten D1', '004');
INSERT INTO kabupaten VALUES ('032', 'kabupaten D2', '004');
INSERT INTO kabupaten VALUES ('033', 'kabupaten D3', '004');
Setelah itu buat index.php
<?php
include"config.php";
?>
<html>
<head>
<title>Tes Combobox</title>
</head>
<body>
<script type='text/javascript'>
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}
var xmlhttp = createRequestObject();
function rubah(pilih)
{
var idPropinsi = pilih.value;
if (!idPropinsi) return;
xmlhttp.open('get', 'ambildata.php?idPropinsi='+idPropinsi, true);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("kabupaten").innerHTML = xmlhttp.responseText;
return false;
}
xmlhttp.send(null);
}
</script>
<form>
<select name="idPropinsi" onChange="javascript:rubah(this)">
<option value=''>-pilih Propinsi-</option>
<?php
$pilih="SELECT * FROM propinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idPropinsi]'>$row[propinsi]</option>
";
}
?>
</select>
<select id="kabupaten">
</select>
</form>
</body>
</html>
include"config.php";
?>
<html>
<head>
<title>Tes Combobox</title>
</head>
<body>
<script type='text/javascript'>
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}
var xmlhttp = createRequestObject();
function rubah(pilih)
{
var idPropinsi = pilih.value;
if (!idPropinsi) return;
xmlhttp.open('get', 'ambildata.php?idPropinsi='+idPropinsi, true);
xmlhttp.onreadystatechange = function()
{
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("kabupaten").innerHTML = xmlhttp.responseText;
return false;
}
xmlhttp.send(null);
}
</script>
<form>
<select name="idPropinsi" onChange="javascript:rubah(this)">
<option value=''>-pilih Propinsi-</option>
<?php
$pilih="SELECT * FROM propinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idPropinsi]'>$row[propinsi]</option>
";
}
?>
</select>
<select id="kabupaten">
</select>
</form>
</body>
</html>
Langkah berikutnya adalah membuat config.php untuk konfigurasi dan koneksi antara web dan databese MySQL
<?php
//tentukan host, bila anda menggunakan local biasanya localhost
$hostname_conn="host";
//username, bila anda menggunakan local biasanya root
$username_conn="username";
//password MySQL
$password_conn="password";
//nama database
$db_conn="database";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total". mysql_error());
mysql_select_db ($db_conn);
?>
Terakhir adalah membuat ambildata.php
dari index.php yang menampilkan tampilan dropdown propinsi, dan jika di pilih salah satu propinsi maka akan membangkitkan fungsi yang merequest ke ambildata.php dan selanjutnya respon dari ambildata.php akan di kirimkan ke index.php
<?php
//mengkoneksikan ke server MySQL
include"config.php";
$idPropinsi=$_GET['idPropinsi'];
//men-query yang memiliki id propinsi sama
$pilih="SELECT * FROM kabupaten WHERE idPropinsi=$idPropinsi";
$query=mysql_query($pilih);
while($row=mysql_fetch_array($query))
{
echo"
<option value='$row[idKabupaten]'>$row[kabupaten]</option>
";
}
?>
[download script] <<--->>> [view demo @ http://catment.co.cc/demo/combobox_ajax]
17 comments:
thx a lot boss...
thx alot Boss,,
sama-sama,.
^_^
mas..
di browser IE versi lama kok ga bisa jalan ya mas javascriptnya??
apa yang salah ya mas??
di mozila saya coba bisa jalan..
kan ga asik kalau ga bisa di Internet Explorer..
makasih pak, wat ilmunya...smoga + sukses..
oya pak, betul yang diinfokan pak Muhyazid, kalo di IE gak bisa berfungsi combobox ajax-nya...gimana caranya ya pak?? mohon solusinya
makasih pak...namun bolehkah saya bertanya...itu hasil kabupatennya di munculkan di jtextfield...karena punya saya...setiap id punya hasil 1 jg...thnks alot..
to all:
untuk di IE yang lama emang tidak bisa,.
sebenarnya bisa tapi ada scrpt yang di ubah,.
nanti revisinya menyusul
:)
@anonim:
maksud gmn ya??
bisa diperjelas pertanyaanya,.
salam kenal...
q punya masalah tentang combobox ni...
q punya 3 database:
1. table propinsi
idprop|nmprop|ibukotaprop
2. table kabupaten
idkab|nmkab|ibukotakab
3. table kecamatan
idkec|nmkec|ibukotakec
yg mau q tanyain gimana caranya nampilin combo (isinya nama propinsi) dan textbox (isinya ibukota propinsi)...
terima kasih......
slm kenal jg feb..
mksud'a 1 database 3 tabel x y?
jadi mksd'a mau nampilin nama propinsi pk tag select trus setelah pilih propinsi kluar ibukota propinsinya y?
coba cek aja postingan yg ini http://catment.blogspot.com/2010/11/demo-dan-tutorial-combobox-menggunakan.html
sama aja kan?datanya juga sama2 dari 1 tabel juga..
klo blm puas blh email atau kirim message FB saya di bobybibbob@gmail.com
Untuk revisi combobox ajax sudah keluar,.
silahkan cek TKP
http://catment.blogspot.com/2010/11/demo-dan-tutorial-combobox-menggunakan.html
mas tolong diconvertin ke basa java dunk hehe thx
@raxenz : ini kan tutorialnya ttg php, javascript, ajax,.
klo basa java ma ga ada,.
mav y,..
:)
mas.. bagaimana kalo ke dua combobox itu digabungin lagi sama tabel (2 combobox + 1 tabel) , tabel ini semisal daftar semua sekolah SMA yang ada di tiap2 kota tersebut.
nb B : maksud table disini yaitu di html
@struggle for life
Coba cek postingan yg ini mas:
http://catment.blogspot.com/2010/11/demo-dan-tutorial-combobox-menggunakan.html
Moga mbantu.. :)
sangat bergunaa :D terimakasih banyak!
Posting Komentar
Untuk konsultasi, tanya-tanya tentang web programming, php, ajax, mysql, javascript, html, script bisa komen disini.
Untuk proyek atau tugas tentang web bisa komen disini.
Atau dapat langsung hubungi kami:
Email:
tawank.x@gmail.com
bobybibbob@gmail.com
YM:
tawank_x
bobybibbob