Rabu, 30 November 2016
Dalam artikel ini saya akan membahas bagaimana cara membuat ComboBox dengan menggunakan AJAX-JQuery. Sebelum saya membahas ini ada baiknya kita ketahui terlebih dahulu apa itu JQuery, apa itu AJAX, serta hubungan JQuery dengan AJAX. Berikut sekilas pengertian yang bisa saya tuliskan.
Pengertian JQuery
JQuery dapat diartikan sebagai sebuah kumpulan fungsi yang berguna untuk memudahkan dalam pembuatan program web. JQuery dibuat agar dalam pembuatan program yang menggunakan JavaScript menjadi lebih mudah karena JQuery berguna untuk menyederhakan perintah - perintah umum. JQuery banyak digunakan karena dalam penulisan source code yang rumit bisa disederhanakan menjadi beberapa baris singkat.
Pengertian AJAX
AJAX merupakan sebuah sistem yang berguna untuk mengirim dan menerima data dari server, dimana data dapat disimpan agar user tidak perlu berulang kali memasukkan data cukurp menggunakan AJAX. Kepanjangan dari AJAX adalah Asynchronous JavaScript And XML. Dengan menggunakan AJAX user dapat bertukar data hanya dibagian yang diinginkan, tanpa harus melakukan refresh dan mengirim seluruh halaman. AJAX sering digunakan di dalam implementasi web - web besar karena kemudahannya ini membuat orang banyak menggunakan AJAX.
Hubungan JQuery dengan AJAX
Tanpa JQuery, membuat program menggunakan AJAX menjadi sedikit rumit. Dalam penulisan kode AJAX disetiap browser memiliki kode - kode yang berbeda sehingga diperlukan kode tambahan untuk menguji browser yang berbeda. Namun sekarang JQuery sudah mengalami perkembangan sehingga AJAX bisa ditulis hanya sengan satu baris kode. Dengan metode JQuery AJAX, user dapat meminta teks, HTML, XML, JSON dari server yang jauh. Selain itu juga dapat dihunakan untuk dapat memuat data eksternal langsung ke elemen HTML yang dipilih dari halaman web user.
Berikut ini cara membuat combobox menggunakan Ajax-JQuery :
1. Langkah pertama cari bagian yang ingin dibuat menggunakan combobox, disini saya membuat sebuah program combobox provinsi. Setelah provinsi yang diinginkan dipilih kemudian muncul combobox lagi yaitu pilihan kota dari setiap provinsi yang dipilih.
2. Kemudian ketikkan kode di bawah ini :
<html>
<head>
<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>
3. Kemudian ketikkan kodingan dibawah ini untuk menyambungkan antar combobox
<?php
$kota = array (
'jatim' => array (
$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>';
}
?>
4. Selain kode diatas juga terdapat suatu kode keharusan agar ajax-jquery bisa dijalankan
Berikut Output yang dihasilkan :
Demikian artikel yang saya buat semoga bermanfaat bagi pembaca.
Subscribe to:
Posting Komentar (Atom)
0 komentar:
Posting Komentar