Heim > Backend-Entwicklung > PHP-Tutorial > 【php】使用jpgraph完成投票系统的普普通通用户部分

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

WBOY
Freigeben: 2016-06-13 12:12:34
Original
986 Leute haben es durchsucht

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

本文接上一篇《【php】投票系统管理员部分,增加投票与删除投票》(点击打开链接)

上次三个链接只完成了管理员部分的两个


现在完成最后的一个普通用户这一个,同样是没有登录系统部分,请自行补充


一、基本目标

投票系统的普通用户部分如下图所示:


首先显示现存的投票列表给用户,之后,点击进入其中一个投票,能够投票

投票皆为单选,不设定为多选,当然,你设置为多选也行,反正每一页都是一个表单,

点击“投票”按钮则,询问用户是否确定,是则投票成功哦,否则不发生任何事

当投票的任何一项都大于1时,则弹出两个统计图,一个柱状图与饼状图,表示投票人数与比例



二、基本思想

柱状图与拼饼图用Jpgraph来做

Jpgraph的下载与安装与其他插件类似,把需要的东西拖到下载目录就可以了

首先打开Jpgraph的官网(点击打开链接)选择Download->Download Jpgraph


之后选择第一个就可以,我也为大家上传了一份(点击打开链接)


这东西虽然不是zip或者rar来结尾,但用最新的winrar能够打开并解压,解压之后把里面的src放到站点目录,并改名为jpgraph文件夹就可以详细可以看上一篇《【php】投票系统管理员部分,增加投票与删除投票》(点击打开链接)的目录结构



三、制作过程

1、voteindex.php

这是一个显示所有投票列表的页面,比删除投票列表页面delvote.php更加简单,没有删除按钮

注意给查询出来的每一个超级链接,附上?get后缀,通过get方法,给vote.php传递用户到底打开那一个投票的参数

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>投票</title><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=&#39;vote.php?id=${row["id"]}&#39;>${row["title"]}<br>";	$i++;}mysql_close($con);?><p><a href="index.html">返回</a></p>
Nach dem Login kopieren

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"];}?><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title><?phpecho "${ptitle}";?></title><!--以上为仅仅是为了查出voteparent表中投票标题title与投票描述ptext-->
Nach dem Login kopieren

${ptitle}

${ptext}

";$result=mysql_query("select * from votechildren where parentid=".$pid.";");$i=1;$countstr="";$optarr=array();while($row=mysql_fetch_array($result)){ echo "
选择${i}:${row["text"]},票数:${row["count"]}
"; $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 "【php】使用jpgraph完成投票系统的普普通通用户部分"; echo "【php】使用jpgraph完成投票系统的普普通通用户部分";}?>

返回<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();?>
Nach dem Login kopieren

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();?>
Nach dem Login kopieren

通过上述的两个处理步骤,在主页面vote.php用img标签引入这个两个php,实质为图像的页面就好


5、votehandel.php

这是用户在投票页面,选择完一个选项之后,点确定投票的页面

搞完最难的jpgraph,这里就不难了,

就操作数据库,把votechildren表中,相应的子选项,用update语句把它的得票数加1就可以了

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>处理投票</title><?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>
Nach dem Login kopieren


四、展望

自此,连同《【php】投票系统管理员部分,增加投票与删除投票》(点击打开链接),整个投票系统的核心骨就完成了

需要的是避免sql注入与javascript一些空值处理还有同xajax技术来验证是否重复等,

加上登录系统,与用server对象取走用户ip来防止重复投票,这方面的技术可以参考我之前的《【php】登录系统与输出浏览者信息》(点击打开链接),来现实


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage