Mau kaos (T-shirt) Wordpress keren? (Selengkapnya)

Pasang banner (468x60) di sini


Dapatkan Script SMS Gateway PHP + MySQL

Seperti: software pengirim SMS massal, SMS survei, SMS polling, SMS quick count, SMS dakwah, Web2SMS dan masih banyak lagi... semuanya berbasis PHP & MySQL
[Info Lengkap...]


Membuat Pilihan Combobox Dinamis Tanpa AJAX


May 13th, 2009 | by rosihanari | Cetak Artikel Ini Cetak Artikel Ini

Ada salah seorang rekan (mas Arif Budiman) yang sekaligus menjadi member saya menanyakan “Bisakah membuat pilihan combobox dinamis tanpa menggunakan AJAX?”.

Beliau menggambarkan kasusnya sebagai berikut:

Misalkan terdapat dua buah combobox. Combobox pertama berisi pilihan tentang spesialisasi dokter, serta combobox kedua berisi pilihan dokter yang sesuai pada spesialisasi dalam combobox pertama. Sebagai contoh misalkan pada combobox pertama dipilih spesialisasi penyakit dalam, maka secara otomatis dan langsung pada combobox dua menampilkan daftar pilihan dokter yang spesialisasinya penyakit dalam. Adapun data yang ditampilkan pada kedua combobox disimpan dalam database MySQL sehingga tidak bersifat statis.

Memang solusi yang bisa dipilih untuk menyelesaikan kasus di atas adalah dengan AJAX (Asynchronous Javascript and XML). Namun… bagi yang belum paham tentang AJAX, jangan khawatir.. ada kok solusi lainnya yaitu dengan menggunakan gabungan Javascript DOM dan PHP.

Mau tahu caranya? Nah… simak lebih lanjut artikel ini :-)

OK bagaimana sih konsep penggunaan gabungan antara Javascript DOM dan PHP untuk menyelesaikan kasus di atas? Ya.. konsepnya adalah kita akan mengenerate Javascript DOM dengan PHP. Javascript itu nanti yang akan digunakan untuk memberikan efek dinamisnya.

Mungkin ada yang bertanya, ngapain harus pakai PHP? apa dengan Javascript DOM saja tidak cukup? Mmm… jawabannya saya belum tahu karena saya belum pernah menjumpai cara koneksi dari Javascript ke MySQL. Kemungkinan bisa dengan menggunakan ODBC, namun saya belum pernah mencobanya. Mengingat Javascript adalah client side (artinya terletak di sisi client) dan MySQL adalah server side (terletak di sisi server), maka kita butuh server side scripting yang bisa mengenerate Javascript sekaligus bisa koneksi ke MySQL di server, dalam hal ini kita menggunakan PHP.

Nah.. kembali ke masalah di atas, pada artikel ini akan dibahas contoh aplikasinya namun dengan kasus yang diambil tidak sesuai dengan kasus yang dicontohkan mas Arif Budiman di atas. Adapun kasus yang saya ambil di sini adalah terkait pemilihan Nama Propinsi dan Nama Kabupaten.

Skenario dari aplikasi ini adalah, setelah user memilih salah satu nama propinsi dari combo box pertama, maka secara otomatis pada combo box kedua memunculkan daftar pilihan nama-nama kabupaten yang terdapat pada propinsi terpilih.

Sesuai kasus pertama yang disampaikan mas Arif di atas, yaitu data pilihan dalam combo box disimpan dalam MySQL, maka terlebih dahulu kita siapkan tabel dan sampel datanya untuk kasus ini.

CREATE TABLE propinsi (
  idProp int(11),
  namaPropinsi varchar(50),
  PRIMARY KEY  (idProp)
)
 
CREATE TABLE kab (
  idKab int(11),
  namaKabupaten varchar(50),
  idProp int(11),
  PRIMARY KEY  (idKab)
)
 
INSERT INTO propinsi VALUES (1, 'Jawa Tengah');
INSERT INTO propinsi VALUES (2, 'Jawa Barat');
INSERT INTO propinsi VALUES (3, 'Jawa Timur');
 
INSERT INTO kab VALUES (1, 'Kab. A', 1);
INSERT INTO kab VALUES (2, 'Kab. B', 1);
INSERT INTO kab VALUES (3, 'Kab. C', 1);
INSERT INTO kab VALUES (4, 'Kab. D', 2);
INSERT INTO kab VALUES (5, 'Kab. E', 2);
INSERT INTO kab VALUES (6, 'Kab. F', 2);
INSERT INTO kab VALUES (7, 'Kab. G', 3);

Dari sampel data di atas tampak bahwa untuk propinsi Jawa Tengah terdapat 3 kabupaten yang bisa dipilih yaitu A, B dan C. Jawa Barat terdapat 2 kabupaten yaitu D dan E, sedangkan Jawa Timur terdapat kabupaten F dan G.

OK.. langkah berikutnya kita terlebih dahulu siapkan halaman untuk membuat combobox pertama.

demo.php

<?php
 // koneksi mysql
 mysql_connect('dbhost', 'dbuser', 'dbpass');
 mysql_select_db('dbname');
?>
 
<html>
<head>
</head>
<body>
<h1>Demo</h1>
<form name="demo"  method="post"  action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
      <td>
          <select name="prop" onchange="showKab()">
          <option>Silakan Pilih</option>
          <option>------------------------</option>
          <?php
                 // query untuk menampilkan propinsi
                 $query = "SELECT * FROM propinsi";
                 $hasil = mysql_query($query);
                 while ($data = mysql_fetch_array($hasil))
                 {
                    echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
                 }
          ?>
          </select>
      </td>	  
</tr>
</table>
</form>
</body>
</html>

Dari script di atas ada beberapa catatan yang perlu kita perhatikan adalah: untuk form kita berikan nama ‘demo’ (name=”demo”), kemudian pada combobox propinsi tersebut kita kasih event ‘onchange‘. Maksudnya adalah ketika proses selection pada combobox tersebut dilakukan maka akan muncul suatu efek tertentu. Nah… event ‘onchange’ ini nanti akan memanggil function dalam Javascript bernama showKab().

Selanjutnya, kita buat juga combobox kedua untuk memilih kabupatennya. Combobox ini kita letakkan dalam form yang sama dengan combobox kedua. Namun.. untuk combobox kedua ini, kita kasih NULL option atau sementara tidak ada daftar option pilihannya karena option tersebut nantinya akan digenerate secara dinamis.

demo.php

<?php
 // koneksi mysql
 mysql_connect('dbhost', 'dbuser', 'dbpass');
 mysql_select_db('dbname');
?>
 
<html>
<head>
</head>
<body>
<h1>Demo</h1>
<form name="demo"  method="post"  action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
      <td>
          <select name="propinsi" onchange="showKab()">
          <option>Silakan Pilih</option>
          <option>------------------------</option>
          <?php
                 // query untuk menampilkan propinsi
                 $query = "SELECT * FROM propinsi";
                 $hasil = mysql_query($query);
                 while ($data = mysql_fetch_array($hasil))
                 {
                    echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
                 }
          ?>
          </select>
      </td>	  
</tr>
<tr><td>Pilih Kabupaten</td><td>:</td>
      <td>
      <select name="kab" id="kabupaten">
      </select>
      </td>	   
</tr>
</table>
</form>
</body>
</html>

Perlu dicatat pula bahwa untuk combobox kedua ini kita perlu beri nama id (id=”kabupaten”) karena akan digunakan sebagai referensi untuk Javascript DOM nya. Javascript DOM nantinya akan mengenerate daftar item option ke dalam komponen berdasarkan nama id ini.

Nah… selanjutnya kita akan berfokus ke dalam Javascript DOM nya.

Anda sudah mengenal Javascript DOM (Document Object Model) bukan? Ya.. dalam kasus ini Javascript DOM akan digunakan untuk mengisi daftar option pada combox box kedua. Secara umum perintah dalam Javascript DOM untuk menyisipkan tag HTML ke dalam suatu komponen dalam halaman web adalah:

document.getElementById('nama id komponen').innerHTML = "...";

Sehingga dari kasus ini, karena komponen yang akan disisipkan tag HTMLnya adalah yang memiliki id=”kabupaten” maka perintah Javascript DOM nya adalah

document.getElementById('kabupaten').innerHTML = "...";

Keterangan: Tanda titik-titik tersebut nantinya akan diisi dengan tag HTML untuk membuat option comboboxnya.

Berikut ini contoh perintah Javascript DOM untuk menyisipkan option combobox ke dalam komponen id=”kabupaten” bila propinsi yang dipilih adalah Jawa tengah (idProp = 1)

<script language="JavaScript" type="text/JavaScript">
 
function showKab()
{
if (document.demo.propinsi.value == "1")
   {
     document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>";
   }
}
 
</script>

Keterangan:

Maksud dari if (document.demo.propinsi.value == "1") adalah bila yang dipilih dari combobox propinsi adalah 1 (Jawa Tengah) maka tampilkan option berisi kabupaten yang ada dalam propinsi Jawa Tengah. Maksud dari ‘demo’ sendiri adalah nama form dimana di dalamnya terletak combobox propinsinya (<form name="demo" .../>), ‘propinsi’ adalah nama komponen dari combobox propinsi (<select name="propinsi" ... />)

Namun… mengingat dalam database terdapat 3 propinsi, kita perlu mengenerate Javascript secara otomatis untuk ketiga propinsi tersebut. Berarti nanti diharapkan terdapat 3 buah IF untuk masing-masing pilihan propinsi. Lantas.. bagaimana cara mengeneratenya? ya… kita gunakan PHP.

<script language="JavaScript" type="text/JavaScript">
 
 function showKab()
 {
 <?php
 
 // membaca semua propinsi
 $query = "SELECT * FROM propinsi";
 $hasil = mysql_query($query);
 
 // membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
 while ($data = mysql_fetch_array($hasil))
 {
   $idProp = $data['idProp'];
 
   // membuat IF untuk masing-masing propinsi
   echo "if (document.demo.propinsi.value == \"".$idProp."\")";
   echo "{";
 
   // membuat option kabupaten untuk masing-masing propinsi
   $query2 = "SELECT * FROM kab WHERE idProp = $idProp";
   $hasil2 = mysql_query($query2);
   $content = "document.getElementById('kabupaten').innerHTML = \"";
   while ($data2 = mysql_fetch_array($hasil2))
   {
       $content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";   
   }
   $content .= "\"";
   echo $content;
   echo "}\n";   
 }
 
 ?> 
 }
</script>

Hasil script di atas akan mengenerate Javascript sbb:

<script language="JavaScript" type="text/JavaScript">
 
function showKab()
{
if (document.demo.propinsi.value == "1"){document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>"}
if (document.demo.propinsi.value == "2"){document.getElementById('kabupaten').innerHTML = "<option value='4'>Kab. D</option><option value='5'>Kab. E</option><option value='6'>Kab. F</option>"}
if (document.demo.propinsi.value == "3"){document.getElementById('kabupaten').innerHTML = "<option value='7'>Kab. G</option>"}
}
</script>

Nah… terakhir kita gabungkan script di atas dengan script sebelumnya menjadi satu kesatuan.

demo.php

<?php
 // koneksi mysql
 mysql_connect('dbhost', 'dbuser', 'dbpass');
 mysql_select_db('dbname');
?>
 
<html>
<head>
 
<script language="JavaScript" type="text/JavaScript">
 
 function showKab()
 {
 <?php
 
 // membaca semua propinsi
 $query = "SELECT * FROM propinsi";
 $hasil = mysql_query($query);
 
 // membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
 while ($data = mysql_fetch_array($hasil))
 {
   $idProp = $data['idProp'];
 
   // membuat IF untuk masing-masing propinsi
   echo "if (document.demo.propinsi.value == \"".$idProp."\")";
   echo "{";
 
   // membuat option kabupaten untuk masing-masing propinsi
   $query2 = "SELECT * FROM kab WHERE idProp = $idProp";
   $hasil2 = mysql_query($query2);
   $content = "document.getElementById('kabupaten').innerHTML = \"";
   while ($data2 = mysql_fetch_array($hasil2))
   {
       $content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";   
   }
   $content .= "\"";
   echo $content;
   echo "}\n";   
 }
 
 ?> 
 }
</script>
 
</head>
<body>
<h1>Demo</h1>
<form name="demo"  method="post"  action="submit.php">
<table>
<tr><td>Pilih Propinsi</td><td>:</td>
      <td>
          <select name="propinsi" onchange="showKab()">
          <option>Silakan Pilih</option>
          <option>------------------------</option>
          <?php
                 // query untuk menampilkan propinsi
                 $query = "SELECT * FROM propinsi";
                 $hasil = mysql_query($query);
                 while ($data = mysql_fetch_array($hasil))
                 {
                    echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
                 }
          ?>
          </select>
      </td>	  
</tr>
<tr><td>Pilih Kabupaten</td><td>:</td>
      <td>
      <select name="kab" id="kabupaten">
      </select>
      </td>	   
</tr>
</table>
</form>
</body>
</html>

Bila Anda coba teknik dan script di atas, maka akan tampil sebagaimana screen shot berikut ini

Photobucket

OK.. selamat mencoba ya… demikian mas Arif Budiman artikelnya mudah-mudahan bermanfaat bagi Anda dan pengunjung setia blog ini semuanya.

[ Download Script ]

UPDATE – Maaf.. ada ralat sedikit.

Sepertinya script di atas tidak bisa jalan di browser IE karena ternyata setelah diselidiki, hal ini diakibatkan oleh tidak supportnya IE untuk menyisipkan tag HTML melalui innerHTML ke dalam komponen SELECT. Sehingga alternatif lain adalah kita ubah perintah

$content = "document.getElementById('kabupaten').innerHTML = \"";

menjadi

$content = "document.getElementById('kabupaten').innerHTML = \"<select name='kab'>";

serta perintah

$content .= "\"";

menjadi

$content .= "</select>\";";

Selanjutnya pada bagian pilih kabupaten

<select name="kab" id="kabupaten"></select>

diganti menjadi

<div id="kabupaten"></div>

hal ini mengingat innerHTML bisa digunakan untuk menyisipkan tag HTML ke dalam komponen DIV, baik dalam IE maupun Firefox.


Beberapa artikel terkait


Share this article on:

Kata kunci: combobox - DOM - Javascript - PHP -


Ada 89 komentar dalam artikel ini.

« Older Comments
Newer Comments »
  1. jeff says:
    September 25, 2009 at 1:18 am

    dijadian form dan mo isi datanya ke database cemana ya? mohon petunjuknya

  2. Dwi Sulistyanto says:
    October 1, 2009 at 12:45 am

    Salam kenal mas,

    Mas Ary, kalo kasusnya dibalik, misalkan ketika kita klik combobox kabupatennya lalu muncul propinsinya secara otomatis, bagaimana ya caranya?

    Terima kasih atas sharing ilmunya.

    “Website Mas Ary bener2 manfaat sekali, semoga Allah membalasnya dengan balasan yang lebih baik”

  3. rosihanari says:
    October 1, 2009 at 4:16 am

    to dwi sulistyanto: makasih mas, salam kenal juga. Sebenarnya dibalik atau tidak, caranya sama saja mas. Berarti pertama menampilkan list option kab dulu dengan query SELECT * FROM kab. Kemudian di dalam function Javascriptnya, pertama lakukan query SELECT * FROM kab dulu, trus untuk setiap ID kabupaten berikan kondisional, IF nilai ID kab = xxx THEN tampilkan Nama Propinsi (diambil dari tabel Propinsi). http://rosihanari.net

  4. Gatot says:
    October 1, 2009 at 11:32 am

    Salam kenal mas Ari, mas kalau kasusnya ada 3 kriteria gimana ya? misal contah diatas tapi ditambah 1 lagi kecamatan, untuk cari kecamatannya gimana ya mas?..
    Terima kasih

  5. Verdi says:
    October 5, 2009 at 12:42 pm

    Mas Ari, trims sebelumnya karena tutorialnya sangat membantu saya.. saya mo tanya :
    saya punya 1 combo box ,1 text field, dan 1 tombol.
    isi combo box : USD, EUR, AUD.
    ketika saya pilih EUR dan tekan tombol Find, maka pada text field muncul data yg benar. tapi pada combo kembali muncul USD i/o EUR ? dapatkah mas membantu saya ? terimakasih banyak-banyak

  6. joni says:
    October 7, 2009 at 3:52 pm

    Salam kenal mas Ari, mas kalau ada 3 pilihan misal propinsi, kabupaten, kecamatan di Internet Explorer gimana mas ? maaf masih awam,
    terima kasih

  7. rosihanari says:
    October 7, 2009 at 6:22 pm

    to joni: ya.. konsepnya sama mas, nanti tinggal tambahkan function javascript lagi.

  8. Vegy says:
    October 7, 2009 at 10:04 pm

    Sebelumnya makasi mas, artikelnya keren2..

    saya ada masalah dengan script diatas, semuanya normal and sukses ketika saya coba, tapi ketika saya Coba di Browser IE kok Combobox untuk Kabupatennya Blank/ kosong??
    kli di browser yang lain normal dan mau muncul..

    thx sebelumnya.. salam.

  9. Vegy says:
    October 7, 2009 at 10:14 pm

    Maaf mas… aku kurang teliti..
    yang di atas hapus aja.. thx infonya..

  10. gede says:
    October 8, 2009 at 7:20 am

    artikel yg bagus tuk belajar n website yg banyak manfaat.

« Older Comments
Newer Comments »


Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.


Mohon maaf, komentar yang menggunakan email palsu atau komentar bernada negatif atau cemooh secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil dalam daftar komentar.

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

*
Untuk membuktikan bahwa komentar Anda bukan spam, tulis kata yang muncul dalam gambar di bawah ini. Bila Anda tidak bisa membaca kata dalam gambar, klik pada gambar tersebut untuk mendengarkan suara dari kata tersebut
Click to hear an audio file of the anti-spam word