쇼핑몰 프로젝트

**참고 사항

오류 보는 법

CREATE TABLE SHOP_MEMBER (
    MEM_ID VARCHAR2(50) PRIMARY KEY
    , MEM_NAME VARCHAR2(50)
);

INSERT INTO SHOP_MEMBER VALUES ('java1', '김자바');

에서 'java1'이라는 아이디로 또 INSERT 했을 때 오류창을 보면 아래처럼 뜨는데 

제약 조건명을 설정해서 어디에 오류 떴는지 알 수 있게 하는 방법

테이블 생성 시

CREATE TABLE SHOP_MEMBER (
    MEM_ID VARCHAR2(50) CONSTRAINT MEMBER_PK PRIMARY KEY
    , MEM_NAME VARCHAR2(50)
);

CONSTRAINT 키워드 + 제약조건명(개발자 지정)  넣으면 아래처럼 어디서 오류 발생했는지 알아보기 쉬움!

**참고 사항

PK 자동생성

다음에 들어갈 CATE_CODE 값을 조회

 

 

 

 

 

 

테이블 : 

회원 테이블, 상품 카테고리 테이블, 상품 테이블, 상품 이미지 테이블
장바구니 테이블, 구매 테이블

 

이클립스 와서 필요한 lib에 있는 jar 파일 다 옮겨오고 src/main/java 다 복사해온 후 삭제하면서 정리

wepapp에 index.jsp 만들어서 페이지 이동 시키기

wepapp 폴더 3개 생성 view, css, js(자바스크립트)

view 폴더 안에 template, member(회원과 관련된 jsp 폴더),

admin(관리자만 접근 가능한 jsp 폴더), item(상품과 관련 jsp 폴더)

template 폴더에 template.jsp, menu.jsp

item 폴더에 item_list.jsp

우선 template.jsp 작업

위에는 메뉴 뜨고 아래는 내용부

<div>
	<div class="container">
		<jsp:include page="menu.jsp"></jsp:include>
	</div>
	<div>
		<jsp:include page="../item/item_list.jsp"></jsp:include>
	</div>
</div>

css 작업도 분리 jsp별로(?

css안에 template 폴더 밑에 template.css 만들어서 template.jsp에서 template.css 파일 로딩.

jsp의 스타일 태그 지우고 

<link rel="stylesheet" type="text/css" href="css/common.css?v=8">  추가

보여질 화면 위 그림과 같이 구성

menu_list.jsp css 작업 이것도 template와 동일하게 css폴더에 menu.css로 모아줌.

 

 

회원가입 기능

view member 폴더에 join.jsp 만들기

template로 가서 join.jsp로 갈 수 있게 코드 추가

<jsp:include page="../member/join.jsp"></jsp:include>

위 내용 중 내용부 page는 매번 바뀜. 변수로 줘야 함 이제는 폴더 위치까지 바뀌기 때문에

<jsp:include page="../${contentPage }"></jsp:include>

위와 같이 주고 controller에서는 아래와 같이 폴더명까지 적어줘야 함.

//회원가입 페이지로 이동
if (command.equals("/")) {

	contentPage = "member/join.jsp";
			
}

 

join.jsp에 우편번호 검색하는 기능 추가 (주소록 API)

daum에서 제공하는 소스 코드 활용하여 기능 구현

join.jsp에 아래 코드 붙여넣기(body태그 닫히는 자리 밑)

 <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

js 기능 따로 뺌

js폴더 밑에 member/join.js 만들기

그 밑에 jsp와 js 공유되게 아래 태그 추가 

<script type="text/javascript" src="js/member/join.js"></script>

js에 함수 만들고 jsp의 검색 input에 onclick 속성으로 함수 실행.

//주소록 api
function searchAddr(){
	
	new daum.Postcode({
        oncomplete: function(data) {
			//도로명 주소
			var roadAddr = data.roadAddress;
			document.querySelector('#addr').value = roadAddr;
		
        }
    }).open();
}

 

주소 선택하여 나오는 input 태그 수정 안되게 readonly 속성 추가

주소 불러와지는 input 태그를 클릭하는 경우에도 주소 검색창 뜨게 설정 

<input onclick="searchAddr();" type="text" class="myInput" name="addr" id="addr" required readonly style="width: 78.4%; vertical-align: middle;">
<input onclick="searchAddr();" type="button" class="btn" value="검 색" style="width: 20%; vertical-align: middle;">

 

 

주의!!!

회원가입 시 입력한 데이터 받아올 때

memTell, memEmail은 배열로 받아와야 함. 

String memTell[] = request.getParameterValues("memTell");

String memEmail[] = request.getParameterValues("memEmail");

데이터 세팅할 때도 자료형이 달라서 일반적으로 받아올 수 없음

MemberDTO 클래스로 가서 아래 setter 추가 작성 (자료형을 String[ ]로 setter 하나 더 만듦)

	public void setMemTell(String[] memTell) {
		this.memTell = memTell[0] + "-" + memTell[1] + "-" + memTell[2];
	}
    
    	public void setMemEmail(String[] memEmail) {
		this.memEmail = memEmail[0] + "@" + memEmail[1];
	}

 

회원가입 성공 후 로그인 페이지 이동

로그인 기능 구현 (로그인 성공시 alert()으로 '반갑습니다 memName님' 띄어주기)

로그인 성공 > 로그인한 회원의 id,name,관리자 여부 정보를 세션에 저장함.

로그인 실패 > 아이디 비밀번호 다시 확인 alert 다시 로그인 페이지 이동

로그인 성공하면 최종페이지 상품 목록 페이지로 이동.

로그인시 관리자가 로그인 했을 때만 메뉴에 관리자 메뉴가 보이게 코드 구현

로그인 했을 때는 상단에 login join 글자 대신 memId님 반갑습니다.와 로그아웃 버튼.

로그아웃 클릭시 로그아웃 기능 구현, 상품목록페이지로.

 

 

상품등록 기능

관리자 기능이기 때문에 adminController 만들기 상품등록 if문 만들어야 함.

페이지 이동할 때 폴더까지 지정해서 바꿔주는 거 잊지 말기!!

상품 등록시 ITEM_CODE가 자동으로 순서 지정되며 들어가야 됨.

주의사항!! (실무에서 select box for문으로 들어오는 것 많이 씀)

CATE_CODE는 셀렉트 박스로 하되, 데이터베이스에서 상품 카테고리 테이블의 CATE_NAME을 목록을 조회해서 가져와야 하며 CATE_CODE 값도 value 값으로 받아야 와야 됨!!

상품 테이블에는 외래키로 CATE_CODE 컬럼이 있기 때문에 NAME이 아니라 CODE 값을 넘겨야 된다.

			<select class="myInput" name="cateCode">
				<c:forEach items="${list}" var="cate">
					<option value="${cate.cateCode}">${cate.cateName}</option>
				</c:forEach>
			</select>

itemMapper에서 카테고리 조회 쿼리 작성.

cateDTO 클래스 생성 getter setter 생성하여 데이터베이스에서 데이터 받아올 수 있게 함.

조회 > resultMap 먼저 작성 후 쿼리 작성

itemService, itemServiceImpl 생성 메소드 작성 및 구현

목록 조회한 리스트를 jsp에 전달.

List<CateDTO> list = itemService.selectCategory();
			request.setAttribute("list", list);

jsp에 데이터 뿌려주기 (위의 select box대로)

 

등록 버튼 누르면 상품 등록을 위해

itemController에 if문으로 상품 등록시 넘어오는 입력 데이터 다 받아 오기

상품 INSERT 쿼리 작성하기 > 관리자 기능이기 때문에 adminMapper 생성 후 작성

itemCode는 방법1.서브쿼리로 받아오기

	<!--상품 등록 쿼리 -->
	<insert id="regItem">
		INSERT INTO SHOP_ITEM (
			ITEM_CODE
			, CATE_CODE
			, ITEM_NAME
			, ITEM_PRICE
			, ITEM_INTRO
		) VALUES (
			(SELECT 'ITEM_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(ITEM_CODE, 6))), 0) + 1, 3, '0') FROM SHOP_ITEM)
			, #{cateCode}
			, #{itemName}
			, #{itemPrice}
			, #{itemIntro}
		)
	
	</insert>

방법2. 일반적인 #{itemCode}로 쿼리 작성하여 받아오기.

	<!--상품 등록 쿼리 -->
	<insert id="regItem">
		INSERT INTO SHOP_ITEM (
			ITEM_CODE
			, CATE_CODE
			, ITEM_NAME
			, ITEM_PRICE
			, ITEM_INTRO
		) VALUES (
			, #{itemCode}
			, #{cateCode}
			, #{itemName}
			, #{itemPrice}
			, #{itemIntro}
		)
	
	</insert>

itemController에서 상품 등록 누르면 넘어오는 데이터 받아온 후

다음에 들어갈 ITEM_CODE를 먼저 조회하는 쿼리문을 실행.

조회 쿼리문 작성 (ITEM_001로 나오게 > 문자열 하나 조회하는 것)

	<!-- int, String으로 데이터를 받아올 때는 resultType 사용 -->
    <select id="selectNextItemCode" resultType="String">
		SELECT 'ITEM_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(ITEM_CODE, 6))), 0) + 1, 3, '0')
		FROM SHOP_ITEM
		
	</select>

쿼리 실행시 데이터가 하나 나오는 경우 resultType 사용 (문자열 데이터 or 숫자 데이터)

조회 데이터가 DTO객체(여러개) 나오는 경우 resultMap 사용

AdminService와 AdminServiceImple 생성 메소드 생성 및 구현

adminController에서 메소드 실행 위해 객체 생성 후 메소드 사용

//다음에 들어갈 ITEM_CODE를 조회
String nextItmeCode = adminService.selectNextItemCode();

데이터 저장할 통 만들어서 데이터 세팅조회한 nextItemCode 값 itemCode에 세팅한다.

 

 

★★상품 등록시 이미지 넣기

메인 이미지 : 썸네일

서브 이미지 : 상세(?이미지

상품이 등록되는 과정에서 알아야 할 사항

SHOP_ITEM 테이블에는 상품이 INSERT한 데이터 1개 저장

ITEM_IMG 테이블에는 첨부한 파일 수만큼 데이터 저장

webapp/images 폴더에 사용자가 첨부한 파일이 저장됨.

	<div>
		<div>메인 이미지</div>
		<div><input type="file"></div>
	</div>
	<div>
		<div>서브 이미지</div>
		<div><input type="file"></div>
	</div>

파일을 선택하여 첨부한다는 것 > 우리 프로그램 안으로 사용자가 사진을 저장할 수 있다는 것

우선 cos.jar 파일 lib 폴더에 넣기

webapp 밑에 images 폴더 생성

사용자가 파일을 첨부 하면 images 폴더에 저장됨.

첨부파일처럼 글자가 숫자가 아닌 데이터를 가려가려면 form 태그에 

enctype="multipart/form-data"속성 추가 해야 하고 똑같이 input 태그에 name 설정

<form action="regItem.ad" method="post" enctype="multipart/form-data">

adminController로 와서 상품등록 if문에 데이터 받기 전에 파일 첨부 작업함.

파일 저장될 위치 변수로 선언 위치 찾아서 초기화.

위치 보는 법 : 프로젝트 오른쪽 마우스 properties의 location 버튼 누르면 프로젝트 위치 폴더 뜸.

거기서 images 저장될 폴더 경로 찾아감. 경로 복사해서 파일 위치 변수에 넣어줌.

이미지 용량 제한도 변수로 선언하여 초기화

//파일 첨부
//파일이 저장될 위치
String uploadPath = "D:\\dev\\workspace_HTML_CSS\\Shop\\src\\main\\webapp\\images";
//업로드 용량 제한
int uploadSize = 10 * 1024 * 1024; //10메가
			
//파일 첨부 실행
//cos.jar 파일이 있어야 아래 클래스 MultipartRequest 쓸 수 있음. 생성자 호출.
MultipartRequest multi = new MultipartRequest(
									request
									, uploadPath
									, uploadSize
									, "UTF-8"
									, new DefaultFileRenamePolicy() //파일명 겹치면 뒤에 _숫자 붙여줌
								);

상품 등록할 때 어떤 상품에 대한 이미지인지의 매칭이 필요하다
> 상품 테이블에 컬럼 추가해서 이미지 컬럼을 만든 경우

해당 상품에 여러 이미지를 넣어야 할 경우 데이터 넣고 빼는 것이 복잡함.

이미지 테이블을 따로 만들어서 관리하는 것이 편하다.

상품코드	상품명	가격
ITEM_001	상의	1000

이미지코드	이미지명	상품코드
IMG_001	1.JPG	ITEM_001
IMG_002	2.JPG	ITEM_001
IMG_003	3.JPG	ITEM_001

이미지 테이블 생성 후 ImgDTO 생성 getter, setter 생성

admincontroller로 돌아와서

첨부파일 데이터가 같이 넘어온 경우에는 request로 데이터로 받는 게 아니라 multi 객체로 데이터 받아야 함.

if(command.equals("/regItem.ad")) {
			//파일 첨부
			//파일이 저장될 위치
			String uploadPath = "D:\\dev\\workspace_HTML_CSS\\Shop\\src\\main\\webapp\\images";
			//업로드 용량 제한
			int uploadSize = 10 * 1024 * 1024; //10메가
			
			//파일 첨부 실행
			//cos.jar 파일이 있어야 아래 클래스 MultipartRequest 쓸 수 있음. 객체 생성 및 생성자 호출.
			MultipartRequest multi = new MultipartRequest(
												request
												, uploadPath
												, uploadSize
												, "UTF-8"
												, new DefaultFileRenamePolicy() //파일명 겹치면 뒤에 _숫자 붙여줌
											);
			
			
			//첨부파일 데이터가 같이 넘어온 경우에는
			//request로 데이터로 받는 게 아니라 multi 객체로 데이터 받아야 함.
			String itemName = multi.getParameter("itemName");
			String cateCode = multi.getParameter("cateCode");
			int itemPrice = Integer.parseInt(multi.getParameter("itemPrice"));
			String itemIntro = multi.getParameter("itemIntro");

상품 정보 등록 후 상품 이미지 정보도 등록해야 함.

상품 이미지 정보 등록 쿼리 작성

 

상품 이미지 등록할 때 관리자 이미지 수 원하는만큼 등록 가능해야 함.(foreach문 사용)

> INSERT문 다중 INSERT문 사용해야 한다.

아래의 예와 같이(이미지 2개 업로드 경우)

INSERT INTO ITEM_IMG (IMG_CODE, ORIGIN_FILE_NAME, ATTACHED_FILE_NAME, ITEM_CODE, IS_MAIN) 
SELECT 'IMG_001', 'ABC.JPG', 'ABC-1.JPG', 'ITEM_001', 'Y' FROM DUAL
UNION ALL
SELECT 'IMG_002', 'CCC.JPG', 'CC-1.JPG', 'ITEM_001', 'N' FROM DUAL

다중 insert문 실행시 n개의 행 삽입되는 것을 확인 가능.

상품 이미지 등록 쿼리 아래와 같이 작성해야 맞음.

 

 

 

 

item_list 페이지 작업

한 줄에 총 5개의 상품이 나와야 하고

상품이미지(이미지의 첨부된 파일명),  상품명, 상품 가격, 상품코드(PK) 조회되어야 함.

> 조인 써야 됨. 

조인 쓰게 되면 상품 하나당 첨부된 이미지 파일의 수만큼 데이터가 나온다.

list페이지에는 메인 이미지만 나와야 하기 때문에 조건으로 IS_MAIN이 Y 걸어야 됨.

이미지는 이미지 테이블에 첨부된 파일명이 있음

그 첨부 파일명이 보여줄 이미지의 src="이미지이름.확장자 "에 들어가면 됨.

 

- css

item_list.jsp 상품 등록시 메인 이미지 div 나란히 5개 보여짐. 

float 속성 사용하여 가로로 배열하고

배경색 줘서 영역 확인하고 영역 맞춰지면 삭제!

.itemListDiv{
	
	padding: 16px;
	overflow: auto; /* flaot 사용으로 부모 태그 벗어나는 것 방지 */
}

.itemDiv{
	
	width: 20%;
	float: left;
	margin-bottom: 16px;
}

.itemDiv > div{
	text-align: center;
}

 

상품 조회 쿼리 작성

<select id="selectItemList" resultMap="item">
		SELECT ITEM.ITEM_CODE
			, ITEM_NAME
			, ITEM_PRICE
			, ATTACHED_FILE_NAME
		FROM SHOP_ITEM ITEM, ITEM_IMG IMG
		WHERE ITEM.ITEM_CODE = IMG.ITEM_CODE
		AND IS_MAIN = 'Y'
		ORDER BY ITEM.ITEM_CODE DESC
	
	</select>

상품 목록을 조회하는 쿼리를 실행하면 item이라는 resultMap에서 itemDTO로 데이터를 가지고 오는데

상품 목록 조회 쿼리를 조인으로 작성했기 때문에 itemDTO에는

ATTACHED_FILE_NAME << 컬럼은 item이라는 resultMap에 정의되어 있지 않아서 데이터 가져올 수 없음.

> resultMap에 result문 추가하고 itemDTO에 해당 컬럼 받아올 수 있게 변수 작성 후 getter/setter 생성.

 

 

상품 이미지 누르면 해당 상품 상세 페이지 이동 기능

상세 페이지 아래와 같이 구현.

 

상세 페이지 조회 쿼리.

조인 써야 됨.

	<select id="selectItemDetail" resultMap="item">
		SELECT ITEM.ITEM_CODE
			, ITEM_NAME
			, ITEM_PRICE
			, ITEM_INTRO
			, ATTACHED_FILE_NAME
			, IS_MAIN
		FROM SHOP_ITEM ITEM, ITEM_IMG IMG
		WHERE ITEM.ITEM_CODE = IMG.ITEM_CODE 
		AND ITEM.ITEM_CODE = #{itemCode}
	</select>

img 테이블 조인 쿼리 작성하여 데이터 받아올 때 중요 사항

itemDTO에 imgDTO를 여러개 가지고 있다는 것을 코드로 넣어줘야 함. (하나의 상품에 이미지 첨부 여러개 하기 때문)

//1:n 느낌 imgDTO리스트에는 imgList(한 상품에 등록된 첨부파일의 수 = list 수)가 여러개 들어감.
private List<ImgDTO> imgList;

resultMap 작성시

<collection>속성으로 하나의 클래스는 여러개의 클래스를 가진다는 것을 정의 해줘야 함.

	<!-- 상품 이미지 관련 -->
	<resultMap type="dto.ImgDTO" id="img">
		<id column="IMG_CODE" property="imgCode"/>
		<result column="ORIGIN_FILE_NAME" property="originFileName"/>
		<result column="ATTACHED_FILE_NAME" property="attachedFileName"/>
		<result column="ITEM_CODE" property="itemCode"/>
		<result column="IS_MAIN" property="isMain"/>
		<!-- ItemDTO는 ImgDTO를 여러개 가지고 있다. -->
		<collection property="imgList" resultMap="img"></collection>
	
	</resultMap>

상세페이지의 수량(input태그)이 변경되었을 때 총 가격이 실시간으로 바뀌게 설정.

방법1. js에서 함수로 기능 만들기. (function 사용)

input 태그에 onchane(number 속성 화살표로 값을 바꿀 때마다 실행) 속성 추가 후 js에서 기능 만들어 줌.

<input type="number" class="myInput" value="1" min="1" name="cartAmount" onchange="changePrice();">

총 가격 부분만 선택해서 값을 바꿀 수 있게 span 태그로 감싸서 id 부여

<div>총 가격 : <span id="priceSpan">${item.itemPrice}</span>원 </div>

js에서 id로 span 태그 선택

 

총 가격을 자동으로 바꾸려면 단가와 수량 데이터가 필요

단가는 매개변수로 던져줌.

<input type="number" class="myInput" value="1" min="1" name="cartAmount" onchange="changePrice(${item.itemPrice});">

수량은 input 태그에 value값을 가져오면 됨.

input 태그에 id 부여

<input id="cartAmount" type="number" class="myInput" value="1" min="1" name="cartAmount" onchange="changePrice(${item.itemPrice});">

js에서 id로 수량 값 불러오면 됨.

//수량 변경 시 실행되는 함수
function changePrice(itemPrice){
					//단가 데이터는 매개변수로 받기
	const priceSpan = document.querySelector('#priceSpan');
	
	//수량 데이터는 value 값 불러오기.
	const amount = document.querySelector('#cartAmount').value;
	
	//innerText : 선택한 태그 안의 내용을 가져옴
	priceSpan.innerText = itemPrice * amount; //바꾸고 싶은 값(단가*수량)을 넣으면 됨. 
}

input 태그에 onkeyup 속성 추가하면 키보드로 수량 변경 했을 때도 가격 실시간 바뀜. 

onkeyup="changePrice(${item.itemPrice});

<input id="cartAmount" type="number" class="myInput" value="1" min="1" name="cartAmount" 
onchange="changePrice(${item.itemPrice});" onkeyup="changePrice(${item.itemPrice});">

 

수량 변경 다른 방법으로도 가능.

방법2.

이벤트 쓸 때 ()안의 어떤 이벤트 내용 넣는 곳에

함수를 바로 넣음.

//이미지를 클릭할 때마다 실행되는 이벤트(연습)
const imgTag = document.querySelector('#testImg');
//imgTag.addEventListener('click', aaa); 

                     //('무엇을 했을 때 이벤트 발생', 어떤 이벤트)
imgTag.addEventListener('click', function(){ //함수를 바로 괄호 안에서 만듦. 함수 이름 정의x(이름으로 호출 안하기 때문에 필요 없음.)
	alert(1);
});

 

 

 

장바구니 기능

장바구니 테이블 생성

장바구니 클릭 시 장바구니에 상품 담기

(로그인 하지 않았다면 alert으로 로그인 후 사용하세요 뜨게)

장바구니에 상품을 담으면 계속 쇼핑을 할 지 장바구니 목록 화면으로 갈 지 물어봐야 함(confirm-확인(장바구니),취소)

로그인하면 상단에 로그아웃 전에 장바구니 화면으로 이동하게

CartController (*ca)

CartService, CartServiceImpl

cart-mapper.xml,

webapp/view/cart/cart_list.jsp

 

 

 

script 내용 따로 빼서 관리.

webapp/js/item/item_detail.js (폴더 및 파일명 viwe 경로와 동일하게 맞춰서)자바스크립트 파일과 해당 jsp 파일 연결 로딩해주기.위치는 body 태그 닫히기 전 (src 속성 추가 경로 넣어주기)

<!-- javascript 파일 로딩 -->
<script type="text/javascript" src="js/item/item_detail.js"></script>

장바구니 누르면 미로그인 시 로그인하라는 창 뛰우기 위해서는 session의 loginInfo(로그인 여부 확인 가능)가 필요함.

js에서 접근 못 함. > 버튼 클릭할 때 jsp에서 매개변수로 던져서 받아야 됨.

loginInfo는 자료형이 MemberDTO임. js에서 클래스 인식 못 함 > 그래서 loginInfo의 memId를 던져줌

(현재까지는 js에서 문자와 숫자만 인식 가능하다고 생각하기)

주의사항!

memId 넘길 때 개발자 모드로 확인해 보면 memId 그대로 나옴 > 문자인지 인식 못 함.

자바스크립트는 ' '(홀따옴표)안에 감싸져야 문자로 인식하기 때문에 sessionScope.loginInfo.memId 전체를 홀따옴표 안에 감싸서 넘겨야 한다

<input type="button" class="btn" value="장바구니" onclick="addCart('${sessionScope.loginInfo.memId}');">

js 작업 - 장바구니 버튼 클릭 시 실행

//장바구니 버튼 클릭시 실행
function addCart(memId){

	//memId가 빈문자가 아님 = 로그인 O
	if(memId != ''){
		location.href = 'insertCart.ca'; //추후에 삭제될 것.
	}
	else{
		//confirm에서 확인을 누르면 true임
		const result = confirm('로그인 후 이용 가능합니다. \n로그인 페이지로 이동하시겠습니까?');
		
		if(result){
			location.href = 'loginForm.me';
		}
	}
}

CartController로 이동해서 장바구니 상품 담는 if문 작성

cart_mapper로 가서 쿼리문 작성.

받아올 데이터 확인

상품 코드 - 그 상세 페이지의 상품을 장바구니에 담아야 하기 때문에 필요함

멤버아이디 - 받아오긴 하지만 jsp에서 session에서 받아올 것. 

cartAmount - 수량 필요

totalprice - 상품 코드(단가 알 수 있음)와 cartAmount 있으면 totalprice 계산 가능. 굳이 가져올 필요 없다.

단가는 서브 쿼리로 가져올 수 있음

(SELECT ITEM_PRICE
	FROM SHOP_ITEM
	WHERE ITEM_CODE = #{itemCode}) * #{cartAmount}

장바구니를 눌렀을 때 데이터를 두개(ITEM_CODE, CART_MOUNT) 가져가야 됨.

form으로 가져가면 데이터는 가져가지만  js addcart 실행 안 함 , a 태그는 가져가는 데이터가 다 보임

> 해결 방법 !

js에서 submit 하기

일단 가져가야 하는 데이터만 form 태그로 감싸기 itemcode는 input 히든으로 가져가고, itemAmount는 일반적으로 가져가기.

form 태그에 id 속성 추가 > js에서 form태그를 선택할 수 있다.

js로 와서 form태그를 선택하고 실행.

function addCart(memId){
	//memId가 빈문자가 아님 = 로그인 O
	if(memId != ''){
		//form태그 선택                       '#form 태그의 아이디'
		const formTag = document.querySelector('#insertCartForm');
		//submit 실행 (데이터 가지고 이동)
		formTag.submit();
	}
	else{
		//confirm에서 확인을 누르면 true임
		const result = confirm('로그인 후 이용 가능합니다. \n로그인 페이지로 이동하시겠습니까?');
		
		if(result){
			location.href = 'loginForm.me';
		}
	}
}

CartController가서 넘어오는 데이터 받아주기.service, serviceImpl 메소드 작성 구현 작업

CartController가서 객체 생성 

로그인 정보(memId) 받아옴 (세션으로) 받아올 때 자료형 맞추기, 형변환 주의

받은 데이터 통 만들어서 세팅

insert 메소드 실행.

 

 

장바구니 목록 구현 기능

아래 그림과 같이 구현 (목록 SELECT해서 다 불러와야 함. 조인을 사용하면 조인 수가 많아짐

> VIEW(가상테이블) 생성하여 조회하면 편하다.

가상 테이블에 조회 되는 컬럼들의 데이터 다 받아올 수 있게 CartViewDTO 작성.

 

장바구니 조회 쿼리 작성.

장바구니 조회 시

주의사항!

장바구니에 상품을 INSERT 할 때

해당 상품이 로그인한 아이디의 장바구니 안에 있으면 추가한 수량만큼 원래 담겨있던 상품에 수량 UPDATE

없으면 그대로 INSERT (조건으로 ITEM_CODE와 MEM_ID 필요) 

쿼리 작성 아래처럼.

<insert id="insertCart">

	MERGE INTO SHOP_CART
	USING DUAL
	ON (ITEM_CODE = #{itemCode} AND MEM_ID = #{memId})
	WHEN MATCHED THEN 
		UPDATE
		SET
		CART_AMOUNT = CART_AMOUNT + #{cartAmount}
		, TOTAL_PRICE = (SELECT ITEM_PRICE
						FROM SHOP_ITEM
						WHERE ITEM_CODE = #{itemCode}) * (CART_AMOUNT + #{cartAmount})
		WHERE ITEM_CODE = #{itemCode}
		AND MEM_ID = #{memId}
	WHEN NOT MATCHED THEN
		INSERT (
		CART_CODE
		, ITEM_CODE
		, MEM_ID
		, CART_AMOUNT
		, TOTAL_PRICE
		) VALUES (
		(SELECT 'CART_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(CART_CODE, 6))), 0) + 1, 3,
		'0')
		FROM SHOP_CART)
		, #{itemCode}
		, #{memId}
		, #{cartAmount}
		, (SELECT ITEM_PRICE
		FROM SHOP_ITEM
		WHERE ITEM_CODE = #{itemCode}) * #{cartAmount}
		)

	</insert>

 

 

장바구니 상품 삭제 기능

장바구니의 상품 삭제 버튼 누르면 정말 삭제할 지 확인 창 뜨게 confirm으로

자바스크립트 기능 따로 뺌

cart/cart_list.js 만들기

cart_list.jsp의 body 태그 위에 아래 코드(파일 위치 작성할 때 주의)로 js-jsp 공유되게 이어줌.

<script type="text/javascript" src="js/cart/cart_list.js"></script>

삭제 버튼 클릭시 확인 창 기능

//삭제 버튼 클릭 시 실행
function goDelete(cartCode){
	const result = confirm('해당 상품을 장바구니에서 삭제하시겠습니까?');
	
	if(result){
		//삭제하러 가기
		location.href = 'deleteCart.ca?cartCode=' + cartCode; //방법1
		
		//location.href = `deleteCart.ca?cartCode=${cartCode}`; //방법2 ``: 백틱에 감싸야 됨
						//jsp에서 받아오는 것이 아니라 변수 쓰고 싶을 때 ${}쓰면 됨.
	}
}

input 태그에 onclick 속성 추가 후 cartCode 받아오기 

cartList의 cartItem에는 cartCode 조회 안 함> 데이터 못 불러옴

쿼리 수정하여 cartCode도 조회하게 바꿔야 됨!

자바스크립트에서 cartCode 문자로 인식할 수 있게 ' '에 감싸야 한다.

<input type="button" class="btn" value="삭제" onclick="goDelete('${cartItem.cartCode}');">

 

 

장바구니 수정 기능

쿼리 작성

수정 버튼 누르면 데이터 cartCode, cartAmount 가져가면서 이동

> js 사용하여 location.href 이용, form이용

 

방법1. js로 기능 구현

cartCode는 매개변수로 받아옴

cartAmount는 this를 이용하여 데이터 받아옴.

 

this : 내가 클릭,실행한 태그 그 자체 (수정 버튼)

this를 기준으로(내가 클릭한 태그-수정 버튼) 수량 태그를 찾아감.

this를 selectedTag로 지정하여

selectedTag.previousElementSibling

this 이전의 태그 즉, 수량 태그 value값 가져오기.

const cartAmount = selectedTag.previousElementSibling.value;
location.href = `updateCartAmount.ca?cartCode=${cartCode}&cartAmount=${cartAmount}`;

 

방법2.form 태그 사용

 

cartAmount , submit input 태그를 form으로 감싸주고 name 지정하여 데이터 넘김.

cartCode는 input 태그 hidden으로 넘겨준다.

<td> 
									<form action="updateCartAmount.ca" method="post">
										<input type="hidden" name="cartCode" value="${cartItem.cartCode}">
										<input name="cartAmount" class="myInput" style="width: 30%; vertical-align: middle;  margin-right: 10px; padding: 10px;" type="number" min="1" value="${cartItem.cartAmount }">
										<input style="vertical-align: middle;" type="submit" class="btn" value="수정">
									</form>
								</td>

controller 가서 if문 작성

 

 

장바구니의 체크 박스 컨트롤 기능

js로 기능 작성

제목줄의 체크 박스를 선택 > 상품 목록 체크 박스 전체 선택/ 전체 선택 해제 

체크박스 이벤트 추가

//1. 체크박스 전체 선택, 전체 해제 이벤트
//1.1 제목줄에 있는 체크박스를 선택
const checkAll = document.querySelector('#checkAll');

//1.2 체크박스에 클릭 시 실행되는 이벤트 추가
						//(언제 이벤트 발생? , 무슨 이벤트)
checkAll.addEventListener('click', function(){
	//제목줄 체크박스의 체크 여부 
	const isChecked = checkAll.checked; //체크 박스의 checked 속성 불러옴
	
	//체크
	if(isChecked){
		//장바구니 목록에 있는 모든 체크박스를 선택
		const checkboxes = document.querySelectorAll('.chk');
		//checkboxes.checked; 체크 됐을 때 - true로 나옴
		
		//checkboxes.checked = true; 체크박스가 여러개이기 때문에 데이터 값 바로 못 바꿈 
		//for문으로 각각 바꿔야 됨
		//가져온 체크박스의 개수만큼 반복하면서 체크 여부 변경
		for (const checkbox of checkboxes) {
			checkbox.checked = true;
		}
	}
	//체크 해제
	else{
		//장바구니 목록에 있는 모든 체크박스를 선택
		const checkboxes = document.querySelectorAll('.chk');
		//checkboxes.checked;
		
		//checkboxes.checked = true; 체크박스가 여러개이기 때문에 데이터 값 바로 못 바꿈 
		//for문으로 각각 바꿔야 됨
		//가져온 체크박스의 개수만큼 반복하면서 체크 여부 변경
		for (const checkbox of checkboxes) {
			checkbox.checked = false;
		}
	}
	
});

목록 체크박스 선택 여부에 따라 제목줄 체크 박스 체크 여부 변경

//2.목록의 체크 박스가 하나라도 체크 안 되어있으면 제목즐 체크 해제 목록 체크 박스 다 체크하면 제목줄 박스 체크
//2.1 내용부에 있는 체크박스를 선택
const checkboxes = document.querySelectorAll('.chk');

//2.2 모든 체크박스 각각의 이벤트 추가
for(const checkbox of checkboxes){
	checkbox.addEventListener('click', function(){
		//전체(목록) 체크박스의 개수를 파악
		const totalCnt = checkboxes.length
		
		//체크가 된 체크박스의 개수
		const checkCnt = document.querySelectorAll('.chk:checked').length //클래스가 chk인 태그의 속성이 checked인 것의 개수 가져옴
		if(totalCnt == checkCnt){
			document.querySelector('#checkAll').checked = true;
		}else{
			document.querySelector('#checkAll').checked = false;
		}	
	});
}

 

 

상품 구매 기능

1.바로 구매 

2.장바구니에서 구매

일단은 각 구매시 한 종류의 상품만 구매되게 기능 구현

 

 

 

장바구니에서 체크 박스 선택 구매, 선택 삭제 기능

- 선택 삭제 기능

쿼리 작성 2가지 방법 

예) CART_001, CART_003, CART_005 상품 지운다고 가정.

1. OR 사용 (실무에서 잘 안 씀)

	<delete id="deleteCheckCarts">
		DELETE SHOP_CART
		WHERE CART_CODE = 'CART_001'
		OR CART_CODE = 'CART_003'
		OR CART_CODE = 'CART_005'
	</delete>

2. IN 사용

	<delete id="deleteCheckCarts">
		DELETE SHOP_CART
		WHERE CART_CODE IN ('CART_001', 'CART_003', 'CART_005')
	</delete>

삭제를 위해 체크박스 선택한 여러 CART_CODE들의 데이터를 받아야 함.

CART_CODE들을 LIST에 담아서 LIST의 크기만큼 반복하면서 데이터 받아야 함. > for문 사용

<delete id="deleteCheckCarts">
		
		DELETE SHOP_CART
		WHERE CART_CODE IN
		<foreach collection="cartCodeList" item="cartCode" separator="," open="(" close=")">
			#{cartCode}
		</foreach>
	
    </delete>

for문을 반복하면 아래처럼 나옴

'CART_001' 'CART_003' 'CART_005' 

일반적으로 반복문만 돌면 코드 문법에 안 맞음

IN 다음 소괄호 필요 cartCode 사이에 쉼표 필요함

separator="," : 반복될 때마다 붙여줌(마지막 반복문엔 X)

open="(" : 반복문 처음 시작할 때

close=")" : 반복문 최종 끝날 때

 

<input type="button" class="btn" value="선택삭제" onclick="deleteCheckCarts();">

선택 삭제 버튼 누르면 삭제 기능 활성화 되게 js의 함수 이용.

//선택 삭제 버튼 클릭 시 실행
function deleteCheckCarts(){
	const result = confirm('선택한 상품을 장바구니에서 삭제하시겠습니까?');
	
	if(result){
		//체크한 상품의 CART_CODE 값 가져오기.
		//1. 체크된 체크박스 다 선택하기
		const checkedChks = document.querySelectorAll('.chk:checked');
		
		//jsp에 value로 cartCode 넘긴 것을
		//for문 사용하여 각각 cartCode value값 받아옴
		let cartCode = '';
		for(const chk of checkedChks) {
			cartCode = cartCode + chk + ',';
			//아래 코드 실행 결과 : CART_001, CART_003, CART_005, 
			//마지막에 ,만 잘라내면 된다.
		}
		//문자열 잘라내기(0,n (처음부터 n전까지))
		cartCode = cartCode.substring(0, cartCode.length - 1)
		
		location.href = `deleteCheckCarts.ca?cartCode=${cartCode}`;
	}
}

CartController 가서 삭제 실행 if문 작성

		//선택 삭제 클릭 시
		if(command.equals("/deleteCheckCarts.ca")) {
			String cartCodes = request.getParameter("cartCode");
			//문자열을 , 기준으로 자름 > 리턴 타입 : 문자열 배열
			String[] cartCodeArr = cartCodes.split(",");
			
			//배열 > 리스트 변경(쿼리문에서 list로 반복문 돌리기 때문에)
			List<String> cartCodeList = Arrays.asList(cartCodeArr);					
		}

CartService, CartServiceImpl 작업 후

if문 나머지 작성.

		//선택 삭제 클릭 시
		if(command.equals("/deleteCheckCarts.ca")) {
			String cartCodes = request.getParameter("cartCode");
			//문자열을 , 기준으로 자름 > 리턴 타입 : 문자열 배열
			String[] cartCodeArr = cartCodes.split(",");
			
			//배열 > 리스트 변경(쿼리문에서 list로 반복문 돌리기 때문에)
			List<String> cartCodeList = Arrays.asList(cartCodeArr);
			
			CartDTO cartDTO = new CartDTO();
			cartDTO.setCartCodeList(cartCodeList);
			
			cartService.deleteCheckCarts(cartDTO);
			
			page = "cartList.ca";
			isRedirect = true;		
		}

 

 

- 선택 구매 기능

구매 정보 테이블, 구매 상세 테이블 생성

buy 관련된 클래스, 인터페이스, 맵퍼 등등 생성

 

쿼리 작성insert 쿼리 작성 전 다음에 들어갈 BUY_CODE 받아오는 select 쿼리 작성(insert 쿼리에 서브쿼리로 작성해도 무방)

<!-- 다음에 들어갈 BUY_CODE 받아오기 -->
	<select id="selectNextBuyCode" resultType="String">
		(SELECT 'BUY_'||LPAD(NVL(MAX(TO_NUMBER(SUBSTR(BUY_CODE, 5))), 0) + 1, 3, '0') 
		FROM SHOP_BUY)
	
	</select>

장바구니 상품 선택 구매 INSERT 쿼리 작성

	<!-- 장바구니 상품 선택 구매 -->
	<insert id="insertBuy">
		INSERT INTO SHOP_BUY (
			BUY_CODE
			, MEM_ID
			, BUY_PRICE
		) VALUES (
			#{buyCode}
			, #{memId}
			, #{buyPrice}
		)
	</insert>

-

<input type="button" class="btn" value="선택구매" onclick="insertBuy();">

선택 구매 버튼 누르면 구매 기능 활성화 되게 js의 함수 이용.

선택 삭제와 같이 체크된 박스들의 value값 가지고 와야 함코드 중복 됨. 체크 박스들 value값 가져오는 기능 따로 빼서 함수로 만들기.

//체크된 cartCode 들고 오는 함수
function getCartCodes(){
	//체크한 상품의 CART_CODE 값 가져오기.
	//1. 체크된 체크박스 다 선택하기
	const checkedChks = document.querySelectorAll('.chk:checked');
	
	//jsp에 value로 cartCode 넘긴 것을
	//for문 사용하여 각각 cartCode value값 받아옴
	let cartCode = '';
	for(const chk of checkedChks) {
		cartCode = cartCode + chk.value + ',';
		//아래 코드 실행 결과 : CART_001, CART_003, CART_005, 
		//마지막에 ,만 잘라내면 된다.
	}
	//문자열 잘라내기(0,n (처음부터 n전까지)) >> CART_OO1, CART_003 ~
	cartCode = cartCode.substring(0, cartCode.length - 1)
	
	return cartCode;
}

위 함수(메소드) 이용하여 선택 구매 기능 함수 작성.

//선택 구매 버튼 클릭 시 실행
function insertBuy(){
	const cartCode = getCartCodes();
	
	location.href = `insertBuy.bu?cartCode=${cartCode}`;
	
}

 

상품 상세 테이블 insert 

 

선택 구매시 체크 박스를 클릭하면 CART_CODE를 가져오는데

그 CART_CODE를 가지고 장바구니의 상품이 조회되고

그 조회된 데이터를 상품 구매 상세 테이블에 넣어주기 위해 조회 cart_mapper에 select 쿼리 추가 후 메소드 생성 및 구현

<!-- CART_VIEW 뷰 사용 -->
	<select id="selectCartForBuy">
		SELECT ITEM_CODE
			, CART_AMOUNT
			, TOTAL_PRICE
		FROM CART_VIEW
		WHERE CART_CODE = #{cartCode}
		AND IS_MAIN = 'Y'
	</select>

BuyController 와서 CartService 객체 생성 후 메소드 사용

체크된 상품들 List에 있기 때문에 for문으로 리스트 데이터 빼면서 메소드 사용해야 함.

 

상세 테이블에는 구매 코드 들어가야 함.

이전에 만들어둔 구매 코드 조회 쿼리 실행.

 

상세 테이블에 구매자 ID도 필요.

session으로 받아오기

 

선택된 상품들의 총 가격도 필요

for문 돌면서 선택된 장바구니 상품 빼오기 때문에 장바구니의 각 상품에서 getter로 totalPrice를 가져올 수 있음

totoalPrice 누적으로 더해서 변수에 담기.

 

가져온 데이터 buyDetailDTO에 세팅

 

buyDetailCode는 데이터 안 가져왔기 때문에 쿼리문에서 BUY_001_01 형태로 자동 입력 되게 작성.

 

service, serviceImpl 생성 구현

mapper에서 for문에서 buyDetailList 돌릴 때 buyDetialList getter를 가져오기 때문에

buyDetailDTO에 해당 getter가 있어야 한다.

변수 만들고 getter/setter 생성

 

 

-구매한 상품 장바구니에서 삭제 기능

선택한 상품 삭제 메소드 사용하여 기능 구현 가능.

구매한 상품들의 cartCode도 데이터 이미 가지고 있음.

두 가지 사용하여 선택한 상품 지워주면 된다.

CartDTO cartDTO = new CartDTO();
cartDTO.setCartCodeList(cartCodeList);
			
cartService.deleteCheckCarts(cartDTO);

 

구매 정보 insert 할 때 상세 구매 정보도 insert 기능, 구매된 상품 delete 기능 한번에 묶어주는 게 좋다.

셋 중 하나만 실패해도 rollback 되도록(트랜잭션)

try-catch문 활용

 

BuyService 수정

//구매 정보 등록
	void insertBuy(BuyDTO buyDTO, BuyDetailDTO buyDetailDTO, CartDTO cartDTO);

BuyServiceImple 수정

 

@Override
	public void insertBuy(BuyDTO buyDTO, BuyDetailDTO buyDetailDTO, CartDTO cartDTO) {
		try {
			sqlSession.insert("buyMapper.insertBuy", buyDTO);
			sqlSession.insert("buyMapper.insertBuyDetails", buyDetailDTO);
			sqlSession.delete("cartMapper.deleteCheckCarts", cartDTO);
			sqlSession.commit();
			
		}catch (Exception e) {
			sqlSession.rollback();
			e.printStackTrace();
		}
	}

BuyController 수정

(이전에 작성한 insertBuyDetail,  구매한 상품 delete 메소드 실행문 삭제 후 insertBuy 실행 메소드에 합쳐준다) 

//구매 상품 정보 등록
	BuyDTO buyDTO = new BuyDTO();
	buyDTO.setBuyCode(nextBuyCode);
	buyDTO.setMemId(memId);
	buyDTO.setBuyPrice(buyPrice);
			
//구매 상품 상세 정보 등록
	BuyDetailDTO buyDetailDTO = new BuyDetailDTO();
	buyDetailDTO.setBuyDetailList(buyDetailList);
			
//구매한 상품 장바구니에서 삭제
	CartDTO cartDTO = new CartDTO();
	cartDTO.setCartCodeList(cartCodeList);
	
    //메소드 실행
	buyService.insertBuy(buyDTO, buyDetailDTO, cartDTO);

 

 

 

 

 

 

장바구니 상품 선택 구매 상세 쿼리는 한번에 여러개 INSERT 되게 작성.