쇼핑몰 프로젝트(11) 회원 MY PAGE - 장바구니 목록 (3) 선택 구매

장바구니 선택 구매 기능

 

전체 구매 정보 insert 쿼리 작성

	<!-- 구매 정보 -->
	<insert id="buy">
	INSERT INTO SHOP_BUY (
		BUY_CODE
		, MEM_ID
		, BUY_PRICE
	) VALUES (
		#{buyCode}
		, #{memId}
		, #{buyPrice}    <!-- 구매하는 모든 상품의 총 가격-->
	)
	</insert>

 

 buyCode 서브쿼리 작성 하지 않고 다음에 들어갈 바이코드 셀렉트 쿼리 작성하여 이용.

<!-- 다음에 들어갈 buyCode 조회 -->
<select id="getNextBuyCode" resultMap="buy">
    SELECT 'BUY_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(BUY_CODE, 5))), 0) + 1, 3, '0') 
    FROM SHOP_BUY
</select>

BuyService 작성

//다음 buyCode 조회
String getNextBuyCode();

BuyServiceImpl 작성

//다음 buyCode 조회
@Override
public String getNextBuyCode() {
    return sqlSession.selectOne("buyMapper.getNextBuyCode");
}

 

구매 상세 정보 쿼리 작성

쿼리 작성 시 주의할 점.

하나의 전체 구매 정보는 구매 시 선택한 여러개의 상품 구매 상세 정보 리스트를 가지기 때문에

private List<BuyDetailVO> buyDetailList; //하나의 구매정보는 여러 구매 정보 list를 가짐

buyVO에 위의 변수 추가해줘야함!

<!-- 구매 상세 정보  -->
<!-- 한번 구매할 때 어떤 상품을 몇개 샀냐에 따라 insert 여러개 -->
<insert id="buyDetails">
    INSERT INTO BUY_DETAIL (
        BUY_DETAIL_CODE
        , ITEM_CODE
        , BUY_CNT 		<!-- 하나의 상품을 여러개 사는 경우 각 상품에 대한 수량  -->
        , DETAIL_BUY_PRICE  <!-- 하나의 상품 여러개 사는 경우 각 상품에 대한 구매금액 -->
        , BUY_CODE
    )         <!--  buyVO(빈 값 들고올 객체).getBuyDetailList(); -->
    <foreach collection="buyDetailList" item="buyDetail" separator="UNION ALL" index="i">     
                                             <!-- 여러개 상품 insert 되면 i만큼 더 + -->
        SELECT (SELECT 'BUY_DETAIL_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(BUY_DETAIL_CODE, 12))), 0) + 1 + #{i}, 3, '0') 
                FROM BUY_DETAIL)
            , #{buyDetail.itemCode}
            , #{buyDetail.buyCnt}
            , #{buyDetail.detailBuyPrice}
            , #{buyDetail.buyCode}
        FROM DUAL

    </foreach>
</insert>

 

 

쿼리의 빈 값을 채우기 위해 들고와야 하는 데이터는

구매하고자 하는 상품 수 x 3(itemCode, buyCnt, itemPrice)     /     +1 (totalPrice) 

>> 구매 상품 많으면 데이터 수 많아짐.

cartCode만 알면 itemCode 알 수 있고 cartCnt 알 수 있음, itemCode 알면 itemPrice 알 수 있음.

 

많은 수의 데이터 넘길 때 js 사용하여 가져오는 방법.

js로 가져오는 이유 : 선택구매 눌렀을 때 선택한 것 없이 선택구매 누르면 구매 실행 x 창 띄어서 구매하는 상품 선택하라는 알림창 뜨게 구현.

많은 데이터 가져가려면 form태그 사용이 편리. 그러나 수정버튼이 이미 form 태그로 감싸져있어서 form 태그 사용 x

(form 태그 안에 form 태그 사용 안 됨!)

 

js에서 ajax 사용하여  많은 수 데이터 가져오기

cart_list.html 의 선택구매 버튼 함수 연결

<div class="offset-5 col-1 d-grid">
    <input type="button" class="btn btn-primary" value="선택구매" onclick="buys();">
</div>

 

js에서 buys 함수 작성

 

1. 아무 상품도 선택하지 않고 선택구매 눌렀을 경우

if문으로 체크된 상품 없는 경우 alert창으로 상품 선택 메시지 띄워주기

function buys(){
	
	//체크된 체크박스의 개수
	const checked_checkboxes = document.querySelectorAll('.chk:checked');
	
	//상품 체크 하나도 안 된 경우
	if(checked_checkboxes.length == 0) {
		alert('구매할 상품을 선택하십시오.');
		return ;
	}
}

 

2. ajax 사용하여 데이터 넘기기

- 넘길 데이터는 상품 당 itemCode, buyCnt, detailBuyPrice

cart_list.html의 for문 돌면서 만들어지는 체크박스 input 태그에 data-속성 만들어서 위 3개의 데이터 js로 넘겨주기.

<td>
    <input type="checkbox" class="form-check-input chk" checked
        onclick="setCheckAllStatus();" th:value="${cart.cartCode}" 
        th:data-item-code="${cart.itemCode}" th:data-buy-cnt="${cart.cartCnt}" th:data-detail-buy-price="${cart.totalPrice}">
</td>

 

js에서 체크된 상품들 각각의 itemCode, buyCnt, detailBuyPrice 데이터를 가져와야 함.

상품들 각각의 위 3가지 데이터를 담을 detail_info_arr 배열 변수 생성

for문 돌면서 체크된 상품들의 itemCode, buyCnt, detailBuyPrice 빼와서 detail_info_arr 배열에 저장.

//넘길 데이터 (구매 상세 정보 insert 쿼리 빈값임 컬럼명과 데이터 이름 맞춰주기)
//반복되면서 만들어진 데이터를 저장할 배열 생성
const detail_info_arr = [];
//상품 체크된 개수만큼 아래 데이터 필요 (for문 사용)
for(let i = 0; i < checked_checkboxes.length ; i++) {
//html에서 data-속성명으로 보낸 데이터 가져올 때 주의!!	
    buy_detail_info = {
        'item_code' : checked_checkboxes[i].dataset.itemCode,
        'buy_cnt' : checked_checkboxes[i].dataset.buyCnt,
        'detail_buy_price' : checked_checkboxes[i].dataset.detailBuyPrice 

    };
    detail_info_arr[i] = buy_detail_info;
}
console.log(detail_info_arr);

html에서 넘긴 데이터들이 detail_info_arr에 저장된 것 console로 확인 가능.

 

- 체크된 모든 상품의 총 구매 금액 finalPrice 받아오기

cart_list.html의 총 구매 금액 태그 선택하여 텍스트 받아오기.

화폐단위까지 가져옴 > 숫자만 추출하는 정규식 사용하여 구매금액 final_price에 저장.

//총 구매금액 데이터 가져오기
let final_price = document.querySelector('#finalPriceDiv').textContent; //화폐단위까지 다 가지고 옴
//숫자만 추출하는 정규식
const regex = /[^0-9]/g;
            //0~9까지의 숫자는 추출하고 나머지는 빈값으로 대체
final_price = final_price.replace(regex, '');

data = {
    'final_price' : final_price,
    'detail_info_arr' : detail_info_arr //구매하는 모든 상품의 정보 배열
};

console.log(data);

구매총금액도 잘 받아옴.

 

ajax 경로 및 넘길 데이터 작성하여 controller 이동

ajax 작성시 json 방식 사용할 주의점.

contentType : 'application/json; charset=UTF-8' 코드 추가

넘길 데이터 작성 시 JSON.stringify(넘길데이터) 사용하여 json 문자열 형식으로 변환하여 controller로 보낼 것!

//ajax start
	$.ajax({
		url: '/buy/buysAjax', //요청경로
		type: 'post',
		async : true, //default 
		data: JSON.stringify(data), //필요한 데이터
		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

선택 구매 전체 함수 코드

//선택 구매
function buys(){
	
	//체크된 체크박스의 개수
	const checked_checkboxes = document.querySelectorAll('.chk:checked');
	
	//상품 체크 하나도 안 된 경우
	if(checked_checkboxes.length == 0) {
		alert('구매할 상품을 선택하십시오.');
		return ;
	}
	
	//체크된 체크박스의 dataset확인
	for(const e of checked_checkboxes){
		console.log(e.dataset);
		
	}
	
	//넘길 데이터 (구매 상세 정보 insert 쿼리 빈값임 컬럼명과 데이터 이름 맞춰주기)
	//반복되면서 만들어진 데이터를 저장할 배열 생성
	const detail_info_arr = [];
	//상품 체크된 개수만큼 아래 데이터 필요 (for문 사용)
	for(let i = 0; i < checked_checkboxes.length ; i++) {
	//html에서 data-속성명으로 보낸 데이터 가져올 때 주의!!	
		buy_detail_info = {
			'item_code' : checked_checkboxes[i].dataset.itemCode,
			'buy_cnt' : checked_checkboxes[i].dataset.buyCnt,
			'detail_buy_price' : checked_checkboxes[i].dataset.detailBuyPrice 
			
		};
		detail_info_arr[i] = buy_detail_info;
	}
	console.log(detail_info_arr);
	
	//총 구매금액 데이터 가져오기
	let final_price = document.querySelector('#finalPriceDiv').textContent; //화폐단위까지 다 가지고 옴
	//숫자만 추출하는 정규식
	const regex = /[^0-9]/g;
				//0~9까지의 숫자는 추출하고 나머지는 빈값으로 대체
	final_price = final_price.replace(regex, '');
	
	data = {
		'final_price' : final_price,
		'detail_info_arr' : detail_info_arr //구매하는 모든 상품의 정보 배열
	};
	console.log(data);
	
	//ajax start
	$.ajax({
		url: '/buy/buysAjax', //요청경로
		type: 'post',
		async : true, //default 
		data: JSON.stringify(data), //필요한 데이터
		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 

}

 

BuyController 작성

js에서 json 방식으로 넘어온 데이터 map으로 받아줌. (VO 생성하여 받는 방법도 가능)

json으로 넘어온 데이터 받을 때는 매개변수 맨 앞에 @RequestBody 추가

@Controller
@RequestMapping("/buy")
public class BuyController {
	
	@ResponseBody
	@PostMapping("/buysAjax")	//여러 자료형 데이터 넘어오면 > object로 받기
	public void byusAjax(@RequestBody HashMap<String, Object> mapData) {
		System.out.println(mapData);
	}

 

출력문으로 데이터 잘 넘어오는 것 확인 가능

데이터가 잘 넘어오면 넘어온 데이터로 선택 구매 insert 쿼리 빈 값 채워준 후 쿼리 작동돼야 함.

 

선택 구매 시 같이 작동되어야 할 기능

1. 전체 구매 정보 insert 쿼리

2. 그 구매 정보의 상세 구매 정보 insert 쿼리

 > 2개의 구매 insert 쿼리는 트랜잭션으로 하나로 묶어야 함.

3. 구매 후 장바구니에서 선택 구매한 상품들 delete 쿼리 같이 작동

 

BuyService 작성 - 선택 구매 insert

//장바구니 상품 선택 구매
void buyFromCart(BuyVO buyVO);

BuyServiceImpl 작성

2개의 구매 insert 쿼리 같이 실행.

//장바구니 선택 구매 (구매 insert 메소드 2개 트랜잭션 처리)
@Override      //@Transactional : 2개의 메소드 실행 돼야 commit
@Transactional(rollbackFor = Exception.class)
public void buyFromCart(BuyVO buyVO) {
    sqlSession.insert("buyMapper.buy", buyVO);
    sqlSession.insert("buyMapper.buyDetails", buyVO);

}

 

BuyController 작성

먼저, 전체 구매 정보 쿼리 빈값을 채워주기

선택 상품 구매 메소드에 buyVO 매개변수로 넣고 빈 값 채워줄 데이터 세팅.

1. buyCode 세팅

buyCode는 셀렉트 쿼리로 채워지게 만들어짐.

getNextBuyCode() 실행.

 

2.memId

매개변수에 HttpSession session 추가하여 session에서 로그인 정보 가져옴.

로그인 정보에서 memId 데이터 빼기.

 

3.buyPrice

buyPrice는 cart_list.html에서 선택 구매 눌렀을 때 final_price라는 이름으로 총구매금액 데이터 js로 가져옴.

js에서 받은 mapDate에서 final_price 데이터 빼기.

js에서 설정한 데이터 이름이 key가 됨.

key 활용하여 mapData.get("final_price") 사용하여 데이터 뺌.

mapData는 자료형이 object이기 때문에 바로 int로 못 받음 > 자료형 변환

mapData를 toString 사용하여 문자열로 바꾸고 그 전체를 Integer.parseInt 사용하여 int로 자료형 변환

 

뽑은 3개의 데이터 buyVO에 세팅.

현재까지 첫번째 구매 쿼리 빈 값 채워줌.

//장바구니 체크된 상품 데이터 들고오기(itemCode, detailBuyPrice, buyCnt)
	@ResponseBody
	@PostMapping("/buysAjax")						//여러 자료형 데이터 > object로 받기
	public void buysAjax(@RequestBody HashMap<String, Object> mapData, BuyVO buyVO, HttpSession session) {
		System.out.println(mapData);
		
		//SHOP_BUY 테이블 INSERT를 위한 쿼리 빈 값 세팅
		//buyCode
		String nextBuyCode = buyService.getNextBuyCode();
		//memId
		MemberVO loginInfo = (MemberVO)session.getAttribute("loginInfo");
		String memId = loginInfo.getMemId();
		//buyPrice
		int buyPrice = Integer.parseInt(mapData.get("final_price").toString());
		
		buyVO.setBuyCode(nextBuyCode);
		buyVO.setMemId(memId);
		buyVO.setBuyPrice(buyPrice);
	}

 

두번째 구매 쿼리인 구매 상세 정보 쿼리 빈 값 채워주기.

Controller에서 map 데이터 뽑아서 빈 값 채워줌 

1. map 데이터 활용을 위해 자바 객체로 변환해줘야 함.

예를 들어 구매한 상품 종류 3개 >  buyDetailVO를 3개 가진 배열이 만들어져야 함.

즉, 구매한 상품 종류 개수 만큼 buyDetailVO가 생김.

배열로 받은 데이터 리스트로 변환.

현재 buyCode 빼고 쿼리 빈 값 채울 다 데이터 들어온 상태.

 

**json 방식으로 들고온 데이터 받을 때 주의

json 방식으로 들고온 map 데이터는 js에서 설정한 데이터 이름과 VO의 변수 이름이 mapping 되어야 함.

키 값으로 들고온 이름은 스네이크형식으로 작성되어 있고 VO 변수명은 카멜형으로 작성되어 있기 때문에 매칭을 위해 @JsonProperty 사용하여 mapping 해주기.

@Getter
@Setter
@ToString
public class BuyDetailVO {
	
	private String buyDetailCode;
	
	@JsonProperty("item_code")
	private String itemCode;
	
	@JsonProperty("buy_cnt")
	private int buyCnt;
	
	@JsonProperty("detail_buy_price")
	private int detailBuyPrice;
	
	private String buyCode;

}

 

2. buyCode 세팅

선택 구매한 상품 모두 같은 buyCode가 들어가야 됨.

for문 사용하여 선택한 상품에 buyCode 데이터 세팅

 

상품상세구매정보들은 하나의 전체 구매 정보에 포함됨.

상세구매정보 모두 들고 있는 buyDetailList를 buyVO의 buyDetailList에 데이터 세팅.

buyVO는 모든 구매 정보에 필요한 데이터 다 가지게 됨.

구매 메소드 실행 하면 구매 기능 구현 됨.

//장바구니 체크된 상품 데이터 들고오기(itemCode, detailBuyPrice, buyCnt)
@ResponseBody
@PostMapping("/buysAjax")						//여러 자료형 데이터 > object로 받기
public void buysAjax(@RequestBody HashMap<String, Object> mapData, BuyVO buyVO, HttpSession session) {
    System.out.println(mapData);

    //SHOP_BUY 테이블 INSERT를 위한 쿼리 빈 값 세팅
    //buyCode
    String nextBuyCode = buyService.getNextBuyCode();
    //memId
    MemberVO loginInfo = (MemberVO)session.getAttribute("loginInfo");
    String memId = loginInfo.getMemId();
    //buyPrice
    int buyPrice = Integer.parseInt(mapData.get("final_price").toString());

    buyVO.setBuyCode(nextBuyCode);
    buyVO.setMemId(memId);
    buyVO.setBuyPrice(buyPrice);

    //BUY_DETAIL 테이블 INSERT를 위한 쿼리 빈 값 세팅
    //상세 구매 시 필요한 모든 데이터를 담을 리스트 객체
    //List<BuyDetailVO> buyDetailList = new ArrayList<>();

    //1. 맵에서 들고온 데이터 자바 객체로 변환
    ObjectMapper mapper = new ObjectMapper();
                        //읽어올 데이터, 데이터 빼서 담을 곳(선택한 상품 종류만큼 buyDetailVO가 여러개 생기기 때문에 배열로 받아야 함)
    BuyDetailVO[] buyDetailArr = mapper.convertValue(mapData.get("detail_info_arr"), BuyDetailVO[].class);
    //배열 > 리스트 변환
    List<BuyDetailVO> buyDetailList = Arrays.asList(buyDetailArr);

    //buyCode 데이터 세팅. (선택 구매한 상품 모두 같은 buyCode가 들어가야 됨) for문 돌면서 위의 미리 세팅된 buyCode값 세팅.
    for(BuyDetailVO e : buyDetailList) {
        e.setBuyCode(nextBuyCode);
    }

    //2. buyDetailList에 상세 구매 쿼리 빈 값 모두 있는 상태 그 데이터를 buyVO의 buyDetailList에 그대로 세팅
    //buyVO는 구매에 대한 모든 정보를 갖게 됨.
    buyVO.setBuyDetailList(buyDetailList);

    System.out.println("buyVO :" + buyVO);


    //상품 구매
    buyService.buyFromCart(buyVO);

}

 

마지막으로 장바구니에서 상품을 구매를 하면 구매한 상품이 장바구니에서 사라져야 함.

controller에서 구매 메소드 다 실행되면 js의 buy 함수의 success 코드로 돌아가게 됨.

이때, js로 돌아와서 이전에 만들어 둔 선택삭제함수 호출.

//선택 구매
function buys(){
	
	//체크된 체크박스의 개수
	const checked_checkboxes = document.querySelectorAll('.chk:checked');
	
	//상품 체크 하나도 안 된 경우
	if(checked_checkboxes.length == 0) {
		alert('구매할 상품을 선택하십시오.');
		return ;
	}
	
	//체크된 체크박스의 dataset확인
	for(const e of checked_checkboxes){
		console.log(e.dataset);
		
	}
	
	//넘길 데이터 (구매 상세 정보 insert 쿼리 빈값임 컬럼명과 데이터 이름 맞춰주기)
	//반복되면서 만들어진 데이터를 저장할 배열 생성
	const detail_info_arr = [];
	//상품 체크된 개수만큼 아래 데이터 필요 (for문 사용)
	for(let i = 0; i < checked_checkboxes.length ; i++) {
	//html에서 data-속성명으로 보낸 데이터 가져올 때 주의!!	
		buy_detail_info = {
			'item_code' : checked_checkboxes[i].dataset.itemCode,
			'buy_cnt' : checked_checkboxes[i].dataset.buyCnt,
			'detail_buy_price' : checked_checkboxes[i].dataset.detailBuyPrice 
			
		};
		detail_info_arr[i] = buy_detail_info;
	}
	console.log(detail_info_arr);
	
	//총 구매금액 데이터 가져오기
	let final_price = document.querySelector('#finalPriceDiv').textContent; //화폐단위까지 다 가지고 옴
	//숫자만 추출하는 정규식
	const regex = /[^0-9]/g;
				//0~9까지의 숫자는 추출하고 나머지는 빈값으로 대체
	final_price = final_price.replace(regex, '');
	
	data = {
		'final_price' : final_price,
		'detail_info_arr' : detail_info_arr //구매하는 모든 상품의 정보 배열
	};
	
	console.log(data);
	
	
	
	//ajax start
	$.ajax({
		url: '/buy/buysAjax', //요청경로
		type: 'post',
		async : true, //default 
		data: JSON.stringify(data), //필요한 데이터
		contentType : 'application/json; charset=UTF-8', //json 방식
		//contentType: "application/x-www-form-urlencoded; charset=UTF-8", //default 방식
		success: function(result) {
			
			//구매 후 선택한 상품 장바구니에서 삭제 기능 = 선택 삭제와 기능 동일
			//controller에서 상품 구매 후 돌아와서 선택삭제함수 호출
			deleteCheckCarts();
		},
		error: function() {
			alert('실패');
		}
	});
//ajax end 

}