Senin, 07 Maret 2016

Dropdown Beringkat Menggunakan PHP

Jalankan demo dropdown daftar provinsi dan kecamata ndi indonesia ini.

Kali ini saya akan membahas cara membuat dropdown betringkat dengan menampilkan isi pada database. seperti pada dopdown daftar kecamatan seluruh indonesia. Anda juga bisa memodifikasi dropdown ini sesuai dengan kebutuhan anda sendiri.
tanpa banyak basa basi mari kita mulai eksekusi pada code pembuatannya.


1. Buat File Index

  file index berfungsi sebagai tampilan pada antarmuka drpdown.
    tulis kode di bawah ini:

<html>
<head><title>Select Chain</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: "kota.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: "kecamatan.php",
         data: "kota="+kota,
         cache: false,
         success: function(msg){
             $("#kec").html(msg);
         }
     });
   });
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","");
mysql_select_db("provkabkotkec");
?>
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>
</select>
<br>Pilih Kecamatan :<br>
<select name="kec" id="kec">
<option>--Pilih Kecamatan--</option>
</select>
</body>
</html>

    Setelah di tulis simpan file dengan nama index.php.

2. Buat File Ambil kota
    Pada file ini berfungsi untuk mengambil daftar kota berdasarkan index provinsi yang telah di pilih sebelumnya

  <?php mysql_connect("localhost","root",""); mysql_select_db("provkabkotkec");  $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";}  ?>
   Simpan dan beri nama kota.php

3. Buatlah File Ambil Kecamatan
   pada file ini berfungsi untuk mengambil daftar kecamatan menurut index kota yang telah di pilih sebelumnya.

<?phpmysql_connect("localhost","root","");mysql_select_db("provkabkotkec");$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";}?>
  Simpan dan beri nama kecamatan.php

Tak lupa juga buat sebuah database dan isikan nama dan password database tersebut dalam file-file diatas dan sesuaikan dengan database yang anda buat, apabila pada demo diatas tidak berjalan silahkan klik disini.

Download Source code dan Database provinsi  disini

1 komentar:

Diberdayakan oleh Blogger.

Entri Populer