고마구의 개발 블로그
241007 25주차 월요일 - 부트 개인 플젝 06 본문
`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페이지로 페이징하여 보여줄 수 있습니다. 추가적인 질문이 있으면 언제든지 말씀해 주세요!
'KDT풀스택과정 공부' 카테고리의 다른 글
241009 25주차 수요일 - 부트 개인 플젝 08 (0) | 2024.10.09 |
---|---|
241008 25주차 화요일 - 부트 개인 플젝 07 (0) | 2024.10.08 |
241003 24주차 목요일 - 부트 개인 플젝 05 (0) | 2024.10.03 |
241002 24주차 수요일 - 부트 개인 플젝 04 (0) | 2024.10.02 |
241001 24주차 화요일 - ppt작성 (0) | 2024.10.01 |