jQuery 投票 †
- YouTubeの投票ボタン(サムズアップダウンボタン Thumbs Up/Down Button)のような、二者択一の投票ボタンを実装したい。
- ページ全体の更新はしないで、AJAXでリアルタイムに投票結果を反映させる。
参考リンク †
Googleで「jQuery」「ajax」「thumbs」「up」「vote」などのキーワードで検索したら、サンプルコードがいくつかヒットした。
二者択一式 †
- YouTube Style Rating/Voting System using jQuery, Ajax and PHP. - 99Points (2010-07-08)
- How To Make an AJAX Thumbs Up or Down Script - WebHole (2010-04-04)
- Voting system with jQuery, Ajax and PHP - 9LESSONS (2009-08-03)
- Technabled: Reddit-style Voting With PHP, MySQL And jQuery (2009-02)
多選択式 †
- jQueryのAjax機能を使った投票システムのサンプルプログラム - phpspot (2009-10-19)
- 元ネタ AJAX User Poll Using jQuery and PHP (2009-10-15)
動作サンプル †
YouTube Style Rating †
「YouTube Style Rating」をテスト設置してみました。
YouTube Style Rating 動作サンプルダウンロード †
youtube_voting99.rar - Created Aug 8, 2010 by Zeeshan Rasool
http://www.box.net/shared/59bua54e0d
インストール †
- ダウンロードした「youtube_voting99.rar」を解凍して、Webサーバにアップロードする。
- MySQLに「YouTube Style Rating」用のテーブルを作る。
※ダウンロードしたアーカイブの中に入っていた「youtube_ratings.sql」は、プログラムで使われるカラムが入っていなくて、使えないものだった。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
- | | | ! - | | | | !
CREATE TABLE IF NOT EXISTS `youtube_ip` ( `id` int(11) NOT NULL AUTO_INCREMENT, `userip` varchar(100) NOT NULL, PRIMARY KEY (`id`) ); CREATE TABLE IF NOT EXISTS `youtube_rating` ( `id` int(11) NOT NULL AUTO_INCREMENT, `liked` int(11) NOT NULL, `dislike` int(11) NOT NULL, PRIMARY KEY (`id`) ); INSERT INTO `youtube_rating` (`id`, `liked`, `dislike`) VALUES (1, 0, 0);
=「liked」「dislike」というカラムがないので注意! - データベースの接続設定ファイル「dbcon.php」を編集する。
1 2 3
<?php $link = mysql_connect('localhost', 'mysql_username', 'mysql_password') or die('error'); @mysql_select_db('mysql_database',$link) or die('error'); ?>
- 必要に応じて、「index.php」を編集する。
- 更新したファイル(「dbcon.php」「index.php」)を再度アップロードする。
- 設置したURLに、ブラウザでアクセスしてみる。
以上で、「YouTube Style Rating」のテスト設置は完了です。
Voting system †
- Voting system with jQuery, Ajax and PHP - 9LESSONS (2009-08-03)
「Voting system」をテスト設置してみました。
Voting system 動作サンプルダウンロード †
voting.zip - Created Aug 3, 2009 by Srinivas Tamada
http://www.box.net/shared/k79xvv3x42
インストール †
- ダウンロードした「voting.zip」を解凍して、Webサーバにアップロードする。
- MySQLに「Voting system」用のテーブルを作る。
Messages Table :Voting_IP Table : Storing IP address1 2 3 4 5 6
- | | | ! !
CREATE TABLE messages( mes_id INT PRIMARY KEY AUTO_INCREMENT, msg TEXT, up INT, down INT); );
※テーブル作成のSQL文は、テーブル名[messages]が小文字で始まっているので注意!1 2 3 4 5 6
- | | | | !
CREATE TABLE Voting_IP( ip_id INT PRIMARY KEY AUTO_INCREMENT, mes_id_fk INT, ip_add VARCHAR(40), FOREIGN KEY(mes_id_fk) REFERENCES messages(mes_id));
=PHPスクリプトの中で、テーブル名の指定が間違えていて、バグになっていました。(下記で修正内容を説明します。) - データベースの接続設定ファイル「config.php」を編集する。
1 2 3 4 5 6 7 8
<?php $mysql_hostname = "localhost"; $mysql_user = "mysql_username"; $mysql_password = "mysql_password"; $mysql_database = "mysql_database"; $prefix = ""; $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database"); mysql_select_db($mysql_database, $bd) or die("Could not select database"); ?>
- 必要に応じて、「voting.php」を編集する。
- 更新したファイル(「config.php」「voting.php」)を再度アップロードする。
- 設置したURL(「~/voting.php」)に、ブラウザでアクセスしてみる。
以上で、「Voting system」のテスト設置は完了です。
バグ修正 †
2011年8月7日(日)にダウンロードした「voting.zip」(2009年8月3日版)には、一部バグがありました。
=「down_vote.php」「up_vote.php」で指定されているテーブル名を修正。
down_vote.php の修正
- 「Messages」→「messages」(先頭を小文字)に修正
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
up_vote.php の修正
- 「Messages」→「messages」(先頭を小文字)に修正
- 「Messages」→「Voting_IP」に修正(テーブル名の指定が間違っていた)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
まとめ †
ポイントは、jQueryでAJAX通信をしている部分の処理だな。
ここをよく見れば、改造の仕方が分かると。
作者の皆さん、どうもありがとうございます。
大変参考になりました!(・∀・)
添付ファイル: vote-up-or-down-posts.jpg 770件 [詳細] ajax_user_poll.png 784件 [詳細] reddit_votes.png 733件 [詳細] jquery_voting.png 703件 [詳細] youtube.jpg 917件 [詳細]