Polling Dengan Ajax Dan Menampilkan Hasil Polling Dengan Grafik Pie / Oval
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… ^_^
Chandra Jatnika

mas itu kalau grafik pengen dirubah bukan oval gitu rubahnya dimana ? misalkan pengen grafik yang lain sesuai dengan yang ada di fitur jpgraph
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.
makasih mas….,, tutorial ini enak kalo buat proyekan nantinya.
biasanya saya sering pakek framework
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
tutorialnya sangat membantu,,
thanks mas,,
trima kasih tutorialnya mas, tutorial ini sangat bermanfaat sekali.