1. View
<div class="container p-5">
<!-- 검색 -->
<div class="row justify-content-end mb-3">
<div class="col-md-4">
<form action="/" method="get" class="form-inline">
<div class="input-group rounded">
<input class="form-control me-2 rounded-end" type="text" placeholder="Search..." name="keyword" required/>
<button class="btn btn-primary rounded-start" type="submit">검색</button>
</div>
</form>
</div>
</div>
검색 버튼을 누르면 /?keyword= 쿼리스트링이 만들어진다.

2. 컨트롤러
@GetMapping("/")
public String index(
HttpServletRequest request,
@RequestParam(defaultValue = "0") Integer page,
@RequestParam(defaultValue = "") String keyword) {
// isEmpty -> null, 공백
// isBlank -> null, 공백, 화이트 스페이스
if(keyword.isBlank()){
List<Board> boardList = boardRepository.findAll(page);
// 전체 페이지 개수
int count = boardRepository.count().intValue();
// 5 -> 2page
// 6 -> 2page
// 7 -> 3page
// 8 -> 3page
int namerge = count % 3 == 0 ? 0 : 1;
int allPageCount = count / 3 + namerge;
request.setAttribute("boardList", boardList);
request.setAttribute("first", page == 0);
request.setAttribute("last", allPageCount == page + 1);
request.setAttribute("prev", page - 1);
request.setAttribute("next", page + 1);
}else{
List<Board> boardList = boardRepository.findAll(page, keyword);
// 전체 페이지 개수
int count = boardRepository.count(keyword).intValue();
// 5 -> 2page
// 6 -> 2page
// 7 -> 3page
// 8 -> 3page
int namerge = count % 3 == 0 ? 0 : 1;
int allPageCount = count / 3 + namerge;
request.setAttribute("boardList", boardList);
request.setAttribute("first", page == 0);
request.setAttribute("last", allPageCount == page + 1);
request.setAttribute("prev", page - 1);
request.setAttribute("next", page + 1);
}
return "index";
}
@RequestParam
어노테이션으로 keyword 변수를 만든다.3. 레파지토리
//like 절이 있으면 % 를 써야됨
public Long count(String keyword) {
Query query = em.createNativeQuery("select count(*) from board_tb where title like ?");
query.setParameter(1, "%"+keyword+"%");
return (Long) query.getSingleResult();
}
public List<Board> findAll(Integer page, String keyword) {
Query query = em.createNativeQuery("select * from board_tb where title like ? order by id desc limit ?, 3", Board.class);
query.setParameter(1, "%"+keyword+"%");
query.setParameter(2, page * 3);
return query.getResultList();
}
like 는 쿼리문에서 특정 패턴에 포함된 데이터를 찾을 때 사용한다.
%keyword% 처럼 % 를 앞 뒤로 사용하면 키워드가 어디에 포함되어 있든 검색이 가능하다.
4. 결과 보기
<ul class="pagination d-flex justify-content-center">
<li class="page-item {{#first}}disabled{{/first}}"><a class="page-link" href="?page={{prevPage}}&keyword={{keyword}}">Previous</a></li>
<li class="page-item {{#last}}disabled{{/last}}"><a class="page-link" href="?page={{nextPage}}&keyword={{keyword}}">Next</a></li>
</ul>
컨트롤러를 통해 전달받은 keyword 를 mustache에 사용한다.

4를 검색하면 주소에 쿼리스트링이 표시된다.

새로운 더미데이터를 추가해 검색을 해도 정상적으로 검색이 된다.
Share article