Home > Ajax, JavaScript, JQuery, PHP, Tips & Trick > Polling Dengan Ajax Dan Menampilkan Hasil Polling Dengan Grafik Pie / Oval

Polling Dengan Ajax Dan Menampilkan Hasil Polling Dengan Grafik Pie / Oval

January 27th, 2009 Leave a comment Go to comments

Polling atau vote adalah aplikasi yang sering dijumpai pada sebuah website. Fungsinya adalah untuk menjaring pendapat tentang suatu permasalahan atau pertanyaan umum dari para pengunjung website. Pendapat-pendapat tersebut lalu akan dirangkum dalam perhitungan presentase dan ditampilkan dengan berbagai bentuk seperti chart, diagram atau cuma sekedar angka agar para pengunjung tau rangkuman pendapat dari pertanyaan polling tersebut.

Pada artikel kali ini saya akan coba menggabungkan Ajax dan PHP GD untuk membangun aplikasi polling sederhana. Ajax akan berfungsi untuk memproses pilihan pengunjung dari form dan menyimpannya ke database. PHP GD berfungsi untuk menampilkan grafik dari hasil pilihan pengunjung, grafik yang dipilih kali ini adalah dengan bentuk Oval 3 dimensi. Hasil dari aplikasi polling sederhana ini adalah seperti gambar di bawah ini.

Untuk membuat aplikasi ini ada beberapa library yang dilibatkan yaitu:

  • JQuery + Plugin Ajax Form: Untuk memproses data polling dan menyimpannya ke database melalui PHP. Ajax form dapat mempermudahkan proses pengiriman data dari form ke file PHP melalui back-end atau tanpa reload. Lebih jelasnya lihat artikel saya di sini.
  • JPGraph: Adalah library PHP yang berfungsi untuk mempermudah pembuatan berbagai macam gambar grafik, chart dan lainnya. Ingin lebih tahu tentang JPGraph ada di link ini.

Langkah-langkah pembuatannya persiapkan terlebih dahulu table pada MySQL yang akan menyimpan data polling.

CREATE TABLE `polling` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question` varchar(255) collate latin1_general_ci NOT NULL,
  `answer1` varchar(100) collate latin1_general_ci NOT NULL,
  `answer2` varchar(100) collate latin1_general_ci NOT NULL,
  `answer3` varchar(100) collate latin1_general_ci NOT NULL,
  `answer4` varchar(100) collate latin1_general_ci NOT NULL,
  `vote1` int(10) NOT NULL,
  `vote2` int(10) NOT NULL,
  `vote3` int(10) NOT NULL,
  `vote4` int(10) NOT NULL,
  PRIMARY KEY  (`id`)
);
 
-- Insert one row
 
INSERT INTO `polling` VALUES (NULL, 'Bagaimana blog ChandraJatnika.Com menurut anda?', 'Bagus', 'Lumayan', 'Biasa', 'Jelek', 1, 1, 1, 1);

Lalu ambil data tersebut dan tampilkan pada form. Berikut keseluruhan script di dalam tag BODY.

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div id="divLoading" style="font-size:10px"></div>
<img src="graphic.php" id="imgPollResult" /><br /><br />
<div id="divResult" style="font-size:10px; color: green; font-weight:bold"></div>
<form action="vote.php" method="post" id="formVote">
 <?
	include 'connect.php'; // koneksi ke database mysql
 
	$query = mysql_query('SELECT question,answer1,answer2,answer3,answer4 FROM polling');
	$data = mysql_fetch_object($query);	
	echo $data->question;
 
	// tampilkan pilihan dengan format radiobutton (hanya 1 pilihan)
	echo '<br /><input type=radio name=vote value=1> '.$data->answer1;
	echo '<br /><input type=radio name=vote value=2> '.$data->answer2;
	echo '<br /><input type=radio name=vote value=3> '.$data->answer3;
	echo '<br /><input type=radio name=vote value=4> '.$data->answer4;
	echo '<br /><input type=submit value="Vote Now">';
 ?>
</form>

Masih di file yang mengandung form diatas, tambahkan script di bawah ini pada tag HEAD.

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 <script language="javascript" src="jquery.js"></script>
 <script language="javascript" src="jquery.form.js"></script>
 <script language="javascript">
  function reloadImage(){
	// tampilkan text 'loading' ketika image sedang dimuat browser
	$('#divLoading').text('Loading...'); 
	/*  Cara di bawah ini untuk me-refresh gambar 
		syntax (new Date()).getTime() akan me-regenerate nomor unique
		agar gambar yang di load selanjutnya selalu ter-update.
		misal: graphic.php?11575614, graphic.php?12216516, dll  */
	$('#imgPollResult').attr('src','graphic.php?'+(new Date()).getTime());	
  }
  // event-event/setup yang akan dijalankan ketika dokument selesai di load
  $(document).ready( 
	function(){
	   /* fungsi dari plugin ajaxform jquery yang akan memproses data dari 
		  form menuju file proses melalui backend atau tanpa reload.
		  untuk artikel lebih jelas ttg ajax form lihat di artikel saya sebelumnya
		  di http://chandrajatnika.com/2008/11/modernisasi-proses-input-form-anda-dengan-jquery-ajax-form/
	   */
	   $('#formVote').ajaxForm(
			function(){	
				$('#divResult').text('Terima kasih atas pilihan anda');
				/* ketika data selesai diproses pada file proses maka reload 
				   image yang menggambarkan statistik hasil vote */				
				reloadImage(); 
			} 
	   );
	   $('#imgPollResult').load(			
			function(){ 
				/* ketika image selesai di load maka text 'loading' di atas gambar 
				   langsung dihilangkan */
				$('#divLoading').text(''); 
			}
	   );
	}	
  );
 </script>

Ketika data pada form dikirim, file yang akan mengolah data tersebut lalu memasukannya pada database MySQL adalah file “vote.php”.

<?
	include 'connect.php';  // koneksi ke database mysql
 
	$vote = $_POST['vote']; // menerima hasil pilihan dari form berupa nilai 1,2,3 atau 4
	$SQL = "UPDATE polling SET vote{$vote} = vote{$vote} + 1"; // syntax update hasil pilihan (hasil sebelumnya ditambah 1)
	mysql_query($SQL);
?>

Bagian paling penting adalah file PHP yang akan me-regenerate gambar grafik yaitu “graphic.php”.

<?php
	// lebih jelas tentang jpgraph silahkan kunjungi http://www.aditus.nu/jpgraph/
	include ("jpgraph/jpgraph.php");
	include ("jpgraph/jpgraph_pie.php");
	include ("jpgraph/jpgraph_pie3d.php");
	include ("connect.php"); // koneksi ke database mysql
 
	$query = mysql_query('SELECT * FROM polling');
	$data = mysql_fetch_object($query);	
 
	/* siapkan data yang akan membentuk grafik oval
	   pada grafik ada 4 data yang disiapkan */
	$dataArray = array($data->vote1,$data->vote2,$data->vote3,$data->vote4);
 
	// tentukan lebar dan tinggi gambar keseluruhan
	$graph = new PieGraph(350,250,"auto");
	$graph->SetShadow(); // memberi efek bayangan pada frame gambar
 
	// judul yang tertera pada bagian paling atas gambar adalah isi pertanyaan polling
	$graph->title->Set($data->question); 
	$graph->title->SetFont(FF_FONT1,FS_BOLD);
	$graph->legend->Hide(); // jangan ada legend (penjelasan tiap warna di grafik oval)
 
	// setup data grafik dari array data yang sudah dipersiapkan sebelumnya
	$p1 = new PiePlot3D($dataArray); 
	$p1->ExplodeSlice(1); // memberi jarak salah satu belahan oval dari bentuk oval keseluruhan
	$p1->SetSize(0.35); // untuk mengatur besarnya oval pada gambar keseluruhan
	/* Method SetLabels untuk mengatur agar text yang menjelaskan besaran pada tiap belahan
	   oval berformat seperti yang kita inginkan, pada contoh kali ini setiap option jawaban
	   akan diikuti oleh persentase hasil pilihan user pada bagian bawah text */
	$p1->SetLabels(array("{$data->answer1}\n%.1f%%","{$data->answer2}\n%.1f%%","{$data->answer3}\n%.1f%%","{$data->answer4}\n%.1f%%"),1); 
 
	// masukan setup grafik oval ke frame gambar keseluruhan
	$graph->Add($p1);
	$graph->Stroke(); // generate gambar
?>

File “graphic.php” dapat dipanggil oleh file html manapun dengan menggunakan tag IMG. Perhatikan lagi potongan script form.

51
<img src="graphic.php" id="imgPollResult" /><br /><br />

Untuk melihat demo program ini klik link ini

Untuk mendownload keseluruhan program ini klik link ini

Semoga bermanfaat… ^_^

  1. zainal
    February 5th, 2009 at 10:00 | #1

    mas itu kalau grafik pengen dirubah bukan oval gitu rubahnya dimana ? misalkan pengen grafik yang lain sesuai dengan yang ada di fitur jpgraph

  2. February 5th, 2009 at 14:50 | #2

    Mengenai format grafik anda bisa pelajari dengan mendownload jpgraph dari situsnya… http://www.aditus.nu/jpgraph/
    Tapi library yang saya gunakan pada file demo yang anda bisa download di artikel ini hanya sebagian dari keseluruhan library jpgraph jadi kalau mau test grafik format lain sebaiknya anda juga copy-paste semua library jpgraph pada folder demo saya.

  3. February 13th, 2009 at 04:14 | #3

    makasih mas….,, tutorial ini enak kalo buat proyekan nantinya.

    biasanya saya sering pakek framework

  4. beyond
    February 20th, 2009 at 20:07 | #4

    Om. tanya dong. Kalo bikin grafik GANTT yang s/d menit pakai JPGRAPH. Bagaimana cara ? tapi datanya diambill dr database.
    Ganttiin arraynya yang ku tak tahu kalo di contoh demo jpgraph

  5. abi
    June 24th, 2009 at 16:45 | #5

    tutorialnya sangat membantu,,
    thanks mas,,

  6. didik
    March 1st, 2010 at 10:00 | #6

    trima kasih tutorialnya mas, tutorial ini sangat bermanfaat sekali.

  1. No trackbacks yet.