Menampilkan Data Pilihan ke Radio Button Studi Kasus PMB Online AMIKOM-Mataram

Malam sobat blog,,,
Dah lama gak posting tutorial nih... ^_^

Kali ini saya akan share tutorial untuk menampilkan Data Pilihan dari List/Menu ke Radio Button studi kasus PMB Online AMIKOM-ASM Mataram. Jadi pada tutorial kali ini kita akan menampilkan Data Konsentrasi tiap jurusan yang berbeda-beda kedalam Radio Button. Jadi ketika List/Menu Jurusan dipilih, maka akan menampilkan data Konsentrasi tiap-tiap jurusan dalam sebuah Radio Button.
===============

Gambar Relasi Database untuk Table Jurusan dan Konsentrasi

Buat Tabel Jurusan dan Isi Datanya seperti gambar dibawah ini

Buat Tabel Konsen dan Isi Datanya seperti gambar dibawah ini

Berikut Scriptnya:

Buat file koneksi.php

<?php

// definisikan koneksi ke database
$server = "localhost";
$username = "root";
$password = "";
$database = "db_amikom";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

?>

Berikut potongan script untuk mengambil data dari database

<?php
#koneksi
include "config/koneksi.php";
#akhir-koneksi
 
#ambil data Jurusan
$query = "SELECT * FROM jurusan ORDER BY prog_stud";
$sql = mysql_query($query);
$arrjurusan = array();
while ($row = mysql_fetch_assoc($sql)) {
 $arrjurusan [ $row['kode_jur'] ] = $row['jurusan'];
}
 
#action get Konsentrasi
if(isset($_GET['action']) && $_GET['action'] == "getKon") {
 $kode_jur = $_GET['kode_jur'];
 
 //ambil data Konsentrasi
 $query = "SELECT * FROM konsen WHERE kode_jur='$kode_jur' ORDER BY konsen";
 $sql = mysql_query($query);
 $arrkon = array();
 while ($row = mysql_fetch_assoc($sql)) {
  array_push($arrkon, $row);
 }
 echo json_encode($arrkon);
 exit;
}
$today = date("md");

?>

Berikut potongan javascriptnya

<script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function(){
    $('#pilihan').change(function(){
     $.getJSON('pendaftaran.php',{action:'getKon', kode_jur:$(this).val()}, function(json){
      $('#konsen').html('');
      $.each(json, function(index, row) {
       $('#konsen').append('<label class="radio inline"><input type="radio" name="konsentrasi" id="konsentrasi" value='+row.konsen+'/> '+row.konsen+'</label>');
      });
     });
    });
   });
</script>

Jadi untuk menggunakan script ini anda sudah harus memiliki file Jquery.min.js

Berikut potongan script untuk List/Menunya:

<div class="formSep">
         <div class="row-fluid">
          <div class="span12">
           <label><span class="label label-inverse">Program Studi dan Jurusan yang Anda Pilih</span><span class="f_req">*</span></label>
           <select class="span8" name="pilihan" id="pilihan">
           <option value=""></option>
           <optgroup label="AMIKOM">
           <?php
           #ambil data Jurusan
           $query = "SELECT * FROM jurusan where prog_stud='AMIKOM'";
           $sql = mysql_query($query);
           while($juram=mysql_fetch_array($sql)){
           ?>
           <option value="<?php echo $juram['kode_jur']; ?>"><?php echo $juram['jurusan']; ?></option>
           <? } ?>
           </optgroup>
           <optgroup label="ASM">
           <?php
           #ambil data Jurusan
           $query2 = "SELECT * FROM jurusan where prog_stud='ASM'";
           $sql2 = mysql_query($query2);
           while($juras=mysql_fetch_array($sql2)){
           ?>
           <option value="<?php echo $juras['kode_jur']; ?>"><?php echo $juras['jurusan']; ?></option>
           <? } ?>
           </optgroup>
           
           </select>
           
          </div>
         </div>
        <div class="row-fluid">
          <div class="span12">
           <label><span class="error_placement"><span class="label label-inverse">Konsentrasi</span></span> <span class="f_req">*</span></label>
           <div id="konsen" name="konsen">
           
           </div>
           <br><em>Jika saat anda memilih Program Studi dan Jurusan tidak ada pilihan konsentrasi yang tampil, Berarti jurusan yang anda ambil memang tidak ada pilihan untuk konsentrasinya. Sebaliknya bila ada maka anda wajib memilih satu dari beberapa konsentrasi yang ditampilkan.</em>
          </div>
         </div>
        </div>

Berikut tampilannya:

Semoga Bermanfaat... ^_^

Berbagi Bersama

Menampilkan Data Pilihan ke Radio Button Studi Kasus PMB Online AMIKOM-Mataram

Share this