JSP&Servlet

JSP & Servlet 다루기 (3) : JSP 쿠키 다루기, 세션과 쿠키를 이용한 장바구니 만들기

TerianP 2022. 6. 8.

728x90

JSP 쿠키 만들기

HTTP 쿠키 : 웹쿠키, 브라우저 쿠키 => 사용자의 웹 브라우저에전송하는 작은 데이터 조각
쿠키에는 특정한 정보를 담아서 다음 사이트로 보내고, 동일한 사용자임을 인식할 수 있도록 하는 기능을 한다.
- 쿠키 안에는 보통 로그인한 사용자를 구분할 수 있는 정보 등을 담아둔다.
- 쿠키는 만료 시간을 정할 수 있는데 이를 이는 만료된 쿠키는 사용이 불가능하게 만드는것을 통해서 보안성 향상에 기여한다.

1) 내가 직접 생성하기

var setCookie = function(name, value, exp){
		var date = new Date();
		date.setTime(date.getTime()+exp*60);
		document.cookie=name+'='+value+';expire'=date.toUTCString() +';path=/';
	}

setCookie("no",100,100);

2) JQuery 사용하기

document.cookie="product=5;expries=Sat,31 Dec 2022 23:59 UTC"; console.log(document.cookie);

3) JSP 내장객체 사용하기

<%
	// 쿠키(쿠키명, 정보1, 정보2)
	Cookie cookieName = new Cookie("name", "product");
	
	// 쿠키 유효시간 정하기 -> 초
	cookieName.setMaxAge(60);
	
	// 쿠키를 클라이언트에게 심기
	response.addCookie(cookieName);

%>

JSP 의 세션과 쿠키 이용해서 장바구니 만들기

1) List

<%@page import="vo.ProductVO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="dao.ProductDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>product list</title>

<style>
	#container{
		width:1000px;
		margin: auto;
	}
	
	#img{
		width:200px;
		height:200px;
	}
	
	p{
		text-align : center;
	}
	
	.wrap{
		width: 200px;
		float: left;
		border: 1px solid blue;
	}
	
	.del{
		text-decoration: line-through;
		color: #aaaaaa;
	}
	
</style>

</head>
<body>
	<div id="container">
	<h1>목록</h1>
	<%
		ProductDAO dao = new ProductDAO();
		ArrayList<ProductVO> list = dao.selectAll();
		for(ProductVO vo : list){
	%>
		<div class="wrap">
			<a href="productDetail.jsp?pno=<%=vo.getPno()%>">
				<img src="<%=vo.getImgfile() %>" id="img" alt="<%=vo.getPname() %>"/>
			</a>
			<p><%= vo.getPname() %></p>
			<p class="del"><%=vo.getPrice() %></p>
			<p class="red">마감임박!!</p>
			<p><%=vo.getDcrateio() %>% 할인</p>
			<p>할인 가격 : <%=Math.round(vo.getPrice()*(1-vo.getDcrateio()*0.01)) %></p>
			<p>
				<input type="button" value="즉시구매" />
				<input type="button" value="장바구니" id="cart"/>	
							
			</p>
		</div>
	<%
		}
	%>
	
	</div>
</body>
</html>

2) Detail

<%@page import="vo.ProductVO"%>
<%@page import="dao.ProductDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Detail</title>
<style>
	@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

	.wrap{
		margin:auto;
		float: left;
		width: 50%;
		text-align: center;
	}
	#img{
		width:600px;
		height: 600px;
	}
	
	#detailImg{
		margin: 50px;
		width: 1000px;
		height: 600px;
	}
	
	#del{
		text-decoration: line-through;
		color : #aaaaaa;
	}
	#txt{
		font-size : 35px;
	}
	#red{
		font-size: 40px;
		color: red;
		font-weight: bolder;
	}
	
	button {
    	margin: 20px;
	}
	
	#btn{
		margin-top: 30px;
		margin-bottom: 25px;
	}
	
	.w-btn {
	    position: relative;
	    border: none;
	    display: inline-block;
	    padding: 15px 30px;
	    border-radius: 15px;
	    font-family: "paybooc-Light", sans-serif;
	    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	    text-decoration: none;
	    font-weight: 600;
	    transition: 0.25s;
	}

	.w-btn-blue {
	    background-color: #6aafe6;
	    color: #d4dfe6;
	    width: 250px;
	}
	
	.w-btn-blue  {
	    border: 3px solid #6aafe6;
	    color: #6e6e6e;
	}
	.w-btn-blue:hover {
		cursor : pointer;
	    background-color: #6aafe6;
	    color: #d4dfe6;
	}

	
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>

<script>
	

	$(function(){
		$("#buy").on("click", function(){
			console.log("하하")
			alert("재고 소진!");
		})
		

		window.setInterval("timer()", 1000);
		
		$("#basket").on("click", function(){
			document.frm.action="cart.jsp";
			document.frm.method="get";
			document.frm.submit();
		})
		
		$("#viewBasket").on("click", function(){
			document.frm.action="viewCart.jsp";
			document.frm.method="get";
			document.frm.submit();
		})
	})
	

		
	
	
	// 5분
	var t = 60*5;

	function timer(){
		t-=1;

		var min = Math.floor(t/60);
		var sec = t - (60*min);
		
		// timer 코드
		//console.log(min+" 분 "+sec + " 초 남음");
		var time = document.getElementById("timer");
		
		time.innerHTML = min+" 분 "+sec + " 초"
		
	}

</script>
</head>
<body>
	<!-- HTTP 쿠키 : 웹쿠키, 브라우저 쿠키 : 사용자의 웹 브라우저에전송하는 작은 데이터 조각 -->
	<%
		int pno = Integer.parseInt(request.getParameter("pno"));
		ProductVO vo = new ProductDAO().selectOne(pno);
		
		// id가 
	%>
	<form name="frm">
		<input type="hidden" name="no" value="<%=vo.getPno() %>" />
	</form>
	
	
	<h1><center>상품 설명</center></h1>
	<div id="container">
		<div class="wrap">
			<img src="<%=vo.getImgfile() %>" id="img"/>	
		</div>
		<div id="wrap">
			<div id="txt">
				<p>상품명 : <%=vo.getPname() %></p>
				<span id="del"><%=vo.getPrice() %></span>
				<span id="red">---> 올해 최고 할인! <%=vo.getDcrateio() %>%</span>
				<p>최종 할인가 : <%=Math.round((vo.getPrice() * (1-vo.getDcrateio()*0.01))) %> *배송비 별도</p>
				<p><%=vo.getProdesc() %></p>
				<p>제한된 수량! 남은 수량은 오직 <%=vo.getQty() %>개!!</p>
				<span>남은 시간 : </span>
				<span id="timer"></span>
				<div id="btn">
					<input class="w-btn w-btn-blue" id="buy" type="button" value="구매하기" />
					<input class="w-btn w-btn-blue" id="basket" type="button" value="장바구니" />
					<input class="w-btn w-btn-blue" id="viewBasket" type="button" value="장바구니 확인" />
				
				</div>
			</div>
			
			<script>
				$(function(){
					// 쿠키생성
					$.cookie("pno", <%=vo.getPno() %> , { expires : 3 });
				})
			

			</script>
		</div>
		
		<br><br><br><br>
		<div id="detailImg">
			<img src="<%=vo.getBifile() %>" />
		</div>
	</div>

	

	
</body>
</html>

3) cart

<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
 	// 세션에 cart 라는 이름의 속성 객체 얻어오기
 	Object obj = session.getAttribute("cart");
 
	// 마약 이런 객체가 없다면 생성
	if(obj == null){
		// 생성
		ArrayList<Integer> cart = new ArrayList<Integer>();
		
		// 세션에 속성으로 지정
		session.setAttribute("cart", cart);
		obj = session.getAttribute("cart");
	}
	
	// arraylist 로 형변환
	ArrayList<Integer> cart = (ArrayList<Integer>)obj;
	
	/* out.println("cart : "+ cart); */
	
	// cart 에 넘어온 pno 추가
	int pno = Integer.parseInt(request.getParameter("no"));
	cart.add(pno);
	
	out.println("cart : "+cart.toString());
 	
	// 다시 리다이렉트
	response.sendRedirect("productList.jsp");
 %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
</body>
</html>

4) viewCart

<%@page import="vo.ProductVO"%>
<%@page import="dao.ProductDAO"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@ 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>
<style type="text/css">
	table{
		border-top : 5px solid black;
		border-bottom : 5px solid black;
		margin : 0 auto;
		width : 800px;
	}
</style>
</head>
<body>
	<table>
		<tr>
			<th>상품번호</th>
			<th>상품명</th>
			<th>이미지</th>
			<th>수량</th>
			<th>가격</th>
		</tr>
		<%
			// 현재 세선에서 cart 속성 가져오기
			Object obj = session.getAttribute("cart");
			// null 이 아니라면 형변환
			if(obj != null){
				// 형변환
				ArrayList<Integer> list = (ArrayList<Integer>)obj;
				
				// HashMap<Integer, Integer> map 객체 생성
				HashMap<Integer, Integer> map = new HashMap<Integer, Integer>();
				
				// hashmap 을 사용해서 key : value 형태로 저장
				// 이때 map 에서 key 값이 k 인 상품이 존재한다면
				// 이미 저장되어져있떤 k 의 value 를 가져와서 +1
				// 만약 저장이 없었다고해도 +1
 				for(Integer k : list){
 					// map 이 k 라는 키를 포함하고 있다면
					if(map.containsKey(k)){
						map.put(k, map.get(k)+1);
					}
					else{
						// 포함하고 있지 않다면 1
						map.put(k, 1);
					}
				}
				//out.println(map.toString());
				
				// map 에서 key 값만 가져오기
				Set<Integer> set = map.keySet();
				
				// set 에서 값을 가져오기 위한 iterator 객체
				Iterator<Integer> it = set.iterator();
				
				while(it.hasNext()){
					int key = it.next();
					int cnt = map.get(key);
					
					// DB 에서 상품번호를 기준으로 vo 객체 생성
					ProductVO vo = new ProductDAO().selectOne(key);
					//out.println("<h1>"+vo.getPname()+" : "+map.get(key)+"</h1>");
				
		%>
			<tr>
				<td><%=vo.getPno() %></td>
				<td><%=vo.getPname() %></td>
				<td><img src="<%=vo.getImgfile() %>" width="200" height="200"></td>
				<td><%=cnt %></td>
				<td><%=cnt*Math.round((vo.getPrice() * (1-vo.getDcrateio()*0.01))) %></td>
			</tr>
		
		<%
				
				
				}
				
			}

		%>

	</table>
</body>
</html>

쿠키와 세션 개념잡기

사실 쿠키와 세션은 예전에 한번 정리한 적인 있지만...그래도 JSP 에서 공부하는 김에 다시 한번 더 적어보았습니다.

쿠키 Cookie

- 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일입니다.
- 사용자 인증이 유효한 시간을 명시할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다는 특징이 있습니다.
- 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다.
정리하자면 쿠키는 로컬에 저장되는 데이터 파일로 사용자 인증과 관련된 정보가 저장된다.

대표적으로는 방문 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"쇼핑몰의 장바구니 기능자동로그인, 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크, 쇼핑몰의 장바구니 등에서 사용된다 => 보안이 상관없는 곳에서 주로 사용

세션 Session

- 세션은 쿠키를 기반하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리합니다.
- 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지합니다.
- 사용자에 대한 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됩니다.
정리하자면 동접자 수가 많은 웹 사이트인 경우 서버에 과부하를 주게 되므로 성능 저하의 요인이 됩니다. 클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션 ID입니다.

대표적으로는 로그인 같이 보안상 중요한 작업을 수행할 때 사용한다.

Reference

https://interconnection.tistory.com/74

쿠키와 세션 개념

노션 페이지(아래 내용과 동일) 개요 쿠키와 세션은 개발자 말고도 인터넷 사용자라면 누구나 많이 들어본 단어입니다. 하지만 개념에 대해서는 많은 사람들이 헷갈려 하기에 쉽고

interconnection.tistory.com

저작자표시 비영리 동일조건

'JSP&Servlet' 카테고리의 다른 글

JSP & Servlet 다루기 (2) : servlet 등록하기, 값 받기, DB 연결하기 (0)	2022.05.29
JSP & Servlet 다루기 (1) : Tomcat, JSP, Servlet 개념, jsp 요청과 응답 처리 (0)	2022.05.26