Database Kelurahan Kecamatan & Propinsi se Indonesia

Database Kelurahan Kecamatan & Propinsi se Indonesia

Untuk tutorial kali ini saya akan membagi source code database Kelurahan, Kecamatan dan Propinsi se Indonesia, di lengkapi dengan AJAX PHP yang nantinya bisa teman-teman coba.

yellowweb-db-propinsi.jpg

Tampilan Direktori File

Untuk databasenya silahkan kalian bisa download di sini.

Untuk skrip lainnya yang akan dibuat diantaranya:

Buatlah file dengan nama index.php

<?php 
include 'koneksi.php';
?>
<!doctype html>
<html>
	<head>
		<title>Data Kecamatan</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<table>
			<tr>
			<td>Pilih Provinsi</td>
			<td>:</td>
			<td>
				<script type="text/javascript" src="js/ajax_kota.js"></script>
				<select name="prop" id="prop" onchange="ajaxkota(this.value)">
					<option value="">Pilih Provinsi</option>
					<?php 
					$queryProvinsi=mysql_query("SELECT * FROM inf_lokasi where lokasi_kabupatenkota=0 and lokasi_kecamatan=0 and lokasi_kelurahan=0 order by lokasi_nama");
					while ($dataProvinsi=mysql_fetch_array($queryProvinsi)){
						echo '<option value="'.$dataProvinsi['lokasi_propinsi'].'">'.$dataProvinsi['lokasi_nama'].'</option>';
					}
					?>
				<select>
			</td>
		</tr>
		<tr>
			<td>Pilih Kota/Kab</td>
			<td>:</td>
			<td>
				<select name="kota" id="kota" onchange="ajaxkec(this.value)">
					<option value="">Pilih Kota</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Pilih Kec</td>
			<td>:</td>
			<td>
				<select name="kec" id="kec" onchange="ajaxkel(this.value)">
					<option value="">Pilih Kecamatan</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Pilih Kelurahan/Desa</td>
			<td>:</td>
			<td>
				<select name="kel" id="kel">
					<option value="">Pilih Kelurahan/Desa</option>
				</select>
			</td>
		</tr>
		</table>
	</body>
</html>

file berikutnya akan kita berinama select_kota.php yang akan kita coba tempatkan ke dalam folder ajax

<?php
if (!empty($_GET['q'])){
	if (ctype_digit($_GET['q'])) {
		include '../koneksi.php';
		$query = mysql_query("SELECT * FROM inf_lokasi where lokasi_propinsi=$_GET[q] and lokasi_kecamatan=0 and lokasi_kelurahan=0 and lokasi_kabupatenkota!=0 order by lokasi_nama");
		echo"<option selected value=''>Pilih Kota/Kab</option>";
		while($d = mysql_fetch_array($query)){
			echo "<option value='$d[lokasi_kabupatenkota]&prop=$_GET[q]'>$d[lokasi_nama]</option>";
		}


	}
}

if (empty($_GET['kel'])){

	if (!empty($_GET['kec']) and !empty($_GET['prop'])){
		if (ctype_digit($_GET['kec']) and ctype_digit($_GET['prop'])) {
		include '../koneksi.php';
			$query = mysql_query("SELECT * FROM inf_lokasi where lokasi_propinsi=$_GET[prop] and lokasi_kecamatan!=0 and lokasi_kelurahan=0 and lokasi_kabupatenkota=$_GET[kec] order by lokasi_nama");
			echo"<option selected value=''>Pilih Kecamatan</option>";
			while($d = mysql_fetch_array($query)){
				echo "<option value='$d[lokasi_kecamatan]&kec=$d[lokasi_kabupatenkota]&prop=$d[lokasi_propinsi]''>$d[lokasi_nama]</option>";
			}
		}
	}
} else {
	if (!empty($_GET['kec']) and !empty($_GET['prop'])){
		if (ctype_digit($_GET['kec']) and ctype_digit($_GET['prop'])) {
		include '../koneksi.php';
			$query = mysql_query("SELECT * FROM inf_lokasi where lokasi_propinsi=$_GET[prop] and lokasi_kecamatan=$_GET[kel] and lokasi_kelurahan!=0 and lokasi_kabupatenkota=$_GET[kec] order by lokasi_nama");
			echo"<option selected value=''>Pilih Kelurahan/Desa</option>";
			while($d = mysql_fetch_array($query)){
				echo "<option value='$d[lokasi_kode]'>$d[lokasi_nama]</option>";
			}
		}
	}
}
?>

Lalu dilanjutkan dengan file berikutnya ajax_kota.js yang akan kita tempatkan di folder js

    var ajaxku;
function ajaxkota(id){
    ajaxku = buatajax();
    var url="ajax/select_kota.php";
    url=url+"?q="+id;
    url=url+"&sid="+Math.random();
    ajaxku.onreadystatechange=stateChanged;
    ajaxku.open("GET",url,true);
    ajaxku.send(null);
}

function ajaxkec(id){
    ajaxku = buatajax();
    var url="ajax/select_kota.php";
    url=url+"?kec="+id;
    url=url+"&sid="+Math.random();
    ajaxku.onreadystatechange=stateChangedKec;
    ajaxku.open("GET",url,true);
    ajaxku.send(null);
}

function ajaxkel(id){
    ajaxku = buatajax();
    var url="ajax/select_kota.php";
    url=url+"?kel="+id;
    url=url+"&sid="+Math.random();
    ajaxku.onreadystatechange=stateChangedKel;
    ajaxku.open("GET",url,true);
    ajaxku.send(null);
}

function buatajax(){
    if (window.XMLHttpRequest){
    return new XMLHttpRequest();
    }
    if (window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
function stateChanged(){
    var data;
    if (ajaxku.readyState==4){
    data=ajaxku.responseText;
    if(data.length>=0){
    document.getElementById("kota").innerHTML = data
    }else{
    document.getElementById("kota").value = "<option selected>Pilih Kota/Kab</option>";
    }
    }
}

function stateChangedKec(){
    var data;
    if (ajaxku.readyState==4){
    data=ajaxku.responseText;
    if(data.length>=0){
    document.getElementById("kec").innerHTML = data
    }else{
    document.getElementById("kec").value = "<option selected>Pilih Kecamatan</option>";
    }
    }
}

function stateChangedKel(){
    var data;
    if (ajaxku.readyState==4){
    data=ajaxku.responseText;
    if(data.length>=0){
    document.getElementById("kel").innerHTML = data
    }else{
    document.getElementById("kel").value = "<option selected>Pilih Kelurahan/Desa</option>";
    }
    }
}

File yang terakhir adalah koneksi.php

<?php 
mysql_connect("localhost","root","");
mysql_select_db("db_lokasi");
?>
https://i0.wp.com/www.yellowweb.id/blog/wp-content/uploads/2017/05/yellowweb-database-propinsi.jpg?resize=700%2C600

Tampilah Database Ajax

Comments are closed.