# 상세페이지 구조 잡기

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

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

* 게시물 내용을 출력하는 영역 (작성자, 제목, 내용, 작성일)
* 게시물에 달린 댓글을 보여주는 영역 (작성자, 댓글)
* 댓글 작성 form&#x20;

으로 구성할 예정!&#x20;

### \[ article.php ]

```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로 전반적인 레이아웃부터 잡고 갈 것이다.&#x20;

위에서 언급한 크게 3가지 영역은 각각&#x20;

* 게시물 내용 : \<form> tag - class : content\_box
* 댓글 내용 : \<div> tag - class : comment\_box
* 댓글 작성 : \<form> tag - class : comment\_form

로 나눠진다.&#x20;

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

#### 1] \<form> tag - class : content\_box

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

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

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

게시물의 내용을 출력하는 \<textarea> tag 경우,&#x20;

내용을 보여주는 것이 목적이기 때문에 <mark style="color:blue;">**readonly**</mark> 처리를 해둔다.&#x20;

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

<mark style="color:blue;">**사용자와 작성자가 일치하는 경우에만**</mark> 활성화 시켜 내용을 수정할 수 있도록 할 예정이다.&#x20;

#### 2] \<div> tag - class : comment\_box

```php
<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 부분의 코드를 살펴보자.&#x20;

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

comment\_box에 할당한 영역을 넘어갈 정도로 댓글이 많아지게 되면 자동으로&#x20;

<mark style="color:blue;">**scroll 바**</mark>가 생성되도록 CSS를 작성해두었다.&#x20;

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

이후에 PHP로 수정할 예정!

#### 3] \<form> tag - class : comment\_form

```php
<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가 들어간다.&#x20;

comment\_btn을 누르면 textarea에 입력한 댓글이 DB에 저장되는 흐름으로&#x20;

DB에 쌓인 댓글을 comment\_box 영역으로 가져와 보여주게 되는 것이다.&#x20;

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

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

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

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FtNd7Sj16Lt9307RXfJqW%2Fimage.png?alt=media&#x26;token=218f1aa7-7da2-451e-952f-c031e2a91db7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FeUhOWkgvQXp5Sd8PaFRx%2Fimage.png?alt=media&#x26;token=27fdf740-d53f-46cd-ac7d-727967bbb430" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FxoynM19oiSi7jvNOtvCN%2Fimage.png?alt=media&#x26;token=4e242edf-891c-4256-8f52-ca2a19401a31" alt=""><figcaption></figcaption></figure>

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

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