Tutorial AJAX : Membuat Polling AJAX Sederhana Dengan jQuery dan PHP

Melanjutkan postingan yang kemarin tentang AJAX, sekarang saya juga mau posting lagi tentang AJAX. “Kenapa dari kemarin postingan AJAX melulu?”. Hehe, karena saya memang lagi tergila-gila sama AJAX. Bawaannya pengen ngoprek terus, dan mengimplementasikannya di berbagai aplikasi-aplikasi web. Tadi pagi setelah bangun tidur (walaupun bangunnya agak kesiangan), saya sempat mencoba membuat sebuah polling sederhana dengan AJAX. Hmm, mungkin sudah terdengar basi dan sudah banyak tutorial di blog-blog lain yang membahasnya. Tapi berhubung saya masih newbie, mungkin ini hal yang cukup baru bagi saya. Logikanya hampir sama dengan postingan saya yang kemarin, tentang submit data dari form dengan AJAX. Perbedaannya, untuk kali ini inputannya dari radio button, dimana pemanggilannya hampir sama dengan yang inputannya berasal dari textbox. OK deh, langsung aja ke pembahasan cara pembuatannya :

1. Kita buat dulu database dan tabel yang akan menyimpan pertanyaan dan jawaban hasil pollingnya, isinya silahkan diisikan sendiri.

Silahkan lihat struktur database di dalam file yang sudah saya sertakan di akhir postingan ini.

2. Untuk polling AJAX ini, kembali saya menggunakan jQuery sebagai framework javascript-nya. Kita buat dulu file koneksi.php-nya.

<?php
$host="localhost";
$user="root";
$pass="";
$db="db_poll";
mysql_connect($host,$user,$pass);
mysql_select_db($db);
?>

3. Pada file index.php, kita akan membuat form polling-nya dengan syntax seperti di bawah ini :

<div id="loading" style="display:none"><img src="images/loading.gif" /><br />Mohon tunggu. Vote anda sedang disimpan.....</div>
<div id="results">
<h4>
<?php
include('koneksi.php');
$q = mysql_query("select * from tbl_poll where status='Y'");
$id = "";
$soal = "";
while($r=mysql_fetch_array($q))
{
	$id=$r['id_soal'];
	$soal=$r['soal'];
	echo $r['soal'];
}
?>
</h4><br>
<form name="myform" id="myform" action="" method="POST">
<input type="hidden" value="<?php echo $id; ?>" name="id_soal">
<input type="hidden" value="<?php echo $soal; ?>" name="soal">
<?php
$qj = mysql_query("select * from tbl_jwb_poll where id_soal='$id'");
$id = "";
while($rj=mysql_fetch_array($qj))
{
?>
	<input type="radio" name="name" checked="checked" value="<?php echo $rj['id_jwb']; ?>"/> <?php echo $rj['jawaban']; ?><br>
<?php
}
?>
	<br><input type="submit" name="submit" value="Submit">
</form>
<div>

4. Sekarang kita menuju ke bagian javascript-nya, ketikkan syntax javascript di bawah ini diantara tag head

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
    	<script type="text/javascript">
	$(document).ready(function(){
		$("#myform").validate({
			debug: false,
			rules: {
				name: "required"
			},
			messages: {
				name: "Pilih pilihan anda.",
			},
			submitHandler: function(form) {
				$.post("process.php", $("#myform").serialize(), function(data) {
					$('#results').html(data);
				});
			}
		});
	});

	$(function() {
		$('#loading').ajaxStart(function(){
			$(this).fadeIn();
		}).ajaxStop(function(){
			$(this).fadeOut();
		});

		$('#menu a').click(function() {
			var url = $(this).attr('href');
			$('#results').load(url);
			return false;
		});
	});
</script>

5. Hasil vote yang diberikan oleh user, akan diproses oleh file process.php dan disimpan ke dalam database dengan syntax php di bawah ini :

<?php
include('koneksi.php');
$id = $_POST['id_soal'];
$idj = $_POST['name'];
$soal = $_POST['soal'];
$jum = 0;
	$qjum = mysql_query("select * from tbl_jwb_poll where id_soal='$id'");
	while($rjum=mysql_fetch_array($qjum))
	{
		$jum += $rjum['vote'];
	}
setcookie("pengunjung", "sudah berkunjung", time() + 200 * 24);
if (!isset($_COOKIE["pengunjung"]))
{
	echo '<h4>'.$soal.'</h4><br>';
	$q = mysql_query("update tbl_jwb_poll set vote=vote+1 where id_jwb='$idj'");
	$qj = mysql_query("select * from tbl_jwb_poll where id_soal='$id'");
	while($rj=mysql_fetch_array($qj))
	{
	$pr = sprintf("%2.1f",(($rj['vote']/$jum)*100));
	$gbr = $pr * 3;
	echo ''.$rj['jawaban'].'<br>
	<div style="padding:10px; float:none; margin-bottom:5px; background-color:#000; width:'.$gbr.'px; color:#fff;" >'.$pr.'%</div>';
	}
}
else
{
	echo "<h4>Anda sudah melakukan voting sebelumnya..!!!<br>Terima Kasih telah melakukan voting.</h4>";
}
?>

Gampang kan cara pembuatannya??? Untuk menampilkan hasil voting, bisa dipercantik dengan menambahkan grafik menggunakan Open Flash Chart yang sudah pernah saya bahas di postingan terdahulu. Di bawah ini sudah ada hasil jadinya dan source kodenya yang siap untuk di download. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan juga sedang belajar AJAX.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!