ホームページ > 記事 > ウェブフロントエンド > PHP と jQuery_jquery を組み合わせて実装されたコメントの好き嫌い機能
PHP と jQuery_jquery を組み合わせて実装されたコメントの好き嫌い機能
- WBOYオリジナル
- 2016-05-16 15:49:311214ブラウズ
ウェブを閲覧し、記事やコメントなどのウェブコンテンツの見解に同意または反対したい場合、ウェブページ上で「いいね！」または「嫌い」をクリックして投票できます。開発者は、ajax を介して対話プロセス全体を非同期に実装できるため、ユーザー エクスペリエンスが向上します。
この記事では、PHP MySql jQuery を使用して実装された「好き」投票機能と「嫌い」投票機能を説明する例を組み合わせています。ユーザーの IP を記録することで、ユーザーの投票行動が有効かどうかを判断できます。投票システム。 PHP、MySql、jQuery の基本的な知識がある場合は、読み続けてください。
準備をしましょう
まず、インスタンス全体を実行するために必要な mysql データ テーブルを準備する必要があります。インスタンスには 2 つのテーブルが必要です。投票テーブルは、対応する記事またはコメントに対するユーザーの投票数を記録するために使用され、データを書き込みます。デモンストレーションの目的で、votes_ip テーブルを使用して、各ユーザーの投票の IP が記録され、ユーザーの IP に基づいて投票が有効かどうかが判断されます。
CREATE TABLE IF NOT EXISTS `votes` ( `id` int(10) NOT NULL AUTO_INCREMENT, `likes` int(10) NOT NULL DEFAULT '0', `unlikes` int(10) NOT NULL DEFAULT '0', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES (1, 30, 10); CREATE TABLE IF NOT EXISTS `votes_ip` ( `id` int(10) NOT NULL, `vid` int(10) NOT NULL, `ip` varchar(40) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
HTML
ページには、それぞれ「好き」と「嫌い」を表す 2 つのボタン、つまり #dig_up と #dig_down があり、投票数とそれぞれの割合がボタンに記録されているため、非常に直感的に比較できます。投票結果。
<div class="digg">
<div id="dig_up" class="digup">
<span id="num_up"></span>
<p>很好，很强大！</p>
<div id="bar_up" class="bar"><span></span><i></i></div>
</div>
<div id="dig_down" class="digdown">
<span id="num_down"></span>
<p>太差劲了！</p>
<div id="bar_down" class="bar"><span></span><i></i></div>
</div>
<div id="msg"></div>
</div>
CSS
ページを美しくするためにCSSを使用する必要があります。画像のdiggs.pngを使用して、さまざまなボタンの背景を配置し、positionを設定することで各要素の位置関係を配置します。
.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative}
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative;
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer}
.digup{background:url(diggs.png) no-repeat 4px 2px;}
.digup_on{background:url(diggs.png) no-repeat 4px -49px;}
.digdown{background:url(diggs.png) no-repeat 4px -102px;}
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;}
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;}
#dig_up p{height:24px; line-height:24px; color:#360}
#dig_down p{height:24px; line-height:24px; color:#f30}
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0;
position:relative; text-align:center}
.bar span{display:block; height:12px; }
.bar i{position:absolute; top:0; left:104px;}
#bar_up span{background:#360}
#bar_down span{background:#f60}
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00}
jQuery
この例も jQuery に依存しているため、最初に jquery ライブラリ ファイルをページにロードすることを忘れないでください。
まず、jQuery は、マウスが 2 つの投票ボタンの上をそれぞれスライドすると変化する背景画像を処理する必要があります。これは、addClass() と RemoveClass() によって実現されます。
$(function(){
//鼠标滑向和离开投票按钮时，变换背景样式
$("#dig_up").hover(function(){
$(this).addClass("digup_on");
},function(){
$(this).removeClass("digup_on");
});
$("#dig_down").hover(function(){
$(this).addClass("digdown_on");
},function(){
$(this).removeClass("digdown_on");
});
//初始化数据
getdata("do.php",1);
//单击“顶”时
$("#dig_up").click(function(){
getdata("do.php?action=like",1);
});
//单击“踩”时
$("#dig_down").click(function(){
getdata("do.php?action=unlike",1);
});
});
次に、データを初期化します。つまり、ページがロードされた後、投票数と割合を含む最初の投票結果を表示する必要があります。データを取得する操作をカスタム関数 getdata() に記述し、さまざまなリクエスト アドレスと ID パラメーターを渡すことでデータのロードを完了します。 getdata() 関数では、バックグラウンド処理の戻り結果に従って URL に送信され、投票が成功すると、ページ内の対応する要素のコンテンツ (投票数や投票数など) が変更されます。割合。
function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){//投票成功
$("#num_up").html(data.like);
//通过控制宽度来显示百分比进度条效果
$("#bar_up span").css("width",data.like_percent);
$("#bar_up i").html(data.like_percent);
$("#num_down").html(data.unlike);
$("#bar_down span").css("width",data.unlike_percent);
$("#bar_down i").html(data.unlike_percent);
}else{//投票失败
$("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'})
.animate({top:'-50px',opacity:0}, "slow");
}
});
}
PHP
データの取得は do.php を通じて行われます。Do.php はフロントエンド ページによって渡されたパラメーターに従ってデータベースに接続し、それぞれに従って「like」、「dislike」、および初期データ処理モジュールに入ります。以下は PHP モジュールのコード構造です:
include_once("connect.php");//连接数据库
$action = $_GET['action'];
$id = 1;
$ip = get_client_ip();//获取ip
if($action=='like'){//顶
likes(1,$id,$ip);
}elseif($action=='unlike'){//踩
likes(0,$id,$ip);
}else{
echo jsons($id);
}
関数 likes() は、「好き」と「嫌い」の投票モジュールを処理するために使用されます。まず、ユーザー IP がすでに投票しているかどうかを判断し、投票済みの場合は、対応するプロンプトを直接返します。ユーザー IP には投票レコードがない場合、votes テーブルを更新し、対応する投票数に 1 を加えてから、ユーザーの IP レコードを votes_ip テーブルに挿入します。操作が成功した場合は、jsons() を呼び出して数値を出力します。投票数と投票後のパーセンテージを入力するか、操作が失敗したことを示すプロンプト メッセージを入力します。
function likes($type,$id,$ip){
$ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0){//还没有顶过
if($type==1){//顶
$sql = "update votes set likes=likes+1 where id=".$id;
}else{//踩
$sql = "update votes set unlikes=unlikes+1 where id=".$id;
}
mysql_query($sql);
$sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')";
mysql_query($sql_in);
if(mysql_insert_id()>0){
echo jsons($id);
}else{
$arr['success'] = 0;
$arr['msg'] = '操作失败，请重试';
echo json_encode($arr);
}
}else{
$msg = $type==1?'您已经顶过了':'您已经踩过了';
$arr['success'] = 0;
$arr['msg'] = $msg;
echo json_encode($arr);
}
}
関数 jsons() は、投票テーブル内の対応する ID の投票数を読み取り、パーセンテージを計算し、最終的にフロントエンド ページで使用できるようにこの情報を json 形式で出力するために使用されます。
function jsons($id){
$query = mysql_query("select * from votes where id=".$id);
$row = mysql_fetch_array($query);
$like = $row['likes'];
$unlike = $row['unlikes'];
$arr['success']=1;
$arr['like'] = $like;
$arr['unlike'] = $unlike;
$like_percent = round($like/($like+$unlike),3)*100;
$arr['like_percent'] = $like_percent.'%';
$arr['unlike_percent'] = (100-$like_percent).'%';
return json_encode($arr);
}
この例は、Ajax の原則によって実装されたフロントエンドとバックエンドの対話機能を使用して、一般的な「いいね！」、同意および反対のコメント、投票システム、その他のシナリオに適用できます。 do.php には、ユーザーの実際の IP を取得するための関数 get_client_ip() もあります。この関数については以前に記事を公開しましたが、ここではダウンロードできません。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。