jQuery 投票 の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• jQuery 投票 へ行く。
  • 1 (2011-08-07 (日) 08:01:08)
  • 2 (2011-08-07 (日) 10:59:56)
  • 3 (2011-08-07 (日) 11:24:48)

jQuery

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
  
  
  
• 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」をテスト設置してみました。

#html{{

a href="http://program.sagasite.info/sample/youtube_voting/" target="blank">YouTube Style Rating 動作サンプル</a>
}}

ダウンロード†

youtube_voting99.rar - Created Aug 8, 2010 by Zeeshan Rasool
http://www.box.net/shared/59bua54e0d

インストール†

1. ダウンロードした「youtube_voting99.rar」を解凍して、Webサーバにアップロードする。
2. 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」というカラムがないので注意！

1. データベースの接続設定ファイル「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');
   ?>
   }}

   1. 必要に応じて、「index.php」を編集する。
   2. 更新したファイル（「dbcon.php」「index.php」）を再度アップロードする。
   3. 設置したURLに、ブラウザでアクセスしてみる。

以上で、「YouTube Style Rating」のテスト設置は完了です。

Voting system†

「Voting system」をテスト設置してみました。

#html{{

a href="http://program.sagasite.info/sample/voting_9lessons/voting.php" target="blank">Voting system 動作サンプル</a>
}}