JAVA

[Java] JSP 장바구니 만들기

menus 2023. 9. 27. 10:46
728x90

 

안녕하세요 !    (oﾟvﾟ)ノ

 

이번 글에서는 JSP를 사용해서 장바구니를 만들어볼건데요 !

 

우선 장바구니에 들어가야할 기능들을 정리해봅시다 !

 

  • 사용자 로그인 ( 이름만 입력 )
  • 상품 선택하여 장바구니에 추가
  • 장바구니를 열어보면 지금까지 선택한 상품이 전부 확인 가능

 

위 기능이 다 들어가도록, JSP 파일을 총 4개 만들어서 구현해보도록 하겠습니다 !

 

Login.jsp, setProduct.jsp, add.jsp, checkOut.jsp 를 만들어보겠습니다.

 

이제 각 페이지의 역할을 정리해볼까요?

 

  • Login.jsp : 로그인 화면 ( 이름 입력받는 양식 )
  • setProduct.jsp : 상품 선택 화면 ( 상품 리스트를 보여주고 선택한 상품을 추가할 수 있는 버튼 )
  • add.jsp : setProduct.jsp에서 선택한 상품을 session에 저장 ( ArrayList 혹은 Map을 이용, 추가된 후 선택한 상품이 추가되었다는 메세지 출력하고 상품 선택 화면으로 돌아가도록 )
  • checkOut.jsp : session이 살아있고 하나 이상의 상품을 선택한 상태라면, 선택한 상품의 목록을 나타내는 화면

 

 

 

 

 

 

우선 로그인 화면을 만들기 위해 Login.jsp 파일에서 form > table을 만들어주고,

 

form은 setProduct.jsp로 가도록 action을 설정해줍니다.

 

이름 값을 input태그로 받아주고 name = "id" id = "id" 를 설정해줍니다 !

 

type="submit"인 로그인 버튼을 만들어주면 로그인 화면은 끝이납니다.

 

다음은 전체 코드입니다 !

 

 

 

Login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>로그인</h1>
<form action="./setProduct.jsp" method="post">
	<table border='1' align='center' width="80%">
		<tr>
			<td>이름 : <input type="text" id="id" name="id"></td>
			<td><input type="submit" value="로그인"></td>
		</tr>
		
	</table>
</form>

</body>
</html>

 

상품 선택 화면에서는 로그인한 id값을 받아와서 화면에 띄워주겠습니다.

 

getParameter로 id값을 받아오기위해 body 안에서 <% %>를 열어준뒤에 코드를 작성해줍니다.

 

request.getParameter("id")로 가져와주면 됩니다 !

 

가져온 id값을 session의 "id"에 값을 저장해둡니다.

 

select 태그로 option을 여러개 만들어서 장바구니에 담을 수 있는 상품 리스트를 만들어줍니다.

 

상품을 선택하고 장바구니에 담기 버튼을 누르면 add.jsp로 넘어가지도록 해줍니다.

 

다음은 전체 코드입니다 !

 

 

 

setProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");

// 이름과 아이디를 getParameter() 메소드를 사용해서 받아온다
String id = request.getParameter("id");

/*
받아온 파라미터 값들이 있을 경우 session 영역에 setAttribute() 메소드 사용
*/
if(id!=null){
	session.setAttribute("id", id);
}

// session 영역에 등록된 속성들을 getAttribute()메소드를 사용해 읽어들임

id = (String) session.getAttribute("id");


%>
<h3><%=id %>님이 로그인한 상태입니다.</h3><BR>
<form action="./add.jsp" method="post">
	<select name="product">
		<option value="반팔 티셔츠">반팔 티셔츠</option>
		<option value="긴팔 티셔츠">긴팔 티셔츠</option>
		<option value="블라우스">블라우스</option>
		<option value="옥스퍼드 셔츠">옥스퍼드 셔츠</option>
		<option value="후드티">후드티</option>
		<option value="니트">니트</option>
		<option value="가디건">가디건</option>
		<option value="겨울 코트">겨울 코트</option>
		<option value="패딩">패딩</option>
		<option value="스투시 비니">스투시 비니</option>
		<option value="나이키 양말">나이키 양말</option>
	</select>
	<input type="submit" value="장바구니 담기">
</form>
<a href="./checkOut.jsp">결제하기</a>
</body>
</html>

 

장바구니 담기 버튼을 눌러서 넘어오면 선택된 아이템이 뭔지 확인해줘야겠죠?

 

아까와 같이 <% %>를 열어준 뒤 request.getParameter()로 product값을 받아와줍니다.

 

그 뒤 세션에 저장된 장바구니 "cart"를 가져오기위해 session.getAttribute()를 이용해서 기존 장바구니를 가져옵니다.

 

(  예시코드에서 장바구니는 Map으로 만들었습니다. )

 

장바구니가 존재할 때 불러와진 cart 값을 사용하도록 하고, 없으면 새로 만들어줍니다.

 

getParameter로 가져온 product값이 이미 장바구니에 있는 지 확인해주고, 기존에 장바구니에 해당 아이템이 몇개 들어있는 지 확인하기 위해 getOrDefault로 가져와줍니다.

 

가져와진 갯수를 카운팅해준 뒤 변경된 갯수를 session에 저장해줍니다 !

 

다 실행된 뒤에 alert를 띄워서 추가된 상품을 확인시켜주고, history.back()을 이용해서 전 페이지로 돌아가도록 합니다.

 

다음은 완성된 코드입니다.

 

 

 

add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String product = request.getParameter("product");
session.setAttribute("product", product);

//세션에서 장바구니(Map 객체) 가져오기
Object cartObj = session.getAttribute("cart");
Map<String, Integer> cart;

if(cartObj != null & cartObj instanceof Map){
	
	// 이미 장바구니에 아이템이 있을 때
	cart = (Map<String, Integer>) cartObj;
}else{
	// 아이템을 처음 넣을 때
	cart = new HashMap<>();
	// 장바구니 저장
	session.setAttribute("cart", cart);
}

if(product != null){
	// 선택한 아이템의 현재 개수 가져오기
	int count = cart.getOrDefault(product, 0);
	
	count++;
	
	// 변경된 개수 저장
	cart.put(product, count);

	// 변경된 장바구니 저장
	session.setAttribute("cart", cart);
}
%>
<script>
	alert("<%=product%>를 장바구니에 담았습니다.");
	history.back();
</script>
</body>
</html>

 

상품 선택 페이지에서 결제하기 버튼을 누르면 장바구니를 보여주는 페이지로 이동하게됩니다.

 

기존의 장바구니를 불러오기위해 session에 저장된 cart를 불러와줍니다.

 

장바구니에 들어있는 아이템 종류만큼 for문을 돌려줍니다. 

 

cart.entrySet()을 이용해서 값을 돌려주고 getKey()와 getValue()로 아이템 이름과 갯수를 불러옵니다.

 

로그아웃을 눌렀을 때 session을 종료시켜주는 .invalidate()를 써준 뒤 window.location.href = "./Login.jsp"  로 로그인 화면으로 돌려보내도록 합니다.

 

다음은 완성된 코드입니다 !

 

 

 

checkOut.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.util.Enumeration" %>
<%@page import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<%

Object cartObj = session.getAttribute("cart");
Map<String, Integer> cart;

if(cartObj != null && cartObj instanceof Map){
	// 이미 장바구니에 아이템이 있을 때
	cart = (Map<String, Integer>) cartObj;
	
	// 현재 바구니 ( 아이템 종류만큼 )
	for (Map.Entry<String, Integer> entry : cart.entrySet()){
		String productName = entry.getKey();
		int productNums = entry.getValue();
		
		%>
		<div align="center">
		<%=productName %> <input type="number" id="<%=productName %>" name="<%=productName %>" min="0" max="100" value="<%=productNums%>">
		
		</div><BR>
		
		<%
		
	}
}

%>
<div align="center">
	<input type="button" value="로그아웃" onclick=" window.location.href = './Login.jsp'" >
	<input type="button" value="결제하기" onclick="pay()" >
</div>
</body>
</html>

 

 

 

실행시켰을때의 화면입니다.

 

Login.jsp

 

setProduct.jsp

장바구니 담기 버튼을 눌렀을 때

add.jsp

 

결제하기 버튼을 눌렀을 때

checkOut.jsp

 

 

 

 

이렇게 JSP로 장바구니를 만들어보았습니다 !

 

감사합니다     ( ● ' ◡ ' ● )