【php】使用jpgraph完成投票系統的普通使用者部分

標籤：jpgraph   php   投票系統   mysql   javascript   

本文接上一篇《【php】投票系統管理員部分，增加投票與刪除投票》（點擊開啟連結）

上次三個連結只完成了管理員部分的兩個

現在完成最後的一個普通使用者這一個，同樣是沒有登入系統部分，請自行補充

一、基本目標

投票系統的普通使用者部分如所示：

首先顯示現存的投票列表給使用者，之後，點擊進入其中一個投票，能夠投票

投票皆為單選，不設定為多選，當然，你設定為多選也行，反正每一頁都是一個表單，

點擊“投票”按鈕則，詢問使用者是否確定，是則投票成功哦，否則不發生任何事

當投票的任何一項都大於1時，則彈出兩個統計圖，一個柱狀圖與餅狀圖，表示投票人數與比例

二、基本思想

柱狀圖與拼餅圖用Jpgraph來做

Jpgraph的下載與安裝與其他外掛程式類似，把需要的東西拖到下載目錄就可以了

首先開啟Jpgraph的官網（點擊開啟連結）選擇Download->Download Jpgraph

之後選擇第一個就可以，我也為大家上傳了一份（點擊開啟連結）

這東西雖然不是zip或者rar來結尾，但用最新的winrar能夠開啟並解壓，解壓之後把裡面的src放到網站目錄，並改名為jpgraph檔案夾就可以詳細可以看上一篇《【php】投票系統管理員部分，增加投票與刪除投票》（點擊開啟連結）的目錄結構

三、製作過程

1、voteindex.php

這是一個顯示所有投票列表的頁面，比刪除投票列表頁面delvote.php更加簡單，沒有刪除按鈕

注意給查詢出來的每一個超級連結，附上?get尾碼，通過get方法，給vote.php傳遞使用者到底開啟那一個投票的參數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>投票</title></head><body><h1>投票系統</h1><?php$con=mysql_connect("localhost","root","root");if(!$con){die("串連失敗！");}mysql_select_db("test",$con);mysql_query("set names utf8");$result=mysql_query("SELECT * FROM voteparent where isdel=0 order by id desc;");$i=1;while($row=mysql_fetch_array($result)){echo "投票${i}：<a href='vote.php?id=${row["id"]}'>${row["title"]}</a><br>";$i++;}mysql_close($con);?><p><a href="index.html">返回</a></p></body></html>

2、vote.php

用request方法拿到voteindex.php傳遞過來的id參數就開始工作了

查處該投票的投票標題與投票描述與各個子選擇的各種屬性，建立一個表單，

並且要構造一個每個子選項的得票數，類似與?opt1=1&&opt2=99&&opttotal=2的字串附在引入圖片的連結後面，其中opttotal是本投票存在多少選項。如果此投票僅2個選項，那麼opttoal=2。這裡是為jpgraph的工作需要。詳情請看代碼：

<?php$pid=$_REQUEST["id"];$con=mysql_connect("localhost","root","root");if(!$con){die("串連失敗！");}mysql_select_db("test",$con);mysql_query("set names utf8");$ptitle;$ptext;$result=mysql_query("select * from voteparent where id=".$pid.";");while($row=mysql_fetch_array($result)){$ptitle=$row["title"];$ptext=$row["text"];}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title><?phpecho "${ptitle}";?></title></head><!--以上為僅僅是為了查出voteparent表中投票標題title與投票描述ptext--><body><form action="votehandle.php" method="get" onsubmit="return check()"><?phpecho "<div><h1>${ptitle}</h1></div><div style='text-indent:2em'><h3>${ptext}</h3></div>";$result=mysql_query("select * from votechildren where parentid=".$pid.";");$i=1;$countstr="";$optarr=array();while($row=mysql_fetch_array($result)){echo "<div>選擇${i}：${row["text"]}，票數：${row["count"]}<input type='radio' name='opt' value='${row["id"]}'></div>";$countstr=$countstr."opt${i}=${row["count"]}&&";//除了構造get方法的字串，還把每一項的得票數傳入數組，是為了通過最少值為0判定是否有一項得票數為0，如果有一項得票數為0，就不應該出現統計圖，避免jpgraph出錯$optarr[$i-1]=$row["count"];$i++;}mysql_close($con);if(min($optarr)>0){//jpgraph的工作方式是，先在jpgraph.php與jppie.php寫好沒有任何html元素的php頁面，再通過img標籤的方式，引入此頁，如果要傳遞參數則這樣傳echo "<img src='jpgraph.php?${countstr}opttotal=${i}'>";echo "<img src='jppie.php?${countstr}opttotal=${i}'>";}?><p><input type="submit" value="投票" /></p></form><p></p><a href="index.html">返回</a></body></html><script>function check(){return confirm("確定投票？");}</script>

這個頁面同樣存在一定小問題，如果使用者沒有選擇任何選項，就點擊投票沒有空值處理，

具體可以在前台，用javascript處理一下，具體可以參考《【JavaScript】表單即時驗證，不成功不讓提交》（點擊開啟連結）

3、jpgraph.php

這一頁是用來畫柱狀圖，然後再被vote.php用img標籤引用，具體看下面代碼：

<?php//本頁不能有任何html與js元素，否則jpgraph無法工作//雖然僅引入2個頁面，但jpgraph檔案夾裡面的所有檔案都要保留，不然jpgraph無法工作include("jpgraph/jpgraph.php");include("jpgraph/jpgraph_bar.php");//建立數組$optarr，用來存放get方法傳遞過來的變數$optarr=array();//x軸用1,2,3,4,5,6...來表示$xaxisarr=array();$opttotal=$_REQUEST["opttotal"];for($i=1;$i<$opttotal;$i++){$optarr[$i-1]=$_REQUEST["opt${i}"];$xaxisarr[$i-1]=$i;}//求出最大值，是為了確定柱狀圖的最大值$optmaxcount=max($optarr);//映像大小為350x200px$graph=new Graph(350,200,"auto");//指定動作$graph->SetScale("textlin");//下面兩行是為了設定樣式的，false與true有不同的樣式$graph->SetBox(false);$graph->ygrid->SetFill(false);//y軸的4個值，分別為子選項最大得票數的0，1/3，2/3，1$graph->yaxis->SetTickPositions(array(0,$optmaxcount/3,$optmaxcount*2/3,$optmaxcount));//下三行意思是x軸的柱子長度是$optarr的數組的第0項，第1項……$b1plot = new BarPlot($optarr);$gbplot = new GroupBarPlot(array($b1plot));$graph->Add($gbplot);//柱子的邊線為白色$b1plot->SetColor("white");//柱子顏色分別為#aa0000，#00aa00……如果還有$b1plot->SetFillColor(array('#aa0000','#00aa00','#0000aa','#aaaa00','#aa00aa','#00aaaa','#000000','#cc0000','#00cc00','#0000cc'));//標題為中文需要如下寫$graph->title->SetFont(FF_SIMSUN,FS_BOLD);$graph->title->Set(iconv("UTF-8","gb2312","得票情況"));//指定動作$graph->xaxis->SetTickLabels($xaxisarr);$graph->Stroke();?>

4、jppie.php

這是用來畫餅狀圖的，總體來說比畫柱狀圖的jpgraph.php簡單一點，

部分的代碼原理與jpgraph.php是一樣的

<?php//畫餅狀圖的話，引入的檔案是不同的，但還是需要整個jpgraph檔案夾來支援工作include("jpgraph/jpgraph.php");include("jpgraph/jpgraph_pie.php");//建立數組存放get方法傳過來的資料$optarr=array();$opttotal=$_REQUEST["opttotal"];for($i=1;$i<$opttotal;$i++){$optarr[$i-1]=$_REQUEST["opt${i}"];}$graph = new PieGraph(350,250);$graph->title->SetFont(FF_SIMSUN,FS_BOLD);$graph->title->Set(iconv("UTF-8","gb2312","得票比率"));//不用自己計算比率，直接塞進去，就會自動計算$p1 = new PiePlot($optarr);$graph->Add($p1);$p1->SetSliceColors(array('#aa0000','#00aa00','#0000aa','#aaaa00','#aa00aa','#00aaaa','#000000','#cc0000','#00cc00','#0000cc'));//把餅狀圖放到350x250畫布中的橫向50%，縱向60%的位置$p1->SetCenter(0.5,0.6);$graph->Stroke();?>

通過上述的兩個處理步驟，在首頁面vote.php用img標籤引入這個兩個php，實質為映像的頁面就好

5、votehandel.php

這是使用者在投票頁面，選擇完一個選項之後，點確定投票的頁面

搞完最難的jpgraph，這裡就不難了，

就操作資料庫，把votechildren表中，相應的子選項，用update語句把它的得票數加1就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>處理投票</title></head><body><?php$opt=$_REQUEST["opt"];$con=mysql_connect("localhost","root","root");if(!$con){die("串連失敗！");}mysql_select_db("test",$con);mysql_query("set names utf8");mysql_query("update votechildren set count=count+1 where id=".$opt.";");mysql_close($con);?><script>alert("投票成功！");window.location.href="index.html";</script></body></html>

四、展望

自此，連同《【php】投票系統管理員部分，增加投票與刪除投票》（點擊開啟連結），整個投票系統的核心骨就完成了

需要的是避免sql注入與javascript一些空值處理還有同xajax技術來驗證是否重複等，

加上登入系統，與用server對象取走使用者ip來防止重複投票，這方面的技術可以參考我之前的《【php】登入系統與輸出瀏覽者資訊》（點擊開啟連結），來現實

【php】使用jpgraph完成投票系統的普通使用者部分