Membuat ComboBox Bertingkat dan Terkoneksi Dengan Database, PHP MYSQL
Pertama kita buat databasenya dulu.
1
CREATE DATABASE ‘combobox_bertingkat’ ;
Kemudian kita buat tabel provinsi.
CREATE TABLE ‘combobox_bertingkat’.’prov’ (
‘id_prov’ INT( 2 ) NOT NULL ,
‘nama_prov’ CHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;
Kemudian buat tabel kabupaten/kota. Pada tabel kabupaten/kota ini terdapat kolom id_prov yang nantinya berelasi dengan kolom id_prov pada tabel prov.
CREATE TABLE `combobox_bertingkat`.`kabkot` (
`id_prov` INT( 2 ) NOT NULL ,
`id_kabkot` INT( 4 ) NOT NULL ,
`nama_kabkot` CHAR( 40 ) NOT NULL
) ENGINE = MYISAM ;
Selanjutnya buat tabel kecamatan. Pada tabel ini terdapat kolom id_prov yang nantinya berelasi dengan id_prov pada tabel prov dan id_kabkot yang nantinya berelasi dengan kolom id_kabkot pada tabel kabkot.
CREATE TABLE `combobox_bertingkat`.`kec` (
`id_prov` INT( 2 ) NOT NULL ,
`id_kabkot` INT( 4 ) NOT NULL ,
`id_kec` INT( 4 ) NOT NULL ,
`nama_kec` CHAR( 40 ) NOT NULL
) ENGINE = MYISAM ;
Terakhir kita membuat tabel data yang akan kita gunakan untuk menyimpan data dari combobox yang kita pilih. Disini terdapat id_prov, id_kabkot dan id_kec yang berelasi dengan tabel prov, tabel kabkot dan tabel kec.
CREATE TABLE `combobox_bertingkat`.`data` (
`id_data` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`id_prov` INT( 2 ) NOT NULL ,
`id_kabkot` INT( 4 ) NOT NULL ,
`id_kec` INT( 4 ) NOT NULL
) ENGINE = MYISAM ;
Setelah semua tabel sudah siap, saatnya kita mengisi tabel satu persatu disesuaikan dengan relasi antar tabelnya. Pasti capek ya harus ngisi satu-satu nama provinsinya belum kabupaten tiap provinsinya belum lagi nama kecamatan tiap kabupatennya. Walalalala. Tapi tenang saya udah nyiapin databasenya yang sudah terisi full. Silahkan download disini.
Setelah semua tabel terisi dengan baik, selanjutnya kita membuat form inputan combobox yang memanggil data dari database dan tabel yang menampilkan data dari tabel data pada database. Kita namai dengan index.php.
<html>
<head><title>Combobox Bertingkat</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
//apabila terjadi event onchange terhadap object <select id=propinsi>
$("#propinsi").change(function(){
var propinsi = $("#propinsi").val();
$.ajax({
url: "ambilkota.php",
data: "propinsi="+propinsi,
cache: false,
success: function(msg){
//jika data sukses diambil dari server kita tampilkan
//di <select id=kota>
$("#kota").html(msg);
}
});
});
$("#kota").change(function(){
var kota = $("#kota").val();
$.ajax({
url: "ambilkecamatan.php",
data: "kota="+kota,
cache: false,
success: function(msg){
$("#kec").html(msg);
}
});
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","");
mysql_select_db("combobox_bertingkat");
?>
<form id="" method="post" action="simpan.php">
Pilih Provinsi :<br>
<select name="propinsi" id="propinsi">
<option>--Pilih Provinsi--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$propinsi = mysql_query("SELECT * FROM prov ORDER BY nama_prov");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[id_prov]\">$p[nama_prov]</option>\n";
}
?>
</select>
<br>Pilih Kabupaten/Kota :<br>
<select name="kota" id="kota">
<option>--Pilih Kabupaten/Kota--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$kota = mysql_query("SELECT * FROM kabkot ORDER BY nama_kabkot");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[id_kabkot]\">$p[nama_kabkot]</option>\n";
}
?>
</select>
<br>Pilih Kecamatan :<br>
<select name="kec" id="kec">
<option>--Pilih Kecamatan--</option>
</select><p>
<input id='' type ='submit' value='Simpan' name=''/>
<input type="reset" value="Batal">
</form>
<p>
<table width='500' border='1' cellspacing='1' align='left'>
<?php
mysql_connect("localhost","root","");
mysql_select_db("combobox_bertingkat");
$query=mysql_query("
SELECT * FROM data
JOIN prov ON data.id_prov = prov.id_prov
JOIN kabkot ON data.id_kabkot = kabkot.id_kabkot
JOIN kec ON data.id_kec = kec.id_kec") or die (mysql_error());
?>
<tr align='center'><td>No.</td><td>Provinsi</td><td>Kabupaten/Kota</td><td>Kecamatan</td></tr>
<?php
$no="1";
while ($row=mysql_fetch_array($query))
{
$nmprov = $row['nama_prov'];
$nmkab = $row['nama_kabkot'];
$nmkec = $row['nama_kec'];
echo "<tr><td width='10'>";
echo "$no";
echo "</td><td>";
echo "$nmprov";
echo "</td><td>";
echo "$nmkab";
echo "</td><td>";
echo "$nmkec";
echo "</td></tr>";
$no++;
}
?>
</table>
</body>
</html>
Oh iya sebelumnya kita juga harus membuat file php untuk memanggil data pada tabel kabkot. Kita beri nama dengan ambilkota.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("combobox_bertingkat");
$propinsi = $_GET['propinsi'];
$kota = mysql_query("SELECT id_kabkot,nama_kabkot FROM kabkot WHERE id_prov='$propinsi' order by nama_kabkot");
echo "<option>-- Pilih Kabupaten/Kota --</option>";
while($k = mysql_fetch_array($kota)){
echo "<option value=\"".$k['id_kabkot']."\">".$k['nama_kabkot']."</option>\n";
}
?>
Kemudian juga harus membuat script untuk memanggil data kecamatan dari database. Kita akan menyebutnya dengan ambilkecamatan.php.
<?php
mysql_connect("localhost","root","");
mysql_select_db("combobox_bertingkat");
$kota = $_GET['kota'];
$kec = mysql_query("SELECT id_kec, nama_kec FROM kec WHERE id_kabkot='$kota' order by nama_kec");
echo "<option>-- Pilih Kecamatan --</option>";
while($k = mysql_fetch_array($kec)){
echo "<option value=\"".$k['id_kec']."\">".$k['nama_kec']."</option>\n";
}
?>
Terakhir kita membuat file untuk melakukan eksekusi penyimpanan ke tabel data pada database. Biasa disebut dengan simpan.php.
<?php
mysql_connect("localhost","root","");
mysql_select_db("combobox_bertingkat");
$propinsi=$_POST['propinsi'];
$kota=$_POST['kota'];
$kec=$_POST['kec'];
$masuk = mysql_query ("
insert into data (id_prov,id_kabkot,id_kec) values ('$propinsi', '$kota', '$kec')");
if ($masuk){
echo '<script language="javascript">alert("Berhasil")</script>';
echo '<script language="javascript">window.location = "index.php"</script>';
} else {
echo '<script language="javascript">alert("Data gagal disimpan")</script>';
echo '<script language="javascript">window.location = "index.php"</script>';
}
?>
Kemudian yang paling terakhir, saya berani sumpah kalo ini yang terkhir. Silahkan download jquery nya supaya hasilnya sesuai harapan kita. Download jquery nya disini jangan ketempat lain
Hasil
donwload
Langganan:
Posting Komentar (Atom)
Nice sharing pak,
BalasHapusini coba saya proses lebih lanjut, kalo data hasil pilihan itu saya masukkan ke Database, id nya ya yang masuk.. Kalo semisal saya pengen namanya yang masuk ke DBMysql, gimana ya pak caranya ? Soalnya kalo option value nya langsung saya ganti [nama_kabkot/kec/prov], sub kategori bawahnya ngga bisa keluar.. Terimakasih responnya jika berkenan..