[HTML/PHP] html과 php, mysql을 활용한 간단한 게시판 만들기 #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>

 

그냥 넣기엔 좀 심심해서 자바스크립트와 애니메이션을 사용하여 페이드인 효과를 주어봤습니다.

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

 

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

 

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

 

결론

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

검색 기능을 통해서 게시판에서 자신이 원하는 글을 쉽고 빠르게 찾을 수 있으니, 검색 기능은 유용하면서도 필수적인 기능이라 생각이 듭니다.

 

글쓰기와 삭제기능을 아직 넣지 않았으니 다음 글에서는 글쓰기와 삭제기능 넣어보도록 하겠습니다.