STS3 쇼핑몰 프로젝트[23] 상품 정보 삭제 구현

순서

1. Mapper 메서드

2. Service 메서드

3. Controller 메서드

4. View 처리

1. Mapper 메서드

상품 정보 삭제 쿼리를 수행하는 메서드를 AdminMapper.java 인터페이스에 추가합니다.

/* 상품 정보 삭제 */
public int productsDelete(int product_id);

AdminMapper.xml

앞서 선언한 메서드가 실행해야 할 태그와 쿼리문을 작성합니다.

<!-- 상품 정보 삭제 -->
<delete id="productsDelete">
	delete from product where product_id = #{product_id}
</delete>

2. Service 메서드

AdminService.java

삭제 Mappper 메서드를 호출하는 Service 메서드를 작성했습니다.

AdminService.java에 아래의 메서드 선언부를 추가합니다.

/* 상품 정보 삭제 */
public int productsDelete(int product_id);

AdminServiceImpl.java

오버 라이딩하여 앞서 선언한 메서드의 구현부를 작성합니다.

/* 상품 정보 삭제 */
@Override
public int productsDelete(int product_id) {
	log.info("productsDelete..........");
	// DB 데이터 삭제 (상품 정보)
	return adminMapper.productsDelete(product_id);
}

3. Controller 메서드

AdminController.java에 상품 정보 삭제 기능을 수행하는 url 매핑 메서드를 작성합니다.

 

메서드 수행 후 리다이렉트 방식으로 '상품 목록' 페이지로 이동되도록 하였고, 삭제를 수행하는 Service 메서드를 수행 후 반환받는 데이터를 '상품 목록' 페이지에 전송되도록 작성하였습니다.

/* 상품 정보 삭제 */
@PostMapping("/productsDelete")
public String productsDeletePOST(int product_id, RedirectAttributes rttr) {

	logger.info("productsDeletePOST..........");

	int result = adminService.productsDelete(product_id);

	// 삭제를 수행하는 Service 메서드를 수행 후 반환받는 데이터를 '상품 목록' 페이지에 전송
	rttr.addFlashAttribute("delete_result", result);

	// 메서드 수행 후 리다이렉트 방식으로 '상품 목록' 페이지로 이동
	return "redirect:/admin/admin";

}

4. View 처리

product_update.jsp

product_update.jsp에 아래 <input> 태그를 추가해줍니다.

<div class="button">
	<input type="button" value="취소" id="cancelBtn" /> 
    <input type="button" value="수정" id="modifyBtn" /> 
    <input type="button" value="삭제" id="deleteBtn" />
</div>

추가한 버튼이 동작하도록 <script> 태그 내부에 아래의 JavaScript코드를 추가합니다.

/* 삭제 버튼 */
$("#deleteBtn").on("click", function(e){
	e.preventDefault();
	let moveForm = $("#moveForm");
	moveForm.find("input").remove();
	moveForm.append('<input type="hidden" name="product_id" value="${productsInfo.product_id}">');
	moveForm.attr("action", "/admin/productsDelete");
	moveForm.attr("method", "post");
	moveForm.submit();
});

admin.jsp

삭제 기능 수행 후 서버에서 전송받은 데이터에 따라 경고 문구가 출력되도록 <script> 코드의 doucment ready 메서드 내에 아래의 코드를 추가합니다.

/* 삭제 결과 경고창 */
let delete_result = '${delete_result}';
			
if(delete_result == 1){
		alert("삭제 완료");
}

테스트

삭제 기능이 정상적으로 수행되는지 '상품 목록' 페이지로 이동이 되는지, 경고문구가 뜨는지 확인합니다.