쇼핑몰 프로젝트 (2)

카테고리 목록 중 카테고리 사용 여부를 bootstrap 사용하여 라디오 버튼으로 수정

bootstrap 탭에서 Forms의 Checks & radios에서 소스 복사

<th:block th:unless="${#lists.size(cateList) == 0}">
	<tr th:each="category, state : ${cateList}">
		<td>[[${state.count}]]</td>
		<td>[[${category.cateName}]]</td>
		<td>
			<div class="row">
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio" class="form-check-input" th:checked="${category.isUse == 'Y'}">사용중						
			</div>
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio" class="form-check-input" th:checked="${category.isUse == 'N'}">미사용												
				</div>
			</div>
		</td>
		<td>[[${category.orderNum}]]</td>
	</tr>
</th:block>

for문 안에 라디오 버튼이 있기 때문에 그냥 name 속성을 주면 다 같은 name을 가지게 돼서 하나로 묶임

for문 돌면서 name 바꿔줘야 함.

화면에 체크되어 보일 때 실제 사용/미사용 여부인 isUse값이 체크 되어 화면에 보여줘야 함.

타임리프 문법 th:checked 속성 사용하여 isUse 값 불러와서 기능 설정.

 

 

사용여부 라디오 체크 변경 시

실제 카테고리 사용 여부도 변경되게 기능 작성.

<th:block th:unless="${#lists.size(cateList) == 0}">
	<tr th:each="category, state : ${cateList}">
		<td>[[${state.count}]]</td>
		<td>[[${category.cateName}]]</td>
		<td>
			<div class="row">
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio"
						class="form-check-input" th:checked="${category.isUse == 'Y'}"
						th:onchange="changeIsUse([[${category.cateCode}]]);">사용중

				</div>
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio"
						class="form-check-input" th:checked="${category.isUse == 'N'}"
						th:onchange="changeIsUse([[${category.cateCode}]]);">미사용

				</div>
			</div>
		</td>
	</tr>
</th:block>

radio input 태그에 th:onchange 속성 이용해서 js에 ajax 사용하여 함수 작성.

html에서 js로 넘어올 때 cateCode와 isUse의 value 값 필요.

cateCode는 매개변수로 넣어줌

//라디오 버튼 체크 시 카테고리 사용 여부 변경
function changeIsUse(cateCode){
	
		//ajax start
		$.ajax({
			url: '/admin/changeIsUse', //요청경로
			type: 'post',
			data: {'cateCode' : cateCode}, //필요한 데이터
			success: function(result) {
			},
			error: function() {
				alert('실패');
			}
		});
	//ajax end
}

 

라디오 체크 변경시 isUse값 update > 쿼리작성

isUse값은 쿼리 작성하면서 처리함.

	<!-- 카테고리 사용 여부 변경 -->
	<!-- DECODE : else와 같음! IS_USE가 Y면 N으로 N이면 Y로-->
	<update id="updateIsUse">
		UPDATE ITEM_CATEGORY
		SET
			IS_USE = DECODE(IS_USE, 'Y', 'N', 'N', 'Y')
		WHERE CATE_CODE = #{cateCode}
	</update>

 AdminService 메소드 생성

	//카테고리 변경
	@Override
	public int changeIsUse(String cateCode) {
		return sqlSession.update("adminMapper.updateIsUse", cateCode);
	}

 AdminServiceImpl 메소드 구현

 

	//카테고리 변경
	@Override
	public int changeIsUse(String cateCode) {
		return sqlSession.update("adminMapper.updateIsUse", cateCode);
	}

 

AdminController작성

메소드 실행 시 update가 잘 되었으면 1을 return 함. 그 값 js로 return 

	//카테고리 변경
	@ResponseBody
	@PostMapping("/changeIsUse")
	public int changeIsUse(String cateCode) {
		return adminService.changeIsUse(cateCode); //변경 잘 되면 return으로 1줌. js로 보내기
	}

js로 돌아와서 if문으로 카테고리 변경 잘 됐는지 확인 여부 창 띄워주기.

//라디오 버튼 체크 시 카테고리 사용 여부 변경
function changeIsUse(cateCode){
	
		//ajax start
		$.ajax({
			url: '/admin/changeIsUse', //요청경로
			type: 'post',
			data: {'cateCode' : cateCode}, //필요한 데이터
			success: function(result) {
				if(result == 1) {
					alert('카테고리 사용 여부가 변경되었습니다.');
				}
				else {
					alert('일시적 오류가 발생했습니다.');
				}
			},
			error: function() {
				alert('실패');
			}
		});
	//ajax end
}

 

현재상태 

카테고리 등록 후 다시 조회된 데이터로 테이블 그릴 때 라디오 버튼이 아니라 isUse value값으로 그림 

라디오 버튼으로 그려지게 코드 수정 > javascript 언어로 인식할 수 있게 코드 바꿔야 함.

코드 바꿀 때 주의사항 자바스크립트는 매개변수 onchange="changeIsUse(${result[i].cateCode});를 문자로 인식 못 함.

개발자모드로 확인하면 있는 그대로 cateCode 가져감.

데이터를 문자로 인식할 수 있게 매개변수를 홀따옴표로 감싸야 된다.

//카테고리 등록 후 실행되는 목록 조회 기능
function getCateListAjax(){
		//ajax start
		$.ajax({
			url: '/admin/getCateListAjax', //요청경로
			type: 'post',
			async : false, //동기 방식으로 실행
			data: {}, //필요한 데이터
			success: function(result) {
				//카테고리 목록 테이블의 tbody 태그를 선택
				const tbodyTag = document.querySelector('#cateListTable tbody')
				
				//해당 태그 안의 모든 내용 삭제
				tbodyTag.replaceChildren();
				
				//새롭게 조회된 카테고리 목록 데이터로 테이블 채워줌.
				let str = '';
				for(let i = 0 ; i < result.length ; i++){
					str += `<tr>`;
					str += `<td>${i + 1}</td>`;
					str += `<td>${result[i].cateName}</td>`;
					str += '<td>';
					str += '<div class="row">';
					str += `<div class="form-check col-6">`;
					if(result[i].isUse == 'Y'){
						str += `<input name="isUse_${i+1}" type="radio" class="form-check-input"
											checked onchange="changeIsUse('${result[i].cateCode}');">사용중`;	
					}else{
						str += `<input  name="isUse_${i+1}" type="radio" class="form-check-input"
											onchange="changeIsUse('${result[i].cateCode}');">사용중`;
					}
					str += `</div>`;
					str += ` <div class="form-check col-6">`;
					if(result[i].isUse == 'N'){
						str += `<input name="isUse_${i+1}" type="radio" class="form-check-input" 
											 checked onchange="changeIsUse('${result[i].cateCode}');">미사용`;
						
					}else{
						str += `<input name="isUse_${i+1}" type="radio" class="form-check-input" 
											 onchange="changeIsUse('${result[i].cateCode}');">미사용`;
					}
					str += `</div>`;
					str += `</div>`;
					str += `</td>`;
					str += `<td>${result[i].orderNum}</td>`;
					str += `<td><input type="button" value="삭제" class="btn btn-danger" onclick="deleteCate('${result[i].cateCode}');"></td>`
					
					
					str += '</tr>';
				}
				tbodyTag.insertAdjacentHTML('afterbegin', str);
			},
			error: function() {
				alert('실패');
			}
		});
	//ajax end
}

 

 

 

카테고리 삭제 기능

카테고리 목록 조회 테이블에 행 추가하여 삭제 버튼 만듦.

삭제 버튼 누르면 데이터 삭제 되게함.

ajax 사용 x 일반 페이지 이동 사용하여 기능 작성.

 

cate_manage.html에 input button 타입으로 삭제 버튼 생성

삭제 버튼을 누르면 해당 카테고리가 삭제 되어야 하기 때문에 cateCode 가지고 가야함.

매개변수로 js에 넘겨주기

<th:block th:unless="${#lists.size(cateList) == 0}">
	<tr th:each="category, state : ${cateList}">
		<td>[[${state.count}]]</td>
		<td>[[${category.cateName}]]</td>
		<td>
			<div class="row">
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio" class="form-check-input" th:checked="${category.isUse == 'Y'}">사용중						
			</div>
				<div class="form-check col-6">
					<input th:name="${'isUse_' + state.count}" type="radio" class="form-check-input" th:checked="${category.isUse == 'N'}">미사용												
				</div>
			</div>
		</td>
		<td>[[${category.orderNum}]]</td>
        <td><input type="button" value="삭제" class="btn btn-danger" th:onclick="deleteCate([[${category.cateCode}]]);"> </td>
	</tr>
</th:block>

html에서 넘어온 데이터 매개변수 받아서 js에서카테고리 삭제 함수 작성.

//카테고리 삭제
function deleteCate(cateCode){
	
	var result = confirm('카테고리를 삭제하시겠습니까?'); //팝업창에 확인 취소 버튼 > 확인 : retrun true, 취소 : retrun false  
		
		if(result){
			location.href = `/admin/deleteCate?cateCode=${cateCode}`;
		}

 삭제 쿼리 작성

	<!-- 카테고리 삭제 -->
	<delete id="deleteCate">
		DELETE ITEM_CATEGORY
		WHERE CATE_CODE = #{cateCode}
	</delete>

AdminService 메소드 생성

	//카테고리 삭제
	void deleteCate(String cateCode);

AdminServiceImpl 메소드 구현

	//카테고리 삭제
	@Override
	public void deleteCate(String cateCode) {
		sqlSession.delete("adminMapper.deleteCate", cateCode);
	}

AdminController 작성.

메소드 실행

삭제 후 화면에 다시 카테고리 목록 조회해야 함.

이전에 만들어둔 카테고리 관리 페이지로 이동하여 목록 조회하기.

	//카테고리 삭제
	@GetMapping("/deleteCate")
	public String deleteCate(String cateCode) {
		adminService.deleteCate(cateCode);
		
		return "redirect:/admin/cateManage";
	}