JSP

[JSP]Cookie로 간단한 쇼핑몰 만들기 예제

MoZZANG 2022. 5. 3. 19:11

 

CookieExamIndex.jsp
<%@page import="java.util.Vector"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	//요청 헤더에서 쿠키값 읽기
	Cookie[] cookies=request.getCookies();
	//상품 코드값을 담을 컬렉션
	List cart = new Vector();
	//아이디 저장용
	String username="";
	if(cookies !=null){
		for(Cookie cookie:cookies){
			//쿠키명 얻기
			String name=cookie.getName();
			//쿠키값 얻기
			String value=cookie.getValue();
			//장바구니용
			if(name.indexOf("product") != -1) cart.add(value);
			//아이디 저장용
			if("USER_ID".equals(name)) username=value;
			
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CookieExamIndex.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
  /*점보트론 세로폭 줄이기*/
  .jumbotron {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .custom-control-label{
  	margin-right:.8rem;
  }
</style>
</head>
<body>
	<div class="jumbotron jumbotron-fluid bg-warning">
	    <div class="container-fluid">
	      <h1>쿠키 예제</h1>      
	    </div><!--container-fluid-->
  	</div><!--jumbotron-fluid--> 
  	<div class="container">    
    	<fieldset class="form-group border p-3">
    		<legend class="w-auto p-3">장바구니 예제</legend>
    		<form action="CookieExamCartProcess.jsp">
    		<div class="form-group">
				
					<div class="d-flex">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product1" id="product1" <%if(cart.contains("product1")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product1">상품1</label>
						</div>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product2" id="product2" <%if(cart.contains("product2")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product2">상품2</label>
						</div>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product3" id="product3" <%if(cart.contains("product3")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product3">상품3</label>
						</div>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product4" id="product4" <%if(cart.contains("product4")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product4">상품4</label>
						</div>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product15" id="product15" <%if(cart.contains("product15")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product15">상품15</label>
						</div>
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="cart" value="product190" id="product190" <%if(cart.contains("product190")){%>  disabled <%} %>>
							<label class="custom-control-label" for="product190">상품190</label>
						</div>
						<input type="submit" value="장바구니 담기" class="btn btn-info"/>
					</div>
				</div>
			</form>
			<form action="CookieExamCartEmpty.jsp">
				<input type="submit" value="장바구니 비우기" class="btn btn-info"/>
			</form>
			<hr/>
			<a href="CookieExamCartShow.jsp" class="btn btn-info">장바구니 보기</a>
    	</fieldset>
    	<hr/>
    	<span class="font-weight-bold text-danger mb-2"><%=request.getAttribute("ERROR")==null?"":request.getAttribute("ERROR")%></span>
    	<fieldset class="form-group border p-3">
    		<legend class="w-auto p-3">아이디 저장 예제</legend>
    		<% if(session.getAttribute("USER_ID") ==null){ %>
    		<form class="form-inline" action="CookieExamLoginProcess.jsp" method="POST">
    			<label>아이디</label>
    			<input type="text" name="id" class="form-control mx-2" value="<%=request.getParameter("id")==null?username:request.getParameter("id") %>"/>
    			
    			<label>비밀번호</label>
    			<input type="password" name="pwd" class="form-control mx-2"  value="<%=request.getParameter("pwd")==null?"":request.getParameter("pwd") %>"/>
    			<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" name="id-save" value="Y" id="id-save" <%if(username.length()!=0){ %>checked<%} %>>
					<label class="custom-control-label" for="id-save" >아이디 저장</label>
				</div>
    			<input type="submit" class="btn btn-danger mx-2" value="로그인"/>
    		</form> 
    		<%}else{ %>    		
    		<a href="CookieExamLogout.jsp" class="btn btn-info">로그아웃</a> 	
    		<%} %>	
    	</fieldset>
  	</div><!-- container -->
</body>
</html>

▲ 상품을 선택하고 장바구니 담기를 하면 다시 Index페이지로 돌아와서 선택한 상품들은 disabled처리해주고, 장바구니 비우기를 하였을 때는 장바구니에 담았던 것들을 지워주고 Index페이지로 다시돌아온다. 또한 장바구니 보기버튼을 누르면 장바구니에 담긴 것들이 보이는 페이지로 이동하게 만들 것이다.

 

아이디와 비밀번호를 입력했는지 유효성 체크하고 로그인전에 아이디저장 체크박스에 체크를 해주고 로그인하면 아이디 input에 아이디가 계속 남아있도록 만들것이다.

 

 

 

CookieExamCartProcess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- CookieExamCartProcess.jsp -->
<%@ include file="/Common/Validate.jsp" %>
<%
	//장바구니에 담을 상품 코드 받기
	String[] codes=request.getParameterValues("cart");
	if(!isValidate(out, codes,1)) return;
	//상품코드를 쿠키로 저장.즉 사용자 브라우저에 상품코드 저장
	for(String code:codes){
		Cookie cookie = new Cookie(code,code);
		cookie.setPath(request.getContextPath());
		//응답헤더에 설정
		response.addCookie(cookie);
	}
	//상품 목록페이지로 이동
	response.sendRedirect("CookieExamIndex.jsp");

%>

▲상품을 최소1개 선택하게 만들고 선택하면 쿠키에 저장한다. 그리고는 sendRedirect로 Index페이지로 돌아가서 선택한 상품들은 disabled처리 된다.

 

 

 

CookieExamCartEmpty.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- CookieExamCartEmpty.jsp -->
<%
//[장바구니 비우기-쿠키 삭제]
Cookie[] cookies=request.getCookies();    
if(cookies !=null){
for(Cookie cookie:cookies){
//쿠키명 얻기
String name=cookie.getName();
//쿠키값 얻기
String value=cookie.getValue();
//장바구니용
if(name.indexOf("product") != -1){ 
//쿠키 삭제 처리]
//1]동일한 쿠키명으로 쿠키 생성,쿠키값은 빈 문자열로
Cookie cook = new Cookie(name,"");
cook.setPath(request.getContextPath());
//2]유효기간은 0이나 -값으로 설정
cook.setMaxAge(0);
//3]다시 응답헤더에 추가
response.addCookie(cook);
}
}
}///
//상품 목록페이지로 이동
response.sendRedirect("CookieExamIndex.jsp");

%>

▲장바구니 비우기시 저장되있던 쿠키들을 삭제한다.

 

 

 

 

CookieExamCartShow.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	private String getProductName(String code){
		return code.replace("product","상품");	
	}////////////
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CookieExamCartShow.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
  /*점보트론 세로폭 줄이기*/
  .jumbotron {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
</style>
</head>
<body>
	<div class="jumbotron jumbotron-fluid bg-warning">
	    <div class="container-fluid">
	      <h1>장바구니</h1>      
	    </div><!--container-fluid-->
  	</div><!--jumbotron-fluid--> 
  	<div class="container">    
    	<fieldset class="form-group border p-3">
    		<legend class="w-auto p-3">장바구니에 담은 상품들</legend>
    		<ul class="list-unstyled">
    			<%
    			//요청 헤더에서 쿠키값 읽기
    			Cookie[] cookies=request.getCookies();
    			
    			if(cookies !=null){
    				for(Cookie cookie:cookies){
    					//쿠키명 얻기
    					String name=cookie.getName();
    					//쿠키값 얻기
    					String value=cookie.getValue();
    					//장바구니용
    					if(name.indexOf("product") != -1) 
    						out.println(String.format("<li>%s</li>",getProductName(value)));
    					
    				}
    			}
    			
    			
    			%>    		
    		</ul>
    		<a href="CookieExamIndex.jsp" class="btn btn-info">계속 쇼핑하기</a>
    	</fieldset>
  	</div><!-- container -->
</body>
</html>

 

 

CookieExamLoginProcess.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- CookieExamLoginProcess.jsp -->
<%
	//사용자 입력값 받기
	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	String idSave = request.getParameter("id-save");
	//아뒤가 KIM이고 비번이 1234면 회원이라고 가정]	
	if("KIM".equals(id.trim()) && "1234".equals(pwd) ){//회원
		//1.로그인 처리]-세션영역에 속성(주로 식별자만(아이디만)) 저장
		session.setAttribute("USER_ID", id);
		session.setAttribute("USER_PWD", pwd);
		//아이디저장 체크 여부 판단
		if(idSave !=null){//체크 한 경우-아이디를 쿠키에 저장
			Cookie cookie = new Cookie("USER_ID",id);
			cookie.setPath(request.getContextPath());
			response.addCookie(cookie);			
		}
		else{//체크 안 한 경우-저장된 쿠키 삭제
			Cookie cookie = new Cookie("USER_ID","");
			cookie.setPath(request.getContextPath());
			cookie.setMaxAge(-1);
			response.addCookie(cookie);
		}
		//2.로그인 처리후 CookieExamIndex.jsp로 이동
		response.sendRedirect("CookieExamIndex.jsp");
	}
	else{//아이디 비번 불일치
		//리퀘스트 영역에 필요한 데이터 저장
		request.setAttribute("ERROR", "아이디/비번 불일치");
		//포워드로 이동
		request.getRequestDispatcher("CookieExamIndex.jsp").forward(request, response);
	}



%>

 

▲로그인을 하면 위와같이 로그아웃 버튼만이 보이게 된다.

 

 

 

 

CookieExamLogout.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- CookieExamLogout.jsp -->
<%
	//로그아웃 처리-]-세션영역에 저장된 속성 삭제	
	//방법1]
	//session.removeAttribute("USER_ID");	
	//session.removeAttribute("USER_PWD");	
	//방법2]
	session.invalidate();
	//로그아웃 처리후 로그인 페이지로 이동
	response.sendRedirect("CookieExamIndex.jsp");
%>

 

'JSP' 카테고리의 다른 글

[JSP]Action Tag  (0) 2022.05.03
[JSP]session  (0) 2022.05.03
[JSP]Cookie  (0) 2022.05.03
[JSP] 내장객체의 영역  (0) 2022.05.02
[JSP]application 객체  (0) 2022.05.02

'JSP'의 다른글

  • 현재글[JSP]Cookie로 간단한 쇼핑몰 만들기 예제

관련글

댓글

티스토리툴바