Studi Kasus : Membuat form combobox dengan isian dinamis dari database (mysql)
Kebutuhan : Webserver Packages, already installed.

Combobox merupakan salah satu element form yang sering digunakan dalam aplikasi – aplikasi pendaftaran, pada umumnya combobox digunakan untuk memilih salah satu option dimana terdapat banyak option yang ada. Value dalam combobox sebenarnya dapat ditulis langsung dalam html, namun, bagaimana jika data yang ingin ditampilkan sangat banyak atau tergantung pada kondisi tertentu?
Misalkan, kita ingin menampilkan pilihan kota – kota yang ada dalam negara Indonesia, maka kota yang ditampilkan juga merupakan kota yg berada dalam Indonesia.
Misalkan, user ternyata berasal dari Inggris, maka kota yang ditampilkan juga merupakan kota yg berada dalam negara Inggris.

Kita memerlukan combobox dinamis.

Ok, langsung praktik saja.

Step 1 : Persiapkan Database

  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_kota, dengan struktur tabel seperti gambar dibawah ini.
  3. Insert kan beberapa sample data, seperti gambar dibawah
  4. Done!

Step 2 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan semua file dalam tutorial ini dalam folder tersebut.

Step 3 : Membuat script koneksi ke Database

  1. Ketikkan script berikut,
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    
  2. simpan dengan nama connect.php

Step 4 : Membuat form combobox dinamis

  1. Ketikkan script berikut,
    <form name='form' method='post' action='prosescombo.php'>
    <h3> Choose Your City</h3>
    <select name="kota">
    <option value=0 selected>- city -</option>
    <?php
    include 'connect.php';
    $q = mysql_query("select * from tb_kota where negara = 'Indonesia' "); //choose the city from indonesia only
    
    while ($row1 = mysql_fetch_array($q)){
      echo "<option value=$row1[kota]>$row1[kota]</option>";
    }
    ?>
    </select>
    <input type="submit" name="submit" value="Submit">
    </form>
    
  2. simpan dengan nama formcombo.php

Step 5 : Membuat menampilkan pilihan

  1. Ketikkan script berikut,
    <?php
    $kota = $_POST['kota'];
    
    	if ($kota == '0') {
    		echo "anda belum memilih";
    	} else
    		echo "anda memilih ".$kota;
    ?>
    
  2. simpan dengan nama prosescombo.php

Step 6 : Testing Code

  1. Pergi ke http://localhost/tutorphp/formcombo.php. Anda akan melihat form seperti dibawah. Pilih salah satu option (Disini saya memilih Solo)
  2. Klik Submit dan anda akan melihat hasilnya

OK. Haaaaaaaapppy Coding! :D
Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

Pencarian ke sini:

combo box, cara menampilkan isi database ke dalam field berdasarkan seleksi combobox, cara mengisi tag select/list dengan looping, cara agar combo box langsung terpilih saat di edit php, combobox php selected, kode combo untuk pilihan, combobox ke database php, membuat pilihan tanggal dengan php myadmin, cara membuat opsi tanggal bulan tahun secara manual di yii, value combobox dari database dengan php, cara menambahkan record di combobox delphi, cara menampilkan angka sampai ke 24 pada combobox html, cara membuat lis menu yabg di panggil dari tebel lain lewat php, cara membuat koneksi tabel melalui combo pilihan pada php dan mysql, cara membuat input combobox dengan database dan java web, cara membuat dinamis textbox saat combobox dipilih, cara membuat dinamis tetxbox ssat combobox dipilih, cara memakai jquery untuk tampilkan barang setelah di select, cara koneksi combobox lebih dari 1, cara filter dengan cepat php mysql.

Related Articles:

Artikel terkait:

: PHP

About the author

obviously, a girl. with sweet smile, off course. turning her 21 years trapped on Informatics departement and just started to having some crush with it lately. she uses wordpress. she loves php. she lo

37 Comments

  • Wanrushdi mengatakan:

    Saya dari Malaysia, telah lama saya ikuti artikel di itx ni, semua coding yg di bagi sukses….. tapi yang saya masih ngak faham dan langsung ngak berjaya bila saya mahu buat coding tu di komputer pelayan (maksudnya bukan di localhost), boleh bapa bimbing saya?

    • itx mengatakan:

      perbedaan mendasar terletak di nama folder.
      misalnya di localhost: E:\namafolder\
      kalau di server : /home/namauser/public_html/

  • dedi mengatakan:

    nama saya dedi, Studi Kasus : Membuat form combobox dengan isian dinamis dari database (mysql) sangat berguna bagi saya, saya sebagai pemula mengucapkan terima kasih.
    setelah saya coba, saya bisa memilih nama kota dan menampilkan nama kota.
    Namun untuk nama kota yang menggunakan spasi / terdiri dari 2 kata misalnya Balik Papan,
    ketika saya memilih kota “Balik Papan”, kemudian saya tekan tombol submit, outputnya hanya mencetak : “Balik” / hanya tercetak satu kata, sedangkan kata sesudah spasi tidak tercetak, untuk itu mohon penjelasan bagi yg sudah mahir php, bagaimana untuk mencetaknya secara utuh, terima kasih sblmnya…. :roll:

  • dedi mengatakan:

    nama saya dedi, Studi Kasus : Membuat form combobox dengan isian dinamis dari database (mysql) sangat berguna bagi saya, saya sebagai pemula mengucapkan terima kasih.
    setelah saya coba, saya bisa memilih nama kota dan menampilkan nama kota.
    Namun untuk nama kota yang menggunakan spasi / terdiri dari 2 kata misalnya New York,
    ketika saya memilih kota “New York”, kemudian saya tekan tombol submit, outputnya hanya mencetak : “New” / hanya tercetak satu kata, sedangkan kata sesudah spasi tidak tercetak, untuk itu mohon penjelasan bagi yg sudah mahir php, bagaimana untuk mencetaknya secara utuh, terima kasih sblmnya…. :roll:

  • kiki mengatakan:

    Saya mau tanya mas,,
    bagaimana cara memasukkan data kedalam combo box, yang apabila di inputkan dari link yang lain,,
    contohnya :
    saya menginputkan nama makanan “nasi goreng” dari link 1, setelah saya klik tombol input, secara otomatis nama makanan “nasi goreng” tadi secara otomatis langsung masuk ke dalam combo box di link 2, dan masuk juga ke dalam database nya.
    tolong dong mas,, bagaimana caranya,,,
    saya udah mencari ke forum2 php, tp tak kunjung ada jawabannya..
    saya berharap sekali pertanyaan saya dijawab,,,
    sebelumnya saya ucapkan terima kasih,,,

    • rizky maulana mengatakan:

      mba buat insert into nya dulu biar masuk ke database selanjutnya mba tinggal panggil dari database buat di link1 ata link 2 nya..

  • Indra mengatakan:

    Dear mass,

    saya mo tanya…..
    sebelumnya saya ucapkan terima kasih untuk solusinya,saya sudah bisa memasukan data combobox secara otomatis dari database,akan tetapi saya ada permasalahan kembali….
    saya ingin memunculkan data dari combobox tersebut ke dalm text box, contohnya begini mass…
    misalnya data yang ada di text box saya tersebut berisi value kode.nah ketika saya select nilainya akan muncul secara otomatis di text boxnya seperti untuk type or nama barangnya…..
    saya sudah mencoba menggunakan combobox dinamis with ajax….tapi tetap tidak muncul..

    Mohon bantuan dan sarannya ya mass…….. (worship) (worship)

    thanks a lot.

  • ibnu mengatakan:

    Bos itx,

    thank you atas sourcecode combobox dinamisnya. Namun saat ini ada kebutuhan untuk membuat combobox pilihan dengan jumlah record yang sangat banyak (mencapai puluhan ribu record) dalam satu field yang akan diletakkan pada satu combo box.

    Oleh karena itu, maka perlu dibuat combobox seperti pada Searching by keypress oleh pencari seperti mencari seseorang di facebook. Setiap kata yang diketik pada combobox langsung melakukan filter/seleksi yang bersesuaian (perintah LIKE?) antara kata yang telah diketik dengan record yang bersesuaian.

    Bisa bantu kode nya Bos itx?

    Regards,

    Ibnu.

  • deny agustian mengatakan:

    Sy punya pengalaman sama ky mas Dedi, ketika memilih data dari combo box yg lebih dari satu kata, misalnya “New York”, setelah di klik submit, maka data yg tersimpan di database cuma satu kata aja : “New”, sedangkan kata setelah spasi tidak tersimpan di database. tolong pencerahannya dong master ix….butuh banget neh…….

  • Adi Saputra mengatakan:

    Artikel yang sangat membantu..
    terima kasih..

    tukeran link ya gan..
    http://tuto-rial.com/
    salam

  • anton mengatakan:

    boleh juga gan

  • wahyu mengatakan:

    sangat membantu, tapi jika untuk menampilkan negaranya hampir sama kan caranya? tp hasilnya yg muncul indonesia 2x dan amerika jg 2x, bagaimana caranya biar yang di combobox cm mcl 1x ? :wink:

  • NurJay mengatakan:

    contoh pada database mahasiswa : misaal sy punya tabel mahasiswa, krs, dosen, mata kuliah,dll. form input mahasiswa menyimpan data mhs, form dosen utk dosen, dst.
    form krs, berisi nim, nama, jurusan, mata kuliah, dosen. tabel krs terkoneksi dengan tabel mhs, dosen, matakuliah.
    pertanyaan sy:
    – karena data saya suda terinput pada form mahasiswa maka, jika saya akan mengisi form krs, maka jika saya menginput nim sya , maka data nama dan jurusan saya akan muncul otomatis form, jadi kita tinggal input data matakuliah dan dosen yang masih kosong/ akan dipilih. mohon solusinya.. trims sblmnyahttp://itx.web.id/wp-includes/images/smilies/wink.gif

  • fil mengatakan:

    (heart) sis, ajarin donk combobox dinamisnya kok di xampp gak bisa ya..
    pliss..
    aq mau buat pilihan negara trus tampil kota2nya tp gak sukses tuh gimana ya ajarin dooonk..

  • widhi mengatakan:

    dah dicb kode diatas n sukses running gan.
    tp ada yg ingin sy tanyakan: ;-)
    kode diatas, nyarinya kan berdasarkan negara yg langsung ditulis discriptnya pake indonesia.
    nah kalo nama negaranya kita buat pake combobox (diinput secara manual pake script aja kemudian dicombobox yg kedua langsung tampil nama kotanya kl combobox yg pertama diklik nama negaranya), gmana scriptnya gan (jd ada 2 combobox)???

    mohon sharingnya :-)

  • jouleea mengatakan:

    mas, punya contoh ga untuk kasus saya berikut :
    1. saya punya tabel barang
    2. kemudian ada menu tampilan untuk menampilkan data – data barang dan di sebelahnya ada cekbox
    3. jika saya memilih dengan acak, kemudian submit, maka pilihan2 yg saya cek terinsert ke tabel gudang_stok

    mohon pencerahannya,
    kl yang delete multiple saya udah coba berhasil, tp untuk insert belum berhasil….
    :oops: :oops:

  • baharsan mengatakan:

    makasih infonya bro…thanks ya… bermanfaat banget… :)

  • Massol mengatakan:

    Okelah gan, mantep tutorialnya. Hatur Tengkyu (dance)

  • Aba Vernandez mengatakan:

    Makasih banyak ya gan, ini berarti buat sy yg masih pemula. semoga amal kebaikannya di balas dengan yang lebih baik oleh 4JJI SWT. Amiiinn… Saya selalu mengikuti setiap materi dari sini krn saya dapat paham dengan cepat di situs ini. Makasih.. ya…!

  • sudana mengatakan:

    mas klo mau memunculkan yang amerika scriptnya gmn ngeloopingnya?
    jadi yg atas combobox untuk negara indonesia dan bawahnya combobox untuk amerika.. ;)

  • crystal table lamp mengatakan:

    Hi! Would you mind if I share your blog with my zynga group? There’s a lot of people that I think would really appreciate your content. Please let me know. Cheers

  • Hey! I could have sworn I’ve been to this blog before but after reading through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  • Muhamad mengatakan:

    Terima kasih atas penjelasannya , sangat membantu , memang hal kecil sederhana jika belum tahu akan menjadi hambatan besar

  • khoiron mengatakan:

    misal untuk coding edit, cara manggilnya gmn mas kalau inputannya milih dari data base di atas

  • muhammad abdul azis mengatakan:

    mas kalau program dijava gimana untuk menampilkan otomatis ketika diklik combobok?terimakasih mas

  • aspandi mengatakan:

    Mohon pencerahannya mas, Saya membuat form edit, lalu saya memanggil dan menampilkan daftar nama yang ada di database dalam bentuk combo box., gimana caranya agar ketika salah satu data di-klik (data yg ingin di edit) dan record nama dari data yg ingin di edit tersebut otomatis ter-select ? (dalam kasus combo box)

  • rendih mengatakan:

    mau tanya kalau mau menampilkan atau memanggil data yang udah tampil di list menu kemudian ditampilkan di listmenu selanjutnya dan sampai ke textfield atau textarea..
    terus gimana cara buat field jadi autonumber contoh nya (Kd_001) dan seterusnya
    php saya menggunakan dreamweaver ..
    mohon pencerahaannya..soal ya udah 1 minggu belum ketemu2 juga kalau bisa kasih link download nya bentuk pdf ATAU tutorial ya makasih seblumnya udh dikasih komen..
    salam

  • State Architect Guðjón Samúelsson’s design of
    the church was commissioned in 1937.

  • geo target mengatakan:

    Hi colleagues, how is all, and what you want to say about this piece of writing, in my view its genuinely amazing
    iin favor of me.

  • mamachineapain.com mengatakan:

    Hurrah! In the end I got a weblog from where I know how to in fact get helpful facts concerning my study and knowledge.

  • Rosalyn mengatakan:

    I am regular visitor, how are you everybody? This piece off writig posted
    at tbis site is truyly nice.

  • This is a topic which is near to myy heart… Besst wishes!
    Where are your contact details though?

  • dodo games mengatakan:

    It’s amazing for me to have a website, which is good designed for my know-how.
    thanks admin

  • Hi there very nice blog!! Guy .. Beautiful ..
    Superb .. I will bookmark your website and take the feeds also?
    I’m happy to seek out so many helpful information here
    within the post, we’d like work out more strategies in this regard, thanks for sharing.
    . . . . .

  • fikazha mengatakan:

    kalau bikin combobox dengan pilihan misal item code dan itemnya.pada saat dipilih item codenya akan otomatis muncul item codenya.itu gmn cara bikinya? untuk data table item codenya sudah ada.

  • prediksitogel mengatakan:

    makasih gan infonya

  • Yopis mengatakan:

    thanks :mrgreen:

2 Trackbacks / Pingbacks

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

x( X-( B-) ;-) :wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :D :?: :-| :-x :-o :-P :-D :-? :-)) :-) :-( :-& :) :( :!: 8-O 8-) 8) (Русский) (yahoo) (worship) (woot) (wave) (unsure) (tongue) (thinking) (tears) (taser) (smileydance) (sleeping) (sick) (scenic) (rofl) (rock) (party) (panic) (okok) (nottalking) (ninja) (music) (muscle) (muhaha) (money) (mmm) (lonely) (lol) (lmao) (idiot) (hungry) (highfive) (heart_beat) (heart) (headspin) (hassle) (haha) (gym) (griltongue) (goodluck) (girlkiss) (funkydance) (fish_hit) (eyeroll) (evilsmirk) (evil_grin) (drinking) (doh) (devil) (dance) (cry) (cozy) (coffee) (brokenheart) (bringit) (blush) (bigeyes) (beer) (banana_rock) (banana_ninja) (banana_cool) (applause) (annoyed) (angry) (K) (: