Manipulasi combobox dengan ajax j query: studi kasus data propinsi kabupaten

Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.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.

Data Propinsi & Kabupaten
Seperti sudah dinyatakan di atas, kita akan menggunakan contoh kasus data propinsi dan
kabupaten/kota di Indonesia. Untuk menyederhanakan kasus, hanya field kode dan nama
saja yang akan dibuat. Berikut ini class diagram (struktur data) penyimpanan data propinsi

Halaman 1 dari 7


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.

Menampilkan Data di Combobox dengan PHP
Untuk menampilkan data dari database ke combobox, pada dasarnya sama seperti
menampilkan data seperti biasanya. Proses menampilkan data ke combobox dapat dilihat
pada program 1 berikut ini. Pertama-tama kita lakukan koneksi ke database mysql, kali ini
kita menggunakan fungsi mysqli_* yang merupakan pengembangan dari fungsi mysql_*.
Konon fungsi ini performanya lebih baik dibanding fungsi mysql_*, dan juga dapat ditulis
dengan gaya prosedural maupun object-oriented. Untuk lebih mempermudah, pada contoh-
contoh program di bawah ini, kita akan gunakan gaya prosedural.
Perhatikan baris ke-3 program di bawah ini. Untuk melakukan koneksi ke mysql
menggunakan fungsi mysqli_connect()1 yang memiliki 6 (enam) parameter terkait dengan
server MySQL yaitu hostname, username, password, nama database, port dan socket. Pada
model object-oriented, fungsi ini merupakan alias dari mysqli::__construct() 2. Setelah
melakukan koneksi, selanjutnya pada baris 6-12 dilakukan pengambilan data propinsi dari
tabel propinsi dan ditampung dalam variabel array $arrpropinsi. Kita menggunakan fungsi
mysqli_query() untuk meng-eksekusi perintah query dan fungsi mysqli_fetch_assoc() untuk
mengambil hasil perintah query-nya.
Perhatikan baris baris 28-23. Pada baris tersebut, dibuat object combobox dengan tag
<select> dengan atribut name “propinsi” dan id juga “propinsi”. Dan untuk menampilkan
data propinsi di combobox, kita gunakan bentuk perulangan foreach() dengan parameter
variabel $arrpropinsi yang berisi data propinsi. Sementara itu, untuk combobox data
kabupaten/kota kita cukup membuat object <select>-nya saja (baris ke-39). Untuk datanya
akan di-generate saat opsi di combobox propinsi dipilih nantinya.

1 http://php.net/manual/en/function.mysqli-connect.php
2 http://id1.php.net/manual/en/mysqli.construct.php

Halaman 2 dari 7


Program 1: Menampilkan Data Propinsi di Combobox
1 <?php
2 #koneksi
3 $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
4 #akhir-koneksi
5
6 #ambil data propinsi
7 $query = "SELECT kode, nama FROM propinsi ORDER BY nama";
8 $sql = mysqli_query($conn, $query);
9 $arrpropinsi = array();
10 while ($row = mysqli_fetch_assoc($sql)) {
11 $arrpropinsi [ $row['kode'] ] = $row['nama'];
12 }
13
14 ?>
15 <html>
16 <head>
17 <title>Manipulasi Combobox dengan Ajax-JQuery</title>
18 <style type="text/css">
19 span.inputan { display:block; margin-bottom:5px; }
20 span.inputan label { float:left; display:block;
width:200px;}
21 </style>
22 </head>
23 <body>
24 <h1>Contoh Manipulasi Combobox dengan Ajax-JQuery</h1>
25 <form action="" method="post">
26 <span class="inputan">
27 <label for="propinsi">Propinsi</label>
28 : <select id="propinsi" name="propinsi">
29 <option value="">-Pilih-</option>
30 <?php
31 foreach ($arrpropinsi as $kode=>$nama) {
32 echo "<option value='$kode'>$nama</option>";
33 }
34 ?>
35 </select>
36 </span>
38 <label for="kabupaten">Kabupaten</label>
39 : <select id="kabupaten" name="kabupaten">
40 </select>
41 </span>
42 </form>
43 </body>
44 </html>

Jika program 1 di atas dicoba maka tampilannya kurang lebih sebagai berikut.

Halaman 3 dari 7


Gambar 1: Tampilan Combobox Propinsi dan Kabupaten

Isi Combobox Kabupaten berdasarkan Propinsi yang Dipilih
Sesuai dengan tujuan utama dari tutorial ini, sekarang kita akan mengisi combobox
kabupaten berdasarkan opsi combobox propinsi yang dipilih. Jadi data kabupaten/kota yang
akan muncul di combobox kedua selalu sesuai dengan propinsi yang dipilih. Dan sesuai
dengan judul tutorial ini, kita akan menggunakan konsep AJAX dengan library JQuery.
Perhatikan Contoh Program ke-2 berikut ini!

Program 2: Manipulasi Combobox
1 <?php
2 #koneksi
3 $conn = mysqli_connect("localhost", "root", "qwerty", "demo");
4 #akhir-koneksi
5
6 #ambil data propinsi
7 $query = "SELECT kode, nama FROM propinsi ORDER BY nama";
9 $arrpropinsi = array();
11 $arrpropinsi [ $row['kode'] ] = $row['nama'];
12 }
13
14 #action get Kabupaten
15 if(isset($_GET['action']) && $_GET['action'] == "getKab") {
16 $kode_prop = $_GET['kode_prop'];
17
18 //ambil data kabupaten
19 $query = "SELECT kode, nama FROM kabupaten WHERE
kode_prop='$kode_prop' ORDER BY nama";
21 $arrkab = array();
23 array_push($arrkab, $row);
24 }
25 echo json_encode($arrkab);
26 exit;
27 }
28 ?>

Halaman 4 dari 7


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">
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>
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


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.

Gambar 2: Screenshot program manipulasi combobox

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


Download
• Tutorial ini juga telah dipublikasikan di http://achmatim.net/2013/01/15/manipulasi-
combobox-dengan-ajax-jquery-studi-kasus-data-propinsi-kabupaten/
• Download source-code beserta library dan struktur databasenya di
http://achmatim.net/download/46

Semoga tutorial ini bermanfaat untuk kita semua dan berbagilah hal baik ke sebanyak-
banyaknya orang maka kebahagiaan akan menghampiri Anda. Satu Karya untuk Indonesia!

Referensi Terkait
• Buku Gratis Pemrograman Web dengan PHP & MySQL. http://achmatim.net/buku-
gratis/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

Manipulasi combobox dengan ajax j query: studi kasus data propinsi kabupaten

Recommandé

Recommandé

Contenu connexe

Plus de Achmad Solichin

Plus de Achmad Solichin (20)

Manipulasi combobox dengan ajax j query: studi kasus data propinsi kabupaten