[Springboot] 27. 계좌 상세 보기 기능(5단계-JSTL 사용 및 페이징 기능)

1. JSTL 태그 사용

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!-- header.jsp  -->
<%@ include file="/WEB-INF/view/layout/header.jsp"%>

<!-- start of content.jsp(xxx.jsp)   -->
<div class="col-sm-8">
	<h2>계좌 상세 보기(인증)</h2>
	<h5>Bank App에 오신걸 환영합니다</h5>
	
	<div class="bg-light p-md-5">
		<div class="user--box">
			${principal.username}님 계좌 <br> 계좌 번호 : ${account.number} <br> 잔액 : <fmt:formatNumber value="${account.balance}" type="currency"/>
		</div>
		<br>
		
		<div>
			<a href="/account/detail/${account.id}?type=all&currentPageNum=1" class="btn btn-outline-primary">전체</a>&nbsp;
			<a href="/account/detail/${account.id}?type=deposit&currentPageNum=1" class="btn btn-outline-primary">입금</a>&nbsp;
			<a href="/account/detail/${account.id}?type=withdrawal&currentPageNum=1" class="btn btn-outline-primary">출금</a>&nbsp;
		</div>
		&nbsp;
		<table class="table table-striped">
			<thead>
				<tr>
					<th>ID</th>
					<th>날짜</th>
					<th>보낸 이</th> <%--sender --%>
					<th>받은 이</th> <%--receiver --%>
					<th>입출금 금액</th> <%--amount --%>
					<th>계좌 잔액</th> <%--balance --%>
				</tr>
			</thead>
			<tbody>
			<c:forEach var="historyAccount"  items="${historyList}">
				<tr>
					<th>${historyAccount.id}</th> 
					<th><fmt:formatDate value="${historyAccount.createdAt}" pattern="yyyy년 MM월 dd일 hh시 mm분 ss초"/></th> <%--연-월-일 시:분:초 --%>
					<th>${historyAccount.sender}</th> <%--보낸 이 --%>
					<th>${historyAccount.receiver}</th> <%--받은 이 --%>
					<th> <fmt:formatNumber value="${historyAccount.amount}" type="currency"/></th> <%--입출금 금액 --%>
					<th> <fmt:formatNumber value="${historyAccount.balance}" type="currency"/></th> <%--현재 계좌 잔액 --%>
				</tr>
			</c:forEach>
			</tbody>
		</table>
		
		<div class="pagination">
		<a href="${accountId}?type=${type}&currentPageNum=${i-1}"><p><</p></a>
			<c:forEach var="i" begin="1" end="${totalPages}">
			<c:choose>
				<c:when test="${i}==${currentPages}">
					<a class="current-page" href="/detail/${accountId}?type=${type}&currentPageNum=${i}"><b>${i}</b></a>
				</c:when>
				<c:otherwise>
					<a href="${accountId}?type=${type}&currentPageNum=${i}">${i}</a>
				</c:otherwise>
			</c:choose>
			</c:forEach>
		<a href="${accountId}?type=${type}&currentPageNum=${i+1}"><p>></p></a>
		</div>
		
	</div>
	
</div>
<!-- end of col-sm-8  -->
</div>
</div>

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>

 

 

2. 페이징 기능 추가

(1) AccountController - 페이징 메서드

/**
	 * 계좌 상세 보기 페이지
	 * 주소 설계 : http://localhost:800/account/detail/${1}?type=all, deposit, withdraw
	 * @return
	 */
	@GetMapping("/detail/{accountId}")
	public String detail(@PathVariable(name="accountId") Integer accountId,
			@RequestParam(required=false, name="type") String type, Model model,
			@RequestParam(name="currentPageNum") Integer currentPageNum) {
		
		// 인증 검사
		User principal=(User)session.getAttribute(Define.PRINCIPAL);
		if(principal==null) {
			throw new UnAuthorizedException(Define.NOT_AN_AUTHENTICATED_USER, HttpStatus.UNAUTHORIZED);
		}
		
		
		// 유효성 검사
		// arrays.asList() -> array 선언과 동시에 초기화해주는 메서드
		// 사용자가 선택한 타입(입출금/입금/출금 검색)을 검사한다.
		List<String> validTypes=Arrays.asList("all","deposit","withdrawal");
		if(!validTypes.contains(type)) {
			throw new DataDeliveryException("유효하지 않은 접근입니다.", HttpStatus.BAD_REQUEST);
		}
		
		Integer limit=2;
	
		
		// 계좌/내역 정보
		Account account = accountService.readAccountById(accountId);
		Integer totalBoard=(accountService.readHistoryByAccountId(type, accountId)).size(); //총 보드 갯수
		Integer totalPages=(int)Math.ceil((double)totalBoard/limit);
		Integer currentPage = currentPageNum;
		
		if(currentPage==null) {
			currentPage=1;
		}
		Integer offset;
		
		if(currentPage==1) {
			offset=0;
		} else {
			offset=currentPageNum;
		}
		
		System.out.println("accountId"+accountId);
		
		List<HistoryAccount> historyList= accountService.readHistoryByAccountIdForPaging(type, accountId,limit,offset);
		
		// 페이징 정보 처리
		
		
		model.addAttribute("type", type);
		model.addAttribute("account",account);
		model.addAttribute("historyList", historyList);
		model.addAttribute("totalPages", totalPages);
		model.addAttribute("currentPage", currentPage);
		return "account/detail";
	}

 

 

(2) AccountService

/**
	 * 단일 계좌 거래 내역 조회 (페이지네이션)
	 * @param type = [all, deposit, withdrawal]
	 * @param accountId (pk)
	 * @return 전체, 입금, 출금 거래 내역(3가지 타입 반환)
	 */
	@Transactional
	public List<HistoryAccount> readHistoryByAccountIdForPaging(String type, Integer accountId,Integer limit, Integer offset){
		List<HistoryAccount> list=new ArrayList<>();
		list=historyRepository.findByAccountIdAndTypeOfHistoryAndPaging(type, accountId,limit,offset);
		return list;
	}