[홈페이지 제작] 익명 페이지 6 - 페이지 넘기기

Feb 14, 2024

Contents

1. 페이지 넘기기

게시글의 페이지를 넘기기 위해 부트스트랩의 pagination 을 활용한다.

w3school 의 예제를 활용했다.

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/bootstrap5/bootstrap_pagination.php

resources/index.mustache


<ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#first}}disabled{{/first}}"><a class="page-link" href="?page={{prevPage}}">Previous</a></li>
        <li class="page-item"><a class="page-link" href="/?page=0">1</a></li>
        <li class="page-item"><a class="page-link" href="/?page=1">2</a></li>
        <li class="page-item"><a class="page-link" href="/?page=2">3</a></li>
        <li class="page-item"><a class="page-link" href="/?page=3">4</a></li>
        <li class="page-item"><a class="page-link" href="/?page=4">5</a></li>
        <li class="page-item {{#last}}disabled{{/last}}"><a class="page-link" href="?page={{nextPage}}">Next</a></li>
    </ul>

지금 페이지는 게시글 조회를 할때 때로 DB는 조회하지 않고 전체 글을 21개로 고정하고 만들었다.

2. 컨트롤러


@GetMapping("/")
    public String index(HttpServletRequest request,@RequestParam(defaultValue = "0")int page) {
        List<Board> boardList = boardRepository.findAll(page);
        request.setAttribute("boardList", boardList);

        int currentPage = page;
        int nextPage = currentPage + 1;
        int prevPage = currentPage - 1;
				
        request.setAttribute("nextPage", nextPage);
        request.setAttribute("prevPage", prevPage);


        boolean first = (currentPage == 0 ? true : false);
        request.setAttribute("first", first);

        int totalPage= boardRepository.count();
        int totalCount = totalPage / 5;
        boolean last = (currentPage == totalCount ? true : false);
				
				//mustache 는 반복문을 사용하기 위해 배열이나 컬렉션이 필요하다.
				// 따라서 전체 페이지의 개수만큼 반복문으로 변수를 대입해주어야 한다.
        List<Integer> numberList = new ArrayList<>();
        int allPage;
        if(totalPage%5==0){
            allPage = totalCount -1 ;
            for(int i=1;i<=allPage;i++){
              numberList.add(i);
							// 저장된 List 데이터는 리퀘스트 객체에 담겨 View 로 전달된다.
              request.setAttribute("numberList",numberList);
            }
        }else if(totalPage%5!=0){
            allPage = totalCount ;
            for(int i=1;i<=allPage;i++){
                numberList.add(i);
                request.setAttribute("numberList",numberList);
            }
        }
        request.setAttribute("last", last);
        return "index";
    }

전체 게시글은 boardRepository의 count 메서드를 통해 전체 데이터의 개수를 조회한 후

페이지에 화면을 출력한다. 작성된 게시글의 수에 따라서 유동적으로 페이지 수가 변화된다.

한페이지에 5개씩 표시되도록 만들었다.

첫 페이지와 마지막 페이지는 비활성화도되도록 설정한다.

3. 레파지토리

board/BoardRepository


public int count() {
        Query query = em.createNativeQuery("select count(*) from board_tb");

        Long count = (Long) query.getSingleResult();
            return count.intValue();

    }

getSingleResult 는 오브젝트 타입을 출력한다. int로 받고 싶지만 받아지지 않아 Long 타입으로 받은 후 count.intValue() 메서드를 통해 int 값을 리턴한다.

4. 페이지 보기

index.mustache


<ul class="pagination d-flex justify-content-center">
        <li class="page-item {{#first}}disabled{{/first}}"><a class="page-link" href="?page={{prevPage}}">Previous</a></li>
        {{#numberList}}
        <li class="page-item"><a class="page-link" href="/?page={{.}}">{{.}}</a></li>
        {{/numberList}}
        <li class="page-item {{#last}}disabled{{/last}}"><a class="page-link" href="?page={{nextPage}}">Next</a></li>
    </ul>

컨트롤러에서 전달된 numberList 를 반복문으로 표시한다.