본문 바로가기

WebHacking

WebHacking - (9)게시판 만들기_좋아요 기능

기본적인 게시판 출력은 완성된 상태이고, 좋아요 기능을 추가하자

개인적으로 느끼기에 게시판 만들기에서 제일 어려웠었던 기능이였다. (코드 이해하는 것도 약간 오래걸린듯?)

좋아요 기능 추가는 구글링으로 배열로 구성한 블로그를 참고해 만들었다. 

해당 테이블은 게시판 테이블로 기존에 있던 칼럼들에서 likes, likes_count 칼럼을 추가했다.

좋아요 기능은 게시물을 보는 페이지에 설정해줘야 하니 view.php에 소스코드를 추가해줬다.

개인마다 테이블 칼럼명이 같아도 의미하는 바가 다를 수 있으니 좋아요 기능을 만드는 코드 위주로 설명을 하자면, number 칼럼은 게시글 번호 / id 칼럼은 유저명을 의미한다.

 

[view.php]

1
2
3
4
5
6
<html>
<meta charset = 'utf-8'>
<body>
<script src="https://kit.fontawesome.com/ee73675523.js" crossorigin="anonymous"></script>
</body>
</html>
cs

fontawesome을 통해 무료 이미지를 가져올 수 있다. (하트)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    $login_user = $_SESSION['c_id'];
    $likes_sql = "SELECT * FROM board where id = '$login_user'";
    $likes_result = mysqli_query($connect, $likes_sql);
    $likes_row = mysqli_fetch_array($likes_result);
    $likes = $likes_row['likes'];
    $likes_count = $rows['likes_count'];
?>
<?php
    if ($likes[$number-1] == 1){
?>      <div class = "likes">
                <button class="fas fa-heart red fa-2x" onclick="location.href='./likes.php?number=<?=$number?>&heart=0&user=<?=$login_user?>'"</button>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    } else{
?>      <div class = "likes">
                <button class="far fa-heart white fa-2x" onclick="location.href='./likes.php?number=<?=$number?>&heart=1&user=<?=$login_user?>'"</button>
            <span class = "likes_count"><?=$likes_count?></span>
        </div>
<?php
    }
?>
cs

하트 버튼을 클릭했을 경우 likes.php로 동작하게끔 만드는 코드이다.

likes_count는 좋아요 갯수를 의미하고, likes는 자신이 어떤 게시글에 하트를 눌렀는지를 체크해준다.

좋아요를 누른 경우 하트의 빈 칸이 색칠되어 있고, 누르지 않은 경우 하트의 빈 칸이 채워져 있지 않다. (10~ 22번 줄)

 

[likes.php]

# 12/27 수정 - 좋아요 클릭 시 조회 수 증가 문제 해결 (18, 25번 줄)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
    if(isset($_GET['number']) && isset($_GET['heart']) && isset($_GET['user'])){
        include './db_connect.php';
        $prevPage = $_SERVER["HTTP_REFERER"];
        $number = $_GET['number'];
        $heart = $_GET['heart'];
        $user = $_GET['user'];
 
        $sql = "SELECT likes FROM board where id = '$user'";
        $likes_row = mysqli_fetch_array(mysqli_query($connect, $sql));
        $likes = $likes_row[0];
        $likes[$number-1] = strval($heart);
        $likes_sql = "UPDATE board set likes = '$likes' where id = '$user'";
        mysqli_query($connect, $likes_sql);
 
        $sql = "SELECT likes_count FROM board where number = {$number}";
        $row = mysqli_fetch_array(mysqli_query($connect, $sql));
        $likes_count = $row[0];
$hit = "UPDATE board set hit = hit - 1 where number = {$number}";
 
        if ($heart){
            $view_sql = "UPDATE board set likes_count = likes_count + 1 where number = {$number}";
        } else{
            $view_sql = "UPDATE board set likes_count = likes_count - 1 where number = {$number}";
        }
mysqli_query($connect, $hit);
        mysqli_query($connect, $view_sql);
        header("location:".$prevPage);
        mysqli_close($connect);
    }
?>
cs

현재 로그인 한 사용자가 해당 게시글에 좋아요를 눌렀을 경우 likes 칼럼을 업데이트 한다. (13번 줄)

해당 게시글의 좋아요 갯수를 board 테이블에서 뽑아낸다. (16번 줄)

실질적으로 하트 버튼을 클릭했을 경우 좋아요 갯수가 증가/감소 하는것을 보여준다. (20 ~ 25번 줄)

 

참고 블로그

https://hanuscrypto.tistory.com/m/entry/Php%EB%A1%9C-%EC%9B%B9-%EA%B0%9C%EB%B0%9C%ED%95%98%EA%B8%B0-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B011-%EC%A2%8B%EC%95%84%EC%9A%94