6주차 : 11/29

상세페이지 구조 잡기

DATE : 2023/12/04

이제부터 상세 페이지를 만들어보려고 한다!

board.php에서 사용자가 게시물을 하나 클릭했을 때 보여질 페이지로, 전체적인 구조는

  • 게시물 내용을 출력하는 영역 (작성자, 제목, 내용, 작성일)

  • 게시물에 달린 댓글을 보여주는 영역 (작성자, 댓글)

  • 댓글 작성 form

으로 구성할 예정!

[ article.php ]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/article.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <form class="content_box" method="post" action="edit_post.php">
            <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>
                <input type="submit" value="Edit">
            </div>            
        </form>
        <div class="comment_box">
            <!-- php로 구현할 것 -->
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
        </div>
        <form action="./upload_comment.php" class="comment_form">
            <textarea name="comment"></textarea>
            <input type="submit" value="Comment" name="comment_btn">
        </form>
    </div>
</body>
</html>

PHP로 구현해야 할 부분이 많지만 우선은 HTML로 전반적인 레이아웃부터 잡고 갈 것이다.

위에서 언급한 크게 3가지 영역은 각각

  • 게시물 내용 : <form> tag - class : content_box

  • 댓글 내용 : <div> tag - class : comment_box

  • 댓글 작성 : <form> tag - class : comment_form

로 나눠진다.

첫 번째로 게시물 내용을 보여주는 영역부터 구조를 짜보도록 하자.

1] <form> tag - class : content_box

<form class="content_box" method="post" action="edit_post.php">
    <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>
        <input type="submit" value="Edit">
    </div>            
</form>

사용자가 선택한 게시물의 내용을 보여주는 영역으로

게시물의 제목, 내용, 작성일, 작성자 정보를 board Table에서 가져와 출력하는 형태이다.

게시물의 내용을 출력하는 <textarea> tag 경우,

내용을 보여주는 것이 목적이기 때문에 readonly 처리를 해둔다.

<input> tag의 경우는 상세 페이지에 출력될 게시물 내용을 수정하고자 할 때,

사용자와 작성자가 일치하는 경우에만 활성화 시켜 내용을 수정할 수 있도록 할 예정이다.

2] <div> tag - class : comment_box

<div class="comment_box">
            <!-- php로 comment 있는 거 확인해서 띄우기 -->
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
            <div class="comments">
                <h4 class="author">From : Json</h4>
                <p>i want to eat delicious meal.</p>
            </div>
</div>

다음으로 게시물에 달린 댓글을 보여줄 comment_box 부분의 코드를 살펴보자.

각 댓글은 작성자와 내용을 보여주게 되는 데, 이때 댓글 하나에 대한 정보는 <div> tag로 감싸지게 된다.

comment_box에 할당한 영역을 넘어갈 정도로 댓글이 많아지게 되면 자동으로

scroll 바가 생성되도록 CSS를 작성해두었다.

지금은 레이아웃을 짜는 단계이기 때문에, 직접 h4 & p tag 내용을 작성해두었지만

이후에 PHP로 수정할 예정!

3] <form> tag - class : comment_form

<form action="./upload_comment.php" class="comment_form">
    <textarea name="comment"></textarea>
    <input type="submit" value="Comment" name="comment_btn">
</form>

마지막으로 댓글을 작성하는 form에 대해 살펴보도록 하자!

<form> tag 안에는 댓글을 작성할 <textarea> & 댓글 업로드 버튼 역할의 <input> tag가 들어간다.

comment_btn을 누르면 textarea에 입력한 댓글이 DB에 저장되는 흐름으로

DB에 쌓인 댓글을 comment_box 영역으로 가져와 보여주게 되는 것이다.

이렇게 하면 전체적인 레이아웃은 완성!

이젠 필요한 기능을 구현하기 위해 PHP code를 작성해주어야 한다.

그 전에 완성된 페이지를 잠깐 확인해보자면

페이지의 상단을 시작으로 게시물 내용을 출력하는 영역과

위에서 손수 작성해둔 댓글도 볼 수 있고

(댓글이 많아지면 사진과 같이 오른쪽에 스크롤 바가 생성됨)

댓글을 작성할 수 있는 form까지! 확인해볼 수 있다. 👏👏👏

다음으로는 이 페이지에 필요한 여러기능을 PHP로 구현해보도록 하자! Go Go!

Previous상세 페이지 이동 - board page

Last updated