Membuat pilihan kota otomatis dengan jQuery ajax dan php mysql

Berkenaan dengan pertanyaan pembaca tentang membuat pilihan kota otomatis berbasis MySQL, kali ini kami membuat contoh sederhana pembuatan form pilihan kota otomatis dengan menggunakan jQuery AJAX dan MySQL. Pembuatan form pilihan otomatis ini menjadi sangat sederhana ketika kita berbicara tentang jQuery, hal ini dikarenakan kita hanya tinggal memanggil fungsi - fungsi ajax yang sudah disediakan dalam jQuery.

 

Untuk memeprsingkat waktu, mari kita perhatikan langkah - langkah berikut ini :


1. Membuat tabel kota

Tabel ini terdiri dari 3 kolom yang memuat IDKota,Nama kota dan juga IDPropinsi. Adapun struktur dari tabel kota dapat di download pada link download dibawah beserta contoh script yang sudah kami buat

2. Membuat form

Form ini merupakan halaman utama yang berupa form - form input yang dapat kita asumsikan sebagai sebuah form registrasi.

<html>
<head>
<title>Script pilihan Kota otomatis dengan Jquery AJAX</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function pilih_kota(prop)
{
	$.ajax({
        url: 'http://localhost/tutorial/kota.php',
        data : 'prop='+prop,
		type: "post", 
        dataType: "html",
		timeout: 10000,
        success: function(response){
			$('#dom_kota').html(response);
        }
    });
}
</script>
</head>
<body>
Nama<br/>
<input type="text" name="nama" size="50"/><br/><br/>
Negara<br/>
<input type="text" name="nama" size="50"/><br/><br/>
Provinsi<br/>
<select name="prop" onchange="pilih_kota(this.value);">
	<option value="#">Pilih Provinsi</option>
	<option value="1">Jawa Timur</option>
	<option value="2">Jawa Tengah</option>
	<option value="3">Jawa Barat</option>
</select>
<br/><br/>
Kota<br/>
<select name="kota" id="dom_kota">
	<option value="#">Pilih Kota</option>
<select>
<body>
</html>

Pada contoh diatas, terdapat sebuah functio javascript yaitu pilih_kota seperti terlihat dibawah ini

function pilih_kota(prop)
{
	$.ajax({
        url: 'http://localhost/tutorial/kota.php',
        data : 'prop='+prop,
		type: "post", 
        dataType: "html",
		timeout: 10000,
        success: function(response){
			$('#dom_kota').html(response);
        }
    });
}

Dari contoh diatas, sesuaikanlah alamat url sesuai dengan lokasi file pada komputer anda. Secara garis besar, script ajax diatas akan mengirimkan data dengan Method AJAX POST pada script kota.php yang terdapat dalam folder tutorial.

3. Membuat script kota.php

Script kota.php merupakan script yang akan mencari data kota pada database sesuai dengan ID Provinsi yang dikirimkan oleh script AJAX. Adapun struktur dari script kota.php terlihat seperti pada contoh dibawah ini.

<?php
$conn = mysql_connect('localhost','root','kutukupret');
$sel  = mysql_select_db('tutorial',$conn);

$prop = $_POST['prop'];
$query= mysql_query('select * from kota where IDProp="'.$prop.'"');
while($data=mysql_fetch_array($query)){
	echo '<option value="'.$data['IDKota'].'">'.$data['Kota'].'</option>';
}
?>

Cukup sederhana bukan contoh scriptnya, silahkan mencoba untuk mengembangkannya pada aplikasi - aplikasi sesuai dengan keinginan anda. Jangan lupa klik LIKE atau SEND jika menurut anda tutorial kami ini cukup bermanfaat dan bisa dimengerti oleh para pembaca.

Download contoh script tutorial pilihan kota dengan jquery ajax dan mysql disini


Komentar pembaca

khalishMas Admin, saya sudah coba cara di atas dan sudah bisa menampilkan data kota; nah skrg yg mw saya tanya bagaimana cara untuk menampilkan data kecamatan..?? dmn saya mempunyai tabel kecamatan yg berisi filed id_prov, id_kota, id_kec, dan nm_kec. saya sudah coba cara diatas untuk menampilkan kecamatan, tapi pada saat saya memilih kota, pilihan kecamatan kosong (tidak tampil data kecamatannya). terima kasih sebelumnya.posting pada :2013-07-21 01:25:47
         
     
         
 
         
   
         
   
 

Tulis komentar