Saturday, February 1, 2014

Membuat Combobox Yang Saling Berhubungan PHP dan MYSQL

Tutorial Pemrograman Ini menggunakan PHP. Saya menulis artikel ini karna teman saya yang lagi sibuk urus skripsi tapi dia tidak mengerti cara membuat combobox yang saling berhubungan. Dari pada cuma satu orang saja yang bakal tau. Mendingan saya tulis saja di blog saya. Teman saya dapat masalah bahagaimana membagi kelas sesuai dengan jurusannya dan cara implementasinya kedalam combobox yang saling berhubungan...??? Kira-kira seperti itu pertanyaannya. Padahal saya tidak tergolong jago web sih. Tapi pertanyaannya juga lumayan susah kalau kita belum pernah membuat atau mengimplementasikannya sendiri. Tanpa perlu berlama-lama mari kita mulai artikel ini.

1. Buat dulu database dengan nama "datajurusan", kira-kira screenshotnya kayak gini kalau menggunakan web server :


2.Kalau sudah buat tabel "jurusan" kira-kira strukturnya seperti ini:

3.Kalau sudah buat tabel "jurusan" isi tabelnya...!! Kira-kira seperti ini :

4.Setelah itu buat tabel "kelas" kira-kira strukturnya seperti ini :
5. Kalau tabel "kelas" sudah jadi, ya, tinggal diisi toh..??? Kira-kira seperti ini :
6. Kalau sudah selesai ketik aja script ini (beri nama combobox.php atau apalah, terserah sahabat):
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#loader").hide();
  $("#jurusan").change(function(){
        $("#loader").fadeIn(500);
        $("#kelas").fadeOut();
    var jurusan = $("#jurusan").val();
    $.ajax({
        url: "proses_kelas.php",
        data: "jurusan=" + jurusan,
        success: function(data){
            // jika data sukses diambil dari server, tampilkan di <select id_kelas>
            $("#kelas").html(data);
                $("#loader").fadeOut(500);
                $("#kelas").fadeIn(1000);
        }
    });
  });
});
</script>
</head>
<body>
<table border="1">
  <tr><td>Jurusan</td>
  <td> :
  <select name="id_jurusan" id="jurusan">
    <option>--Pilih Jurusan--</option>
    <?php
      mysql_connect("localhost","root","");
      mysql_select_db("datajurusan");

      // tampilkan nama-nama jurusan yang ada di database
      $sql = mysql_query("SELECT * FROM jurusan ORDER BY id_jurusan");
      while($p=mysql_fetch_array($sql)){
         echo "<option value=$p[id_jurusan]>$p[jurusan]</option>";
      }
     ?>
   </select>
   </td>
   </tr>
   <tr>
   <td>Kelas</td>
   <td>: <select name="id_kelas" id="kelas">
     <option>--Pilih Kelas--</option>
   </select></td>
   </tr>
   </table>
</body>
</html>



7. Kalau sudah diketik, "Wuih cepat sekali ngetiknya.."  ketik lagi file "proses_kelas.php" :
<?php
mysql_connect("localhost","root","");
mysql_select_db("datajurusan");

$id_jurusan = $_GET['jurusan'];
$kelas = mysql_query("SELECT * FROM kelas WHERE id_jurusan='$id_jurusan'");
echo "<option>--Pilih Kelas--</option>";
while($k = mysql_fetch_array($kelas)){
    echo "<option value=$k[id_kelas]>$k[nama_kelas]</option>";
}
?>

8. Kalau sudah, download lagi jquery.js nya. Anda bisa downloadnya di Situs resminya. Terima Kasih.

Berikut Adalah Hasil Akhir :

Semoga bermanfaat....
Anda Bisa mendownload yang lengkap disini.






Comments
0 Comments

No comments:

Post a Comment