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 (wikipedia). Tentu akan sangat menarik jika website yang kita buat menerapkan konsep ajax. Pada tutorial kali ini, kita akan belajar membuat polling sederhana dengan menerapkan konsep ajax, dimana ketika pengguna mengisi inputan polling, saat itu juga akan di tampilkan hasil polling tanpa harus meload halaman, menarik bukan? Mari kita mulai...
Dibawah merupakan tampilan dari polling yang akan kita buat:
Ketika pengguna memilih opsi di atas, fungsi "getVote ()" dijalankan. Fungsi ini dipicu oleh event "onclick" yang terdapat pada checkbox pilihan polling. Buat file index.php dan masukkan kode berikut:
<html>
<head>
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Apakah tutorial ini membantu?</h3>
<form>
Ya:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>Tidak:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
Fungsi getVote () melakukan hal berikut:
1.Membuat objek XMLHttpRequest
2.Membuat fungsi yang akan dijalankan ketika respon server siap
3.Mengirim permintaan off ke file pada server
4.Perhatikan bahwa parameter (vote) ditambahkan ke URL (dengan nilai ya atau tidak ada pilihan)
File PHP
Halaman pada server dipanggil oleh javascript melalui file poll_vote.php, untuk itu kita buat file poll_vote.php dengan listing kode sebagai berikut:
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
Nilai polling dikirim dari JavaScript, kemudian terjadi proses berikut:
1. Ambil nilai dari file "poll_result.txt"
2. Tampung isi file dalam sebuah variabel dan tambahkan satu ke variabel yang dipilih
3. Menulis hasilnya ke file "poll_result.txt"
4. Output representasi grafis dari hasil polling
File Text
File poll_result.txt digunakan untuk menyimpan hasil polling yang di input oleh user, adapun struktur datanya sebagai berikut:
0 || 0
Nilai pertama untuk menampung inputan "YA", dan nilai kedua untuk menampung inputan "TIDAK". Sesuaikan jumlah input pilihan polling dengan parameter dan struktur data dari file pool_vote.txt.
Semoga bermanfaat...
