Home > PHP > Form dengan Komponen Combo Box, data dari database

Form dengan Komponen Combo Box, data dari database

Untuk artikel kali ini saya akan paparkan bagaimana melakukan pemrosesan form dengan komponen combo box. Anda tahu kan apa itu combo box? Ya.. combo box adalah salah satu komponen untuk keperluan input data melalui form. Komponen ini memiliki bentuk seperti drop down menu dan kita diminta memilih item yang diinginkan di antara item yang ada dalam list komponen ini.

Artikel yang akan dibahas dalam blog ini terkait dengan pemrosesan form dengan komponen combo box adalah bagaimana membuat item list supaya muncul dalam combo box. Kita dapat membuat item list secara manual ataupun secara otomatis melalui script yang terhubung ke database. Dengan script ini kita dapat mengenerate item list combo box dari data yang tersimpan dalam database.

Pembahasan pertama kita mulai dahulu dengan bagaimana bentuk tag (X)HTML untuk membuat komponen combo box ini. Untuk membuat komponen combo box, tag (X)HTML nya berbentuk sbb:

<select name="namacombobox">
   <option value="value1">Option 1</option>
   <option value="value2">Option 2</option>
   <option value="value3">Option 3</option>
</select>

Tag (X)HTML di atas akan menghasilkan combo box dengan 3 list item pilihan. Pemberian atribut name combo box jangan sampai lupa dituliskan karena pemberian nama ini nantinya akan terkait dengan proses submit ke script pemrosesan script. Selanjutnya apa maksudnya atribut option? Ya… atribut ini nanti terkait dengan value yang akan disubmit. Misalkan ada user yang memilih item ke-1, yaitu OPTION 1, maka value yang akan disubmit adalah ‘value1′. Sedangkan bila item ke-2 yang dipilih, maka value yang disubmit adalah ‘value2, begitu seterusnya.

Selanjutnya kita terapkan konsep di atas in real world. Maksudnya kita akan membuat combo box dan juga script pemrosesnya. Misalkan combo box ini digunakan untuk menampilkan pilihan negara lalu mensubmitnya.

Oya… supaya value dan data dari combo box ini bisa diproses atau disubmit, komponen combo box ini harus diletakkan dalam tag

form.html

<form method="post" action="submit.php">
Pilih salah satu negara :
<select name="negara">
   <option value="ID">Indonesia</option>
   <option value="MY">Malaysia</option>
   <option value="AU">Australia</option>
   <option value="US">Amerika Serikat</option>
   <option value="CA">Canada</option>
</select>
<input type="submit" name="submit" value="Submit" />
</form>

submit.php

<?php
// membaca value yang disubmit pada komponen bernama 'negara'
$kodeNegara = $_POST['negara'];
echo "Anda telah memilih negara berkode ".$kodeNegara;
?>

OK… bila Anda jalankan form.html di browser, lalu memilih option negara Australia misalnya, kemudian mensubmitnya maka akan tampil “Anda telah memilih negara berkode AU” pada submit.php. Nah dalam hal ini bisa disimpulkan bahwa value yang disubmit adalah value yang terletak pada atribut value=”…” pada tag

Selanjutnya, misalkan Anda punya tabel dalam database yang berisi data lalu Anda ingin menampilkannya sebagai list item combo boxnya. Bagaimana caranya? Caranya mudah sekali bro… konsepnya hanyalah melakukan proses looping pada bagian

sesuai data yang dibaca dari database. OK, sebagai contoh misalkan kita punya tabel COUNTRIES dan data sbb:

CREATE TABLE `countries` (
  `id` varchar(2) NOT NULL DEFAULT '',
  `namanegara` varchar(20) DEFAULT NULL,
  PRIMARY KEY  (`id`)
)
 
INSERT INTO `countries` VALUES ('ID', 'Indonesia');
INSERT INTO `countries` VALUES ('AU', 'Australia');
INSERT INTO `countries` VALUES ('US', 'Amerika Serikat');
INSERT INTO `countries` VALUES ('CA', 'Kanada');
INSERT INTO `countries` VALUES ('MY', 'Malaysia');

maka script PHP untuk mengenerate list item untuk combo box nya adalah sbb:

form.php

<?php
// koneksi ke mysql
mysql_connect("dbhost","dbuser","dbpass");
mysql_select_db("dbname");
?>
 
<form method="post" action="submit.php">
Pilih salah satu negara :
<select name="negara">
<?php
   // query untuk menampilkan semua negara
   $query = "SELECT * FROM countries";
   $hasil = mysql_query($query);
   while ($data = mysql_fetch_array($hasil))
   {
      // setiap negara yang dibaca dari tabel disisipkan ke tag <option></option>
      echo "<option value='".$data['id']."'>".$data['namanegara']."</option>";
   }
?> 
</select>
<input type="submit" name="submit" value="Submit" />
</form>

Gimana mudah sekali bukan? Mudah-mudahan ada manfaatnya buat Anda.

source : blog.rosihanari.net

Categories: PHP
  1. jhon
    November 15, 2010 at 8:53 pm

    thanks ilmunya gan..sangat membantu…gan mau nanya lagi nihh..bisa ndak combo box di edit datanya, maksudnya kaya pencarian gitu…jadi misalnya ane ketik nama negaranya serikat,maka yang tampil di combonya amerika serikat…thanks gan sebelumya..

  2. December 14, 2010 at 2:08 pm

    thank’s bgt ya gan,, ini bgt yang gua cari ,, soalnyo ada tugas nich gan..!!

    thank’s bgt ya gan.. ^_^

  3. wicak
    February 24, 2011 at 4:05 pm

    terimakasih banyak gan🙂

  4. wrushdi
    May 16, 2011 at 10:20 am

    saya nak minta tolong, saya nak buat combobox. senarionya….. ada 2 table database. 1 table utama iaitu maklumat pelajar. 2. table value kaum kepada pelajar. soalannya.. boleh ka combobox paparkan value dari table kaum serta value dari table utama pelajar yang telah disimpan dalam database. seperti contoh combobox boleh paparkan value integer

  5. September 18, 2011 at 1:24 pm

    saya mau tanya,, bagaimana kalau saya klik data yang ada di combo box nya, secara otomatis text box yang ada di bawahnya langsung ke isi secara otomatis..
    tolong dong listingnya gan,,,

    • September 18, 2011 at 9:46 pm

      @kiki: tinggal di pakai perintah if saja

  6. October 10, 2011 at 2:53 pm

    semuanya yang aku lihat sama aja…..jadi mana sih yang pakarnya…..dari tadi aku sharc kok yang tampil codingnya ini semua tapi lain blog/web…….mana yang kopi paste ni…????

    • October 20, 2011 at 12:15 pm

      @mba dian : saya copas dari source : blog.rosihanari.net

  7. April 28, 2013 at 2:37 pm

    Thanks , I’ve just been looking for info about this subject for a long time and yours is the greatest I’ve discovered till now.
    However, what in regards to the bottom line? Are you certain concerning the source?

  8. May 2, 2013 at 2:23 pm

    I don’t even know how I ended up here, but I thought this post was great. I do not know who you are but definitely you’re going to a
    famous blogger if you aren’t already😉 Cheers!

  9. nurany
    February 11, 2014 at 8:00 pm

    maaf saya mencoba kok tidak bisa ?
    maklum newbi
    saya buat db dengan nama db_saya
    dengan 3 tabel
    tabel produk isinya noproduk, namaproduk,hargaproduk
    tabel bayar isinya idbayar,bayartunai,bayarkredit
    tabel pelanggan isinya idpelanggan,namapelanggan,alamat,telp
    nah saya ingin menampilkan jika :
    1. saya combobox noproduk di kolom bawahnya langsung muncul namaproduk bawahnya harga produk
    2. saya combobox idpelanggan di kolom bawahnya langsung muncul namapelanggan bawahnya telp pelanggan
    begitu pula combobox idbayar.

    permasalahan lain
    saya ingin input harga di kolom contoh 10000 maka pada saat di tab atau menuju kolom isian selanjutnya langsung muncul 10.000,00 dan dibawahnya otomatis sepuluh ribu rupiah.

    mohon bantuannya untuk tugas.
    salam kenal
    ynnrny@yahoo.com

  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: