08. 책 수정 화면 만들기 - 1
8.1. 책 수정 화면 개요
책 수정 정보를 보여주기 위한 화면을 만든다.
브라우저에서 /update?bookId=1 주소에 접속하면 책 정보를 수정할 수 있는 화면을 보여준다.
8.2. 책 수정 화면 컨트롤러 메소드 추가
src/main/java/sample/spring/yse/BookController.java
@RequestMapping(value = "/update", method = RequestMethod.GET)
public ModelAndView update(@RequestParam Map<String, Object> map) {
Map<String, Object> detailMap = this.bookService.detail(map);
ModelAndView mav = new ModelAndView();
mav.addObject("data", detailMap);
mav.setViewName("/book/update");
return mav;
}
책 수정 화면은 책 입력 화면 + 책 상세 화면이다. 책 입력 화면의 화면 형식을 그대로 따라가지만 데이터베이스에 저장된 데이터만 그려주면 된다.
따라서 책 데이터는 상세 화면 서비스에서 가지고 오고, 뷰는 책 임력 화면을 복사한다.
8.3. 책 수정 화면 뷰 작성
수정 뷰 화면은 생성 화면을 복사한다.
package explorer에서 src => main => webapp => WEB-INF => views => book => create.jsp 파일을 복사한다. ctrl + c 키를 누르거나 우클릭 후 copy를 클릭하면 된다.
book 폴더를 클릭하고 ctrl + v를 누르거나 우클릭 후 paste 를 클릭한다.
파일명을 update.jsp 로 저장한다.
src/main/webapp/WEB-INF/views/book/update.jsp
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>책 수정</title>
</head>
<body>
<h1>책 수정</h1>
<form method="POST">
<p>제목 : <input type="text" name="title" value="${ data.title }" /></p>
<p>카테고리 : <input type="text" name="category" value="${ data.category }" /></p>
<p>가격 : <input type="text" name="price" value="${ data.price }" /></p>
<p><input type="submit" value="저장" />
</form>
</body>
</html>
create.jsp 파일에 비해서 title, 'h1' 이름이 "책 생성"에서 "책 수정"으로 변경되었다.
또한 각 입력 항목의 value 항목들이 컨트롤러에서 전달받은 값을 보여주도록 수정되었다.
8.4. 책 수정 화면 확인하기
서버를 클릭하고 ctrl + alt + d를 눌러 디버깅 모드로 시작하거나 ctrl + alt + s를 눌러 서버 모드로 시작한다.
브라우저에 http://localhost:8080/update?bookId=1 주소로 접속해서 화면이 나오는지 확인한다.
