Select Box Dinamis menggunakan Ajax PHP dan MySql

10 October 2016 | Tags: Ajax, Ajax Php, Ajax Php Mysql

Dalam formulir online biasanya kita diminta untuk mengisi identitas wilayah alamat tempat tinggal kita. Seperti halnya belanja online, maka kita wajib memasukkan provinsi, kabupaten dan alamat lengkap kita untuk tujuan pengiriman barang nantinya. Kalau kita cermat memperhatikan, pada saat memilih provinsi misalnya, maka pada kabupaten atau kota tujuan yang muncul pasti yang relevan dengan provinsi yang kita pilih.Kira-kira bagaimana ya caranya membuat teknik tersebut? Ok, pada tutorial ini kita akan membahas cara membuat Select Box Dinamis menggunakan Ajax PHP dan MySql.

Contoh sederhananya bagaimana menampilkan daftar kecamatan yang relevan berdasarkan kabupaten yang dipilih. Setiap kali kita pilih kabupaten yang berbeda, maka pada daftar kecamatan yang muncul juga berubah.

Select Box Dinamis menggunakan Ajax PHP dan MySql

Pada pemrograman Desktop (VB, Delphi) biasanya tersedia event onChange untuk melakukan aksi terhadap suatu perubahan yang terjadi. Sedangkan pada pemrograman berbasis web, hal tersebut harus dikombinasikan pada pemrograman di sisi client dan di sisi server. Salah satunya adalah menggunakan AJAX (Asynchronous JavaScript And XML).

Dalam tutorial ini pertama kita akan menampilkan daftar kecamatan pada Select Box (Kotak Pilihan) berdasarkan Kabupaten yang dipilih pada Select Box sebelumnya. Ajax digunakan untuk mengirim dan meminta query dari database tanpa me-refresh halaman.

Langkah-langkah Select Box Dinamis menggunakan Ajax PHP dan MySql

Rancangan Tabel

Dengan asumsi anda sudah mengetahui cara membuat database di Mysql, maka pertama yang kita lakukan adalah membuat database dengan nama : sb.

Dalam tutorial ini kita akan membuat dua (2) buah tabel yaitu: tbl_kabupaten dan tbl_kecamatan. Dimana kedua tabel dihubungkan oleh kolom id_kab.
Tabel: tbl_kabupaten

CREATE TABLE tbl_kabupaten (
  id_kab int(10) unsigned NOT NULL AUTO_INCREMENT,
  kode_kab char(4) DEFAULT NULL,
  nama_kab varchar(50) DEFAULT NULL,
  PRIMARY KEY (id_kab)
)

Tabel: tbl_kecamatan

CREATE TABLE tbl_kecamatan (
  id_kec int(10) NOT NULL AUTO_INCREMENT,
  nama_kec varchar(100) DEFAULT NULL,
  id_kab int(5) DEFAULT NULL,
  PRIMARY KEY (id_kec)
)

Silahkan isi data di kedua tabel tersebut. Dan pastikan pada tabel tbl_kecamatan terhubung pada satu kabupaten di tbl_kabupaten.

Struktur File

Beberapa file yang kita buat untuk tutorial ini:

konek.php
ajax.js
getkecamatan.php
st01.php
index.php

Membuat File konek.php

File konek.php berisi konfigurasi untuk melakukan koneksi ke database MySql.

<?php 
	$host ="localhost"; 
	$user ="root"; 
	$pass =""; 
	$db ="sb"; 
	mysql_connect($host,$user,$pass,$db); 
	mysql_select_db($db); 
?>

Membuat File ajax.js

File ajax.js berisi function untuk mengirim dan menerima data. Function ini terpanggil ketika kita memilih salah satu kabupaten pada Select Box.

// JavaScript Document
    var ajaxku;
    function getkecamatan(kab){
            ajaxku = createajax();
            var url="getkecamatan.php";
            url=url+"?kab="+kab;
            url=url+"&sid="+Math.random();
            ajaxku.onreadystatechange=kecamatanChanged;
            ajaxku.open("GET",url,true);
            ajaxku.send(null);
        }
    function kecamatanChanged(){
            var data;
            document.getElementById("dvkecamatan").innerHTML= "Looading.......";
            if (ajaxku.readyState==4)
                {
                    data=ajaxku.responseText;
                    if(data.length>0)
                        {
                            document.getElementById("dvkecamatan").innerHTML = data
                        }
                    else
                        {
                            document.getElementById("dvkecamatan").innerHTML= "";
                        }
                }
            else
                {
                    document.getElementById("dvkecamatan").innerHTML= "Looding";
                }           
            }                                           
     
    function createajax(){
            if (window.XMLHttpRequest){
                    return new XMLHttpRequest();
                }
            if (window.ActiveXObject){
                return new ActiveXObject("Microsoft.XMLHTTP");
                }
            return null;
        }

Membuat File getkecamatan.php

Salah satu manfaat dari AJAX adalah kita bisa mengirim dan menerima data tanpa harus me-refresh halaman. Tentu saja ini untuk mempercepat proses yang kita lakukan. File kecamatan ini berisi perintah PHP MySql untuk menampilkan kecamatan berdasarkan kabupaten yang dipilih. File ini dipanggil lewat function ajax yang kita buat sebelumnya.

<?php 
	include_once "konek.php"; 
	$kab =isset($_GET['kab'])?$_GET['kab']:""; 
	if($kab!="") 
	{ 
		$sql="SELECT * FROM tbl_kecamatan WHERE id_kab='$kab'"; 
		$hasil=mysql_query($sql); 
?>
  <select name="kecamatan" id="kecamatan" >
		<option value="0">---Pilih Kecamatan---</option>
		    <?php 
				while($row=mysql_fetch_assoc($hasil)) 
					{ 
			?>
		<option value="<?php echo $row['id_kec'];?>"><?php echo $row['nama_kec'];?></option>
    		<?php 
					} 
			?>
  </select>
<?php 
	} 
?>

File st01.css

File ini berfungsi untuk mengatur tampilan halaman

/* CSS Document */
body
    {
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px; 
    }   
#title
    {
            width:100%;
            margin-bottom:10px;
            background:#e8e8e8;
            border:1px solid #666;
            text-align:center;
            font-weight:bold;   
    }   
h1
    {
        font-size:16px;
        font-family:Arial;
        text-align:center;
        text-transform:uppercase;
    }   
h2
    {
        font-size:14px;
        font-family:Arial;
        color:#69C;
        text-align:center;
    }       
select  
    {
        border:1px solid #e8e8e8;
        color:#003;
        padding:4px;
        word-wrap:break-word;
        width:80%;  
    }
.left
    {
        float: left;
        width: 48%;
        border:1px solid #666;
        padding:10px;
    }
.right
    {
        float: right;
        width: 48%;
        border:1px solid #666;
        padding:10px;
    }
#footer
    {
        height:50px;
        border-top:1px solid #e8e8e8;
        margin-top:10px;
        font-size:10px;
        text-align:center;
        font-family:Verdana, Geneva, sans-serif;
        color:#036;
    }

File index.php

File ini merupakan interface untuk menampilkan select box kabupaten, dan ketika salah satu kabupaten dipilih maka akan muncul daftar kecamatan yang relevan.

<?php include_once "konek.php"; ?>
<html>
<head>
    <title>SELECT BOX DINAMIS DENGAN AJAX &amp;amp; PHP</title>
    <link href="st01.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="ajax.js"></script> 
  </head>
<body
<div id="title"><h1>SELECT BOX DINAMIS DENGAN AJAX &amp; PHP</h1></div>
<div class="clear"></div>
<div class="group">
  <div class="left">
     <h2>KABUPATEN/KOTA</h2>
      <select name="kabupaten" id="kabupaten" onChange="getkecamatan(this.value)">
               <option value="0">--Semua Kategori--</option>
          <?php 
               $sql = "SELECT * FROM tbl_kabupaten"; 
               $hasil = mysql_query($sql); 
               while($row=mysql_fetch_assoc($hasil)) 
                   { 
           ?>
               <option value="<?php echo $row['id_kab'];?>"><?php echo $row['nama_kab'];?></option>
          <?php 
                   } 
          ?>
        </select>
     </div>
 
 
<div class="right">
<h2>KECAMATAN</h2>
<div id="dvkecamatan">
        <select name="kecamatan" id="kecamatan">
           <option value="0">--Kecamatan--</option>
        </select>
 </div>
</div>
</div>
<div id="footer"> Copyright &copy;<?php echo date("Y");?>  
          <a href="http://www.komang.my.id">Komang.My.ID</a>
          Saran, kritik dan pertanyaan via email : info@komang.my.id
</div>
</body>
</html>

Ok, berarti semua file sudah kita buat. Coba anda test pada browser dengan mengakses file index.php. Semoga berhasil.