Web Hacking Study/Web Page 만들기

게시판 페이지 개발 (좋아요/좋아요 취소)

silver surfer 2022. 6. 15.

** 좋아요 관리 테이블 만들기

id는 table에 데이터가 추가될 때 마다 +1 되는 컬럼

like_post_id는 게시글의 고유번호인 idx

like_user는 좋아요를 누른 사용자의 id (좋아요 중복 방지)

▷ 구글 Icon 가져오기

구글 폰트 페이지에 들어간다

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

Material Icons로 설정

Web에서 사용할 코드인 <span>태그 부분을 복사한다

<head> 부분에 아래 코드 삽입

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<body>에 아래처럼 입력해서 사용한다

<span class="material-icons">
    favorite
</span>

▶ 게시글 조회 페이지(read.php) 테이블 안에 좋아요를 표시할 칸을 만들기 위한 작업

board DB에서 board 테이블의 컬럼인 idx와 사용자의 ID인 username을 변수로 설정한다

<?php
    session_start();
    $connect = mysqli_connect('localhost', 'root', 'mysql', 'board');
    $idx = $_GET['idx'];
    $username = $_SESSION['username'];
?>

첫 번째 쿼리에서는 board DB의 likedb 테이블에서 like_post_id(게시글 고유번호) 컬럼과 like_user(사용자 ID)를 조회하고 가져온다

$sql = "SELECT * FROM likedb WHERE like_post_id='$idx' AND like_user='$username'";
$res = mysqli_fetch_array(mysqli_query($connect, $sql));

두 번째 쿼리에서는 board DB의 likedb 테이블에서 like_post_id를 조회하고 like_post_id가 같은 행의 개수를 가져온다

$sql2 = "SELECT * FROM likedb WHERE like_post_id ='$idx'";
$rows = mysqli_num_rows(mysqli_query($connect,$sql2));

전체

<?php
    session_start();
    $connect = mysqli_connect('localhost', 'root', 'mysql', 'board');
    $idx = $_GET['idx'];
    $username = $_SESSION['username'];

    $sql = "SELECT * FROM likedb WHERE like_post_id='$idx' AND like_user='$username'";
    $res = mysqli_fetch_array(mysqli_query($connect, $sql));

    $sql2 = "SELECT * FROM likedb WHERE like_post_id ='$idx'";
    $rows = mysqli_num_rows(mysqli_query($connect,$sql2));
?>

▶ 게시글 조회 페이지(read.php) 테이블 안에 좋아요 칸 만들기

만약 해당 게시글에 좋아요를 누른 상태가 아니라면 속이 빈 하트 아이콘을,

해당 게시글에 좋아요를 누른 상태라면 속이 찬 하트 아이콘을 내보낸다.

→ 아이콘을 클릭하면 동작을 처리할 like.php로 이동한다

아이콘 옆에 좋아요 수가 보여지도록 한다 (<?php echo $rows;?>)

<td class = "likes">
    <?php
        session_start();
        $connect = mysqli_connect('localhost', 'root', 'mysql', 'board');
        $idx = $_GET['idx'];
        $username = $_SESSION['username'];

        $sql = "SELECT * FROM likedb WHERE like_post_id='$idx' AND like_user='$username'";
        $res = mysqli_fetch_array(mysqli_query($connect, $sql));

        $sql2 = "SELECT * FROM likedb WHERE like_post_id ='$idx'";
        $rows = mysqli_num_rows(mysqli_query($connect,$sql2));

        if(!$res) {
     ?>
            <span class="material-icons" style="color: darkred; cursor: pointer;" onclick="location.href='like.php?idx=<?=$idx?>'">
                favorite_border
            </span>
            <span><?php echo $rows;?></span>
    <?php }  else  { ?>
                 <span class="material-icons" style="color: red; cursor: pointer;" onclick="location.href='like.php?idx=<?=$idx?>'">
                     favorite
                 </span>
                 <span><?php echo $rows;?></span>
    <?php } ?>
</td>

▷ 좋아요 동작을 처리하는 like.php 페이지

해당 게시글을 좋아요 한 사람이 하트 아이콘을 클릭하면 board 테이블에서 해당 게시글(idx)의 liked 컬럼의 카운트를 -1로 줄이고, likedb에서 해당하는 행을 삭제한다

$sql = "SELECT * FROM likedb WHERE like_post_id='$idx' AND like_user='$username'";
$res = mysqli_fetch_array(mysqli_query($connect, $sql));

if($res){
    $sql2 = "
        UPDATE board SET liked = liked - 1 WHERE idx = $idx;
        DELETE FROM likedb WHERE like_post_id = '$idx' AND like_user = '$username';
            ";
    $res2 = mysqli_multi_query($connect, $sql2);
    echo "<script>alert('좋아요를 취소했습니다');";
    echo "window.history.back()</script>";
}

위와같은 상태(해당 게시글에 좋아요)가 아니라면 liked 카운트를 +1 하고, likedb 테이블에 해당 게시글의 고유번호(idx)와 좋아요를 클릭한 사용자(username)의 정보를 입력한다

else {
    $sql3 = "
    UPDATE board SET liked=liked+1 WHERE idx=$idx;
    INSERT INTO likedb(like_post_id, like_user) VALUES ('$idx', '$username');
        ";
    $res3 = mysqli_multi_query($connect, $sql3);
    echo "<script>alert('이 글을 좋아합니다');";
    echo "window.history.back()</script>"; 
}

** like.php

<?php
    session_start();
    $connect = mysqli_connect('localhost', 'root', 'mysql', 'board');
    $idx = $_GET['idx'];
    $username = $_SESSION['username'];

    $sql = "SELECT * FROM likedb WHERE like_post_id='$idx' AND like_user='$username'";
    $res = mysqli_fetch_array(mysqli_query($connect, $sql));
    if($res){
    	$sql2 = "
            UPDATE board SET liked = liked - 1 WHERE idx = $idx;
            DELETE FROM likedb WHERE like_post_id = '$idx' AND like_user = '$username';
            ";
        $res2 = mysqli_multi_query($connect, $sql2);
        echo "<script>alert('좋아요를 취소했습니다');";
        echo "window.history.back()</script>";
    } else {
        $sql3 = "
        UPDATE board SET liked=liked+1 WHERE idx=$idx;
        INSERT INTO likedb(like_post_id, like_user) VALUES ('$idx', '$username');
        ";
        $res3 = mysqli_multi_query($connect, $sql3);
        echo "<script>alert('이 글을 좋아합니다');";
        echo "window.history.back()</script>"; 
    }
?>

※ 좋아요/좋아요 취소 구현

좋아요 누르기 전

좋아요 클릭

likedb에서 49번 게시글에 좋아요를 누른 사용자의 정보 확인

좋아요 취소

잘 삭제되었다

게시글 목록 페이지에서도 좋아요 개수를 확인할 수 있다

'Web Hacking Study > Web Page 만들기' 카테고리의 다른 글

게시판 페이지 개발 (날짜, 제목, 조회 순 정렬) (0)	2022.06.20
마이페이지 (개인정보 확인, 개인정보 수정, 비밀번호 변경 기능) (0)	2022.06.19
게시판 페이지 개발 (파일 업로드, 파일 다운로드) (0)	2022.06.07
게시판 페이지 개발 (게시글 검색 기능, 게시글 검색 시 기간 설정) (0)	2022.06.06
게시판 페이지 개발 (게시글 페이징) (0)	2022.06.05

게시판 페이지 개발 (좋아요/좋아요 취소)

'Web Hacking Study > Web Page 만들기' 카테고리의 다른 글

댓글

티스토리툴바