Kim VamPa

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

스프링 프레임워크/쇼핑몰 프로젝트

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

Kim VamPa 2021. 4. 27. 10:27
728x90
반응형
프로젝트 Github : https://github.com/sjinjin7/Blog_Project
프로젝트 포스팅 색인(index) : https://kimvampa.tistory.com/188

목표

상품 수정 페이지 구현

 저번 포스팅에선 '수정 페이지'의 기본적인 틀을 완성하였습니다. 이번 포스팅에선 '수정 페이지'에서 출력이 안 되는 부분을 구현하고 '등록 페이지'에서와 마찬가지로 할인율에 따른 예상 가격과 같은 기능들을 구현 완성을 목표로 합니다.

 

 

 

순서

1. 출판일

2. 책 카테고리

3. 책 소개, 책 목차

4. 할인율

 

 

 

1.  출판일

 

그림 1-1

 

 '상품 등록 페이지'와 마찬가지로 출판일 항목이 datepicker를 적용해주어야 합니다. 이미 <head> 태그에 datepicker에 대한 라이브러리 추가 <script> 코드는 저번 포스팅에서 추가하였기 때문에, 적용에 대한 코드만 추가해주면 됩니다. 코드 추가에 앞서 <body> 태그 제일 하단에 <script> 태그를 추가한 뒤 페이지가 렌더링 후 반드시 실행을 하는 document ready 메서드를 추가해줍니다.

 

	<script>
	
		$(document).ready(function(){
			
		});
	
	</script>

 

그림 1-2

 

 datepicker 를 적용하는 코드를 document ready 메서드 내에 추가해줍니다. (해당 코드는 '상품 등록 페이지'에서 사용하였던 코드입니다.)

 

			/* 캘린더 위젯 적용 */
			/* 설정 */
			const config = {
				dateFormat: 'yy-mm-dd',
				showOn : "button",
				buttonText:"날짜 선택",
			    prevText: '이전 달',
			    nextText: '다음 달',
			    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			    dayNames: ['일','월','화','수','목','금','토'],
			    dayNamesShort: ['일','월','화','수','목','금','토'],
			    dayNamesMin: ['일','월','화','수','목','금','토'],
			    yearSuffix: '년',
		        changeMonth: true,
		        changeYear: true
			}			
			/* 캘린더 */
			$(function() {	
			  $( "input[name='publeYear']" ).datepicker(config);
			});

 

 수정 페이지이기 때문에 DB에 저장된 데이터가 출력이 되어야 합니다. 문제는 <input> 태그에 value속성을 추가해도 datepicker가 적용되었기 때문에 출력이 되지 않습니다. datepicker를 적용시키는 코드에 DB에 저장된 데이터가 출력이 되도록 하는 코드를 따로 추가해주어야 합니다. datepicker 적용하는 기존 코드 중 익명 함수의 코드를 아래의 코드로 변경해줍니다.

 

			$(function() {
				let publeYear = '${goodsInfo.publeYear}';
				$( "input[name='publeYear']" ).datepicker(config);
				$( "input[name='publeYear']" ).datepicker('setDate', publeYear);
			});

 

publeYear의 변수에는 String 타입의 'yyyy-MM-dd' 형식 이어야 합니다. MySQL에 저장된 데이터는 'yyyy-MM-dd'형식 그대로 호출이 되기 때문에 바로 사용해도 상관없습니다. 그런데 OracleDB의 경우는 'yyyy-MM-dd 00:00' 형식으로 출력이 되는데 이 데이터를 바로 사용할 경우 다른 날짜가 출력이 됩니다. 따라서 호출한 출판일 데이터를 'yyyy-MM-dd' 형식으로 가공한 후 삽입되도록 해야 합니다. 따라서 Orace DB를 사용하는 프로젝트의 경우는 아래의 코드로 수정합니다.

 

			/* 캘린더 */
			$(function() {
				let publeYear = '${goodsInfo.publeYear}';
				let puble_length = publeYear.indexOf(" ");
				publeYear = publeYear.substring(0, puble_length);
				$( "input[name='publeYear']" ).datepicker(config);
				$( "input[name='publeYear']" ).datepicker('setDate', publeYear);
			});

 

 

그림 1-3 MySQL 프로젝트

 

그림 1-4 Oracle 프로젝트

 

 

 페이지로 이동을 하여 정상적으로 출력이 되는지 수정이 가능한지를 테스트합니다.

 

그림 1-5

 

그림 1-6

 

 

2. 책 카테고리

 책 카테고리는 '상품 조회' 페이지에서 처럼 DB에 저장된 카테고리가 출력이 되면서, '상품 등록'페이지 와 같이 대분류 선택, 혹은 중분류 선택에 따라서 하위분류가 초기화 및 변경되도록 해야 합니다. 따라서 '상품 조회', '상품 등록' 페이지에서의 사용한 상품 카테고리 관련 코드를 활용하여 작성할 것입니다.

 

 먼저 DB에 저장된 카테고리가 선택된 상태로 출력시킬 코드를 추가해줍니다. 아래의 코드는 document ready 메서드 내부에 반드시 작성해 주어야 합니다.

 

			/* 카테고리 */
			let cateList = JSON.parse('${cateList}');

			let cate1Array = new Array();
			let cate2Array = new Array();
			let cate3Array = new Array();
			let cate1Obj = new Object();
			let cate2Obj = new Object();
			let cate3Obj = new Object();
			
			let cateSelect1 = $(".cate1");		
			let cateSelect2 = $(".cate2");
			let cateSelect3 = $(".cate3");
			
			/* 카테고리 배열 초기화 메서드 */
			function makeCateArray(obj,array,cateList, tier){
				for(let i = 0; i < cateList.length; i++){
					if(cateList[i].tier === tier){
						obj = new Object();
						
						obj.cateName = cateList[i].cateName;
						obj.cateCode = cateList[i].cateCode;
						obj.cateParent = cateList[i].cateParent;
						
						array.push(obj);				
						
					}
				}
			}	
			
				/* 배열 초기화 */
			makeCateArray(cate1Obj,cate1Array,cateList,1);
			makeCateArray(cate2Obj,cate2Array,cateList,2);
			makeCateArray(cate3Obj,cate3Array,cateList,3);
			
			
			let targetCate2 = '';
			let targetCate3 = '${goodsInfo.cateCode}';
			
				/* 소분류 */
			for(let i = 0; i < cate3Array.length; i++){
				if(targetCate3 === cate3Array[i].cateCode){
					targetCate3 = cate3Array[i];
				}
			}// for			
			
			for(let i = 0; i < cate3Array.length; i++){
				if(targetCate3.cateParent === cate3Array[i].cateParent){
					cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");
				}
			}				
			
			$(".cate3 option").each(function(i,obj){
				if(targetCate3.cateCode === obj.value){
					$(obj).attr("selected", "selected");
				}
			});			
			
				/* 중분류 */
			for(let i = 0; i < cate2Array.length; i++){
				if(targetCate3.cateParent === cate2Array[i].cateCode){
					targetCate2 = cate2Array[i];	
				}
			}// for		
			
			for(let i = 0; i < cate2Array.length; i++){
				if(targetCate2.cateParent === cate2Array[i].cateParent){
					cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");
				}
			}		
			
			$(".cate2 option").each(function(i,obj){
				if(targetCate2.cateCode === obj.value){
					$(obj).attr("selected", "selected");
				}
			});				
			
			
				/* 대분류 */
			for(let i = 0; i < cate1Array.length; i++){
				cateSelect1.append("<option value='"+cate1Array[i].cateCode+"'>" + cate1Array[i].cateName + "</option>");
			}	
			
			$(".cate1 option").each(function(i,obj){
				if(targetCate2.cateParent === obj.value){
					$(obj).attr("selected", "selected");
				}
			});

 

 카테고리가 정상적으로 출력되는지 확인합니다.

 

그림 2-1

 

 이번엔 사용자 선택에 따라 분류들이 변경되도록 할 차례입니다. 새로 작성할 코드는 렌더링 될 때 실행될 코드와 구분하기 위해서 기존의 <script> 태그 아래에 새로운 <script>를 추가하여 작업할 것입니다.

 

그림 2-2

 

 새로 추가한 두 번째 <script> 태그에 사용자 선택에 따라 카테고리 분류가 변경 되록해주는 기능을 하는 Javascript 코드를 추가합니다. (해당 코드는 '상품 등록' 페이지의 코드를 그대로 가져왔습니다. 단 위에서 이미 대분류를 출력시키는 코드는 존재하기 때문에 대분류 <option> 태그를 출력시키는 코드는 추가하지 않았습니다.)

 

	/* 카테고리 */
	let cateList = JSON.parse('${cateList}');

	let cate1Array = new Array();
	let cate2Array = new Array();
	let cate3Array = new Array();
	let cate1Obj = new Object();
	let cate2Obj = new Object();
	let cate3Obj = new Object();
	
	let cateSelect1 = $(".cate1");		
	let cateSelect2 = $(".cate2");
	let cateSelect3 = $(".cate3");
	
	/* 카테고리 배열 초기화 메서드 */
	function makeCateArray(obj,array,cateList, tier){
		for(let i = 0; i < cateList.length; i++){
			if(cateList[i].tier === tier){
				obj = new Object();
				
				obj.cateName = cateList[i].cateName;
				obj.cateCode = cateList[i].cateCode;
				obj.cateParent = cateList[i].cateParent;
				
				array.push(obj);				
				
			}
		}
	}	
	
		/* 배열 초기화 */
	makeCateArray(cate1Obj,cate1Array,cateList,1);
	makeCateArray(cate2Obj,cate2Array,cateList,2);
	makeCateArray(cate3Obj,cate3Array,cateList,3);

	
		/* 중분류 <option> 태그 */
	$(cateSelect1).on("change",function(){
		
		let selectVal1 = $(this).find("option:selected").val();	
		
		cateSelect2.children().remove();
		cateSelect3.children().remove();
		
		cateSelect2.append("<option value='none'>선택</option>");
		cateSelect3.append("<option value='none'>선택</option>");
		
		for(let i = 0; i < cate2Array.length; i++){
			if(selectVal1 === cate2Array[i].cateParent){
				cateSelect2.append("<option value='"+cate2Array[i].cateCode+"'>" + cate2Array[i].cateName + "</option>");	
			}
		}// for
		
	});
	
		/* 소분류 <option>태그 */
	$(cateSelect2).on("change",function(){
		
		let selectVal2 = $(this).find("option:selected").val();
		
		cateSelect3.children().remove();
		
		cateSelect3.append("<option value='none'>선택</option>");		
		
		for(let i = 0; i < cate3Array.length; i++){
			if(selectVal2 === cate3Array[i].cateParent){
				cateSelect3.append("<option value='"+cate3Array[i].cateCode+"'>" + cate3Array[i].cateName + "</option>");	
			}
		}// for		
		
	});

 

 코드 추가 후 기능이 정상적으로 동작하는지 확인합니다.

 

그림 2-3

 

 

3. 책 소개, 책 목차

 책 소개, 책 목차는 단순히 ckeditor를 적용시켜주기만 하면 됩니다. ckeditor를 적용시키는 코드를 document ready 메서드 구현부에 추가해줍니다. ( 두 번째 <script> 태그 내부에 추가해도 상관은 없습니다. 단지 렌더링 될 때 적용되어야 할 코드들과 함께 두기 위해 document read 메서드 구현부에 작성하였습니다.) 

 

/* 위지윅 적용 */
 
	/* 책 소개 */
	ClassicEditor
		.create(document.querySelector('#bookIntro_textarea'))
		.catch(error=>{
			console.error(error);
		});
		
	/* 책 목차 */	
	ClassicEditor
	.create(document.querySelector('#bookContents_textarea'))
	.catch(error=>{
		console.error(error);
	});

 

 

 

4. 할인율

 

그림 4-1

 

 페이지에 들어가 보면 0으로 되어 있지만 실질적으로 서버에 전송되어야 할 할인율 데이터는 type이 hidden인 <input> 태그에 저장되어 있습니다. 해당 <input> 태그에는 할인율이 소수로 저장되어 있는데 이를 자연수로 변경하여 사용자에게 노출되는 <input> 태그 값으로 삽입할 것입니다.. 더불어 원가와 할인율을 통해 할인 가격이 얼마인지도 사용자가 볼 수 있도록 해줄 것입니다.

 

 앞서 말한 처리를 해줄 코드를 document ready 메서드 구현부에 작성합니다.

 

			/* 할인율 인터페이스 출력 */
			let bookPriceInput = $("input[name='bookPrice']");
			let discountInput = $("input[name='bookDiscount']");
			
			let bookPrice = bookPriceInput.val();
			let rawDiscountRate = discountInput.val();
			let discountRate = rawDiscountRate * 100;
			
			
			let discountPrice = bookPrice * (1-rawDiscountRate);
			$(".span_discount").html(discountPrice);
			$("#discount_interface").val(discountRate);

 

 페이지로 이동하여 추가한 코드가 정상 출력되는지 확인합니다.

 

그림 4-2

 

 

 이번에는 사용자가 할인율을 변경했을 때 입력된 할인율을 소수로 변경하여 서버로 전송될 할인율을 저장하는 <input> 태그의 값으로 삽입되도록 하여야 합니다. 그리고 할인 가격이 얼마인지 출력되는 <span> 태그의 값도 입력된 값에 따라 변경되도록 해주어야 합니다.  더불어서 상품 가격에 새로운 값을 입력하여도  할인가격 <span> 태그의 값이 변경되도록 합니다.

 이러한 기능을 하는 코드를 이미 '상품 등록 페이지'에 작성하였기 때문에 해당 코드를 그대로 복사하여 두 번째 <script> 태그에 붙여 넣습니다.

 

	/* 할인율 Input 설정 */
	
	$("#discount_interface").on("propertychange change keyup paste input", function(){
		
		let userInput = $("#discount_interface");
		let discountInput = $("input[name='bookDiscount']");
		
		let discountRate = userInput.val();					// 사용자가 입력한 할인값
		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
		
		if(!isNaN(discountRate)){
			$(".span_discount").html(discountPrice);		
			discountInput.val(sendDiscountRate);				
		}

		
	});	
	
	$("input[name='bookPrice']").on("change", function(){
		
		let userInput = $("#discount_interface");
		let discountInput = $("input[name='bookDiscount']");
		
		let discountRate = userInput.val();					// 사용자가 입력한 할인값
		let sendDiscountRate = discountRate / 100;			// 서버에 전송할 할인값
		let goodsPrice = $("input[name='bookPrice']").val();			// 원가
		let discountPrice = goodsPrice * (1 - sendDiscountRate);		// 할인가격
		
		if(!isNaN(discountRate)){
			$(".span_discount").html(discountPrice);	
		}
		
		
	});

 

 

 '상품 수정 페이지'에서 추가해준 코드의 기능이 정상적으로 동작하는지 확인합니다.

 

 

 

 

REFERENCE

 

 

DATE

  • 2020.04.27
728x90
반응형
저작자표시

'스프링 프레임워크 > 쇼핑몰 프로젝트' 카테고리의 다른 글

[Spring][쇼핑몰 프로젝트][22] 상품 정보 삭제 구현  (0) 2021.04.29
[Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 3  (5) 2021.04.28
[Spring][쇼핑몰 프로젝트][21] 상품정보 수정 구현 - 1  (0) 2021.04.26
[Spring][쇼핑몰 프로젝트][20] 상품조회 기능 구현 - 3  (9) 2021.04.22
[Spring][쇼핑몰 프로젝트][20] 상품조회 기능 구현 - 2  (3) 2021.04.21
donaricano-btn
'스프링 프레임워크/쇼핑몰 프로젝트' Related Articles more
Comments