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.
76 | P a g e 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="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
<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
77 | P a g e 41 42 43 44 45 46 47
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
78 | P a g e
// 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
79 | P a g e