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….!!!!

Download Aplikasi

7 comments

  1. robz Reply

    hallo mas gedelumbung..saya mau tanya,klo mau menghilangkan setcookies nya gmn yah di polling tsb? jd user yg sama bisa trus menerus polling? script mana yg hrus sy hapus?

    makasih sblumnya đŸ™‚

    • Gede Lumbung Post authorReply

      Tinggal hapus selection if-nya aja mas…
      if (!isset($_COOKIE[“pengunjung”])) {}

      terus set cookie dihapus juga…

      setcookie(“pengunjung”, “sudah berkunjung”, time() + 200 * 24);

  2. Dayat Reply

    Gan Ane mau tny knp klo nilai vote pada database dganti 0 semua ada tlsn warning: Division by zero. . .
    Bgmn solusinya?cz klo blm da yg votel kn harusnya masih 0% semua gan..?

  3. RIzal Sidiq Reply

    trims mas dah sharing aplikasi nya…
    sangat bermanfaat buat pembelajaran đŸ™‚

  4. jamal cyber Reply

    Gan dedi klw mw cms yang bagus dan ada polingya bisa langsng kunjungi downloadcyber.byethost31.com saya da kasih cms lokomedia disana yang berada di file.website swarakalibata salam kenal jamal cyber

  5. ade Reply

    bli . request sistem kuisioner dong , berbasisi pertanyaan … baik , sangat baik, cukup . dong

Leave a Reply

Your email address will not be published. Required fields are marked *