Perancangan Aplikasi Ujian Online Berbasis Web

(1)

1. beranda.php

<div style="width:80%;margin:0 auto;font-size:110%">

<fieldset style="margin:0 auto;">

<legend>Info Singkat Tentang Aplikasi Dan

Pengembang</legend>

<div>

<p>

Aplikasi ujian online ini sengaja dibuat sesederhana

mungkin dengan tujuan mudah

digunakan oleh semua orang yang peduli terhadap

dunia pendidikan. Fitur utama dalam

aplikasi ini adalah sebagai berikut :</p>

<div class="judul">Untuk semua user :</div>

<ol>

<li>Melihat profil user</li>

<li>Mengganti password karena secara default

password = username / id dari user tersebut</li>

</ol>

<div class="judul">Untuk user admin :</div>

<ol>

<li>Menambah, mengedit dan menghapus mata pelajaran

yang diujikan</li>

<li>Menambah, mengedit dan menghapus daftar


(2)

<li>Menambah, mengedit dan menghapus siswa peserta

ujian</li>

<li>Melihat dan mendownload hasil ujian siswa dalam

bentuk spreadsheet ( excel )</li>

<li>Menghapus nilai siswa pada ujian tertentu, agar

siswa dapat mengulang ujian tersebut</li>

</ol>

<div class="judul">Untuk user siswa :</div>

<ol>

<li>Mengerjakan ujian yang tersedia</li>

<li>Melihat hasil ujian siswa bersangkutan</li>

</ol>

</div>

</fieldset>

</div>

<style>

div.judul{

text-decoration:underline;

font-weight:bolder;

font-size:115%;

}


(3)

2. buat_soal.php

<?php

include_once "include/koneksi.php"; $id_ujian = $_REQUEST["id_ujian"];

$ujian_exe = mysql_query("select nama_ujian,id_mp from ujian where id_ujian='".$id_ujian."'");

while($data = mysql_fetch_assoc($ujian_exe)){ $id_mp = $data['id_mp'];

$nama_ujian = $data['nama_ujian']; }

$soal_terakhir_exe = mysql_query("select id_soal from soal where id_ujian='".$id_ujian."' order by id_soal");

$jum_soal = mysql_num_rows($soal_terakhir_exe); if($jum_soal > 0){

// cari id_soal terakhir $arr_temp = array();

while($data_soal = mysql_fetch_assoc($soal_terakhir_exe)){ $soal_temp = explode("_",$data_soal['id_soal']); $nomer_soal = $soal_temp[1];

array_push($arr_temp,$nomer_soal); }

$soal_terakhir = max($arr_temp); }


(4)

$soal_terakhir = 0; }

?>

<div class="kembali" onclick="kembali_lagi('<?php echo $id_mp ?>')">Kembali</div>

<script type="text/javascript">

function soal_kosong(id_ujian,soal_ke,jum_soal){ var jml_pil_jawaban = 5;

var nama_radio = "_"+id_ujian+"_"+soal_ke; var id_area = "_"+id_ujian+"_"+soal_ke; var soal_kosong = "<div class='soal_ujian'>";

soal_kosong += "<div class='no_soal'>"+jum_soal+"</div>"; soal_kosong += "<div class='isi_soal'>";

soal_kosong += "<div class='div_editor'><span

onclick='hapus_kaji_editor(\""+id_area+"\")'>Preview</span><span onclick='replaceDiv(\""+id_area+"\")'>Text Editor</span></div>";

soal_kosong += "<div class='pertanyaan' id='"+id_area+"'>Tulis pertanyaan disini ...</div>";

soal_kosong += "<div style='clear:both'></div>"; for(var i = 0; i < jml_pil_jawaban;i++){

soal_kosong += "<div class='pilihan_jawaban'><input type='radio' name='"+nama_radio+"' onclick='jawab(this)'/><textarea


(5)

onclick='popup_editor(this)'>Text Editor</label><label onclick='preview(this)'>Preview</label></span></div>";

}

soal_kosong += "<div><span style='text-decoration:underline'>Kunci Jawaban :</span>";

soal_kosong += "<div class='kunci_jawaban'></div>"; soal_kosong += "</div>";

soal_kosong += "<div style='margin:10px'><span class='tombol simpan' onclick='simpan(this)'>Simpan</span><span class='tombol reset'

onclick='reset(this)'>Reset</span></div>"; soal_kosong += "</div></div>";

return soal_kosong; }

function tambah_soal(jumlah){

var jum_awal = "<?php echo $jum_soal ?>";

var soal_terakhir = "<?php echo $soal_terakhir ?>"; for(var i = 0; i < jumlah; i++){

var id_ujian = "<?php echo $id_ujian ?>";

var soal_ke = $(".soal_ujian").length + 1 + parseInt(soal_terakhir); var id_area = "_"+id_ujian+"_"+soal_ke;

var jum_soal_sekarang = $(".soal_ujian").length + 1 + parseInt(jum_awal);

var soalnya = soal_kosong(id_ujian,soal_ke,jum_soal_sekarang); $(soalnya).appendTo("#tempat_soal");


(6)

replaceDiv(id_area); // info untuk jumlah soal

$("#info_jml_soal").text(jum_soal_sekarang); }

}

function jawab(elm){

$(elm).parent().parent().find("div.kunci_jawaban").html($(elm).next().val( ));

}

function hapus_kunci_jawaban(elm){

$(elm).parent().parent().find("div.kunci_jawaban").empty(); }

function simpan(elm){

var isi_soal = $(elm).parents("div.isi_soal");

// pilihan jawaban dan kunci jawaban gak boleh kosong var pilihan_jawaban = new Array();

var error = 0;

$(isi_soal).find(".pilihan_jawaban>textarea").each(function(index){ if($(this).val() == ""){

$(this).css({"background":"#F4C3C2"}); error++;

} else{


(7)

// yang radio buttonnya dipilih berarti jawaban yang benar var temp_status = 0; // 0 = false

if($(this).prev().is(":checked")){ temp_status = 1;

}

var temp_jawaban = [$(this).val(),temp_status]; pilihan_jawaban.push(temp_jawaban);

} });

// ambil pertanyaan tapi destroy dulu ckeditor biar lebih mudah $(isi_soal).find(".div_editor span").eq(0).click();

var pertanyaan = $(isi_soal).find(".pertanyaan").eq(0).html(); var kunci_jawaban = $(isi_soal).find(".kunci_jawaban:first"); // jika sudah lengkap semua simpan ke database

if(error == 0 && $(kunci_jawaban).html() != ""){

// id_ujian diambil dari nama radio button pada pilihan jawaban var nama_radio = $(isi_soal).find(":radio").eq(0).attr("name"); // id untuk div informasi ketika menyimpan soal

var id_info = "info_"+nama_radio; nama_radio = nama_radio.split("_"); var id_ujian = nama_radio['1'];

var id_soal = id_ujian+"_"+nama_radio['2'];

var tinggi_div_soal = $(isi_soal).parent().outerHeight(); var lebar_div_soal = $(isi_soal).parent().outerWidth();


(8)

var posisi = $(isi_soal).parent().position(); var div_overlay = "<div

style='position:absolute;top:"+posisi.top+";left:"+posisi.left; div_overlay

+=";width:"+lebar_div_soal+"px;height:"+tinggi_div_soal+";background:#F FFFFF;opacity:0.6' >";

div_overlay +="</div>";

div_overlay +="<div id='"+id_info+"'

style='position:absolute;border:1px solid #000000;font-weight:bolder"; div_overlay +=";background:#FFFFFF;padding:6px;border:1px solid #00FF00;border-radius:3px;text-align:center' >";

div_overlay +="<span class='loading'>Sedang menyimpan ...</span></div>";

$(div_overlay).appendTo("#tempat_soal");

// letakkan informasi pada div id=id_info tepat ditengah soal var tinggi_info = $("#"+id_info).outerHeight();

var lebar_info = $("#"+id_info).outerWidth();

var atas = (parseInt(posisi.top) + (tinggi_div_soal - tinggi_info)/2)+"px"; var kiri = (lebar_div_soal - lebar_info)/2+"px";

$("#"+id_info).css({"top":atas,"left":kiri}); // simpan soal ke database

var data_kirim = [id_soal,id_ujian,pertanyaan,pilihan_jawaban]; var url = "simpan_soal.php";


(9)

if(hasil == 1){

// info sukses disimpan

$("#"+id_info).html("<span class='sukses'>Sudah disimpan ...</span>");

} else {

// tampilkan info coba simpan lagi

$("#"+id_info).html("<div>Gagal disimpan, mungkin jaringan sedang down ...</div><div style='margin:0

auto;width:80px;border:2px solid green' class='tombol'

onclick=\"simpan_lagi(this,'"+id_info+"')\">Coba lagi</div>"); }

})

} else{

alert("ada yang kosong atau belum memilih jawaban"); if($(kunci_jawaban).html() == ""){

$(kunci_jawaban).css({"background":"#F4C3C2"}); }

} }

function simpan_lagi(elm,info_soal){


(10)

var id_soal = info_soal.substr(5); // hapus overlay

$(elm).parent().parent().remove(); // klik kembali tombol simpan

$("#"+id_soal).parent().find("div input.tombol").eq(0).click(); }

function reset(elm){

var isi_soal = $(elm).parents("div.isi_soal"); $(isi_soal).find("textarea").val("");

$(isi_soal).find(".kunci_jawaban").empty(); }

function preview(elm){

var data_textarea = $(elm).parent().prev().val(); // tutup semua layar monitor

var lebar_layar = $(window).width(); var tinggi_layar = $(document).height();

var overlay = "<div id='overlay' style=\"width:"+lebar_layar+"px;"; overlay +="position:absolute;top:0px;background:#FFFFFF;z- index:25\">";

overlay +="<div style=\"border:1px solid

#000000;width:65%;position:absolute;padding:10px\"><div id='popup_editor'>"+data_textarea+"</div>";


(11)

overlay +="<span class='tombol batal'

onclick='tutup_texteditor(this)'>Tutup</span></div></div></div>"; $(overlay).appendTo("#content");

var atas = (($(window).height() - $("#popup_editor").parent().height()) / 2) + $(window).scrollTop();

var kiri = (lebar_layar - $("#popup_editor").parent().width()) / 2 + $(window).scrollLeft();

$("#popup_editor").parent().css({"top":atas+"px","left":kiri+"px"}); // tinggi overlay disesuaikan

$("#overlay").css({"height":$(document).height()+"px"}); }

function popup_editor(elm){

// tambahkan elemen pemanggil dengan id pemanggil_editor $(elm).attr('id','pemanggil_editor');

var data_textarea = $(elm).parent().prev().val(); // tutup semua layar monitor

var lebar_layar = $(window).width(); var tinggi_layar = $(document).height();

var overlay = "<div id='overlay' style=\"width:"+lebar_layar+"px;"; overlay +="position:absolute;top:0px;background:#FFFFFF;z- index:25\">";

overlay +="<div

style=\"width:65%;position:absolute;padding:10px\"><div id='popup_editor'>"+data_textarea+"</div>";


(12)

overlay +="<div style='margin-top:10px'><span class='tombol edit' onclick='sisipke_textarea(this)'>Sisipkan</span>";

overlay +="<span class='tombol batal'

onclick='tutup_texteditor(this)'>Tutup</span></div></div></div>"; $(overlay).appendTo("#content");

replaceDiv("popup_editor");

var atas = (($(window).height() - $("#popup_editor").parent().height()) / 2) + $(window).scrollTop();

var kiri = (lebar_layar - $("#popup_editor").parent().width()) / 2 + $(window).scrollLeft();

$("#popup_editor").parent().css({"top":atas+"px","left":kiri+"px"}); // tinggi overlay disesuaikan

$("#overlay").css({"height":$(document).height()+"px"}); }

function sisipke_textarea(elm){

hapus_kaji_editor("popup_editor"); var data = $("#popup_editor").html(); // pemanggil editor

var pemanggil = $("#pemanggil_editor"); // textarea yang diisi data

$(pemanggil).parent().prev().val(data).change(); $(elm).parent().parent().parent().remove(); // hapus elemen id dari pemanggil


(13)

}

function tutup_texteditor(elm){

hapus_kaji_editor("popup_editor");

$(elm).parent().parent().parent().remove(); var pemanggil = $("#pemanggil_editor"); $(pemanggil).removeAttr("id");

}

function kembali_lagi(id_mp){

$("#content").html(info_loading).load("daftar_ujian.php?id_mp="+id_mp) ;

}

$(function(){

$("#t_soal").click(); })

</script>

<div id="t_soal" class="tombol tambah" onclick="tambah_soal(1)"> Soal

<span id="info_jml_soal">0</span> </div>

<div id="tempat_soal">

<div style="font-size:140%;font-style:italic;font-weight:bolder" class="tombol">Tambahkan soal untuk ujian <?php echo $nama_ujian ?></div>


(14)

3. buat_ujian.php

<?php

include_once "include/koneksi.php"; $id_mp = $_REQUEST['id_mp'];

$nama_mp = mysql_result(mysql_query("select nama_mp from mapel where id_mp='".$id_mp."'"),0);

?> <div> <fieldset>

<legend>Buat Ujian Baru Mata Pelajaran <?php echo $nama_mp ?></legend>

<div id="stylized" class="select-bar">

<form method="post" title="ujian" onsubmit="return simpan(this)" action="simpan_form.php">

<input type="hidden" name="id_mp" id="id_mp" value="<?php echo $id_mp ?>" class="isian"/>

<label>Nama Ujian

<span class="small">Nama ujian yang dilaksanakan</span> </label>

<input type="text" name="nama_ujian" id="nama_ujian" class="isian"/> <span class="ket"></span>

<label >Tanggal Ujian

<span class="small">Format (2020-12-30)</span> </label>


(15)

<input type="text" name="tanggal" id="tanggal" class="isian" /> <span class="ket"></span>

<label >Waktu Ujian

<span class="small">Dalam menit</span> </label>

<input type="text" name="waktu" id="waktu" class="isian" /> <span class="ket"></span>

<label >Keterangan

<span class="small">Keterangan tambahan</span> </label>

<input type="text" name="keterangan" id="keterangan" class="isian" /> <span class="ket"></span>

<button type="submit" class="isian">Simpan</button> </form>

</div> </fieldset> </div> <script>

function simpan(elm){

var inputan = $(elm).find(".isian");

var data = $(elm).serializeArray(); //berupa JSON object var url = $(elm).attr('action');

var tabel = $(elm).attr('title');


(16)

if($(inputan).eq(i).val() == ""){ $(".ket").eq(i).html("harus diisi").css({"display":"block"});

$(inputan).eq(i).focus(); return false;

} else {

$(".ket").eq(i).empty().css({"display":"none"}); }

} // simpan ke database

$.post(url,{tbl:tabel,data:data},function(hasil){ if(hasil == 1){

var tampil = "<div>Ujian Sudah dibuat</div>"; $("#stylized").html(tampil);

} else{

alert("gagal disimpan"); }

}) return false;

} </script>


(17)

4. cek_ganti_pass.php

<?php

session_start();

include_once "include/koneksi.php"; $id_user = $_SESSION['nis_kj']; $status = 0;

$pass_lama = md5($_REQUEST['pass_lama']); $pass_baru = md5($_REQUEST['pass_baru']); // cek apakah password lama sudah benar

$pass_lama_db = mysql_result(mysql_query("select password from user where id_user='".$id_user."'"),0);

if($pass_lama_db == $pass_lama){

$update_pass = mysql_query("update user set password='".$pass_baru."' where id_user='".$id_user."'");

if($update_pass){ $status = 1; }

} else {

$status = "password lama gak sama, cek kembali ..."; }

echo $status; ?>


(18)

5. daftar_mp.php

<div class="daftar_pelajaran"> <fieldset>

<legend>Pilih Mata Pelajaran</legend> <form id="f_mp">

<input type="text" name="nama_mp" value="nama mata pelajaran"

class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/> <span id="simpan_mp" class="tombol tambah"

onclick="simpan_mp(this)">Mata Pelajaran</span> <span id="update_mp" style="display:none">

<span class="tombol simpan" onclick="update_mp(this)">Mata Pelajaran</span>

<span class="tombol batal" onclick="batal_update()">Batal</span> </span>

</form> <?php

// ambil data mata pelajaran dari database

$mp_exe = mysql_query("select * from mapel"); $jml_mp = mysql_num_rows($mp_exe);

if($jml_mp > 0){ ?>

<ul>

<?php


(19)

$jml_ujian = mysql_result(mysql_query("select count(*) from ujian where id_mp='".$data['id_mp']."'"),0);

echo "<div><span class='jml_ujian'>".$jml_ujian."</span>";

echo "<li>".$data['nama_mp']."</li>";

echo "<div onclick=\"lihat_ujian('".$data['id_mp']."')\" style='margin:10px'><span class='tombol tambah'>Ujian </span></div>";

echo "<div onclick=\"edit_mp(this,'".$data['id_mp']."')\" style='margin:10px'><span class='tombol edit'>Pelajaran</span></div>";

echo "<div onclick=\"hapus_mp(this,'".$data['id_mp']."')\" style='margin:10px'><span class='tombol hapus'>Pelajaran</span></div>";

echo "</div>"; }

?> </ul> <?php

} else {

echo "Mata Pelajaran Belum Dibuat"; }

?>


(20)

</div> <script>

function lihat_ujian(id_mp){

// load content dengan data dari daftar_ujian.php

$("#content").html(info_loading).load("daftar_ujian.php?id_mp="+id_mp) ;

}

function edit_mp(elm,id_mp){

var nama_mp = $(elm).parent().find("li").text(); $(".sedang_diedit").removeClass("sedang_diedit"); $(".telah_diedit").removeClass("telah_diedit"); $(elm).parent().addClass("sedang_diedit");

$("#f_mp input[name=nama_mp]").val(nama_mp); // sembunyikan tombol simpan

$("#simpan_mp").fadeOut(); $("#update_mp").fadeIn();

$("#update_mp").data("id_mp",id_mp); }

function batal_update(){

$(".sedang_diedit").removeClass("sedang_diedit"); $("#update_mp").fadeOut();

$("#simpan_mp").fadeIn(); $(".inputan").each(function(){


(21)

}) }

function update_mp(elm){ var errornya = 0;

$(".inputan").each(function(){ if($(this).val() == ""){

errornya++; $(this).focus(); return false; }

})

if(errornya == 0){

//simpan ke database

var data = $(elm).parent().parent().serializeArray(); var url = "update_data.php";

var tabel = "mapel";

data.unshift({"name":"id_mp","value":$("#update_mp").data("id_mp")}); $.post(url,{data:data,table:tabel},function(hasil){

if(hasil == 1){

// update data pada baris yang diedit var div_mapel = $(".sedang_diedit");


(22)

// hapus class sedang diedit dan tambahkan kelas telah diedit

$(div_mapel).removeClass("sedang_diedit").addClass("telah_diedit"); }

else{

alert("gagal disimpan, mungkin data sudah ada \n atau koneksi bermasalah"+hasil);

} }) }

else {

alert("harus diisi semua...."); }

}

function simpan_mp(elm){

var nama_mp = $(elm).prev().val();

if(nama_mp != "" && nama_mp != "nama mata pelajaran"){ //simpan ke database

var data = $(elm).parent().serializeArray(); var url = "simpan_form.php";

var tabel = "mapel";


(23)

if(hasil == 1){

// reload content dengan halaman ini

$("#content").html(info_loading).load("daftar_mp.php"); }

else{

alert("gagal disimpan, mungkin data sudah ada \n atau koneksi bermasalah");

} }) }

else {

alert("harus diisi semua...."); }

}

function hapus_mp(elm,id_mp){

$(".sedang_diedit").removeClass("sedang_diedit"); $(elm).parent().addClass("sedang_diedit");

6. daftar_nilai_mp.php

<div class="daftar_pelajaran"> <fieldset>

<legend>Pilih Mata Pelajaran</legend> <?php


(24)

// ambil data mata pelajaran dari database

$mp_exe = mysql_query("select * from mapel"); $jml_mp = mysql_num_rows($mp_exe);

if($jml_mp > 0){ ?>

<ul>

<?php

while($data = mysql_fetch_assoc($mp_exe)){

$jml_ujian = mysql_result(mysql_query("select count(*) from ujian where id_mp='".$data['id_mp']."'"),0);

echo "<div

onclick=\"lihat_nilai_ujian('".$data['id_mp']."')\"><span

class='jml_ujian'>".$jml_ujian."</span><li>".$data['nama_mp']."</li>"; echo "<div style='margin:10px'><span class='tombol edit'>Lihat Nilai</span></div>";

echo "</div>"; }

?> </ul> <?php

} else {


(25)

} ?>

</fieldset> </div> <script>

function lihat_nilai_ujian(id_mp){

// load content dengan data dari daftar_ujian.php

$("#content").html(info_loading).load("daftar_nilai_ujian.php?id_mp="+i d_mp);

}

</script>

7. daftar_nilai_ujian.php

<?php

// current time

$mtime = microtime();

// split seconds and microseconds $mtime = explode(" ",$mtime); // create a single value for statr time $mtime = $mtime[1] + $mtime[0]; $tstart = $mtime;

include_once "include/koneksi.php"; $id_mp = $_REQUEST['id_mp'];


(26)

$nama_mp = mysql_result(mysql_query("select nama_mp from mapel where id_mp='".$id_mp."'"),0);

?>

<div style="width:80%;margin:0 auto" class="daftar_pelajaran"> <fieldset>

<legend>Daftar Nilai Ujian Mata Pelajaran <?php echo ucwords($nama_mp) ?></legend>

<div style="margin-bottom:10px"><span onclick="download_ini()" class="tombol">Download as xls</span></div>

<?php

echo "<table class='listing' cellpadding='0' cellspacing='0' align='center'>"; //ambil data ujian pada id_mp ini sebagai header

echo "<thead>"; echo "<tr>";

echo "<th>No</th><th>NIS</th><th>Nama</th>"; $sql_head = "select id_ujian,nama_ujian from ujian where id_mp='".$id_mp."'";

$sql_head_exe = mysql_query($sql_head); $head_id_ujian = array();

while($head = mysql_fetch_assoc($sql_head_exe)){ array_push($head_id_ujian,$head['id_ujian']); echo "<th>".$head['nama_ujian']."</th>"; }


(27)

echo "</tr>"; echo "</thead>"; if(count($head_id_ujian) > 0){

// ambil semua data siswa peserta ujian $sql_siswa = "select nis,nama from siswa"; $sql_siswa_exe = mysql_query($sql_siswa); // simpan aja di array dulu biar gampang $data_siswa = array();

while($data = mysql_fetch_assoc($sql_siswa_exe)){ $data_siswa[$data['nis']]['nama'] = $data['nama']; }

8. daftar_nilai_ujian_xls.php

<?php

include_once "include/koneksi.php";

$xlsfile = "Hasil_ujian_".date("d-m-Y").".xls"; header("Content-type: application/vnd.ms-excel");

header("Content-Disposition: attachment; filename=$xlsfile");

$id_mp = $_REQUEST['id_mp'];

$nama_mp = mysql_result(mysql_query("select nama_mp from mapel where id_mp='".$id_mp."'"),0);

?>


(28)

<fieldset>

<legend>Daftar Nilai Ujian Mata Pelajaran <?php echo ucwords($nama_mp) ?></legend>

<?php

echo "<table class='listing' cellpadding='0' cellspacing='0'>"; //ambil data ujian pada id_mp ini sebagai header

echo "<tr>";

echo "<th>No</th><th>NIS</th><th>Nama</th>"; $sql_head = "select id_ujian,nama_ujian from ujian where id_mp='".$id_mp."'";

$sql_head_exe = mysql_query($sql_head); $head_id_ujian = array();

while($head = mysql_fetch_assoc($sql_head_exe)){ array_push($head_id_ujian,$head['id_ujian']); echo "<th>".$head['nama_ujian']."</th>"; }

echo "<th>Rerata</th>"; echo "</tr>";

// ambil semua data siswa peserta ujian $sql_siswa = "select nis,nama from siswa"; $sql_siswa_exe = mysql_query($sql_siswa); // simpan aja di array dulu biar gampang $data_siswa = array();


(29)

$data_siswa[$data['nis']]['nama'] = $data['nama']; }

$sql_nilai = "select id_user,nilai.id_ujian,ifnull(nilai,\"--\") as nilai from nilai right join ujian on ujian.id_ujian=nilai.id_ujian and nilai.id_ujian in (select id_ujian from ujian where id_mp='".$id_mp."') order by

nilai.id_ujian,id_user";

$sql_nilai_exe = mysql_query($sql_nilai);

while($data = mysql_fetch_assoc($sql_nilai_exe)){

$data_siswa[$data['id_user']]['nilai'][$data['id_ujian']] = $data['nilai']; }

// tampilkan dalam tabel $no = 1;

foreach($data_siswa as $id_siswa => $data_tampil){ echo "<tr>";

echo "<td>".$no++."</td>"; echo "<td>".$id_siswa."</td>";

echo "<td>".$data_tampil['nama']."</td>"; $temp_arr = array();

for($i = 0;$i < count($head_id_ujian); $i++){

if(isset($data_tampil['nilai'][$head_id_ujian[$i]])){ $nilainya = $data_tampil['nilai'][$head_id_ujian[$i]]; }

else $nilainya="---";


(30)

array_push($temp_arr,$nilainya); }

echo "<td>".round(array_sum($temp_arr)/count($temp_arr))."</td>";

echo "</tr>"; }

echo "</table>"; ?>

9. daftar_siswa.php

<div style="width:80%;margin:0 auto"> <fieldset style="margin:0 auto">

<legend>Daftar Siswa Peserta Ujian </legend> <form id="f_siswa">

<input type="text" name="nis" value="nomer daftar" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/>

<input type="text" name="nama" value="nama siswa" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/>

<input type="text" name="alamat" value="alamat siswa" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/>

<input type="text" name="agama" value="Islam" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/> <span id="simpan_siswa" class="tombol tambah"


(31)

<span id="update_siswa" style="display:none">

<span class="tombol simpan" onclick="update_siswa(this)">Siswa</span> <span class="tombol batal" onclick="batal_update()">Batal</span>

</span>

<span class='tombol info'></span> </form>

<?php

$sql="select * from siswa"; $sql_exe = mysql_query($sql); if(mysql_num_rows($sql_exe) > 0){

echo "<table class='listing' cellpadding='0' cellspacing='0'>"; // buat headernya kawan

echo "<thead>"; echo "<tr>";

echo "<th>No</th>";

$jum_kolom = mysql_num_fields($sql_exe); for($i = 0; $i < $jum_kolom; $i++){

echo "<th>".mysql_field_name($sql_exe,$i)."</th>"; }

echo "<th>Aksi</th>"; echo "</tr>";

echo "</thead>"; echo "<tbody>"; $no = 1;


(32)

while($data_baris = mysql_fetch_assoc($sql_exe)){ echo "<tr>";

echo "<td>".$no++."</td>"; foreach($data_baris as $data){

echo "<td>".$data."</td>"; }

echo "<td><span class='tombol edit'

onclick='edit_siswa(this)'>Siswa</span>&nbsp;<span class='tombol hapus' onclick='hapus_siswa(this,\"".$data_baris['nis']."\")'>Siswa</span></td>";

echo "</tr>"; }

echo "</tbody>"; echo "</table>";

} else {

echo "Data masih kosong, diisi dulu ya ..."; }

?> </fieldset> </div>

<div class="kembali" onclick="kembali_lagi()">Kembali</div> <script >

function kembali_lagi(){


(33)

}

function simpan_siswa(elm){ var errornya = 0;

$(".inputan").each(function(){ if($(this).val() == ""){

errornya++; $(this).focus(); return false; }

})

if(errornya == 0){

//simpan ke database

var data = $(elm).parent().serializeArray(); var url = "simpan_form.php";

var tabel = "siswa";

$.post(url,{data:data,tbl:tabel},function(hasil){ if(hasil == 1){

// reload content dengan halaman ini

// $("#content").html("").load("daftar_siswa.php"); var jml_baris = $("table.listing tr").length;

var data_baru = "<td>"+jml_baris+"</td>"; $(".inputan").each(function(index){

data_baru +="<td>"+$(this).val()+"</td>"; });


(34)

data_baru +="<td><span class='tombol edit'

onclick='edit_siswa(this)'>Siswa</span>&nbsp;<span class='tombol hapus' onclick='hapus_siswa(this,\""+$(".inputan").eq(0).val()+"\")'>Siswa</span>< /td>";

var baris_baru = "<tr>"+data_baru+"</tr>"; $(baris_baru).insertAfter($("table.listing tr:last")); $(".info").html("sudah disimpan

...").fadeIn('slow').delay("2000").fadeOut(); }

else{

alert("gagal disimpan, mungkin data sudah ada \n atau koneksi bermasalah");

} }) }

else {

alert("harus diisi semua...."); }

}

10. daftar_ujian.php

<div style="margin:0 auto;width:85%"> <fieldset>


(35)

<legend>Daftar Ujian Pada Mata Pelajaran <?php echo $nama_mp ?></legend>

<form id="f_ujian">

<input type="hidden" name="id_mp" id="id_mp" value="<?php echo $id_mp ?>" class="inputan"/>

<input type="text" name="nama_ujian" id="nama_ujian" value="Nama Ujian" class="inputan" onfocus="bersihkan(this)"

onblur="kembali_semula(this)"/>

<input type="text" name="tanggal" id="tanggal" value="Tanggal ujian" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/> <input type="text" name="waktu" id="waktu" value="Waktu (dalam menit)" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/> <input type="text" name="keterangan" id="keterangan" size="60"

value="Keterangan" class="inputan" onfocus="bersihkan(this)" onblur="kembali_semula(this)"/>

<span class="tombol tambah" id="simpan_ujian" onclick="simpan_ujian(this)">Ujian</span> <span id="update_ujian" style="display:none">

<span class="tombol simpan" onclick="update_ujian(this)">Ujian</span> <span class="tombol batal" onclick="batal_update()">Batal</span> </span>

</form>

<div class='daftar_ujian'> <div class='no'>No</div>


(36)

<div class='nama_ujian'>Nama Ujian</div> <div class='tanggal'>Tanggal</div>

<div class='waktu'>Waktu</div> <div class='jml_soal'>Jml_Soal</div> <div class='ket'>Keterangan</div> <div class='aksi'>Aksi</div> </div>

<?php

// tampilkan seluruh ujian pada mata pelajaran ini $sql = "select * from ujian where id_mp ='".$id_mp."'"; $sql_exe = mysql_query($sql);

$no = 1;

while($data = mysql_fetch_assoc($sql_exe)){ echo "<div class='daftar_ujian'>";

echo "<div class='no'>".$no++."</div>";

echo "<div class='nama_ujian'>".$data['nama_ujian']."</div>"; echo "<div class='tanggal'>".$data['tanggal']."</div>";

echo "<div class='waktu'>".$data['waktu']." Menit</div>";

$jml_soal = mysql_result(mysql_query("select count(*) from soal where id_ujian='".$data['id_ujian']."'"),0);

echo "<div class='jml_soal'>".$jml_soal."</div>"; echo "<div class='ket'>".$data['keterangan']."</div>"; echo "<div class='aksi'><span class='tombol edit'


(37)

class='tombol tambah'

onclick='tambah_soal_ujian(\"".$data['id_ujian']."\")'>"; echo "Soal</span><span class='tombol edit'

onclick='edit_soal_ujian(\"".$data['id_ujian']."\")'>Soal</span><span class='tombol hapus'

onclick='hapus_ujian(this,\"".$data['id_ujian']."\")'>Ujian</span></div>"; echo "</div>";

}

?>

</fieldset> </div>

<div class="kembali" onclick="kembali_daftar_mp()">Kembali</div> <script type="text/javascript">

function kembali_daftar_mp(){

$("#content").html(info_loading).load("daftar_mp.php"); }

function tambah_soal_ujian(id_ujian){

$("#content").html(info_loading).load("buat_soal.php?id_ujian="+id_ujia n);

}

function edit_soal_ujian(id_ujian){

$("#content").html(info_loading).load("edit_soal.php?id_ujian="+id_ujian );


(38)

}

function simpan_ujian(elm){ var errornya = 0;

$(".inputan").each(function(){ if($(this).val() == ""){

errornya++; $(this).focus(); return false; }

})

if(errornya == 0){

//simpan ke database

var data = $(elm).parent().serializeArray(); var url = "simpan_form.php";

var tabel = "ujian";

$.post(url,{data:data,tbl:tabel},function(hasil){ if(hasil == 1){

// reload content dengan halaman ini, karena kita butuh id_ujian dari server

$("#content").html(info_loading).load("daftar_ujian.php?id_mp=<?php echo $id_mp; ?>");

} else{


(39)

alert("gagal disimpan, mungkin data sudah ada \n atau koneksi bermasalah");

} }) }

else {

alert("harus diisi semua...."); }

}

function hapus_ujian(elm,id_ujian){

var hapus = confirm("Dengan menghapus ujian ini berarti anda juga akan \n 'Menghapus seluruh data yang berkaitan dengan ujian ini ...'");

if(hapus){

var url = "hapus_data.php";

$.post(url,{id_nilai:id_ujian,id_nama:"id_ujian",table:"ujian"},function(ha sil){

if(hasil == 1){

// hapus dibaris yang dihapus saja kawan $(elm).parent().parent().remove(); //

$("#content").html("").load("daftar_ujian.php?id_mp=<?php echo $id_mp; ?>");

} else {


(40)

alert("gagal dihapus cek query anda ..."); }

}) }

}

function edit_ujian(elm,id_ujian){ var baris = $(elm).parent().parent();

$(baris).parent().find("div.sedang_diedit").removeClass("sedang_diedit"); $(baris).parent().find("div.telah_diedit").removeClass("telah_diedit"); $(baris).addClass("sedang_diedit");

// tampilkan data baris tersebut pada form

var nama_ujian = $(baris).find("div.nama_ujian").text(); var tanggal = $(baris).find("div.tanggal").text();

var waktu = $(baris).find("div.waktu").text(); waktu = waktu.split(" ");

var ket = $(baris).find("div.ket").text(); $("#nama_ujian").val(nama_ujian); $("#tanggal").val(tanggal);

$("#waktu").val(waktu[0]); $("#keterangan").val(ket); $("#simpan_ujian").fadeOut(); $("#update_ujian").fadeIn(); // ambil id_ujian


(41)

}

function batal_update(){

$("div.sedang_diedit").removeClass("sedang_diedit"); $("#update_ujian").fadeOut();

$("#simpan_ujian").fadeIn(); $(".inputan").each(function(){

$(this).val($("#content").data($(this).attr("name"))); })

}

function update_ujian(elm){ var errornya = 0;

$(".inputan").each(function(){ if($(this).val() == ""){

errornya++; $(this).focus(); return false; }

})

11. daftar_ujian_siswa.php

<?php

include_once "include/cek_session.php"; include_once "include/koneksi.php"; $id_mp = $_REQUEST['id_mp'];


(42)

$nama_mp = mysql_result(mysql_query("select nama_mp from mapel where id_mp='".$id_mp."'"),0);

?>

<div style="font-size:80%;width:80%;margin:0 auto;background:#FFFFFF"> <fieldset>

<legend>Daftar Ujian Pada Mata Pelajaran <?php echo $nama_mp ?></legend>

<div class='daftar_ujian'> <div class='no'>No</div>

<div class='nama_ujian'>Nama Ujian</div> <div class='tanggal'>Tanggal</div>

<div class='waktu'>Waktu</div> <div class='ket'>Keterangan</div> <div class='aksi'>Aksi</div> <div class='nilai'>Nilai</div> </div>

<?php

// cek ujian yang sudah dilaksanakan

$sql_nilai = "select id_ujian,nilai from nilai where id_user='".$_SESSION['nis_kj']."'";

$sql_nilai_exe = mysql_query($sql_nilai); if(mysql_num_rows($sql_nilai_exe) > 0){

$nilai = array();


(43)

$nilai[$d_nilai['id_ujian']] = $d_nilai['nilai']; }

}

// tampilkan seluruh ujian pada mata pelajaran ini $sql = "select * from ujian where id_mp ='".$id_mp."'"; $sql_exe = mysql_query($sql);

$no = 1;

while($data = mysql_fetch_assoc($sql_exe)){ echo "<div class='daftar_ujian'>";

echo "<div class='no'>".$no++."</div>";

echo "<div class='nama_ujian'>".$data['nama_ujian']."</div>"; echo "<div class='tanggal'>".$data['tanggal']."</div>";

echo "<div class='waktu'>".$data['waktu']." Menit</div>"; echo "<div class='ket'>".$data['keterangan']."</div>"; // jika suda dikerjakan

if(isset($nilai[$data['id_ujian']])){

echo "<div class='aksi'><span class='tombol view'

onclick='view_jawaban(\"".$data['id_ujian']."\")'>Jawaban</span></div>"; echo "<div class='nilai'>".$nilai[$data['id_ujian']]."</div>";

} else {

echo "<div class='aksi'><span class='tombol edit'

onclick='kerjakan_ujian(\"".$data['id_ujian']."\")'>Kerjakan</span></div>"; echo "<div class='nilai'>Nilainya</div>";


(44)

}

echo "</div>"; }

?>

</fieldset> </div>

<div class="kembali" onclick="kembali_daftar_mp()">Kembali</div> <script>

function kembali_daftar_mp(){

$("#content").html(info_loading).load("mp_siswa.php"); }

function kerjakan_ujian(id_ujian){

$("#content").html(info_loading).load("kerjakan_ujian.php?id_ujian="+id _ujian);

}

function view_jawaban(id_ujian){

$("#content").html(info_loading).load("view_jawaban.php?id_ujian="+id_ ujian);

}


(45)

12. edit_soal.php

include_once "include/koneksi.php"; $id_ujian = $_REQUEST["id_ujian"];

$ujian_exe = mysql_query("select nama_ujian,id_mp from ujian where id_ujian='".$id_ujian."'");

while($data = mysql_fetch_assoc($ujian_exe)){ $id_mp = $data['id_mp'];

$nama_ujian = $data['nama_ujian']; }

$soal_exe = mysql_query("select * from soal where id_ujian='".$id_ujian."' order by id_soal ");

echo "<div id='div_edit_soal'>"; if(mysql_num_rows($soal_exe) > 0){

// ambil semua pilihan jawaban dari database

$sql_jawaban = "select * from pil_jawaban where id_soal in (select id_soal from soal where id_ujian='".$id_ujian."')";

$sql_jawaban_exe = mysql_query($sql_jawaban); $pil_jawaban = array();

while($d_jawaban = mysql_fetch_assoc($sql_jawaban_exe)){

$pil_jawaban[$d_jawaban['id_soal']][$d_jawaban['id_jawaban']]['jawaban' ] = $d_jawaban['jawaban'];


(46)

$pil_jawaban[$d_jawaban['id_soal']][$d_jawaban['id_jawaban']]['status'] = $d_jawaban['status'];

} $no = 1;

echo "<div class='soal_edit'>";

echo "<div class='no_soal'>No</div>";

echo "<div class='isi_soal_edit' style='margin-left:5px'>Soal</div>"; echo "<div class='jawaban_edit'>Pilihan Jawaban</div>";

echo "</div>";

while($data = mysql_fetch_assoc($soal_exe)){ ?>

<div class='soal_edit'>

<div class='no_soal'><?php echo $no++ ?><div style="padding:2px" class="tmb_del" onclick="return

hapus_soal_ini(this)"><img src='image/del.png' title="Hapus soal ini"/></div></div>

<div class='isi_soal_edit'>

<span class='tombol info' style='margin- right:10px;float:right'></span>

<span style='margin-right:10px;float:right'

onclick='edit_soalnya(this)'><img src='image/edit.png' /></span> <span style='margin-right:10px;float:right;display:none' onclick='simpan_soalnya(this)'><img src='image/save.png' /></span>


(47)

<div id="<?php echo $data['id_soal'] ?>" > <?php echo $data['isi_soal'] ?>

</div> </div>

<div class='jawaban_edit'> <?php

foreach($pil_jawaban[$data['id_soal']] as $id_jawaban => $jawaban){

if($jawaban['status'] == '1'){ $terpilih = "jwb_terpilih"; $checked = "checked"; }

else {

$terpilih =""; $checked = ""; }

echo "<div class='div_pil_jawaban $terpilih'><span class='info' style='margin-right:10px;float:right'></span>";

echo "<input disabled type='checkbox' style='float:left' $checked/>";

echo "<span style='position:auto;margin-top:-

1px;float:right' onclick='edit_jawaban(this)'><img src='image/edit.png' /></span>";


(48)

echo "<span style='margin-

right:10px;float:right;display:none' onclick='simpan_jawaban(this)'><img src='image/save.png' /></span>";

echo "<div id='".$id_jawaban."'

class='pil_jawaban'>".$jawaban['jawaban']."</div></div>"; }

?> </div> </div>

<?php } }

else {

echo "soal masih kosong..."; }

echo "</div>"; ?>

<div class="kembali" onclick="kembali_lagi('<?php echo $id_mp ?>')">Kembali</div>

<script type="text/javascript"> function kembali_lagi(id_mp){

$("#content").html("").load("daftar_ujian.php?id_mp="+id_mp); }


(49)

var id_soal = $(elm).next().next().attr("id"); replaceDiv(id_soal);

// sembunyikan tombol ini dan tampilkan tombol sebelahnya $(elm).fadeOut();

$(elm).next().fadeIn(); }

function simpan_soalnya(elm){

var id_soal = $(elm).next().attr("id"); hapus_kaji_editor(id_soal);

var url = "update_data.php"; var tabel = "soal";

var data =

[{"name":"id_soal","value":id_soal},{"name":"isi_soal","value":$("#"+id_so al).html()}];

$(elm).parent().find(".info").html("sedang menyimpan ...").fadeIn(); $.post(url,{data:data,table:tabel},function(hasil){

if(hasil == 1){

// sembunyikan tombol ini dan tampilkan tombol sebelahnya

$(elm).fadeOut(); $(elm).prev().fadeIn();

$(elm).parent().find(".info").html("sudah disimpan ...").delay('3000').fadeOut();


(50)

else {

alert("gagal disimpan...."); }

}) }

function edit_jawaban(elm){

var id_jawaban = $(elm).next().next().attr("id"); replaceDiv(id_jawaban);

// sembunyikan tombol ini dan tampilkan tombol sebelahnya $(elm).fadeOut();

$(elm).next().fadeIn(); }

function simpan_jawaban(elm){

var id_jawaban = $(elm).next().attr("id"); hapus_kaji_editor(id_jawaban);

var url = "update_data.php"; var tabel = "pil_jawaban"; var data =

[{"name":"id_jawaban","value":id_jawaban},{"name":"jawaban","value":$(" #"+id_jawaban).html()}];

$(elm).parent().find(".info").html("sedang menyimpan ...").fadeIn(); $.post(url,{data:data,table:tabel},function(hasil){


(51)

// sembunyikan tombol ini dan tampilkan tombol sebelahnya

$(elm).fadeOut(); $(elm).prev().fadeIn();

$(elm).parent().find(".info").html("sudah disimpan ...").delay('3000').fadeOut();

} else {

alert("gagal disimpan...."); }

}) }

function hapus_soal_ini(elm){

var konfirmasi = confirm("Yakin akan menghapus soal ini ..."); if(konfirmasi){

var id_soal = $(elm).parent().next().find("div").attr("id"); var url = "hapus_data.php";

$.post(url,{id_nilai:id_soal,id_nama:"id_soal",table:"soal"},function(hasil) {

if(hasil == 1){

// hapus dibaris yang dihapus saja kawan $(elm).parent().parent().remove();


(52)

//

$("#content").html("").load("daftar_ujian.php?id_mp=<?php echo $id_mp; ?>");

} else {

alert("gagal dihapus cek query anda ..."); }

}) }

else {

return false; }

} </script>

13. ganti_pass.php

<?php

session_start();

include_once "include/koneksi.php"; ?>

<div style="margin:0 auto;width:50%;padding:10px"> <fieldset>


(53)

<?php

// ambil data mata pelajaran dari database $nis = $_SESSION['nis_kj'];

?>

<div class='div_profil'>

<div class="tombol info"></div>

<div><div class="l_kiri">Password Lama</div><input class='inputan' type='password' name='pass_lama'/></div>

<div><div class="l_kiri">Password Baru</div><input class='inputan' type='password' name='pass_baru'/></div>

<div><div class="l_kiri">Ulangi Password</div><input class='inputan' type='password' name='ulangi_pass'/></div>

<div><div class="l_kiri">&nbsp;</div><input class='tombol simpan' type='button' value='Ubah Password' onclick='update_pass()'/></div> </div>

</fieldset> </div>

<script type="text/javascript"> function update_pass(){

var errornya = 0; var info="";

$(".inputan").each(function(){ if($(this).val() == ""){


(54)

$(this).focus();

info = "ada yang kosong, harus diisi semua"; return false;

} })

// cek apakah password baru dan ulangi password adalah sama if($("input[name=pass_baru]").val() ==

$("input[name=ulangi_pass]").val()){

} else {

var info = "password baru dan ulangi password tidak sama

..."+$("input[name=pass_baru]").val()+"...."+$("input[name=ulangi_pass]"). val();

errornya++; }

if(errornya == 0){

//simpan ke database

var url = "cek_ganti_pass.php";

$.post(url,{pass_lama:$("input[name=pass_lama]").val(),pass_baru:$("inp ut[name=pass_baru]").val()},function(hasil){

if(hasil == 1){


(55)

$(".info").html("sudah disimpan ...").fadeIn('slow').delay("2000").fadeOut();

} else{

$(".info").html(hasil).fadeIn("slow").delay("2000").fadeOut("slow"); }

}) }

else {

$(".info").html(info).fadeIn("slow").delay("2000").fadeOut("slow"); }

}

14. hal_admin.php

<html> <head>

<link href="image/test.jpg" rel="shortcut icon">

<link href="css/soal.css" rel="stylesheet" type="text/css" /> <link href="css/tabel.css" rel="stylesheet" type="text/css" /> <link href="css/calendar.css" rel="stylesheet" type="text/css" />


(56)

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script src="js/ckeditor.js"></script>

<script src="js/ckfinder/ckfinder.js"></script> <script src="js/config.js"></script>

<script src="js/ckeditor_fungsi.js"></script> <script src="js/calendar.js"></script>

<script >

var info_loading = "<div style='font-size:110%;font-style:italic;font- weight:bolder;width:150px;margin:0 auto;' class='tombol loading'>Sedang proses ...</div>";

function bersihkan(elm){

$("#content").data($(elm).attr("name"),$(elm).val()); $(elm).val("");

}

function kembali_semula(elm){ if($(elm).val() == ""){

$(elm).val($("#content").data($(elm).attr("name"))); }

}

function load_menu(elm){

$(".menu_terpilih").eq(0).removeClass("menu_terpilih").addClass("menu_ awal");


(57)

$(elm).parent().removeClass("menu_awal").addClass("menu_terpilih"); var url = $(elm).attr("href");

$("#content").html(info_loading).load(url); return false;

}

$(function(){

$(".menu_awal>a").eq(0).click(); })

</script> </head> <body>

<div id="nav_menu">

<ul class="menu_kiri">

<li class="menu_awal"><a onclick="return load_menu(this)" href="beranda.php">Beranda</a></li>

<li class="menu_awal"><a onclick="return load_menu(this)" href="daftar_mp.php">Daftar Ujian</a></li>

<li class="menu_awal"><a onclick="return load_menu(this)" href="daftar_siswa.php">Daftar Peserta</a></li>

<li class="menu_awal"><a onclick="return load_menu(this)" href="daftar_nilai_mp.php">Lihat Nilai</a></li>

</ul>


(58)

<li class="menu_awal"><a onclick="return load_menu(this)" href="ganti_pass.php">Ganti Password</a></li>

<li class="menu_awal"><a href="logout.php">Keluar</a></li>

</ul> </div>

<div id="content"></div> </body>

</html> <?php } ?>

15. hal_siswa.php

<html> <head>

<link href="image/test.jpg" rel="shortcut icon">

<link href="css/soal.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script >

var info_loading = "<div style='font-size:110%;font-style:italic;font- weight:bolder;width:150px;margin:0 auto;' class='tombol loading'>Sedang proses ...</div>";


(59)

function load_menu(elm){

$(".menu_terpilih").eq(0).removeClass("menu_terpilih").addClass("menu_ awal");

$(elm).parent().removeClass("menu_awal").addClass("menu_terpilih"); var url = $(elm).attr("href");

$("#content").html(info_loading).load(url); return false;

}

$(function(){

$(".menu_awal>a").eq(0).click(); })

</script> </head> <body>

<div id="nav_menu">

<ul class="menu_kiri">

<li class="menu_awal"><a onclick="return load_menu(this)" href="beranda.php">Beranda</a></li>

<li class="menu_awal"><a onclick="return load_menu(this)" href="mp_siswa.php">Ujian</a></li>

</ul>


(60)

<li class="menu_awal"><a onclick="return load_menu(this)" href="profil.php"><?php echo

ucwords($_SESSION['nama_kj']) ?></a></li>

<li class="menu_awal"><a onclick="return load_menu(this)" href="ganti_pass.php">Ganti Password</a></li>

<li class="menu_awal"><a href="logout.php">Keluar</a></li>

</ul> </div>

<div id="content"> </div>

</body> </html> <?php } ?>

16. hapus_data.php

<?php

include_once "include/koneksi.php"; $status = 0;

$id_nilai = $_REQUEST['id_nilai']; $id_nama = $_REQUEST['id_nama']; $table = $_REQUEST['table'];


(61)

$sql = "delete from ".$table." where ".$id_nama."='".$id_nilai."'"; $sql_exe = mysql_query($sql);

if($sql_exe){ $status = 1; }

echo $status; ?>

17. hapus_nilai_ujian.php

<?php

include_once "include/koneksi.php"; $status = 0;

$nis = $_REQUEST['nis'];

$id_ujian = $_REQUEST['id_ujian']; $table = "nilai";

$sql = "delete from ".$table." where id_user='".$nis."' and id_ujian='".$id_ujian."'";

$sql_exe = mysql_query($sql); if($sql_exe){

$status = 1; }

echo $status; ?>


(62)

18. index.php

<?php session_start();

if(isset($_SESSION['login_kj'])){

header("location:hal_".$_SESSION['level_kj'].".php"); }

else { ?> <html> <head>

<link href="image/test.jpg" rel="shortcut icon"> <title>Ujian Online</title>

</head>

<body onload="document.forms[0]['id_user'].focus()"> <div id="div_login">

<fieldset>

<legend>Halaman login</legend> <?php

if(isset($_GET['info'])){ $display = "block";

$pemberitahuan = $_GET['info']; }

else{


(63)

$pemberitahuan = ""; }

?>

<div class="info" style="display:<?php echo $display ?>"><?php echo $pemberitahuan; ?></div>

<form action="login.php" method="post"> <div>

<label class="kiri">NIS atau No. Pendaftaran</label> <input type="text" class="inputan" name="id_user" placeholder="No. Pendaftaran"/>

</div> <div>

<label class="kiri">Password anda</label>

<input type="password" class="inputan" name="password" placeholder="Password"/>

</div> <div>

<label class="kiri"> </label>

<input type="submit" class="inputan tombol" value="Login"/>

</div> </form> </fieldset> </div>


(64)

</body> </html>

19. kerjakan_ujian.php

<?php

include_once "include/cek_session.php"; include_once "include/koneksi.php"; $id_ujian = $_REQUEST['id_ujian'];

$sql_ujian = "select * from v_ujian_mapel where id_ujian='".$id_ujian."'"; $sql_ujian_exe = mysql_query($sql_ujian);

$data_ujian = mysql_fetch_assoc($sql_ujian_exe); if(isset($_SESSION["mulai_".$id_ujian])){

$telah_berlalu = time() - $_SESSION["mulai_".$id_ujian]; }

else {

$_SESSION["mulai_".$id_ujian] = time(); $telah_berlalu = 0;

}

?>

<script type="text/javascript" src="js/jquery.countdown.js"></script> <!-- awal div header -->

<div id="header">


(65)

<div class="h_item">

<div class="item_kiri">Nama</div>

<div><?php echo $_SESSION['nama_kj']; ?></div> </div>

<div class="h_item">

<div class="item_kiri">Mata Pelajaran</div> <div><?php echo

ucwords($data_ujian['nama_mp'])." (

".ucwords($data_ujian['nama_ujian']).")" ?></div> </div>

</div>

<div id="h_item_kanan"> <div class="h_item">

<div class="item_kiri">Kelas</div> <div>Calon Siswa</div>

</div>

<div class="h_item">

<div class="item_kiri">Nilai</div> <div>0</div>

</div> </div>

<div id="timer">00 : 00 : 00</div> </div>


(66)

<!-- awal div tempat_soal --> <div id="tempat_soal"> <?php

// ambil pilihan jawaban dari database dan simpan de dalam array

$sql_pil = "select * from pil_jawaban where id_soal in (select id_soal from soal where id_ujian='".$id_ujian."') order by rand()";

$sql_pil_exe = mysql_query($sql_pil); if(mysql_num_rows($sql_pil_exe) > 0){ $data_pil_arr = array();

while($data = mysql_fetch_assoc($sql_pil_exe)){ if(isset($data_pil_arr[$data['id_soal']])){

$pil_jawabannya = array("id_jawaban" => $data['id_jawaban'],"status" => $data['status'],"jawaban" => $data['jawaban']);

array_push($data_pil_arr[$data['id_soal']],$pil_jawabannya); }

else {

$data_pil_arr[$data['id_soal']] = array(); $pil_jawabannya = array("id_jawaban" => $data['id_jawaban'],"status" => $data['status'],"jawaban" => $data['jawaban']);

array_push($data_pil_arr[$data['id_soal']],$pil_jawabannya); }


(67)

}

20. login.php

<?php

session_start();

include_once "include/koneksi.php";

// cek apakah id_user dan password telah terdaftar function cek_login($username,$pass){

$sql = "select * from user where id_user='".$username."' and password='".md5($pass)."'";

$sql_exe = mysql_query($sql); if(mysql_num_rows($sql_exe) > 0){

// simpan level dari user yang login

$data_login = mysql_fetch_assoc($sql_exe); $_SESSION['level_kj'] = $data_login['level']; return true;

} else {

return false; }

}

function ambil_data($username){

$sql = "select * from ".$_SESSION['level_kj']." where nis='".$username."'";


(68)

$sql_exe = mysql_query($sql);

$data = mysql_fetch_assoc($sql_exe); return $data;

}

$id_user = $_POST['id_user']; $pass = $_POST['password']; if(cek_login($id_user,$pass)){

$data_siswa = ambil_data($id_user); // buat session berdasarkan data siswa $_SESSION['nis_kj'] = $data_siswa['nis']; $_SESSION['nama_kj'] = $data_siswa['nama']; $_SESSION['login_kj'] = true;

header("location:hal_".$_SESSION['level_kj'].".php"); }

else{

header("location:index.php?info=Username atau password salah"); }

?>

21. logout.php

<?php session_start(); session_destroy();


(69)

?>

22. mp_siswa.php

<?php

include_once "include/koneksi.php"; ?>

<div class="daftar_pelajaran"> <fieldset>

<legend>Pilih Mata Pelajaran</legend> <?php

// ambil data mata pelajaran dari database

$mp_exe = mysql_query("select * from mapel"); $jml_mp = mysql_num_rows($mp_exe);

if($jml_mp > 0){ ?>

<ul>

<?php

while($data = mysql_fetch_assoc($mp_exe)){

$jml_ujian = mysql_result(mysql_query("select count(*) from ujian where id_mp='".$data['id_mp']."'"),0);

echo "<div

onclick=\"lihat_ujian_siswa('".$data['id_mp']."')\"><span class='jml_ujian'>".$jml_ujian."</span><li><a


(70)

echo "<div class='tombol edit' >Daftar ujian</div>"; echo "</div>";

}

?> </ul> <?php

} else {

echo "Mata Pelajaran Belum Dibuat"; }

?>

</fieldset> </div> <script>

function lihat_ujian_siswa(id_mp){

// load content dengan data dari daftar_ujian.php

$("#content").html(info_loading).load("daftar_ujian_siswa.php?id_mp="+ id_mp);

} </script>


(71)

23. profil.php

<?php

session_start();

include_once "include/koneksi.php"; ?>

<div style="margin:0 auto;width:50%;padding:10px"> <fieldset>

<legend>Data Pribadi</legend>

<?php

// ambil data mata pelajaran dari database $tabel = $_SESSION['level_kj'];

$nis = $_SESSION['nis_kj'];

$profil_exe = mysql_query("select * from ".$tabel." where nis='".$nis."'"); $data_profil = mysql_fetch_assoc($profil_exe);

foreach($data_profil as $index => $nilai){ echo "<div class='div_profil'><div

class=l_kiri>".ucwords($index)."</div><div>".ucwords($nilai)."</div></div >";

} ?>

</fieldset> </div>


(72)

24. simpan_form.php

<?php

//error_reporting (E_ALL ^ E_NOTICE); include_once "include/koneksi.php"; include_once "include/fungsi.php"; $status = 0;

$data = $_REQUEST['data']; $tabel = $_REQUEST['tbl'];

for($i = 0; $i < count($data); $i++){ $data_ar=$data[$i];

foreach($data_ar as $id => $nil){ if($id == 'value'){

$nilai[]=mysql_escape_string($data_ar[$id]); }

else

$nama[]=$data_ar[$id]; }

}

$str_nilai = buatStringNilai($nilai); $str_kolom = buatStringKolom($nama);

$sql = "insert into ".$tabel." (".$str_kolom.") values (".$str_nilai.")"; $sql_exe = mysql_query($sql);

if($sql_exe){ $status = 1;


(73)

}

echo $status; ?>

25. simpan_soal.php

<?php

include_once "include/koneksi.php"; $data = $_REQUEST['data'];

$id_soal = $data['0']; $id_ujian = $data['1']; $pertanyaan = $data['2']; $pil_jawaban = $data['3']; $status = 0;

// simpan ke tabel soal

$sql_soal = "insert into soal values

('".$id_soal."','".$id_ujian."','".mysql_escape_string($pertanyaan)."')"; $sql_pil = "insert into pil_jawaban (id_soal,jawaban,status) values "; $data_pil = "";

foreach($pil_jawaban as $pilihan){ $data_pil .=

"('".$id_soal."','".mysql_escape_string($pilihan['0'])."','".$pilihan['1']."'),"; }

$data_pil = substr($data_pil,0,strlen($data_pil) - 1); $sql_pil .= $data_pil;


(74)

$soal_exe = mysql_query($sql_soal); if($soal_exe){

$pilihan_exe = mysql_query($sql_pil); $status = 1;

}

echo $status; ?>

26. update_data.php

<?php

include_once "include/koneksi.php"; include_once "include/fungsi.php"; $status = 0;

$data = $_REQUEST['data']; $tabel = $_REQUEST['table']; for($i = 0; $i < count($data); $i++){

$data_ar=$data[$i];

foreach($data_ar as $id => $nil){ if($id == 'value'){

$nilai[]=mysql_escape_string($data_ar[$id]); }

else

$nama[]=$data_ar[$id]; }


(75)

}

$sql = "update ".$tabel." set ".buatStringUpdateId($nama,$nilai); $sql_exe = mysql_query($sql);

if($sql_exe){ $status = 1; }

echo $status; ?>

27. view_jawaban.php

<?php

include_once "include/cek_session.php"; include_once "include/koneksi.php"; $id_ujian = $_REQUEST['id_ujian'];

$sql_ujian = "select * from v_ujian_mapel where id_ujian='".$id_ujian."'"; $sql_ujian_exe = mysql_query($sql_ujian);

$data_ujian = mysql_fetch_assoc($sql_ujian_exe);

$nilai_exe = mysql_query("select nilai,detail_jawaban from nilai where id_user='".$_SESSION['nis_kj']."' and id_ujian='".$id_ujian."'"); $data_nilai = mysql_fetch_assoc($nilai_exe);

$jawaban_siswa_terpilih = explode(",",$data_nilai["detail_jawaban"]); ?>

<link href="css/soal.css" rel="stylesheet" type="text/css" /> <!-- awal div header -->


(76)

<div id="header">

<div id="h_item_kiri"> <div class="h_item">

<div class="item_kiri">Nama</div>

<div><?php echo $_SESSION['nama_kj']; ?></div> </div>

<div class="h_item">

<div class="item_kiri">Mata Pelajaran</div> <div><?php echo

ucwords($data_ujian['nama_mp'])." (

".ucwords($data_ujian['nama_ujian']).")" ?></div> </div>

</div>

<div id="h_item_kanan"> <div class="h_item">

<div class="item_kiri">Kelas</div> <div>Calon Siswa</div>

</div>

<div class="h_item">

<div class="item_kiri">Nilai</div>

<div><?php echo $data_nilai['nilai'] ?></div> </div>


(77)

</div><!-- akhir div header -->

<!-- awal div tempat_soal --> <div id="tempat_soal"> <?php

$sql_pil = "select * from pil_jawaban where id_soal in (select id_soal from soal where id_ujian='".$id_ujian."') order by rand()";

$sql_pil_exe = mysql_query($sql_pil); if(mysql_num_rows($sql_pil_exe) > 0){ $data_pil_arr = array();

while($data = mysql_fetch_assoc($sql_pil_exe)){ if(isset($data_pil_arr[$data['id_soal']])){

$pil_jawabannya = array("id_jawaban" => $data['id_jawaban'],"status" => $data['status'],"jawaban" => $data['jawaban']);

array_push($data_pil_arr[$data['id_soal']],$pil_jawabannya); }

else {

$data_pil_arr[$data['id_soal']] = array(); $pil_jawabannya = array("id_jawaban" => $data['id_jawaban'],"status" => $data['status'],"jawaban" => $data['jawaban']);

array_push($data_pil_arr[$data['id_soal']],$pil_jawabannya); }


(78)

}

$sql_soal = "select * from soal where id_ujian='".$id_ujian."' order by rand()";

$sql_soal_exe = mysql_query($sql_soal); $no = 0;

while($soalnya = mysql_fetch_assoc($sql_soal_exe)){ $no++;

echo '

<div class="soal_ujian">

<div class="no_soal">'.$no.'</div> <div class="isi_soal">

<div

class="pertanyaan">'.$soalnya["isi_soal"].'</div>';

// $sql_pil = "select * from pil_jawaban where id_soal='".$soalnya['id_soal']."' order by rand()";

// $sql_pil_exe = mysql_query($sql_pil); // while($data_pil =

mysql_fetch_assoc($sql_pil_exe)){

// echo '<div class="pilihan_jawaban"><input type="radio" name="'.$data_pil['id_soal'].'" value="'.$data_pil['status'].'" onclick="koreksi(this)"/><div>'.$data_pil['jawaban'].'</div></div>';

// }


(79)

if(in_array($data_pil["id_jawaban"],$jawaban_siswa_terpilih)){ $checked_radio = "checked"; $class_div = "radio_terpilih"; }

else {

$checked_radio = ""; $class_div = ""; }

echo '<div class="pilihan_jawaban

'.$class_div.'"><input alt="'.$data_pil["id_jawaban"].'" type="radio" name="'.$soalnya["id_soal"].'" value="'.$data_pil['status'].'"

'.$checked_radio.' /><div>'.$data_pil['jawaban'].'</div></div>'; }

echo '</div> </div> ';

} } else {

echo "soal masih belum ada !!!!!!!!!"; }


(80)

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma 3 Teknik Informatika:

Nama : LOUISTEN MANALU NIM : 132406179

Prog. Studi : Diploma (D3) Teknik Informatika

Judul Tugas Akhir : Perancangan Aplikasi Ujian Online Berbasi Web

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut di atas pada tanggal ……….

Dengan Hasil : Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juni 2016 Dosen Pembimbing

Dr. Suwarno Ariswoyo, M.Si NIP. 195021031980031001


(81)

KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, Fax. (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : LOUISTEN MANALU

Nomor Stambuk : 132406179

Judul Tugas Akhir : APLIKASI UJIAN ONLINE

Dosen Pembimbing : Dr. Suwarno Ariswoyo, M.Si Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No. Tanggal Asisten Bimbingan

Pembahasan pada Asistensi Mengenai, pada

Bab :

Paraf Dosen Pembimbing

Keterangan

1. 15 Maret 2016 ACC Judul

2. 05 April 2016 Konsultasi Proposal 3. 07 April 2016 ACC Proposal 4. 25 April 2016 ACC BAB 1 5. 24 Mei 2016 ACC BAB 2 6. 06 Juni 2016 ACC BAB 3 7. 13 Juni 2016 ACC BAB 4 & 5 8. 20 Juni 2016 Melengkapi

 Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui, Disetujui,

Ketua Prog.Studi D3Teknik Informatika, Dosen Pembimbing,

Dr. Elly Rosmaini, M.Si. Dr. Suwarno Ariswoyo, M.Si NIP 196 005 201 985 032 002 NIP. 195021031980031001


(82)

KEMENTERIAN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM Jl. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, Fax. (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa : WALDO PANJAITAN

Nomor Stambuk : 132406155

Judul Tugas Akhir : APLIKASI SISTEM INVENTORY BUKU PADA YAYASAN ALUSI TAO TOBA

Dosen Pembimbing : Dr. Suwarno Ariswoyo, M.Si Tanggal Mulai Bimbingan :

Tanggal Selesai Bimbingan :

No. Tanggal Asisten Bimbingan

Pembahasan pada Asistensi Mengenai, pada

Bab : Paraf Dosen Pembimbing Keterangan 1. 2. 3. 4. 5. 6. 7. 8.

 Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai.

Diketahui, Disetujui,

Ketua Prog.Studi D3Teknik Informatika, Dosen Pembimbing,

Dr. Elly Rosmaini, M.Si. Dr. Suwarno Ariswoyo, M.Si NIP 196 005 201 985 032 002 NIP. 195021031980031001


(83)

DAFTAR PUSTAKA

Atkinson, Leon. 2004. Core PHP Programming. Third Edition. USA: Prentice Hall PTR.

ASP Reference Manual, Microsoft, 1999.

Betha dan Epsi Budiharjo, Client Side Programming, PIKSI-ITB, 2001. Darmawan, Dilar. 2007 Aplikasi PHP pada Website Online Examination.

Kadir, Abdul, 2008, Dasar Pemograman WEB Dinamis Menggunakan PHP, penerbit Andi.

Meloni, Julie C.2002. Sams Teach Yourself PHP, MySQL and Apache in 24 Hours. USA: Sams Publishing.

http://Microsoft.com

Saputra, Agus, 2011. Pemograman CSS Untuk Pemula. Jakarta : PT. Gramedia. Syafi’i. 2009. Rancang Bangun Aplikasi Online untuk Ujian Masuk Jalur Reguler Di

Universitas Islam Negeri (UIN) Maulana Malik Ibrahim Malang. http://W3Schools.com, 2002


(84)

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang masih manual dan harus diganti dengan sistem yang lebih baik lagi. Hal ini dilakukan dengan cara membangun sistem yang terkomputerisasi atau online. Untuk memulai membangun suatu program mengenai perancangan system informasi akademik, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang akan menggunakan aplikasi basis data ini.

Perancangan merupakan proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen system diaktualisasikan. Proses ini menyangkut tujuan sistem tersebut, audience, objek dan informasi domain. Perancangan yang baik harus mengetahui bagaimana mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efesien dan elegan.


(85)

26

3.2 Data Flow Diagram (DFD) Perancangan Aplikasi

Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan

pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa, penanganan notasi simbol lingkaran dan anak panah menggambarkan arus data dalam perancangan sistem sangat membantu dalam komunikasi dengan pemakaian sistem menggunakan notasi – notasi untuk menggambarkan arus dari data sistem.

Disamping itu DFD adalah salah satu alat pembuatan model yang sering digunakan, khususnya bila fungsi – fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.

DFD juga merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program.


(86)

27

3.2.1 Diagram Konteks Aplikasi Ujian Online

Diagram Konteks adalah sebuah diagram sederhana yang menggambarkan hubungan antara entity luar, masukan dan keluaran dari sistem. Diagram konteks direpresentasikan dengan lingkaran tunggal yang mewakili keseluruhan sistem.

Berikut ini adalah diagram konteks dari ujian online:

ADMIN

Daftar Peserta

Input Soal

Daftar Nilai Peserta

Daftar Peserta Ujian

SISTEM UJIAN ONLINE

Input Jawaban

Data Peserta

Data Soal

Data Nilai

PESERTA


(87)

28

3.2.2 Data Flow Diagram (DFD) Level 0

DATAPESERTA

DATA

PESERTA LOGIN ADMIN DATAUJIAN

DATAMAPEL

MAPEL

DATAADMIN

ADMIN

DATAPESERTA

PESERTA DATAPESERTA

DATANILAI

DATAJAWABAN

UJIAN

NILAI

DATASOAL

SOAL

DATANILAI

NILAI

Gambar 3.2.2 Data Flow Diagram (DFD) Level 0

3.3 Perancangan Database Aplikasi

Database adalah kumpulan dari data yang berhubungan antara yang satu dengan

yang lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang


(88)

29

penting dalam sistem komputerisasi, karena database merupakan kumpulan dari beberapa file, dalam hal ini file file tersebut dikelompokan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.

3.3.1 Relationship (Relasi Antar Tabel)

Tabel saling berelasi dalam aplikasi ujian online ini. Relasi antar tabel ditunjukan pada Gambar 3.3.1

admin nis nama alamat agama mapel id_mp nama_mp user id_user password level peserta nis nama alamat agama soal id_soal id_ujian isi_soal ujian id_ujian nama_ujian id_mp tanggal waktu keterangan pil_jawaban nilai id_nilai id_user id_ujian nilai detail_jawaban id_jawaban id_soal jawaban status


(1)

ABSTRAK

Sistem ujian online merupakan salah satu bagian sistem informasi pendidikan jarak jauh melalui media teknologi internet. Ujian yang dilakukan oleh sebagian besar institusi pendidikan, dalam hal ini universitas masih dilaksanakan secara konvensional. Konsep Ujian online yang tidak terkait ruang dan waktu dapat menjadi solusi atas kendala yang ada pada metode ujian yang konvensional. Sistem ini bertujuan untuk mempermudah dosen dalam memberikan ujian dan proses pemberian nilai ujian yang efektif dan efisien karena proses penilaian diberikan langsung saat mahasiswa selesai mengerjakan ujian.

Penelitian dilakukan dengan mengamati sistem secara langsung sehingga didapatkan hasil analisis mengenai kebutuhan sistem. Sebagai dasar dan acuan untuk membuat sistem ujian online dilakukan studi pustaka kemudian membuat perancangan database sistem menggunakan DFD dan ERD. Bahasa pemograman yang digunakan adalah PHP dan MySQL sebagai databasenya. Soal yang disajikan dalam sistem pilihan ganda.

Implementasi dari sistem ujian online ini dibuat dengan fasilitas meliputi manajemen ujian, manajemen soal ujian, manajemen data dosen dan mahasiswa yang nantinya akan menghasilkan keluaran nilai.


(2)

ABSTRACT

Online examination system is the part of the distance learning information systems using the technology of internet. Exam which performed by most education institutions in this case the university was done conventionally. The concept of an online exam, which is not limited with space and time can be solution to the constraints that exist on the conventional test methods. This system is aimed so lecturer can give exams and grading examinations to give effective and efficient process easier, because the process of grading is done right when students have completed the examination.

Research carried out by observing the system directly, to obtain the results of the system requirements analysis. As a basis and reference for an online exam system has been conducted by performed literature study and then create a database system design and use of DFD. The programming language using PHP and MySQL as its database. The questions are presented in multiple choice system.

The implementation of this online examination create some facilities such as exam management, teachers and students data management, the output in the form of test results to grades.

Kata kunci : Online exam, Website, PHP, MySQL


(3)

DAFTAR ISI

Halaman

Persetujuan i

Pernyataan ii

Penghargaan iii

Abstrak iv

Abstract v

Daftar Isi vi

Daftar Tabel viii

Daftar Gambar ix Bab 1. Pendahuluan

1.1 Latar Belakang 1

1.2 Identifkasi Masalah 2

1.3 Batasan Masalah 3

1.4 Maksud dan Tujuan 3

1.5 Metode Penelitian 4

1.6 Sistematika Penulisan 5

Bab 2. Landasan Teori

2.1 Konsep Dasar Ujian, Ujian Online 7

2.1.1 Ujian 7

2.1.2 Ujian Online 10

2.2 Internet 10

2.3 WWW (World Wide Web) 11

2.4 HTML (Hyper Text Markup Languange) 13

2.4.1 Penamaan Dokumen HTML 13

2.4.2 Elemen dan Tag HTML 14

2.5 PHP (Hypertext Propocessor) 17

2.5.1 Sejarah Asal Mula PHP 18

2.5.2 Variabel Pada PHP 19

2.5.3 Konsep Dasar Penggunaan PHP 20

2.6 MySQL 21

2.7 CSS (Cascanding Style Sheet) 22

2.8 JavaScript 22


(4)

3.2 Data Flow Diagram (DFD) Perancangan Aplikasi 26

3.2.1 Diagram Konteks Ujian Online 27

3.2.2 Data Flow Diagram Level 0 28

3.3 Perancangan Database Aplikasi 28

3.3.1 Relationship (Relasi Antar Tabel) 29

3.3.2 Struktur Tabel 30

3.4 Flowchart Perancangan Aplikasi Ujian Online 33

3.4.1 Flowchart Login Admin 33

3.4.2 Flowchart Halaman Admin 34

3.4.3 Flowchart Peserta 35

Bab 4. Implementasi Sistem

4.1 Pengertian Implementasi Sistem 36

4.2 Tujuan Implementasi 37

4.3 Komponen Dalam Implementasi Sistem 37

4.3.1 Komponen Perangkat Keras (Hardware) 38 4.3.2 Komponen Perangkat Lunak (Software) 38

4.3.3 Kebutuhan Brainware 39

4.4 Tampilan Halaman Website 39

Bab 5. Kesimpulan dan Saran

5.1 Kesimpulan 45

5.2 Saran 45

Daftar Pustaka Lampiran


(5)

DAFTAR TABEL

Nomor Tabel

Judul Halaman

3.1 Tabel Admin 30

3.2 Tabel Mapel 30

3.3 Tabel Nilai 30

3.4 Tabel Pil_jawaban 31

3.5 Tabel Peserta 31

3.6 Tabel Soal 32

3.7 Tabel ujian 32


(6)

DAFTAR GAMBAR

Nomor Gambar

Judul Halaman

3.2.1 Diagram Konteks Ujian Online 27

3.2.2 Data Flow Diagram (DFD) Level 0 28

3.3.1 Relationship (Relasi Antar Tabel) 29

3.4.1 Alur Flowchart Admin 33

3.4.2 Alur Flowchart Halaman Admin 34

3.4.3 Alur Flowchart Halaman Peserta 35

4.4.1 Halaman Login 39

4.4.2 Halaman Beranda Admin 40

4.4.3 Halaman Daftar Ujian 40

4.4.4 Halaman Tambah Ujian 41

4.4.5 Halaman Tambah Soal Ujian 41

4.4.6 Halaman Daftar Peserta 42

4.4.7 Halaman Lihat Nilai 42

4.4.8 Halaman Ganti Password 43

4.4.9 Halaman Beranda Peserta 43

4.4.10 Halaman Daftar Ujian Peserta 44