Menampilkan Kota Berdasarkan Propinsi pada PHP

menampilkan kabupaten / kota berdasarkan propinsi

Kabupaten dan Kota dalam satu propinsi jumlahnya banyak sekali. Apalagi dalam 1 negara kita, Indonesia, pastinya sangat amat banyak sekali bukan? Menurut wikipedia, bahwa jumlah kabupaten dan kota di Indonesia berjumlah 514. Bagaimana jika jumlah tersebut muncul keseluruhan? Pastinya tedapat row yang banyak pula. Nah, sekarang kita akan mencoba memunculkan kabupaten dan kota tersebut berdasarkan propinsi yang dipilih saja. Kali ini kita akan memanfaatkan tag select dalam mem buatnya.

Untuk data data tersebut, kita juga memanfaatkan membaca dari database dan kali ini kita akan menggunakan database MySql. Pertama, kita buat dahulu struktur table pada database propinsi.

 
CREATE TABLE `mst_provinsi ` (
  `id_prov` int(2) NOT NULL,
  `nama_prov` char(30) NOT NULL,
  PRIMARY KEY (`id_prov`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Query di atas adalah query untuk membuat table propinsi dengan nama mst_provinsi. Setelah itu, langsung saja kita masukkan data propinsi pada table tersebut.

 
INSERT INTO mst_provinsi (id_prov,nama_prov) VALUES
	 ('11','ACEH'),
	 ('12','SUMATERA UTARA'),
	 ('13','SUMATERA BARAT'),
	 ('14','RIAU'),
	 ('15','JAMBI'),
	 ('16','SUMATERA SELATAN'),
	 ('17','BENGKULU'),
	 ('18','LAMPUNG'),
	 ('19','KEPULAUAN BANGKA BELITUNG'),
	 ('21','KEPULAUAN RIAU'),
	 ('31','DKI JAKARTA'),
	 ('32','JAWA BARAT'),
	 ('33','JAWA TENGAH'),
	 ('34','DI YOGYAKARTA'),
	 ('35','JAWA TIMUR'),
	 ('36','BANTEN'),
	 ('51','BALI'),
	 ('52','NUSA TENGGARA BARAT'),
	 ('53','NUSA TENGGARA TIMUR'),
	 ('61','KALIMANTAN BARAT'),
	 ('62','KALIMANTAN TENGAH'),
	 ('63','KALIMANTAN SELATAN'),
	 ('64','KALIMANTAN TIMUR'),
	 ('65','KALIMANTAN UTARA'),
	 ('71','SULAWESI UTARA'),
	 ('72','SULAWESI TENGAH'),
	 ('73','SULAWESI SELATAN'),
	 ('74','SULAWESI TENGGARA'),
	 ('75','GORONTALO'),
	 ('76','SULAWESI BARAT'),
	 ('81','MALUKU'),
	 ('82','MALUKU UTARA'),
	 ('91','PAPUA BARAT'),
	 ('94','PAPUA');

Setelah data propinsi sudah terbentuk, kita akan membuat tabel mst_kabkot yang berisi mengenai data kabupaten dan kota yang ada di Indonesia. Berikut adalah query pembuatan table mst_kabkot

 
CREATE TABLE `mst_kabkot` (
  `id_prov` int(2) NOT NULL,
  `id_kabkot` int(4) NOT NULL,
  `nama_kabkot` char(40) NOT NULL,
  `jumlah` int(5) NOT NULL,
  PRIMARY KEY (`id_kabkot`),
  KEY `id_prov` (`id_prov`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Setelah terbentuk, sekarang kita akan masukkan data kabupatan dan kota yang ada. Berikut adalah datanya :

 
INSERT INTO mst_kabkot (id_prov,id_kabkot,nama_kabkot) VALUES
	 (11,1101,'KABUPATEN SIMEULUE'),
	 (11,1102,'KABUPATEN ACEH SINGKIL'),
	 (11,1103,'KABUPATEN ACEH SELATAN'),
	 (11,1104,'KABUPATEN ACEH TENGGARA'),
	 (11,1105,'KABUPATEN ACEH TIMUR'),
	 (11,1106,'KABUPATEN ACEH TENGAH'),
	 (11,1107,'KABUPATEN ACEH BARAT');

Pada contoh query di atas, Saya hanya memberikan sedikit contoh data, dikarenakan terdapat sekitar hampir 500 row, sehingga akan memakan space. Anda dapat mengunduhnya pada akhir artikel di bawah ini.

Setelah berhasil menambahakan data kabupatan dan kota pada database, sekarang kita akan menampilkannya. Awalnya kita akan menampilkan data provinsi terlebih dahulu. Anda dapat melihat pada link di bawah ini.

Setelah seleasi membuat select option data propinsi, sekarang kita lanjtukan membuat select option untuk kabupaten kota. Berikut contoh codenya.

 
<select name="kabkot" class="namaKota">
	<option value="">Pilih Kabupaten Kota</option>
</select>

Setelah itu, kita tambahkan code ajax pada bagian bawah. Dengan menggunakan event onchange(), begini penulisan codenya :

 
<script type="text/javascript">
	$(document).on('change','#pilihProvinsi',function(event){
		var id = $(this).val();
		$.ajax({
			type: "POST",
			dataType:"json",
			url: "kabkot.php",
			data: {param:id},
			success: function(data){
				var html = "<option value=''>-Select City-</option>";
				var i;
				for(i=0; i<data.main.length; i++){
					html += "<option value="+data.main[i].id_kabkot+">"+data.main[i].nama_kabkot+"</option>";
				}
				$('.namaKota').html(html);		          	                                             
			}
		});                    
	}); 
</script>

Sedikit penjelasan pada code javascript di atas:

#pilihProvinsi
adalah nama id dari select option propinsi yang akan diproses.
var id = $(this).val();
adalah membuat variabel dan mengambil nilai yang didapatkan dari pemilihan propinsi.
kabkot.php
adalah file yang berfungsi menerima kiriman variabel id, dan diolah sebagai query, kemudian dikembalikan lagi.
param:id
nama parameter (param), yang akan dikirim dan membawa nilai variabel id.
$(‘.namaKota’).html(html);
adalah nama class untuk menampilkan data yang diterima dan diolah.

Kemudian, pada file kabkot.php, kita akan membuat query untuk mengambil kabuaten / kota berdasarkan pilihan dari propinsi. Begin contoh codenya :

 
	include "koneksi.php";

	$query = mysqli_query($koneksi,"select 
						id_kabkot,id_prov,nama_kabkot 
					from 
						mp_kabkot 
					where id_prov = '".$_POST["param"]."'");

	$result = array(); 
        while ($data = mysqli_fetch_assoc($query)) {
        	$result[] = $data;
        }    

    $data['main'] = $result;
	echo json_encode($data);

Sedikit penjelasan di atas :

include “koneksi.php”;
berfungsi utuk melakukan koneksi <em>database</em>. Apabila Anda belum paham, Anda dapat membcanyha pada link di bawah.
$query
berisi tentang query dasar yang akan menampilkan data kabupaten / kota berdasarka nama parameter (param) yang telah dikirimkan.
$result
menampilkan hasil dari data query
$data[‘main’]
nama parameter yang dibuat untuk menampung hasil dari resut.
json_encode($data)
kemudian data akan ditampilkan dalam bentuk JSON. Dan akan diterima oleh code ajax.

Mudah sekali bukan? Selanjutnya giliran Anda untuk mencobanya. Demikian penjelasan singkat tentang Menampilkan Kota Berdasarkan Propinsi pada PHP. Semoga bermanfaat untuk Anda. Terima Kasih.