Bank App 만들기 (deployment) - 25. 계좌 상세보기 페이징 처리

💡학습 목표💡

• CSS와 부트스트랩을 활용한 중앙 정렬: 플렉스박스(d-flex)와 부트스트랩의 유틸리티 클래스를 사용해 요소를 중앙에 정렬하는 방법.
• JSP에서 동적 콘텐츠 처리: JSP에서 동적 데이터를 처리하고 화면에 표시하는 방법.
• 페이징(Pagination) 구현

 

예시

 

사전 기반 지식

• 부트스트랩의 그리드 시스템:
  • 개념: 부트스트랩은 화면을 12개의 컬럼으로 나누어 레이아웃을 구성할 수 있도록 돕는 그리드 시스템을 제공합니다. col-sm-8은 작은 화면에서 8개의 컬럼을 차지하는 레이아웃을 의미합니다.
  • 사용 방법: col-sm-8, col-md-6 등의 클래스를 사용해 반응형 레이아웃을 쉽게 구성할 수 있습니다.
  • 예제: col-sm-8은 12개의 그리드 중 8개를 차지하며, 이는 전체 화면의 약 66.67%입니다.
• 플렉스박스(Flexbox)와 중앙 정렬:
  • 개념: 플렉스박스는 CSS의 레이아웃 모델로, 요소를 쉽게 정렬하고 배치하는 데 사용됩니다. 부트스트랩의 d-flex와 justify-content-center는 플렉스박스를 활용해 자식 요소를 수평 중앙에 정렬하는 데 사용됩니다.
  • 사용 방법: d-flex를 부모 요소에 적용하고, justify-content-center를 추가하여 자식 요소를 중앙에 배치합니다.
• 페이징(Pagination) 구현:
  • 개념: 페이징은 많은 양의 데이터를 여러 페이지로 나누어 보여주는 기법입니다. 사용자가 한 페이지에 표시할 데이터의 수를 지정하고, 나머지 데이터는 다음 페이지로 넘깁니다.
  • 사용 방법: 현재 페이지 번호(currentPage)와 전체 페이지 수(totalPages)를 기반으로 페이징 링크를 생성합니다. 부트스트랩의 pagination 클래스를 사용해 시각적으로 구성합니다.

 

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- heafer.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-md5">
		<div class="user--box">
			${principal.username}님 계좡 <br> 계좌번호 : ${account.number} <br> 잔액 : ${account.formatKoreanWon(account.balance)}
		</div>
		<br>
		<div>
			<a href="/account/detail/${account.id}?type=all" class="btn btn-outline-primary">전체</a>&nbsp; <a href="/account/detail/${account.id}?type=deposit"
				class="btn btn-outline-primary">입금</a>&nbsp; <a href="/account/detail/${account.id}?type=withdrawal" class="btn btn-outline-primary">출금</a>&nbsp;
		</div>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>날짜</th>
					<th>보낸이</th>
					<th>받은이</th>
					<th>입출금 금액</th>
					<th>계좌 잔액</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="historyAccount" items="${historyList}">
					<tr>
						<th>${historyAccount.timestampToString(historyAccount.createdAt)}</th>
						<th>${historyAccount.sender}</th>
						<th>${historyAccount.receiver}</th>
						<th>${historyAccount.formatKoreanWon(historyAccount.amount)}</th>
						<th>${historyAccount.formatKoreanWon(historyAccount.balance)}</th>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<br>
		<!-- Pagination -->
		<div class="d-flex justify-content-center">
			<ul class="pagination">
				<!-- Previous Page Link -->
				<li class="page-item <c:if test='${currentPage == 1}'>disabled</c:if>">
					<a class="page-link" href="?type=${type}&page=${currentPage - 1}&size=${size}">이전 페이지(Previous)</a>
				</li>

				<!-- Page Numbers -->
				<c:forEach begin="1" end="${totalPages}" var="page">
					<li class="page-item <c:if test='${page == currentPage}'>active</c:if>">
						<a class="page-link" href="?type=${type}&page=${page}&size=${size}">${page}</a>
					</li>
				</c:forEach>

				<!-- Mage Page Link -->
				<li class="page-item <c:if test='${currentPage == totalPages}'>disabled</c:if>">
					<a class="page-link" href="?type=${type}&page=${currentPage + 1}&size=${size}">다음 페이지(Next)</a>
				</li>

			</ul>
		</div>

	</div>


</div>
<!-- end of col-sn-8 -->
</div>
</div>
<!-- end of content.jsp(xxx.jsp) -->


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

 

AccountController - 코드 추가 및 수정

 

history.xml - 쿼리 수정 및 추가