dポイントプレゼントキャンペーン実施中！

ワンクリックしかできないクリックカウンター

解決済

  • 質問者：mic818
  • 質問日時：
  • 回答数：2件

現在、ログイン式掲示板を作成中です。

その掲示板で、投稿に対してログイン中のみ、一人一回しかクリックできない「いいねボタン」のようなものを設置したいのですが、（mixiつぶやきのようなものです）どのようにすればよいのかわからずこまっております。

ネットにのっているものを参考にさせていただいて、クリック数をカウントする機能は、jQueryとjavascriptとphpでできたのですが、一回しかクリックできないようにするにはどうすればよいかわからないので、教えていただけませんか？

どうぞよろしくお願いいたします。



javascript
jQuery(document).ready(function(){

//初期時のカウンターファイル読み込み
//同じファイル名だと正常に読み込めないので、ランダムな数字を生成し、パラメータとして付けることで、ユニークな状態にしている。
var randnum1 = Math.floor( Math.random() * 10000 );
jQuery("#btn01 span").load("./count01.txt?r=" + randnum1);


//カウンター追加後の読み込み関数
function func01(data){
var randnum1 = Math.floor( Math.random() * 10000 );
jQuery("#btn01 span").load("./count01.txt?r=" + randnum1);
}


//カウンター＋1追加処理
jQuery('#btn01 p').click(function(e){
//「param1」変数の値と書き込みファイル名の情報をもってpost.phpへ。その後、関数func01を実行
jQuery.post("post.php" , {"param1": 'count01.txt'} , func01);
jQuery("#btn01 span").load("./count01.txt");
});

});

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>カウントサンプル</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/count.js"></script>
</head>

<body>
<div id="btn01"><p><a href="javascript:void(0);">いいね！</a></p><span></span></div>
</body>
</html>

post.php

<?php
$file = $_REQUEST['param1'];
$c = file_get_contents($file);
$c++;
$fp = fopen($file, "r+");
@fputs($fp,$c);
fclose($fp);

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



どの程度PHPやmySQLを扱えるのかわからないのですが環境等はある前提でサンプルを提示します。
動きをわかりやすくする為に一度クリックした投稿については選択できないようにしています。
(これをクリック時にチェックするようにしてもOKです。)
エラー処理やレスポンス、セキュリティについては端折っていますのでそこはきちんと実装してください。

あくまでサンプルです。

動作について
既にクリックしたボタンは押せない。各投稿のボタンをクリックするとカウントがアップされる。
他のユーザでログインしなおして試すと、そのユーザがクリックしたボタンについては押せないことが確認できる。

JavaScript部分はこのサンプル用になっていますが、ユーザに対してクリック済みかどうかのチェックやカウントについてはこのcount.phpベースになると思います。
レスポンスについては、このサンプルですと投稿ごとにデータを取得しているため、画面に表示する件数分count.phpへリクエストします。
最初に表示分のクリック情報やカウントを全て取得してくる方法や、最初に回答したクリックした時にチェックする動作にする方法もあります。

=== index.php
<html>
<head>
<title>テスト</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7. …
<script type="text/javascript">

$().ready ( function() {
var obj = $('#bbs > input:button');
obj.each ( function(index) {
$(this).click(function() {
var bbsId = $(this).get(0).id.split('-')[1];
var userId = $('#userid').val();
$.post (
'count.php',
{ mode : 'click', bbsid : bbsId, userid : userId },
function ( data, b ) {
if ( !data.clicked ) {
$('#c-' + data.bbsid).html ( data.count );
$('#b-' + data.bbsid).attr ( 'disabled', 'disabled' );
}
}
);
});
});
});

function login() {
var userId = $('#userid').val();
if ( userId == '' ) {
alert ( 'ユーザIDを入れてね。' );
return;
}
var cntObj = $('#bbs > input:button').next();
cntObj.each ( function(index) {
var obj = $(this).get(0);
$.post (
'count.php',
{ mode : 'read', bbsid : obj.id.split('-')[1], userid : userId },
function ( data ) {
obj.innerHTML = data.count;
if ( data.clicked ) {
$('#b-' + data.bbsid).attr ( 'disabled', 'disabled' );
} else {
$('#b-' + data.bbsid).removeAttr ( 'disabled', 'disabled' );
}
}
);
});
}

</script>
</head>
<body>
ユーザID：<input type="text" id="userid"><input type="button" value="ログイン(擬似)" onclick="login();">
<hr>
<form id="bbs">
<?php for ( $i = 0; $i < 10; $i ++ ) { ?>
<input type="button" value="投稿ID[000<?= $i ?>]" disabled id="b-000<?= $i ?>">カウント[<span id="c-000<?= $i ?>">-</span>]<br>
<?php } ?>
</form>
</body>
</html>

=== count.php
<?php
require_once 'DB.php';

$db = DB :: connect ( "mysql://root:password@localhost/test" );
if ( PEAR :: isError($db) ) {
die ( $db -> getMessage() );
}
$result = $db -> query ( 'SET NAMES utf8' );

$mode = $_POST['mode'];
$bbsId = $_POST['bbsid'];
$userId = $_POST['userid'];

// ユーザのクリック状況（投稿IDとユーザIDで取得)
$sql = "select USERID from CLICKMANAGER where BBSID='$bbsId' and USERID='$userId'";
$result = $db->query ( $sql );
// レコードが取得できた場合はクリック済みとする
$isClicked = $result->numRows() == 1;
if ( $mode == 'click' && !$isClick ) {
// ボタンクリック時の処理
// まだクリックしていなかった場合はデータを追加
$sql = "insert into CLICKMANAGER (BBSID,USERID) values ( '$bbsId', '$userId' )";
$result = $db->query ( $sql );
}
// カウントを取得
$sql = "select count(*) as CNT from CLICKMANAGER where BBSID='$bbsId'";
$result = $db->query ( $sql );
$r=$result->fetchRow(DB_FETCHMODE_ASSOC);
$count = $r['CNT'];
// 返すJSONデータを生成
$array = array();
$array['clicked'] = $isClicked;// クリック済フラグ
$array['bbsid'] = $bbsId;// 投稿ID
$array['count'] = $count;// カウント数

header ( "Content-Type: application/json; charset=UTF-8" );
print json_encode ( $array );

?>

=== DB
create table CLICKMANAGER (
BBSIDVARCHAR(12),
USERIDVARCHAR(12),
REGDATETIMESTAMP,
PRIMARY KEY (BBSID,USERID)
);

この回答への補足

お返事ありがとうございます。

教えていただいたのを参考に、勉強しながら作っていこうと思います。

詳しく教えていただいて本当にありがとうございました。

補足日時：2011/12/21 23:28
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



ログインしてユーザがわかっているのであれば、どの投稿についてクリックしたかを保持しておき、ボタンを表示する際に判断すれば良いと思います。
(またはクリックした時に「クリック済みだよ」というエラーを返す)

手っ取り早いのはユーザ毎にファイルを作って、そこにどの投稿についてクリックしたか書き込んでいく。
もしくは1ファイルにユーザID,投稿ID,投稿ID,・・・・という具合にCSVっぽく管理する。

もっと簡単なのはデータベースが何か使えればその投稿IDのレコードが取れるかどうかで判別できます。

ユーザの管理体系やどのようにログインを判断しているか等わからないので大まかな方法の回答となります。

あと、現在のコードはあまりよろしくないです。
param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。

この回答への補足

はじめまして。

ご丁寧に教えていただきありがとうございます。

説明不足で申し訳ありませんでした。

Twitterアカウントでログインさせて、Mysqlをつかっております。

クリックしたユーザーに関して、データベースに投稿IDとユーザー情報をかきこんで、クリックする際にデータベースにその人の投稿があったか判別すればいいということでしょうか？

大変申し訳ないのですが、php初心者でまだよくわかっていないので、データベースにその人の投稿があったかどうかの判別が、どういうコードになるのか教えていただけませんか？


>あと、現在のコードはあまりよろしくないです。
>param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。

ご指摘ありがとうございます。
ほんとですね＞＜
セキュリティ面も初心者なので、このコードを使わずにカウント数も、データベースに書き込まれた投稿IDの数で表示しようと思ったのですが、それで大丈夫でしょうか？

どうぞよろしくお願いいたします。

補足日時：2011/12/20 15:54
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報