WEBデザインテクニック|KLUTCHE

Ajax を使ってリアルタイムに反映する簡易投票システムを設置する

Facebook の「いいね」ボタンのように、ページ遷移無しで、ON・OFF できる投票ボタンの設置と、投票数の表示方法です。

・Ajax を使います
・jQuery と PHP を使います
・データベースは使わずテキストファイルに読み書きします

デモ

デモページ

ハートマークをクリックすると投票数が1プラスされ、もう一度ハートをクリックすると、投票数が元に戻ります。
プラスされた数字は再度ページを開いても反映されたままです。

Ajax って難しそう

こんな風に、ページ遷移なしにデータをやりとりすることを「非同期通信」と言います。
非同期通信でやり取りしたデータを元に Javascript で動的にページの一部を書き換えるのが Ajax です。

きっとすげえ難しいコード書くんだろうな・・・
そんな風に思っていました。

が、意外と簡単なんです。
助けてくれるのは jQuery!

Javascript

今回使う Javascript はこれだけです。

$(function() {
	$('.btn_vote').click(function() {
		$(this).toggleClass('on');
		var id = $(this).attr('id');
		$(this).hasClass('on') ? Vote(id, 'plus') : Vote(id, 'minus');
	});
});
function Vote(id, plus) {
	cls = $('.' + id);
	cls_num = Number(cls.html());
	count = plus == 'minus' ? cls_num - 1 : cls_num + 1;
	$.get('vote.php', {'file': id, 'count': count}, function() {
		cls.html(count)
	});
}

これだけで、ボタンの ON・OFF を切り替えたり、数字を足したり引いたり、PHP にデータを渡したりしています。

HTML

ボタンと投票数の表示部分はこんな感じです。

<p class="ico_heart vote_01"><?= get_count('vote_01') ?></p>
<p class="btn_vote" id="vote_01"></p>

.btn_vote が投票ボタンです。
id に vote_01 が設定されています。
この id と同じ Class が付いた箇所に投票数が表示されます。
あと、id は投票数を保存するテキストデータのファイル名にも使います。

php

vote.php

Javascript から受け取ったデータを元に、テキストファイルに数字を書き込む役割です。
ボタンを押すたびに裏側でゴリゴリとファイルを書き換えてます。

$file	= $_GET['file'];
$count	= $_GET['count'];
$filename = 'data/'.$file.'.dat';
$fp = @fopen($filename, 'w');
flock($fp, LOCK_EX);
fputs($fp, $count);
flock($fp, LOCK_UN);
fclose($fp);

index.php

メインの表示ファイルにも、投票数を取得する処理を書きます。
最初にページを開いた時だけ、データファイルから数字を呼び出します。
その後のボタン操作による数字の変化は、Ajax による擬似的な表面操作です。

function get_count($file) {
	$filename = 'data/'.$file.'.dat';
	$fp = @fopen($filename, 'r');
	if ($fp) {
		$vote = fgets($fp, 9182);
	} else {
		$vote = 0;
	}
	return $vote;
}

データファイル

投票数を格納しておくテキストファイルは、
data/[id 名].dat
です。
1投票箇所につき、1つずつのテキストファイルを使います。
ファイルが存在しない場合は PHP により生成されます。

ファイル一式

全体的なファイル一式は、Github に置いてます。

ajaxVote

あくまで簡易的なものですが、投票システムが欲しい時は、Ajax の最初の一歩にしてみてください。

“Ajax を使ってリアルタイムに反映する簡易投票システムを設置する” への3件のフィードバック

  1. MW より:

    管理人様

    非常に参考になりました!ありがとうございます。

    挙動について1点質問があります。

    最初のカウントが「0」の状態でボタンを押すと「1」に上がり、本来、その状態でボタンを押すとカウントが「0」に下がるはずのところが、「1」のままになってしまうのですが、こちら解決方法はありますでしょうか?

  2. より:

    質問させていただきます。
    同じ項目に24時間(理想は1週間程度)は再投票できないように変更したいのですが、分からず困っています。
    そう言ったサポートはされてませんでしょうか?

へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です