jQuery 投票
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[jQuery]]
#norelated
* jQuery 投票 [#b1eb3b9b]
- YouTubeの投票ボタン（サムズアップダウンボタン Thumbs Up...
- ページ全体の更新はしないで、AJAXでリアルタイムに投票結...
#contents
* 参考リンク [#oce111a6]
Googleで「jQuery」「ajax」「thumbs」「up」「vote」などの...
** 二者択一式 [#zc0d3b67]
- [[YouTube Style Rating/Voting System using jQuery, Ajax...
&ref(youtube.jpg);
~
- [[How To Make an AJAX Thumbs Up or Down Script - WebHol...
&ref(vote-up-or-down-posts.jpg);
~
- [[Voting system with jQuery, Ajax and PHP - 9LESSONS>ht...
&ref(jquery_voting.png);
~
- [[Technabled: Reddit-style Voting With PHP, MySQL And j...
&ref(reddit_votes.png);
** 多選択式 [#h6ac7527]
- [[jQueryのAjax機能を使った投票システムのサンプルプログ...
- 元ネタ [[AJAX User Poll Using jQuery and PHP>http://web...
&ref(ajax_user_poll.png);
* 動作サンプル [#ef2d460a]
** YouTube Style Rating [#q11d53ee]
- [[YouTube Style Rating/Voting System using jQuery, Ajax...
「YouTube Style Rating」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/youtube_voti...
}}
*** ダウンロード [#q78e7620]
youtube_voting99.rar - Created Aug 8, 2010 by Zeeshan Ras...
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`) V...
(1, 0, 0);
}}
※ダウンロードしたアーカイブの中に入っていた「youtube_rati...
＝「liked」「dislike」というカラムがないので注意！
+ データベースの接続設定ファイル「dbcon.php」を編集する。
#code(php){{
<?php
$link = mysql_connect('localhost', 'mysql_username', 'mys...
@mysql_select_db('mysql_database',$link) or die('error');
?>
}}
+ 必要に応じて、「index.php」を編集する。
+ 更新したファイル（「dbcon.php」「index.php」）を再度ア...
+ 設置したURLに、ブラウザでアクセスしてみる。
以上で、「YouTube Style Rating」のテスト設置は完了です。
** Voting system [#jcfb6603]
- [[Voting system with jQuery, Ajax and PHP - 9LESSONS>ht...
「Voting system」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/voting_9less...
}}
*** ダウンロード [#k62f1462]
voting.zip - Created Aug 3, 2009 by Srinivas Tamada
http://www.box.net/shared/k79xvv3x42
*** インストール [#fe971953]
+ ダウンロードした「voting.zip」を解凍して、Webサーバにア...
+ 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スクリプトの中で、テーブル名の指定が間違えていて、バ...
+ データベースの接続設定ファイル「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_...
mysql_select_db($mysql_database, $bd) or die("Could not s...
?>
}}
+ 必要に応じて、「voting.php」を編集する。
+ 更新したファイル（「config.php」「voting.php」）を再度...
+ 設置したURL（「～/voting.php」）に、ブラウザでアクセス...
以上で、「Voting system」のテスト設置は完了です。
*** バグ修正 [#fff5f275]
2011年8月7日（日）にダウンロードした「voting.zip」（2009...
＝「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 wher...
$count = mysql_num_rows($ip_sql);
if ($count == 0) {
// $sql = "update Messages set down=down+1 where mes_id...
$sql = "update messages set down=down+1 where mes_id='...
mysql_query($sql);
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) val...
mysql_query($sql_in);
} else {
}
// $result = mysql_query("select down from Messages where...
$result = mysql_query("select down from messages where m...
$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 wher...
$count = mysql_num_rows($ip_sql);
if ($count == 0) {
// $sql = "update Messages set up=up+1 where mes_id='$i...
$sql = "update messages set up=up+1 where mes_id='$id'";
mysql_query($sql);
// $sql_in = "insert into Messages (mes_id_fk,ip_add) va...
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) val...
mysql_query($sql_in);
} else {
}
// $result = mysql_query("select up from Messages where m...
$result = mysql_query("select up from messages where mes...
$row = mysql_fetch_array($result);
$up_value = $row['up'];
echo $up_value;
}
?>
}}
* まとめ [#d53134ba]
ポイントは、jQueryでAJAX通信をしている部分の処理だな。
ここをよく見れば、改造の仕方が分かると。
作者の皆さん、どうもありがとうございます。
大変参考になりました！（・∀・）
終了行:
[[jQuery]]
#norelated
* jQuery 投票 [#b1eb3b9b]
- YouTubeの投票ボタン（サムズアップダウンボタン Thumbs Up...
- ページ全体の更新はしないで、AJAXでリアルタイムに投票結...
#contents
* 参考リンク [#oce111a6]
Googleで「jQuery」「ajax」「thumbs」「up」「vote」などの...
** 二者択一式 [#zc0d3b67]
- [[YouTube Style Rating/Voting System using jQuery, Ajax...
&ref(youtube.jpg);
~
- [[How To Make an AJAX Thumbs Up or Down Script - WebHol...
&ref(vote-up-or-down-posts.jpg);
~
- [[Voting system with jQuery, Ajax and PHP - 9LESSONS>ht...
&ref(jquery_voting.png);
~
- [[Technabled: Reddit-style Voting With PHP, MySQL And j...
&ref(reddit_votes.png);
** 多選択式 [#h6ac7527]
- [[jQueryのAjax機能を使った投票システムのサンプルプログ...
- 元ネタ [[AJAX User Poll Using jQuery and PHP>http://web...
&ref(ajax_user_poll.png);
* 動作サンプル [#ef2d460a]
** YouTube Style Rating [#q11d53ee]
- [[YouTube Style Rating/Voting System using jQuery, Ajax...
「YouTube Style Rating」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/youtube_voti...
}}
*** ダウンロード [#q78e7620]
youtube_voting99.rar - Created Aug 8, 2010 by Zeeshan Ras...
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`) V...
(1, 0, 0);
}}
※ダウンロードしたアーカイブの中に入っていた「youtube_rati...
＝「liked」「dislike」というカラムがないので注意！
+ データベースの接続設定ファイル「dbcon.php」を編集する。
#code(php){{
<?php
$link = mysql_connect('localhost', 'mysql_username', 'mys...
@mysql_select_db('mysql_database',$link) or die('error');
?>
}}
+ 必要に応じて、「index.php」を編集する。
+ 更新したファイル（「dbcon.php」「index.php」）を再度ア...
+ 設置したURLに、ブラウザでアクセスしてみる。
以上で、「YouTube Style Rating」のテスト設置は完了です。
** Voting system [#jcfb6603]
- [[Voting system with jQuery, Ajax and PHP - 9LESSONS>ht...
「Voting system」をテスト設置してみました。
#html{{
<a href="http://program.sagasite.info/sample/voting_9less...
}}
*** ダウンロード [#k62f1462]
voting.zip - Created Aug 3, 2009 by Srinivas Tamada
http://www.box.net/shared/k79xvv3x42
*** インストール [#fe971953]
+ ダウンロードした「voting.zip」を解凍して、Webサーバにア...
+ 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スクリプトの中で、テーブル名の指定が間違えていて、バ...
+ データベースの接続設定ファイル「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_...
mysql_select_db($mysql_database, $bd) or die("Could not s...
?>
}}
+ 必要に応じて、「voting.php」を編集する。
+ 更新したファイル（「config.php」「voting.php」）を再度...
+ 設置したURL（「～/voting.php」）に、ブラウザでアクセス...
以上で、「Voting system」のテスト設置は完了です。
*** バグ修正 [#fff5f275]
2011年8月7日（日）にダウンロードした「voting.zip」（2009...
＝「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 wher...
$count = mysql_num_rows($ip_sql);
if ($count == 0) {
// $sql = "update Messages set down=down+1 where mes_id...
$sql = "update messages set down=down+1 where mes_id='...
mysql_query($sql);
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) val...
mysql_query($sql_in);
} else {
}
// $result = mysql_query("select down from Messages where...
$result = mysql_query("select down from messages where m...
$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 wher...
$count = mysql_num_rows($ip_sql);
if ($count == 0) {
// $sql = "update Messages set up=up+1 where mes_id='$i...
$sql = "update messages set up=up+1 where mes_id='$id'";
mysql_query($sql);
// $sql_in = "insert into Messages (mes_id_fk,ip_add) va...
$sql_in = "insert into Voting_IP (mes_id_fk,ip_add) val...
mysql_query($sql_in);
} else {
}
// $result = mysql_query("select up from Messages where m...
$result = mysql_query("select up from messages where mes...
$row = mysql_fetch_array($result);
$up_value = $row['up'];
echo $up_value;
}
?>
}}
* まとめ [#d53134ba]
ポイントは、jQueryでAJAX通信をしている部分の処理だな。
ここをよく見れば、改造の仕方が分かると。
作者の皆さん、どうもありがとうございます。
大変参考になりました！（・∀・）
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
