# 상세 페이지 : PHP

[상세페이지 구조 잡기](https://app.gitbook.com/s/OzogQ2aBWvTUNLb9AodP/web-server/undefined "mention")에 이어 오늘은 article page에 필요한 기능을 PHP로 구현해볼 차례이다.&#x20;

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

<mark style="color:blue;">**(1)**</mark> 상세 페이지(article.php)에 접근할 때, 조회수 증가 시키기

<mark style="color:blue;">**(2)**</mark> 사용자가 선택한 게시물 정보 가져와 출력하기&#x20;

**(3)** 게시물에 작성된 댓글 불러오기&#x20;

**(4)** 사용자들이 작성한 댓글 저장하기&#x20;

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

이 중에서도 이번 POST에서는 <mark style="color:blue;">**(1) & (2)**</mark>와 관련된 부분을 다룰 것이다.&#x20;

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

***

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

### \[ article.php ]

```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 전에 실행될 내용은 <mark style="color:blue;">**(1)조회수 증가**</mark>와 <mark style="color:blue;">**(5)에서 사용할 변수 정의**</mark> 정도가 되시겠다!

```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);
```

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

문제 없이 Query가 실행되었다면&#x20;

```php
$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에 업데이트 시킨다.

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

```php
$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에서 꺼내오는 흐름이다.&#x20;

마지막 줄에 선언해 둔 변수 post\_author & cur\_usr는 (5)에서 사용할 변수로&#x20;

* $post\_author : 사용자가 선택한 게시물의 작성자
* $cur\_usr : 현재 로그인해서 활동하고 있는 사용자

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

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

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

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

그 중 제일 상단에서 게시물 정보를 출력하는 영역이 <mark style="color:blue;">**\<form> tag - class : content\_box**</mark> 였다.

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

<mark style="color:blue;">**mysqli\_fetch\_array**</mark> 함수로 Query 결과인 Object 값을 배열로 변형했기 때문에&#x20;

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

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

참고로 <mark style="background-color:blue;">**화면에는 나타나지 않지만 idx 값을 갖는 \<input> tag를 만들어둔 이유**</mark>는&#x20;

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

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

이때 <mark style="background-color:blue;">**편집할 게시물이 어떤 게시물인지 알려줘야 하기에**</mark>&#x20;

게시물 정보를 저장해두는 board Table에서 <mark style="color:blue;">**식별 정보**</mark>로 사용하는 <mark style="color:blue;">**id**</mark>를 넘겨주긴 해야 하는데

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

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

여기까지 구현한 결과를 보면&#x20;

<figure><img src="https://3821708273-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Figb7ZJOlSINIWtoJhby7%2Fuploads%2FQAvsdyHE3YYPnjCdrLtl%2Fimage.png?alt=media&#x26;token=a0a17dd0-9811-4938-a1b2-08766fb4c792" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3821708273-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Figb7ZJOlSINIWtoJhby7%2Fuploads%2FNgcSMZVkH6z6DxqZNtlx%2Fimage.png?alt=media&#x26;token=7faa70a3-746a-4dbd-bd85-98281832593a" alt=""><figcaption></figcaption></figure>

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

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

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