Membuat ComboBox dengan PHP dan Mysql




Selamat datang sobat iniilmu.com, kali ini iniilmu.com merikan tutorial bagaiman cara membuat combobox yang datanya dari database. ComboBox sangat cocok untuk menampilkan data lebih dari satu. baik dari segi tampilan dan lainnya. pada kesimpatan kali ini iniilmu.com akan membagikan tutorial bagaimana membuat combobox yang datanya berasal dari database.

pertama yang kita lakukan adalah membuat databasenya terlebih dahulu, disini iniilmu.com membuat database dengan mysql dengan nama database  "iniilmu" , kemudian membuat tabel dengan nama buah dengan jumlah 2 record yaitu kd_buah dan nm_buah, lihat gambar di bawah ini :


dan isilah tabel tersebut dengan beberapa data yang ingin kalian tampilkan di combobox.

Langkah yang kedua adalah membuat koneksi ke database dengan php, buatlah satu file di dalam sebuah folder yang terletak di dalam folder htdocs kalian, kemudian buat file config.php dan copy kan kode di bawah ini :

<?php   
          $host = "localhost";
          $user = "root";
          $pass ="";
          $db   ="iniilmu";

          mysql_connect($host,$user,$pass) or die(mysql_error()); 
          mysql_select_db($db);
?>

$pass merupakan password yang kalian berikan kepada database kalina, jika tidak ada password maka kosong kan saja seperti contoh diatas ,$db merupakan nama database yang kita buat diawal tadi, ubahlah nama database tersebut sesuai dengan nama database yang kalian buat diawal tadi.

Langkah selanjutnya adalah membuat file index.php di dalam folder yang kalian buat diawal tadi yang terpadat file config.php di dalamnya dan copy kan source code dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Combobox dan PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div class="col-md-offset-3 col-lg-6">
                <h1 class="text-center">Menampilkan Data Ke Combobox</h1>
                <div class="form-group">
                    <label for="buah">Buah</label>
                    <select class="form-control" name="kd_buah" >
                        <option value="">---Pilih---</option>
                        <?php  
                        include 'config.php';
                        $sql = mysql_query("SELECT * from buah");
                        while ($data = mysql_fetch_array($sql)) {
                        ?>
                        <option value="<?php echo $data['kd_buah'] ?>"><?php echo $data['nm_buah'] ?></option>

                       <?php
                        }

                        ?>
                    </select>
                  </div>
            </div>
        </div>
        <!-- /.row -->

    </div>
</body>
</html>

hal-hal yang perlu diperhatikan di dalam source code diatas, adalah yang berwarna merah, itu merupakan source code dari php yang digunakan untuk menampilkan data dari database ke dalam combobox. di dalamnya terdapat variabel $data['kd_buah'] dan $data['nm_buah'] , kedua tulisan yang berwarna merah tersebut bisa kalian ganti sesuai dengan nama record kalian pada tabel yang ada di database.

jika sudah selesai cobalah membukanya di browser kalian masing-masing maka akan tampil seperti gambar di bawah ini :

Jika kalian kurang paham bisa kalian melihan video tutorial nya di sini , semoga bermanfaat jangan lupa like, commen dan subscribe chanel youtube kami.

You might also like

0 Comments


EmoticonEmoticon

About