STS3 쇼핑몰 프로젝트[22] 상품 정보 수정 구현(3)

순서

1. Mapper 메서드

2. Service 메서드

3. Controller 메서드

4. View 처리

4.1 버튼 동작

4.2 유효성 검사 적용

4.3 '상품 관리(목록) 페이지'

4.4 테스트

1. Mapper 메서드

수정 쿼리를 수행하는 Mapper, Service, Controller 메서드를 만들었습니다.

먼저 Mapper 단계의 메서드부터 작업했습니다.

 AdminMapper.java

상품 정보 수정 쿼리를 실행하는 메서드 선언부를 작성합니다.

/* 상품 수정 */
public int productsModify(SwanVO vo);

 AdminMapper.xml

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

<!-- 상품 정보 수정 -->
<update id="productsModify">
	update product set product_title = #{product_title}, product_content = #{product_content}, product_price = #{product_price}, product_stock = #{product_stock}, kind_id = #{kind_id},
	product_modify_date = sysdate
	where product_id = #{product_id}
</update>

2. Service 메서드

AdminService.java

상품 정보 수정 Mapper 메서드를 수행할 Service 단계의 메서드 선언부를 작성합니다.

/* 상품 수정 */
public int productsModify(SwanVO vo);

 

 AdminServiceImpl.java

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

/* 상품 정보 수정 */
@Override
public int productsModify(SwanVO vo) {
	return adminMapper.productsModify(vo);
}

3. Controller 메서드

 '상품 수정 페이지'에서 수정 버튼을 눌렀을 때 수행할 URL 매핑 메서드를 작성합니다.

/* 상품 정보 수정 */
@PostMapping("/product_update")
public String productsModifyPOST(SwanVO vo, RedirectAttributes rttr) {

	logger.info("productsModifyPOST.........." + vo);

	int result = adminService.productsModify(vo);

	// 해당 메서드가 작업을 정상적으로 수행했음을 알리는 메시지를 admin.jsp로 전송하는 코드
	rttr.addFlashAttribute("modify_result", result);

	return "redirect:/admin/admin";

}

앞서 상품 수정 쿼리를 수정하는 메서드 호출뿐만 아니라 해당 메서드가 작업을 정상적으로 수행했음을 알리는 메시지를 admin.jsp로 전송하는 코드 또한 추가하였습니다. (리다이렉트 방식으로 페이지를 이동할 것이기 때문에 RedirectAttributes 클래스의 메서드를 사용했습니다.)

4. View 처리

4.1 버튼 동작

product_update.jsp 페이지의 <script> 태그에 취소 버튼과 수정 버튼을 동작시키는 아래의 코드를 추가합니다.

/* 취소 버튼 */
$("#cancelBtn").on("click", function(e) {
	e.preventDefault();
	$("#moveForm").submit();
});

/* 수정 버튼 */
$("#modifyBtn").on("click", function(e) {
	e.preventDefault();
	$("#modifyForm").submit();
});

각 버튼이 동작을 잘하는지 테스트합니다. ( 취소 버튼의 경우 조회 페이지 이동, 수정 버튼의 경우 정보 수정이 정상적으로 이루어졌는지 확인합니다.)

 4.2 유효성 검사 적용

수정 버튼의 경우 서버로 수정 요청을 하기 전 사용자가 작성하지 않은 빈 항목이 없는지 확인을 해야 하는데, 이미 '상품 등록' 구현 때 작성한 코드가 있기 때문에 이를 활용하여 앞서 작성한 '수정' 버튼 코드를 아래의 코드로 수정합니다.

/* 수정 버튼 */
		$("#modifyBtn").on("click", function(e) {
			e.preventDefault();
			
			/* 체크 변수 */
			let productNameCk = false;
			let cateCodeCk = false;
			let priceCk = false;
			let stockCk = false;
			let introCk = false;
			
			/* 체크 대상 변수 */
			let productName = $("input[name='product_title']").val();
			let cateCode = $("select[name='kind_id']").val();
			let productPrice = $("input[name='product_price']").val();
			let productStock = $("input[name='product_stock']").val();
			let productIntro = $(".bit p").html();
			
			if(productName){
				$(".productName_warn").css('display','none');
				productNameCk = true;
			} else {
				$(".productName_warn").css('display','block');
				productNameCk = false;
			}
			
			if(cateCode != 'none'){
				$(".cateCode_warn").css('display','none');
				cateCodeCk = true;
			} else {
				$(".cateCode_warn").css('display','block');
				cateCodeCk = false;
			}	
			
			if(productPrice != 0){
				$(".productPrice_warn").css('display','none');
				priceCk = true;
			} else {
				$(".productPrice_warn").css('display','block');
				priceCk = false;
			}	
			
			if(productStock != 0){
				$(".productStock_warn").css('display','none');
				stockCk = true;
			} else {
				$(".productStock_warn").css('display','block');
				stockCk = false;
			}		
			
			if(productIntro != '<br data-cke-filler="true">'){
				$(".productIntro_warn").css('display','none');
				introCk = true;
			} else {
				$(".productIntro_warn").css('display','block');
				introCk = false;
			}	
			
			if(productNameCk && cateCodeCk && priceCk && stockCk && introCk){
				//alert('통과');
				$("#modifyForm").submit();
			} else {
				return false;
			}
		});

4.3 '상품 관리(목록) 페이지'

수정을 수행하는 url매핑 메서드에서 수정이 정상적으로 완료되었을 경우 '상품 관리(목록)' 페이지에 데이터를 전송했습니다.

이를 활용하여 사용자가 자신이 요청한 수정 기능이 정상적으로 완료되었음을 알리는 메시지를 구현할 것이기 때문에 admin.jsp의 <script> 태그 내에 있는 $(document). ready(function() {}) 메서드에 아래의 코드를 추가합니다.

$(document).ready(function() {
	/* 등록 성공 이벤트 */
	let eResult = '<c:out value="${enroll_result}"/>';		
	checkResult(eResult);
	function checkResult(result) {

		if (result === '') {
				return;
			}
		alert("상품'" + eResult + "'을 등록하였습니다.");
	}		
	/* 수정 성공 이벤트 */
	let modify_result = '${modify_result}';
			
	if(modify_result == 1){
		alert("수정 완료");
	}
});

4.4 테스트