본문 바로가기

JSP 웹 프로그래밍/쇼핑몰 페이지 만들기

[웹 쇼핑몰] 장바구니 페이지 만들기

 

 


상품 클래스에 멤버 변수 추가하기

 

ProductVO

 


 

 

추가된 멤버 변수의 Setter/Getter() 메소드 작성하기

ProductVO

 

상품 상세 정보 페이지 수정하기

 

product.jsp

 

장바구니에 등록하는 페이지 작성하기:

addCart.jsp

<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!-- 장바구니에 상품을 넣음
addToCart(): 핸들러 함수 
요청 URI : /addCart.jsp
요청파라미터 : request{productId=P1234}
요청 방식 : post
-->
<%
	//form product.jsp
	//to post방식으로 addCart.jsp?productId=P1234
	String productId = request.getParameter("productId"); // P1234
	out.print("<p>" + productId + "</p>");

	//trim() : 공백제거
	//addCart.jsp or addCart.jsp?productId=
	if(productId == null || productId.trim().equals("")) {
		response.sendRedirect("products.jsp");
		//여기 이후 실행 안함
		return;
	}
	 
	//기본키인 P1234 코드의 상품을 찾아보자
	//싱글톤 패턴으로 객체를 1회 생성
	ProductRepository dao = ProductRepository.getInstance();
	
	//select * for, PRODUCT
	// 싱글톤 패턴으로 객체를 1회 생성
	ProductVO productVO = dao.getProductById(productId);
	if(productVO == null) { // 해당 상품이 DB에 없다면
		//[상품 없음] 예외 처리 페이지로 이동
		response.sendRedirect("/exceptionNoProductId.jsp");
	}else { // 해당 상품이 DB에 있으면 
		
	}
	
	//장바구니(세션) => 세션명 : cartlist
	ArrayList<ProductVO> list = (ArrayList<ProductVO>)session.getAttribute("cartlist");
	//장바구니가 없다면 생성
	if(list == null) {
		// 장바구니를 생성(상품들은 아 장바구니에 없음)
		list = new ArrayList<ProductVO>();
		session.setAttribute("cartlist", list);
	}
	
	//장바구니가 있다면 다음을 실행
	//1)장바구니에 P1234 상품이 이미 들어있는 경우
	//    private int quantity;   //상품을 장바구니에 담은 개수
	//   quantity를 1 증가
	//2)장바구니에 P1234 상품이 없는 경우
	//  장바구니에 상품을 넣어주고
	//   quantity를 1로 처리
	//list : 장바구니에 들어있는 상품 목록
	
	//장바구니에 파라미터에 해당하는 상품이 있는지 체킹
	int cnt = 0; 
	
	for(int i=0; i<list.size(); i++) {
		if(list.get(i).getProductId().equals(productId)){
			cnt++; // 파라미터 상품이 장바구니에 있어서 1 증가 시킴
			//장바구니에 상품이 이미 들어 있다면 장바구니에 담은 개수 만 1증가
			list.get(i).setQuantity(list.get(i).getQuantity() +1);
		}
	}

	//장바구니에 해당 상품이 없다면
	if(cnt == 0){
		productVO.setQuantity(1);
		//최종 목표 : 장바구니(list)에 상품을 추가
		list.add(productVO);
	}
	//장바구니 확인
	//list :장바구니 , List<ProductVo>
	 for(ProductVO pd : list ) {
		 out.print("pd" + pd.toString() + "<br/><hr/>");
	 }
	
	response.sendRedirect("/product.jsp?productId="+ productId);
%>

장바구니 페이지 작성하기

cart.jsp

<%@page import="java.util.ArrayList"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!-- 
text/html, text/xml, text/plain
charset : 문자 세트 설정 
 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>장바구니</title>
</head>
<body>
	<%@include file="menu.jsp" %>
	
	<%
		//세션의 고유 아이디(장바구니 번호).하나의 웹브라우저
		String cartId = session.getId();
		
		//장바구니(세션) => 세션명 : cartlist
		//session.getAttribute("cartlist",list);
		List<ProductVO> list = (List<ProductVO>)session.getAttribute("cartlist");
	%>
	<c:set var="cartId" value="<%=cartId %>"/>
	<c:set var="list" value="<%=list %>"/>
	<%--<p>${cartId}</p>--%>
	<%--<p>${list}</p>--%>
	
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">장바구니</h1>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<table width="100%">
				<tr>
					<td align="left">
						<!-- cart=장바구니=session=웹브라우저=sessionId --> 
						<a href="deleteCart.jsp?cartId=${cartId}" class="btn btn-danger"
						<c:if test="${fn:length(list)==0}">hidden</c:if>>삭제하기</a>
					</td>
					<td align="right"><a href="shippingInfo.jsp?cartId=${cartId}"
						class="btn btn-success" 
						<c:if test="${fn:length(list)==0}">hidden</c:if>>주문하기</a></td>
				</tr>
			</table>
		</div>
		<!--  장바구니 출력 시작  -->
		<div style="padding-top: 50px;">
			<P></P>
			<table class="table table-hover">
				<tr>
					<th>상품</th>
					<th>가격</th>
					<th>수량</th>
					<th>금액</th>
					<th>비고</th>
				</tr>
				<!-- 장바구니가 비어있다면 시작 -->
				<c:if test="${fn:length(list)==0}">
				<tr style="text-align: center;">
					<td colspan="5" style="text-align: center;">
						장바구니에 상품이 없습니다.
					</td>					
				</tr>
				</c:if>
				<!-- 장바구니가 비어있다면 끝 -->
				<!-- 장바구니에 상품이 있다면 시작 -->
				<c:if test="${fn:length(list) >0  }">
				<!-- 
				forEach 태그? 배열(String[], int[][]), Collection(List, Set) 또는 
				Map(HashTable, HashMap, SortedMap)에 저장되어 있는 값들을 
				순차적으로 처리할 때 사용함. 자바의 for, do~while을 대신해서 사용함
				var : 변수
				items : 아이템(배열, Collection, Map)
				varStatus : 루프 정보를 담은 객체 활용
				   - index : 루프 실행 시 현재 인덱스(0부터 시작)
				   - count : 실행 회수(1부터 시작. 보통 행번호 출력)
         		 -->
          		<!-- list : List<ProductVO> -->
          		<c:forEach var="productVO" items="${list}" varStatus="stat">
          			<!-- 
          			amt  = amt + 누적 대상 값
          			 -->
          			<c:set var="amt" value="${amt + productVO.unitPrice*productVO.quantity}"/>
          			<tr>
          				<td>${productVO.productId}-${productVO.pname}</td>
          				<td><fmt:formatNumber value="${productVO.unitPrice}" 
          							pattern="#,###"/> </td>
          				<td>${productVO.quantity}</td>
          				<!--  가격 * 수량 = 금액 -->
          				<td><fmt:formatNumber value="${productVO.unitPrice*productVO.quantity}" 
          							pattern="#,###"/></td>
          				<td>
          				<!--  장바구니에서 특정 상품을 뺌 
          				어떤 상품 ? 상품을 식별. 기본키
          				-->
          					<a href="/removeCart.jsp?productId=${productVO.productId}" 
          							class="badge badge-danger">삭제</a>
          				</td>
          			</tr>
          		</c:forEach>
          			<tr>
          				<th></th>
          				<th></th>
          				<th>총 금액</th>
          				<th><fmt:formatNumber value="${amt}" pattern="#,###"/></th>
          				<th></th>
          			</tr>
				</c:if>
				<!-- 장바구니에 상품이 있다면 끝 -->
			</table>
			<a href="/products.jsp" class="btn btn-secondary">&laquo; 쇼핑 계속하기</a>
		</div>
		<!--  장바구니 출력 끝 -->
	</div>

	<!-- 2) welcome.jsp 끝 -->
	<%@include file="footer.jsp" %>
</body>
</html>

 

 

장바구니에 등록된 개별 상품 삭제 페이지 작성하기

removeCart.jsp

<%@ page import="java.util.List"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%//스크립틀릿
	//removeCart.jsp?id=P1234 의 요청 파라미터를 받아서 변수에 저장
	String productId = request.getParameter("productId"); // P1234
	out.print("<p>"+ productId+"</p>");
	
	
	// 만약에 /removeCart.jsp 또는 removeCart.jsp?id=Z1234 
	// products.jsp로 이동
	if(productId == null || productId.trim().equals("")) {
		response.sendRedirect("/products.jsp");
		return;
	}  
	
	//removeCart.jsp?productId=Z1234
	//상품저장소 클래스 => 싱글톤 객체 생성(메모리에 1회 생성. 공유해서 사용)  
	ProductRepository dao = ProductRepository.getInstance();
	//상품검색메소드(select * from productrepository where id='Z1234';)
	ProductVO productVO = dao.getProductById(productId);
	//해당 상품이 없음
	if(productVO == null) {
		response.sendRedirect("/exceptionNoProductId.jsp");
	}
	
	// 세션의 장바구니(세션) cartList 목록에서 P1234이 있는지 체크한 후 
	// 만약에 있다면 장바구니에서 제외처리
	//cartlist라는 세션명으로 생성
	//session.setAttribute("cartlist", list);
	List<ProductVO> cartList = (List<ProductVO>)session.getAttribute("cartlist");
	
	for( int i=0; i<cartList.size(); i++) {
		//list.get(0) : productVO
		//장바구니에 들어있던 하나의 상품과                        같은가?   삭제대상 상품이
		if( cartList.get(i).getProductId().equals(productId)) {
			//list : List<ProductVO>
	        //list.get(i) : ProductVO
	        //remove(Object)
			//장바구니에서.제거한다(삭제대상 상품을)
			cartList.remove(cartList.get(i));
		}
	}
	
	response.sendRedirect("/cart.jsp");
	
%>

 

장바구니에 등록된 전체 상품 삭제 페이지 작성하기:

deleteCart.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	//요청URI : /deleteCart.jsp?cartId=CF61A1B17D9247CFCA3D6B33E48528A6
	//요청파라미터 : cartId=CF61A1B17D9247CFCA3D6B33E48528A6
	//session.getId() : 세션고유아이디 = 고유장바구니 = 동일웹브라우저 = 1명의고객

	String cartId = request.getParameter("cartId");
	
	//cartId가 없네? => cart.jsp로 이동
	// /deleteCart.jsp 또는 / deleteCart.jsp?cartId=
	if(cartId == null || cartId.trim().equals("")) {
		response.sendRedirect("/cart.jsp");
		return; 
	}
	//장바구니 비우기
	session.removeAttribute("cartlist");  // 세션 속성  한 건만 삭제
	//session.invalidate(); //모든 세션의 속성을 삭제(로그아웃)
	
	//cart.jsp로 이동 
	response.sendRedirect("/cart.jsp");

%>