Monday, October 13, 2014

Cara Menggunakan Combo Box Select Pada PHP

Combo box select adalah elemen form berbentuk kotak yang jika diklik akan menampilkan pilihan menu kebawah (drop down list). Combo box lebih efisien digunakan jika opsi pilihan relatif banyak. Dengan combo box form akan lebih ringkas karena hanya dibutuhkan satu baris area saja seperti input checkbox. Proses memilih pada combo box dilakukan dengan lebih dahulu menampilkan keseluruhan isi dengan cara meng-kllik combo box lalu memilih dengan meng-klik salah satu isi dari list combo box.

Cara membuat combo box select pada form

Berbeda dari elemen-elemen form sebelumnya yang menggunakan tag <input> tanpa penutup, kalau untuk membuat combo box menggunakan tag <select> dan ditutup dengan tag </select>. Untuk membuat daftar isi combo box menggunakan tag <option> dan tag penutup </option>.

Untuk mendefinisikan nama combo box menggunakan atribut name yang ditaruh pada tag <select>. Dan untuk mendefinisikan nilai/value sebuah opsi pilihan menggunakan atribut value yang ditaruh pada tag <option>. Jika ingin salah satu opsi di-select saat pertama kali load digunakan atribut selected pada tag <option>.

Sebenarnya jumlah opsi pada combo box minimal dua agar bisa dilakukan pilihan, namun pada penggunaan combo box dinamis yang mengkin saja memunculkan satu opsi saja maka opsi pada combo box bisa dibuat satu. Untuk jumlah opsi maksimal pada combo box belum saya ketahui, namun disarankan agar tidak membuat opsi yang terlalu banyak agar tidak membingungkan pengguna.

Penggunaan combo box select

Seperti disebutkan diatas bahwa combo box select digunakan untuk memilih satu opsi dari beberapa opsi pada form. Alasan menggunakan combo box dibanding input radio button adalah untuk efisiensi tempat jika opsi yang dimunculkan relatif banyak.

Contoh penggunaan combo box adalah saat kita memilih negara asal ketika melakukan proses pendaftaran. Ada lagi contoh penggunaan combo box dinamis seperti saat memilih provinsi dan kabupaten di website kpu ketika kita mengecek nama kita pada DPT pemilu kemarin.

Ada sedikit perbedaan antara combo box yang digunakan pada form PHP dengan combo box pada visual basic yaitu tidak bisa mengetik teks pada combo box. Jika menginginkan hal itu maka harus digunakan komponen yang dibuat sendiri.

Menentukan nilai dari combo box select

Nilai combo box ditentukan dengan atribut value pada tag <option>. Nilai combo box berupa string dan dalam penulisannya harus diapit tanda petik. Salah satu alasan menggunakan combo box adalah nilai-nilai yang akan dimasukkan oleh pengguna sudah diketahui, jadi pengguna tidak salah ketik dalam memasukkan data.

Mengambil nilai dari combo box select

Cara mengambil nilai dari combo box seperti saat mengambil nilai dari input text. Opsi yang dipilih otomatis menjadi nilai balikan sebuah combo box. Saat combo box di load secara otomatis akan memilih opsi yang ditulis paling atas kecuali pada opsi lain ditentukan dengan atribut selected.

Contoh penggunaan combo box select pada PHP

Membuat combo box select pada form
 <form action="" method="post">   
 <select name="buah">  
 <option value="">Silahkan Pilih</option>  
 <option value="Apel">Apel</option>  
 <option value="Jeruk">Jeruk</option>  
 <option value="Semangka">Semangka</option>  
 <option value="Salak">Salak</option>  
 </select>   
 <input type="submit" name="enter" value="Enter">   
 </form>   
Tampilan form diatas pada browser


Membuat script untuk menangani combo box
  <?php   
  if(isset($_POST['enter']))   
  {   
   if(empty($_POST['buah']))  
   {  
   echo "Anda belum memilih!";  
   }  
   else echo "Pilihan anda: ".$_POST['buah'];  
  }   
  ?>  

Penjelasan script

Pada form terdapat satu combo box dengan atribut name=buah. Pada combo box tersebut terdapat empat list pilihan nama buah dan satu pilihan kosong yang ditaruh paling atas dengan label "Silahkan pilih". Tujuan dari pilihan kosong ini adalah mencegah pengambilan data jika pengguna belum memilih sekaligus pemberitahuan untuk mempersilahkan memilih. Masing-masing pilihan memiliki value dan label yang berbeda, yaitu Apel, Jeruk, Semangka dan Salak.

Untuk mengambil value dari combo box select digunakan cara seperti saat mengambil value dari input text. Value yang dihasilkan oleh combo box adalah value dari opsi yang dipilih. Pada script dibuat setelah deteksi tombol enter ditekan akan mengecek value dari combo box select buah. Jika value kosong (empty) artinya combo box select belum dipilih (masih tampil "Silahkan pilih"). Dan jika value tidak kosong akan ditampilkan value dari combo box select.
Lihat index artikel ini

Referensi :

14 komentar:

  1. Sama-sama. Terima kasih juga kunjungannya.

    ReplyDelete
  2. sip mas.....

    mampir ke blog ane:
    adizainfo.blogspot.com

    ReplyDelete
  3. ok. trimakasih kunjungannya.
    Sudah tak lihat blognya bagus, cuma menunya blm disetting ya?
    masih default template kayaknya

    ReplyDelete
  4. terima kasih banyak, sangat membantu :*

    ReplyDelete
  5. Mantab Om, Web saya jadi keren :)

    ReplyDelete
  6. mas, kalo misalnya setiap menu dropdown punya pilihan lagi gimana mas.
    misal menu dropdownnya :
    Buah manis
    Buah masam

    nah pas memilih buah manis ntar muncul "pisang, apel, mangga"
    pas milih buah masam "jeruk, strawbery"

    ReplyDelete
  7. makasih mas tutorialny , berhasil nih.

    ReplyDelete
  8. good tutorial kak ;)

    tapi gimana ya klu nambahi jQuery Validate ? saya udah coba tapi notif-nya malah rancuh

    ReplyDelete
  9. Mas, gimana caranya misalnya ada data di combobox(01,02,03,04)kemudian saya pilih salah satu data dr combobox misalnya (02), begitu saya simpan, data (02) tersebut hilang dr combobox. Makasih

    ReplyDelete
  10. mas , mau tanya gimana caranya nyari data yg ada d dalam combe dengan cara diketik trus data d calam kombo kepilih terima kasih

    ReplyDelete