PHP：投票機能（VOTE）を作成する方法【AJAX有り版と無し版２つ】
dab1nmslvvntp
PHPで投票機能を作りました。最近色々なサイトで見かけるし、Webサービス作るならいれるのはありかなと思うので、コードと作り方を公開します。もちろんPHP7で動きます。尚、今回は２パターン作成しました。
- PHPのGETを使った投票機能
- PHPとjQueryのAJAXを使った投票機能
デモ
» PHPのGETを使った投票機能
» PHPとjQueryのAJAXを使った投票機能
コードのDL（github）
» PHPのGETを使った投票機能
» PHPとjQueryのAJAXを使った投票機能
デモをみると分かるかと思いますが、かなりシンプルな作りです。CSSとかは書いていないので、スタイリングはみなさんにお任せします。
まずは、PHPのGETを使った投票機能から見ていきましょう。
expertbeacon
PHPをGETを使った投票機能の作り方から見ていきましょう。ぶっちゃけそこまで実用的ではないですが、基礎学習は大切なので書いておきます。「おれはAJAXを使いたいんだ〜」って方は、前半を飛ばしてPHPとjQueryのAJAXを使った投票機能をどうぞ。
データベースの初期セットアップ
DB名は『vote_system』としています。
vote_systemで、下記クエリを行います。
CREATE TABLE `products` ( `product_id` int(11) NOT NULL AUTO_INCREMENT, `product_name` varchar(64) NOT NULL DEFAULT '', `product_votes` int(11) NOT NULL, PRIMARY KEY (`product_id`) ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
その後、テスト用データを入れます。
下記を実行します。
INSERT INTO `products` (`product_id`, `product_name`, `product_votes`) VALUES (1, '商品A', 75), (2, '商品B', 10), (3, '商品C', 7);
完成形のHTMLを作成する
新規作成ファイル：index.php
HTMLの骨組みの部分から作ります。下記の形となります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP：投票機能を作成する方法</title>
<link rel="stylesheet" href="">
</head>
<body>
<a href="?vote=up&id=1">
商品A：75
</a>
<br />
<a href="?vote=up&id=1">
商品A：75
</a>
<br />
<a href="?vote=up&id=1">
商品A：75
</a>
<br />
</body>
</html>現在の商品一覧と投票数を表示するスクリプトを作成する
編集ファイル：index.php
先ほどのHTMLと見くらべながら作っていきます。
<?php
require_once( 'core/init.php' );
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP：投票機能を作成する方法</title>
<link rel="stylesheet" href="">
</head>
<body>
<?php
// 現在の投票数を取得する
$query = "SELECT product_id, product_name, product_votes FROM products";
$result = $mysqli->query($query);
while ( $row = $result->fetch_assoc() ) { ?>
<!-- <a href="?vote=up&id=1">商品A</a> -->
<a href="?vote=up&id=<?php echo $row["product_id"] ?>">
<!-- 商品名を表示 -->
<?php echo $row["product_name"]; ?>：
<!-- 商品の投票数を表示 -->
<?php echo $row["product_votes"]; ?>
</a>
<br />
<?php } // End of While ?>
</body>
</html>core/init.phpでは、DB接続のスクリプトを記載しています
<?php
$host = "localhost";
$username = "root";
$password = "root";
$dbname = "vote_system";
$mysqli = new mysqli($host, $username, $password, $dbname);
$mysqli->set_charset("utf8");
if ($mysqli->connect_error) {
error_log($mysqli->connect_error);
exit;
}□この時点で、ちょっと分かりづらいですが、下記の感じになります。
商品がクリックされたときに、投票数をアップデートするスクリプトを作成する
編集ファイル：index.php
index.phpのどこでもいいので下記を記載してください。
if ($_GET) {
// 商品がクリックされたときに、該当商品の投票をアップデートする
update_vote($mysqli);
}update_voteのfunctionを作成します
新規作成ファイル：functions/general.php
フォルダ構造はなんでもOKですが、functionフォルダをつくってその内部にスクリプトファイルを置いています。
function update_vote($mysqli){
// GETが実行されたときに下記を実行
if ( isset($_GET['vote'], $_GET['id']) ) {
$query = "UPDATE products SET product_votes = product_votes + 1 WHERE product_id = $product_id";
$mysqli->query($query);
}
}その後、index.phpの先頭行で読み込むことを忘れないようにしてください。
<?php
require_once( 'core/init.php' );
require_once( 'functions/general.php' );
?>以上でとりあえず動きますが、
同じ人が複数回投票できないように、クッキーで判別する構成にしていきます。
投票済と投票済ではないユーザーをクッキーで判別するスクリプトを作成する
まずはindex.phpの最初に下記を記載。
<?php
ob_start();
require_once( 'core/init.php' );
require_once( 'functions/general.php' );
?>その後、general.phpを少し作り変えます。
<?php
function update_vote($mysqli){
$product_id = $_GET['id'];
// クッキーで投票済かどうかを判断する
if ( !isset($_COOKIE['voted_'.$product_id]) ) {
// GETが実行されたときに下記を実行
if ( isset($_GET['vote'], $_GET['id']) ) {
$query = "UPDATE products SET product_votes = product_votes + 1 WHERE product_id = $product_id";
$mysqli->query($query);
// クッキーの付与
// 参考：http://php.net/manual/ja/function.setcookie.php#refsect1-function.setcookie-examples
setcookie("voted_".$product_id, "voted_".$product_id, time()+3600); // 有効期限は一時間です
}
} else {
// echo "投票済です";
}
}これで完成。クッキー簡単ですね。
それでは本番。PHPとjQueryのAJAXを使った投票機能を見てきましょう。
ここからが本番ですかね。最近のサイトはほぼAJAXでの実装かと思います。
データベースの初期セットアップ
DB名は『ajax』としています。
ajaxで、下記クエリを行います。
CREATE TABLE `products0` ( `id` int(20) NOT NULL AUTO_INCREMENT, `product_name` varchar(120) DEFAULT NULL, `product_vote` int(20) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
その後、テスト用データを入れます。
下記を実行します。
INSERT INTO `products` (`id`, `product_name`, `product_vote`)
VALUES
(1, '商品A', 2),
(2, '商品B', 5);完成形のHTMLを作成する
新規作成ファイル：index.hpp
下記の形となります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>投票機能の作成方法</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<p>
商品A：
<span id="num">2</span>
<button id="1" name="商品A">投票する</button>
</p>
<p>
商品B：
<span id="num">5</span>
<button id="2" name="商品B">投票する</button>
</p>
</body>
</html>現在の商品一覧と投票数を表示するスクリプトを作成する
編集ファイル：index.php
<?php
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>投票機能の作成方法</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<?php
$query = "SELECT * FROM products";
$result = $mysqli->query($query);
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
$product_name = $row['product_name'];
$product_vote = $row['product_vote'];
?>
<p>
<?php echo $product_name; ?>：
<span id="num"><?php echo $product_vote; ?></span>
<button id="<?php echo $id; ?>" name="<?php echo $product_name; ?>">投票する</button>
</p>
<?php
} // End of while
?>
</body>
</html>config.phpの中身は下記のとおり
<?php
$host = "localhost";
$username = "root";
$password = "root";
$dbname = "ajax";
$mysqli = new mysqli($host, $username, $password, $dbname);
$mysqli->set_charset("utf8");
if ($mysqli->connect_error) {
error_log($mysqli->connect_error);
exit;
}AJAXで投票数を操作するスクリプトを作成する
編集ファイル：index.php
<script type="text/javascript">
$(function() {
// buttonがクリックされたときに実行
$("button").click(function() {
// buttonのIDを取得する
var id = $(this).attr("id");
// buttonのname（商品名）を取得する
var product_name = $(this).attr("name");
// POST用のデータ準備：id=をつけないと、vote.phpの$_POST['id']で取得できない
var voteData = 'id='+ id;
// span内の投票数を書き換える
var thisButton = $(this).prev('span');
$.ajax({
type: "POST",
url: "vote.php",
data: voteData,
success: function(data) {
// 処理が成功したら、thisButton内部を書き換える
thisButton.html(data);
}
});
return false;
});
});
</script>AJAXで読み込んでいるvote.phpを作成する
新規作成ファイル：vote.php
<?php
include("config.php");
// POSTされたときに下記を実行
if( $_POST['id'] ) {
$id = $_POST['id'];
$id = $mysqli->real_escape_string($id);
// 投票数をアップデートする
$sql = "UPDATE products SET product_vote = product_vote+1 WHERE id='$id'";
$mysqli->query( $sql);
// 投票数を取得する
$result = $mysqli->query("SELECT product_vote FROM products WHERE id='$id'");
$row=$result->fetch_assoc();
$vote_value=$row['product_vote'];
echo $vote_value;
}以上でとりあえず動きますが、
同じ人が複数回投票できないように、クッキーで判別する構成にしていきます。
投票済と投票済ではないユーザーをクッキーで判別するスクリプトを作成する
まずはindex.phpの最初に下記を記載。
<?php
ob_start();
include('config.php');
?>その後、vote .phpを少し作り変えます。
<?php
include("config.php");
// POSTされたときに下記を実行
if( $_POST['id'] ) {
$id = $_POST['id'];
$id = $mysqli->real_escape_string($id);
// クッキーで投票済かどうかを判断する
if ( !isset($_COOKIE['voted_'.$id]) ) {
// クッキーを付与
setcookie("voted_".$id, "voted_".$id, time()+3600); // 有効期限は一時間です
// 投票数をアップデートする
$sql = "UPDATE products SET product_vote = product_vote+1 WHERE id='$id'";
$mysqli->query( $sql);
}
// 投票数を取得する
$result = $mysqli->query("SELECT product_vote FROM products WHERE id='$id'");
$row=$result->fetch_assoc();
$vote_value=$row['product_vote'];
echo $vote_value;
}
以上で完成です。お疲れさまです( ◜◡◝ 😉
デモ
» PHPのGETを使った投票機能
» PHPとjQueryのAJAXを使った投票機能
コードのDL（github）
» PHPのGETを使った投票機能
» PHPとjQueryのAJAXを使った投票機能
P.S：普段の僕は「Twitter」を軸に発信しています。また最近は「Webマーケ教材」の作成に注力しており、ネットで稼ぐスキルを学べます。ブログの更新通知は「メルマガ」から送っています。スパムは送りません。更新通知だけ送ります。