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.
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");
?>
Tampilah Database Ajax