Sabtu, 04 Desember 2010

ComboBox Di PHP

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 gabunganJavascript 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 mengenerateJavascript DOM dengan PHP. Javascript itu nanti yang akan digunakan untuk memberikan efek dinamisnya.
Mungkin ada yang bertanya, ngapain harus pakai PHP? apa dengan Javascript DOMsaja 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.
01.CREATE TABLE propinsi (
02.idProp int(11),
03.namaPropinsi varchar(50),
04.PRIMARY KEY  (idProp)
05.)
06. 
07.CREATE TABLE kab (
08.idKab int(11),
09.namaKabupaten varchar(50),
10.idProp int(11),
11.PRIMARY KEY  (idKab)
12.)
13. 
14.INSERT INTO propinsi VALUES (1, 'Jawa Tengah');
15.INSERT INTO propinsi VALUES (2, 'Jawa Barat');
16.INSERT INTO propinsi VALUES (3, 'Jawa Timur');
17. 
18.INSERT INTO kab VALUES (1, 'Kab. A', 1);
19.INSERT INTO kab VALUES (2, 'Kab. B', 1);
20.INSERT INTO kab VALUES (3, 'Kab. C', 1);
21.INSERT INTO kab VALUES (4, 'Kab. D', 2);
22.INSERT INTO kab VALUES (5, 'Kab. E', 2);
23.INSERT INTO kab VALUES (6, 'Kab. F', 2);
24.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
01.<?php
02.// koneksi mysql
03.mysql_connect('dbhost', 'dbuser', 'dbpass');
04.mysql_select_db('dbname');
05.?>
06. 
07.<html>
08.<head>
09.</head>
10.<body>
11.<h1>Demo</h1>
12.<form name="demo"  method="post"  action="submit.php">
13.<table>
14.<tr><td>Pilih Propinsi</td><td>:</td>
15.<td>
16.<select name="prop" onchange="showKab()">
17.<option>Silakan Pilih</option>
18.<option>------------------------</option>
19.<?php
20.// query untuk menampilkan propinsi
21.$query = "SELECT * FROM propinsi";
22.$hasil = mysql_query($query);
23.while ($data = mysql_fetch_array($hasil))
24.{
25.echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
26.}
27.?>
28.</select>
29.</td>
30.</tr>
31.</table>
32.</form>
33.</body>
34.</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
01.<?php
02.// koneksi mysql
03.mysql_connect('dbhost', 'dbuser', 'dbpass');
04.mysql_select_db('dbname');
05.?>
06. 
07.<html>
08.<head>
09.</head>
10.<body>
11.<h1>Demo</h1>
12.<form name="demo"  method="post"  action="submit.php">
13.<table>
14.<tr><td>Pilih Propinsi</td><td>:</td>
15.<td>
16.<select name="propinsi" onchange="showKab()">
17.<option>Silakan Pilih</option>
18.<option>------------------------</option>
19.<?php
20.// query untuk menampilkan propinsi
21.$query = "SELECT * FROM propinsi";
22.$hasil = mysql_query($query);
23.while ($data = mysql_fetch_array($hasil))
24.{
25.echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
26.}
27.?>
28.</select>
29.</td>
30.</tr>
31.<tr><td>Pilih Kabupaten</td><td>:</td>
32.<td>
33.<select name="kab" id="kabupaten">
34.</select>
35.</td>
36.</tr>
37.</table>
38.</form>
39.</body>
40.</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:
1.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
1.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)
01.<script language="JavaScript" type="text/JavaScript">
02. 
03.function showKab()
04.{
05.if (document.demo.propinsi.value == "1")
06.{
07.document.getElementById('kabupaten').innerHTML = "<option value='1'>Kab. A</option><option value='2'>Kab. B</option><option value='3'>Kab. C</option>";
08.}
09.}
10. 
11.</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.
01.<script language="JavaScript" type="text/JavaScript">
02. 
03.function showKab()
04.{
05.<?php
06. 
07.// membaca semua propinsi
08.$query = "SELECT * FROM propinsi";
09.$hasil = mysql_query($query);
10. 
11.// membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
12.while ($data = mysql_fetch_array($hasil))
13.{
14.$idProp = $data['idProp'];
15. 
16.// membuat IF untuk masing-masing propinsi
17.echo "if (document.demo.propinsi.value == \"".$idProp."\")";
18.echo "{";
19. 
20.// membuat option kabupaten untuk masing-masing propinsi
21.$query2 = "SELECT * FROM kab WHERE idProp = $idProp";
22.$hasil2 = mysql_query($query2);
23.$content = "document.getElementById('kabupaten').innerHTML = \"";
24.while ($data2 = mysql_fetch_array($hasil2))
25.{
26.$content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";
27.}
28.$content .= "\"";
29.echo $content;
30.echo "}\n";
31.}
32. 
33.?>
34.}
35.</script>
Hasil script di atas akan mengenerate Javascript sbb:
01.<script language="JavaScript" type="text/JavaScript">
02. 
03.function showKab()
04.{
05.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>"}
06.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>"}
07.if (document.demo.propinsi.value == "3"){document.getElementById('kabupaten').innerHTML = "<option value='7'>Kab. G</option>"}
08.}
09.</script>
Nah… terakhir kita gabungkan script di atas dengan script sebelumnya menjadi satu kesatuan.
demo.php
01.<?php
02.// koneksi mysql
03.mysql_connect('dbhost', 'dbuser', 'dbpass');
04.mysql_select_db('dbname');
05.?>
06. 
07.<html>
08.<head>
09. 
10.<script language="JavaScript" type="text/JavaScript">
11. 
12.function showKab()
13.{
14.<?php
15. 
16.// membaca semua propinsi
17.$query = "SELECT * FROM propinsi";
18.$hasil = mysql_query($query);
19. 
20.// membuat if untuk masing-masing pilihan propinsi beserta isi option untuk combobox kedua
21.while ($data = mysql_fetch_array($hasil))
22.{
23.$idProp = $data['idProp'];
24. 
25.// membuat IF untuk masing-masing propinsi
26.echo "if (document.demo.propinsi.value == \"".$idProp."\")";
27.echo "{";
28. 
29.// membuat option kabupaten untuk masing-masing propinsi
30.$query2 = "SELECT * FROM kab WHERE idProp = $idProp";
31.$hasil2 = mysql_query($query2);
32.$content = "document.getElementById('kabupaten').innerHTML = \"";
33.while ($data2 = mysql_fetch_array($hasil2))
34.{
35.$content .= "<option value='".$data2['idKab']."'>".$data2['namaKabupaten']."</option>";
36.}
37.$content .= "\"";
38.echo $content;
39.echo "}\n";
40.}
41. 
42.?>
43.}
44.</script>
45. 
46.</head>
47.<body>
48.<h1>Demo</h1>
49.<form name="demo"  method="post"  action="submit.php">
50.<table>
51.<tr><td>Pilih Propinsi</td><td>:</td>
52.<td>
53.<select name="propinsi" onchange="showKab()">
54.<option>Silakan Pilih</option>
55.<option>------------------------</option>
56.<?php
57.// query untuk menampilkan propinsi
58.$query = "SELECT * FROM propinsi";
59.$hasil = mysql_query($query);
60.while ($data = mysql_fetch_array($hasil))
61.{
62.echo "<option value='".$data['idProp']."'>".$data['namaPropinsi']."</option>";
63.}
64.?>
65.</select>
66.</td>
67.</tr>
68.<tr><td>Pilih Kabupaten</td><td>:</td>
69.<td>
70.<select name="kab" id="kabupaten">
71.</select>
72.</td>
73.</tr>
74.</table>
75.</form>
76.</body>
77.</html>

Tidak ada komentar:

Posting Komentar