[Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 3

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

목표

상품 수정 페이지 구현

 상품 수정 페이지에서 수정 버튼을 눌렀을 때 수정 기능의 동작을 목표로 합니다.

 

 

 

순서

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 goodsModify(BookVO vo);

 

그림 1-1

 

 

 

 AdminMapper.xml

 

 앞서 작성한 메서드가 실행할 태그와 쿼리문을 작성합니다. (Orace과 MySQL 각각 다르게 작성해주어야 할 부분이 있는데 수정 날짜를 입력하는 값이 Oracle의 경우 'sysdate', MuySQL의 경우 'now()'입니다.)

 

<!-- Oracle -->
	<!-- 상품 정보 수정 -->
	<update id="goodsModify">
		
		update vam_book set bookName = #{bookName}, authorId = #{authorId}, publeYear = #{publeYear}, publisher = #{publisher}, cateCode = ${cateCode}, 
		bookPrice = #{bookPrice}, bookStock = #{bookStock}, bookDiscount = #{bookDiscount}, bookIntro = #{bookIntro}, bookContents = #{bookContents}, updateDate = sysdate
		where bookId = ${bookId}
		
	</update>
    
    
<!-- MySQL -->    
	<!-- 상품 정보 수정 -->
	<update id="goodsModify">
		
		update vam_book set bookName = #{bookName}, authorId = #{authorId}, publeYear = #{publeYear}, publisher = #{publisher}, cateCode = ${cateCode}, 
		bookPrice = #{bookPrice}, bookStock = #{bookStock}, bookDiscount = #{bookDiscount}, bookIntro = #{bookIntro}, bookContents = #{bookContents}, updateDate = now()
		where bookId = ${bookId}
		
	</update>

 

그림 1-2 Oracle

 

그림 1-3 MySQL

 

 

 

 AdminMapperTests.java

 

 작성한 메서드가 정상적으로 동작하는지 확인하기 위해 Junit 테스트를 합니다.

 

	/* 상품 정보 수정 */
	@Test
	public void goodsModifyTest() {
		
		BookVO book = new BookVO();
		
		book.setBookId(95);
		book.setBookName("mapper 테스트");
		book.setAuthorId(94);
		book.setPubleYear("2021-03-18");
		book.setPublisher("출판사");
		book.setCateCode("103002");
		book.setBookPrice(20000);
		book.setBookStock(300);
		book.setBookDiscount(0.23);
		book.setBookIntro("책 소개 ");
		book.setBookContents("책 목차 ");
		
		mapper.goodsModify(book);
		
	}

 

그림 1-4

 

그림 1-5

 

 

 

2. Service

 

AdminService.java

 

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

 

	/* 상품 수정 */
	public int goodsModify(BookVO vo);	

 

 

 

 

 AdminServiceImpl.java

 

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

 

	/* 상품 정보 수정 */
	@Override
	public int goodsModify(BookVO vo) {
		
		log.info("goodsModify........");
		
		return adminMapper.goodsModify(vo);
		
	}

 

 

 

 

 

3. Controller

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

 

	/* 상품 정보 수정 */
	@PostMapping("/goodsModify")
	public String goodsModifyPOST(BookVO vo, RedirectAttributes rttr) {
		
		logger.info("goodsModifyPOST.........." + vo);
		
		int result = adminService.goodsModify(vo);
		
		rttr.addFlashAttribute("modify_result", result);
		
		return "redirect:/admin/goodsManage";		
		
	}

 

 

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

 

 

 

4. View 처리

 4.1 버튼 동작

 

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

 

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

 

그림 4-1

 

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

 

 

 4.2 유효성 검사 적용

 

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

 

	/* 수정 버튼 */
	$("#modifyBtn").on("click",function(e){
		
		e.preventDefault();
		
		/* 체크 변수 */
		let bookNameCk = false;
		let authorIdCk = false;
		let publeYearCk = false;
		let publisherCk = false;
		let cateCodeCk = false;
		let priceCk = false;
		let stockCk = false;
		let discountCk = false;
		let introCk = false;
		let contentsCk = false;	
		
		/* 체크 대상 변수 */
		let bookName = $("input[name='bookName']").val();
		let authorId = $("input[name='authorId']").val();
		let publeYear = $("input[name='publeYear']").val();
		let publisher = $("input[name='publisher']").val();
		let cateCode = $("select[name='cateCode']").val();
		let bookPrice = $("input[name='bookPrice']").val();
		let bookStock = $("input[name='bookStock']").val();
		let bookDiscount = $("#discount_interface").val();
		let bookIntro = $(".bit p").html();
		let bookContents = $(".bct p").html();	
		
		/* 공란 체크 */
		if(bookName){
			$(".bookName_warn").css('display','none');
			bookNameCk = true;
		} else {
			$(".bookName_warn").css('display','block');
			bookNameCk = false;
		}
		
		if(authorId){
			$(".authorId_warn").css('display','none');
			authorIdCk = true;
		} else {
			$(".authorId_warn").css('display','block');
			authorIdCk = false;
		}
		
		if(publeYear){
			$(".publeYear_warn").css('display','none');
			publeYearCk = true;
		} else {
			$(".publeYear_warn").css('display','block');
			publeYearCk = false;
		}	
		
		if(publisher){
			$(".publisher_warn").css('display','none');
			publisherCk = true;
		} else {
			$(".publisher_warn").css('display','block');
			publisherCk = false;
		}
		
		if(cateCode != 'none'){
			$(".cateCode_warn").css('display','none');
			cateCodeCk = true;
		} else {
			$(".cateCode_warn").css('display','block');
			cateCodeCk = false;
		}	
		
		if(bookPrice != 0){
			$(".bookPrice_warn").css('display','none');
			priceCk = true;
		} else {
			$(".bookPrice_warn").css('display','block');
			priceCk = false;
		}	
		
		if(bookStock != 0){
			$(".bookStock_warn").css('display','none');
			stockCk = true;
		} else {
			$(".bookStock_warn").css('display','block');
			stockCk = false;
		}		
		
		if(!isNaN(bookDiscount)){
			$(".bookDiscount_warn").css('display','none');
			discountCk = true;
		} else {
			$(".bookDiscount_warn").css('display','block');
			discountCk = false;
		}	
		
		if(bookIntro != '<br data-cke-filler="true">'){
			$(".bookIntro_warn").css('display','none');
			introCk = true;
		} else {
			$(".bookIntro_warn").css('display','block');
			introCk = false;
		}	
		
		if(bookContents != '<br data-cke-filler="true">'){
			$(".bookContents_warn").css('display','none');
			contentsCk = true;
		} else {
			$(".bookContents_warn").css('display','block');
			contentsCk = false;
		}		
		
		/* 최종 확인 */
		if(bookNameCk && authorIdCk && publeYearCk && publisherCk && cateCodeCk && priceCk && stockCk && discountCk && introCk && contentsCk ){
			//alert('통과');
			$("#modifyForm").submit();
		} else {
			return false;
		}
		
	});
	

 

 

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

 

 수정을 수행하는 url매핑 메서드에서 수정이 정상적으로 완료되었을 경우 '상품 관리(목록)' 페이지에 데이터를 전송하였습니다. 이를 활용하여 사용자가 자신이 요청한 수정 기능이 정상적으로 완료되었음을 알리는 메시지를 구현할 것입니다. goodsManage.jsp의 <script> 태그 내에 있는 document ready 메서드 내에 아래의 코드를 추가합니다.

 

	/* 수정 성공 이벤트 */
	let modify_result = '${modify_result}';
	
	if(modify_result == 1){
		alert("수정 완료");
	}	

 

그림 4-2

 

 

4.4 테스트

 

 최종적으로 유효성 검사 코드가 동작을 하는지, 수정 기능을 수행하는지, 수정 완료 메시지가 뜨는지 확인합니다.

 

 

그림 4-3

 

그림 4-4

 

 

REFERENCE

 

 

DATE

• 2020.04.28