쇼핑몰 프로젝트 - 주문관리 - 주문관리 페이지 (4) 주문 상태 변경 버튼

주문 내역 체크 박스 선택 후 각 주문 상태 변경 클릭 시 실제로 다음 주문 상태로 목록 넘어가게 기능 구현

ajax 사용.

대략적인 쿼리 작성

 

<!-- 주문 상태 변경 버튼 클릭 시 -->
<update id="changeStatus">
    UPDATE ORDER_STATUS
    SET
        STATUS_CODE = #{statusCdoe}
    WHERE ORDER_NUM IN (?, ?) <!-- 주문 내역에서 체크한 체크박스들의 orderNum -->
</update>

 

order_manage.html에 주문 상태 변경 버튼을 th:onclick 속성 사용하여 js 함수와 연결

버튼 클릭 시 함수 실행!

 

order_html.js

주문 상태 변경 버튼 클릭 시 실행될 함수 작성

ajax 코드 추가 및 controller 이동 경로 작성

//주문 상태 변경 버튼 클릭 시 실행
function changeStatus(){
	
	//ajax start
	$.ajax({
		url: '/admin/changeStatusAjax', //요청경로
		type: 'post',
		data: {}, //필요한 데이터
		async: true, //default 
		//contentType: 'application/json; charset=UTF-8', //json 방식
		contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			alert('ajax 통신 성공');
		},
		error: function() {
			alert('실패');
		}
	});
	//ajax end
}

AdminController 작성

//주문 상태 변경 버튼 클릭 시 실행
@ResponseBody
@PostMapping("/changeStatusAjax")
public void changeStatusAjax(){

}

이제 쿼리 빈 값을 채워줄 데이터를 controller에서 받아와야 함.

방법은 아래 두가지.

1. VO(orderNumList를 변수로 추가하여)

2.Map

 

2번 방법인 Map 사용하여 쿼리 빈 값 채우기.

우선 빈 값은 statusCode와 orderNumList이다.

map 생성 시 유의!

value에 들어갈 쿼리 빈 값의 자료형은 int와 list 2가지이기 때문에 object로 해야 함.

map에 쿼리 빈 값 데이터를 세팅할 때 아래와 같은 형태로 들어갈 것을 알아야 함.

//주문 상태 변경 버튼 클릭 시 실행
@ResponseBody
@PostMapping("/changeStatusAjax")
public void changeStatusAjax(){

    //쿼리 실행 시 채워줄 데이터를 갖는 map 데이터 세팅
    Map<String, Object> map = new HashMap<>();
    map.put("statusCode", 누른 버튼의 statusCode);
	map.put("orderNumList", 실제 체크박스 orderNumList);
}

 

다시 admin-mapper로 돌아와서 쿼리 정확하게 다시 작성.

map으로 데이터 채울 때 빈 값은 map의 key가 들어온다.

controller에서 key로 적은 "orderNumList"를 반복문 돌려서 선택된 체크 박스의 orderNum들을 뽑으면 됨!

<!-- 주문 상태 변경 버튼 클릭 시 -->
<update id="changeStatus">
    UPDATE ORDER_STATUS
    SET
        STATUS_CODE = #{statusCode} <!--map으로 데이터 채울 때 빈 값에 key명이 들어오면 됨. -->
    WHERE ORDER_NUM IN
    <foreach collection="orderNumList" item="orderNum" open="(" close=")" separator=","> 
        #{orderNum}
    </foreach>
</update>

AdminService 메소드 작성

//주문 상태 변경
void changeStatus(Map<String, Object> map);

AdminServiceImpl 메소드 구현

//주문 상태 변경
@Override
public void changeStatus(Map<String, Object> map) {
    sqlSession.update("adminMapper.changeStatus", map);

}

 

AdminController 메소드 실행

//주문 상태 변경 버튼 클릭 시 실행
@ResponseBody
@PostMapping("/changeStatusAjax")
public void changeStatusAjax(){

    //쿼리 실행 시 채워줄 데이터를 갖는 map 데이터
    Map<String, Object> map = new HashMap<>();
    map.put("statusCode", mapData.get("statusCode"));
    map.put("orderNumList", mapData.get("orderNumList"));

    //주문 상태 변경
    adminService.changeStatus(map);	
}

 

실제로 기능이 동작하기 위해 빈 값 채울 때 필요한 데이터 controller에  보내줘야 함.

 

1.statusCode

order_manage.html을 보면 반복문 돌면서 주문 상태 버튼을 생성하고 있음.

state를 이용하여(반복 순서로) 빈 값 채울 statusCode 대체 가능

버튼 클릭 시 실행되는 함수의 매개변수로 statusCode를 js로 넘겨줌
state.index + 2인 이유 : 반복은 0부터 돌고 statusCode는 1부터 시작하기 때문에 +1,

클릭한 버튼의 다음 주문 상태의 statusCode를 가져가야 하기 때문에 +1

개발자 모드 켜보면 매개변수 statusCode(숫자) 잘 넘어 가는 것 확인 가능.

2.orderNum

체크박스 클릭 시 value 값(orderNum)을 가져가야 controller에서 쿼리 빈 값 채울 수 있음.

각 주문 상태별 테이블의 체크박스는 주문 상태별 주문 목록 조회 쿼리가 실행되면서 반복문을 통해 생성되고 있는 상태.

체크 박스는 orderNum 값을 value로 가지고 있어야 하는데, 

주문상태별 주문 목록 조회 시 orderNum을 조회하지 않기 때문에 체크박스에 orderNum인 value값 못 넣는 상태

주문상태별 주문 목록 조회 쿼리 수정하여 orderNum도 조회하게 바꿔야 함.

조회한 orderNum 체크박스에 value값으로 세팅.

반복문으로 만들어지는 체크박스에 calss 부여.

주문 상태 변경 버튼 클릭 시 내가 선택한 체크박스 value 값을 js에서 다 선택하면 됨.

js 작성 전 유의사항

일반적인 체크 박스들의 value를 들고 오는 코드로 작성하면 안 됨.

주문상태별로 모든 체크박스의 class가 동일하기 때문에 그 value 값을 다 들고오기 때문.

내가 버튼을 누른 해당 주문 상태 테이블의 체크박스 value만 들고 와야 함.

html에서 버튼 클릭 시 실행되는 함수에 내가 클릭한 버튼 그 자체를 this 매개변수로 js에 넘김.

order_manage.js 작성

넘어오는 매개변수인 버튼과 statusCode 받기.

클릭한 버튼에서 가장 가까운 row를 찾아가서 row 안의 체크된 체크박스들 다 선택.

필요한 데이터는 체크된 체크박스들의 value 값인 orderNum임.

orderNum 여러개 담을 배열을 하나 생성하고 반복문 돌면서 체크된 체크박스들의 value값인 orderNum 뽑아서 배열에 추가

//주문 상태 변경 버튼 클릭 시 실행 btn : 클릭한 주문 상태 변경 버튼 자체(this)
function changeStatus(btn, statusCode){
	
	//체크된 체크박스의 value 값(클릭한 버튼 테이블(주문상태)의 체크된 체크박스들 )
			//클릭한 버튼에서 가장 가까운 클래스가 row인 것을 찾아감
	const checkedChks = btn.closest('.row').querySelectorAll('.chk:checked');
	
	const orderNumList = [];
	//반복문 돌면서 체크된 orderNum을 배열에 세팅.
	for(let i = 0; i < checkedChks.length; i++){
		orderNumList[i] = checkedChks[i].value; //value에 orderNum 세팅되어 있음. 
	}
	
	console.log(`statusCode = ${statusCode}`);
	console.log(`orderNumList = ${orderNumList}`);
	
	//ajax start
	$.ajax({
		url: '/admin/changeStatusAjax', //요청경로
		type: 'post',
		data: {}, //필요한 데이터
		async: true, //default 
		contentType: 'application/json; charset=UTF-8', //json 방식
		//contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			
		},
		error: function() {
			alert('실패');
		}
	});
	//ajax end
}

이제 세팅된 데이터를 controller로 넘겨주면 됨.

js에서 controller로 넘겨야 하는 데이터가 복잡할 경우 json방식 사용할 수 있음!

넘겨야 할 데이터를 paramData라는 객체를 생성하여  담아주고

json 문자열로 paramData를 controller로 던짐.

//주문 상태 변경 버튼 클릭 시 실행 btn > 버튼 자체 this
function changeStatus(btn, statusCode){
	
	//체크된 체크박스의 value 값(클릭한 버튼 테이블(주문상태)의 체크된 체크박스들 )
	const checkedChks = btn.closest('.row').querySelectorAll('.chk:checked');
	
	const orderNumList = [];
	for(let i = 0; i < checkedChks.length; i++){
		orderNumList[i] = checkedChks[i].value; 
	}
	
	console.log(`statusCode = ${statusCode}`);
	console.log(`orderNumList = ${orderNumList}`);
	
	paramData = {
		//key           value
		'statusCode' : statusCode
		, 'orderNumList' : orderNumList
	};
	
	console.log(`paramData = ${paramData}`);
	
	//ajax start
	$.ajax({
		url: '/admin/changeStatusAjax', //요청경로
		type: 'post',
		data: JSON.stringify(paramData), //json 방식으로 필요한 데이터 넘기기
		async: true, //default 
		contentType: 'application/json; charset=UTF-8', //json 방식
		//contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			alert('ajax 통신 성공');
		},
		error: function() {
			alert('실패');
		}
	});
	//ajax end
	
	
}

 

json 방식으로 넘어온 데이터를  controller에서 받을 때는 매개변수로 Map 형태로 받으면 됨.

데이터 받을 때 유의!

map 생성 전에 @RequestBody 어노테이션을 붙여주고 생성

@RequestBody를 붙이면 controller로 전송된 데이터가 자동으로 map으로 변환되어 생선한 map에 저장됨.

(map의 이름과 json 방식으로 넘긴 데이터 이름이 달라도 적용됨.)

js에서 넘긴 json 방식 데이터 controller로 넘어왔는지 실제 출력으로 확인 해볼 수 있음.

//주문 상태 변경 버튼 클릭 시 실행
@ResponseBody
@PostMapping("/changeStatusAjax")
public void changeStatusAjax(@RequestBody HashMap<String, Object> mapData){

    System.out.println(mapData);
    System.out.println("statusCode = " + mapData.get("statusCode"));
    System.out.println("orderNumList = " + mapData.get("orderNumList"));

    //쿼리 실행 시 채워줄 데이터를 갖는 map 데이터
    Map<String, Object> map = new HashMap<>();
    map.put("statusCode", mapData.get("statusCode"));
    map.put("orderNumList", mapData.get("orderNumList"));

    //주문 상태 변경
    adminService.changeStatus(map);

}

콘솔창을 보면 데이터도 잘 넘어오고 기능 동작까지 됨!

 

현재 새로고침 해야 실제로 눈에 보이는 주문 상태 변경 화면으로 update 됨.

ajax 실행 후 controller로 이동하여 코드 실행 다 하고 ajax success 구문으로 돌아올 때 페이지를 갱신 해줘야 함.

 

 

페이지 갱신하는 updatePageInfo 함수 작성

페이지 갱신할 때 

주문 상태 변경 버튼 클릭 시 해당 테이블의 주문 내역도 지워야 하고, 그 다음 테이블의 주문 내역도 지워야 함.

내가 클릭한 버튼에서 무언가를 해야 함.

내가 클릭한 버튼은 이미 주문 상태 변경 버튼 클릭 시 this라는 매개변수로 넘어오고 있는 상태.

페이지 갱신 함수에 매개변수로 btn 넣어주고 사용.

클릭한 버튼의 row를 찾아서 그 row의 바디 태그의 내용을 지워주면 됨.

//주문 상태 변경 후 테이블 다시 그리기
function updatePageInfo(btn){ 
	//기존 테이블 주문 내역 삭제
	const row_1 = btn.closest('.row');
	//클릭한 버튼의 행 안에 있는 tbody(주문 내역)을 지워줘야 하고 
	row_1.querySelector('tbody').replaceChildren();
	
	//그 다음 row 안의 tbody도 지워줘야함.
	const row_2 = row_1.nextElementSibling;
	row_2.querySelector('tbody').replaceChildren();
}

주문내역이 지워진 테이블들에  다시 update된 주문 내역 데이터를 조회해서 뿌려줘야 함.

이전에 만든 주문 상태별 주문 내역 조회하는 메소드 재사용

 

AdminController 작성.

주문 상태별 주문 내역 조회 메소드를 사용하려면 매개변수로 해당 주문 상태의 statusCode가 필요.

현재 주문 상태 변경 버튼을 누르면 update 쿼리 작동 할 때 다음으로 넘어가는 주문 상태 번호를 가져옴.

쿼리 작동 시 statusCode와 거기서 -1한 값이면 그려줘야 할 2개 테이블의 statusCode 값 얻을 수 있음.

statusCode는 자료형이 int고 statusCode에 대한 정보는 json방식으로 넘겨서 받은 mapData 안에 있음.

> value 값은 object 자료형이기 때문에 자료형 변환이 필요.

//주문 상태 변경 버튼 클릭 시 실행
@ResponseBody
@PostMapping("/changeStatusAjax")
public Map<String, List<OrderStatusVO>> changeStatusAjax(@RequestBody HashMap<String, Object> mapData){

    System.out.println(mapData);
    System.out.println("statusCode = " + mapData.get("statusCode"));
    System.out.println("orderNumList = " + mapData.get("orderNumList"));


    //쿼리 실행 시 채워줄 데이터를 갖는 map 데이터
    Map<String, Object> map = new HashMap<>();
    map.put("statusCode", mapData.get("statusCode"));
    map.put("orderNumList", mapData.get("orderNumList"));

    //주문 상태 변경
    adminService.changeStatus(map);

    //변경 후 화면에 보여줘야할 리스트 목록 2개
    //map에 담아서 리턴하기 위한 통
    Map<String, List<OrderStatusVO>> result = new HashMap<>(); 

    //statusCode는 자료형이 int고 statusCode에 대한 정보는 mapData 안에 있음.
    //value 값은 object 자료형이기 때문에 자료형 변환이 필요.
    int afterStatusCode = Integer.parseInt(mapData.get("statusCode").toString());
    int beforeStatusCode = afterStatusCode - 1;
    //주문 상태 변경 후 주문 내역 재조회한 것 map에 데이터 세팅
    result.put("firstOrderList", adminService.getOrderListByStatus(beforeStatusCode));
    result.put("secondOrderList", adminService.getOrderListByStatus(afterStatusCode));

    return result;
}

주문 상태에 따른 주문 내역 조회하는 메소드 사용하여  statusCode 세팅.

두개의 조회 데이터를 담을 map 생성, 조회된 데이터 map에 담아준 후 js로 return

 

페이지 갱신하는 updatePageInfo 함수를 success 구문에서 실행시켜주기.

ajax에서 result로 받은 주문 내역 리스트 map 데이터를 success 구문에서 페이지 갱신 함수 실행할 때 매개변수로 사용.

작성한 페이지 갱신 함수에도 매개변수로 추가!

지워진 테이블 (주문 내역)다시 그려주기.

총 2개의 테이블을 그려줘야 하기 때문에 함수 만들어서 2번 함수 실행시키면 됨.

//주문 상태 변경 후 테이블 다시 그리기
function updatePageInfo(btn, result){ //result에 주문 상태 변경 후 주문 내역 리스트 map형태로 들어있음.
	//기존 테이블 주문 내역 삭제
	const row_1 = btn.closest('.row');
	//클릭한 버튼의 행 안에 있는 tbody(주문 내역)을 지워줘야 하고 
	row_1.querySelector('tbody').replaceChildren();
	
	//그 다음 row 안의 tbody도 지워줘야함.
	const row_2 = row_1.nextElementSibling;
	row_2.querySelector('tbody').replaceChildren();
	
	//테이블 다시 그리기(result-map에는 2개의 리스트가 있음))
	drawTable(row_1.querySelector('tbody'), result['firstOrderList']);
	drawTable(row_2.querySelector('tbody'), result['secondOrderList']);
}

 

테이블 다시 그리는 drawTable 함수 작성

테이블을 그릴 때 지정하는 위치 부모 태그는 달라지기 때문에 테이블 그리는 함수에서 매개변수로 전달해서 p_tag로 받아줌.

테이블을 그리는데 필요한 result(주문 상태별 주문 내역 조회 리스트)도 전달

매개변수로 받아서 반복문 돌면서 테이블 그리기

js에서 th문법 해석 못하기 때문에 orderNum 부분은  value로 바꿔서 코드 작성해야 함.

해당 주문 상태별 테이블에 조회된 데이터 없을 때는 데이터 없다는 문구 if문으로 뿌려주기

//지워진 주문 내역 테이블 다시 그리기
function drawTable(p_tag, draw_data){
	let str = '';
	
	if(draw_data.length == 0){
		str += `<tr>`;
		str += `<td>조회된 데이터가 없습니다.</td>`;
		str += `</tr>`;
		
		//그림이 그려질 부모 태크
		p_tag.insertAdjacentHTML('afterbegin', str);
		
	}
	else{
		//html의 주문 내역 데이터 뽑는 반복문과 변수 이름 맞춰줌.(데이터 다시 그릴 때 쉽게 접근하기 위해서)
		draw_data.forEach(function(orderInfo, index){
			
			str += `<tr>`;
			str += `<td><input class="form-check-input chk" type="checkbox" value="${orderInfo.orderNum}"></td>`;
			str += `<td>${draw_data.length - index}</td>`;
			str += `<td>${orderInfo.buyCode}</td>`;
			str += `<td>${orderInfo.buyVO.memId}</td>`;
			str += `<td>${orderInfo.memberVO.memTell}</td>`;
													//js에서 화폐 단위 쓰는 코드 
			str += `<td>${orderInfo.buyVO.buyPrice.toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })}</td>`;
			str += `<td>${orderInfo.statusInfoVO.statusName}</td>`;
			str += `<td>${orderInfo.updateDate}</td>`;
			str += `</tr>`;
			
		});
		
		//그림이 그려질 부모 태크
		p_tag.insertAdjacentHTML('afterbegin', str);
	}
}