Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari:
- DOM yang diakses dengan client side scripting language, seperti VBScript dan implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
- Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di implementasikan pada beberapa browser. Objek ini berguna sebagai kendaraan pertukaran data asinkronus dengan web server. Pada beberapa framework AJAX, element HTML IFrame lebih dipilih daripada XMLHTTP atau XMLHttpRequest untuk melakukan pertukaran data dengan web server.
- XML umumnya digunakan sebagai dokumen transfer, walaupun format lain juga memungkinkan, seperti HTML, plain text. XML dianjurkan dalam pemakaian teknik AJaX karena kemudahan akses penanganannya dengan memakai DOM
- JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah JavaScript itu sendiri sehingga penanganannya lebih mudah
Seperti halnya DHTML, LAMP, atau SPA, Ajax bukanlah teknologi spesifik, melainkan merupakan gabungan dari teknologi yang dipakai bersamaan. Bahkan, teknologi turunan/komposit yang berdasarkan Ajax, seperti AFLAX sudah mulai bermunculan.
Niiiii.. bagi yang ingin tau bagai nama cara membuat kuis atau ujian online.. hohoho^^
Pada tutorial kali ini kita akan membuat kuis atau ujian online dengan menggunakan jQuery, javascript timer dan PHP. Pada Kuis online ini kita akan menampilkan pertanyaan dan pilihan-pilihan jawaban dari database MySQL menggunakan efek-efek jquery. Kuis online ini juga ada timer, di sini kita memanfaatkan javascript cookies untuk mencatat timer, yang berguna untuk mencegah user mengembalikan nilai timer dengan refresh. Jadi walaupun direfresh, waktu nya tetap jalan, tidak kembali ke semula. Jika waktu habis, otomatis kuis selesai dan melakukan penghitungan jawaban yang benar.
Mari kita lihat algoritma dan kodenya. Atau anda bisa lihat demonya. Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini
- Membuat tabel banksoal di MySQL
- Membuat form untuk tulis nama user dan pemilihan topik pertanyaan
- Mengambil pertanyaan menggunakan ajax jquery json
- Meng-generate json data pertanyaan dan pilihan jawaban dari MySQL menggunakan PHP
- Menjalankan timer
- Memasukkan dan mengecek waktu di javascript cookies
- Menampilkan pertanyaan dan pilihan jawaban
- Menghitung hasil kuis
- Kode lengkapnya
CREATE TABLE `banksoal` (
`soalid` int(5) NOT NULL auto_increment,
`topik` tinytext NOT NULL,
`pertanyaan` text NOT NULL,
`pilihan_a` tinytext NOT NULL,
`pilihan_b` tinytext NOT NULL,
`pilihan_c` tinytext NOT NULL,
`pilihan_d` tinytext NOT NULL,
`jawaban` varchar(1) NOT NULL,
PRIMARY KEY (`soalid`)
)
index.php
<html>
<head>
<title>Kuis Online</title>
</head>
<body bgcolor="#FFFFCC" onunload=keluar()>
<center>
<p> </p>
<p> </p>
<p> </p>
<form action="soal.php" method="get">
Nama: <br>
<input type=text name=nama><p>
Jenis soal: <br>
<select name="topik">
<?php
include "koneksi.php";
$topik = mysql_query("SELECT DISTINCT topik FROM banksoal");
while($t = mysql_fetch_array($topik)){
echo "<option>".$t['topik']."</option>\n";
}
?>
</select>
<p>
<input type=submit value="mulai">
</body>
</html>
soal.php
topik = $("#divtopik").html();
url = "ambilsoal.php?topik="+topik
$.ajax({
url: url,
dataType: 'json',
cache: false,
success: function(msg){
topik = msg;
setinputpilihan();
setinputjawaban()
tampilkan();
mainkanwaktu();
}
});
topik kita ambil dari <div id="divtopik"> yang nilainya kita ambil dari form index.php
setinputpilihan(), adalah fungsi untuk meng-generate <input type=hidden name="pilihan[]"> yang nanti berguna untuk menampung jawaban-jawaban yang dipilih oleh user.
setinputjawaban(), adalah fungsi untuk meng-generate <input type=hidden name="jawaban[]"> yang nanti berguna untuk meletakkan jawaban tiap pertanyaan.
setinputpilihan() dan setinputjawaban() berguna untuk pengolahan di PHP untuk menghitung jawaban.
ambilsoal.php
<?php
include "koneksi.php";
$topik = $_GET['topik'];
$data = mysql_query("SELECT * FROM banksoal WHERE topik='$topik'");
$json = '{"soal":[ ';
while($x = mysql_fetch_array($data)){
$json .= '{';
$json .= '"id":"'.$x['soalid'].'",
"topik":"'.htmlspecialchars($x['topik']).'",
"pertanyaan":"'.htmlspecialchars($x['pertanyaan']).'",
"a":"'.$x['pilihan_a'].'",
"b":"'.$x['pilihan_b'].'",
"c":"'.$x['pilihan_c'].'",
"d":"'.$x['pilihan_d'].'",
"jawaban":"'.$x['jawaban'].'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}';
echo $json;
?>
Jika kita running, akan membentuk data form json seperti berikut:
{"soal":[
{
"id":"1",
"topik":"internet",
"pertanyaan":"Website paling populer di dunia?",
"a":"google.com",
"b":"facebook.com",
"c":"yahoo.com",
"d":"kaskus.us",
"jawaban":"a"
},{
"id":"2",
"topik":"internet",
"pertanyaan":"Pencipta PHP",
"a":"Bill Gates",
"b":"Steve Jobs",
"c":"Rasmus Lerdorf",
"d":"Larry Page",
"jawaban":"c"
}
]
}
Berikut adalah fungsi untuk membuat countdown
var totalwaktu = 20; //batas waktu pengerjaan semua soal
function mainkanwaktu(){
if(totalwaktu>0){
$("#divtotalwaktu").html(totalwaktu);
totalwaktu--;
timer = setTimeout("mainkanwaktu()",1000);
}else{
clearTimeout(timer);
habis = 1;
document.getElementById("formulir").submit();
}
}
document.getElementById("formulir").submit(); berguna jika waktu sudah habis maka kita langsung mensubmit form
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1){
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function checkCookie(){
totalwaktucookies=getCookie('waktucookies');
if (totalwaktucookies!=null && totalwaktucookies!=""){
totalwaktu = totalwaktucookies;
}else{
setCookie('waktucookies',totalwaktu,7);
}
}
Jika user refresh, maka kita masukkan nilai totalwaktu ke cookies, cara mendeteksinya adalah dengan deteksi event onunload, kita pasang di tag <body onunload="keluar()">
berikut adalah kode fungsi keluar(), yang berfungsi memasukkan nilai totalwaktu yang sedang berjalan ke cookies
function keluar(){
if(habis==0){
setCookie('waktucookies',totalwaktu,7);
}else{
setCookie('waktucookies',0,-1);
}
}
function tampilkan(){
if(indexsoal<topik.soal.length){
nomorsoal = indexsoal + 1;
$("#divnomor").html("Soal "+nomorsoal+" dari "+ topik.soal.length);
$("#divpertanyaan").html(topik.soal[indexsoal].pertanyaan);
$("#divpertanyaan").fadeIn(2000);
$("#jawaban_a").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='a'>A. "+topik.soal[indexsoal].a);
$("#jawaban_b").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='b'>B. "+topik.soal[indexsoal].b);
$("#jawaban_c").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='c'>C. "+topik.soal[indexsoal].c);
$("#jawaban_d").html("<input type='radio' onclick='setnilai(this.value)' name='R"+indexsoal+"'value='d'>D. "+topik.soal[indexsoal].d);
$("#divoption").slideDown(750);
}else{
habis = 1;
document.getElementById("formulir").submit();
}
}
nilaiakhir.php
<?php
echo "Nama: ".$_POST['nama']."<br>";
$jumlahbenar = 0;
$i = 1;
foreach($_POST['pilihan'] as $key => $value){
if($value == $_POST['jawaban'][$key]){
$j = "benar";
$jumlahbenar++;
}else{
$j = "<font color='red'>salah</font>";
}
echo "No $i : $value ($j)<br>";
$i++;
}
echo "Jumlah benar = $jumlahbenar";
?>
Untuk kode lengkapnya silahkan download source code, untuk di sini melihat demo
Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini
http://id.wikipedia.org/wiki/AJAX
http://blog.codingwear.com/read32-Membuat-Kuis-atau-Ujian-Online-Ajax.drz
Untuk kuis online sederhana tanpa ajax dan konversi timer dalam menit dan detik, silahkan dowload di sini
http://id.wikipedia.org/wiki/AJAX
http://blog.codingwear.com/read32-Membuat-Kuis-atau-Ujian-Online-Ajax.drz
masih punya source code lengkap untuk aplikasi ini gak? saya tertarik boleh minta gak?
BalasHapusBoleh sy minta juga aplikasi atau source code lengkap nya mbak ke email sy alantea85@gmail.com,, terima kasih
BalasHapusboleh saya minta juga aplikasi atau source kode lengkapnya mba ke email saya "impronzaelani@gmail.com" terima kasih mba..
BalasHapusboleh saya minta juga aplikasi atau source kode lengkapnya mba ke email saya "lita.aryani7@gmail.com" terima kasih mba..
BalasHapusboleh minta applikasi lengkapnya ke
BalasHapussaldinata.ardani@gmail.com
thanks ya ,mbak
Sy juga mbak minta source nya soalnya link source kodenya ga bs kebuka....
BalasHapuskirim ke email sy aphicenk@gmail.com
misi mba mohon pencerahannya, klw setiap tampil soalnya 5 bukan 1 gmna caranya, n apa yg harus di rubah thanks...
BalasHapusBoleh sy minta juga aplikasi atau source code lengkap nya mbak ke email sy setyaamanbudi@gmail.com,,
BalasHapusterima kasih
ijin dan minta source code bang admin. ke satriya911@gmail.com
BalasHapusboleh minta source code nya mbak ke echo.thejacko@gmail.com . Terima Kasih
BalasHapuskak, minta source code nya ke cholid1607@gmail.com terima kasih
BalasHapusboleh minta source code nya ? ke endakytaro@gmail.com
BalasHapusboleu minta source codenya? ke skadi1268@gmail.com. terima kasih
BalasHapus