Facebookスタイルの「Like」システムの作成方法

Question

私はFacebookスタイルの「好き」ボタンの例をオンラインで見つけようとしてきましたが、このようなものは見つけられませんでした。私がしたいのは、ユーザーが押すことができる画像の下にボタンを置くことです。一度押すと、データベースの画像のレコードの値がインクリメントされ、既存の値に+ 1を加えてページに反映されます。 PHP、SQL、jQueryが必要です。問題はどこから始めるのか分かりません。イメージIDを指定して特定のイメージにLikeを追加するPHPスクリプトを作成しました。私はすでにPHPに投稿し、画像を好きなjQueryポストボタンを作成しました。私が執着しているのは、そのようなページを更新することです。

私はこれまでこれを行うために作ったコードは完全にうんざりです。

ここまでのコードはすべてここにあります。 PHPはLikes countとLikeボタンを出力し、加えて追加するコードを出力します。 $情報は、私の全体の画像ファイルテーブルの結果のための配列である：

Echo "<b>Likes:</b> ".$info['likes'] . "</span>"; 
Echo '<script src="http://code.jquery.com/jquery-latest.js"></script><script  type="text/javascript">function test() {$.post("http://stormstorm.com/like.php? id='.$info['fileid'].'")</script>'; 
Echo '<br /><img onClick="test();" src="img/like.jpg"></p>'; 

like.phpで増加などのためのPHP：

$id = $_GET['id']; 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error()); 

PHP好みが正常に動作するために、私は」私はそれに満足しています。しかし、好きを示すことはちょうどひどく私を思います。私はリストされたすべてのイメージを印刷するために、データベースの内容を次々に印刷するlist.phpを持っています。したがって、スクリプトの同じレプリカを何度も何度も印刷します。通常は、現在のイメージIDをポスティングにハードコーディングします。私はこれでかなり新しいですが、このコードが気になると感じ、それに加えて画像セクションを更新しません。

私は単にJavascriptを使ってLikes要素と++を得ることを考えていましたが、それが私に当たったのです。私のリストには10​​0以上の同じ要素があります。あなたはおそらく、私がこれを間違った方法で近づいているかもしれないと言うことができます。そして、私は誰かがこれで私を助けることを願っています。

Answer 1

あなたは一般的な考え方を持っているように見えますが、それは単なる実装です。

{image_idは}は明らかに、各画像に固有のどこ

<img src="xxx.jpg"> 
<p> 
    <a href="javascript:test({image_id});">Like</a> <span id="{image_id}_count">150</span> 
</p> 

...各画像のカウンタ要素を指定し、ボタンが押された後、内側のコンテンツを更新することができます。テスト（{image_idは}）にそれを渡した後、成功した場合にカウント合計のHTMLを更新...あなたのPHPの

function test(id) 
{ 
    $.ajax({ 
     url: 'http://stormstorm.com/like.php', 
     method: 'get', 
     data: {id: id}, 
     dataType: json, 
     success: function(data) 
     { 
      $('#' + id + '_count').html(data.total); 
     } 
    }); 
} 

あなたが戻ってJSにJSONエンコードされた配列を返すことを除いてまったく同じ何でしょう更新のため...

$id = mysql_real_escape_string($_GET['id']); 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id); 
if(mysql_affected_rows() > 0) 
{ 
    $sql = mysql_fetch_assoc(mysql_query("SELECT `likes` FROM `files` WHERE `fileid` = ".$id)); 

    echo json_encode(array('total' => $sql[0]['likes'])); 
} 

これは非常に貧弱な実装です。実際のシステムは、人々がボタンを何度も何度も繰り返しクリックするだけで何かを増やすことを許さないものでなければなりません。必要に応じて、もちろん、ログインすることで制限し、好きなファイルに関連してユーザー情報を記録し、データベースの番号を増やすだけでなく、 したがって、それぞれのような情報を格納するリレーショナル・テーブルを用意する必要があります。こうすることで、データベースを照会して、数字を増やす前にユーザーがファイルを気に入らないようにすることができます。

希望は意味があります。

Answer 2

あなたは正しい方向に向かっていると思います。更新呼び出し後の好きな数をPHPで返し、jqueryで同様の数を更新させることができます。私は例としていくつかのコードを追加しました。

HTML：

<form name="like_form"> 
    <input type="hidden" name="id" value="<?php echo $info['fileid']; ?>" /> 
    Likes: <span class="like_count"><?php echo $info['likes']; ?></span> 
    <img src="img/like.jpg" class="like_click" /> 
</form> 

Javascriptを：

$(document).ready(function() { 
    $('img.like_click').click(function() { 
    var form = $(this).closest('form[name=like_form]'); 
    var id = $(form).find('input[name=id]').val(); 
    $.post("http://stormstorm.com/like.php?id='" + id + "', function(data) { 
     $(form).find('span.like_count').html(data); 
    }); 
}); 

PHP：（*注：私は構文をチェックしませんでしたが、うまくいけば、アイデアを理解するのに十分なコードになります。）

$id = $_GET['id']; 
mysql_query("UPDATE files SET likes=likes+1 WHERE fileid=".$id) or die(mysql_error()); 
$result = mysql_query("SELECT likes from files where fileid=" . $id) or die(mysql_error()); 
$row = mysql_fetch_assoc($result); 
echo $row['likes'];