# 데이터 삭제하기(delete)
### 개요
삭제 버튼을 누르면 데이터가 DB에서 삭제되고, 리다이렉트 응답을 통해 삭제결과를 확인하도록 하겠습니다.
![Imgur](https://i.imgur.com/xzJ5enk.png)
### 삭제링크 만들기
기존의 인덱스화면에 삭제 버튼을 추가해줍니다.
+ 삭제 URL: /books/delete/{id}
**views/books/index.jsp**
```jsp
...
<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-lg btn-default">수정</a>
<a href="<c:url value='/books/delete/${ book.id }' />" class="btn btn-lg btn-danger">삭제</a>
</div>
</div>
</div>
</c:forEach>
...
```
![Imgur](https://i.imgur.com/DiYPd8r.png)
### 삭제버튼과 컨트롤러 연결시키기
삭제요청을 컨트롤러에서 받아올 수 있게 해줍시다. `delete()` 메소드를 추가한 뒤, @RequestMapping 어노테이션을 사용하여 요청을 받아오게 해줍니다.
![Imgur](https://i.imgur.com/yEt6beL.png)
**BooksController.java**
```java
...
@RequestMapping(value = "/books/delete/{id}", method = RequestMethod.GET)
public String delete() {
return "";
}
...
```
### 맵퍼를 사용하여 DB 삭제하기
맵퍼에게 DB의 데이터를 삭제하게 합니다.
![Imgur](https://i.imgur.com/7ycb1tN.png)
**BooksController.java**
```java
@RequestMapping(value = "/books/delete/{id}", method = RequestMethod.GET)
public String delete(@PathVariable int id) {
bookMapper.delete(id);
return "";
}
```
맵퍼인터페이스에 `delete()` 메소드를 추가합니다.
**BookMapper.java**
```java
...
@Delete("delete from books where id = #{id}")
public boolean delete(int id);
...
```
### 리다이렉트 응답을 통한 결과확인
데이터 삭제 후, 삭제 결과를 확인할 수 있게 합니다. 리다이렉트 응답을 사용하여 인덱스(`index.jsp`)페이지를 볼 수 있게 해주세요.
![Imgur](https://i.imgur.com/rSr7IQT.png)
**BooksController.java**
```java
...
@RequestMapping(value = "/books/delete/{id}", method = RequestMethod.GET)
public String delete(@PathVariable int id) {
bookMapper.delete(id);
return "redirect:/books";
}
...
```
### 잘 동작하는지 확인해봅시다.
삭제가 눌려지면 라우터(@RequestMapping 어노테이션)에 연결된 컨트롤러의 메소드가 수행됩니다. 메소드 내부에서 맵퍼는 DB에게 삭제 쿼리를 전달할 것이고 데이터는 삭제 됩니다. 맵퍼의 동작이 끝나면 컨트롤러는 클라이언트에게 리다이렉트응답을 보내게 되고, 그로인해 삭제된 페이지 결과를 확인 할 수 있게 되겠습니다.
![Imgur](https://i.imgur.com/xzJ5enk.png)
그럼 예상대로 동작하는지 확인해 봅시다. 삭제버튼을 클릭해주세요.
인덱스 페이지에서 삭제 버튼을 눌러줍니다.
![Imgur](https://i.imgur.com/DiYPd8r.png)
삭제 결과입니다.
![Imgur](https://i.imgur.com/WPCnym4.png)
축하합니다~~ 삭제하기 기능을 완료하였습니다!!