목표
'상품 수정 페이지'에서 '삭제' 버튼을 추가하여 클릭 시 해당 상품 정보의 삭제를 수행하는 기능 구현을 목표로 합니다.
1. Mapper
AdminMapper.java
상품 정보 삭제 쿼리를 수행하는 메서드를 AdminMapper.java인터페이스에 추가합니다.
/* 상품 정보 삭제 */
public int goodsDelete(int bookId);AdminMapper.xml
앞서 선언한 메서드가 실행해야할 태그와 쿼리문을 작성합니다.
<!-- 상품 정보 삭제 -->
<delete id="goodsDelete">
delete from test_book where bookId = #{bookId}
</delete>2. Service
AdminService.java
삭제 Mappere메서드를 호출하는 Service메서드를 작성하겠습니다. AdminService.java에 아래의 메서드 선언부를 추가합니다.
/* 상품 정보 삭제 */
public int goodsDelete(int bookId);AdminServiceImpl.java
오버라이딩하여 앞서 선언한 메서드의 구현부를 작성합니다.
/* 상품 정보 삭제 */
@Override
public int goodsDelete(int bookId) {
log.info("goodsDelete().............");
return adminMapper.goodsDelete(bookId);
}3. Controller
AdminController.java에 상품 정보 삭제 기능을 수행하는 url매핑 메서드를 작성합니다. 메서드 수행 후 리다이렉트 방식으로 '상품 목록'페이지로 이동되도록 하였고, 삭제를 수행하는 Service메서드를 수행 후 반환받는 데이터를 '상품 목록'페이지에 전송되도록 작성하였습니다.
/* 상품 정보 삭제 */
@PostMapping("/goodsDelete")
public String goodsDeletePOST(int bookId, RedirectAttributes rttr) {
logger.info("goodsDeletePOST.......");
int result = adminService.goodsDelete(bookId);
rttr.addFlashAttribute("delete_result", result);
return "redirect:/admin/goodsManage";
}4. View처리
goodsModify.jsp
goodsModify.jsp의 버튼이 모여있는 태그에 아래의 버튼을 추가해줍니다.
<button id="deleteBtn" class="btn delete_btn">삭 제</button>추가해준 버튼이 동작하도록 <script>태그 내부에 아래의 Javascript코드를 추가합니다.
/* 삭제 버튼 */
$("#deleteBtn").on("click", function(e){
e.preventDefault();
let moveForm = $("#moveForm");
moveForm.find("input").remove();
moveForm.append('<input type="hidden" name="bookId" value="${goodsInfo.bookId}">');
moveForm.attr("action", "/admin/goodsDelete");
moveForm.attr("method", "post");
moveForm.submit();
});goodsModify.css
추가해준 버튼의 css설정을 해주기 위해 goodsModify.css파일에 아래의 코드를 추가하였습니다.
.delete_btn{
background-color: #efcdcd;
}
.delete_btn:hover{
background-color : #e4a7a7;
}goodsManage.jsp
삭제 기능 수행 후 서버에서 전송받은 데이터에 따라 경고 문구가 출력되도록 <script>코드의 document ready 메서드내에 아래의 코드를 추가합니다.
/* 삭제 결과 경고창 */
let delete_result = '${delete_result}';
if(delete_result == 1){
alert("삭제 완료");
}5. 테스트
