[홈페이지 제작] 홈페이지 만들기 1 - 검색 기능 추가하기

Feb 22, 2024

Contents

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를 검색하면 주소에 쿼리스트링이 표시된다.

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

<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>

@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"; }

//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(); }

<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>