Home Unlabelled MEMBUAT COMBOBOX DENGAN PHP2

MEMBUAT COMBOBOX DENGAN PHP2

1:29 AM

PHP MYSQL

 
 
 
 
 
 
Rate This

wp-combobox
Combobox merupakan salah satu element form yang sering digunakan dalam aplikasi – aplikasi pendaftaran, pada umumnya combobox digunakan untuk memilih salah satu option dimana terdapat banyak option yang ada. Value dalam combobox sebenarnya dapat ditulis langsung dalam html, namun, bagaimana jika data yang ingin ditampilkan sangat banyak atau tergantung pada kondisi tertentu?
Misalkan, kita ingin menampilkan pilihan kota – kota yang ada dalam negara Indonesia, maka kota yang ditampilkan juga merupakan kota yg berada dalam Indonesia.
Misalkan, user ternyata berasal dari Inggris, maka kota yang ditampilkan juga merupakan kota yg berada dalam negara Inggris.
Kita memerlukan combobox dinamis.
Ok, langsung praktik saja.
Pertama buat databasenya
1
CREATE DATABASE ‘combobox_bertingkat’ ;
Kemudian kita buat tabel provinsi.
1
2
3
4
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.
1
2
3
4
5
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.
1
2
3
4
5
6
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.
1
2
3
4
5
6
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. bla bla bla….. Tapi tenang saya udah nyiapin databasenya yang sudah terisi full
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
Combobox Bertingkat
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript">// <![CDATA[
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>
 
<!--?php mysql_connect("localhost","root",""); mysql_select_db("combobox_bertingkat"); ?--></pre>
<form id="" action="simpan.php" method="post">
Pilih Provinsi :
 
<select name="propinsi"><option>--Pilih Provinsi--</option></select>
<select name="propinsi"><!--?php <br ?-->//mengambil nama-nama propinsi yang ada di database</select>
<select name="propinsi">$propinsi = mysql_query("SELECT * FROM prov ORDER BY nama_prov");</select>
<select name="propinsi">while($p=mysql_fetch_array($propinsi)){</select>
<select name="propinsi">echo "</select>
<select name="propinsi"><option value="\&quot;$p[id_prov]\&quot;">$p[nama_prov]</option></select>
<select name="propinsi">\n";</select>
<select name="propinsi">}</select>
<select name="propinsi">?></select>
 
 
Pilih Kabupaten/Kota :
 
<select name="kota"><option>--Pilih Kabupaten/Kota--</option></select>
<select name="kota"><!--?php <br ?-->//mengambil nama-nama propinsi yang ada di database</select>
<select name="kota">$kota = mysql_query("SELECT * FROM kabkot ORDER BY nama_kabkot");</select>
<select name="kota">while($p=mysql_fetch_array($propinsi)){</select>
<select name="kota">echo "</select>
<select name="kota"><option value="\&quot;$p[id_kabkot]\&quot;">$p[nama_kabkot]</option></select>
<select name="kota">\n";</select>
<select name="kota">}</select>
<select name="kota">?></select>
 
 
Pilih Kecamatan :
 
<select id="kec" name="kec"><option>--Pilih Kecamatan--</option></select>
<input id="" type="submit" name="" value="Simpan" />
<input type="reset" value="Batal" /></form>
<pre>
$no="1";while ($row=mysql_fetch_array($query)){$nmprov = $row['nama_prov'];$nmkab = $row['nama_kabkot'];$nmkec = $row['nama_kec'];echo "";$no++;}?></pre>
<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()); ?-->
<tbody>
<tr align="center">
<td>No.</td>
<td>Provinsi</td>
<td>Kabupaten/Kota</td>
<td>Kecamatan</td>
</tr>
<!--?php <br ?-->
<tr>
<td width="10">";
echo "$no";
echo "</td>
<td>";
echo "$nmprov";
echo "</td>
<td>";
echo "$nmkab";
echo "</td>
<td>";
echo "$nmkec";
echo "</td>
</tr>
</tbody>
</table>
<pre>
Oh iya sebelumnya kita juga harus membuat file php untuk memanggil data pada tabel kabkot. Kita beri nama dengan ambilkota.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--?php <br ?--> 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 "
-- Pilih Kabupaten/Kota --
 
";
while($k = mysql_fetch_array($kota)){
echo "
".$k['nama_kabkot']."
 
\n";
}
?>
Kemudian juga harus membuat script untuk memanggil data kecamatan dari database. Kita akan menyebutnya dengan ambilkecamatan.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--?php <br ?-->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 "
-- Pilih Kecamatan --
 
";
while($k = mysql_fetch_array($kec)){
echo "
".$k['nama_kec']."
 
\n";
}
?>
Terakhir kita membuat file untuk melakukan eksekusi penyimpanan ke tabel data pada database. Biasa disebut dengan simpan.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--?php <br ?--> 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 type="text/javascript" language="javascript">// <![CDATA[
alert("Berhasil")
// ]]></script>';
echo '<script type="text/javascript" language="javascript">// <![CDATA[
window.location = "index.php"
// ]]></script>';
} else {
echo '<script type="text/javascript" language="javascript">// <![CDATA[
alert("Data gagal disimpan")
// ]]></script>';
echo '<script type="text/javascript" language="javascript">// <![CDATA[
window.location = "index.php"
// ]]></script>';
}
?>
Untuk script lengkapnya silahkan Download disini
Tags :

No comments:

Subscribe to: Post Comments ( Atom )