[블로그프로젝트] 22. 글목록 페이징처리

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

---

메인페이지에서 글이 10개 20개라면 한번에 모든 글들이 표시된다면 보기에도 좋지 않고 불편할것이다.

특정 개수대로 나눠서 페이징 처리를 해보자.

 

우선 Board.java를 확인해서 글목록을 특정할 수 있는 변수명에 "_"가 포함되어있다면 없는방향으로 수정을 해주자

쌍따옴표("")에 해당 변수명을 넣으면 인식하지 못하는 경우가 많다. 나같은 경우도 Board_idx로 설정해 놓았는데

board 까지만 인식을해서 정렬기준을 잡지못해 500 에러가 발생하였다.

 

boardController로 이동해 pageable을 매개변수로 추가해준다.

size는 한 번에 표시할 글의 갯수, sort는 정렬할 기준, direction은 정렬할 방향으로 SQL문에서 order by 를 사용할때와 같다.

desc 는 내림차순으로 가장 최근 글부터 정렬이 될 것이고, asc는 오름차순으로 가장 오래된 글부터 정렬이 될 것이다.

변경전

변경후

 

 @GetMapping({"", "/"})
    public String index(Model model, @PageableDefault(size = 3, sort = "id", direction = Sort.Direction.DESC)Pageable pageable) {
        model.addAttribute("boards", boardService.글목록(pageable));
        return "index";
    }

 

 

컨트롤러에서 보내주는 매개변수가 변경이 되었기 때문에 서비스단에서 수정을 해줘야한다.

여기서 리턴할때 값이 변하기 때문에 타입도 List타입에서 Page 타입으로 변경해주어야 한다.

변경전

변경후

 public Page<Board> 글목록(Pageable pageable){

        return boardRepository.findAll(pageable);
    }

 

index.jsp에서도 변경할 점이 있다. 그냥 단순히 boards로 받을경우 인식을 하지 않기때문에 boards.content로 변경해주자

변경전

변경후

w3schoool로 이동해 사용할 버튼 디자인을 선택하자

https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp

해당 코드에서 1,2,3을 지우고 previous 와 next만 사용할 예정이다.

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

 

class에 "justify-content-center" 를 추가해 버튼을 가운데로 위치를 변경하자

참고로 conter 대신 left, right를 작성한다면 왼쪽, 오른쪽으로 변경할수 있다.

변경전

변경후

 <ul class="pagination justify-content-center">

 

적용된 모습

 

next버튼을 누르면 기본페이지 번호인 0 에서 1씩 증가하도록

previous를 누르면 -1씩 감소하도록 작성하고

c taglib을 활용해 만약 해당페이지가 첫번째(first 값이 true 일때) disabled 를 추가해 previous버튼이 작동하지 않도록 만들어주고

해당 페이지가 마지막페이지일때(last값이 true일때) disabled를 추가해 더이상 next버튼이 작동하지 않도록 만들어준다

 

 <ul class="pagination justify-content-center">
        <c:choose>
            <c:when test="${boards.first}">
                <li class="page-item disabled"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
            </c:when>

            <c:otherwise>
                <li class="page-item"><a class="page-link" href="?page=${boards.number-1}">Previous</a></li>
            </c:otherwise>
        </c:choose>

        <c:choose>
            <c:when test="${boards.last}">
                <li class="page-item disabled"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
            </c:when>

            <c:otherwise>
                <li class="page-item"><a class="page-link" href="?page=${boards.number+1}">Next</a></li>
            </c:otherwise>
        </c:choose>
    </ul>

 

로그인후 글을 몇개 더 작성후 테스트를 시도해보자

글을 4개까지 작성했을때 컨트롤러에서 작성한 "size=3" 대로 3개만 출력되는 모습 first값이 true이기 때문에 previous도 비활성화 된걸 확인할 수 있다.

주소는 기본페이지인 0이다

 

여기서 next 버튼을 누르면 다음페이지로 이동하고 다음 3개의 글을 보여준다.

하지만 여기서 나는 총 4개의 글을 작성하여 메인페이지에는 1개의 글만 보여진다.

총 4개의 글을 작성해 처음 페이지에 글 3개를 제외한 나머지 1개가 보여진다. last갑이 true이기 때문에 next는 비활성화 되어있고 비활성화되어있던 Prevous는 활성화된걸 확인할 수 있다.

페이지도 0에서 1로 값이 변하였다.