내장객체와 속성관리 실습2

이번 실습에서는 쇼핑몰에서 기본적으로 필요한 장바구니 기능을 session 내장객체의 속성 관리 비법을 활용해 구현해 본다.

실습을 통해 여러 페이지에 걸쳐 유지되는 정보 관리에 대해 배우고 세션을 활용할 수 있다.

실습 내용

여러 페이지로 구성된 jsp 웹 페이지 설계
session 내장객의 속성관리 기법을 이용한 정보 공유

시작화면은 간단한 로그인 양식으로 출발한다. 별도의 비밀번호 체크는 없으며 이름을 입력하고 입장하는 구조 이다.

WebContent 폴더에 cart 폴더를 생성하 다음 다음과 같이 loginForm.html 파일을 생성 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div align="center">
	<H2>Login</H2>
	<form name="form1" method="POST" action="selProduct.jsp">
		<input type="text" name="username"/>
		<input type="submit" value="login"/>
	</form>
</div>
</body>
</html>

submit 버튼을 클릭하면 selProduct.jsp 를 호출한다.
로그인 이름의 name 속성은 username 으로 설정 한다.

실행 결과는 다음과 같다.

loginForm.html 실행결과

로그인후 상품을 보여주고 선택하는 화면 이다. 상품 목록은 <select>를 이용해 드롭다운 메뉴로 구성 했다. 상품을 선택하고 Add버튼을 누르면 cart.jsp 로 이동해 장바구니에 선택한 상품을 담게 된다.

로그인한 사용자 이름역시 세션에 저장하고 화면에 출력한다.

selProduct.jsp 파일을 생성후 기본 코드를 다음과 같이 작성한다. 입력한 사용자 이름을 가져와 세션에 저장하는 부분이다.

<%
	request.setCharacterEncoding("UTF-8");
	session.setAttribute("username",request.getParameter("username"));
%>

한글 이름 입력을 고려해 캐릭터셋을 설정한다.
request로 가지고온 사용자 이름을 session 에 저장한다.

상품 목록을 보여주고 선택하는 화면은 다음과 같다.

	<form name="form1" method="POST" action="cart.jsp">
		<SELECT name="product">
			<option>Apple</option>
			<option>Orange</option>
			<option>Pineapple</option>
			<option>Lemon</option>
			<option>Banana</option>
		</SELECT>
		<input type="submit" value="Add"/>
	</form>

간단한 form 으로 구성되며 특이사항은 없다.

사용자 이름 출력을 포함한 전체 코드는 다음과 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<title>Product select</title>
<meta charset="UTF-8">
<%
	request.setCharacterEncoding("UTF-8");
	session.setAttribute("username",request.getParameter("username"));
%>
<body>
<div align="center">
	<H2>Product List</H2>
	<HR>
	Welcome !! <%=session.getAttribute("username") %>
	<HR>
	<form name="form1" method="POST" action="cart.jsp">
		<SELECT name="product">
			<option>Apple</option>
			<option>Orange</option>
			<option>Pineapple</option>
			<option>Lemon</option>
			<option>Banana</option>
		</SELECT>
		<input type="submit" value="Add"/>
	</form>
	<a href="checkOut.jsp">Check Out</a>
</div>
</body>
</html>

cart.jsp 에서 상품 추가후 현재 페이지로 다시 돌아온다.
더이상 상품을 추가하지 않고 결재 화면으로 가려면 Check Out 버튼을 누른다.

실행을 위해서는 loginForm.html 을 먼저 실행한 다음 이름을 넣고 상품목록과 이름이 보이는지 확인해야 한다.

상품목록 실행결과

상품목록에서 선택한 상품은 cart.jsp 에서 session 을 이용해 저장된다. 장바구니는 여러 상품을 저장할 수 있어야 하기 때문에 보통 ArrayList 를 사용한다. 좀 더 복잡한 기능 구현을 위해서는 별도의 클래스를 만들고 장바구니 클래스 안에 상품 저장을 위한 ArrayList 를 두는것이 좋다.

cart.jsp 를 생성한다. 이 페이지는 별도의 화면 없이 장바구니에 상품을 저장하는 기능만 수행하므로 생성된 기본 구조에서 html 코드들은 모두 제거 한다.

먼저 useBean 액션을 이용해 ArrayList 객체를 session scope 에 생성한다.

<jsp:useBean id="productlist"  class="java.util.ArrayList" type="java.util.List<String>" scope="session"/>

만일 session 에 해당 객체가 있다면 기존 객체를 가지고 오고 없다면 새로 생성하게 된다.
ArrayList에 저장되는 값들은 String 타입으로 지정한다.

상품목록에서 선택한 상품정보는 request.getParameter() 를 통해 가지고 올 수 있다. 상품명을 가지고 온다음 ArrayList 에 추가 한다.

<%
	String productname = request.getParameter("product");
	productlist.add(productname);
%>

마지막으로 상품이 추가되었다는 메시지를 출력하고 이전 페이지로 되돌아가 다시 상품을 입력할 수 있도록 한다. 이 부분은 자바 스크립트로 구현했다. 자바 스크립트도 텍스트 형식으로 서블릿 코드로 변환될때 포함되기 때문에 스크립트 코드에 jsp 문법을 사용할 수 있다.

<script>
	alert("<%=productname %> added to cart !!");
	history.go(-1);
</script>

표현식을 이용해 상품명을 자바스크립트 alert() 에서 출력
history.go(-1)은 브라우저 히스토리 기능을 이용해 이전 화면으로 이동

실행 결과 상품이 추가되었다는 메시지가 보여지고 다시 입력화면으로 되돌아 가게 된다.

체크아웃은 장바구니 상품을 보여주고 주문을 완료 하는 화면이다. 여기서는 장바구니에 저장되어 있는 상품 이름들만 출력 한다.

checkOut.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>Check out</title>
</HEAD>
<body>
<div align="center">
<H2>Check Out</H2>
Selected products
<HR>

</body>
</html>

상품목록을 출력하기 위해서는 먼저 session에 저장된 ArrayList 를 가지고 와야 한다. useBean 액션을 사용하거나 스크립트릿을 이용해 직접 가져와도 된다.

먼저 스크립트릿을 이용한 코드 이다.

<%
	List<String> productlist = (List<String>)session.getAttribute("productlist");
	if(productlist.size() == 0) {
		out.println("Your cart is empty!!");
	}
	else {
		for(String productname:productlist) {
			out.println(productname+"<BR>");
		}
	}
%>

ArrayList 에 들어있는 값이 없다면 카트가 비어 있다고 출력한다.

useBean 액션과 JSTL을 사용하는 경우는 다음과 같다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
...
<jsp:useBean id="productlist"  class="java.util.ArrayList" type="java.util.List<String>" scope="session" />
<c:forEach items="${productlist}" var="p">
	${p} <br>
</c:forEach>

코드가 훨씬 간결한것을 알 수 있다.

만일 앞에서와 같이 장바구니가 비어 있을때 메시지 출력을 하려면 jstl functions 와 if 를 이용할 수 있다.

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<c:if test="${fn:length(productlist) == 0}">
	<h3>Your cart is empty!!</h3>
</c:if>

전체 구현 소스는 다음과 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Check out</title>
</HEAD>
<body>
<div align="center">
<H2>Check Out</H2>
Selected products
<HR>
<jsp:useBean id="productlist"  class="java.util.ArrayList" type="java.util.List<String>" scope="session" />

<c:if test="${fn:length(productlist) == 0}">
	<h3>Your cart is empty!!</h3>
</c:if>
<c:forEach items="${productlist}" var="p">
	${p} <br>
</c:forEach>
<hr>
<%--
	List<String> productlist = (List<String>)session.getAttribute("productlist");
	if(productlist.size() == 0) {
		out.println("<h3>Your cart is empty!!</h3>");
	}
	else {
		for(String productname:productlist) {
			out.println(productname+"<BR>");
		}
	}
--%>
</div>
</body>
</html>

주석 부분의 스크립트릿 코드도 함께 실행해 보려면 "–" 를 제고 하고 앞에 useBean 이 있으므로 List<String> productlist ... 라인을 주석처리 해야 한다.

실행결과는 다음과 같다.

Checkout 실행결과