- ベストアンサー
ワンクリックしかできないクリックカウンター
- ログイン式掲示板にクリック数をカウントするカウンター機能を追加したい
- jQueryとjavascriptとphpを使用して、カウンター機能を実装しましたが、一回しかクリックできないようにする方法が分からない
- クリックカウンターにランダムな数字を生成してパラメータとして付け、ユニークな状態にしています
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 どの程度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.1/jquery.min.js"></script> <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 ( BBSID VARCHAR(12), USERID VARCHAR(12), REGDATE TIMESTAMP, PRIMARY KEY (BBSID,USERID) );
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 ログインしてユーザがわかっているのであれば、どの投稿についてクリックしたかを保持しておき、ボタンを表示する際に判断すれば良いと思います。 (またはクリックした時に「クリック済みだよ」というエラーを返す) 手っ取り早いのはユーザ毎にファイルを作って、そこにどの投稿についてクリックしたか書き込んでいく。 もしくは1ファイルにユーザID,投稿ID,投稿ID,・・・・という具合にCSVっぽく管理する。 もっと簡単なのはデータベースが何か使えればその投稿IDのレコードが取れるかどうかで判別できます。 ユーザの管理体系やどのようにログインを判断しているか等わからないので大まかな方法の回答となります。 あと、現在のコードはあまりよろしくないです。 param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。
補足
はじめまして。 ご丁寧に教えていただきありがとうございます。 説明不足で申し訳ありませんでした。 Twitterアカウントでログインさせて、Mysqlをつかっております。 クリックしたユーザーに関して、データベースに投稿IDとユーザー情報をかきこんで、クリックする際にデータベースにその人の投稿があったか判別すればいいということでしょうか？ 大変申し訳ないのですが、php初心者でまだよくわかっていないので、データベースにその人の投稿があったかどうかの判別が、どういうコードになるのか教えていただけませんか？ >あと、現在のコードはあまりよろしくないです。 >param1=xxx.xxxと何か渡されたらそのファイルを読みに行って処理されてしまう可能性があります。 ご指摘ありがとうございます。 ほんとですね＞＜ セキュリティ面も初心者なので、このコードを使わずにカウント数も、データベースに書き込まれた投稿IDの数で表示しようと思ったのですが、それで大丈夫でしょうか？ どうぞよろしくお願いいたします。
補足
お返事ありがとうございます。 教えていただいたのを参考に、勉強しながら作っていこうと思います。 詳しく教えていただいて本当にありがとうございました。