WEB/JSP
JSP 27 - 쇼핑몰 사이트 만들기(10) [장바구니 - (session 활용)]
inderrom
2023. 1. 17. 17:42
<product.jsp>
onclick="addToCart()" 핸들러 함수를 만든다.
스크립트 추가
<script type="text/javascript">
// 상품 주문 버튼 클릭 시 실행됨
function addToCart(){
console.log("롬이");
if(confirm("상품을 장바구니에 추가하시겠습니까?")){
// 요청 URI : addCart.jsp?id=P1234
// 방식 : post
document.addForm.submit();
}else{
// 실행 취소
document.addForm.reset();
}
}
</script>장바구니 추가하기
<addCart.jsp>
<%@page import="java.util.Enumeration"%>
<%@page import="java.util.ArrayList"%>
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
// 요청 URIaddCart.jsp?id=P1234
// 요청파라미터 : id=P1234
String id = request.getParameter("id"); //P1234
out.print("<p> id : " + id + "</p>");
// 요청파라미터가 없을 때 처리 .. http://localhost/addCart.jsp
if(id == null || id.trim().equals("")){
// redirect : 요청 URI를 재요청 ==> 주소표시줄의 주소가 바뀜
response.sendRedirect("products.jsp");
// 다음줄부터 실행 안함
return;
}
// 기본키가 P1234코드의 상품을 찾아보자(상품 저장소에 있을것임)
// 싱클톤 패턴으로 객체를 메모리에 1회 생성
ProductRepository dao = ProductRepository.getInstance();
// select * from ProductRepository
// where id = 'P1234'
// 상품코드를 파라미터로 던지면 해당되는 상품을 1행(ProductVO) 가져옴
ProductVO productVO = dao.getProductById(id);
out.print("productVO :" + productVO);
// 상품 결과가 없다면..
if(productVO==null){
// [상품이 없음]예외처리 페이지로 이동
response.sendRedirect("exceptionNoProductId.jsp");
return;
}else{ // 상품 결과가 있으면 계속 가자
}
// 장바구니(세션). 하나의 장바구니에 하나의 세션. 세선명 : cartlist라고 해보자
//cartlist장바구니 하나에 여러개(ArrayList<>)의 상품(productVO)이 들어있다.
ArrayList<ProductVO> list = (ArrayList<ProductVO>)session.getAttribute("cartlist");
// 장바구니가 없다면 (null) 장바구니를 생성
if(list == null){
//list는 null이므로 여기서 리스트(장바구니)를 생성해줘야 함
list = new ArrayList<ProductVO>();
// cartlist라는 세션 속성명에 list를 매핑
session.setAttribute("cartlist", list);
}
Enumeration en = session.getAttributeNames();
String name = en.nextElement().toString();
out.print("<p>name :" + name + "</p>"); // cartlist
// 장바구니가 있다면 다음을 실행
// 1) 장바구니에 P1234 상품이 이미 들어있는 경우
// private int quantity; // 상품을 장바구니에 담는 개수
// quantity의 값을 1 증가
// 2) 장바구니에 P1234 상품이 없는 경우
// 장바구니에 상품을 넣어주고
// quantity 값을 1로 처리
// list : 장바구니에 들어있는 상품 목록
// list.size() : 상품의 종류 수
int cnt = 0;
for(int i =0; i<list.size(); i++){
// list는 장바구니이고,(P1234-list.get(0), P1235-list.get(1), P1236-list.get(2)) 상품이 이미 있다고하면..
// list.get(0).getProductId().equals("P1234")
if(list.get(i).getProductId().equals(id)){ // 담을 상품을 list에서 찾음
cnt++;
// 장바구니에 상품이 이미 들어있다면 장바구니에 담은 개수만 1 증가
list.get(i).setQuantity(list.get(i).getQuantity()+1);
}
}
// 장바구니에 해당 상품이 없다면(cnt = 0)
if(cnt==0){
productVO.setQuantity(1);
// 최종목표 : 장바구니(lsit)에 상품을 추가
list.add(productVO);
}
// 장바구니를 확인
// list<ProductVO> list
for(ProductVO vo : list)
{
out.print("<p>" + vo.toString() + "</p>");
}
// 상품상세 페이지로 되돌아가자
response.sendRedirect("product.jsp?id=" + id);
%>장바구니 목록
<cart.jsp>
<%@page import="java.text.DecimalFormat"%>
<%@page import="java.math.BigDecimal"%>
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>장바구니</title>
</head>
<body>
<% //스크립틀릿
//세션의 고유 아이디(장바구니 번호)
String cartId = session.getId();
%>
<!-- include 액션 태그 -->
<jsp:include page="menu.jsp" />
<!-- ---------장바구니 시작-------------- -->
<div class="jumbotron">
<!-- container : 이 안에 내용 있다 -->
<div class="container">
<h1 class="display-3">장바구니</h1>
</div>
</div>
<!-- 장바구니 상세 내역 시작 -->
<div class="container">
<div class="row">
<table width="100%">
<tr>
<td align="left">
<a href="deleteCart.jsp?cartId=<%=cartId%>"
class="btn btn-danger">삭제하기</a>
</td>
<td align="right">
<a href="shoppingInfo.jsp?cartId=<%=cartId%>"
class="btn btn-success">주문하기</a>
</td>
</tr>
</table>
</div>
<!-- 장바구니 출력 시작 -->
<!-- padding-top : 영역의 위쪽 여백 50픽셀 -->
<div style="padding-top:50px;">
<table class="table table-hover">
<tr>
<th>상품</th><th>가격</th><th>수량</th>
<th>금액</th><th>비고</th>
</tr>
<% //스크립틀릿
//ArrayList<ProductVO> list
//addCart.jsp의 cartlist라는 세션 속성명에 list를 매핑
//session.setAttribute("cartlist", list);
ArrayList<ProductVO> cartList =
(ArrayList<ProductVO>)session.getAttribute("cartlist");
// 금액을 누적하는 변수
double sum = 0;
//장바구니가 비어있다면..
if(cartList==null){
%>
<tr style="text-align:center;">
<td colspan="5" style="text-align:center;">장바구니에 상품이 없습니다.</td>
</tr>
<%
//장바구니에 상품목록이 있다면
}else{ // 3자리수마다 ,
DecimalFormat df = new DecimalFormat("###,###");
//상품 목록(List<ProductVO>)에서 하나씩(ProductVO) 꺼냄
for(ProductVO product : cartList){
//금액 = 가격 x 수량
double total = product.getUnitPrice() * product.getQuantity();
// 실수 -> 정수
BigDecimal totalBig = new BigDecimal(total);
BigDecimal priceBig = new BigDecimal(product.getUnitPrice());
// 금액이 누적됨
sum = sum + total;
%>
<tr>
<td><%=product.getProductId()%>-<%=product.getPname()%></td>
<td><%=df.format(priceBig)%></td>
<td><%=product.getQuantity()%></td>
<td><%=df.format(totalBig)%></td>
<td>삭제</td>
</tr>
<%
} // end for
// 총액 : 금액의 누적 합계
BigDecimal sumBig = new BigDecimal(sum);
%>
<tr>
<th></th>
<th></th>
<th>총액</th>
<th><%=df.format(sumBig) %></th>
<th></th>
</tr>
<%
} // end if
%>
</table>
<a href="products.jsp" class="btn btn-secondary">«쇼핑 계속하기</a>
</div>
<!-- 장바구니 출력 끝 -->
</div>
<!-- 장바구니 상세 내역 끝 -->
<!-- ---------장바구니 끝--------- -->
<jsp:include page="footer.jsp" />
</body>
</html>
<cart.jsp>JSTL 사용하기
<%@page import="kr.or.ddit.vo.ProductVO"%>
<%@page import="java.util.ArrayList"%>
<%@ 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" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<title>장바구니</title>
</head>
<body>
<%
// 세션의 고유 아이디(장바구니 번호)
String cartId = session.getId();
// out.print("<p>" + cartId + "</p>");
%>
<jsp:include page="menu.jsp"/>
<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">
<a href="deleteCart.jsp?cartId=<%=cartId%>" class="btn btn-danger">삭제하기</a>
</td>
<td align="right">
<a href="shoppingInfo.jsp?cartId=<%=cartId%>" class="btn btn-success">주문하기</a>
</td>
</tr>
</table>
</div>
<div style="padding-top:50px;">
<table class="table table-hover">
<tr>
<th>상품</th><th>가격</th><th>수량</th><th>금액</th><th>비고</th>
</tr>
<%
ArrayList<ProductVO> list = (ArrayList<ProductVO>) session.getAttribute("cartlist");
%>
<c:set var="list" value="<%=list%>"/>
<c:set var="sum" value="0"/>
<c:choose>
<c:when test="${list==null}">
<tr style="text-align:center;">
<td colspan="5" style="text-align:center;">장바구니에 상품이 없습니다.</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${list}" var="product">
<c:set var="sum" value="${sum+(product.unitPrice * product.quantity)}"/>
<tr>
<td>${product.productId}-${product.pname}</td>
<td><fmt:formatNumber value="${product.unitPrice}" type="currency" currencySymbol=""/></td>
<td>${product.quantity}</td>
<td><fmt:formatNumber value="${product.unitPrice * product.quantity}" type="currency" currencySymbol=""/></td>
<td>삭제</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
<tr>
<td></td><td></td>
<th>
총액
</th>
<th colspan="2" align="left">
<fmt:formatNumber value="${sum}" type="currency" currencySymbol=""/>
</th>
</tr>
</table>
<a href="products.jsp" class="btn btn-secondary">«쇼핑 계속하기</a>
</div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>장바구니 삭제하기
<deleteCart.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% //스크립틀릿
//요청URI : /deleteCart.jsp?cartId=CF61A1B17D9247CFCA3D6B33E48528A6
//요청파라미터 : cartId=CF61A1B17D9247CFCA3D6B33E48528A6
//session.getId() : 세션고유아이디 = 고유장바구니 = 동일웹브라우저 = 1명의고객
String id = request.getParameter("cartId");//CF61A1B17D9247CFCA3D6B33E48528A6
//cartId가 없네 => cart.jsp로 이동
if(id==null || id.trim().equals("")){
response.sendRedirect("cart.jsp");
return;
}
// 장바구니 비우기
session.removeAttribute("cartlist"); //세션 한 건만 삭제
// session.invalidate(); // 모든 세션을 삭제 ( 로그아웃)
//cart.jsp로 이동
response.sendRedirect("cart.jsp");
%>
로그인을 해야 장바구니를 들어올 수 있게 security 설정
임의로 manager 권한 설정하기
<tomcat-users.xml>
<role rolename="manager"/><!-- 학생 -->
<user username="admin" password="java" roles="manager"/><!-- 학생 -->
<web.xml>
<security-constraint>
<web-resource-collection>
<web-resource-name>JSPBook</web-resource-name>
<url-pattern>/cart.jsp</url-pattern>
<http-method>GET</http-method>
</web-resource-collection>
<auth-constraint>
<description></description>
<role-name>manager</role-name>
</auth-constraint>
</security-constraint>
로그인 후 장바구니에 들어갈 수 있다.
***** username : admin만 등록 버튼이 보이게 바꾸기 *****
<menu.jsp>
<c:if test="${fn:length(username)==0}">
<a href="addProduct.jsp">로그인해주세요.</a>
</c:if>a 링크로 addProduct.jsp에 보내준다
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% //스크립틀릿
//시큐리티의 사용자명을 가져옴
String username = request.getRemoteUser();
%>
<!-- JAVA세계의 변수 username의 값을 JSTL세계의 변수 username에 할당 -->
<c:set var="username" value="<%=username%>" />
<nav class="navbar navbar-expand navbar-dark bg-dark">
<!-- container : 내 안에 내용 있다 -->
<div class="container">
<div class="navbar-header" style="width:100%;">
<div style="float:left;">
<a class="navbar-brand" href="welcome.jsp">Home</a>
</div>
<div style="float:right;">
<span class="navbar-brand">
<!-- 로그인 했음 -->
<c:if test="${fn:length(username)>0}">
${username}님 환영합니다. |
<a href="/logout.jsp" class="btn btn-sm btn-success pull-right">logout</a>
</c:if>
<!-- 로그인 안함 -->
<c:if test="${fn:length(username)==0}">
<a href="addProduct.jsp">로그인해주세요.</a>
</c:if>
</span>
</div>
</div>
</div>
</nav>
<products.jsp>
<!-- tomcat-users.xml의
<user username="gdi" password="java" roles="admin" />
-->
<%
//admin 권한을 가지고 있는 사용자만 등록 버튼이 보이도록 처리
if(request.isUserInRole("admin")){
%>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<a href="addProduct.jsp" class="btn btn-primary">등록</a>
</div>
</div>
<%
}
%>
</div>
위에 코드를 추가해주면
username : admin일 때 장바구니 목록을 볼 수 있고 등록 버튼은 가려진다.
등록 버튼은 username : ssr일 때 보여짐