detail.jsp 만들기
계좌 상세 보기 화면은 계좌 목록 페이지에서 존재하는 하나의 계좌 번호를 선택했을 때 DB에서 데이터를 조회하고 결과를 화면에 출력해야 한다. 한 번에 작업을 하면 어려움이 있을 수 있으니 기본 화면부터 만들고 기능을 추가하도록 하자. - list로 시작
샘플 화면 확인
Table 태그와 부트스트랩4 을 활용하여 약간의 CSS 추가
account/list.jsp 파일에 링크 추가 하기
<tbody>
<c:forEach var="account" items="${accountList}">
<tr>
<td><a href="/account/detail/${account.id}?type=all">${account.number}</a></td>
<td>${account.balance}</td>
</tr>
</c:forEach>
</tbody>
<td><a href="/account/detail/${account.id}?type=all">${account.number}</a></td>
AccountController
/**
* 계좌 상세 보기 페이지
* 주소설계 - http://localhost:8080/account/detail/1?type=all, deposit, withdraw
* @RequestParam - 쿼리 스트링으로 들어오는 주소를 받아오는 방법
* @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";
}
AccountController 최종 코드
/**
* 계좌 상세 보기 페이지
* 주소설계 - http://localhost:8080/account/detail/1?type=all, deposit, withdraw
* @RequestParam - 쿼리 스트링으로 들어오는 주소를 받아오는 방법
* @return
*/
@GetMapping("/detail/{accountId}")
public String detail(@PathVariable(name = "accountId") Integer accountId, @RequestParam(required = false, name = "type") String type, Model model) {
// 인증검사
User principal = (User) session.getAttribute(Define.PRINCIPAL);
if (principal == null) {
throw new UnAuthorizedException(Define.NOT_AN_AUTHENTICATED_USER, HttpStatus.UNAUTHORIZED);
}
// 유효성 검사
List<String> validTypes = Arrays.asList("all", "deposit", "withdrawal");
if(!validTypes.contains(type)) {
throw new DataDeliveryException("유효하지 않은 접근 입니다.", HttpStatus.BAD_REQUEST);
}
Account account = accountService.readAccountById(accountId);
List<HistoryAccount> historyList = accountService.readHistoryByAccountId(type, accountId);
model.addAttribute("account", account);
model.addAttribute("historyList", historyList);
return "account/detail";
}
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> 계좌번호 : xxxxxxx<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=withdrawal" class="btn btn-outline-primary" >출금</a>
</div>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>날짜</th>
<th>보낸이</th>
<th>받은이</th>
<th>입출금 금액</th>
<th>계좌잔액</th>
</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>
<!-- end of content.jsp(xxx.jsp) -->
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>: 위 코드와 그림 상세보기에서 전체(all),입금(deposit),출금(withdrawal)은 같은 화면에서 사용자 선택에 따라 다른 결과 화면이 출력이 되어야 한다. (동적 쿼리를 사용해서 구현 할 예정)
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">
${principal.username}님 계좌<br> 계좌번호 : ${account.number}<br> 잔액 : ${account.balance} 원
</div>
<br>
<div>
<a href="/account/detail/${account.id}?type=all" class="btn btn-outline-primary" >전체</a>
<a href="/account/detail/${account.id}?type=deposit" class="btn btn-outline-primary" >입금</a>
<a href="/account/detail/${account.id}?type=withdrawal" class="btn btn-outline-primary" >출금</a>
</div>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>날짜</th>
<th>보낸이</th>
<th>받은이</th>
<th>입출금 금액</th>
<th>계좌잔액</th>
</tr>
</thead>
<tbody>
<c:forEach var="history" items="${historyList}">
<tr>
<th>${history.createdAt}</th>
<th>${history.sender}</th>
<th>$history.receiver}</th>
<th>${history.amount}</th>
<th>${history.balance}</th>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<!-- end of col-sm-8 -->
</div>
</div>
<!-- end of content.jsp(xxx.jsp) -->
<!-- footer.jsp -->
<%@ include file="/WEB-INF/view/layout/footer.jsp"%>
AccountRepository에 추상 메서드 추가
의존성 역전 원칙 (Dependency Inversion Principle,DIP)
프로그래밍은 현실 세계의 논리와 구조를 코드로 변환하는 과정이라고 할 수 있다. 이 과정에서 "인터페이스 중심 설계"는 중요한 개념 중 하나이다. 이를 "역할과 구현"이라는 관점으로 이해할 수 있다. 예를 들어, "로미오와 줄리엣"이라는 연극을 생각해보면, 여기에는 '로미오'라는 역할이 있고, 이 역할을 수행하는 구체적인 배우가 있다.
"인터페이스로 설계한다"는 것은, 역할(인터페이스)은 정의되어 있지만, 그 역할을 구현하는 구체적인 주체(구현체)는 바뀔 수 있다는 의미이다. 즉, '로미오'라는 역할은 동일하지만, 그 역할을 수행하는 배우는 변경될 수 있으며, 배우가 변경되더라도 연극은 계속해서 진행될 수 있다. 이는 소프트웨어 설계에서 인터페이스를 통해 '역할'을 정의하고, 이를 다양한 '구현체'로 실현할 수 있음을 의미한다.
도전 과제 - 자바의 SOLID 원칙에 대해 간략하게 조사해보자
AccountRepository - 역할(추상메서드 추가)
package com.tenco.bank.repository.interfaces;
import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.tenco.bank.repository.model.Account;
@Mapper //AccountRepository 인터페이스와 account.xml 파일을 매칭 시킨다.
public interface AccountRepository {
public int insert(Account account);
public int updateById(Account account);
public int deleteById(Integer id, String name);
// ※ 계좌 조회 기능
// 한 사람의 유저는 여러 개의 계좌번호를 가질 수 있다. : 리스트
// interface 파라미터명과 xml에 사용할 변수명을 다르게 사용해야 한다면 @Pram 애노테이션을 사용할 수 있다.
// 그리고 2개 이상의 파라미터를 사용할 경우, 반드시 @Pram 애노테이션을 사용하자!
public List<Account> findByUserId(@Param("userId") Integer principalId); // 유저 아이디로 조회 시 몇 개의 계좌가 있는지 조회
// account id 값으로 계좌 정보 조회하는 기능 필요
public Account findByNumber(@Param("number") String id);
// 코드 추가 예정
public Account findByAccountId(Integer accountId);
}
account.xml - 구현 : 파일 하단에 쿼리 구문 추가 (resources/mapper/account.xml)
<select id="findByAccountId" resultType="com.tenco.bank.repository.model.Account">
select * from account_tb where id = #{accountId}
</select>
HistoryAccount
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
@ToString
public class HistoryAccount {
private Integer id;
private Long amount;
private Long balance;
private String sender;
private String receiver;
private Timestamp createdAt;
}
@Mapper
public interface HistoryRepository {
// ... 생략
// 코드 추가 부분
public List<HistoryAccountDTO> findByAccountIdAndTypeOfHistory(@Param("type") String type,
@Param("accountId") Integer accountId);
}
history.xml
<select id="findByAccountIdAndTypeOfHistory"
resultType="com.tenco.bank.repository.model.HistoryAccount">
<if test="type == 'all'">
select h.id, h.amount,
case
when h.w_account_id = #{accountId} then (h.w_balance)
when h.d_account_id = #{accountId} then (h.d_balance)
end as balance,
coalesce(cast(wa.number as char(10)), 'ATM') as sender,
coalesce(cast(da.number as char(10)), 'ATM') as receiver,
h.created_at
from history_tb as h
left join account_tb as wa on h.w_account_id = wa.id
left join account_tb as da on h.d_account_id = da.id
where h.w_account_id = #{accountId} OR h.d_account_id = #{accountId}
</if>
<if test="type == 'deposit'">
select h.id, h.amount, h.d_balance as balance, h.created_at,
coalesce(cast(wa.number as char(10)) , 'ATM') as sender,
da.number as receiver
from history_tb as h
left join account_tb as wa on wa.id = h.w_account_id
left join account_tb as da on da.id = h.d_account_id
where h.d_account_id = #{accountId}
</if>
<if test="type == 'withdrawal'">
select h.id, h.amount, h.w_balance as balance, h.created_at,
coalesce(cast(da.number as char(10)), 'ATM') as receiver,
wa.number as sender
from history_tb as h
left join account_tb as wa on wa.id = h.w_account_id
left join account_tb as da on da.id = h.d_account_id
where h.w_account_id = #{accountId}
</if>
</select>'Spring boot' 카테고리의 다른 글
| Bank App 만들기 - 계좌 상세보기 페이징 처리 (0) | 2024.08.16 |
|---|---|
| Bank App 만들기 - 간단한 유틸 클래스 만들기 (0) | 2024.08.16 |
| Bank App 만들기 - 계좌 상세보기(쿼리학습) (1) | 2024.08.16 |
| Bank App 만들기 - 이체 기능 (0) | 2024.08.13 |
| Bank App 만들기 - 입금 기능 (0) | 2024.08.13 |