如何創建一個Facebook風格的「喜歡」系統？

我一直在試圖找到一個Facebook風格的「喜歡」按鈕在線示例，但一直未能找到像這樣的東西。我想要做的是，在用戶可以按下的圖像下方放置一個按鈕。一旦按下，它將增加圖像記錄的數據庫中的值，然後通過將+1添加到現有數量來反映頁面上的添加。我可以猜測這需要PHP，SQL和jQuery來完成。問題是我不知道從哪裏開始。我已經創建了一個PHP腳本，通過給圖像ID添加到我的Like的特定圖像。我創建了一個jQuery發佈按鈕，發佈到PHP並喜歡圖片。我堅持的事情是更新頁面以反映類似。如何創建一個Facebook風格的「喜歡」系統？

對於初學者來說，我認爲我迄今爲止所做的代碼完全是噁心的大聲笑。

這是我所有的代碼。 PHP輸出喜歡計數和喜歡按鈕，加上代碼。 $信息是我的整個圖像文件表的結果數組：

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>';

的PHP對於像like.php遞增：

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

爲喜歡的PHP工作正常了，我我很高興。但表現出喜歡的東西只是糟透了，我想。事情是我有一個list.php將打印數據庫的內容一個接一個打印所有列出的圖像。因此它會一遍又一遍地打印相同的腳本副本，通常會將當前圖像ID硬編碼到發佈中。我對此很新，但覺得這段代碼很糟糕，再加上它不會更新圖像部分。

我想用JavaScript來簡單地得到喜歡的元素和++它，但是，然後它打我。我的列表將有超過100個這些相同的元素。你或許可以告訴我可能會以錯誤的方式接近，我希望有人能幫助我解決這個問題。

來源

2012-03-05 Linkandzelda

它看起來像你有一般的想法，只是一個粗略的實施。

您可能要指定爲每個圖像對應元件，並按下按鈕後更新的內部內容...

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

其中{} image_id顯然是唯一的每個圖像。傳遞測試（{} image_id），然後更新計數總成功的HTML ...

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); 
     } 
    }); 
}

在你的PHP

你會做你所做的事，除了返回一個JSON編碼陣列回JS更新...

$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'])); 
}

請記住，這是一個非常不好的實現。真正的系統肯定是一個不允許人們一遍又一遍地重複點擊按鈕來增加一些東西的地方。根據您的需要，當然，您應該通過登錄來限制它，甚至記錄相對於他們喜歡的文件的用戶信息，而不僅僅是增加數據庫中的數字。因此，您將擁有一個存儲每個類似信息的關係表。這樣，您可以查詢數據庫，以確保用戶在增加數字之前還沒有喜歡該文件。

希望是有道理的。

來源

2012-03-05 22:49:00

謝謝，正是我所需要的。 – Linkandzelda 2012-06-29 18:19:11

我認爲你是正確的方向。您可以在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'];

來源

2012-03-05 22:46:19 adidasadida

如何創建一個Facebook風格的「喜歡」系統？

回答

相關問題