상세 페이지 : PHP

DATE : 2023/12/06

상세페이지 구조 잡기에 이어 오늘은 article page에 필요한 기능을 PHP로 구현해볼 차례이다.

코드 구현이 필요한 부분을 세부적으로 나눠보면 다음과 같다.

(1) 상세 페이지(article.php)에 접근할 때, 조회수 증가 시키기

(2) 사용자가 선택한 게시물 정보 가져와 출력하기

(3) 게시물에 작성된 댓글 불러오기

(4) 사용자들이 작성한 댓글 저장하기

(5) Edit 버튼 - 게시물 편집 페이지로 이동

이 중에서도 이번 POST에서는 (1) & (2)와 관련된 부분을 다룰 것이다.

이제 바로 본론으로 들어가 PHP 내용을 살펴보자.

---

아래에 작성된 코드는 article.php - HTML tag 상단에 작성해둔 PHP code이다.

[ article.php ]

<?php
    require_once("db_connect.php");
    require_once("jwt.php");

    $idx = $_GET['idx'];


    $sql = "SELECT hit FROM board WHERE id='$idx'";
    $result = mysqli_query($conn, $sql);

    if(!$result) {
        echo "<script>alert('DB Error');</script>";
        exit;
    }
    if(mysqli_num_rows($result) != 1) {
        echo "<script>alert('REQUEST Error');</script>";
        exit;
    }
    
    $row = mysqli_fetch_array($result);

    //update a hit count 
    $hit = (int)$row['hit'] + 1;
    $sql_hit_update = "UPDATE board SET hit='$hit' WHERE id='$idx'";

    $hit_update_res = mysqli_query($conn, $sql_hit_update);

    if(!$hit_update_res) { // $res != 1이면 즉, error면 
        echo "<script>alert('DB Error');</script>";
        exit;
    }

    //after update
    $sql = "SELECT * FROM board WHERE id = '$idx'";
    $res = mysqli_query($conn, $sql);
    $data = mysqli_fetch_array($res);

    $post_author = $data['author'];
    $cur_usr = getToken($_COOKIE['JWT'])['usr'];
    // var_dump($data);
?>

HTML code 전에 실행될 내용은 (1)조회수 증가와 (5)에서 사용할 변수 정의 정도가 되시겠다!

$idx = $_GET['idx'];


$sql = "SELECT hit FROM board WHERE id='$idx'";
$result = mysqli_query($conn, $sql);

if(!$result) {
    echo "<script>alert('DB Error');</script>";
    exit;
}
if(mysqli_num_rows($result) != 1) { 
    echo "<script>alert('REQUEST Error');</script>";
    exit;
}
    
$row = mysqli_fetch_array($result);

우선, 사용자가 선택한 게시물 ID로 hit column을 조회하는 SQL을 실행한다.

문제 없이 Query가 실행되었다면

$hit = (int)$row['hit'] + 1;
$sql_hit_update = "UPDATE board SET hit='$hit' WHERE id='$idx'";

$hit_update_res = mysqli_query($conn, $sql_hit_update);

if(!$hit_update_res) { // $res != 1이면 즉, error면 
    echo "<script>alert('DB Error');</script>";
    exit;
}

hit column 값을 가져와 1을 더한 후, 변경된 조회수를 Table에 업데이트 시킨다.

조회수를 업데이트 시킨 후, 본격적으로 상세 페이지에 띄울 게시물 정보를

$sql = "SELECT * FROM board WHERE id = '$idx'";
$res = mysqli_query($conn, $sql);
$data = mysqli_fetch_array($res);

$post_author = $data['author'];
$cur_usr = getToken($_COOKIE['JWT'])['usr'];

Table에서 꺼내오는 흐름이다.

마지막 줄에 선언해 둔 변수 post_author & cur_usr는 (5)에서 사용할 변수로

• $post_author : 사용자가 선택한 게시물의 작성자

• $cur_usr : 현재 로그인해서 활동하고 있는 사용자

두 값을 비교해서 일치하는 경우에만, EDIT 버튼을 활성화 시킬 생각이다.

자! 다음으로 넘어가서 위에서 변수 data에 넣어둔 값을 가져와 화면에 출력 시켜 보자.

...
<div class="container">
        <form class="content_box" method="post" action="edit_post.php">
            <input type="text" name="idx" value="<?=$idx?>" style="display: none;">
            <h1>TITLE : <?=$data['title'];?></h1>
            <h3>AUTHOR : <?=$data['author'];?></h3>
            <h3>DATE : <?=$data['date'];?></h3>
            <div class="content">
                <h2>CONTENT : </h2>
                <textarea readonly><?=$data['content'];?></textarea>
                <?php 
                if ($cur_usr == $post_author) {?>
                    <input type="submit" value="Edit">
                <?php } else { ?>
                    <input type="submit" value="Edit" disabled>
                <?php }?>
            </div>            
        </form>
    ...

상세 페이지의 구조를 다시 떠올려 보면 전체적인 영역이 크게 세 개로 분할 되고

그 중 제일 상단에서 게시물 정보를 출력하는 영역이 <form> tag - class : content_box 였다.

따라서 그 안에 title, author, date, content 내용을 출력해주고, 이때

mysqli_fetch_array 함수로 Query 결과인 Object 값을 배열로 변형했기 때문에

<?=$data['title']?>

이와 같이 배열 값을 참조하는 형태로 코드를 작성해주면 된다!

참고로 화면에는 나타나지 않지만 idx 값을 갖는 <input> tag를 만들어둔 이유는

<input type="text" name="idx" value="<?=$idx?>" style="display: none;">

form tag 안에 들어있는 Edit 버튼이 눌렸을 때, 해당 게시물을 편집하는 페이지로 이동할 건데

이때 편집할 게시물이 어떤 게시물인지 알려줘야 하기에

게시물 정보를 저장해두는 board Table에서 식별 정보로 사용하는 id를 넘겨주긴 해야 하는데

이를 굳이 페이지에 출력할 필요는 없기 때문!

이렇게 해서 필요한 정보는 다음 페이지로 넘겨주되, 페이지 상에 나타나지 않도록 처리하면 끝!

여기까지 구현한 결과를 보면

상세 페이지에는 게시물의 제목, 작성자, 작성일, 내용이 정상적으로 출력 되는 걸 볼 수 있고

index page에서 각 게시물의 조회수가 변화하는 것 또한 확인할 수 있다. 👍

다음으로는 상세 페이지 구조 중에서도

사용자가 작성한 댓글을 저장하는 과정에 관한 내용을 살펴볼 것이다.