[JAVA/Spring] 국비 학원 최종프로젝트 #2 - 쇼핑몰 구현 - 어드민 관리자 페이지 (카테고리 부분,JSON 활용)

어드민 페이지 로그인을 위해선 admin 권한을 가진 계정으로만 로그인이 가능하다.

아래와 같이 로그인을 하게되면,

 

 

관리자 메인 페이지.

위와 같이 메인페이지로 넘어가게되며,

좌측에 여러 관리탭들이 나타나고,  클릭할 경우 각 탭마다 세부항목이 나타나도록 하였다.

상단에 카테고리 관리를 누르게되면,

 

카테고리 목록페이지

대분류 select 을 하게 되면, 해당되는 중분류의 목록이 option이 나타나게 되고 마찬가지로 중분류에 따라 해당되는 소분류값이 option에 나타나도록 하였다.

 

해당 부분은 db에 있는 카테고리 데이터에 따라 대중소 구분을 하기위하여, 처음으로 JSON을 통하여 구현해보았다.

 

<script>

				/*			카테고리			*/
				// 컨트롤러에서 데이터 받기
				var jsonData = ${listCate};

				var cate1Arr = new Array();
				var cate1Obj = new Object();

				// 1차 분류 셀렉트 박스에 삽입할 데이터 준비
				for (var i = 0; i < jsonData.length; i++) {

					if (jsonData[i].category_level == "1") {
						cate1Obj = new Object(); //초기화
						cate1Obj.category_code = jsonData[i].category_code;
						cate1Obj.category_name = jsonData[i].category_name;
						cate1Arr.push(cate1Obj);
					}
				}

				// 1차 분류 셀렉트 박스에 데이터 삽입
				var cate1Select = $("select.category1")

				for (var i = 0; i < cate1Arr.length; i++) {
					cate1Select
							.append("<option value='" + cate1Arr[i].category_code + "'>"
									+ cate1Arr[i].category_name + "</option>");
				}

				$(document)
						.on(
								"change",
								"select.category1",
								function() {

									var cate2Arr = new Array();
									var cate2Obj = new Object();

									// 2차 분류 셀렉트 박스에 삽입할 데이터 준비
									for (var i = 0; i < jsonData.length; i++) {

										if (jsonData[i].category_level == "2") {
											cate2Obj = new Object(); //초기화
											cate2Obj.category_code = jsonData[i].category_code;
											cate2Obj.category_name = jsonData[i].category_name;
											cate2Obj.category_parent = jsonData[i].category_parent;

											cate2Arr.push(cate2Obj);
										}
									}

									var cate2Select = $("select.category2");
									cate2Select.children().remove();
									$("option:selected", this)
											.each(
													function() {

														var selectVal = $(this)
																.val();
														cate2Select
																.append("<option value=''>전체</option>");

														for (var i = 0; i < cate2Arr.length; i++) {
															if (selectVal == cate2Arr[i].category_parent) {
																cate2Select
																		.append("<option value='" + cate2Arr[i].category_code + "'>"
																				+ cate2Arr[i].category_name
																				+ "</option>");
															}
														}

													});

								});

				$(document)
						.on(
								"change",
								"select.category2",
								function() {

									var cate3Arr = new Array();
									var cate3Obj = new Object();

									// 3차 분류 셀렉트 박스에 삽입할 데이터 준비
									for (var i = 0; i < jsonData.length; i++) {

										if (jsonData[i].category_level == "3") {
											cate3Obj = new Object(); //초기화
											cate3Obj.category_code = jsonData[i].category_code;
											cate3Obj.category_name = jsonData[i].category_name;
											cate3Obj.category_parent = jsonData[i].category_parent;

											cate3Arr.push(cate3Obj);
										}
									}

									var cate3Select = $("select.category3");

									cate3Select.children().remove();

									$("option:selected", this)
											.each(
													function() {

														var selectVal = $(this)
																.val();
														cate3Select
																.append("<option value=''>전체</option>");

														for (var i = 0; i < cate3Arr.length; i++) {
															if (selectVal == cate3Arr[i].category_parent) {
																cate3Select
																		.append("<option value='" + cate3Arr[i].category_code + "'>"
																				+ cate3Arr[i].category_name
																				+ "</option>");
															}
														}
													});

								});
			</script>

 

<카테고리 등록 페이지>

카테고리 분류 부분에 대분류 옵션을 체크하면, 아래 카테고리 코드부분에 새로운 대분류 코드가 생성된다.

위와 같이 대분류 옵션을 체크하게되면, 카테고리 코드부분에 4로 시작되는 새로운 코드가 생성되고,

중분류를 추가를 원하는 경우 반드시 대분류 카테고리를 눌러주어야 중분류 코드가 생성이된다.

소분류도 마찬가지.

이 방식도 JSON을 통하여 구현하였다.

</script>

<script type="text/javascript">
//라디오 버튼 요소
var radio1 = document.getElementById("category_level1");
var radio2 = document.getElementById("category_level2");
var radio3 = document.getElementById("category_level3");

// 라디오 버튼 이벤트 리스너 등록
radio1.addEventListener("change", handleRadioChange);
radio2.addEventListener("change", handleRadioChange);
radio3.addEventListener("change", handleRadioChange);

// 라디오 버튼 변경 시 실행되는 함수
function handleRadioChange() {
 	insertCode();
}

 function insertCode() {
	var input_code = document.getElementById('new_category_code')
	var input_parent1 = document.getElementById('category_parent_code1')
	var input_parent2 = document.getElementById('category_parent_code2')
	
	var parent1 = document.getElementById('category_parent1').value
	var parent2 = document.getElementById('category_parent2').value

	  if (radio1.checked) {
		if(cate1Arr == ""){
			input_code.value = '100000'
		}
		input_code.value = parseInt(cate1Arr[cate1Arr.length-1].category_code)+100000
		input_parent1.value = null	
		input_parent2.value = null
	}else if(radio2.checked){
		if(parent1 == ""){
			alert('대분류 카테고리를 먼저 선택해주세요.')
			radio1.checked = true
			handleRadioChange()
			return
		}
		
		if(cate2Arr == ""){
			input_code.value = parseInt(parent1)+1000
		}
			input_code.value = parseInt(parent1)+count2*1000+1000
			input_parent1.value = parent1	
			input_parent2.value = null
	}else if(radio3.checked){
		if(parent2 == ""){
			alert('중분류 카테고리를 먼저 선택해주세요.')
			radio2.checked = true
			handleRadioChange()
			return
		}	
		if(cate3Arr == ""){
			input_code.value = parseInt(parent2)+1
		}

		input_code.value = parseInt(parent2)+count3*1+1
		input_parent2.value = parent2
	}
		
}
 

	function inputCheck() {
		
		if (document.f.category_name.value == "") {
			alert("카테고리명을 입력하세요.")
			document.f.category_name.focus()

			return false
		}
		if (document.f.new_category_code.value == "") {
			alert("카테고리 코드를 입력하세요.")
			document.f.new_category_code.focus()

			return false
		}

		return true
	}

</script>