게시판 조회, 날짜 추가, 게시글 번호 수정, 페이징 처리 수정

게시글 조회 기능 변경

현재 게시글을 조회하기 위해서는 게시판에 있는 게시글의 제목 부분을 클릭해야지 해당 게시글을 확인할 수 있었습니다. 지금 상태에서는 정확한 클릭을 요구하기 때문에 사용자 입장에서는 조금 불편할 수 있기 때문에 해당 게시글 제목이 아니라 그 게시글의 영역을 클릭해도 게시글을 볼 수 있게 수정해줍니다.

list.html을 수정해줍니다.

<tbody>
        <tr th:each="board : ${boards}" th:onclick="'location.href=\'/board/form?id=' + ${board.id} + '\';'" style="cursor:pointer;">
            <td th:text="${board.id}">Mark</td>
            <td th:text="${board.title}">Otto</td>
            <td th:text="${board.user.username}">홍길동</td>
        </tr>
        </tbody>

created작성일 시간 update 시간, 게시글 번호 순서대로

게시글 작성 날짜 추가

DB Board테이블에 DATETIME type으로 create_at이라는 속성을 추가해줍니다.

board.java 수정

private LocalDateTime createdAt;

list.html 수정

 <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">번호</th>
            <th scope="col">제목</th>
            <th scope="col">작성자</th>
            <th scope="col" style="margin: 2px">작성일</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="board : ${boards}" th:onclick="'location.href=\'/board/form?id=' + ${board.id} + '\';'" style="cursor:pointer;">
            <td th:text="${board.id}">Mark</td>
            <td th:text="${board.title}">Otto</td>
            <td th:text="${board.user.username}">홍길동</td>
            <td th:text="${#temporals.format(board.createdAt, 'yyyy-MM-dd')}">작성일</td>
        </tr>
        </tbody>

    </table>

BoardService.java 수정

public Board save(String username, Board board){
        User user = userRepository.findByUsername(username);
        board.setCreatedAt(LocalDateTime.now());
        board.setUser(user);
        return boardRepository.save(board);
    }

새로운 게시글을 작성하거나 기존 게시글을 수정했을 경우에 현재 시간을 저장해줍니다.

게시글 번호 표시 수정

<tr th:each="board, i : ${boards}" th:onclick="'location.href=\'/board/form?id=' + ${board.id} + '\';'" style="cursor:pointer;">
<!--            <td th:text="${board.id}">Mark</td>-->
            <td th:text="${boards.getNumber() * boards.getSize() + i.index+1}"></td>
            <td th:text="${board.title}">Otto</td>
            <td th:text="${board.user.username}">홍길동</td>
            <td th:text="${#temporals.format(board.createdAt, 'yyyy-MM-dd')}">작성일</td>
        </tr>

페이지 5페이지씩 표시

@GetMapping("/list")
    public String list(Model model, @PageableDefault(size = 2) Pageable pageable, @RequestParam(required = false, defaultValue = "") String searchText){
        //Page<Board> boards =  boardRepository.findAll(pageable);
        Page<Board> boards = boardRepository.findByTitleContainingOrContentContaining(searchText,searchText,pageable);
        int block = 5;
        int currentBlock = (boards.getPageable().getPageNumber() / block) * block;
        int startPage = currentBlock + 1;
        int endPage = Math.min(boards.getTotalPages(), currentBlock + block);
        model.addAttribute("startPage", startPage);
        model.addAttribute("endPage", endPage);
        model.addAttribute("boards", boards);
        return "board/list";
    }

현재 페이지 번호가 속한 블록을 계산하고 해당 블록의 시작 페이지 번호와 끝 페이지 번호를 계산합니다.
boards.getPageable().getPageNumber() -> 현재 페이지 번호를 반환하는 메소드입니다.

페이징 기능 맨 앞, 맨 뒤 이동 추가

list.html 수정

    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
            <li class="page-item">
                <a class="page-link" th:href="@{/board/list(page=0,searchText=${param.searchText})}">First</a>
            </li>
            <li class="page-item" th:classappend="${1 == boards.pageable.pageNumber + 1} ? 'disabled'">
                <a class="page-link" th:href="@{/board/list(page=${boards.pageable.pageNumber - 1},searchText=${param.searchText})}">Previous</a>
            </li>
            <li class="page-item" th:classappend="${i == boards.pageable.pageNumber + 1} ? 'disabled'"
                th:each="i : ${#numbers.sequence(startPage, endPage)}"><a class="page-link" href="#"
                                                                          th:href="@{/board/list(page=${i -1},searchText=${param.searchText})}"
                                                                          th:text="${i}"></a></li>
            <li class="page-item" th:classappend="${boards.totalPages == boards.pageable.pageNumber + 1} ? 'disabled'">
                <a class="page-link" th:href="@{/board/list(page=${boards.pageable.pageNumber + 1},searchText=${param.searchText})}">Next</a>
            </li>
            <li class="page-item">
                <a class="page-link" th:href="@{/board/list(page=${boards.totalPages - 1},searchText=${param.searchText})}">Last</a>
            </li>
        </ul>
    </nav>