준비중..
09 데이터 수정하기(update)
# 데이터 수정하기(update)
### 이번 수업 개요
저장된 데이터를 수정하여, 다시 DB에 저장해보도록 하겠습니다.
### URL 만들기
데이터 수정페이지로 이동할 수 있도록 URL을 만들어 줍니다.
+ 수정페이지 URL : /books/edit/{id}
만들어진 URL로 접속할 수 있도록 `index.jsp`페이지에 링크를 추가해줍시다.
**views/books/index.jsp**
```jsp
...
<div class="row">
<c:forEach var="book" items="${books}" varStatus="status">
<div class="col-md-4">
<div class="thumbnail">
<img src="${ book.image }" />
<div class="caption">
<h3>${ book.title } <small>${ book.author }</small></h3>
<a href="<c:url value='/books/edit/${ book.id }' />" class="btn btn-info">수정</a>
</div>
</div>
</div>
</c:forEach>
</div>
...
```
> 전체 소스코드가 궁금하신 분은 [이전수업](http://cloudstudying.kr/lectures/121)을 참조하세요
### 수정페이지 만들기
수정하기위핸 페이지인 `edit.jsp` 파일을 만들어 줍니다.
**views/books/edit.jsp**
```jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page pageEncoding="utf-8" session="false"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="<c:url value="/css/bootstrap.min.css" />" rel="stylesheet">
<title>Books EDIT</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Books EDIT</h1>
<p>views/books/edit.jsp</p>
</div>
</div>
</body>
</html>
```
### 수정페이지와 URL 연결시키기
BooksController의 edit() 메소드를 만들고 URL을 부여 한 뒤, `edit.jsp` 페이지를 연결시켜줍니다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books/edit/{id}", method = RequestMethod.GET)
public String edit(@PathVariable int id) {
return "books/edit";
}
...
```
> @PathVariable 어노테이션은 URL로부터 변수 값을 받아올 수 있게 합니다.
연결이 잘 되었는지 확인해줍니다.
### 수정페이지 폼 추가하기
수정페이지(`edit.jsp`)에 폼 태그를 추가해줍니다. 수정페이지는 생성페이지(`new.jsp`)와 거의 흡사합니다. 따라서 생성페이지에서 폼태그를 복사해서 붙여넣어 준 뒤, 폼 태그 action 속성의 값을 바꾸어 줍니다.
**views/books/edit.jsp**
```jsp
...
<body>
<div class="container">
<div class="jumbotron">
<h1>Books EDIT</h1>
<p>views/books/edit.jsp</p>
</div>
<!-- action 값을 잘 설정해 주세요 -->
<form action="<c:url value='/books/update' />" method="post">
<div class="form-group form-group-lg">
<label class="control-label">도서 제목</label>
<input name="title" type="text" class="form-control">
</div>
<div class="form-group form-group-lg">
<label class="control-label">저자</label>
<input name="author" type="text" class="form-control">
</div>
<div class="form-group form-group-lg">
<label class="control-label">이미지</label>
<input name="image" type="text" class="form-control">
</div>
<button type="submit" class="btn btn-lg btn-primary">전송</button>
</form>
</div>
</body>
...
```
추가로 폼 전송버튼위에 히든인풋을 만들어 주어 데이터의 id값을 저장 하도록 합니다. (데이터 등록의 경우, id를 DB에서 자동적으로 만들어 주기때문에 폼 데이터에 id값을 가지고 있지 않음. 하지만 데이터 수정의 경우, id값이 있어야 수정을 할 수 있음)
**views/books/edit.jsp**
```jsp
...
<input name="id" type="hidden">
<button type="submit" class="btn btn-lg btn-primary">전송</button>
...
```
### 수정 페이지 값 불러오기
수정페이지에서 이전 데이터를 출력하게 해줍시다. 컨트롤러에서 맵퍼를 사용해 데이터를 가져오게 합니다.
**BooksController.java**
```java
@RequestMapping(value = "/books/edit/{id}", method = RequestMethod.GET)
public String edit(@PathVariable int id) {
// id 값을 통해 데이터를 가져옴
Book book = bookMapper.getBook(id);
return "books/edit";
}
```
BookMapper에 `getBook()` 메소드를 생성하여 에러를 없애줍니다.
**BookMapper.java**
```java
package com.mycompany.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import com.mycompany.vo.Book;
public interface BookMapper {
@Insert("insert into books (title, author, image) values (#{title}, #{author}, #{image})")
public boolean create(Book book);
@Select("select * from books")
public List<Book> getList();
@Select("select * from books where id = #{id}")
public Book getBook(int id);
}
```
이제 맵퍼를 통해 가져온 데이터를 뷰 페이지로 전달해줍시다.
**BooksController.java**
```java
@RequestMapping(value = "/books/edit/{id}", method = RequestMethod.GET)
public String edit(@PathVariable int id, Model model) {
Book book = bookMapper.getBook(id);
// 뷰 페이지로 데이터를 전달(key/value 형식)
model.addAttribute("book", book);
return "books/edit";
}
```
가져온 데이터를 수정페이지에서 출력하도록 해줍니다. 각각의 인풋 태그의 value 값을 적어주세요.
**views/books/edit.jsp**
```jsp
...
<form action="<c:url value='/books/update' />" method="post">
<div class="form-group form-group-lg">
<label class="control-label">도서 제목</label>
<input name="title" type="text" class="form-control" value="${ book.title }">
</div>
<div class="form-group form-group-lg">
<label class="control-label">저자</label>
<input name="author" type="text" class="form-control" value="${ book.author }">
</div>
<div class="form-group form-group-lg">
<label class="control-label">이미지</label>
<input name="image" type="text" class="form-control" value="${ book.image }">
</div>
<input name="id" type="hidden" value="${ book.id }">
<button type="submit" class="btn btn-lg btn-primary">전송</button>
</form>
...
```
잘 수행되는지 확인해 봅시다.
### 폼데이터 받아오기
수정을 위한 폼 태그는 action의 값에 적혀있는 URL로 데이터를 전송합니다. BooksController에 `update()` 메소드를 추가하여 데이터를 받아봅시다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books/update", method = RequestMethod.POST)
public String update(@ModelAttribute Book book) {
System.out.println(book.toString());
return "";
}
...
```
잘 받아지는지 확인해 볼까요?
골뱅이(`@`)들이 잘 추가되어 전달되었네요~
### DB 수정하기
수정할 데이터도 다 받아왔으니, 맵퍼를 사용해 DB를 수정해줍시다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books/update", method = RequestMethod.POST)
public String update(@ModelAttribute Book book) {
bookMapper.update(book);
return "";
}
...
```
BookMapper 인터페이스에 `update()` 메소드를 추가합니다.
**BookMapper.java**
```java
...
@Update("update books set title = #{title}, author = #{author}, image = #{image} where id = #{id}")
public boolean update(Book book);
...
```
데이터 수정이 끝나면, 인덱스 페이지를 볼 수 있게 해줍시다.
**BooksController.java**
```java
...
@RequestMapping(value = "/books/update", method = RequestMethod.POST)
public String update(@ModelAttribute Book book) {
bookMapper.update(book);
return "redirect:/books";
}
...
```
### 잘 동작하는지 확인해 봅시다
기본 페이지에서 수정 버튼을 클릭합니다.
마지막 책의 제목과 저자, 그리고 이미지주소를 변경해 주었습니다.
책 정보가 수정되고 리다이렉트된 결과화면입니다!
