Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetManipulasi Combobox dengan Aja...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Netdan kabupaten:Buatlah dua buah...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetProgram 1: Menampilkan Data Pr...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net                           Gam...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net 29 <html> 30      <head> 31  ...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetLibrary JQuery harus disertaka...
Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetDownload•   Tutorial ini juga ...
Upcoming SlideShare
Loading in …5
×

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

3,247 views
3,014 views

Published on

http://achmatim.net/2013/01/15/manipulasi-combobox-dengan-ajax-jquery-studi-kasus-data-propinsi-kabupaten/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,247
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
120
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetManipulasi 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 2013Cukup banyak pengunjung situs Achmatim.Net yang bertanya seputar manipulasiComboBox secara dinamis. Yang dimaksud dinamis di sini, selain data diambil daridatabase, juga terkait dengan isi dari Combobox yang menyesuaikan pada kondisi tertentu.Hal itulah yang melatarbelakangi saya menulis tutorial ini, walaupun jika mau sedikitberusaha, tutorial di Google terkait hal tersebut sudah cukup banyak.Pada tutorial kali ini, kita akan mengambil studi kasus berupa data inputan Propinsi danKabupaten/Kota di Indonesia. Jika kita menggunakan jenis inputan combobox, tentunya kitaakan menampilkan semua data Propinsi dan Kabupaten/Kota dalam dua combobox yangberbeda. Tentunya hal tersebut tidak efektif karena ada ratusan kabupaten yang ada diseluruh propinsi di Indonesia. Selain itu, rentan juga terhadap kesalahan input, misalnyapada 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 comboboxPropinsi dan Kabupaten saling terkait. Saat dipilih Propinsi tertentu, maka pada comboboxKabupaten akan otomatis berisi nama-nama kabupaten/kota sesuai dengan propinsi yangdipilih tersebut. tutorial ini akan menggunakan konsep Ajax dengan library JQuery. Misalnyajika dipilih propinsi DKI Jakarta, maka otomatis combobox kabupaten hanya berisi JakartaSelatan, Jakarta Utara, Jakarta Barat, Jakarta Timur, Jakarta Pusat dan Kepulauan Seribu.Data Propinsi & KabupatenSeperti sudah dinyatakan di atas, kita akan menggunakan contoh kasus data propinsi dankabupaten/kota di Indonesia. Untuk menyederhanakan kasus, hanya field kode dan namasaja yang akan dibuat. Berikut ini class diagram (struktur data) penyimpanan data propinsi Halaman 1 dari 7
  2. 2. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Netdan 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 fileSQL dari kedua tabel tersebut, lengkap dengan isi datanya, lalu import denganPHPMyAdmin, MySQL Front atau mysql client lainnya. Catatan: file SQL juga sudahdilengkapi dengan perintah membuat database (nama db: demo), jadi tidak perlu bikindatabase dulu sebelum import.Menampilkan Data di Combobox dengan PHPUntuk menampilkan data dari database ke combobox, pada dasarnya sama sepertimenampilkan data seperti biasanya. Proses menampilkan data ke combobox dapat dilihatpada program 1 berikut ini. Pertama-tama kita lakukan koneksi ke database mysql, kali inikita menggunakan fungsi mysqli_* yang merupakan pengembangan dari fungsi mysql_*.Konon fungsi ini performanya lebih baik dibanding fungsi mysql_*, dan juga dapat ditulisdengan 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 mysqlmenggunakan fungsi mysqli_connect()1 yang memiliki 6 (enam) parameter terkait denganserver MySQL yaitu hostname, username, password, nama database, port dan socket. Padamodel object-oriented, fungsi ini merupakan alias dari mysqli::__construct() 2. Setelahmelakukan koneksi, selanjutnya pada baris 6-12 dilakukan pengambilan data propinsi daritabel propinsi dan ditampung dalam variabel array $arrpropinsi. Kita menggunakan fungsimysqli_query() untuk meng-eksekusi perintah query dan fungsi mysqli_fetch_assoc() untukmengambil 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 menampilkandata propinsi di combobox, kita gunakan bentuk perulangan foreach() dengan parametervariabel $arrpropinsi yang berisi data propinsi. Sementara itu, untuk combobox datakabupaten/kota kita cukup membuat object <select>-nya saja (baris ke-39). Untuk datanyaakan di-generate saat opsi di combobox propinsi dipilih nantinya.1 http://php.net/manual/en/function.mysqli-connect.php2 http://id1.php.net/manual/en/mysqli.construct.php Halaman 2 dari 7
  3. 3. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetProgram 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> 37 <span class="inputan"> 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
  4. 4. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.Net Gambar 1: Tampilan Combobox Propinsi dan KabupatenIsi Combobox Kabupaten berdasarkan Propinsi yang DipilihSesuai dengan tujuan utama dari tutorial ini, sekarang kita akan mengisi comboboxkabupaten berdasarkan opsi combobox propinsi yang dipilih. Jadi data kabupaten/kota yangakan muncul di combobox kedua selalu sesuai dengan propinsi yang dipilih. Dan sesuaidengan 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"; 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 #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"; 20 $sql = mysqli_query($conn, $query); 21 $arrkab = array(); 22 while ($row = mysqli_fetch_assoc($sql)) { 23 array_push($arrkab, $row); 24 } 25 echo json_encode($arrkab); 26 exit; 27 } 28 ?> Halaman 4 dari 7
  5. 5. 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
  6. 6. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetLibrary JQuery harus disertakan terlebih dahulu sebelum kita dapat memanipulasicombobox dengan JQuery. Untuk menyertakan library JQuery, kita dapat mengunduhnyadari situs http://jquery.com lalu sertakan seperti pada baris ke-36. Selain itu, kita juga dapatmenggunakan online CDN dengan mengarahkan atribut src pada baris ke-36 ke alamathttp://code.jquery.com/jquery.min.js, tanpa harus mengunduhnya ke komputer kita.Selanjutnya perhatikan baris 37-48. Untuk mengatur opsi pada combobox kabupatenberdasarkan nilai yang dipilih pada combobox propinsi, kita tentukan event-nya, yaituchange(). Dengan selector #propinsi kita panggil event change() seperti terlihat pada bariske-39. Dengan demikian, ketika isi / nilai dari combobox propinsi berubah (change) makafungsi akan dijalankan. Pada baris ke-40 kita menggunakan fungsi $.getJSON untukmemanggil 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-27dimana pada baris tersebut “ditangkap” nilai parameter “kode_prop” dengan menggunakanpredefined variabel $_GET. Dan selanjutnya dilakukan query ke database, data kabupatensesuai dengan kode_prop tersebut. Data dimasukkan ke dalam variabel array $arrkab dandiubah 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 daricombobox kabupaten dikosongkan dengan perintah $(#kabupaten).html(). Fungsi $.each()pada baris ke-42 akan melakukan perulangan untuk setiap nilai dari variabel jsonditambahkan opsi (dengan fungsi append) ke dalam object combobox $(#kabupaten).Dengan demikian, isi combobox selalu berubah sesuai dengan data yang dipilih padacombobox propinsi.Berikut ini screenshot hasil akhir dari program 2 di atas. Gambar 2: Screenshot program manipulasi comboboxKesimpulanSecara sederhana, tutorial ini memberikan gambaran bagaimana memanipulasi comboboxdengan menggunakan konsep Ajax dan library JQuery, tentu dengan bahasa pemrogramanPHP. Contoh di atas menggunakan kasus sederhana propinsi dan kabupaten, namun padadasarnya dapat dikembangkan dan diterapkan untuk contoh kasus yang lainnya. Halaman 6 dari 7
  7. 7. Manipulasi Combobox dengan Ajax-JQuery: Studi Kasus Data Propinsi & Kabupaten | Achmatim.NetDownload• 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/46Semoga 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.comTentang 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 bidangkomputer. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorialpraktis di bidang komputer serta menyediakan buku gratis komputer. Penulis dapatdihubungi melalui email di achmad.solichin@budiluhur.ac.id dan achmatim@gmail.com, YMachmatim, Facebook achmatim dan Twitter @achmatim.Lisensi Dokumen Seluruh isi dalam dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran danbukan komersial (non profit), dengan syarat tidak menghilangkan, menghapus ataumengubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumen yangdisertakan di setiap dokumen. Tidak diperbolehkan mengkomersialkan tutorial ini kecualimendapatkan ijin terlebih dahulu dari penulis. Halaman 7 dari 7

×