# 정렬 & 검색 기능 - board page

이번엔 앞에서 만든 게시판에 <mark style="color:blue;">**(1)사용자가 원하는 카테고리 기준 정렬**</mark>을 하거나&#x20;

<mark style="color:blue;">**(2) 찾고자 하는 내용을 검색할 수 있는 기능**</mark>을 더해보려고 한다.

이 기능을 구현하기 위한 HTML element는 이미 만들어두었기 때문에&#x20;

```html
<div class="funcs">
    <form method="post">
        <select name="order" id="order">
            <option value="date" autofocus>Date</option>
            <option value="author">Author</option>
            <option value="title">Title</option>
            <option value="hit">Hit</option>
        </select>
        <input type="text" placeholder="Search" class="search" name="search_value">        
        <input type="submit" value="SEARCH" id="search_btn" name="submit">
    </form>
    <button id="write_btn">WRITE</button>
</div>
```

설명은 패스하고 관련 code만 해석해보기로 하자.&#x20;

(전반적인 코드는 [board-page](https://hh-rys-log.gitbook.io/normaltic/6-11-29/web-server/board-page "mention")에서 이미 해석함)

select tag에 들어있는 option을 하나 선택 & input에 검색하고자 하는 값을 입력해&#x20;

Submit 버튼을 누르면&#x20;

(1) 사용자가 고른 option tag의 value 값이

```
ex) Author을 고른 경우 
$_POST['order'] = author
```

<mark style="color:blue;">**$\_POST\['order']**</mark>으로 들어가게 된다.&#x20;

(2) 사용자가 입력한 검색어는&#x20;

```
ex) 
option> Author
INPUT > hanhxx
```

<mark style="color:blue;">**$\_POST\['search\_value']**</mark>로 전달되며&#x20;

option 값에 검색어가 들어가는 경우의 게시물만 DB에서 가져와

```
SELECT * FROM board WHERE $option LIKE '%$search_value%' ORDER BY $option
```

option 기준으로 오름차순 정렬을 실행한다.&#x20;

```
ex) 
OPTION > title
INPUT > t


SELECT * FROM board WHERE title LIKE '%$t%' ORDER BY title
```

예를 들어, 사용자가 title 카테고리를 선정한 후 " t "라는 검색어를 제시하면&#x20;

<mark style="background-color:blue;">**title에 "t"가 들어가는 게시물만**</mark> DB에서 조회해 가져오게 되는 것이다.&#x20;

이때 조회 된 게시물의 개수를&#x20;

```php
$res = mysqli_query($conn, $sql);
$cnt = mysqli_num_rows($res);
$post_per_page = 10;
                    
$start = ($page - 1) * $post_per_page;
```

$cnt에 할당하고 페이징 기능에 필요한 값을 계산한다.

```php
$get_post_sql = "SELECT * FROM board WHERE $option LIKE '%$search_value%' ORDER BY $option LIMIT $start,$post_per_page";
```

이후, start를 기준으로 10개의 게시물의 가져와 게시판 목록에 띄우게 되는 것이다.

이때 가져오는 게시물은 <mark style="color:blue;">**title에 "t"가 들어갔다는 조건을 만족하는 게시물만**</mark> 포함한다.

이제 코드가 제대로 동작하는 지 직접 확인해보자.&#x20;

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FLUL32JJNBMXjSGGDs54x%2Fimage.png?alt=media&#x26;token=fcee25fd-2150-43cb-bd25-126fdebc3261" alt=""><figcaption></figcaption></figure>

index page에서 option: title & search: t 를 입력해보면&#x20;

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FzA7shaaRhOqtmBtiMh0B%2Fimage.png?alt=media&#x26;token=36887f85-8a41-41bf-9619-ba27d17c4d20" alt=""><figcaption></figcaption></figure>

<mark style="background-color:blue;">**제목에 " t "가 들어간 게시물만 취합해, 제목 기준으로 정렬된 목록**</mark>을 제공 받을 수 있다.

option: Author & search: han을 입력해보면&#x20;

<figure><img src="https://2312435576-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOzogQ2aBWvTUNLb9AodP%2Fuploads%2FRi0VKdLuUn1EXMAwfHou%2Fimage.png?alt=media&#x26;token=b408f320-d143-40e3-9968-a07659445881" alt=""><figcaption></figcaption></figure>

author에 "han"이 들어간 경우만 모아와 리스트로 제공되는 걸 볼 수 있다.

이렇게 해서 정렬 & 검색 기능을 만들어보았다!

전체 코드는 이미 공개했지만 다음으로는&#x20;

사용자가 클릭한 <mark style="background-color:blue;">**게시물의 상세 페이지로 이동**</mark>하는 기능과 관련된 내용을 살펴보도록 하자!
