상세 페이지 편집

DATE : 2023/12/07

상세 페이지와 관련해 계획해둔 마지막 기능은 Edit 이다.

Edit 버튼은 기본적으로 게시물 작성자와 현재 사용자의 일치 여부를 파악해

일치하는 경우에는 활성화
일치하지 않는 경우에는 비활성화

시킬 것이다.

이와 관련된 부분은 <div class = ' content'> 내에 작성되어 있다.

<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>

Edit 버튼은 게시물의 정보를 보여주는 content_box 내에서 가장 하단에 위치하며

상세 페이지 : PHP에서 미리 정의해둔 변수 cur_usr & post_author 를 가지고

if ($cur_usr == $post_author) {?>
    <input type="submit" value="Edit">
<?php } else { ?>
    <input type="submit" value="Edit" disabled>
<?php }?>

두 변수 값이 일치하면 버튼을 활성화 시키고,

일치하지 않으면 버튼을 사용하지 못하도록 disabled 처리한다.

이렇게 되면 현재 사용자가 선택한 게시물이 자신이 작성했던 게시물이라면 편집 권한을 갖게 되는 것이고

다른 사람이 작성한 게시물이라면 편집 페이지로 넘어갈 수 없게 된다.

hanhxx 계정으로 로그인한 상태로, hanhxx가 작성한 게시물을 클릭하면

버튼이 활성화되어 클릭할 수 있게 되어있지만

만약 Dilmung이 작성해둔 게시물을 선택한다면

이와 같이 버튼을 클릭해도 동작하지 않는 상태임을 확인할 수 있다!

다음으로 진행할 부분은 Edit 버튼을 눌렀을 때, 게시물 정보를 수정할 페이지를 등장 시키는 것!

[ edit_post.php ]

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

    $idx = $_POST['idx'];
    $sql = "SELECT * FROM board WHERE id='$idx'";
    $res = mysqli_query($conn, $sql);

    $row = mysqli_fetch_array($res);
    
    $title = $row['title'];
    $content = $row['content'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Write</title>
    <link rel="stylesheet" href="./css/write_post.css">
</head>
<body>
    <form action="./update_board.php" method="post">
        <input type="text" name="idx" value="<?=$idx;?>" style="display: none;">
        <div class="post_info">
            <label for="title">TITLE : </label>
            <input type="text" name="title" id="title" value="<?=$title?>">
        </div>
        <!-- file, image upload 기능 넣기 -->
        <div class="post_info">
            <label for="content">CONTENT : </label>
            <textarea name="content" id="content" cols="60" rows="12" maxlength="4096"><?=$content?></textarea>
        </div>
        <button id="post_btn">POST</button>
    </form>
</body>
</html>

전체 레이아웃과 스타일은 게시물 작성 페이지와 동일하지만 수행하는 동작이 조금 달라진다.

코드 상단에 작성된 PHP code는 상세 페이지에서 넘겨준 게시물 ID로

게시물의 내용, 제목을 가져와 편집할 form에 넣어둠으로써 (아래와 같이)

현재 해당 게시물의 제목과 내용이 무엇인지 보여주는 형태로 구성된다.

게시물 내용을 바꾸고 싶다면 제목과 내용을 수정한 후에

POST 버튼을 누르면 끝!

[ update_post.php ]

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

    $idx = $_POST['idx'];
    $title = $_POST['title'];
    $content = $_POST['content'];
    $date = date("Y-m-d H:i:s");    

    $sql = "UPDATE board SET title='$title', content='$content', date='$date' WHERE id='$idx'";
    $res = mysqli_query($conn, $sql);

    if(!$res) {
        echo "<script>alert('something was wrong');
        location.replace('article.php?idx=$idx');
        </script>";
        exit;
    } else {
        echo "<script>alert('Successfully, Your Post is Edited');
        location.replace('article.php?idx=$idx');
        </script>";
        exit;
    }
?>