Pemrosesan Form dengan Komponen Combo Box
January 3rd, 2009 | by rosihanari |
Cetak Artikel Ini
Wah… lama gak update blog ini, karena terlalu sibuk ngurusin sertifikasi guru 
Kangen rasanya untuk nulis-nulis artikel lagi he.. he.. he…
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.
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Teknik Proses Edit Data Dengan Berbagai Komponen Form
- Memproses Input Komponen Check Box di PHP
- Script PHP untuk Edit Data dengan Komponen RadioButton pada Form
- Editing Data Tanggal via Form dengan PHP
- Beberapa Tombol Submit dalam Satu Form
- Script Multiple File Upload Dengan PHP
- Tentang Letak Script Pengolah Form
- Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
- Membuat Pilihan Combobox Dinamis Tanpa AJAX
- Script PHP untuk Mencegah Submit Form Berulang Kali
Share this article on:
Kata kunci: combobox - form - PHP - script -
[...] saya menulis artikel bagaimana memproses input melalui komponen combo box, dan juga tentang radio button, dalam kesempatan ini, saya akan coba bahas tentang bagaimana [...]
tHANKS sALAM kENAL
kalau mau bikin search engine dengan dua search engine gimana mas? misalnya search engine wordpress buat search di blog & google search buat search web
terus ada pilihan dropdown gitu..
thanks sebelumnya
to antowi: sebenarnya untuk 2 jenis search engine ini sama-sama kita bisa memanfaatkan search enginenya Google. Untuk searching konten di blog kita, kita manfaatkan Google untuk mencari halaman di blog kita yang telah diindex oleh Google. Dahulu hal ini support, karena kita bisa pasang kotak pencarian dengan menggunakan 2 opsi pencarian tersebut. Namun… tampaknya sekarang hanya bisa dipilih salah satu saja. Anda bisa mendapatkan kode untuk menempatkan kotak pencarian tersebut melalui Google Adsense (http://www.google.com/adsense). Untuk petunjuk pemasangan kode kotak pencarian di blog, silakan baca http://blog.rosihanari.net/memasang-adsense-for-search-di-wordpress/
wah tutorial blog ini bagus sekali, klo boleh saya ingin minta tutorial buat suatu pencarian multi kategori dengan combo box misalkan buat suatu pencarian judul buku pada suatu perpustakaan online…
dengan beberapa kategori sbb:
1.Cari berdasarkan judul
2.Cari berdasarkan penerbit
3.Cari berdasarkan tahun terbit
4.Cari berdasarkan kategori buku
Kalo boleh mohon di kasih pencerahannya..
Terima kasih banyak
to wahid: kan sudah ada di sini mas … http://blog.rosihanari.net/ide-membuat-script-php-untuk-pencarian-dengan-multi-kategori/
ya juga ya pak, saya akan coba pelajari lagi…
Terima kasih banyak pak
Assalaamu\’alaykum..
Maaf nih numpang nanya lagi Pak Ari
Gini pak, saya coba modif wordpress saya (di localhost), kebetulan saya ada script \’emailme\’ filena misal : form.html dan kontak.php. Form na Saya taruh di sidebar wordpress dengan metode include. Form na dengan metode \”post\” ke kontak.php. Yg jadi masalah, pas di submit, kok error 404 ya? Apa scriptnya belum dikomunikasikan dg database MySQL nya? Kalo iya, gimana ya caranya? Atau memang wordpress gak bisa akses file tsb langsung dari browser (contohnya : web.com/arsip/kontak.php) ?? Saya masih bingung..
Mohon penerangannya..
Terima Kasih banyak Pak Ari.
Wassalaamu\’alaykum..
to imam zatnika: anda letakkan di folder mana kontak.php nya?
pak bagaimana ya kalau menggunakan bahasa pemrograman JSP. tolong bantu dong. kalau bisa kirim email.
o ya pak. thanks infonya. sesudah saya uprek2 akhirnya ketemu juga n berhasil. q contoh logikanya aja. thanks..
to tery: wah saya gak bisa JSP mas. Sorry… sorry… sorry…
aku mo nanya nih apabila pada “Pemrosesan Form dengan Komponen Combo Box” value-nya ngambil dari dari filed table gimana scripnya? terima kasih
to irfan: mungkin artikel http://blog.rosihanari.net/teknik-proses-edit-data-dengan-berbagai-komponen-form bisa mencerahkan Anda
Terimakasih banyak ya untuk tutor yang ini, sangat membantu saya dalam menyelesaikan tugas
saya mau tanya, misalkan ada 2 combobox, yang pertama combobox jurusan, dan yang kedua combobox program studi dari jurusan yang dipilih pada combobox yang pertama. bagaimana skrip php nya?
to kafa: anda bisa membaca tutorialnya di Membuat Combo Box Dinamis Tanpa AJAX. Cuman di situ studi kasusnya beda dengan punya Anda, tapi konsepnya sama kok.
as wr wb, pak saya sangat berterima kasih telah dapat ilmu dari tutorial bapak, walaupun saya ini lagi tahap belajar, tapi dengan tutorial bapak bisa dipahami dan dapat di praktekkan dalam program,bapak kan sertifikasi guru nie, saya juga agak berkaitan dengan tugas akhir saya sertifikasi dosen,mungkin bapak bisa membantu saya untuk berbagi ilmu masalah sertifikasi, programnya ada gak pak,ya dasar22 nya aja,terimakasih sebelumnya pak atas ilmunya
Halo pak Salam Kenal, Pak Mau tanya kalo query dengan bantuan combo box gimana ya / memfilter data yang akan di tampilkan berdasarkan category yang ada di combox. ketika user memilih category trus klik search maka data yang ditampilkan sesuai dengan categori yg di pilih, btw mau di tampilin di halaman yang sama. mohon maaf kalopertanyaan saya kurang begitu detail.. salam m.subhan
@subhan: hallo salam kenal juga mas. Mungkin yang anda maksud seperti yang pernah saya tulis di http://blog.rosihanari.net/ide-membuat-script-php-untuk-pencarian-dengan-multi-kategori mas.
bang gmn caranya biar combobox jalan,coz saya bingung..saya dah buat combobox,optionnya juga dah ada,cuma 1 doank yang jalan,option yang laen gak jalan..
gmn tuh bang?
@panji: maksudnya option combobox jalan itu gimana mas?
Mantab mas tutorialnya
nah pak saya mau nanya..bagaimana caranya pada saat memilih di combobox..isi pilihan tersebut muncul juga di label..ato di textbox..intinya isi dari textbox tergantung dari pilihan di combobox..mohon bantuannya pak , terimakasih
@yeni: itu nanti anda pake Javascript saja. Silakan cari2 artikelnya di blog ini.
sore pak… mau tanya.. tutorial tentang autocomplete combobox bpk adah ga?? cz sy perhatikan tutorial yg jls n enk pnjelasannya cmn tutorial bpk ini.. Mohon petunjuknya.. Terimakasih sebelumnya…
@nita: belum ada mbak Nita…
salam…
mas rosihanari, mengenai combobox, itu memiliki feature selected, di mana value yg ada selectednya menjadi value default ketika combobox di load. cth :
Indonesia
Malaysia
Australia
Amerika Serikat
Canada
maka Malaysia akan jd nilai default ketika combobox di load. yg jadi pertanyaan saya, jika data combobox tsb dr dtbase seperti diatas. bagaimana menentukan malaysia menjadi default value.
<?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
echo “”.$data['namanegara'].”";
}
?>
dgn syntax diatas default value adlh nilai teratas. lalu bagaimana jika saya ingin malaysia jd default value yg muncul ketika combobox di load??
mohon bantuanny mas rosihanari.. terima kasih.
regards,
Julian R S
@julian: pake IF saja mas…
mas ari saya mw tanya : jadi saya punya 2 combobox
combobox1: untuk lantai
combobox2: untuk kamar
nah jika saya memilih lantai dengan value”lantai 1″ –> secara otomatis combo kamar akn berubah valuenya “1-10″
nah jika saya memilih lantai dengan value”lantai2″ –> secara otomatis combo kamar akan berubah valuenya menjadi “11-20″..
mohon bantuannya mas..
saya sangat membutuhkan…bisa kirim ke email.. thx before
@franz: coba pelajari artikel saya yang di http://blog.rosihanari.net/membuat-pilihan-combobox-dinamis-tanpa-ajax mas… semoga menjawab.
wah terima kasih mas ini sangat membantu…
mungkin kalau boleh tanya lagi apa pernah mas menuliskan tentang
- BBcode seperti halnya kaskus.us jika kita ingin meng-quote kata2 teman..
dan di blog ini tidak ada search ya? kalau boleh ini sebagai masukan agar blog ini menggunakan search (agar mudah mencarinya)
di tunggu balasan untuk bbcode nya
trims
@franz: untuk BBcode saya blm ada ide mas, untuk search ada kok… yaitu di kolom tengah blog, tepat di atas foto saya.
mas script :
menunjukan hasil dari
@kodenegara= adalah KODE NEGARANYA.,., kalau ingin menunjukan berserta nama negaranya juga bagai mana mas,.,. langsung dari database.,.,.,
tanpa IF.,.,. dengan 1 kali Select,.,.,.
aku masih bingggung,.,.,.,.
pleass mas jawab,.,. atau email aku
@nazfra: setelah kode negara kebaca, Anda harus melakukan query SQL untuk mendapatkan nama negara berdasarkan kode negara itu mas.
Pak…!!! lagi pengin belajar Web Programming dnegan PHP, My SQL, Java, CSS de el el lah pokoke… tapi kok susah yaaaa. ga tahu harus mulai dari mana….. mencoba-mencoba dan mencoba tapi kok ya belum berhasil juga yaaaa….
maklum juga sih AUTODIDAK….. lulusan cuma SMA IPS…. hahahahaha
@auramj: kalo mau belajar dunia web programming, pelajari dulu HTML, algoritma dan logika mas
alhamdulillah…. pak Dosen!!! Aku dah sedikit ngerti tentang html, css, koneksi php ke database mysql, dan ni lagi pengin melanjutkan ke OOP di PHP….
beberapa tutorial memang saya ambil dari blog bapak! dan browsing ‘n browsing terus…. coba ‘n coba terus….
eh pak…. maafyaaa. kalo nanti aku da kesulitan bisa minta pencerahannya yaaa…..
@auramj: saya mah gak bisa OOP mas
ah….! Bapak bercanda…… hahahhaa
aku sih g percaya kalo seorang Magister dibidang komputer ga bisa Object Oriented Programing……
merendah yaaaa pak…..!
Tapi…. apapun itu….
makasih ya pak atas kepeduliannya….
sharing ilmunya…..
Yuk kita kembangkan terus IT Indonesia yang sehat…..!
Sebenarnya aku dah coba2 bikin di web di webhosting gratisan .co.cc
tapi belum berani mempublikasikan…. dah jadi sih… tapi ya yang namanya coba2
makasih mas infonya,,maaf mas,mau nanya ni,,saya mau membuat pencarian multi kategori dengan beberapa combo box..data yang akan saya tampilkan adalah data guru,kategori yang digunakan untuk mencari data adalah berdasarkan jabatan,golongan,,gimana ya mas,,,terimakasih,,,
pak Rosihanari,
Dari contoh script dalam artikel bapak, bagaimana cara menampilkan nama negaranya ?, bokan kode negaranya ?
Tanpa database ya pak, cukup dari kode bapak diatas.
terimaksih atas sharing ilmu pengetahuannya
mas saya maw nanya apakah combo box tsb dapat di input ke dalam database, misal
andai kata saya membuat form berisikan data” yang akan di input kemudian saya menyediakan combo box menjadi salah satu inputan data, akan tetapi hanya combo box yang tidak masuk kedalam database.. mohon pencerahanya mass… sudah butek kepala saya . trmksh banyak mas artikel nya sangat bermanfaat
@maulana: bisa saja mas, karena combo box itu adalah komponen input spt halnya komponen form yg lain. Mungkin masih ada yg salah di script input combo box anda. Pastikan nama komponen combobox nya sama dengan $_POST['nama komponen combo'];