이번에 jsp를 활용해서 간단한 장바구니를 구현해보았다.
동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.
방학 때 한번 해봤던 유기견 웹사이트 덕분에 이 번 것은 어려움 없이 잘 끝낼 수 있었다. 한번 해본 것과 안 해본 것은 천지차이인 것을 느꼈다.
CSS는 전에 하던 프로젝트에서 가져왔다.
로그인 화면. jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<title>로그인</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">로그인</h1>
</div>
</div>
<br/>
<div class="container" align="center">
<form class="form-signin" action="/setProduct.jsp" method="post">
<div class="form-group">
<label for="inputUserName" class="sr-only">User Name</label> <input
type="text" class="form-control" placeholder="ID" name='id'
required autofocus>
</div>
<button class="btn btn btn-lg btn-success btn-block" type="submit">로그인</button>
</form>
</div>
</body>
</html>로그인에서는 별다른 기능이 없다. 입력을 받지 않았으면 입력을 유도하도록 required를 사용했고 또한 자동으로 포커스가 입력란에 가있도록 설정해놓았다.
setProduct.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
request.setCharacterEncoding("UTF-8");
if(request.getParameter("id")==null){
response.sendRedirect("index.jsp");
return;
}else{
session.setAttribute("sessionId",request.getParameter("id"));
System.out.println(session.getId());
}
%>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<title>상품선택화면</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">상품선택</h1>
</div>
</div>
<div class="container" align="center">
<h3><%=session.getAttribute("sessionId")%>님이 로그인 한 상태입니다.</h3>
<hr>
<br>
<form action="/add.jsp">
<select name="items">
<option value="apple">사과</option>
<option value="pear">배</option>
<option value="pineapple">파인애플</option>
</select><input type="hidden" name="id" value="<%=session.getAttribute("sessionId")%>">
<input type="submit" value="추가">
</form>
<a href="checkOut.jsp">계산</a>
</div>
<br/>
</body>
</html>상품 선택 화면 코드이다. 여기서는 id를 가져와서 세션에다가 id를 저장해놓았다. 그리고 상품을 추가하게 되면 add.jsp로 넘어가도록 설정해놓았다. 계산을 누르면 checkOut.jsp로 이동하게 된다.
add.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="Dao.ProductDAO" %>
<%@ page import="Dao.Product" %>
<%
String productName=request.getParameter("items");//앞에서 추가한 제품 이름 저장
String id=request.getParameter("id");
ProductDAO dao=ProductDAO.getInstance();
ArrayList<Product> productList = dao.getAllProducts(); //dao에 있는 모든 제품을 가져온다
Product checkProduct = new Product();
for(int i=0;i<productList.size();i++) {
checkProduct=productList.get(i);
if(checkProduct.getProduct().equals(productName)){//추가한 제품이름과 일치하면 break시킨다 이유는 거의 밑코드에서 설명
break;
}
}
ArrayList<Product> list = (ArrayList<Product>) session.getAttribute("cartlist"); //세션에 저장되있는 장바구니를 리스트에 저장
if (list == null) {//만약 세션에서 가져온 장바구니가 비어있다면
list = new ArrayList<Product>();
session.setAttribute("cartlist", list);//cartlist라는 세션을 만들어서 list내용을 넣는다
}
int cnt=0;
Product product=new Product();
for(int i=0;i <list.size();i++) {
product=list.get(i); //장바구니 리스트 값 담기
if(product.getProduct().equals(productName)){//만약 장바구니 리스트에있는 거랑 추가한 상품이랑 일치하면
cnt++;
int proCnt=product.getProductCnt()+1;
product.setProductCnt(proCnt); //상품 수량 추가
}
}
if (cnt == 0) {//위에서 추가한 제품 이름과 일치하면 break 시켰었는데 만약 cnt가 0이라면 그 제품 수량 1로 설정 장바구니에 제품 추가
checkProduct.setProductCnt(1);//제품 수량 1로 설정
list.add(checkProduct);// 장바구니 리스트에 제품 추가
}
%>
<script>
console.log("<%=id%>");
alert("<%=productName%>이 추가 되었습니다");/*팝업창으로 제품명 추가되었다고 알림 */
location.href="setProduct.jsp?id=<%=id%>";// 주문 페이지로 다시이동
</script>장바구니를 좀 더 깔끔히 관리하기 위해서 자바 파일로 따로 product.java 와 productDAO.java파일을 만들었다
product.java
package Dao;
public class Product {
private String product;
private int productCnt;
public Product(String product) {
this.product = product;
}
public Product() {
}
public String getProduct() {
return product;
}
public void setProduct(String product) {
this.product = product;
}
public int getProductCnt() {
return productCnt;
}
public void setProductCnt(int productCnt) {
if (productCnt<0){//값이 0이하로 떨어지면
this.productCnt=0;
}else{
this.productCnt = productCnt;
}
}
}ProductDAO.java
package Dao;
import java.util.ArrayList;
public class ProductDAO {
private ArrayList<Product> listOfProducts = new ArrayList<Product>();
private static ProductDAO instance= new ProductDAO();
public ProductDAO(){
Product apple=new Product("apple");
apple.setProductCnt(0);
Product pineapple=new Product("pineapple");
pineapple.setProductCnt(0);
Product pear=new Product("pear");
pear.setProductCnt(0);
listOfProducts.add(apple);
listOfProducts.add(pineapple);
listOfProducts.add(pear);
}
public Product getProduct(String productI){//제품명같은 값 가져오기
Product productName=null;
for(int i=0;i<listOfProducts.size();i++) {
Product product=listOfProducts.get(i);
if(product!=null &&product.getProduct()!=null && product.getProduct().equals(productI)) {
productName=product;
break;
}
}
return productName;
}
public ArrayList<Product> getAllProducts(){
return listOfProducts;
}
public static ProductDAO getInstance() {
return instance;
}
public void addProduct(Product product){
listOfProducts.add(product);
}
}그리고 계산 버튼을 checkOut.jsp로 이동
checkOut.jsp
<%@ page import="Dao.Product" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="stylesheet" href="./resources/css/bootstrap.min.css" />
<title>상품계산</title>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container">
<ul class="navbar-nav mr-auto">
<li style="padding-top: 7px; color: white">[<%=session.getAttribute("sessionId")%>님]</li>
<li class="nav-item"><a class="nav-link" href="logout.jsp">로그아웃 </a></li>
<li class="nav-item"><a class="nav-link" href='setProduct.jsp'>상품추가</a>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3">계산</h1>
</div>
</div>
<div class="container" align="center">
<h1>선택한 상품 목록</h1><br><hr>
<table class="table table-hover">
<tr>
<th>상품</th>
<th></th>
<th>수량</th>
</tr>
<%
ArrayList<Product> cartlist =(ArrayList<Product>) session.getAttribute("cartlist");
if(cartlist==null){
cartlist=new ArrayList<Product>();
}
for(int i=0;i<cartlist.size();i++){
Product product = cartlist.get(i);
%>
<tr>
<td><%=product.getProduct()%></td>
<td><a href="editCart.jsp?productName=<%=product.getProduct()%>&editType=minus" class="badge badge-success">-</a></td>
<td><%=product.getProductCnt()%></td>
<td><a href="editCart.jsp?productName=<%=product.getProduct()%>&editType=add" class="badge badge-success">+</a></td>
<td><a href="removeCart.jsp?productName=<%=product.getProduct()%>" class="badge badge-danger">삭제</a></td>
</tr>
<%
}
%>
</table>
<a href="setProduct.jsp" class="btn btn-secondary"> « 쇼핑 계속하기</a>
</div>
</body>
</html>
거의 장바구니 화면이라고 생각하면 된다. for문으로 돌려서 리스트에 있는 내용을 뽑아낸다
로그아웃 버튼을 누르면 세션을 지우고 로그인 화면으로 이동한다
logout.jsp
<%
session.invalidate();
response.sendRedirect("index.jsp");
%>
그리고 + 나 - 버튼을 누르면 수량이 변경된다.
get방식으로 파라미터로 넘겨받은 값을 이용해서 값을 변경한다.
editCart.jsp
<%@ page import="Dao.Product" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String productName = request.getParameter("productName");
String editType = request.getParameter("editType");
ArrayList<Product> cartlist =(ArrayList<Product>) session.getAttribute("cartlist");
Product product = new Product();
for(int i = 0; i < cartlist.size(); i++){
product=cartlist.get(i);
if(product.getProduct().equals(productName)){//제품이랑 일치하면
if(editType.equals("add")){//수량+!
product.setProductCnt(product.getProductCnt()+1);
break;
}else if(editType.equals("minus")){//수량-1
//0이하로 떨어진다면 이미 product.java에서 예외처리 해놓았음
product.setProductCnt(product.getProductCnt()-1);
break;
}
}
}
response.sendRedirect("checkOut.jsp");
%>삭제 역시 get방식으로 파라메터로 제품명을 넘겨서 삭제한다.
removeCart.jsp
<%@ page import="Dao.Product" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String productName = request.getParameter("productName");
ArrayList<Product> cartlist =(ArrayList<Product>) session.getAttribute("cartlist");
Product product = new Product();
for(int i = 0; i < cartlist.size(); i++){
product=cartlist.get(i);
if(product.getProduct().equals(productName)){//일치하면 리스트에서 제거
cartlist.remove(product);
}
}
response.sendRedirect("checkOut.jsp");
%>
느낀 점:
이상 간단한 장바구니 페이지 구현이었습니다. 방학 때 한번 해본 것이라 어떻게 할지 구상이 좀 잘되었습니다.. 역시 많이 해봐야 느는 것 같습니다.
추가변경사항:
다른브라우저에서 로그아웃하면 현 브라우저에서도 로그아웃 되도록 처리, 그리고 1분동안 아무행위하지않으면 세션사라지게 하고 로그인창으로가기
setProduct.jsp에 이코드 수정 및 추가
<%
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
if(id != null){
if(session.getAttribute("sessionId") == null){
session.setAttribute("sessionId", id);
}
}else{
if(session.getAttribute("sessionId")== null){
response.sendRedirect("index.jsp");
}else{
id = (String)session.getAttribute("sessionId");
}
}
%>checkOut.jsp에는 이코드 추가
<%
request.setCharacterEncoding("UTF-8");
if(session.getAttribute("sessionId")== null){
response.sendRedirect("index.jsp");
}
%>1분동안 반응없으면 세션을 지우려면 web.xml에서 건들여주면된다.
web.xml
<session-config>
<!--세션타임아웃 태그를 사용 단위(분) -->
<session-timeout>1</session-timeout>
</session-config>
저번프로젝트 참고:
https://jackycode.tistory.com/52?category=1032772
팀 프로젝트 - 유기동물 입양+쇼핑몰+ 커뮤니티 사이트
Jsp 및 js html css 아무것도 모르는 상태로 무작정 공부하고자해서 만든 첫 웹프로젝트이다. 첫날에 인터넷으로 뭐할지 구상후 필요한 책을 학교 도서관에서 대출하였다. 1. 프로젝트 기획안 개요 :
jackycode.tistory.com
'JSP' 카테고리의 다른 글
| [JSP] 간단 db연동 실습 (0) | 2022.10.07 |
|---|---|
| [jsp]자바빈 액션태그 간단 회원가입 실습 (0) | 2022.09.21 |
| [JSP]Forward와 sendRedirect 사용해보기 (0) | 2022.09.19 |
| [jsp] scope활용해서 값넘겨보기 (0) | 2022.09.19 |
| 구구단 만들기 (0) | 2022.09.19 |
댓글