Jane.. ^^v: Mei 2012

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

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`)

)

Membuat form untuk tulis nama user dan pemilihan topik pertanyaan

index.php

<html>

<head>

<title>Kuis Online</title>

</head>

Nama: <br>

Jenis soal: <br>

<?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>

</body>

</html>

Mengambil pertanyaan menggunakan ajax jquery json

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.

Meng-generate json data pertanyaan dan pilihan jawaban dari MySQL menggunakan PHP

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"

}

]

}

Menjalankan timer

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

Memasukkan dan mengecek waktu di javascript cookies

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);

}

Menampilkan pertanyaan dan pilihan jawaban

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();

}

Menghitung hasil kuis

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";

Kode lengkapnya

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

Jane.. ^^v

OCWN

Kamis, 03 Mei 2012

Membuat Kuis atau Ujian Online Ajax