Dropdownlist dengan AJAX
Posted by: dEn t0w0 on: 3 June 2009
Kali ini kita akan belajar menggunakan dropdownlist dengan menggunakan AJAX dalam suatu form. Ilustrasinya adalah dalam suatu form terdapat dua dropdpwnlist, dimana dropdownlist yang pertama adalah nama-nama provinsi di Indonesia dan pada dropdownlist yang kedua berisi kota-kota di Indonesia. Dengan menggunakan AJAX kita dapat membuat dropdownlist yang kedua di otomatisasi, yang nantinya jika kita memilih provinsi Jawa Barat pada dropdownlist yang pertama maka pada dropdownlist yang kedua hanya muncul kota-kota yang ada di Jawa Barat saja.
Membuat database
Langkah pertama tentunya adalah kita harus membuat database untuk menyimpan data-data provinsi dan kota yang akan di tampilkan, Saya menggunakan database MySQL (phpmyadmin) buatlah database dengan nama db_dropdown. Pada phpmyadmin, isikan db_dropdown pada kotak isian create new database (ciptakan database baru) lalu klik tombol create (ciptakan). Lalu pilih db_dropdown, dan klik tab SQL. ketikan Query seperti dibawah ini pada kotak isian query lalu klik tombol ‘Go’.
Query untuk membuat database :
#
# Table structure for table `city`
#
CREATE TABLE city (
id tinyint(4) NOT NULL auto_increment,
city varchar(50) default NULL,
countryid tinyint(4) default NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;
#
# Dumping data for table `city`
#
INSERT INTO city VALUES (1, ‘Bandung’, 1);
INSERT INTO city VALUES (2, ‘Cirebon’, 1);
INSERT INTO city VALUES (3, ‘Surabaya’, 2);
INSERT INTO city VALUES (4, ‘Malang’, 2);
# ——————————————————–
#
# Table structure for table `province`
#
CREATE TABLE province (
id tinyint(4) NOT NULL auto_increment,
province varchar(20) NOT NULL default ”,
PRIMARY KEY (id)
) TYPE=MyISAM;
#
# Dumping data for table `province`
#
INSERT INTO province VALUES (1, ‘Jawa Barat’);
INSERT INTO province VALUES (2, ‘Jawa Timur’);
Maka pada db_dropdown kali ini kita mempunyai dua tabel yakni province dan city. Pada tabel province kita mempunyai dua field yakni id dan province berisi record untuk id 1, maka province nya adalah Jawa Barat, sedangkan untuk id 2 adalah Jawa Timur. Pada tabel city kita mempunyai tiga field yakni id, city dan provinceid berisi record untuk id 1, adalah (city) Bandung dan provinceid (1), id 2 adalah Cirebon dan provinceid (1), id 3 adalah Surabaya untuk provinceid (2) dan id 4 adalah Malang untuk provinceid (2).
Berikutnya mari kita membuat sebuah file, berisaja nama awal.php, berikut adalah skripnya :
<html>
<head>
<title>Belajar Dropdown List</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<?
$province = “”;
$link = mysql_connect(‘localhost’, ‘root’, ”);
if (!$link) {
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db(‘db_dropdown’);
$q = “select * from province”;
$r = mysql_query($q);
while ($row = mysql_fetch_array($r)){
$province .= “<option value=\”$row[id]\”>$row[province]</option>”;
}
?>
<script>
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e){
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCity(src) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if “OK”
if (req.status == 200) {
document.getElementById(src).innerHTML=req.responseText;
} else {
alert(“There was a problem while using XMLHTTP:\n” + req.statusText);
}
}
}
var val = document.form1.province.value;
req.open(“GET”, “city.php?data=”+src+”&data2=”+val, true);
req.send(null);
}
}
</script>
</head>
<body>
<form method=”post” action=”" name=”form1″>
<table width=”60%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”150″>Provinsi</td>
<td width=”150″>
<select name=”country” id=”country” onChange=”getCity(‘citydiv’)”>
<option value=”">—- Pilih Provinsi —-</option>
<?=$province?>
</select>
</td>
</tr>
<tr style=”">
<td>Kota</td>
<td>
<div id=”citydiv”>
<select name=”city” id=”city”>
<option>—- Pilih Kota —-</option>
</select>
</div>
</td>
</tr>
</table>
</form></body>
</html>
lalu kombinasikan dengan file berikut ini, berinama city.php, dengan skripnya adalah sebagai berikut :
<?
$data = $_GET['data'];
$data2 = $_GET['data2'];
$link = mysql_connect(“localhost”, “root”, “”);
if (!$link) {
die(‘Could not connect: ‘ . mysql_error());
}
mysql_select_db(‘db_dropdown’);
$q=”SELECT * FROM city WHERE provinceid =’$data2′”;
$res=mysql_query($q);
if($data==’citydiv’){
?>
<div id=”citydiv”>
<select name=”city”>
<option>—- Pilih Kota —-</option>
<? while($row=mysql_fetch_array($res)) { ?>
<option value=”"><?=$row['city']?></option>
<? } ?>
</select>
</div>
<?
}
?>
Memilih Jawa Barat
Memilih Jawa Timur
Leave a Reply
Dimulai dari sesuatu yang bodoh
Soulmate
Kamu di :
Technology
- Blog Focus on Cost Savings in Technology 11 November 2009
- Duran Duran Bassist Says Twitter "Dilutes Creative Powers" 11 November 2009
- Truly Green or Eco-friendly? 11 November 2009
- TechNet Magazine Bytes the Dust 11 November 2009
- LA Times Columnist T.J. Simers Calls Ricky Davis 'a Druggie' 10 November 2009
Teu Ngarti??
| T | Timeless |
| O | Orderly |
| W | Witty |
| O | Odd |
Name Acronym Generator
From Go-Quiz.com
Recent Comments