[학습일지]JAVA교육일지 게시판CRUD 5⭐검색기능(2)

기본 게시판 만들기

  - 검색 기능 추가하기

---

검색 기능 추가하기

[ 구현 목표 ]

- 제목, 내용, 이름, 제목+내용별 검색을 할 수 있다.

- 검색 시 검색 내용의 강조 표시를 확인할 수 있다.

- 검색된 내용의 갯수를 확인할 수 있다.

*어제 작업하던 파일 그대로 추가하여 작업헀습니다.

 

[ DB 작업 ]

1) com.test.myapp.board > BoardDAO.java

- 어제 만들었던 public ArrayList<BoardDTO> list() 메소드에 HashMap을 추가할 예정이므로 변경한다.

- ArrayList<BoardDTO> list()    ---> ArrayList<BoardDTO> list(HashMap<String, String> map)

- 원래 리스트 메소드는 전체항목을 보여줬지만, 조건식을 사용해 검색유무(isSearch)를 통해 SQL 쿼리문을 변경한다.

     --> 조건에 만족하면("y") 해당 내용만 보이게 하기 (where ..)

     --> 조건에 만족하지 못한다면("n") 전체항목 보이게 하기

*어제 작성했던 파일 그대로 사용했으며, 어제 구현했던 코드는 일부로 뻇습니다.

public ArrayList<BoardDTO> list(HashMap<String, String> map) {
	
	try {

		String where ="";
		
		if ( map.get("isSearch").equals("y") ) {
			// 검색
			// where name like '%홍길동%'
			// where subject like '%날씨%'
			// where all like '%날씨%'
			
			if ( map.get("column").equals("all") ) {
				where = String.format(" where subject like '%%%s%%' or content like '%%%s%%' "
						, map.get("search"), map.get("search"));
			} else {
				where = String.format(" where %s like '%%%s%%' "
						, map.get("column"), map.get("search"));
			}
			
		}
		
		String sql = String.format("select * from vwBoard %s order by seq desc", where); 
		
		pstat = conn.prepareStatement(sql);
		
		rs = pstat.executeQuery();
		
		// 옮겨 담을 큰상자
		ArrayList<BoardDTO> list = new ArrayList<BoardDTO>();
				
		while ( rs.next() ) {
			
			// 레코드 1줄 -> BoardDTO 1개
			BoardDTO dto = new BoardDTO();
			
			dto.setSeq(rs.getString("seq"));
			// dto.setId(rs.getString("id"));
			dto.setName(rs.getString("name"));
			dto.setSubject(rs.getString("subject"));
			dto.setReadcount(rs.getString("readcount"));
			dto.setRegdate(rs.getString("regdate"));
			
			list.add(dto);
			
		}
		
		return list;
		
	} catch (Exception e) {
		e.printStackTrace();
	}
	
	return null;
}

 

[ Servlet + JSP 작업 - 게시판 항목 페이지에서 검색 폼 추가하기 ]

1) com.test.myapp.board > List.java

- 데이터 가져오기 ( column, search, isSearch ) 

- 가져온 데이터를 조건식을 이용해서 검색 유무(isSearch)를 통해 판단할 수 있다.

- HashMap<String, String>을 통해 가져온 데이터를 보관한다.

- 제목 검색시 검색어를 강조 시킬 코드를 작성한다.

*어제 작성했던 파일 그대로 사용했으며, 어제 구현했던 코드는 일부로 뻇습니다.

@WebServlet("/board/list.do")
public class List extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String column = req.getParameter("column");
		String search = req.getParameter("search");
		String isSearch = "n";
		
		if ( column != null && search != null &&
				!column.equals("") &&
				!search.equals("")) {
			isSearch = "y";
		}
		
		HashMap<String, String> map = new HashMap<String, String>();
		map.put("column", column);
		map.put("search", search);
		map.put("isSearch", isSearch);
		
		BoardDAO dao = new BoardDAO();
        
		ArrayList<BoardDTO> list = dao.list(map); 

		for ( BoardDTO dto : list ) {
			// 제목 검색시 검색어 강조하기
			if ( isSearch.equals("y") && column.equals("subject")) {
				subject = subject.replace(search, "<span style='color: tomato; background-color: yellow;'>" 
											+ search + "</span>");
				
				dto.setSubject(subject);
			}
			
		}
		
		req.setAttribute("list", list);
		req.setAttribute("map", map);

		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/board/list.jsp");
		dispatcher.forward(req, resp);

	}

}

 

2) WEB-INF > views > board > list.jsp

- form 태그로 method="GET"형태로 검색종류(column)과 검색내용(search)를 list.do에 넘겨준다.

- 화면 상단에 map과 list로 받아온 데이터의 내용과 갯수를 출력해준다.

*어제 작성했던 파일 그대로 사용했으며, 어제 구현했던 코드는 일부로 뻇습니다.

<!-- CSS -->
<style>
	.searchbox {
		text-align: center;		
	}
	
	.searchbox .form-control {
		display: inline-block;
		width: auto;
	}
	
	.searchbox #search {
		width: 250px;
	}
	
	.searchBar {
		margin: 10px;
		text-align: center;
	}
</style>
<!-- body -->
<!-- 상단에 검색내용, 갯수 출력하기 -->
<c:if test="${map.isSearch == 'y'}">
	<div class="searchBar">
		'${ map.search }'으로 검색한 결과 ${ list.size() }개의 게시물이 있습니다.
	</div>
</c:if>

<!-- 검색기능 추가하기 -->
<div class="searchbox">

	<form method="GET" action="/myapp/board/list.do">
		<select name="column" id="column" class="form-control">
			<option value="subject">제목</option>
			<option value="content">내용</option>
			<option value="name">이름</option>
			<option value="all">제목+내용</option>
		</select>
		<input type="text" name="search" id="search" class="form-control" required 
				placeholder="검색어를 입력하세요."/>
		<input type="submit" value="검색하기" class="btn btn-default" />
	</form>
    
</div>

<!-- script -->
<script>

	<c:if test="${map.isSearch == 'y'}">
		$( '#column' ).val('${ map.column }');		
		$( '#search' ).val('${ map.search }');		
	</c:if>
	
</script>

 

- 검색 전 페이지 ( http://localhost:8090/myapp/board/list.do )

제목으로 게시판을 검색할 예정이다.

 

- 검색 후 페이지 ( http://localhost:8090/myapp/board/list.do?column=subject&search=게시판 )

검색 갯수가 보이며, 해당 검색 글만 강조표시로 확인할 수 있다.