conan198.com: Pemrosesan CheckBox dengan PHP dan Javascript (Studi Kasus KRS Online)

Pada Aplikasi berbasis web seperti KRS online kita akan banyak bekerja dengan menggunakan checkbox. Di sini akan kita lihat bagaimana memproses checkbox baik disisi client/browser menggunakan javascript dan pengolahannya di sisi server menggunakan PHP. Data-data untuk checkbox kita ambil nilainya dari database MySQL, kemudian kita tampilkan di halaman web kita, kemudian apabila terjadi event onclick, kita melakukan perhitungan total sks yang telah diclick menggunakan javascript. Kemudian setelah diclick tombol submit data yang sudah diceklist akan kita simpan ke dalam database, dan kemudian kita lihat bagaimana menampilkannya kembali.

Pertama-pertama mari kita buat dua buah tabel di database, yaitu tabel matakuliah dan krs.

Sekarang mari kita buat halaman web untuk menampilkan mata kuliah tersebut

krsonline.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");

//misal kita mau ambil mata kuliah di semester ganjil
$semester = "Ganjil";
echo "MATA KULIAH SEMESTER : $semester<p>
";

//melakukan query ke database
$kuliah = mysql_query("select * from matakuliah where semester='$semester'");
while($k = mysql_fetch_array($kuliah)){
    $kode[] = $k['kode'];
    $nama[] = $k['nama'];
    $sks[] = $k['sks'];
}
?>
<html>
<head>
<title>Check Box</title>
<script>
<?php
echo "var jumlah = ".count($kode).";\n";
echo "var sks = new Array();\n";
//mengambil sks matakuliah dan memasukkan ke array javascript
for($j=0;$j<count($kode);$j++){
    echo "sks['".$kode[$j]."'] = ".$sks[$j].";\n";
}
?>
function hitungtotal(){
    jum = 0;
    for(i=0;i<jumlah;i++){
        id = "mk"+i;
        td1 = "k1"+i;
        td2 = "k2"+i;
        td3 = "k3"+i;
        td4 = "k4"+i;
        if(document.getElementById(id).checked){
            kode = document.getElementById(id).value
            jum = jum + sks[kode];
            //untuk mengubah warna latar tabel apabila diceklist
            document.getElementById(td1).style.backgroundColor = "lightblue";
            document.getElementById(td2).style.backgroundColor = "lightblue";
            document.getElementById(td3).style.backgroundColor = "lightblue";
            document.getElementById(td4).style.backgroundColor = "lightblue";
        }else {
            document.getElementById(td1).style.backgroundColor = "white";
            document.getElementById(td2).style.backgroundColor = "white";
            document.getElementById(td3).style.backgroundColor = "white";
            document.getElementById(td4).style.backgroundColor = "white";
        }
    }
    //menampilkan total jumlah SKS yang diambil
    document.getElementById("jsks").innerHTML = jum;
}
</script>
</head>
<body>
<form name=formulirkrs method=post action=inputkrs.php>
<table border=1 width=400 style="border-collapse:collapse" bordercolor="#999999">
<tr><td><b>Kode</b></td><td><b>Nama Mata Kuliah</b></td>
<td><b>SKS</b></td><td><b>Ambil</b></td></tr>
<?php
//menampilkan matakuliah ke dalam tabel
for($i=0;$i<count($kode);$i++){
    echo "
<tr><td id=k1$i>".$kode[$i]."</td>";
    echo "<td id=k2$i>".$nama[$i]."</td>";
    echo "<td id=k3$i>".$sks[$i]."</td>";
    echo "<td id=k4$i><input type=checkbox name=mk[] onclick=hitungtotal()
    value=".$kode[$i]." id=mk".$i."></tr>
";
}
?>
<tr><td colspan=3>JUMLAH YANG DIAMBIL</td><td><span id=jsks></span</td></tr>
</table>
<input type=submit>
</form>
</body>
</html>

Kemudian setelah itu kita buat kode PHP untuk input ke database dan bagaimana menampilkannya

inputkrs.php

<?php
mysql_connect("localhost","root","");
mysql_select_db("test");

//misal
 saat ini adalah semester ganjil tahun 2010
$nim = "03003120003"; //misal ini adalah NIM mahasiswa yang mengambil
$semester = "Ganjil";
$tahun = 2010;

//cek apakah sudah pernah input;
$cek = mysql_query("SELECT * FROM krs WHERE nim='$nim'
    AND semester='$semester' AND tahun=$tahun");
if(mysql_num_rows($cek) > 0 ){
    die("sudah pernah input
    <br>coba ubah nilai variabel \$nim pada file inputkrs.php");
}

foreach($_POST['mk'] as $value){
    //input ke database krs
    mysql_query("INSERT INTO krs 
VALUES(null,'$nim','$value','$semester',$tahun)");
}

//Menampilkan kembali yang sudah diambil
?>

Berikut KRS yang anda ambil :
<table border=1 width=400 style="border-collapse:collapse" 
bordercolor="#999999">
<tr><td><b>No.</td><td><b>Kode</b></td><td><b>Nama
 Mata Kuliah</b></td>
<td><b>SKS</b></td></tr>
<?php
$krs = mysql_query("SELECT * FROM krs, matakuliah WHERE nim='$nim' AND 
krs.kodekuliah = matakuliah.kode
    AND krs.semester='$semester' AND krs.tahun=$tahun");
$jum = 0;
$i = 1;
while($k = mysql_fetch_array($krs)){
    echo "
<tr><td>$i</td>";
    echo "<td>".$k['kode']."</td>";
    echo "<td>".$k['nama']."</td>";
    echo "<td>".$k['sks']."</td></tr>
";
    $jum = $jum + $k['sks'];
    $i++;
}
echo "
<tr><td 
colspan=3>JUMLAH</td><td>$jum</td></tr>
";
?>
</table>

Download Source Code

Sumber : Web Development - drzpost.com

conan198.com

Pemrosesan CheckBox dengan PHP dan Javascript (Studi Kasus KRS Online)

No comments:

Post a Comment

About Me