스프링 게시판 만들기 #12. 검색 구현 1

다음 글 : #13. 검색 구현 2
이전 글 : #11. 페이징 구현 3

스프링 게시판 만들기 #1~12 깃허브 링크
스프링 게시판 만들기 (전체) 깃허브 링크

게시물 목록이 표시되고, 페이징 기능도 있으니... 이제 필요한건 검색 기능입니다.

기존 화면에 그대로 작업해도 되지만.. 지금까지의 흐름(?)에 맞게 별도의 페이지를 생성하겠습니다. 아예 새로만들 필요는 없고, 검색기능만 추가하면 되기 때문에 listPage를 그대로 사용하면 됩니다.

listPage.jsp 를 선택한 뒤, Ctrl(컨트롤) + C → Ctrl(컨트롤) + V 를 눌러줍니다.

listPage.jsp의 복사본 이름을 listPageSearch.jsp 로 변경해줍니다.

기능이 추가될수록 이름이 길어지는군요.

listPageSearch.jsp를 열어서 /board/listPage 로 되어있는 링크를 /board/listPageSearch 로 변경해줍니다.

이렇게 변경하지 않으면 페이징 링크가 /board/listPage 로 되기 때문입니다.

BoardController에서, 기존에 사용하던 listPage 메서드를 복사합니다.

listPageSearch.jsp는 listPage.jsp 를 복사한것이기 때문에 컨트롤러에서도 그대로 복사해서 사용할 수 있습니다.

복사한 뒤 @RequestMapping 의 값(value)를 /listPageSearch 로 변경해주고, 메서드이름인 getListPage 를 getLastPageSearch 로 변경해줍니다.

@RequestMapping만 맞으면 되고 메서드명은 달라도 상관없으나, 이것 역시 지나가는 개발자에게 물어봤을 때 바로 이해할 수 있도록 이름을 지어줍니다.

그리고 주석처리된 코드는 더이상 필요 없으니 지워주도록 합니다.

include/nav.jsp에 listPageSearch에 바로 접속할 수 있는 링크를 추가합니다.

프로젝트를 실행하면 추가했던 링크가 있는걸 확인할 수 있습니다. 클릭해서 listPageSearch에 접속합니다.

listPage와 동일합니다.

페이징 밑부분에 코드를 추가합니다.

<div>
  <select name="searchType">
      <option value="title">제목</option>
         <option value="content">내용</option>
      <option value="title_content">제목+내용</option>
      <option value="writer">작성자</option>
  </select>
  
  <input type="text" name="keyword" />
  
  <button type="button">검색</button>
 </div>

프로젝트를 실행해보면 검색할 수 있도록 엘리먼트가 추가되었습니다.

프론트쪽이 준비되었다면, 그 다음은 DB에서 데이터를 가져오도록 쿼리를 작성해야합니다.

위 스크린샷처럼 WHERE title = '테스트' 처럼 조건으로 사용하면 완벽하게 일치하는것만 가져올 수 있기 때문에

제목(title) 검색입니다.

이렇게 WHERE title LIKE '%테스트%' 처럼, LIKE를 이용한 조건을 사용합니다.

%(퍼센트 기호)가 앞에 있다면 앞에 다른 문자열이 있을 수 있다는것이고, 반대로 뒤에 있다면 뒤에 다른 문자열이 있을 수 있다는 의미입니다.

만약, '%bc'를 조건으로 사용한다면, 'abc'나 'bcc'처럼 '[다른 문자]bc'는 찾을 수 있으나, 'bcd'나 'bc1'처럼 bc[다른 문자]'는 찾을 수 없습니다.

내용(content) 검색입니다.

제목(title) + 내용(content) 검색입니다.

제목과 내용, 두가지 조건이 포함되어야하기 때문에 or 조건을 사용했습니다.

작성자(writer) 검색입니다.

boardMapper.xml을 열어서, listPage를 복사합니다. listPageSearch는 listPage를 복사한것이기 때문에, 같은 내용인 매퍼도 복사해서 사용할 수 있습니다.

매퍼의 id를 listPage 에서 listPageSearch 로 변경하고 쿼리를 추가합니다.
임시로 WHERE title LIKE '%${keyword}%' 를 추가했지만.. 여기엔 문제가 있습니다.

DAO에서 문자열 데이터를 받게되면 '%${keyword}%' 는 '%'keyword'%' 처럼, 받은 데이터의 앞뒤에 따옴표가 붙기 때문에 저대로 사용하면 에러가 발생할 수 있습니다.

concat 함수를 사용하면 문자열을 합칠 수 있습니다.

일단 모든 경우의 조건문을 다 집어넣어줍니다. 물론 저대로는 사용할 수 없습니다.

이렇게 매퍼에서 조건문을 사용할 수 있습니다. searchType의 값에 따라 제목, 내용, 제목+내용, 작성자를 구분할 수 있습니다.

<!-- 게시물 목록 + 페이징 + 검색 -->
<select id="listPageSearch" parameterType="hashMap" resultType="com.board.domain.BoardVO">
 select
  bno, title, writer, regDate, viewCnt
 from tbl_board
 
 <if test='searchType.equals("title")'>
  WHERE title LIKE concat('%', #{keyword}, '%')
 </if>
 
 <if test='searchType.equals("content")'>
  WHERE content LIKE concat('%', #{keyword}, '%')
 </if>
 
 <if test='searchType.equals("title_content")'>
  WHERE title LIKE concat('%', #{keyword}, '%') 
   or content LIKE concat('%', #{keyword}, '%')
 </if>
 
 <if test='searchType.equals("writer")'>
  WHERE writer LIKE concat('%', #{keyword}, '%')
 </if>
 
 order by bno desc
  limit #{displayPost}, #{postNum}
</select> 

여기에서 드는 의문점은 searchType과 keyword를 어디서 가져오냐? 입니다. listPage와 다르므로, 이부분은 DAO부터 컨트롤러까지 작업해줘야합니다.

BoardDAO에 코드를 추가합니다.

// 게시물 목록 + 페이징 + 검색
 public List<BoardVO> listPageSearch(
   int displayPost, int postNum, String searchType, String keyword) throws Exception;

BoardDAO 구현부인 BoardDAOImpl에 코드를 추가합니다.

// 게시물 목록 + 페이징 + 검색
 @Override
 public List<BoardVO> listPageSearch(
   int displayPost, int postNum, String searchType, String keyword) throws Exception {

  HashMap<String, Object> data = new HashMap<String, Object>();
  
  data.put("displayPost", displayPost);
  data.put("postNum", postNum);
  
  data.put("searchType", searchType);
  data.put("keyword", keyword);
  
  return sql.selectList(namespace + ".listPageSearch", data);
 }

메서드의 매개변수로 searchType과 keyword를 받을 수 있도록 했으며, 해시맵에도 searchType과 keyword를 추가했습니다.

BoardService에 코드를 추가합니다.

// 게시물 목록 + 페이징 + 검색
public List<BoardVO> listPageSearch(
  int displayPost, int postNum, String searchType, String keyword) throws Exception;

BoardService에 구현부인 BoardServiceImpl에 코드를 추가합니다.

// 게시물 목록 + 페이징 + 검색
@Override
public List<BoardVO> listPageSearch(
  int displayPost, int postNum, String searchType, String keyword) throws Exception {
 return  dao.listPageSearch(displayPost, postNum, searchType, keyword);
}

BoardController의 listPageSearc 메서드를 수정 및 코드 추가합니다.

// 게시물 목록 + 페이징 추가 + 검색
@RequestMapping(value = "/listPageSearch", method = RequestMethod.GET)
public void getListPageSearch(Model model, @RequestParam("num") int num, 
  @RequestParam("searchType") String searchType, @RequestParam("keyword") String keyword
  ) throws Exception {

 
 Page page = new Page();
 
 page.setNum(num);
 page.setCount(service.count());  
 
 List<BoardVO> list = null; 
 //list = service.listPage(page.getDisplayPost(), page.getPostNum());
 list = service.listPageSearch(page.getDisplayPost(), page.getPostNum(), searchType, keyword);
 
 model.addAttribute("list", list);
 model.addAttribute("page", page);
 model.addAttribute("select", num);
 
}

매개변수부에 @RequestParam("searchType") String searchType, @RequestParam("keyword") String keyword 를 추가하여, URL을 통해 searchType과 keyword를 받아낼 수 있도록 했습니다.

기존 list를 주석 처리했고, 그 대신 list = service.listPageSearch(page.getDisplayPost(), page.getPostNum(), searchType, keyword); 를 입력했습니다.

위에서 작업한 service와 dao 및 mapper에 사용될 데이터인 searchType과 keyword가 들어가있습니다.

프로젝트를 실행하고 listPageSearch 페이지에 접속하면 에러가 발생합니다. 에러 내용을 보니, 문자열(String) 데이터인 searchType가 없다고 합니다.

컨트롤러에서는 searchType과 keyword를 받도록 되어있는데, URL에는 searchType과 keyword가 없기 때문에 에러가 발생한겁니다.

그러므로 searchType과 keyword를 넣어주면 잘 동작됩니다.

searchType는 셀렉트박스에서 가져오는 데이터고, keyword는 사용자가 입력한 검색어입니다.

listPageSearch 메서드의 매개변수 부분을 수정해줍니다.

@RequestParam(value = "searchType",required = false, defaultValue = "title") String searchType,
   @RequestParam(value = "keyword",required = false, defaultValue = "") String keyword

value 는 받고자할 데이터의 키, required 는 해당 데이터의 필수여부, defaultValue 는 만약 데이터가 들어오지 않았을 경우 대신할 기본값입니다.

이 defaultValue 가 있으면 URL에 해당 값이 없더라도 기본값을 지정할 수 있으므로 에러가 발생하지 않을겁니다.

프로젝트를 실행하고 listPageSearch 페이지에 접속하면 예상대로 에러가 나오지 않습니다.

URL에 &searchType=title&keyword=테스트 를 입력하면 여전히 결과는 잘 나옵니다.

하지만 매번 URL에 searchType과 keyword를 입력해서 검색하는건 싫습니다.

아직 코딩이 덜 되었기 때문에, searchType과 keyword를 입력하고 검색 버튼을 눌러도 아무런 반응이 없습니다.

button 태그에 id="searchBtn 을 추가하고, 스크립트를 추가합니다.

<script>

 document.getElementById("searchBtn").onclick = function () {
    
  let searchType = document.getElementsByName("searchType")[0].value;
  let keyword =  document.getElementsByName("keyword")[0].value;
  
  console.log(searchType)
  console.log(keyword)
 };
</script>

id가 searchBtn인 html 엘리먼트에 클릭 이벤트가 발생하면, function() {} 내부의 코드가 실행됩니다.

name이 searchType인 html 엘리먼트중 첫번째([0])의 값을 변수(let) serarchType에 저장하고, name이 keyword html 엘리먼트중 첫번째([0])의 값을 변수(let) keyword에 저장합니다.

여기서 왜 첫번째([0])가 나오냐면, html 엘리먼트에 사용되는 name 속성은 2개 이상 복수로 사용할 수 있기 때문에 document.getElementsByName() 로 데이터를 가져오려고하면 배열로 가져오기 때문에 가장 첫번째인 0번째 데이터를 가져오는겁니다.

여기서 왜 첫번째가 1이 아닌 0이냐면.. 프로그래밍에서는 시작번호는 0입니다.

searchType를 선택하고, keyword를 입력하고 검색 버튼을 클릭하면 콘솔창에 입력했던 결과가 나옵니다. 그렇다는건 제대로 코딩이 되었다는 의미입니다.

저렇게 콘솔창을 보기 위해서는, 크롬 기준으로 F12를 눌러서 개발자 도구를 실행하면 됩니다.

코딩이 잘된걸 확인했으니, 실제로 동작할 코드를 작성합니다.

location.href = "/board/listPageSearch?num=1" + "&searchType=" + searchType + "&keyword=" + keyword;

location.href = [ URL ] 는 해당 URL로 이동하는 기능입니다. searchType은 선택한 검색 타입, keyword는 검색어가 들어가므로, '작성자'를 선택하고 '123'을 입력했다면 이동될 실제 URL은 /board/listPageSearch?num=1&searchType=writer&keyword=123 이 됩니다.

프로젝트를 실행한 뒤, searchType를 선택하고 keyword를 입력한 뒤 검색을 눌러봅니다.

선택한 searchType와 입력한 keyword로 이동되었으며, 게시물 목록 또한 잘 표시되는걸 확인할 수 있습니다.

하지만 지금까지의 과정에서 작업하지 않은 사항이 있어서 다음과 같은 문제가 남아있습니다.

첫번째는 페이지를 이동하면 searchType과 keyword가 없어집니다. 페이징에 있는 링크 URL에 searchType과 keyword가 없기 때문에 생기는 문제입니다.

두번째는 검색결과와 무관하게 페이징이 생성됩니다. BoardController에서 모든 게시물의 갯수를 이용하여 페이징을 생성하기 때문에 생기는 문제입니다.

이 두가지 문제는 다음 글에서 해결하겠습니다.

다음 글 : #13. 검색 구현 2
이전 글 : #11. 페이징 구현 3

스프링 게시판 만들기 #1~12 깃허브 링크
스프링 게시판 만들기 (전체) 깃허브 링크