Membuat Form ComboBox Dinamis dari Database (Mysql) dengan PHP

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! 

Artikel Terkait di Bawah posting

Posted in: php