Home > PHP > membuat combo box dengan ajax

membuat combo box dengan ajax

Tutorial kali ini saya ambil dari blog orang lain yang saya pikir bagus untuk belajar combo box dengan ajax.

Aplikasi AJAX kali ini adalah sebuah combobox dinamis, berdasarkan kategori Fakultas. Jika user memilih Fakultas Teknologi Industri, maka di bagian Jurusannya akan muncul combobox jurusan Teknik Informatika, Teknik Industri, dan Teknik Elektro.

Datanya diambil dari sebuah database “ri32-ajax” dengan tabel-tabel sebagai berikut :

Adapun file-filenya adalah :

  1. ajax.js untuk file ajaxnya
  2. index.php untuk halaman utamanya.
  3. proses.php berhubungan dengan file ajax.js untuk menampilkan jurusan dan menampilkan rincian dari data yang di input user.
  4. style.css untuk tampilan halaman.
  5. conn.php untuk konfigurasi koneksi php ke database mysql

Download :

http://www.4shared.com/file/218124418/2b61c052/combo.html

Demo :

http://labhouse.co.cc/index.php?page=combo

Semoga turial ini bermanfaat untuk anda…

source: http://ri32.wordpress.com

Combo box tanpa ajax

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>

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

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

menjadi

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

serta perintah

1.$content .= "\"";

menjadi

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

Selanjutnya pada bagian pilih kabupaten

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

diganti menjadi

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

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

 

source :http://blog.rosihanari.net/membuat-pilihan-combobox-dinamis-tanpa-ajax

 

Categories: PHP
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: