Loading

24 Maret 2010

Tutorial Script Ajax: Combobox dengan ajax

Combobox mungkin bagi sebagian dari anda sudah tak asing lagi dengan istilah ini. combobox adalah 2 atau lebih menu dropdown yang mempunyai keterkaitan antara menu dropdown, yang sepesial disini adalah metode yang di gunakan adalah Ajax. Kenapa Ajax? Apa kelebihan dari Ajax??

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

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>

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:

dhiecool mengatakan...

thx a lot boss...

Anonim mengatakan...

thx alot Boss,,

ctr mengatakan...

sama-sama,.
^_^

Muhyazid mengatakan...

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..

jerry mengatakan...

makasih pak, wat ilmunya...smoga + sukses..

jerry mengatakan...

oya pak, betul yang diinfokan pak Muhyazid, kalo di IE gak bisa berfungsi combobox ajax-nya...gimana caranya ya pak?? mohon solusinya

Anonim mengatakan...

makasih pak...namun bolehkah saya bertanya...itu hasil kabupatennya di munculkan di jtextfield...karena punya saya...setiap id punya hasil 1 jg...thnks alot..

bobybibbob mengatakan...

to all:
untuk di IE yang lama emang tidak bisa,.
sebenarnya bisa tapi ada scrpt yang di ubah,.
nanti revisinya menyusul
:)

bobybibbob mengatakan...

@anonim:
maksud gmn ya??
bisa diperjelas pertanyaanya,.

febri mengatakan...

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......

bobybibbob mengatakan...

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

ctr mengatakan...

Untuk revisi combobox ajax sudah keluar,.
silahkan cek TKP

http://catment.blogspot.com/2010/11/demo-dan-tutorial-combobox-menggunakan.html

Anonim mengatakan...

mas tolong diconvertin ke basa java dunk hehe thx

ctr mengatakan...

@raxenz : ini kan tutorialnya ttg php, javascript, ajax,.
klo basa java ma ga ada,.
mav y,..
:)

struggle for life mengatakan...

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

bobybibbob mengatakan...

@struggle for life
Coba cek postingan yg ini mas:
http://catment.blogspot.com/2010/11/demo-dan-tutorial-combobox-menggunakan.html

Moga mbantu.. :)

laili umdatul khoirurosida mengatakan...

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