Menu Melayang

Minggu, 23 November 2014

Membuat pilihan kota otomatis menggunakan php ajax

Selamat bertemu kembali dalam poko bahasan AJAX bersama kami, kali ini kita akan membahas contoh aplikasi pilihan otomatis menggunakan AJAX dan PHP. dalam sebuah form input, seringkali kita menemukan contoh pilihan yang terisi secara otomatis, dalam pembahasan kali ini kami mengambil Provinsi dan Kota yang akan kita jadikan object.
Dalam sebuah provinsi terdapat beberapa kota, sehingga ketika user memilih provinsi tertentu, maka pilihan kota secara otomatis hanya akan terisi dengan nama - nama kota yang ada dalam provinsi tersebut, untuk lebih mengarahkan user pada alamat yang lebih jelas.
Seperti biasa, pembahasan kali ini juga kita bagi menjadi tiga script , yaitu :
  1. script pilihan.php yang merupakan form inputan yang akan digunakan oleh user untuk memilih provinsi dan kota
  2. script prmajax.js yang merupakan script ajax untuk mengirimkan data provinsi yang telah dipilih oleh user dan mengambil jawaban yang diberikan oleh script pemroses
  3. script opsi.php yang merupakan script pemroses data yang telah dipilih oleh user
1. script pilihan.php
<html>
 <head>
  <title>Belajar AJAX</title>
  <script type="text/javascript" src="prmajax.js"></script>
 </head>
 <body>
 <div id="dom_pesan"></div>
 <form name="frm">
  <table width="300" style="border:silver 1px solid; border-radius:5px;">
  <tr>
   <td colspan="2">FORM INPUT DATA</td>
  </tr>
  <tr>
   <td width="100">Provinsi</td>
   <td>
    <select name="prov" onchange="pilih_kota('dom_kota',this.value);">
     <option value="#">Provinsi</option>
     <option value="jatim">Jawa Timur</option>
     <option value="jateng">Jawa tengah</option>
     <option value="jabar">Jawa Barat</option>
    </select>
   </td>
  </tr>
  <tr>
   <td>Kota</td>
   <td>
    <select name="kota" id="dom_kota">
     <option value="#">Pilih kota</option>
    </select>
   </td>
  </tr>
  <tr>
   <td colspan="2">
    <input type="button" name="btn" value="Kirim" onclick="kirim_data('dom_pesan');" />
   </td>
  </tr>
 </form>
 </body>
</html>
Perhatikan event onchange yang terdapat pada pilihan provinsi , yaitu onchange = pilih_kota('dom_kota',this.value) yang artinya pada event ini akan dikirimkan value dom_kota dan value dari combo box yang telah dipilih oleh user

2. script prmajax.js
function pilih_kota(dom,kota) {
    document.getElementById(dom).innerHTML="Loading ...";
    var xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Your browser does not support AJAX!");
        return;
    }
    var date=new Date();
    var timestamp=date.getTime();
 //alamat url script pemroses, sesuaikan dengan alamat url yang ada pada komputer anda
    var url="http://localhost/tutorial/ajax/option.php";
 //menyusun variabel yang akan dikirimkan dengan AJAX
    var param="kota="+kota;
 
 //tidak perlu dirubah
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            var res=xmlhttp.responseText;
            document.getElementById(dom).innerHTML=res;
        }
    }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", param.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(param);
 //tidak perlu dirubah
}


function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}
bagian pilih_kota(dom,kota) merupakan parameter yang dilewatkan pada event onchange yang kita tanamkan pada script pilihan.php, dalam hal ini value dari parameter tersebut adalah dom_kota dan juga kode provinsi yang terdapat pada pilihan provinsi seperti jatim, jateng dan jabar.
3. script option.php
<?php
$kota = array (
   'jatim' => array (
       '1' => 'Malang',
       '2' => 'Pasuruan',
       '3' => 'Probolinggo',
       '4' => 'Lumajang'
      ),
   'jateng' => array (
       '1' => 'Semarang',
       '2' => 'Solo',
       '3' => 'Klaten',
       '4' => 'Magelang'
      ),
   'jabar' => array (
       '1' => 'bandung',
       '2' => 'Banten',
       '3' => 'Karawang',
       '4' => 'Bekasi'
      ),
   'lain' => array (
       '1' => 'Pilih kota'
      )
  );

$opsi = $_POST['kota'];
if($opsi =='jatim'){
 $arr = $kota['jatim'];
}
else if($opsi == 'jateng'){
 $arr = $kota['jateng'];
}
else if($opsi=='jabar'){
 $arr = $kota['jabar'];
}
else{
 $arr = $kota['lain'];
}
foreach($arr as $key => $val){
 echo '<option value="'.$key.'">'.$val.'</option>';
}
?>
Dalam contoh script option diatas, menyingkat tutorial ini dengan membuat pilihan kota dalam bentuk data array supaya tidak terlalu memperpanjang poko pembahasan. Jika pembaca ingin mendatabasekan kota dan provinsi, maka struktur script opiton.php akan menjadi lebih ringkas.
selamat mencoba dan mengembang script diatas, silahkan download contoh script yang sudah kami uji coba pada link download di bawah

Download contoh script pilihan otomatis dengn ajax

Blog Post

Related Post

Back to Top

Cari Artikel