정렬 & 검색 기능 - board page

DATE : 2023/12/02

이번엔 앞에서 만든 게시판에 (1)사용자가 원하는 카테고리 기준 정렬을 하거나

(2) 찾고자 하는 내용을 검색할 수 있는 기능을 더해보려고 한다.

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

<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만 해석해보기로 하자.

(전반적인 코드는 페이징 기능 - board page에서 이미 해석함)

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

Submit 버튼을 누르면

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

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

$_POST['order']으로 들어가게 된다.

(2) 사용자가 입력한 검색어는

ex) 
option> Author
INPUT > hanhxx

$_POST['search_value']로 전달되며

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

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

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

ex) 
OPTION > title
INPUT > t


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

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

title에 "t"가 들어가는 게시물만 DB에서 조회해 가져오게 되는 것이다.

이때 조회 된 게시물의 개수를

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

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

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

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

이때 가져오는 게시물은 title에 "t"가 들어갔다는 조건을 만족하는 게시물만 포함한다.

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

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

제목에 " t "가 들어간 게시물만 취합해, 제목 기준으로 정렬된 목록을 제공 받을 수 있다.

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

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

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

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

사용자가 클릭한 게시물의 상세 페이지로 이동하는 기능과 관련된 내용을 살펴보도록 하자!