- 追加された行はこの色です。
- 削除された行はこの色です。
[[jQuery]]
#norelated
#contents
* jQuery 投票 [#b1eb3b9b]
- YouTubeの投票ボタン（サムズアップダウンボタン Thumbs Up/Down Button）のような、二者択一の投票ボタンを実装したい。
- ページ全体の更新はしないで、AJAXでリアルタイムに投票結果を反映させる。
Googleで「jQuery」「ajax」「thumbs」「up」「vote」などのキーワードで検索したら、サンプルコードがいくつかヒットした。
* 参考リンク [#oce111a6]
** 二者択一式 [#zc0d3b67]
[[YouTube Style Rating/Voting System using jQuery, Ajax and PHP. - 99Points>http://www.99points.info/2010/07/youtube-style-ratingvoting-system-using-jquery-ajax-and-php-ever-best-tutorial/]]
- [[YouTube Style Rating/Voting System using jQuery, Ajax and PHP. - 99Points>http://www.99points.info/2010/07/youtube-style-ratingvoting-system-using-jquery-ajax-and-php-ever-best-tutorial/]] (2010-07-08)
&ref(youtube.jpg);
~
- [[How To Make an AJAX Thumbs Up or Down Script - WebHole>http://webhole.net/2010/04/04/voting-script-with-php-and-jquery/]]
&ref(vote-up-or-down-posts.jpg);
~
- [[Voting system with jQuery, Ajax and PHP - 9LESSONS>http://www.9lessons.info/2009/08/vote-with-jquery-ajax-and-php.html]] (2009-08-03)
&ref(jquery_voting.png);
~
- [[Technabled: Reddit-style Voting With PHP, MySQL And jQuery>http://www.technabled.com/2009/02/reddit-style-voting-with-php-mysql-and.html]] (2009-02)
&ref(reddit_votes.png);
** 多選択式 [#h6ac7527]
- [[jQueryのAjax機能を使った投票システムのサンプルプログラム - phpspot>http://phpspot.org/blog/archives/2009/10/jqueryajax_2.html]] (2009-10-19)
- 元ネタ [[AJAX User Poll Using jQuery and PHP>http://webdeveloperplus.com/php/ajax-user-poll-using-jquery-and-php/]] (2009-10-15)
&ref(ajax_user_poll.png);
* 動作サンプル [#ef2d460a]
** YouTube Style Rating [#q11d53ee]
「YouTube Style Rating」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/youtube_voting/" target="blank">YouTube Style Rating 動作サンプル</a>
}}
** 多選択式 [#h6ac7527]
*** ダウンロード [#q78e7620]
youtube_voting99.rar - Created Aug 8, 2010 by Zeeshan Rasool
http://www.box.net/shared/59bua54e0d
*** インストール [#z6a6dcce]
+ ダウンロードした「youtube_voting99.rar」を解凍して、Webサーバにアップロードする。
+ MySQLに「YouTube Style Rating」用のテーブルを作る。
#code(sql){{
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);
}}
※ダウンロードしたアーカイブの中に入っていた「youtube_ratings.sql」は、プログラムで使われるカラムが入っていなくて、使えないものだった。
＝「liked」「dislike」というカラムがないので注意！
+ データベースの接続設定ファイル「dbcon.php」を編集する。
#code(php){{
<?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 [#jcfb6603]
「Voting system」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/voting_9lessons/voting.php" target="blank">Voting system 動作サンプル</a>
}}
