[SPRING]#73 도서 쇼핑몰 구현 (타일즈 5)

타일즈 레이아웃 정의하기

이어서 계속 실습을 진행해보도록 하겠습니다.

모든 JSP 뷰 페이지에 타일즈 적용하기

tiles.xml

기본 템플릿을 적용할 모든 JSP 뷰 페이지를 타일즈 정의 파일에 추가로 작성해줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
  "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>
	<definition name="base-Template" template="/WEB-INF/tiles/layout/baseLayout.jsp">
		<put-attribute name="title" value="Sample Title"/>
		<put-attribute name="heading" value=""/>
		<put-attribute name="subheading" value=""/>
		<put-attribute name="menu" value="/WEB-INF/tiles/template/menu.jsp"/>
		<put-attribute name="content" value=""/>
		<put-attribute name="footer" value="/WEB-INF/tiles/template/footer.jsp"/>
	</definition>
	
	<definition name="welcome" extends="base-Template">
		<put-attribute name="title" value="Welcome"/>
		<put-attribute name="heading" value="도서 웹 쇼핑몰"/>
		<put-attribute name="subheading" value="Welcome to BookMarket"/>
		<put-attribute name="content" value="/WEB-INF/views/welcome.jsp"/>
	</definition>
	
	<definition name="books" extends="base-Template">
		<put-attribute name="title" value="Books"/>
		<put-attribute name="heading" value="도서 목록"/>
		<put-attribute name="subheading" value="Books List"/>
		<put-attribute name="content" value="/WEB-INF/views/books.jsp"/>
	</definition>
	
	<definition name="book" extends="base-Template">
		<put-attribute name="title" value="Book"/>
		<put-attribute name="heading" value="도서 정보"/>
		<put-attribute name="subheading" value="Book Details"/>
		<put-attribute name="content" value="/WEB-INF/views/book.jsp"/>
	</definition>
	
	<definition name="addBook" extends="base-Template">
		<put-attribute name="title" value="Books"/>
		<put-attribute name="heading" value="도서 등록"/>
		<put-attribute name="subheading" value="Book Addition"/>
		<put-attribute name="content" value="/WEB-INF/views/addBook.jsp"/>
	</definition>
	
	<definition name="login" extends="base-Template">
		<put-attribute name="title" value="Login"/>
		<put-attribute name="heading" value="로그인"/>
		<put-attribute name="subheading" value="Login"/>
		<put-attribute name="content" value="/WEB-INF/views/login.jsp"/>
	</definition>
	
	<definition name="cart" extends="base-Template">
		<put-attribute name="title" value="Shopping Cart"/>
		<put-attribute name="heading" value="장바구니"/>
		<put-attribute name="subheading" value="Shopping Cart"/>
		<put-attribute name="content" value="/WEB-INF/views/cart.jsp"/>
	</definition>
</tiles-definitions>

<definition> 요소의 템플릿 이름을 welcome, books, book, addBook, login, cart로 정의합니다.

이 때 템플릿 이름은 컨트롤러 내 요청 처리 메소드에서 반환되는 뷰 이름과 동일하게 작성해 줍니다.

extends 속성을 사용해서 base-Template 형식을 따릅니다.

<put-attribute> 요소를 사용해서 기본 템플릿 구성 내용을 변경합니다.

welcome.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>Welcome</title>
<link href="./resources/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="text-center">
			<h3>${strapline }</h3>
		</div>
	</div>
</body>
</html>

books.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<title>도서 목록</title>
</head>
<body>
	<div class="container">
		<div class="row" align="center">
			<c:forEach items="${bookList }" var="book">
				<div class="col-md-4">
					<c:choose>
						<c:when test="${book.getBookImage()==null }">
							<img src="<c:url value="C:\\upload\\${book.getBookId() }.png"/>" style="width:60%"/>
						</c:when>
						<c:otherwise>
							<img src="<c:url value="C:\\upload\\${book.getBookImage().getOriginalFilename() }"/>" style="width:60%"/>
						</c:otherwise>
					</c:choose>
					<h3>${book.name }</h3>
					<p>${book.author }
					<br>${book.publisher } | ${book.releaseDate }
					<p align="left">${fn:substring(book.description,0,100) }...
					<p>${book.unitPrice }원
					<p><a href="<c:url value="/books/book?id=${book.bookId }"/>" class="btn btn-Secondary" role="button">상세정보 &raquo;</a>
				</div>
			</c:forEach>
		</div>
	</div>
</body>
</html>

book.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<script src="${pageContext.request.contextPath }/resources/js/controllers.js"></script>
<title>도서 상세 정보</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<c:choose>
				<c:when test="${book.getBookImage()==null }">
					<img src="<c:url value="C:\\upload\\${book.getBookId() }.png"/>" style="width:100%"/>
				</c:when>
				<c:otherwise>
					<img src="<c:url value="C:\\upload\\${book.getBookImage().getOriginalFilename() }"/>" style="width:100%"/>
				</c:otherwise>
			</c:choose>
			<div class="col-md-8">
				<h3>${book.name }</h3>
				<p>${book.description }</p>
				<br/>
				<p><b>도서코드 : </b><span class="badge badge-info">${book.bookId }</span>
				<p><b>저자</b> : ${book.author }
				<p><b>출판사</b> : ${book.publisher }
				<p><b>출판일</b> : ${book.releaseDate }
				<p><b>분류</b> : ${book.category }
				<p><b>재고수</b> : ${book.unitsInStock }
				<h4>${book.unitPrice }원</h4>
				<br>
				<form:form name="addForm" method="put">
					<p><a href="javascript:addToCart('../cart/add/${book.bookId }')" class="btn btn-primary">도서주문 &raquo;</a>
					<a href="<c:url value="/cart"/>" class="btn btn-warning">장바구니 &raquo;</a>
					<a href="<c:url value="/books"/>" class="btn btn-secondary">도서 목록 &raquo;</a>
				</form:form>
			</div>
		</div>
	</div>
</body>
</html>

login.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<title>로그인</title>
</head>
<body>
	<div class="container col-md-4">
		<div class="text-center">
			<h3 class="form-signin-heading">Please login</h3>
		</div>
		<c:if test="${not empty error }">
			<div class="alert alert-danger">
				UserName과 Password가 올바르지 않습니다.<br/>
			</div>
		</c:if>
		<form class="form-signin" action="<c:url value="/login"/>" method="post">
			<div class="form-group row">
				<input type="text" name="username" class="form-control"
				placeholder="User Name" required autofocus>
			</div>
			<div class="form-group row">
				<input type="password" name="password" class="form-control"
				placeholder="Password" required>
			</div>
			<div class="form-group row">
				<button class="btn btn-lg btn-success btn-block" type="submit">로그인</button>
				<input type="hidden" name="${_csrf.parameterName }" value="${_csrf.token }"/>
			</div>
		</form>
	</div>
</body>
</html>

addBook.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=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="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<title>도서 등록</title>
</head>
<body>
	<div class="container">
		<div class="float-right">
			<form:form action="${pageContext.request.contextPath }/logout" method="POST">
				<input type="submit" class="btn btn-sm btn-success" value="Logout" />
			</form:form>
		</div>
		<div class="float-right" style="padding-right:30px">
			<a href="?language=ko">Korean</a>|<a href="?language=en">English</a>
		</div>
		<br><br>
		<form:form modelAttribute="NewBook" 
					action="./add?${_csrf.parameterName }=${_csrf.token }"
					class="form-horizontal"
					enctype="multipart/form-data">
		<fieldset>
		<legend><spring:message code="addBook.form.subtitle.label"/></legend>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.bookId.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="bookId" class="form-control"/>
			</div>
			<div class="col-sm-6">
				<form:errors path="bookId" cssClass="text-danger"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.name.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="name" class="form-control"/>
			</div>
			<div class="col-sm-6">
				<form:errors path="name" cssClass="text-danger"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.unitPrice.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="unitPrice" class="form-control"/>
			</div>
			<div class="col-sm-6">
				<form:errors path="unitPrice" cssClass="text-danger"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.author.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="author" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.description.label"/>
			</label>
			<div class="col-sm-5">
				<form:textarea path="description" cols="50" rows="2" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.publisher.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="publisher" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.category.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="category" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.unitsInStock.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="unitsInStock" class="form-control"/>
			</div>
			<div class="col-sm-6">
				<form:errors path="unitsInStock" cssClass="text-danger"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.releaseDate.label"/>
			</label>
			<div class="col-sm-3">
				<form:input path="releaseDate" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.condition.label"/>
			</label>
			<div class="col-sm-3">
				<form:radiobutton path="condition" value="New"/>New
				<form:radiobutton path="condition" value="Old"/>Old
				<form:radiobutton path="condition" value="E-Book"/>E-Book
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 control-label">
				<spring:message code="addBook.form.bookImage.label"/>
			</label>
			<div class="col-sm-7">
				<form:input path="bookImage" type="file" class="form-control"/>
			</div>
		</div>
		<div class="form-group row">
			<div class="col-sm-offset-2 col-sm-10">
				<input type="submit" class="btn btn-primary" value="<spring:message code="addBook.form.button.label"/>" />
			</div>
		</div>
		</fieldset>
		</form:form>
	</div>
</body>
</html>

cart.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title>Cart</title>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<script src="<c:url value="/resources/js/controllers.js"/>"></script>
</head>
<body>
<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">
		<table class="table table-hover">
		<tr>
			<th>도서</th>
			<th>가격</th>
			<th>수량</th>
			<th>소계</th>
			<th>비고</th>
		</tr>
	<form:form name="removeForm" method="put">
		<c:forEach items="${cart.cartItems }" var="item">
		<tr>
			<td>${item.value.book.bookId }-${item.value.book.name }</td>
			<td>${item.value.book.unitPrice }</td>
			<td>${item.value.quantity }</td>
			<td>${item.value.totalPrice }</td>
			<td><a href="javascript:removeFromCart('../cart/remove/${item.value.book.bookId }')"
			class="badge badge-danger">삭제</a></td>
		</tr>
		</c:forEach>
	</form:form>
		<tr>
			<th></th>
			<th></th>
			<th>총액</th>
			<th>${cart.grandTotal }</th>
			<th></th>
		</tr>
		</table>
		<a href="<c:url value="/books"/>" class="btn btn-secondary">&laquo; 쇼핑 계속하기</a>
	</div>
</div>
</body>
</html>

errorBook.jsp

다음과 같이 내용을 삭제합니다.

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<link href="<c:url value="/resources/css/bootstrap.min.css"/>" rel="stylesheet">
<title>예외 처리</title>
</head>
<body>
	<div class="jumbotron">
		<div class="container">
			<h2 class="alert alert-danger">
				해당 도서가 존재하지 않습니다.<br>
				도서 ID : ${invalidBookId }
			</h2>
		</div>
	</div>
	<div class="container">
		<p>${url }</p>
		<p>${exception }</p>
	</div>
	<div class="container">
		<p>
			<a href="<c:url value="/books"/>" class="btn btn-secondary">
			도서목록 &raquo;</a>
		</p>
	</div>
</body>
</html>

실행 결과

/BookMarket/home을 입력하면 다음과 같이 출력됩니다.

오른쪽 상단에 메뉴를 각각 선택하고 실행 결과를 확인해 보겠습니다.

'SPRING' 카테고리의 다른 글

[SPRING]#75 도서 쇼핑몰 구현 (타일즈 7) (0)	2024.03.01
[SPRING]#74 도서 쇼핑몰 구현 (타일즈 6) (0)	2024.03.01
[SPRING]#72 도서 쇼핑몰 구현 (타일즈 4) (0)	2024.02.25
[SPRING]#71 도서 쇼핑몰 구현 (타일즈 3) (0)	2024.02.25
[SPRING]#70 도서 쇼핑몰 구현 (타일즈 2) (0)	2024.02.25

'SPRING' 카테고리의 다른 글

티스토리툴바