Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

고마구의 개발 블로그

241007 25주차 월요일 - 부트 개인 플젝 06 본문

KDT풀스택과정 공부

241007 25주차 월요일 - 부트 개인 플젝 06

고마구 2024. 10. 7. 21:49

`level` 기준으로 오름차순 정렬하고, 10개의 게시글씩 5페이지로 페이징을 구현하려면 몇 가지 단계를 따라야 합니다. 아래는 그 구현 방법입니다.

### 1. Repository 수정

`TestBoardRepository`에 페이징과 정렬을 지원하기 위해 `PagingAndSortingRepository`를 사용하거나 `JpaRepository`를 그대로 사용하면서 `Pageable`을 활용합니다.

```java
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;

public interface TestBoardRepository extends JpaRepository<TestBoard, Integer> {
    Page<TestBoard> findAllByOrderByLevelAsc(Pageable pageable);
}
```

### 2. Service 수정

`TestBoardService`에서 페이징 처리와 정렬을 추가합니다.

```java
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class TestBoardService {
    @Autowired
    private TestBoardRepository testBoardRepository;

    public List<TestBoard> findAll(int page, int size) {
        Pageable pageable = PageRequest.of(page, size);
        Page<TestBoard> testBoardPage = testBoardRepository.findAllByOrderByLevelAsc(pageable);
        return testBoardPage.getContent();
    }

    public TestBoard findById(int id) {
        return testBoardRepository.findById(id).orElse(null);
    }
}
```

### 3. Controller 수정

페이징 정보를 받아서 해당 페이지의 게시글을 불러옵니다.

```java
@GetMapping("/test_board")
public String gotest_board(@RequestParam(defaultValue = "0") int pageNum, Model model) {
    List<TestBoard> testBoard = testBoardService.findAll(pageNum, 10); // 10개씩 보여줌
    model.addAttribute("list", testBoard);
    model.addAttribute("currentPage", pageNum);
    return "test/test_board";
}
```

### 4. HTML 수정

페이징 버튼을 추가하여 페이지를 전환할 수 있도록 합니다.

```html
<div>
    <h2>Test Board</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Title</th>
                <th>Level</th>
                <th>Write Time</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="board : ${list}">
                <td th:text="${board.tTitle}"></td>
                <td th:text="${board.level}"></td>
                <td th:text="${#dates.format(board.tWriteTime, 'yyyy-MM-dd HH:mm')}"></td>
            </tr>
        </tbody>
    </table>

    <div>
        <a th:href="@{/test_board(pageNum=${currentPage - 1})}" th:if="${currentPage > 0}">◀ 이전</a>
        <span th:text="${currentPage + 1}">1</span> <!-- 현재 페이지 표시 -->
        <a th:href="@{/test_board(pageNum=${currentPage + 1})}" th:if="${currentPage < (totalPages - 1)}">다음 ▶</a>
    </div>
</div>
```

### 5. 총 페이지 수 계산 (선택 사항)

총 페이지 수를 계산하여 다음 버튼을 표시할 수 있습니다. 이 경우, `TestBoardService`에 다음과 같은 메소드를 추가합니다:

```java
public int getTotalPages() {
    return (int) Math.ceil((double) testBoardRepository.count() / 10); // 10개씩
}
```

그리고 이를 `gotest_board` 메소드에서 사용하여 모델에 추가합니다:

```java
@GetMapping("/test_board")
public String gotest_board(@RequestParam(defaultValue = "0") int pageNum, Model model) {
    List<TestBoard> testBoard = testBoardService.findAll(pageNum, 10);
    model.addAttribute("list", testBoard);
    model.addAttribute("currentPage", pageNum);
    model.addAttribute("totalPages", testBoardService.getTotalPages());
    return "test/test_board";
}
```

### 최종 요약

1. **Repository**: 페이징과 정렬을 위한 메소드 추가.
2. **Service**: 페이징 처리를 위한 메소드 추가.
3. **Controller**: 요청 매핑에서 페이지 번호를 받아 처리.
4. **HTML**: 게시글 목록과 페이징 버튼을 추가.

이렇게 하면 `level` 기준으로 정렬된 게시글을 10개씩 5페이지로 페이징하여 보여줄 수 있습니다. 추가적인 질문이 있으면 언제든지 말씀해 주세요!