Php로 웹 개발하기 : 게시판(2) - Search

게시판 만들기(1)에서는 test DB를 생성하고 데이터를 불러오는 것까지 마무리했다.

이번에는 초기 화면에서 모든 데이터를 확인하고, 검색에 따라 내용을 바꾸는 것까지 마무리 지은 후, 대충 만들어두었던 CSS를 다듬어 보았다.

 

① 검색 기능

우선 코드는 기존의 게시판 만들기(1)을 토대로 진행하되, form안의 input 들의 name을 다음과 같이 수정하였다.

<form method = "post">
    <input id = "search_addr" name = "board_result" type = "text" placeholder="Search" />
    <input type = "submit" name = "board_search" value = "🔍" id = "search_btn" />
</form>

 

table 코드도 그대로 사용하였지만 tbody 부분을 다음과 같이 수정하였다.

<tbody>
    <?php
        if(array_key_exists('board_search', $_POST)){
            board();
        }
        else{
            $conn = mysqli_connect('localhost', 'ID', 'PW', 'DBname');
            $sql = "SELECT * FROM board;";
            $result = mysqli_query($conn, $sql);
            while($row = mysqli_fetch_array($result)){
                echo "<tr><td>".$row['username']."</td><td>".$row['title']."</td><td>".$row['views']."</td><td>".$row['date']."</td></tr>";
            }
            mysqli_close($conn);
        }
    ?>
</tbody>

코드를 설명하자면, array_key_exitst로 'board_search'라는 이름을 가진 input값이 POST를 통해 넘어왔는지 확인을 해준다. 즉, search 버튼이 눌렸는지 체크해주는 것이다.

버튼이 눌리지 않았다면 초기 상태이므로 else에서 DB에 연결하여 현재 테이블 데이터를 가져오고, 버튼이 눌렸다면 board 함수를 호출한다.

초기상태

 

<?php
    function board(){
        if(isset($_POST['board_result'])){
            $userID = $_POST['board_result'];
            
            $conn = mysqli_connect('localhost', 'ID', 'PW', 'DBname');
            $sql = "SELECT * FROM board where username like '%$userID%';";
            $result = mysqli_query($conn, $sql);

            if(mysqli_num_rows($result) > 0){
                while($row = mysqli_fetch_array($result)){
                    echo "<tr><td>".$row['username']."</td><td>".$row['title']."</td><td>".$row['views']."</td><td>".$row['date']."</td></tr>";
                }
            } else{
                echo "<script>alert('사용자가 존재하지 않습니다.')</script>";
            }
            mysqli_close($conn);
        }
    }
?>

board 함수에서는 기존과 같이 검색창에서 입력된 값을 username으로 갖는 set을 찾아서 출력해준다.

아무것도 검색하지 않으면 모든 테이블을 호출할 수 있도록 $_POST ['board_result']가 NULL인지 확인하는 조건을 지워주었다.

검색 결과

 

② CSS 추가

css는 사실 모의 해킹을 위한 웹 개발 실습과는 관련이 없는 부분이라 굳이 설명을 해오지 않고 있다.

table의 구조만 간단히 설명하자면, 제목의 각 칸들을 th, 내용의 각 칸들을 td로 감싸고 th나 td들이 모인 한 행을 tr로 감싸준다. 제목의 행(들)을 thead, 내용 부분을 tbody로 감싸고, 그 thead와 tbody를 감싸는 것이 table이다.

예시로, 제목과 내용의 배경색은 것은 각각 thead와 tbody에서 지정해주고, 각 칸들의 크기나 글자의 위치는 th와 td에서 수정해주었다.

 

※ CSS가 반영이 안 될 때 ※

CSS를 수정했는데 화면에 반영이 되지 않는 경우가 많아서 찾아보았는데, 캐시 및 메모리까지 새로 고침 하는 ctrl + F5를 사용해야 반영된 화면을 확인할 수 있었다.