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]
