가장 작업량이 많고 까다로운 Update 과정이다. 한 번 심호흡을 크게 하고 시작해본다.
- JSP 파일에서 Update 버튼에 대한 JS function을 추가한다. 수정 Form에 DB에 있는 row를 불러와야하기 때문에 b_idx를 Controller로 보내준다.
- Controller에서 전송 받은 파라미터를 활용 → 해당 b_idx의 row를 vo에 할당 → Model에 속성을 추가한 다음 수정 Form인 book_modify_form을 호출한다.
- book_modify_form.jsp에서 전달 받은 Model에서 정보를 추출하여 수정 form에 채워 넣는다.
- 수정 form은 입력 form과 대동소이 하기 때문에 book_insert_form.jsp를 복사해서 사용한다.
- 각 항목 HTML 태그의 value에 model안에 담겨진 vo를 활용하여 DB에서 불러온 값을 입력해 놓는다.
- 수정된 form에 채워진 정보를 전송하는 JS function을 만들고 update.do를 호출한다
- Controller에서 update.do 리퀘스트를 코딩한다.
- vo로 수정 된 정보를 한꺼번에 받아 DAO의 메소드에게 넘겨준다
- DAO에서 update method를 생성 → Mapper에서 SQL문 작성
- parameter가 vo로 들어오기 때문에 이에 맞는 parameterType을 설정
* 표지 사진을 수정하는 방법은 추후에 진행할 예정
<Step 1: book_list.jsp>
더보기
function modify(b_idx) {
if (confirm("수정을 진행하시겠습니까?")==false) return;
location.href ="modify_form.do?b_idx="+b_idx;
}
<Step 2: Controller _ modify_form.do>
더보기
@RequestMapping("/book/modify_form.do")
public String modify_form(int b_idx, Model model) {
BookVo vo = book_dao.selectOne(b_idx);
model.addAttribute("vo", vo);
return "book/book_modify_form";
}
<Step 3: book_modify_form.jsp>
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Add New Book</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
#box{
width: 800px;
margin: auto;
margin-top: 100px;
}
textarea {
width: 98%;
height: 100px;
}
input[type='button']{
width: 100px;
margin-top: 10px;
}
</style>
<script type="text/javascript">
function send(f){
f.action = "modify.do";
f.submit();
}
</script>
</head>
<body>
<form method="POST" enctype="multipart/form-data">
<input type="hidden" name="b_idx" value="${ vo.b_idx }">
<div id="box">
<div class="panel panel-primary">
<div class="panel-heading">Modify Form</div>
<div class="panel-body">
<table class="table">
<tr>
<th>분류</th>
<td><input type="text" name="b_category" value="${ vo.b_category }" required="required"></td>
<th>완독일</th>
<td><input type="text" name="b_readdate" value="${ fn:substring(vo.b_readdate,0,10) }"></td>
</tr>
<tr>
<th>제목</th>
<td><input type="text" name="b_title" value="${ vo.b_title }" required="required"></td>
<th>부제</th>
<td><input type="text" name="b_subtitle" value="${ vo.b_subtitle }"></td>
</tr>
<tr>
<th>작가</th>
<td><input type="text" name="b_author" value="${ vo.b_author }" required="required"></td>
<th>쪽수</th>
<td><input type="text" name="b_pages" value="${ vo.b_pages }"></td>
</tr>
<tr>
<th>출판사</th>
<td><input type="text" name="b_publisher" value="${ vo.b_publisher }" required="required"></td>
<th>출판일</th>
<td><input type="text" name="b_published" value="${ fn:substring(vo.b_published,0,10) }"></td>
</tr>
<tr>
<th>책 설명</th>
<td colspan="3"><textarea name="b_desc">${ vo.b_desc }</textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input class="btn btn-primary" type="button" value="Upload" onclick="send(this.form);">
<input class="btn btn-danger" type="button" value="Cancle" onclick="location.href='list.do'">
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
<Step 4&5: Controller_modify.do / DAO_update method / Mapper>
이것으로 기본적인 CRUD 기능은 구현해냈다!
'데이터 분석 > Spring' 카테고리의 다른 글
| Martin's Bookshelf_Part 6 : BOOK CRUD(Delete) (0) | 2021.01.10 |
|---|---|
| Martin's Bookshelf_Part 5 : BOOK CRUD(Create) (0) | 2021.01.10 |
| Martin's Bookshelf_Part 4 : list.jsp / Login&out (0) | 2021.01.09 |
| Martin's Bookshelf_Part 3 : MVC Framework Setting up (0) | 2021.01.09 |
| Martin's Bookshelf_Part 2 : ERD & Database (0) | 2021.01.09 |
| Martin's Bookshelf_Part 1 : Project Preset (0) | 2021.01.09 |
