jQuery 投票 の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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 (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/Voting System using jQuery, Ajax and PHP. - 99Points (2010-07-08)

「YouTube Style Rating」をテスト設置してみました。

YouTube Style Rating 動作サンプル

ダウンロード†

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」というカラムがないので注意！

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

4. 必要に応じて、「index.php」を編集する。
5. 更新したファイル（「dbcon.php」「index.php」）を再度アップロードする。
6. 設置した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

インストール†

1. ダウンロードした「voting.zip」を解凍して、Webサーバにアップロードする。
2. MySQLに「Voting system」用のテーブルを作る。
   Messages Table :

   #code(sql){{
   CREATE TABLE messages(
   mes_id INT PRIMARY KEY AUTO_INCREMENT,
   msg TEXT,
   up INT,
   down INT);
   );
   }}
   Voting_IP Table : Storing IP address

   #code(sql){{
   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));
   }}
   ※テーブル作成のSQL文は、テーブル名[messages]が小文字で始まっているので注意！
   ＝PHPスクリプトの中で、テーブル名の指定が間違えていて、バグになっていました。（下記で修正内容を説明します。）

3. データベースの接続設定ファイル「config.php」を編集する。

   #code(php){{
   <?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");
   ?>
   }}

4. 必要に応じて、「voting.php」を編集する。
5. 更新したファイル（「config.php」「voting.php」）を再度アップロードする。
6. 設置したURL（「～/voting.php」）に、ブラウザでアクセスしてみる。

以上で、「Voting system」のテスト設置は完了です。

バグ修正†

2011年8月7日（日）にダウンロードした「voting.zip」（2009年8月3日版）には、一部バグがありました。
＝「down_vote.php」「up_vote.php」で指定されているテーブル名を修正。

down_vote.php の修正

• 「Messages」→「messages」（先頭を小文字）に修正

#code(php){{
<?php
include("config.php");

$ip = $_SERVER['REMOTE_ADDR'];

if ($_POST['id']) {
$id = $_POST['id'];
$id = mysql_escape_String($id);

$ip_sql = mysql_query("select ip_add from Voting_IP where mes_id_fk='$id' and ip_add='$ip'");
$count = mysql_num_rows($ip_sql);

if ($count == 0) {
// $sql = "update Messages set down=down+1 where mes_id='$id'";
$sql = "update messages set down=down+1 where mes_id='$id'";
mysql_query($sql);

$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query($sql_in);
} else {

}

// $result = mysql_query("select down from Messages where mes_id='$id'");
$result = mysql_query("select down from messages where mes_id='$id'");
$row = mysql_fetch_array($result);
$down_value = $row['down'];
echo $down_value;
}
?>
}}

up_vote.php の修正

• 「Messages」→「messages」（先頭を小文字）に修正
• 「Messages」→「Voting_IP」に修正（テーブル名の指定が間違っていた）

#code(php){{
<?php
include("config.php");

$ip = $_SERVER['REMOTE_ADDR'];

if ($_POST['id']) {
$id = $_POST['id'];
$id = mysql_escape_String($id);

$ip_sql = mysql_query("select ip_add from Voting_IP where mes_id_fk='$id' and ip_add='$ip'");
$count = mysql_num_rows($ip_sql);

if ($count == 0) {
// $sql = "update Messages set up=up+1 where mes_id='$id'";
$sql = "update messages set up=up+1 where mes_id='$id'";
mysql_query($sql);

// $sql_in = "insert into Messages (mes_id_fk,ip_add) values ('$id','$ip')";
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) values ('$id','$ip')";
mysql_query($sql_in);
} else {

}

// $result = mysql_query("select up from Messages where mes_id='$id'");
$result = mysql_query("select up from messages where mes_id='$id'");
$row = mysql_fetch_array($result);
$up_value = $row['up'];
echo $up_value;
}
?>
}}

まとめ†

ポイントは、jQueryでAJAX通信をしている部分の処理だな。
ここをよく見れば、改造の仕方が分かると。

作者の皆さん、どうもありがとうございます。
大変参考になりました！（・∀・）