티스토리 뷰

코딩/spring

[17주 4일차] 스프링 웹 플로우 : 주문 처리 페이지 만들기 (2)

ehzim 2024. 2. 1. 14:26

Chapter15. 스프링 웹 플로우 : 주문 처리 페이지 만들기

 

 

 

 

15.2.3 웹 플로우 적용을 위한 환경 설정하기

 

 

pom.xml

  <!-- Web Flow-->
  <dependency>
      <groupId>org.springframework.webflow</groupId>
      <artifactId>spring-webflow</artifactId>
      <version>2.5.1.RELEASE</version>
  </dependency>

 

 

 

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans
   xmlns="http://www.springframework.org/schema/mvc"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns:beans="http://www.springframework.org/schema/beans"
   xmlns:context="http://www.springframework.org/schema/context"
   xmlns:webflow="http://www.springframework.org/schema/webflow-config"
   xsi:schemaLocation="http://www.springframework.org/schema/mvc 
   http://www.springframework.org/schema/mvc/spring-mvc.xsd
      http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/context 
      http://www.springframework.org/schema/context/spring-context.xsd
      http://www.springframework.org/schema/webflow-config 
      http://www.springframework.org/schema/webflow-config/spring-webflow-config.xsd">
<!-- 15.2.3 웹 플로우 환경 설정 -->
<webflow:flow-registry id="flowRegistry">
    <webflow:flow-location path="/WEB-INF/flows/order/order-flow.xml" id="order"/>
</webflow:flow-registry>

<webflow:flow-executor id="flowExecutor" flow-registry="flowRegistry" />

<beans:bean id="flowHandlerMapping" class="org.springframework.webflow.mvc.servlet.FlowHandlerMapping">
    <beans:property name="flowRegistry" ref="flowRegistry" />
</beans:bean>

<beans:bean id="flowHandlerAdapter" class="org.springframework.webflow.mvc.servlet.FlowHandlerAdapter">
    <beans:property name="flowExecutor" ref="flowExecutor" />
</beans:bean>

 

 

 

 

15.3.8 주문 처리를 위한 웹 플로우 정의 파일 만들기

 

 

 

 

order-flow.xml

<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.springframework.org/schema/webflow
      http://www.springframework.org/schema/webflow/spring-webflow.xsd">

<var name="order" class="com.springmvc.domain.Order" />  
    
	<action-state id="addCartToOrder">
		<evaluate expression="cartServiceImpl.validateCart(requestParameters.cartId)" result="order.cart"/>
		<transition to="orderCartWarning" on-exception="com.springmvc.exception.CartException" />
		<transition to="orderCustomerInfo" />
	</action-state>
	
	<view-state id="orderCustomerInfo" model="order">
		<transition on="customerInfo" to="orderShippingInfo" />
	</view-state>
	
	<view-state id="orderShippingInfo" model="order">
		<transition on="shippingInfo" to="orderConfirmation" />
		<transition on="backToCustomerInfo" to="orderCustomerInfo" />
	</view-state>
	
	<view-state id="orderConfirmation">
		<transition on="orderConfirmed" to="confirmOrder" />
		<transition on="backToShippingInfo" to="orderShippingInfo" />
	</view-state>
	
	<action-state id="confirmOrder">
		<evaluate expression="orderServiceImpl.saveOrder(order)" result="order.orderId" />
		<transition to="orderFinished" />
	</action-state>
	
	<view-state id="orderCartWarning">
		<transition to="endState" />
	</view-state>
	
	<view-state id="orderFinished" model="order">
		<transition to="endState" />
	</view-state>
	
	<end-state id="endState"/>
	
	<end-state id="orderCancelled" view="orderCartWarning.jsp" />
	
	<global-transitions>
		<transition on="cancel" to="endState" />
	</global-transitions>
	
</flow>

 

 

 

 

 

15.3.9 주문 처리를 위한 웹 플로우 페이지 작성하기

 

 

orderCustomerInfo.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>      
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet" />
<title>Customer</title>
</head>
<body>
<nav class="navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./home">Home</a>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">고객정보</h1>
	</div>
</div>

<div class="container">
	<form:form modelAttribute="order.customer" class="form-horizontal">
	<fieldset>
	<legend>고객 세부 사항</legend>
	<div class="form-group row">
		<label class="col-sm-2 control-label">고객 ID</label>
		<div class="col-sm-3">
			<form:input path="customerId" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">성명</label>
		<div class="col-sm-3">
			<form:input path="name" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">전화번호</label>
		<div class="col-sm-3">
			<form:input path="phone" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">국가명</label>
		<div class="col-sm-3">
			<form:input path="address.country" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">우편번호</label>
		<div class="col-sm-3">
			<form:input path="address.zipCode" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">주소</label>
		<div class="col-sm-5">
			<form:input path="address.addressName" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">세부주소</label>
		<div class="col-sm-3">
			<form:input path="address.detailName" class="form-control" />
		</div>
	</div>
	<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey }"/>
	<div class="form-group row">
		<div class="col-sm-offset-2 col-sm-10">
			<input type="submit" class="btn btn-primary" value="등록" name="_eventId_customerInfo" />
			<button class="btn btn-default" name="_eventId_cancel">취소</button>
		</div>
	</div>
	</fieldset>
	</form:form>
</div>
</body>
</html>

 

 

 

orderShippingInfo.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<title>Shipping</title>
</head>
<body>
<nav class="navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./home">Home</a>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">배송정보</h1>
	</div>
</div>

<div class="container">
	
	<form:form modelAttribute="order.shipping" class="form-horizontal">
	<fieldset>
	<legend>배송 세부 사항</legend>
	<div class="form-group row">
		<label class="col-sm-2 control-label">성명</label>
		<div class="col-sm-3">
			<form:input path="name" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">배송일</label>
		<div class="col-sm-3">
			<form:input path="date" class="form-control" /> (yyyy/mm/dd)
		</div>
		<div class="col-sm-6">
			<form:errors path="date" cssClass="text-danger" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">국가명</label>
		<div class="col-sm-3">
			<form:input path="address.country" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">우편번호</label>
		<div class="col-sm-3">
			<form:input path="address.zipCode" class="form-control" />
		</div>
	</div>	
	<div class="form-group row">
		<label class="col-sm-2 control-label">주소</label>
		<div class="col-sm-5">
			<form:input path="address.addressName" class="form-control" />
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 control-label">세부주소</label>
		<div class="col-sm-3">
			<form:input path="address.detailName" class="form-control" />
		</div>
	</div>
	<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey }"/>
	<div class="form-group row">
		<div class="col-sm-offset-2 col-sm-10">
			<button class="btn btn-default" name="_eventId_backToCustomerInfo">이전</button>
			<input type="submit" class="btn btn-primary" value="등록" name="_eventId_shippingInfo" />
			<button class="btn btn-default" name="_eventId_cancel">취소</button>
		</div>
	</div>			
	</fieldset>
	</form:form>
</div>
</body>
</html>

 

 

 

 

messages.properties

...
typeMismatch=\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uB0A0\uC9DC\uC785\uB2C8\uB2E4. (yyyy/mm/dd \uD615\uC2DD\uC73C\uB85C \uC785\uB825\uD558\uC138\uC694.)

 

 

 

 

orderConfirmaion.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>  
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<title>Order</title>
</head>
<body>
<nav class="navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./home">Home</a>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">주문정보</h1>
	</div>
</div>

<div class="container">
	<form:form modelAttribute="order" class="form-horizontal">
		<div class="well col-md-9 col-md-offset-2" style="background:#fafafe; padding:20px">
			<div class="text-center">
				<h1>영수증</h1>
			</div>
		<div class="row">
			<div class="col-md-6">
				<address>
					<strong>배송 주소</strong><br>
					성명 : ${order.shipping.name }<br>
					우편번호 : ${order.shipping.address.zipCode }<br>
					주소 : ${order.shipping.address.addressName } ${order.shipping.address.detailName } (${order.shipping.address.country })<br>
				</address>
			</div>
			<div class="col-md-6 text-right">
				<p><em>배송일 : <fmt:formatDate type="date" value="${order.shipping.date }"/></em></p>
			</div>
		</div>	
		<div class="row">
			<div class="col-md-8">
				<address>
					<strong>청구 주소</strong><br>
					성명 : ${order.customer.name }<br>
					우편번호 : ${order.customer.address.zipCode }<br>
					주소 : ${order.customer.address.addressName } ${order.customer.address.detailName } (${order.customer.address.country })<br>
					HP : ${order.customer.phone }<br>
				</address>
			</div>
		</div>
		<div class="row">
			<table class="table table-hover">
				<thread>
				<tr><th>도서</th>
				<th>#</th>
				<th class="text-center">가격</th>
				<th class="text-center">소계</th>
				</tr>
				</thread>
				<tbody>
					<c:forEach var="cartItem" items="${order.cart.cartItems }">
					<tr>
					<td><em>${cartItem.value.book.name }</em></td>
					<td style="text-align:center">${cartItem.value.quantity }</td>
					<td class="text-center">${cartItem.value.book.unitPrice }원</td>
					<td class="text-center">${cartItem.value.totalPrice }원</td>
					</tr>
					</c:forEach>
					<tr>
					<td></td>
					<td></td>
					<td class="text-right"><h5><strong>총액 : </strong></h5></td>
					<td class="text-center text-danger"><h4><strong>${order.cart.grandTotal }</strong></h4></td>
					</tr>
				</tbody>
			</table>
			<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey }" />
			<button class="btn btn-default" name="_eventId_backToShippingInfo">이전</button>
			<button type="submit" class="btn btn-success" name="_eventId_orderConfirmed">주문완료</button>
			<button class="btn btn-default" name="_eventId_cancel">취소</button>
		</div>	
		</div>
	</form:form>
</div>
</body>
</html>

 

 

 

 

orderFinished.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>     
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<title>Thank you</title>
</head>
<body>
<nav class="navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./home">Home</a>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">주문완료</h1>
	</div>
</div>
<div class="container">
	<h2 class="alert alert-danger">주문해 주셔서 감사합니다.</h2>
	<p>주문은 <fmt:formatDate type="date" value="${order.shipping.date }" />에 배송될 예정입니다!</p>
	<p>주문번호 : ${order.orderId }</p>
</div>
<div class="container">
	<p><a href="<c:url value="/books"/>" class="btn btn-primary">&laquo; 도서목록</a></p>
</div>
</body>
</html>

 

 

 

orderCartWarning.jsp

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="<c:url value="/resources/css/bootstrap.min.css"/>"rel="stylesheet" />
<title>Thanks you</title>
</head>
<body>
<nav class="navbar-expand navbar-dark bg-dark">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="./home">Home</a>
		</div>
	</div>
</nav>

<div class="jumbotron">
	<div class="container">
		<h1 class="display-3">주문취소</h1>
	</div>
</div>
<div class="container">
	<h2 class="alert alert-danger">주문을 취소하였습니다.</h2>
</div>
<div class="container">
	<p><a href="<c:url value="/books"/>" class="btn btn-primary">&laquo; 도서목록</a></p>
</div>
</body>
</html>

 

 

 

 

 

cart.jsp

	<div class="container">
		<div>
			<form:form name="clearForm" method="delete">
				<a href="javascript:clearCart()" class="btn btn-danger pull-left">삭제하기</a>
			</form:form>
			<a href="<c:url value="/order?cartId=${cartId }"/>" class="btn btn-success float-right">주문하기</a>
		</div>
		<div style="padding-top : 50px">

 

 

 

 

저작자표시

'코딩 > spring' 카테고리의 다른 글

[18주 1일차] 데이터베이스 연동 : 도서 목록 CRUD 처리하기  (1) 2024.02.05
[17주 4일차] 스프링 웹 플로우 (2)  (0) 2024.02.01
[17주 3일차] 스프링 웹 플로우 (1)  (0) 2024.01.31
[17주 3일차] 스프링 웹 플로우 : 주문 처리 페이지 만들기  (0) 2024.01.31
[17주 3일차] RESTful 웹 서비스 (2)  (0) 2024.01.31
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday