Manipulasi Combo Box Ajax Dan Jquery
Manipulasi Combo Box Ajax Dan Jquery
Net
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten
Tutorial ini ditulis oleh Achmad Solichin dan sudah dipublikasikan di http://achmatim.net pada tanggal 15 Januari 2013 Cukup banyak pengunjung situs Achmatim.Net yang bertanya seputar manipulasi ComboBox secara dinamis. Yang dimaksud dinamis di sini, selain data diambil dari database, juga terkait dengan isi dari Combobox yang menyesuaikan pada kondisi tertentu. Hal itulah yang melatarbelakangi saya menulis tutorial ini, walaupun jika mau sedikit berusaha, tutorial di Google terkait hal tersebut sudah cukup banyak. Pada tutorial kali ini, kita akan mengambil studi kasus berupa data inputan Propinsi dan Kabupaten/Kota di Indonesia. Jika kita menggunakan jenis inputan combobox, tentunya kita akan menampilkan semua data Propinsi dan Kabupaten/Kota dalam dua combobox yang berbeda. Tentunya hal tersebut tidak efektif karena ada ratusan kabupaten yang ada di seluruh propinsi di Indonesia. Selain itu, rentan juga terhadap kesalahan input, misalnya pada inputan Propinsi diisi DKI Jakarta, tapi di inputan Kabupaten diisi dengan kabupaten Banyumas yang tidak terletak di propinsi DKI Jakarta.
Solusi yang akan disampaikan di tutorial ini adalah dengan membuat kedua combobox Propinsi dan Kabupaten saling terkait. Saat dipilih Propinsi tertentu, maka pada combobox Kabupaten akan otomatis berisi nama-nama kabupaten/kota sesuai dengan propinsi yang dipilih tersebut. tutorial ini akan menggunakan konsep Ajax dengan library JQuery. Misalnya jika dipilih propinsi DKI Jakarta, maka otomatis combobox kabupaten hanya berisi Jakarta Selatan, Jakarta Utara, Jakarta Barat, Jakarta Timur, Jakarta Pusat dan Kepulauan Seribu.
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
dan kabupaten:
Buatlah dua buah tabel di atas di MySQL dengan menggunakan MySQL Client favorit Anda. Setelah itu, isilah data kedua tabel tersebut. Tapi daripada repot, silahkan download file SQL dari kedua tabel tersebut, lengkap dengan isi datanya, lalu import dengan PHPMyAdmin, MySQL Front atau mysql client lainnya. Catatan: file SQL juga sudah dilengkapi dengan perintah membuat database (nama db: demo), jadi tidak perlu bikin database dulu sebelum import.
1 2
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
Jika program 1 di atas dicoba maka tampilannya kurang lebih sebagai berikut.
Halaman 3 dari 7
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
29 <html> 30 <head> 31 <title>Manipulasi Combobox dengan Ajax-JQuery</title> 32 <style type="text/css"> 33 span.inputan { display:block; margin-bottom:5px; } 34 span.inputan label { float:left; display:block; width:200px;} 35 </style> 36 <script type="text/javascript" src="libs/jquery.min.js"></script> 37 <script type="text/javascript"> 38 $(document).ready(function(){ 39 $('#propinsi').change(function(){ 40 $.getJSON('index.php',{action:'getKab', kode_prop:$(this).val()}, function(json){ 41 $('#kabupaten').html(''); 42 $.each(json, function(index, row) { 43 $('#kabupaten').append('<option value='+row.kode+'>'+row.nama+'</option>'); 44 }); 45 }); 46 }); 47 }); 48 </script> 49 </head> 50 <body> 51 <h1>Contoh Manipulasi Combobox dengan Ajax-JQuery</h1> 52 <form action="" method="post"> 53 <span class="inputan"> 54 <label for="propinsi">Propinsi</label> 55 : <select id="propinsi" name="propinsi"> 56 <option value="">-Pilih-</option> 57 <?php 58 foreach ($arrpropinsi as $kode=>$nama) { 59 echo "<option value='$kode'>$nama</option>"; 60 } 61 ?> 62 </select> 63 </span> 64 <span class="inputan"> 65 <label for="kabupaten">Kabupaten</label> 66 : <select id="kabupaten" name="kabupaten"> 67 </select> 68 </span> 69 </form> 70 </body> 71 </html>
Halaman 5 dari 7
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
Library JQuery harus disertakan terlebih dahulu sebelum kita dapat memanipulasi combobox dengan JQuery. Untuk menyertakan library JQuery, kita dapat mengunduhnya dari situs http://jquery.com lalu sertakan seperti pada baris ke-36. Selain itu, kita juga dapat menggunakan online CDN dengan mengarahkan atribut src pada baris ke-36 ke alamat http://code.jquery.com/jquery.min.js, tanpa harus mengunduhnya ke komputer kita. Selanjutnya perhatikan baris 37-48. Untuk mengatur opsi pada combobox kabupaten berdasarkan nilai yang dipilih pada combobox propinsi, kita tentukan event-nya, yaitu change(). Dengan selector #propinsi kita panggil event change() seperti terlihat pada baris ke-39. Dengan demikian, ketika isi / nilai dari combobox propinsi berubah (change) maka fungsi akan dijalankan. Pada baris ke-40 kita menggunakan fungsi $.getJSON untuk memanggil file index.php dengan mengirimkan parameter action yang berisi getKab dan kode_prop yang diisi dengan kode propinsi terpilih ($(this).val()). Setelah fungsi $.getJSON memanggil file index.php, program akan beralih ke baris 15-27 dimana pada baris tersebut ditangkap nilai parameter kode_prop dengan menggunakan predefined variabel $_GET. Dan selanjutnya dilakukan query ke database, data kabupaten sesuai dengan kode_prop tersebut. Data dimasukkan ke dalam variabel array $arrkab dan diubah ke dalam format JSON dengan fungsi json_encode() seperti terlihat pada baris ke-25. Nilai dari JSON akan ditangkap kembali oleh JQuery pada baris ke 40-45. Nilai dari combobox kabupaten dikosongkan dengan perintah $('#kabupaten').html(''). Fungsi $.each() pada baris ke-42 akan melakukan perulangan untuk setiap nilai dari variabel json ditambahkan opsi (dengan fungsi append) ke dalam object combobox $('#kabupaten'). Dengan demikian, isi combobox selalu berubah sesuai dengan data yang dipilih pada combobox propinsi. Berikut ini screenshot hasil akhir dari program 2 di atas.
Kesimpulan
Secara sederhana, tutorial ini memberikan gambaran bagaimana memanipulasi combobox dengan menggunakan konsep Ajax dan library JQuery, tentu dengan bahasa pemrograman PHP. Contoh di atas menggunakan kasus sederhana propinsi dan kabupaten, namun pada dasarnya dapat dikembangkan dan diterapkan untuk contoh kasus yang lainnya.
Halaman 6 dari 7
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net
Download
Tutorial ini juga telah dipublikasikan di http://achmatim.net/2013/01/15/manipulasicombobox-dengan-ajax-jquery-studi-kasus-data-propinsi-kabupaten/ Download source-code beserta http://achmatim.net/download/46 library dan struktur databasenya di
Semoga tutorial ini bermanfaat untuk kita semua dan berbagilah hal baik ke sebanyakbanyaknya orang maka kebahagiaan akan menghampiri Anda. Satu Karya untuk Indonesia!
Referensi Terkait
Buku Gratis Pemrograman Web dengan PHP & MySQL. http://achmatim.net/bukugratis/pemrograman-web-dengan-php-dan-mysql/ PHP MySQLi Functions. http://id1.php.net/manual/en/book.mysqli.php Situs Resmi JQuery. http://jquery.com
Tentang Penulis
Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005) dan Magister Teknologi Informasi, Universitas Indonesia (S2, 2010). Saat ini sedang menempuh program Doktoral dalam bidang Ilmu Komputer di Universitas Gadjah Mada, Jogjakarta. Kegiatan sehari-hari adalah sebagai Dosen di Universitas Budi Luhur (http://www.budiluhur.ac.id). Kegiatan lain aktif sebagai programmer, web developer, system analyst, konsultan dan memberikan pelatihan di berbagai bidang komputer serta membuat tutorial-tutorial praktis di bidang komputer. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial praktis di bidang komputer serta menyediakan buku gratis komputer. Penulis dapat dihubungi melalui email di achmad.solichin@budiluhur.ac.id dan achmatim@gmail.com, YM achmatim, Facebook achmatim dan Twitter @achmatim.
Lisensi Dokumen
Seluruh isi dalam dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran dan bukan komersial (non profit), dengan syarat tidak menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumen yang disertakan di setiap dokumen. Tidak diperbolehkan mengkomersialkan tutorial ini kecuali mendapatkan ijin terlebih dahulu dari penulis.
Halaman 7 dari 7