적용버전 : XE Ver 1.4 통합 검색 폼 만들기

무엇을 찾으시죠?

통합 검색 폼 (Search Form)

검색폼통합 검색은 웹사이트 안에서 찾고자 하는 단어를 포함한 글과 파일을 찾는 유용한 기능입니다. 통합 검색을 이용해 찾을 수 있는 내용의 대상은 문서(document), 댓글(comment), 트랙백(trackback), 멀티미디어(multimedia), 파일(file)입니다. 일반적으로 게시판에서 작성된 글의 내용과 페이지에서 작성된 내용 중에 포함된 단어를 찾을 수 있고, 외부페이지로 불러오는 형식의 내용에서는 찾을 수 없습니다. 검색 폼은 각각의 게시판 하단에서도 사용되고 있는데 이경우에는 해당 게시판의 내용 중에서만 찾게 됩니다. 만약 웹사이트에서 운영중인 모든 게시판과 페이지에서 전체 내용 검색을 원하는 경우 통합 검색 폼을 이용할 수 있으며, 검색 옵션 설정으로 특정 모듈을 검색 대상에서 제외하거나 포함시킬 수 있습니다.

<form action="{getUrl()}" method="post" class="iSearch">
<input type="hidden" name="vid" value="{$vid}" cond="$vid" />
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input type="hidden" name="search_target" value="title_content" />
<input name="is_keyword" type="text" class="iText" title="keyword" />
<input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>

form 태그를 이용해서 검색 폼을 만들고 클래스(class="iSearch") 선택자를 주어 CSS 문서에서 꾸미게 됩니다. 페이지에서 실제로 보이는 부분은 텍스트 입력을 받는 푸른색 라인의 태그 구문과 이미지 타입으로 처리된 전송(submit) 버튼 입니다. 검색어 입력란에 단어를 입력하고 전송하면 name="is_keyword" 를 이용해 $is_keyword 변수로 받아서 검색어로 전송하게 되는 것이죠. 그밖의 전송 값들은 type="hidden"으로 붙어가게 됩니다.

일반적으로 PHP 문서에서는 폼으로 전송된 값들을 받아 처리하는 별도의 PHP 문서를 action=" "에서 호출하게 되는데 XE에서 사용되는 폼은 실행방법을 이미 모듈 함수에서 설정해 두고 있습니다. 따라서 노란색 형광팬으로 표시된 구문처럼 실행방법(act)으로 IS라는 함수를 호출하게 되는 것입니다. 함수명 IS는 모듈 프로그램 integration_search에서 정의 되어 있습니다.

통합 검색에서는 찾고자 하는 단어를 전체 게시물의 제목과 내용 중에서 찾도록 미리 설정(title_content)되어 있습니다. 또한 검색 결과를 출력하는 모듈의 아이디(mid)는 현재 모듈({$mid})로 설정되어 있지요. 만약 별도의 모듈 페이지에서 검색 결과를 표시하고 싶다면 이 부분에 특정 모듈의 아이디를 입력하면 됩니다. 즉 search_view라는 모듈아이디로 별도의 페이지를 만들고 검색 결과를 그 페이지에서 보여주고 싶다면 {$mid}search_view로 바꾸면 됩니다.

$vid는 cafeXE, Textyle 등 버츄얼사이트(가상사이트)의 고유 아이디 값으로 검색 필드를 mid 대신 가상사이트로 지정할 경우에 사용합니다. 가상 사이트를 운영하지 않는 경우 없어도 무방합니다. 그래서 조건 구문 cond="$vid"이 있는 것이지요.

검색어 입력란에 Search... 라는 단어가 미리 입력되어 있다가 검색어 입력을 위해 마우스를 올렸을때 사라지도록 하는 방법은 onfocus="this.value=''" 를 추가하여 사용합니다. 즉 마우스를 올렸을때(onfocus) 이것(this)의 값(value)은 'NULL' 이라는 뜻이죠. value에 값을 미리 넣어 두었다가 마우스가 올라오면 값을 지우는 효과입니다. 정리해 보면 다음과 같습니다.

<input name="is_keyword" type="text" class="iText" title="keyword" value="Search..." onfocus="this.value=''"  />

검색 폼 역시 CSS의 도움으로 여러가지 모양과 형태로 꾸미기가 가능합니다. 자유롭게 이용하시기 바랍니다.