728x90
반응형
[Springboot] 22. 계좌 상세 보기 기능(2단계-화면 생성)
*[계좌 상세 보기] 기능은 [계좌 목록] 밑에 들어가는 기능이다.
1. list.jsp
-리스트 항목별 주소를 달기 위해 @PathVariable 방식을 사용한다.
-@PathVariable로 넘겨줄 항목은 account-id (통장 계좌의 primary key)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 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">
길동님 계좌 <br> 계좌 번호 : xxxxxx <br> 잔액 : xxxxx 원
</div>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>날짜</th>
<th>보낸 이</th> <%--sender --%>
<th>받은 이</th> <%--receiver --%>
<th>입출금 금액</th> <%--amount --%>
<th>계좌 잔액</th> <%--balance --%>
</tr>
</thead>
<tbody>
<tr>
<th>yyyy-mm-dd 11:20:11</th> <%--연-월-일 시:분:초 --%>
<th>ATM</th> <%--보낸 이 --%>
<th>1111</th> <%--받은 이 --%>
<th>10,000</th> <%--입출금 금액 --%>
<th>5,000,000</th> <%--현재 계좌 잔액 --%>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end of col-sm-8 -->
</div>
</div>
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>
2. AccountController.jsp -> detail()
***@Requestparam, @PathVariable을 사용할 때는 꼭 name 속성을 명시해주어야 한다.
***만약 required 속성이 false라면, name을 명시하지 않아도 오류가 나지 않는다. (required 속성에서 미리 필터링된다...)
/**
* 계좌 상세 보기 페이지
* 주소 설계 : 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) {
// 인증 검사 추후 추가
System.out.println("@PathVariable : "+accountId);
System.out.println("@@RequestParam : "+type);
return "account/detail";
}
3. 타입별 입출금 내역 보기(입출금/입금/출금)
(1) detail.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 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">
길동님 계좌 <br> 계좌 번호 : xxxxxx <br> 잔액 : xxxxx 원
</div>
<br>
<div>
<a href="/account/detail/1?type=all>" class="btn btn-outline-primary">전체</a>
<a href="/account/detail/1?type=deposit>" class="btn btn-outline-primary">입금</a>
<a href="/account/detail/1?type=withdraw>" class="btn btn-outline-primary">출금</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>날짜</th>
<th>보낸 이</th> <%--sender --%>
<th>받은 이</th> <%--receiver --%>
<th>입출금 금액</th> <%--amount --%>
<th>계좌 잔액</th> <%--balance --%>
</tr>
</thead>
<tbody>
<tr>
<th>yyyy-mm-dd 11:20:11</th> <%--연-월-일 시:분:초 --%>
<th>ATM</th> <%--보낸 이 --%>
<th>1111</th> <%--받은 이 --%>
<th>10,000</th> <%--입출금 금액 --%>
<th>5,000,000</th> <%--현재 계좌 잔액 --%>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end of col-sm-8 -->
</div>
</div>
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>
728x90
반응형
'Springboot' 카테고리의 다른 글
[Spring] **24. 개념 보충 공부(3) (0) | 2024.08.12 |
---|---|
[Spring] **23. 개념 보충 공부(2) (0) | 2024.08.12 |
[Springboot] 21. 계좌 상세 보기 기능 (1단계) (0) | 2024.08.09 |
[Springboot] 20. 입금 기능 만들기 (0) | 2024.08.08 |
[Springboot] 19. 출금 기능 만들기 (0) | 2024.08.08 |