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


Komentar pembaca

rhidwanko yang kotannya ga keluar min, yg muncul hanya provinsinya saja.posting pada :2012-11-09 17:08:00
AdminPada kondisi normal / awal , pilihan yang keluar hanyalah bagia provinsi, dan pada bagian kota belum muncul nama kota, akan tetapi kalo kita sudah memilih salah satu provinsi, maka bagian kota secara otomatis akan terisi dengan nama - nama kota yang berada pada provinsi tersebut.posting pada :2012-11-10 07:59:43
samga bisa pak, pilih kota nya ga bis muncul. ada yg salah kayaknya tuh script.posting pada :2012-11-29 11:23:59
sahdangimana buat pilihan 4 variabel sekaligus contohnya propinsi, kota, kecamatan, desa/kelurahanposting pada :2012-11-30 16:57:13
AdminScript diatas terdiri dari 3 file , file yang seharusnya di buka adalah file pilihan.php melalui webserver, kami sudah mencobanya dan script diatas berjalan normal. Kemudian untuk membuat tambahan pilihan lain setelah kota, maka kita perlu melakukan penambahan event onchange pada pilihan kota, begitu pula pada script prmajax.js, kita juga harus membuat function tambahan sebagai action dari event onchange yang ada pada pilihan kota tersebutposting pada :2012-12-07 10:19:37
irfanSeblumnya terima kasih atas tutorialnya, saya ingin mencoba sendiri drumah mohon update link download, karena ketika di klik download tidak muncul, terima kasih :)posting pada :2013-01-09 19:43:37
AdminIrfan, Silahkan coba kembali link download yang kami sediakan, kami baru saja melakukan update link tersebut sesuai dengan laporan yang anda sampaikan kepada kami, terimakasih atas bantuannya.
Jika pilihan kota tidak keluar pada saat script di jalankan, silahkan melakukan perubahan pada script prmajax.js , ganti alamat url script option sesuai dengan lokasi baru pada komputer anda.
 var url="http://localhost/tutorial/ajax/option.php";
Jika kita menyimpannya dalam folder dengan nama test pada root web server, maka alamat urlnya menjadi :
 var url="http://localhost/test/ajax/option.php";
Semoga bermanfaat
posting pada :2013-01-09 20:44:21

Tulis komentar

 




Today
Yesterday
All visitor

Pelatihan Website bersama Media Kreatif Indonesia

laboratorium Komputer dan teknology Kampus I ITN Malang 2013-07-09 08:00:00
 

Pelatihan Sistem Informasi

SMK Negeri 1 Lumajang 2013-05-01 12:00:00
 

Bakti sosial Teknik Kimia

Panti Asuhan Miftahul Huda II 2013-03-26 11:00:00
 

Bagaiamana metode pengajaran teknology yang paling efektif menurut anda ?

Beli buku, kemudian mempelajari sambil praktek
Mengikuti kursus sesuai bidang teknology
Belajar sendiri secara otodidak
Belajar dari contoh - contoh aplikasi yang sudah jadi
Belajar dari contoh - contoh yang paling sederhana
Semua pilihan benar