이번엔 관리자모드에서 벗어나서 사용자 입장에서의 상품목록 보기, 장바구니 담기 기능을 구현해보자
📌 1. 상품목록 장바구니 담기
📖 productlist.jsp
<body>
** 고객님! 마음껏 즐기세요 **
<%@include file="guest_top.jsp" %>
<table style="width: 90%; text-align: center;">
<tr style="background-color: gold">
<th>상품명</th>
<th>가 격</th>
<th>재고량</th>
<th>상세보기</th>
</tr>
<%
ArrayList <ProductDto> plist = productMgr.getProductAll();
for(ProductDto p:plist){
%>
<tr>
<td>
<img src="../upload/<%=p.getImage() %>" width="100"/>
<%=p.getName() %>
</td>
<td><%=p.getPrice() %></td>
<td><%=p.getStock() %></td>
<td><a href="javascript:productDetail_g('<%=p.getNo() %>')">보기</a></td>
</tr>
<%
}
%>
</table>
<%@include file="guest_bottom.jsp" %>
<form action="productdetail_g.jsp" name="detailFrm" method="post">
<input type="hidden" name="no" />
</form>
</body>다음은 관리자가 올린 상품 목록을 보여주는 페이지이다.
<%@include file="guest_top.jsp" %> include를 사용하여 guest_top.jsp 가 담고 있는 내용과, 데이터 값을 현재 페이지에 출력 시킨다.
guest_top.jsp 에는 사용자의 로그인 정보에 대한 idKey 값이 담겨져 있다.
따라서 현재 페이지에서도
include file로 인해 해당 사용자의 로그인의 대한 정보가 담겨져 있다.
상품의 모든 정보들이 ArrayList 타입의 ProductDto 에 저장되어 있고, 저장되어 있는 상품정보의 갯수에 따라 반복문이 실행이 된다
실행되는 동안에는 상품의 정보가
<tr>
<td>
<img src="../upload/<%=p.getImage() %>" width="100"/>
<%=p.getName() %>
</td>
<td><%=p.getPrice() %></td>
<td><%=p.getStock() %></td>
<td><a href="javascript:productDetail_g('<%=p.getNo() %>')">보기</a></td>
</tr>위 코드 처럼 해당 데이터를 가져온 값들만 출력이 된다.
보기 링크를 클릭하면 js의 productDetail_g 함수가 실행이되고 함수에서 정의된 코드로 인해서 productdetail_g.jsp 으로 이동하게 된다.
📖 productdetail_g.jsp
<jsp:useBean id="productMgr" class="pack.product.ProductManager"></jsp:useBean>
<%
String no = request.getParameter("no");
ProductDto dto = productMgr.getProduct(no);
%>
<!-- 생략 -->
<form action="cartproc.jsp">
<tr>
<td>주문 수량 : </td>
<td>
<input type="number" min="1" value="1" name="quantity" style="text-align: center; width: 2cm;"> <!-- quantity 수량 -->
<input type="hidden" name="product_no" value="<%=dto.getNo() %>">
</td>
</tr>
</table>
<!-- 생략 -->
</td>
<td style="width: 30%; vertical-align: top">
<b>** 상품 설명 **</b><br/>
<%=dto.getDetail() %>
</td>
<tr>
<td colspan="3" style="text-align: center;">
<input type="submit" value="장바구니에 담기">
<input type="button" value="이전 페이지로" onclick="history.back()">
</td>
</tr>
</form>이 로직에서는 주문 수량과 submit 과 button 값만 cartproc.jsp 로직으로 넘어가게 된다.
📖 cartproc.jsp
<jsp:useBean id="cartMgr" class="pack.order.CartManager" scope="session"></jsp:useBean>
<jsp:useBean id="order" class="pack.order.OrderBean"></jsp:useBean>
<jsp:setProperty property="*" name="order" />
<%
String flag = request.getParameter("flag"); // 구매목록 보기, 수정, 삭제 판단용
String id = (String)session.getAttribute("idKey"); // 사용자 정보가 담긴 'id'
if(id == null) {
// 로그인을 안한 경우 클라이언트에게 응답을 보내기 때문에 response 사용
response.sendRedirect("../member/login.jsp");
}else{
if(flag == null) {
// cart에 주문 상품 담기 (DB랑은 상관이 없다.)
order.setId(id);
// argument 내용 : product_no, quantity, id
cartMgr.addCart(order);
%>
<script>
alert("장바구니 담기");
location.href="cartlist.jsp";
</script>클라이언트로 부터 요청받은 flag값을 String으로 선언한다. 추후에 상품을 담은 장바구니에서 flag를 받아서 이 페이지에서 flag을 사용하기 때문에 미리 써둔것이다.
로그인 세션이 만료가 되거나, 로그인 하지 않은 사용자한테는 login.jsp 응답을 보낸다.
그렇지 않은 경우는 상품을 수정하거나 삭제가 아닌 장바구니를 담는거기 때문에 flag를 받아오지 않았다. 따라서 addCart(order)메서드를 통해 상품을 장바구니에 추가한다.
📖 CartManager.java (addCart(OrderBean obean))
주석에 있는 설명을 참고해주세요!
public void addCart(OrderBean obean) {
String product_no = obean.getProduct_no();
int quantity = Integer.parseInt(obean.getQuantity()); // 주문 수량 받기
// 주문수량이 0보다 클 경우 (즉, 주문한 경우)
if(quantity > 0) {
// 동일 상품을 주문할 경우에는 주문 수량만 늘리기 구현
if(hCart.containsKey(product_no)) {
// Object 타입이니 형변환 필요
OrderBean imsi = (OrderBean)hCart.get(product_no);
// 기존에 주문한 상품일 경우에는 주문수량만 누적(+=)한다.
quantity += Integer.parseInt(imsi.getQuantity());
// OrderBean에서 타입을 String으로 했기 때문에 형 변환
imsi.setQuantity(Integer.toString(quantity));
hCart.put(product_no, imsi);
System.out.println("카트에 저장된 총 주문 수 : " + quantity);
}else {
// 새로운 상품을 주문한 경우 장바구니 담기
hCart.put(product_no, obean);
}
}
// cart에 저장된 목록 반환
public Hashtable<String, Object> getCartList(){
return hCart;
}
}
이 메서드가 실행되면서 사용자가 선택한 상품이 장바구니에 담기게 된다.
📖 cartlist.jsp
<body>
** 장바구니 목록 ** <p/>
<%@include file="guest_top.jsp" %>
<table style="width: 90%; text-align: center;">
<tr style="background-color: silver;">
<th>주문상품</th>
<th>가격(소계)</th>
<th>주문수량</th>
<th>수정/삭제</th>
<th>조회</th>
</tr>
<%
int totalPrice = 0;
Hashtable hCart = cartMgr.getCartList();
if(hCart.size() == 0) {
%>
<tr>
<td colspan="5">
주문 건수가 없어요
</td>
</tr>
<%
}else{
Enumeration enu = hCart.keys();
while(enu.hasMoreElements()){
OrderBean order = (OrderBean)hCart.get(enu.nextElement());
ProductDto product = productMgr.getProduct(order.getProduct_no()); // order.getProduct_no() 상품번호를 갖는다.
int price = Integer.parseInt(product.getPrice());
int quantity = Integer.parseInt(order.getQuantity()); // 주문 수량
int subTotal = price * quantity; // 소계
totalPrice += subTotal; // 총계
%>
<form action="cartproc.jsp" method="get">
<input type="hidden" name="flag" />
<input type="hidden" name="product_no" value="<%=product.getNo() %>"/>
<tr>
<td><%=product.getName() %></td>
<td><%=subTotal %></td>
<td>
<input style="text-align: center;" type="text"
name="quantity" size="5" value="<%=quantity %>"> 개
</td>
<!-- 생략 -->
<td>
<a href="javascript:productDetailCart('<%=product.getNo() %>')">상세보기</a>
</td>
</tr>
</form>
<%
}
%>
<tr>
<td colspan="5">.
<b>총 결제 금액 : <%=totalPrice %> 원</b>
<br/>
<a href="orderproc.jsp">[주문 하기]</a> <%-- 장바구니에 담긴 상품 주문하기 --%>
</td>
</tr>
<%
}
%>
</table>
<%@include file="guest_bottom.jsp" %>
<form action="productdetail_g.jsp" name="detailFrm">
<input type="hidden" name="no" />
</form>
</body>
</html>장바구니에 담긴 상품 정보를 가져와 각 상품의 소계와 총계를 계산하고, 이 정보를 표시하는 코드이다.
📌 2. 장바구니 상품 수정하기
먼저 cartlist.jsp 에서 사용자가 상품을 장바구니에 담았을 때 아래 사진과 같이 상품의 정보가 보여진다.
📖 cartlist.jsp (update)
<form action="cartproc.jsp" method="get">
<!-- 생략 -->
<input style="background-color: cyan;"type="button" value="수정" onclick="cartUpdate(this.form)">
</form>수정하기 버튼을 누르면 cartUpdate( )함수를 실행하게 된다.
여기서
this.form은 해당 버튼을 눌렀을 때 해당 폼 안의 데이터를 조작하거나 전송하는 등의 동작을 수행할 수 있게 한다.
function cartUpdate(form){
//alert("a");
form.flag.value="update";
form.submit();
}cartUpdate( ) 함수에 대한 정의다. 수정하기 버튼을 클릭했을 때 flag 파라미터 값은 update으로 넘어가게 된다.
즉, 함수안에서 정의된 내용의 데이터 값은
cartproc.jsp으로 넘어가게 된다.
📖 cartproc.jsp (update)
//... 생략
else if(flag.equals("update")){
//out.print("u");
order.setId(id);
cartMgr.updateCart(order);
%>
<script>
alert("장바구니 수정 성공하였습니다.");
location.href="cartlist.jsp";
</script> order.setId(id); 은 사용자의 정보(id)값을 설정한다.
flag값이 update인 경우에 updateCart(order)메서드를 호출하고 실행시킨다.
📖 CartManager.java (updateCart(order))
// 수량 수정
public void updateCart(OrderBean order) {
String product_no = order.getProduct_no();
hCart.put(product_no, order);
}OrderBean 객체에서 상품 번호를 가져와 product_no에 저장한다.
해당 상품 번호 product_no를 키로 하고, 전달된 OrderBean 객체 obean을 값으로하여 hCart에 저장한다. 이러면 해당 상품의 정보가 수정된다.
📌 3. 장바구니 상품 삭제하기
이번엔 장바구니 담긴 상품을 삭제하는 기능을 구현해보자.
📖 cartlist.jsp (delete)
<form action="cartproc.jsp" method="get">
<!-- 생략 -->
<td>
<input style="background-color: #FFCC00;" type="button" value="삭제" onclick="cartDelete(this.form)">
</td>
</form> 장바구니에 삭제 버튼을 cartDelete( )함수를 실행하게 되고 함수안에서 정의된 내용의 데이터 값은 cartproc.jsp으로 넘어가게 된다.
// 삭제 처리용
function cartDelete(form){
//alert("b");
form.flag.value="del";
form.submit();
}
이번엔 flag 파라미터가 del값으로 넘어간다.
📖 cartproc.jsp (delete)
//... 생략
else if(flag.equals("del")){
//out.print("d");
cartMgr.deleteCart(order);
%>
<script>
alert("주문이 취소되었습니다.");
location.href="cartlist.jsp";
</script>
<%
}
}flag 가 del값을 비교하고 일치했을 때 deleteCart(order)메서드를 호출하고 실행시킨다.
성공적으로 실행이 되면 alert("주문이 취소되었습니다.") 코드가 실행이 되고 cartlist.jsp 로 이동한다.
📖 CartManager.java (deleteCart(order))
// 수량 삭제
public void deleteCart(OrderBean order) {
String product_no = order.getProduct_no();
hCart.remove(product_no);
}이러면 사용자가 삭제버튼을 누르면 해당 상품의 데이터가 사라진다.
