Membuat pilihan type kendaraan seperti pada situs jual beli kendaraan

Masih berkenaan dengan penerapan AJAX, pembaca sekalian tentunya sering melihat bagaimana proses pemilihan merek atau type kendaraan pada situs - situs iklan jual beli mobil, di situ dapat kita lihat beberapa pilihan drop down misalnya : PILIH Merek, kemudian saat kita memilih Honda, maka pilihan type kendaraan yang muncul dibawahnya secara otomatis hanya akan terisi pilihan type dari MEREK HONDA

 

Dalam hal ini, kami mengajak pembaca sekalian untuk mempelajari hal - hal yang bersifat mendasar untuk kemudian dapat kita kembangkan dan kita aplikasikan pada suatu aplikasi kompleks yang mempunyai nilai jual

Bangunan rumah yang terlihat megah dan kokoh itu pada dasarnya terdiri dari batu - bata ,semen dan bahan - bahan lain yang dikombinasikan dan disusun sedemikian rupa, Dan hal itu juga berlaku dalam penyusunan suatu Aplikasi komputer. Aplikasi yang kita kenal sangat canggih pada dasarnya juga tersusun dari fungsi - fungsi dasar dalam pemrograman yang kemudian dikombinasikan dengan fungsi - fungsi lainnya

Kembali pada pokok pembahasan diatas, berikut langkah - langkah untuk membuat pilihan merek kendaraan seperti pada situs - situs jual beli kendaraan adalah sebagai berikut :

1. Membuat form untuk pilihan » index.php

<html>
	<head>
		<title>Membuat form pilihan merek kendaraan</title>
		<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
		<script type="text/javascript" src="ajax.js">//memanggil script ajax</script>
	</head>
	<body>
		<table width="300" align="center">
			<tr>
				<td height="20" width="100">Merek</td>
				<td>
					<select name="product" id="merek" onchange="pilih_type(this.value)">
						<option value="0">Pilih Merek</option>
						<option value="1">Honda</option>
						<option value="2">Daihatsu</option>
						<option value="3">Toyota</option>
						<option value="4">Suzuki</option>
					</select>
				</td>
			</tr>
			<tr>
				<td height="20" width="100">Type</td>
				<td>
					<select name="product" id="type">
						<option value="0">Pilihan Type</option>
					</select>
				</td>
			</tr>
			<tr>
				<td height="20" width="100"></td><td><input type="button" name="btn" id="btn" value="Proses"/></td>
			</tr>
		</table>
	</body>
</html>

Form diatas kita asumsikan sebagai halaman depan suatu situs jual beli kendaraan, dimana terdapat pilihan merek kendaraan dan dibawahnya juga terdapat pilihan type kendaraan yang selanjutnya akan diproses menggunakan AJAX

2. Membuat script ajax.js

Seperti pada contoh - contoh sebelumnya, script ajax.js ini akan digunakan sebagai pengirim permintaan otomatis pada script pemroses sehingga dapat menampilkan pilihan type kendaraan sesuai dengan merek yang dipilih oleh user

function pilih_type(merek){
	$.ajax({
		//Alamat url harap disesuaikan dengan lokasi script pada komputer anda
		url	     : 'http://localhost/tutorial/suggest.php',
		type     : 'POST',
		dataType : 'html',
		data     : 'merek='+merek,
		success  : function(pilihan){
			if(merek!=0){
				$('#type').html(pilihan);
			}
		},
	})
}

3. Membuat script suggest.php

Script ini dibuat sebagai pemroses permintaan untuk menampilkan type kendaraan sesuai dengan merek yang diplih oleh user. Dalam contoh kali ini, kami memb uat data merek dalam bentuk data array, supaya pembahasan menjadi lebih singkat. Jika anda ingin mandatabasekan pilihan type dan merek, maka kita hanya perlu mengubah pada script suggest tersebut untuk membaca database sesuai dengan kiriman merek yang dipilih oleh user.

<?php
$arr = array(
			'1' => array('Jazz','City','Freed','Stream','lain-lain'),
			'2' => array('Terios','Taruna','Xenia','Trooper','lain-lain'),
			'3'	=> array('Alphard','Etios','Kijang','lain-lain'),
			'4'	=> array('Swift','SX 4','Balekno','Karimun','Katana'),
			'5'=> array('belum ada datanya :D')
	   );
if(isset($_POST['merek'])){
$merek = $_POST['merek'];
	echo '<option value="0">Pilihan Type</option>';
	foreach($arr[$merek] as $key => $val){
		echo '<option value="'.$val.'">'.$val.'</option>';
	}
}
?>

Pada script inde.php diatas kita dapat melihat ada EVENT ONCHANGE yang kita letakkan pada pilihan MEREK, sehingga ketika kita memilih MEREK HONDA, maka AJA akan menangkap kiriman data VALUE dari MEREK HONDA yaitu angka 1

<select name="product" id="merek" onchange="pilih_type(this.value)">
	<option value="1">Honda</option>

Untuk mempelajri lebih lajut, download contoh aplikasi pilihan merek kendaraan yang sudah kami sediakan pada link dibawah, lakukan setting pada script ajax.js sesuai dengan alamat script pada komputer anda. Jika ingin mencoba tanpa melakukan perubahan, silahkan buat folder dengan nama tutorial pada direktory web server anda kemudian copy script - script diatas pada folder tersebut, selanjutnya anda tinggal buka brwser dan ketik alamat :

http://localhost/tutorial/index.php

Download script pilihan merek otomatis

 

Selamat mencoba dan salam kreatif

 


Komentar pembaca

wesuntuk menu pilihannya kalo mau supaya masuk ke database gimana ya?posting pada :2013-11-15 06:11:14
         
     
         
 
         
   
         
   
 

Tulis komentar