(구버전) 스프링 게시판 만들기 #7. 검색 기능 구현

'(구버전) 스프링 게시판 만들기'는 내용이 부족하다고 판단하여
스프링 게시판 만들기를 새로 작성하였습니다.

링크 및 참조용으로 현재 게시물은 남겨두겠지만,
가급적이면 새로운 스프링 게시판 만들기를 참조해주시기 바랍니다.

페이징 기능을 구현했으니, 이번엔 검색 기능을 구현하겠습니다. 게시판에서 검색을 할 때 필요한 조건은 사용자가 입력하는 키워드와 대상입니다. 여기서 대상은 글 제목, 글 내용, 작성자가 되겠습니다.

가장 먼저 해야할건 역시 쿼리 작성입니다.

 select bno, title, content, writer, regDate, viewCnt
    from (
        select bno, title, content, writer, regDate, viewCnt,
            row_number() over(order by bno desc) as rNum
        from myBoard
            where title like '%' || '더미' || '%'  -- 제목
            where content like '%' || '더미' || '%'  -- 내용
            where content write '%' || '더미' || '%'  -- 작성자
            where title like '%' || '더미' || '%' or (content like '%' || '2' || '%')  -- 제목과 내용
        ) mb
    where rNum between 1 and 10
        order by bno desc;

위 쿼리 그대로 사용하면 당연히 실행은 안되고, 조건 4가지(제목, 내용, 작성자, 제목과 내용)중 하나만 있는 상태에서 정상적으로 실행됩니다.

검색결과에서도 페이징 기능이 작동되야하므로, 페이징에서 사용한 쿼리의 내부에 조건문을 넣어서 사용합니다.

위 쿼리에서 mb는 MyBoard의 줄임문자로, 괄호 내부의 결과에 대한 별칭을 지정해둔 문자입니다.
mb 문자를 삭제하더라도 실행에 영향은 없습니다.

조건문을 이용하여 원하는 게시물만 검색할 수 있었으니, 같은 조건을 이용하여 해당 게시물의 갯수를 알 수 있습니다.

select count(bno)
  from myBoard
   where bno > 0
                and title like '%' || '더미' || '%';  -- 제목

검색 타입(제목, 내용, 작성자, 제목과 내용)과 검색어는 거의 항시, 고정적으로 사용되니 클래스로 작성합니다.

package com.kuzuro.domain;

public class SearchCriteria extends Criteria{

 private String searchType ="";
 private String keyword = "";
 
 public String getSearchType() {
  return searchType;
 }
 public void setSearchType(String searchType) {
  this.searchType = searchType;
 }
 public String getKeyword() {
  return keyword;
 }
 public void setKeyword(String keyword) {
  this.keyword = keyword;
 }
 
 @Override
 public String toString() {
  return super.toString() + " SearchCriteria [searchType=" + searchType + ", keyword=" + keyword + "]";
 }
}

새로만든 클래스 SearchCriteria는 기존에 작성한 Criteria를 상속(extend)받습니다. 즉, SearchCriteria는 클래스에 보이지 않아도 Criteria의 모든 요소를 사용할 수 있습니다.

이제 매퍼에 코드를 추가합니다. 추가된 코드는 기존의 코드와 조금 다르게 되어있습니다.

<!-- 검색 -->
<select id="listSearch" resultType="com.kuzuro.domain.BoardVO"
parameterType="com.kuzuro.domain.SearchCriteria">
select bno, title, content, writer, regDate, viewCnt
       from (
           select bno, title, content, writer, regDate, viewCnt,
               row_number() over(order by bno desc) as rNum
           from myBoard
      <include refid="search"></include>
     ) mb
    where rNum between #{rowStart} and #{rowEnd}
        order by bno desc
</select>

<sql id="search">
 <if test="searchType != null">
  <if test="searchType == 't'.toString()">where title like '%' || #{keyword} || '%'</if>
  <if test="searchType == 'c'.toString()">where content like '%' || #{keyword} || '%'</if>
  <if test="searchType == 'w'.toString()">where writer like '%' || #{keyword} || '%'</if>
  <if test="searchType == 'tc'.toString()">where (title like '%' || #{keyword} || '%') or (content like '%' || #{keyword} || '%')</if>
 </if>
</sql>

검색할 때 사용되는 두가지의 조건인 검색 타입과 검색어는 고정된 값이 아닌 유동적인 값입니다. 특히나 검색어는 사용자가 입력하는 그 값이 검색어가 되기 때문에 추측할 수 없으나, 검색 타입은 제목, 내용, 작성자, 제목과 내용 이렇게 4가지로 구분되기 때문에 조건문을 이용할 수 있습니다.

조건문은 <sql> 태그로 별도로 작성하되 아이디(id)를 설정하고, 사용될 쿼리에 <include refid="search"></include> 태그를 이용하여 추가합니다.

검색어에 맞는 게시물 갯수를 구하는 쿼리도 작성합니다.

<select id="countSearch" resultType="int">
 select count(bno)
  from myBoard
   <include refid="search"></include>
<![CDATA[
   and bno > 0
]]>
</select>

여기서 집고 넘어갈 부분은 글 번호(bno)의 조건문이 where에서 and로 바뀌었다는겁니다. 바뀐 이유는 검색타입+검색어 조건이 앞으로 왔기 때문입니다.

2개의 조건이 모두 만족되는 조건을 두번째 이후부터 사용하려면 where가 아닌 and로 작성해야하는데, 글번호 조건을 먼저 where로 걸어두고 이후에 검색타입+검색어 조건을 and로 걸어두게된다면, <sql> 태그를 하나 더 만들어야합니다.

지금은 쿼리의 양이 많이 않기에 용량이나 속도 차이는 거의 없으나, 기존에 만들어둔걸 이용하지 않을 필요는 없기에 순서를 바꿨습니다.

DAO와 Service에 새로운 메서드 listSearch, countSearch를 작성합니다. 이 메서드는 매개변수의 타입이 Criteria가 아닌 SearchCriteria입니다.

다음으로, 컨트롤러에 코드를 작성합니다.

// 글 목록 + 페이징 + 검색
@RequestMapping(value = "/listSearch", method = RequestMethod.GET)
public void listPage(@ModelAttribute("scri") SearchCriteria scri, Model model) throws Exception {
 logger.info("get list search");
 
 List<BoardVO> list = service.listSearch(scri);
 model.addAttribute("list", list);
 
 PageMaker pageMaker = new PageMaker();
 pageMaker.setCri(scri);
 //pageMaker.setTotalCount(service.listCount());
 pageMaker.setTotalCount(service.countSearch(scri));
 model.addAttribute("pageMaker", pageMaker);
}

이전에 작성했던 listPage.jsp와 차이점은 매핑된 경로와 Criteria를 SearchCriteria로 바꾼것과, 게시물 전체 갯수를 파악하는 pageMaker.setTotalCount(service.listCount()); 대신, 검색된 게시물의 전체 갯수를 파악하는 pageMaker.setTotalCount(service.countSearch(scri)); 입니다.

클래스 PageMaker에서 URI를 만드는 메서드 makeQuery는 page와 perPageNum을 조합했는데, 검색 기능이 생기며 추가된 searchType과 keyword를 추가되었으므로, 메서드 makeSearch를 추가로 작성합니다.

keyword는 인코딩에 따라 의도한것과 다른 결과가 나올 수 있기 때문에 인코딩 기능을 추가합니다.

public String makeSearch(int page)
{
  
 UriComponents uriComponents =
            UriComponentsBuilder.newInstance()
            .queryParam("page", page)
            .queryParam("perPageNum", cri.getPerPageNum())
            .queryParam("searchType", ((SearchCriteria)cri).getSearchType())
            .queryParam("keyword", encoding(((SearchCriteria)cri).getKeyword()))
            .build(); 
 return uriComponents.toUriString();  
}

private String encoding(String keyword) {
 if(keyword == null || keyword.trim().length() == 0)
 { return ""; }
 
 try {
  return URLEncoder.encode(keyword, "UTF-8");
 } catch(UnsupportedEncodingException e)
 { return ""; }
}

listPage.jsp를 복사(Ctrl+C)후 붙여넣기(Ctrl+V)하여 이름을 listSearch.jsp로 변경합니다.

makeQuery의 역할이 makeSearch로 대처되었으므로, makeQuery를 사용하던 코드를 수정합니다.

그리고 home.jsp에서 검색 페이지로 바로 접속할 수 있게 링크도 하나 추가합니다.

페이지 추가했을 때랑 별 차이가 없습니다.

하지만 브라우저에 직접 주소를 입력하면(http://localhost:8080/board/listSearch?page=2&perPageNum=10&searchType=t&keyword=테스트) 검색 기능이 잘 작동되는걸 확인할 수 있습니다.

listSearch.jsp에서 테이블과 페이징 사이에 검색기를 추가합니다.

<div class="search">
 <select name="searchType">
  <option value="n"<c:out value="${scri.searchType == null ? 'selected' : ''}"/>>-----</option>
  <option value="t"<c:out value="${scri.searchType eq 't' ? 'selected' : ''}"/>>제목</option>
  <option value="c"<c:out value="${scri.searchType eq 'c' ? 'selected' : ''}"/>>내용</option>
  <option value="w"<c:out value="${scri.searchType eq 'w' ? 'selected' : ''}"/>>작성자</option>
  <option value="tc"<c:out value="${scri.searchType eq 'tc' ? 'selected' : ''}"/>>제목+내용</option>
 </select>
 
 <input type="text" name="keyword" id="keywordInput" value="${scri.keyword}"/>

 <button id="searchBtn">검색</button>
 
 <script>
 $(function(){
  $('#searchBtn').click(function() {
   self.location = "listSearch"
     + '${pageMaker.makeQuery(1)}'
     + "&searchType="
     + $("select option:selected").val()
     + "&keyword="
     + encodeURIComponent($('#keywordInput').val());
    });
 });   
 </script>
</div>

검색기의 스트립트 부분은 제이쿼리를 사용하고 있으므로, 제이쿼리 CDN이 없다면 <head> 태그에 추가합니다.

<!-- 제이쿼리 -->
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

검색 타입과 검색어를 입력하고, 검색 버튼을 누르면 검색된 결과가 표시됩니다.

브라우저의 주소창이 변경되었고, 검색어에 맞는 결과만 목록에 표시되었으며, 검색기의 검색타입과 검색어도 입력한대로 유지되는걸 확인할 수 있습니다.