jQuery

jQuery 投票

Googleで「jQuery」「ajax」「thumbs」「up」「vote」などのキーワードで検索したら、サンプルコードがいくつかヒットした。

参考リンク

二者択一式

多選択式

動作サンプル

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>
}}

ダウンロード

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");
    ?>
    }}

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

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

バグ修正

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

#html{{

h5>down_vote.php の修正</h5>
}}

  • 「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'";
		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'");
	$row = mysql_fetch_array($result);
	$down_value = $row['down'];
	echo $down_value;

}
?>
}}

#html{{

h5>up_vote.php の修正</h5>
}}

  • 「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'";
		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 up from messages where mes_id='$id'");
	$row = mysql_fetch_array($result);
	$up_value = $row['up'];
	echo $up_value;

}
?>
}}

まとめ

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

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


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS