Facebook 스타일 "좋아요"시스템을 만드는 방법은 무엇입니까?

Question

페이스 북 스타일 "좋아요"버튼의 온라인 예제를 찾으려고했지만 이와 같은 것을 찾을 수 없었습니다. 내가하고 싶은 것은 사용자가 누를 수있는 이미지 아래에 버튼을 놓는 것입니다. 일단 누르면 이미지의 레코드에 대한 데이터베이스의 값이 증가하고 기존 금액에 + 1을 더하여 페이지에 추가를 반영합니다. PHP, SQL 및 jQuery가 필요합니다. 문제는 어디서부터 시작해야할지 모르겠습니다. 이미 이미지 ID를 부여하여 특정 이미지에 대한 내 좋아요에 추가 할 PHP 스크립트를 만들었습니다. 나는 이미 PHP에 게시하고 이미지를 좋아하는 jQuery 게시 버튼을 만들었습니다. 내가 붙어있는 일은 페이지를 업데이트하는 것과 같습니다.

처음에는 이렇게하기 위해 만든 코드가 완전히 역겨운 것 같아요.

여기까지 모든 코드가 있습니다. 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>'; 

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를 게시에 하드 코딩합니다. 나는이 책에 익숙하지 않지만이 코드가 짜증스럽고 이미지 섹션을 업데이트하지 않는다고 느낀다.

나는 Likes 엘리먼트와 ++를 얻기 위해 자바 스크립트를 사용하려고 생각했지만, 그때 그것은 나를 때렸다. 내 목록에는 100 개 이상의 동일한 요소가 있습니다. 아마도 내가 잘못된 방향으로 접근하고 있다고 말할 수 있습니다. 누군가가 이것을 도와 줄 수 있기를 바랍니다.

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> 

. ... 당신의 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); 
     } 
    }); 
} 

당신은 당신이 한 정확히 할 것을 테스트하려면 그 패스 ({image_id}) 후 성공 카운트 총의 HTML을 업데이트 제외하고 다시 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> 

자바 스크립트 :

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