はじめに
サイトに組み込めるようなミニアンケートを作ってみました。ちなみに現段階では完成しておりません。笑
Contents
参考サイト
まず始めに参考にさせて頂いたサイトを紹介します。
こちらのPHP DREAMさんの記事を参考に作ってみました。
注意点や宿題などが書かれており、ただコードを例示するだけでなく、学べる形になっていますね。
目標
では、次にこのアンケートシステムの目標ですが、主に「１.ウィジェットのような形でサイトに組み込みたい」「２.投票後、自分の回答を任意でTwitterに投稿できるようにしたい」「３.連続投票を防止したい」「４.質問および回答項目をブラウザ上の操作で設定できるようにしたい」といったところです。
なんとかこれらをクリアしていきたいです。
それでは、そろそろ作成のほうに移りましょう。
まずページとして作る
目標としては、ボックスのようなものをサイトに組み込みたいのですが、まずはテストとしてアンケート投票ページを作ってみましょう。
ページとしては２つ作ります。一つは、「投票ページ」もう一つは「結果ページ」
そして、データベースに票のカウントを保存していくので、データベースの構成を先に説明します。データベースの構成はこんな感じ。
| フィールド名 | 種別 | 備考 |
|---|---|---|
| id | int | データのid |
| question | varchar | 質問の文言 |
| num | int | 回答の選択肢の数 |
| sum | int | 総票数 |
| counter01 | int | 選択肢１の票数 |
| counter02 | int | 選択肢２の票数 |
| counter03 | int | 選択肢３の票数 |
| counter04 | int | 選択肢４の票数 |
| counter05 | int | 選択肢５の票数 |
| answer01 | varchar | 選択肢１の文言 |
| answer02 | varchar | 選択肢２の文言 |
| answer03 | varchar | 選択肢３の文言 |
| answer04 | varchar | 選択肢４の文言 |
| answer05 | varchar | 選択肢５の文言 |
counterとanswerが5個ずつなのは何となくです。笑
いくつかの質問をデータベースに持つことを前提に考えていて、もし選択肢が3個のアンケートであれば、numに3と入れれば、counterもanswerも03までしか使わないという仕様になっています。ある程度選択肢の数に自由度を持たせたかったのでこのような形にしました。
次に、投票ページのコードです。
// enquete.php
<?php
// データベース接続
// サーバー
$sv = 'your server';
// データベース名
$db = 'your db';
// ユーザー名
$uid = 'your username';
// パスワード
$pwd = 'your password';
$conn = mysql_connect($sv,$uid,$pwd) or die("connection failed\n");
mysql_select_db($db, $conn) or die("connection failed\n");
mysql_set_charset('utf8', $conn);
// idはひとまず1で..
$strsql = "SELECT * FROM `enquete_tbl` WHERE id = 1";
$res = mysql_query($strsql, $conn);
$row = mysql_fetch_array($res);
$question = $row["question"];
// 選択肢の数”num”の数だけラジオボタンを生成
for ($i=1; $i <= $row["num"]; $i++) {
$select .= '<div><label><input type="radio" value="'.$i.'" id="mini_enq_ans_'.$i.'" name="type">'.htmlspecialchars($row["answer0{$i}"], ENT_QUOTES, "UTF-8").'</label></div>';
}
mysql_close();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>アンケートテスト</title>
</head>
<body>
<p><?php echo htmlspecialchars($question, ENT_QUOTES, "UTF-8"); ?></p>
<form method="POST" action="enqres.php">
// 生成したラジオボタンを出力
<?php echo $select; ?>
<input type="submit" value="投票">
</form>
</body>
</html>
次に投票後の結果ページです。ここで結果をグラフで表示するので、グラフ用に小さい四角の画像を用意しておきます。（ここではgraph.jpgとしています。）
// enqres.php
<?php
// enquete.phpからポストされてきた値を代入
$posttype = $_POST['type'];
// データベース接続
// サーバー
$sv = 'your server';
// データベース名
$db = 'your db';
// ユーザー名
$uid = 'your username';
// パスワード
$pwd = 'your password';
$conn = mysql_connect($sv,$uid,$pwd) or die("connection failed\n");
mysql_select_db($db, $conn) or die("connection failed\n");
mysql_set_charset('utf8', $conn);
$strsql = "SELECT * FROM `enquete_tbl` WHERE id = 1";
$res = mysql_query($strsql, $conn);
$row = mysql_fetch_array($res);
$num = $row["num"]; //ラジオボタンの数
// ラジオボタンの値が正しいかのフラグ
$flag = false;
// このfor文はなんか違和感。笑
for ($i=1; $i <= $num; $i++) {
if ($posttype == $i) {
$sum = $row["sum"];
// ラジオボタンのどれかの値が渡されたらフラグをtrueに
$flag = true;
$ans = $row["answer0{$i}"];
$counter = $row["counter0{$i}"];
// 総票数と選ばれたボタンの値を一つ増やす
$sum = $sum + 1;
$counter = $counter + 1;
}
}
// 総票数sumと投票された選択肢の投票数counter0xの一つ増えた値を更新
$posttype = mysql_escape_string($posttype);
$strsql = "UPDATE `enquete_tbl` SET counter0".$posttype." = ".$counter.", sum = ".$sum." WHERE id = 1";
$res = mysql_query($strsql, $conn);
// 更新後のデータを取得
$strsql = "SELECT * FROM `enquete_tbl` WHERE id = 1";
$res = mysql_query($strsql, $conn);
$row = mysql_fetch_array($res);
// この辺りはほとんど参考サイトのままです
$graph_length = 0;
for ($i=1; $i <= $num; $i++) {
//小数点以下を長くしないように工夫
$percentage = round(($row["counter0{$i}"]*100/$row["sum"])*10)/10;
//小数点をカット
$graph_length = (int)($percentage * 2);
// グラフの描写とパーセンテージ・票数の出力
$graph[$i] = "<img src=\"enq_img/graph.jpg\" width=\"".htmlspecialchars($graph_length,ENT_QUOTES,"UTF-8")."\" height=\"10\"> ".htmlspecialchars($percentage,ENT_QUOTES,"UTF-8")."% ".htmlspecialchars($row["counter0{$i}"],ENT_QUOTES,"UTF-8")."票";
$graph_html .= '<p><span style="width:10em;display:inline-block;">'.htmlspecialchars($row["answer0{$i}"],ENT_QUOTES,"UTF-8").'</span>'.htmlspecialchars($graph[$i],ENT_QUOTES,"UTF-8").'</p>';
}
// フラグがfalseなら、ポストされた値がおかしい
if ($flag == false) {
$graph_html = "<p>Error...</p><p>回答を選択できていない可能性があります。</p>";
}
mysql_close();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>現在の投票状況</title>
</head>
<body>
<p>あなたの回答：<?php echo htmlspecialchars($ans,ENT_QUOTES,"UTF-8"); ?></p>
<hr>
<div>
<?php echo $graph_html; ?>
</div>
</body>
</html>
こういった形で一応動くと思います。もちろんデータベースに値を入れておかないとですが。
ということで、今回は一応ここまでとして、次回はもう少し進めていきます。
1 Pingback