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

프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

상품 정보 삭제 구현

 '상품 수정 페이지'에서 '삭제' 버튼을 추가하여 클릭 시 해당 상품 정보의 삭제를 수행하는 기능 구현을 목표로 합니다.

 

 

 

순서

1. Mapper

2. Service

3. Controller

4. View 처리

 

 

 

1.  Mapper

AdminMapper.java

 

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

 

	/* 상품 정보 삭제 */
	public int goodsDelete(int bookId);

 

그림 1-1

 

 

 

AdminMapper.xml

 

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

 

	<!-- 상품 정보 삭제 -->
	<delete id="goodsDelete">
	
		delete from vam_book where bookId = #{bookId}
	
	</delete>

 

그림 1-2

 

 

 

 

AdminMapperTests.java

 

 작성한 Mapper 메서드가 정상적으로 동작하는지 Junit 테스트합니다.

 

	/* 상품 정보 삭제 */
	@Test
	public void goodsDeleteTest() {
		
		int bookId = 169;
		
		int result = mapper.goodsDelete(bookId);
		
		if(result == 1) {
			System.out.println("삭제 성공");
		}
		
	}

 

그림 1-3

 

그림 1-4

 

 

 

 

2. Service

AdminService.java

 

 삭제 Mappper 메서드를 호출하는 Service 메서드를 작성하겠습니다. AdminService.java에 아래의 메서드 선언부를 추가합니다.

 

	/* 상품 정보 삭제 */
	public int goodsDelete(int bookId);

 

 

 

 

AdminServiceImpl.java

 

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

 

	/* 상품 정보 삭제 */
	@Override
	public int goodsDelete(int bookId) {

		log.info("goodsDelete..........");
		
		return adminMapper.goodsDelete(bookId);
	}		

 

그림 2-2

 

 

 

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";
		
	}

 

그림 3-1

 

 

 

4. View 처리

goodsModify.jsp

 

 goodsModify.jsp 의 버튼이 모여있는 태그에 아래의 버튼 태그를 추가해줍니다.

 

<button id="deleteBtn" class="btn delete_btn">삭 제</button>

 

그림 4-1

 

 

 

 추가해준 버튼이 동작하도록 <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();
	});

 

그림 4-2

 

 

 

goodsModify.css

 

 추가해준 버튼의 css 설정을 해주기 위해 goodsModify.css 파일에 아래의 코드를 추가하였습니다.

 

.delete_btn{
	background-color: #efcdcd;
}
.delete_btn:hover{
	background-color : #e4a7a7;
}

 

그림 4-3

 

 

 

goodsManage.jsp

 

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

 

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

 

 

 

 

테스트

 

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

 

그림 4-5

 

그림 4-6

 

 

 

REFERENCE

 

 

DATE

• 2020.04.29