[웹 개발-PHP] 조회수 & 좋아요 기능 구현

 

저번시간에는 파일업로드 기능을 구현해봤습니다.

 

https://jamesbexter.tistory.com/entry/웹-개발-PHP-파일-업로드-기능-구현

[웹 개발-PHP] 파일 업로드 기능 구현(+확장자 체크)

 

 

"이번시간에는 조회수 & 좋아요 기능을 구현해보겠습니다!"

 

     <목차>

1. 조회수 기능
2. 좋아요 기능 (post_read.php)
3. 좋아요 기능 (ajax 스크립트)
4. 좋아요 기능 (like.php)
5. 좋아요 버튼 (CSS)

 

---

<1. 조회수 기능 >

 

조회수 기능은 정말 간단히 구현하였습니다.

 

post_read.php 페이지가 로드가 되면 post의 idx에 해당하는 열의 view 값을 +1 해주었습니다.

 

아래 자바스크립트 코드를 HTML 코드 head 태그 부분에 추가해주었습니다.

 

[post_read.php]

 <script>
         if (!window.w){
            <?php
                $sql = "update postinfo set view=view+1 where idx=".$idx;   //열람시 조회수 상승 기능
                mysqli_query($dbcon,$sql);
            ?>
            window.w=1;
         }
    </script>

 

 

---

< 2. 좋아요 기능 (post_read.php) >

일단 좋아요 내역을 담아둘 테이블을 따로 만들어 주었습니다.

 

- table 이름 : post_like

- Column 이름

> like_idx  : 좋아요의 idx

> user_idx : 좋아요 누른 사람의 idx

> post_idx : 좋아요 누른 게시물의 idx

 

이후 sql2 구문으로 게시물의 Total 좋아요 개수를 판단하였고,sql3구문으로 사용자의 좋아요 여부를 판단했습니다.

 

---

 

[post_read.php 중 sql 구문 코드]

<?php
            $sql = "select * from postinfo where idx='".$idx."'";   //게시물 내용을 가져오는 sql 구문
            $result = mysqli_query($dbcon,$sql);
            $row=mysqli_fetch_array($result);

            $sql2="select like_idx from post_like where post_idx=".$row['idx'];    //total 좋아요 개수를 최신화 시키는 sql2
            $result2= mysqli_query($dbcon,$sql2);
            $like_count=mysqli_num_rows($result2);

            $sql3="select like_idx from post_like where post_idx=".$row['idx']." and user_idx=".$_SESSION['user_idx']; //사용자 좋아요 여부판단용 sql3
            $result3= mysqli_query($dbcon,$sql3);
            $row3=mysqli_fetch_array($result3);
        ?>

 

---

 

 

이후에 좋아요 버튼 부분을 작성하였습니다.

 

하트모양은 https://fontawesome.com/account/cdn 페이지에서 가져왔습니다.

 

Ajax 통신을 해줄것이기 때문에 id="btn_like" 라고 하트버튼의 id 값을 명시해줍니다.

 

 

[post_read.php 중 좋아요 버튼 부분]

<div class="like-box">
            <?php if($row3['like_idx']){    // 만약 현재사용자가 좋아요를 누른상태라면 ?> 
                <div id="btn_like" class="like-button"><i class="fa-solid fa-heart"></i><p><?php
                echo $like_count; ?></p></div>
            <?php } else {      // 좋아요를 안누른 상태 ?>  
                <div id="btn_like" class="like-button"><i class="fa-regular fa-heart"></i><p><?php
                echo $like_count; }   ?></p></div>
        </div>

 

---

< 3. 좋아요 기능 (ajax 스크립트) > 

 

바로 위에서 만들었던 버튼을 누르면 liek.php 로 post_idx , user_idx 를 POST 변수값으로 보내게 스크립트 코드를 작성해주었습니다.

 

이 요청의 응답은 id=btn_like 로 명시된 하트버튼으로 들어오게 됩니다.

 

 

[post_read.php 중 자바스크립트 부분]

(위치는 Body 태그 제일 하단) 

<script>
    $(document).ready(function(){
        $('#btn_like').click(function(){
            $.ajax({
                type: 'POST',
                url: 'like.php',
                data: {
                    post_idx: "<?php echo $idx; ?>",
                    user_idx: "<?php echo $_SESSION['user_idx']; ?>"
                },
                success: function(data) {
                    if (data) {
                        $("#btn_like").html(data);
                    }
                },
                error: function(xhr, status, error) {
                    console.log('AJAX 요청 실패:', status, error);
                }
            });
        });
    });
    </script>

 

 

---

< 4. 좋아요 기능 (like.php) >

 

이제 하트버튼을 누르면 like.php 로 변수를 보냈으니 like.php 에서 처리를 해주어야겠죠!

 

like.php 에서 sql 구문을 실행후 echo 를 통해 다시 post_read.php 에 있는 하트버튼에 응답을 보내게 됩니다.

 

 

[like.php]

<?php 
    include 'dbcon.php';

    session_start(); 
    if(!($_SESSION['loggedin'])){	// 점프해서 mypage.php 로 오는것을 방지.
        header('Location: /index.php');
        exit();}

    $post_idx=$_POST['post_idx'];
    $user_idx=$_POST['user_idx'];


    $sql="select like_idx from post_like where post_idx=".$post_idx." and user_idx=".$user_idx; //사용자 좋아요 여부판단용 sql
    $result= mysqli_query($dbcon,$sql);
    $row=mysqli_fetch_array($result);


    if($row){   //이미 좋아요를 눌렀을때
        $sql="delete from post_like where post_idx=".$post_idx." and user_idx=".$user_idx;
        $result = mysqli_query($dbcon,$sql);

        $sql2="select like_idx as count from post_like where post_idx=".$post_idx;    //total 좋아요 개수를 최신화 시키는 sql2 구문
        $result2= mysqli_query($dbcon,$sql2);
        $like_count=mysqli_num_rows($result2);

        echo "<i class='far fa-heart'></i>".$like_count; // 버튼에 빈 하트 표시
    }else{  //좋아요를 안눌렀을때

        $sql = "insert into post_like (user_idx,post_idx) values ($user_idx,$post_idx)";
        $result = mysqli_query($dbcon,$sql);

        $sql2="select like_idx as count from post_like where post_idx=".$post_idx;    //total 좋아요 개수를 최신화 시키는 sql2 구문
        $result2= mysqli_query($dbcon,$sql2);
        $like_count=mysqli_num_rows($result2);
        
        echo "<i class='fas fa-heart'></i>".$like_count; // 버튼에 꽉 찬 하트 표시
    }

?>

 

 

---

< 5. 좋아요 버튼 (CSS) >

마지막으로 하트버튼을 누를때 동적인 움직을 위해서 CSS 에 추가한 내용입니다.

 

[하트버튼을 위한 CSS 코드]

.like-button {
    cursor: pointer;
    /* 클릭 가능하게 보이도록 */
    display: inline-flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 25px;
    background-color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.like-button i {
    font-size: 24px;
    /* 하트 아이콘의 크기 조정 */
    color: #ff0000;
    /* 하트 아이콘의 색상 */
    margin-right: 5px;
    /* 아이콘과 텍스트 사이의 간격 */
}

.like-button p {
    margin: 0;
    /* 텍스트의 기본 여백 제거 */
    font-size: 16px;
    /* 텍스트의 크기 조정 */
}

.like-button:hover {
    background-color: #f0f0f0;
    /* 마우스 오버 시 배경색 변경 */
    transform: scale(1.1);
    /* 버튼을 살짝 확대 */
}

.like-button:active {
    transform: scale(0.9);
    /* 클릭 시 버튼을 축소 */
}

 

---

긴 글 읽어주셔서 감사합니다!