Ajax を使ってリアルタイムに反映する簡易投票システムを設置する
- 2016年04月26日
- Javascript, プログラミング
- Ajax, jQuery, ダム
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 に置いてます。
あくまで簡易的なものですが、投票システムが欲しい時は、Ajax の最初の一歩にしてみてください。
管理人様
非常に参考になりました!ありがとうございます。
挙動について1点質問があります。
最初のカウントが「0」の状態でボタンを押すと「1」に上がり、本来、その状態でボタンを押すとカウントが「0」に下がるはずのところが、「1」のままになってしまうのですが、こちら解決方法はありますでしょうか?
質問させていただきます。
同じ項目に24時間(理想は1週間程度)は再投票できないように変更したいのですが、分からず困っています。
そう言ったサポートはされてませんでしょうか?
これ、僕も詰まっています。。。
0になれば最高なんですけどね。。。