[HTML/PHP] 간단한 게시판 만들기 #3 (검색기능)

 

 

 

간단한 게시판 만들기 3번째 글입니다.

이전 포스트에 이어서 이번에는 게시판의 필수 기능 중 하나인 검색 기능을 추가해 보겠습니다.

검색 기능을 통해 내가 원하는 게시글이 있는지 빠르게 찾을 수 있으므로 검색기능은 필수적으로 추가해 보도록 하겠습니다.

 

728x90

 

---

 

 HTML 서치바 틀 만들기

 

먼저 검색할 텍스트를 입력할 서치바를 만들어 줍니다.

css는 나중에 맘에 드는 형식으로 수정해 보겠습니다. 일단은 네모 박스를 만들어줍니다.

 

<div class="title_box">Jongs 게시판</div>
<div style="text-align: right; padding: 20px 0 10px 0;">
    <form name="notice_search_form" action="<?=$PHP_SELF?>" method="POST" style="display: inline;">
        <span style="float:left; position: relative; bottom: 7px;">
            <input type="text" name="notice_search_text" value="<?=$notice_search_text?>">
            <input type="image" style="width:23px; position: relative; top: 6px;">
        </span>
    </form>
    <input type="button" value="글쓰기">
    <input type="button" value="삭제">
</div>

 

 

위 코드처럼 텍스트 박스를 만들어 준 뒤 name을 notice_search_text로 지정해 줍니다.

value="<?=$notice_search_text?>" 밸류값에 검색한 이후 텍스트 박스에 무엇을 검색했는지 남아 있어야 하니,

검색한 텍스트 값을 넣어 줍니다.

 

input type을 image로 설정하면 이미지 클릭 시 form의 action이 동작하게 됩니다.

submit의 버튼과 같은 기능을 합니다.

 

form으로 검색 박스를 감싸주어 검색한 텍스트를 POST방식으로 넘기도록 하겠습니다.

action에 $PHP_SELF를 사용함으로 submit 될 시 현재페이지로 값을 넘겨주게 됩니다.

즉, 검색을 눌렀을 때 현재 페이지로 검색한 텍스트 값을 넘겨주게 되는 것이지요.

 

검색한 텍스트를 넘겨받았으니 이제 그 텍스트로 DB에서 검색하여 출력해 주면, 자신이 원하는 값만 받아서 볼 수 있습니다.

 

 

서치바 추가 후 페이지

 

 

 

그럼 위와 같이 조그마한 검색 박스가 만들어진 것을 확인할 수 있습니다.

 

 

PHP DB쿼리

 

이제 이전에 작성한 쿼리문을 조금 수정해 주어 DB에서 검색한 값들만 게시판 리스트에 뿌려주도록 해보겠습니다.

 

//페이징url
$url = $PHP_SELF."?notice_search_text=".$notice_search_text."&page="; 

if($notice_search_text) {
    $where = "where title like '%$notice_search_text%' or content like '%$notice_search_text%'";
}

$sql = "select * from test_list $where order by reg_date DESC limit $limit_page, $page_num";
$res = $db->query($sql);

$total = $db->fetch_array("SELECT count(*) FROM test_list $where");
$total_cnt  = ceil($total[0] / $page_num);  //전체페이지수

 

 

다른 건 건드릴 필요 없고 이전에 했던 작업에서 위의 쿼리 부분만 조금 수정해 주면 됩니다.

 

url에 검색하고 페이지가 이동되었을 때를 위해 검색어도 포함시켜 주어 다른 페이지에도 검색한 것이 유지되도록 합니다.

 

notice_search_text가 있을 경우 where 절을 추가하여 DB에서 조건을 걸어줍니다.

제목(title)뿐만 아니라 내용(content)에도 검색한 단어가 있을 경우 출력되도록 해줍니다.

 

이렇게만 하면 검색기능은 끝이 납니다.

 

검색 기능으로 검색시 나오는 이미지

 

 

test라고 검색했을 때 제목에 test가 없는 게시글도 검색 결과로 나오는 이유는,

게시판 내용에 test가 포함되어 있기 때문입니다. 내용과 제목을 함께 검색하게 됩니다.

 

 

 

반응형

 

 

CSS로 꾸미기

 

 

이제 CSS를 활용해서 조금만 꾸며보겠습니다.

 

<script type="text/javascript">
    $(document).ready(function() {
        $("#search").click(function() {
            $("#notice_search_form").show();
            $(this).hide();
        });
    });
</script>

<style>
	@keyframes fadeInleft {
        0% {
            opacity: 0;
            width: 0rem;
        }
        to {
            opacity: 1;
            width: 100%rem;
        }
    }
    #notice_search_form {
        position: relative; 
        left: -30px; 
        display:none; 
        animation: fadeInleft 1.0s;
        width: 30%;
        float: left;
    }
    #notice_search_text {
        width: 85%;
        border-radius: 20px;
        padding: 6px 0;
        text-indent: 20px;
        border: solid 2px;
    }

    #search_img {
        width: 22px;
        position: absolute;
        right: -30px;
        top: 4px;
        border: none;
        display: inline-block;
    }	
</style>

<div class="title_box">Jong's 게시판</div>
<div style="text-align: right; padding: 20px 0 10px 0; position: relative;">
    <form name="notice_search_form" id="notice_search_form" action="<?=$PHP_SELF?>" method="POST">
        <input type="text" name="notice_search_text" id="notice_search_text" value="<?=$notice_search_text?>">
        <input type="image" id="search_img" src="<?=$img_src?>" >
    </form>
    <img id="search" src="<?=$img_src?>" style="width:23px; position: relative; float:left;"/>
    <input type="button" value="글쓰기">
    <input type="button" value="삭제">
</div>

 

 

CSS를 작업하면서 자바스크립트와 애니메이션을 사용하여 페이드인 효과를 주어봤습니다.

이미지 src는 너무 길어서 위에 php를 사용하여 변수로 선언해 두었습니다.

 

실제로 동작하면 애니메이션 효과를 통해 서치바가 나타나는 것을 확인할 수 있습니다.

 

CSS와 애니메이션을 추가한 서치바

 

 

결론

 

이렇게 검색은 끝이 났습니다.

검색 기능을 통해서 게시판에서 자신이 원하는 글을 쉽고 빠르게 찾을 수 있으니,

검색 기능은 유용하면서도 필수적인 기능이라 생각이 듭니다.

검색 기능이 어떻게 동작하는지 확인해보고, 코드를 바꾸어 새로운 기능도 추가해 보시기 바랍니다.