Php로 웹 개발하기 : 게시판(11) - 좋아요

이번에는 게시판에 마음에 드는 글에 좋아요를 누르는 기능을 만들어 보자.

원래는 views가 높은 순서대로 글을 출력하려고 했는데 좋아요가 많은 글을 추천하는 방식도 괜찮을 것 같다.

그런데 좋아요 기능을 추가하려면 어떤 사용자가 어떤 글에 좋아요를 눌렀는지 기억해야 하므로 각 사용자가 각 게시글에 대한 테이블이 하나 더 필요하다. 근데 테이블을 하나 더 만들지 말고, 1과 0으로 이루어진 배열로 표현해보자.

 

우선 게시글이 최대 25개만 있다고 가정하고 좋아요 column을 추가해주고, 좋아요 횟수를 기록할 column도 추가하자.

ALTER table board add column `likes` varchar(25) default '0000000000000000000000000';
ALTER table board add column `likes_count` int(5) default 0;

[구현 흐름]

1. 좋아요는 글을 읽는 화면인 read.php에 하트를 넣는다.

2. 좋아요를 누를 때마다 색이 채워지고(1) 안 채워지고(0)로 좋아요/취소 기능을 만든다.

3. 좋아요를 눌렀다면 누른 사용자가 가진 likes 배열의 해당 id 인덱스를 1로 업데이트해준다.

4. 화면에 글을 출력할 때, id에 해당하는 배열의 index가 1이라면 색칠된 하트를 출력한다.

 

하트는 fontawesome의 이모티콘을 사용할 것이다. read.php의 body 바로 위에 다음 script 태그를 추가해주자.

<script
        src="https://kit.fontawesome.com/6478f529f2.js"
        crossorigin="anonymous"
></script>

위 태그를 삽입하면, fontawsome의 이모티콘을 쉽게 사용할 수 있다.

 

하나 헷갈릴 수 있는 것이, likes는 자신이 하트를 누른 게시글이 어떤 것인지 알기 위해서, likes_count는 자신이 받은 하트 개수를 알기 위해서 사용하는 column이므로, likes_count는 현재 게시글의 id로 구분해서 가져오고, likes는 현재 게시글을 보고 있는 (로그인 한) 사용자로 구분해서 가져와야 한다.

<?php
    session_start();
    $login_user = $_SESSION['id'];
    $likes_sql = "SELECT * FROM board where username = '$login_user'";
    $likes_result = mysqli_query($conn, $likes_sql);

    $likes_row = mysqli_fetch_array($likes_result);
    $likes = $likes_row['likes'];
?>
//$likes_count는 기존의 id로 가져온 $row['likes_count']로 저장한다.

<?php
    if ($likes[$id-1] == 1){
?>      <div class = "likes">
            <i class="fas fa-heart red fa-2x"></i>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    } else{
?>      <div class = "likes">
            <i class="far fa-heart white fa-2x"></i>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    }          
?>

 

우선 likes 배열의 id 번째 index가 1이면 꽉 찬 빨간 하트를, 0이면 빈 하얀 하트를 출력하는 코드를 짜고 CSS를 적용해준다.

 

이제 하트에 링크 태그를 추가해서 새로운 likes.php 파일로 연결한 후, likes 배열 수정 작업을 처리하자.

<?php
    if ($likes[$id-1] == 1){
?>      <div class = "likes">
            <i class="fas fa-heart red fa-2x"><a href = 'likes.php?id=<?=$id?>&heart=0&user=<?=$login_user?>'></a></i>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    } else{
?>      <div class = "likes">
            <i class="far fa-heart white fa-2x"><a href = 'likes.php?id=<?=$row['id']?>&heart=1&user=<?=$login_user?>'></a></i>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    }          
?>

Parameter는 1. 현재의 게시글을 구분하기 위한 id 파라미터(좋아요 카운팅 용), heart 파라미터(하트가 눌렸는지 취소됐는지 판별하는 용), 로그인한 유저를 구분하는 login_user(누가 좋아요를 어떤 게시글에 눌렀는지 수정하는 용)로 크게 3가지를 넘겨주었다.

 

[likes.php]

<?php
    if(isset($_GET['id']) && isset($_GET['heart']) && isset($_GET['user'])){
        $id = $_GET['id'];
        $heart = $_GET['heart'];
        $user = $_GET['user'];

        $sql = "SELECT likes FROM board where username = '$user'";
        $likes_row = mysqli_fetch_array(mysqli_query($conn, $sql));
        $likes = $likes_row[0];
        $likes[$id-1] = strval($heart);
        $likes_sql = "UPDATE board set likes = '$likes' where username = '$user'";
        mysqli_query($conn, $likes_sql);
        //로그인한 user의 likes 배열을 가져와서
        //$heart(1또는 0)으로 id 인덱스를 업데이트 해준다.

        $sql = "SELECT likes_count FROM board where id = {$id}";
        $row = mysqli_fetch_array(mysqli_query($conn, $sql));
        $likes_count = $row[0];

        if ($heart){
            $view_sql = "UPDATE board set likes_count = likes_count + 1 where id = {$id}";
        } else{
            $view_sql = "UPDATE board set likes_count = likes_count - 1 where id = {$id}";
        }
        mysqli_query($conn, $view_sql);
        //$heart가 1이 넘어왔다면(하트) 카운트를 늘리고, 0이 넘어왔다면(취소) 카운트를 줄인다.

        mysqli_close($conn);
    }
?>

 

test 계정으로 들어가서 첫 번째 글에 하트를 눌러보자.

클릭을 하니 하트가 표시되면서 좋아요 수가 올라가고, 다시 클릭해주니 하트가 취소되었다.