CRUD with Spring MVC & Hibernate

8. Create view

Web directory structure

The structure of our desired view is shown below. For any other page (e.g. “search category” page) can be added here.
Snap 2013-12-31 at 18.37.52
For this example, I use Bootstrap as the main CSS style (http://getbootstrap.com/). Download and extract the img/, css/, and js/ folder to resources folder.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<title>Category List</title>
    <link type="text/css"
    href="<c:url value="/resources/css/bootstrap.css"/>" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
            <nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
    <li><a href="<c:url value="/"/>">Home</a></li>
    <li><a href="<c:url value="/category/"/>">Category</a></li>
    <li><a href="<c:url value="/product/"/>">Product</a></li>
</ul>
</nav></div>
</div>
<div class="container">
<div class="row">
<h1>Category List</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Category</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
                    <c:forEach items="${categories}" var="category">
<tr>
<td>${category.categoryId}</td>
<td>${category.categoryName}
<i>${category.categoryDescription}</i></td>
<td><a
                                href="<c:url value="/category/edit/${category.categoryId}"/>">Edit</a></td>
<td><a
                                href="<c:url value="/category/delete/${category.categoryId}"/>">Delete</a></td>
</tr>
</c:forEach></tbody>
</table>
<a href="<c:url value="/category/add"/>">Add new category</a></div>
</div>
</body>
</html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page session="false"%>

<html>
<head>
<title>Add new category</title>
    <link type="text/css"
    href="<c:url value="/resources/css/bootstrap.css"/>" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
            <nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
    <li><a href="<c:url value="/"/>">Home</a></li>
    <li><a href="<c:url value="/category/"/>">Category</a></li>
    <li><a href="<c:url value="/product/"/>">Product</a></li>
</ul>
</nav></div>
</div>
<div class="container">
<div class="row">
<h1>Add new category</h1>
<form:form action="addConfirm" method="post"
                commandName="categoryBean" cssClass="form-horizontal">
<div class="form-group">
                    <label for="categoryName">Category Name</label>
                    <form:input path="categoryName" id="categoryName" /></div>
<div class="form-group">
                    <label for="categoryDescription">Category Description</label>
                    <form:textarea path="categoryDescription" id="categoryDescription" /></div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-success">Submit</button></div>
</form:form></div>
</div>
</body>
</html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page session="false"%>

<html>
<head>
<title>Edit category</title>
    <link type="text/css"
    href="<c:url value="/resources/css/bootstrap.css"/>" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
            <nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
    <li><a href="<c:url value="/"/>">Home</a></li>
    <li><a href="<c:url value="/category/"/>">Category</a></li>
    <li><a href="<c:url value="/product/"/>">Product</a></li>
</ul>
</nav></div>
</div>
<div class="container">
<div class="row">
<h1>Edit Category</h1>
<form:form action="editConfirm" method="post"
                commandName="categoryEdit" cssClass="form-horizontal">
                <form:hidden path="categoryId" id="categoryId" />
<div class="form-group">
                    <label for="categoryName">Category Name</label>
                    <form:input path="categoryName" id="categoryName" /></div>
<div class="form-group">
                    <label for="categoryDescription">Category Description</label>
                    <form:textarea path="categoryDescription" id="categoryDescription" /></div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-success">Save</button></div>
</form:form></div>
</div>
</body>
</html>
Advertisements

3 thoughts on “CRUD with Spring MVC & Hibernate

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s