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, Script Menampilkan data tabel I combo box, Script combo box untuk menampilkan atabase acces, contoh php mysql pencarian dengan combobox, Membuat pilhan di combo ox, INPUT OTOMATIS DARI EXCEL DENGAN PHP, mengambil dua inputan combobox delphi, membuat pilihan dari yang diseraching dengan php, menambah data combobox bila tak ada php, menampilkan combobox sederhana dari database vb6, menambah data baru pada combobox php, membuat autocomplete dengan netbeans mysql, membuat menu dinamis dengan delphi, membuat combobox di form agar muncul otomatis data yang lain, membuat combobox di php pdf, membuat ComboBox Dinamis dengan DELPHI 7, membuat form daftar dan login pada delphi dan mysql, membuat pencarian dengan combobox di vb6, membuat form login dengan koneksi database dengan netbeans JSP, membuat fungsi if pada delphi.

This post is also available in: English


Related Articles:

: 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

24 Comments

  • Wanrushdi says:

    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 says:

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

  • dedi says:

    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 says:

    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 says:

    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,,,

  • Indra says:

    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 says:

    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 says:

    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 says:

    Artikel yang sangat membantu..
    terima kasih..

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

  • wahyu says:

    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 says:

    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 says:

    (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 says:

    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 says:

    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 says:

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

  • Massol says:

    Okelah gan, mantep tutorialnya. Hatur Tengkyu (dance)

  • Aba Vernandez says:

    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 says:

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

  • 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 says:

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

  • khoiron says:

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

  • muhammad abdul azis says:

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

Leave a Reply

Your email address will not be published. Required fields are marked *