本文接上一篇《【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><?php echo "${ptitle}"; ?></title> </head> <!--以上为仅仅是为了查出voteparent表中投票标题title与投票描述ptext--> <body> <form action="votehandle.php" method="get" onsubmit="return check()"> <?php echo "<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】登录系统与输出浏览者信息》(点击打开链接),来现实