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