[php] jpgraph を使用して投票システムの一般ユーザー部分を完成させます
この記事は前回の記事「[php] 投票システム管理者部分、投票の追加と削除」の続きです (クリックするとリンクが開きます) )
最後の 3 つのリンクは管理者部分のうちの 2 つだけを完了しました
次に、最後の一般ユーザー部分を完了します。これもログインしませんシステムへの追加はご自身で行ってください
1. 基本目標
投票システムの一般ユーザー部分は次のとおりです以下の図:
まず既存の投票リストをユーザーに表示し、クリックして投票の 1 つに入力すると、投票できるようになります
投票はすべて単一選択であり、複数選択に設定することもできます。
「投票」ボタンをクリックしてください。そうであれば、投票は成功します。そうでない場合は、何も起こりません
投票のいずれかの項目が 1 より大きい場合、棒グラフと円グラフの 2 つの統計グラフが表示されます。 、有権者の数と割合を示します
2. 基本的な考え方
Jpgraph を使用して棒グラフと円グラフを作成します
Jpgraph をダウンロードしてインストールします。他のプラグインと同様に、必要なものをダウンロード ディレクトリにドラッグするだけです
まず、Jpgraph の公式 Web サイトを開きます(クリックしてリンクを開きます)、[ダウンロード] -> [Jpgraph をダウンロード] を選択します
次に、最初のものを選択して、全員用のコピーもアップロードしました (クリックしてください)。リンクを開いてください)
これはzipやrarで終わるものではありませんが、最新のwinrarで開いて解凍できます。サイトディレクトリ内の src を jpgraph フォルダにリネームします。 詳細は、以前の記事「[php] 投票システム管理者」の「投票の追加と削除」のディレクトリ構造を参照してください (クリックするとリンクが開きます)。 >
3. 制作プロセス
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><?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>3. jpgraph.php
このページはヒストグラムを描画するために使用され、img タグを使用して vote.php によって参照されます。詳細については、次のコードを参照してください:4. jppie.php
<?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();?>部分のコード原理は同じです。
<?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();?>
5. votehandel.php
これは、ユーザーがオプションを選択した後にクリックして投票を確認する投票ページです。 🎜>最も難しい jpgraph を終了したら、ここでは難しくありません。
データベースで、voteschildren テーブルに対応するサブオプションを追加し、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] 投票システム管理者部分、投票を追加」と合わせて投票の削除」 (クリックしてリンクを開きます)、投票システム全体のコアが完成しました
にログイン システムを加え、サーバー オブジェクトを使用してユーザーの IP を取得し、投票の繰り返しを防ぐこの技術は、以前の「[php] ログイン」を参照してください。システムおよび出力ビューア情報」 (クリックしてリンクを開きます) を確認して
を実現します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
