E Commerce Website ( 1 )
T HE J AVA S ERVER P AGES S TANDARD T AG L IBRARY (JSTL) J AVA D ATABASE C ONNECTIVITY (JDBC) PAGE VIEWS AND CONTROLLER SERVLET
10
DATABASE CONNECTIVITY
A DDING S AMPLE D ATA 10 C ONNECTION P OOL AND D ATA S OURCE 10
ENTITY CLASSES AND SESSION BEANS
11 MVC D IAGRAM 11
E NTITY C LASSES 11 S ESSION B EANS 11
11
SESSION MANAGEMENT
11
SESSION DATA HANDLING
12
CLIENT AND SERVER-‐SIDE VALIDATION
C LIENT S IDE 12 S ERVER S IDE 12
12
USE CASE SCENARIO
TESTING
13 T EST P LAN 13
T EST R ESULTS 13
Index Page
Cart Page
Confirmation Page
Location Files Ecommerce/Web Pages
Contains Web pages
Ecommerce/Web Pages/css
Contains Stylesheet
Ecommerce/Web Pages/img
Contains Images
Ecommerce/Web Pages/js
Contains Java Script
Ecommerce/Web Pages/jspf
Contains Header and Footer Code Snippets
Ecommerce/Web Pages/test
Contains Test Code and Test files
Ecommerce/Web Pages/index.jsp
Contains Index file (Default Page)
Ecommerce/Source Packages/cart
Contains Cart Servlet
Ecommerce/Source Packages/controller
Contains Controller Servlet
Ecommerce/Source Packages/entity
Contains Entity Servlets
Ecommerce/Source Packages/filter
Contains Timeout Servlet
Ecommerce/Source Packages/session
Contains Session facades
Ecommerce/Source Packages/validate
Contains Validation Servlets
Data modeling
Date model defines different entities of a database and their structure, how they connect and relate to each other. The first process includes identifying these entities from the use case scenario. The Entities that were recognized for this scenario are :
Technologies Used
HTML, CSS, and JavaScript technologies
HTML is used by all the jsp pages, to support a very wide range of browsers. As browsers are able to read and convert them into visible web pages so it is important for the jsp pages to give their output in html.
CSS styling sheet is also used in this web application to give style to different elements in each page. It also defines the body and overall layout of the webpage.
Javascript is basically used during the client side validation of the web application, which includes using a validation plugin in the Jquery core library jquery-‐1.4.2.js
Query language called JPQL (Java persistence Querry Language). This helps the application to remain portable across many database vendors.
The JavaServer Pages Standard Tag Library (JSTL)
JSTL is used in this website to populate the data tables of different categories and different products, The JSTL <for: each> loop is used for such processes, it is much easier to use than to manually give each element database link and populate a product table.
Java Database Connectivity (JDBC)
JDBC is used in this website as the core API form which MySql Database is accessed, it provides a standard syntax for connectivity to each database, First the Database was created and then JDBC drivers were installed. Then Testing was also done so that the database data can be viewed from the jsp page.
Page Views and Controller Servlet
Page views are the pages which will be used by the customer to display the content in any browser, They are the html files which will be rendered by the browsers, The servlets are the java files which are processed by the server and gives its results to the jsp files which then display these results as html to the user.
First all the jsp files are created, like index.jsp, cart.jsp, category.jsp, checkout.jsp, confirmation.jsp. these files represent all the pages user needs to visit for performing a purchase from this website.
by the customer when a product is ordered.
Adding Sample Data
Sample data is added by using the gui provided by the net beans IDE for the MySQL database, This data includes defining categories and products for the category and product list in the website.
The Four Categories Includes :
• Microsoft • Adobe • Apple • Antivirus
All the products related the these companies are also added in the database.
Connection Pool and Data Source
This is the process in which we will connect the database to the website through the glassfish server. This connectivity is done with the help of Java Database
Connectivity (JDBC) API. Whenever we need to access the database by a java application, we have to first setup a connection pool. This pool maintains a pool of connection to the database, which contains reusable connection to a particular database.
A Data source is a JDBC Data Resource which provides the application a way of connecting to the database. The application is provided a connection from the
Entity Classes
Entity classes are generated using the “Entity classes from Database” wizard. Each entity class is like a table in the database, Instances of the entity classes can
be created to represent the records that need to be saved. For example the and Instance of the entity class Customer is made by the Ordermanager class, which uses it to save customer data to the database.
Session Beans
Session beans represent the encapsulation of the business logic of the application, these can be represent as either façade classes that use CRUD(Create Read Update Delete) to access the database.
Session Management
The shopping cart facility needs to remember the data of the cart, as user navigates through the website, Therefore we as a developer need to take care of cart data generated by the user so that it retains the information after the user navigates to other pages, another reason to manage this data is so that when more than one user updates the cart the information from both the users should not be confused with each other.
Session Data Handling
validation in this website is done by the help of Validator class, The ControlerServlet creates an object of validator class and calls the validateForm method for the user data.
Use Case Scenario
The customer goes to the website and visits the home page, Then selects a product category, After the category selection customer adds a product to the shopping cart. Customer browses through different categories and selects several other products to the cart. Then customer clicks on “View Cart” option and updates the product quantities in the view cart page. Customer then checks the contents of the cart and verifies the costs of the items. Then customer reaches the checkout page, Then He or She checks to total cost of the order which includes the delivery charge, Then the customer fills in the personal data and submits the details. Then the customer is redirected to the confirmation page which provides the customer with a unique id and details about the purchased order.
“View Cart” Option is selected Quantities of different products are updated.
/Ecommerce/updateCart
Shopping cart is validated and checked by the customer and
/Ecommerce/checkout
customer proceeds to the checkout page Then the customer checks the total amount and fills in his
/Ecommerce/purchase
personal details and bank details. The order is processed and customer is taken to a
(n/a)
confirmation page. The confirmation page provides a unique reference number for tracking the customer order, as well as a summary of the order.
Test Results
These are the test results for the heap generated during the Runtime of the web application.
With the number of website currently developed, it is necessary to learn these new technologies which enable easy and reliable website development. This website introduced me to many new technologies like JSP and Servlets, I also learned to use MySql and JDBC Drivers for my web application connectivity.
I also learned about Business Data implementation which takes place within high end business web applications, I was also introduced to Design Patterns like MVC in a new perspective.
A website can be valuable to any business because it represents the online presence of the business and attracts user from the internet. So, Websites should
be planned developed and promoted in a proper way.
Refrences
Singh, I, Johnson, M. (2002). Designing Enterprise Applications with the J2EE Platform . London: Addison-Wesley.
odesido, I. (2009). What is front-end development?. Available: http://www.theguardian.com/help/insideguardian/2009/sep/28/blogpost?comme ntpage=1. Last accessed 20th Apr 2014.
Hall, M, Brown, L. (2004). Core Servlets and JavaServer Pages. 2nd ed. California: Sun Microsystem Press.
Panda, D, Rahman, R, Derek Lane (2007). EJB 3 in Action. New York: Manning Publications Company
width="210" height="174" alt="bakery"/> -‐-‐%>
<img src="${initParam.categoryImagePath}/${category.name}.png" alt="${category.name}"> </a> </div> </c:forEach> </div>
cart.jsp
<div id="singleColumn">
<c:choose> <c:when test="${cart.numberOfItems > 1}"> <p>Your shopping cart contains ${cart.numberOfItems} items.</p> </c:when> <c:when test="${cart.numberOfItems == 1}"> <p>Your shopping cart contains ${cart.numberOfItems} item.</p> </c:when> <c:otherwise> <p>Your shopping cart is empty.</p> </c:otherwise> </c:choose>
<div id="actionBar"> <%-‐-‐ clear cart widget -‐-‐%> <c:if test="${!empty cart && cart.numberOfItems != 0}">
<c:if test="${!empty cart && cart.numberOfItems != 0}">
<h4 id="subtotal">subtotal: £ ${cart.subtotal}</h4>
<table id="cartTable">
<tr class="header"> <th>product</th> <th>name</th> <th>price</th> <th>quantity</th> </tr>
<c:forEach var="cartItem" items="${cart.items}" varStatus="iter">
<c:set var="product" value="${cartItem.product}"/>
<tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}"> <td> <img src="${initParam.productImagePath}/${product.name}.png" alt="${product.name}"> </td>
<td>${product.name}</td>
<td> £ ${cartItem.total} <br> <span class="smallText">( £ ${product.price} / unit
)</span> </td>
category.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<div id="categoryLeftColumn">
<c:forEach var="category" items="${categories}">
<c:choose> <c:when test="${category.name == selectedCategory.name}"> <div class="categoryButton" id="selectedCategory"> <span class="categoryText"> ${category.name} </span> </div> </c:when> <c:otherwise> <a href="category?${category.id}" class="categoryButton"> <span class="categoryText"> ${category.name} </span> </a> </c:otherwise> </c:choose>
</c:forEach>
</div>
<form action="addToCart" method="post"> <input type="hidden" name="productId" value="${product.id}"> <input type="submit" name="submit" value="add to cart"> </form> </td> </tr>
</c:forEach>
</table> </div>
checkout.jsp
<div id="singleColumn">
<h2>checkout</h2>
<p>In order to purchase the items in your shopping cart, please provide us with the following information:</p>
<form action="purchase" method="post"> <table id="checkoutTable"> <tr> <td><label for="name">name:</label></td>
name="phone" value="${param.phone}"> </td> </tr> <tr> <td><label for="address">address:</label></td> <td class="inputField"> <input type="text" size="31" maxlength="45" id="address" name="address" value="${param.address}">
<br> Coventry <select name="cityRegion"> <c:forEach begin="1" end="10" var="regionNumber"> <option value="${regionNumber}" <c:if test="${param.cityRegion eq
regionNumber}">selected</c:if>>${regionNumber}</option> </c:forEach> </select> </td> </tr> <tr> <td><label for="creditcard">credit card
number:</label></td> <td class="inputField"> <input type="text" size="31" maxlength="19"
<tr> <td>delivery surcharge:</td> <td class="checkoutPriceColumn"> £ ${initParam.deliverySurcharge}</td> </tr> <tr> <td class="total">total:</td> <td class="total checkoutPriceColumn"> £ ${cart.total}</td> </tr> </table> </div>
</div>
confirmation.jsp
<div id="singleColumn">
<p id="confirmationText"> <strong>Your order has been successfully processed and will be
delivered within 24 hours.</strong> <br><br> Please keep a note of your confirmation number: <strong>${orderRecord.confirmationNumber}</strong> <br> If you have a query concerning your order, feel free to <a
href="#">contact us</a>. <br><br> Thank you for shopping at the SoftwareForYou! </p>
</c:forEach>
<tr class="lightBlue"><td colspan="3" style="padding: 0 20px"><hr></td></tr>
<tr class="lightBlue"> <td colspan="2"
id="deliverySurchargeCellLeft"><strong>delivery surcharge:</strong></td> <td id="deliverySurchargeCellRight">£ ${initParam.deliverySurcharge}</td> </tr>
<tr class="lightBlue"> <td colspan="2"
id="totalCellLeft"><strong>total:</strong></td> <td id="totalCellRight">£ ${orderRecord.amount}</td> </tr>
<tr class="lightBlue"><td colspan="3" style="padding: 0 20px"><hr></td></tr>
<tr class="lightBlue"> <td colspan="3" id="dateProcessedRow"><strong>date
processed:</strong> ${orderRecord.dateCreated} </td> </tr> </table>
</div>
ecommerce.css
/* html tags */ body {
font-‐family: Arial, Helvetica, sans-‐serif; width: 850px; text-‐align: center; margin: 20px auto; color: #444;
hr { border: 0; background-‐color: #333; height: 1px;
table { margin: 0 20px; border-‐spacing: 0; text-‐align: center; border: solid 1px #f5eabe;
a { color: inherit; text-‐decoration: underline;
a:hover { text-‐decoration: none }
a:visited { color: inherit }
.hMargin { margin: 0 30px }
.smallText { font-‐size: small }
.reallySmallText { font-‐size: xx-‐small }
.header { background-‐color: #c3e3e0; height: 30px;
/* styles for elements contained in the header, i.e.,
shopping cart widget, language toggle, and logo */ #header { width: 850px; height: 250px; background-‐image:url("../img/header_background.png"); background-‐repeat:no-‐repeat; background-‐position:right top;
#logo { float: left; margin-‐left: 30px; margin-‐top: -‐20px;
#logoText { float: left;
.headerWidget { width: 194px; margin: 20px 0; font-‐size: small; float: right; line-‐height: 25px;
/* footer styles */ #footer {
height: 60px; width: 350px; clear: left;
#footerText { margin-‐top: 5px }
#footerDivider { margin: 0 25px; width: 300px;
/* index page styles */ #indexLeftColumn {
text-‐align: left; height: 400px; width: 350px; float: left;
.categoryLabelText { position: relative; line-‐height: 150%; font-‐size: x-‐large; margin: 3px 10px;
.categoryImage { padding: 1px; border:solid 1px #999;
/* category page styles */ #categoryLeftColumn {
width: 185px; float: left; margin-‐top: 25px; padding-‐left: 15px;
#categoryRightColumn { margin-‐top: 10px; width: 650px; float: left;
.categoryButton { margin: 15px 22px; padding: 13px;
#productTable td { width: 145px }
/* cart page styles */ #actionBar {
margin: 30px; width: 750px; text-‐align: center;
#subtotal { margin: 40px 0 20px 430px }
#cartTable { width: 750px }
#cartTable td { width: 145px; height: 90px;
/* checkout page styles */ #checkoutTable {
width: 405px; padding: 10px; background-‐color: #f5eabe; float: left;
#checkoutTable td { vertical-‐align: top; text-‐align: right; margin: 5px;
margin: 0 20px 20px; padding: 10px; background-‐color: #f5eabe; float: left; width:540px;
.summaryColumn { margin-‐top: 15px; width: 50%; float: left;
#orderSummaryTable { width: 100%; text-‐align: left; height: 200px;
#deliveryAddressTable { width: 70%; margin-‐left: 15%; text-‐align: left; height: 200px;
} /* admin styles */ #adminLogo {
float:left; margin-‐left: 30px; margin-‐top: -‐20px;
.selectedRow { background-‐color: #c3e3e0; cursor: pointer;
.noDecoration { text-‐decoration: none }
.rigidWidth { width:200px }
.embedded { margin: 0; border: none;
header.jspf
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%-‐-‐ Set language based on user's choice -‐-‐%> <c:if test="${!empty language}">
<fmt:setLocale value="${language}" scope="session" /> </c:if>
<%@page pageEncoding="UTF-‐8" contentType="text/html; charset=UTF-‐8"%> <!DOCTYPE HTML PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<c:if test="${!empty sessionScope.cart}"> CART EXISTS AND IS NOT NULL </c:if> <BR> <c:if test="${sessionScope.cart.numberOfItems
!= 0}"> NUMBER OF ITEMS IN CART IS NOT 0 </c:if> <BR> <c:if
test="${fn:contains(pageContext.request.servletPath,'/checkout')}"> SERVLET PATH CONTAINS '/checkout' </c:if> <BR> <c:if
test="${requestScope['javax.servlet.forward.servlet_path'] ne '/checkout'}">
REQUEST IS NOT CHECKOUT </c:if> -‐-‐%>
<c:if test="${!empty cart && cart.numberOfItems !=
0 &&
!fn:contains(pageContext.request.servletPath,'/checkout') &&
requestScope['javax.servlet.forward.servlet_path'] ne '/checkout' &&
!fn:contains(pageContext.request.servletPath,'/cart') &&
</c:choose>
<%-‐-‐ Handle singular/plural forms of 'item' -‐-‐%> <c:choose> <c:when test="${cart.numberOfItems == 1}"> item </c:when> <c:otherwise> items </c:otherwise> </c:choose> </span>
<c:if test="${!empty cart && cart.numberOfItems != 0 &&
!fn:contains(pageContext.request.servletPath,'/cart') &&
requestScope['javax.servlet.forward.servlet_path'] ne '/cart'}">
<a href="viewCart" class="bubble"> view cart </a> </c:if> </div> </div>
<a href="index.jsp"> <img src="img/logo.png" id="logo" alt="Logo"> </a>
<img src="img/logoText.png" id="logoText" alt="Text">
import entity.Category; import entity.Product; import java.io.IOException; import java.util.Collection; import javax.ejb.EJB; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import session.CategoryFacade; import session.OrderManager; import session.ProductFacade; /**
* * @author arijitroy */
@WebServlet (name="ControllerServlet", loadOnStartup = 1, urlPatterns = {"/category", "/addToCart", "/viewCart", "/updateCart", "/checkout", "/purchase", "/chooseLanguage"})
public class ControllerServlet extends HttpServlet {
/**
response) throws ServletException, IOException {
String userPath = request.getServletPath(); HttpSession session = request.getSession(); Category selectedCategory; Collection<Product> categoryProducts; // if category page is requested if (userPath.equals("/category")) { // TODO: Implement category request // get categoryId from request String categoryId = request.getQueryString();
if (categoryId != null) {
// get selected category selectedCategory =
categoryFacade.find(Short.parseShort(categoryId));
// place selected category in request scope request.setAttribute("selectedCategory", selectedCategory);
// get all products for selected category categoryProducts = selectedCategory.getProductCollection();
// place category products in request scope request.setAttribute("categoryProducts", categoryProducts);
} // if cart page is requested } else if (userPath.equals("/viewCart")) { // TODO: Implement cart page request
// TODO: Implement language request
// use RequestDispatcher to forward request internally String url = "/WEB-‐INF/view" + userPath + ".jsp";
try { request.getRequestDispatcher(url).forward(request, response); } catch (Exception ex) { ex.printStackTrace(); } }
**/ private String surcharge;
@EJB private CategoryFacade categoryFacade; @EJB private ProductFacade productFacade; @EJB private OrderManager orderManager;
@Override public void init(ServletConfig servletConfig) throws ServletException {
super.init(servletConfig);
// initialize servlet with configuration information surcharge =
servletConfig.getServletContext().getInitParameter("deliverySurcharge");
String categoryId = request.getQueryString();
if (categoryId != null) {
// get selected category selectedCategory =
categoryFacade.find(Short.parseShort(categoryId));
// place selected category in session scope session.setAttribute("selectedCategory", selectedCategory);
// get all products for selected category categoryProducts = selectedCategory.getProductCollection();
// place category products in session scope session.setAttribute("categoryProducts", categoryProducts); }
// if cart page is requested } else if (userPath.equals("/viewCart")) {
String clear = request.getParameter("clear");
if ((clear != null) && clear.equals("true")) {
ShoppingCart cart = (ShoppingCart) session.getAttribute("cart"); cart.clear(); }
userPath = "/cart";
/** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-‐specific error occurs * @throws IOException if an I/O error occurs */
/** @Override protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
String userPath = request.getServletPath(); HttpSession session = request.getSession(); ShoppingCart cart = (ShoppingCart) session.getAttribute("cart"); // if addToCart action is called if (userPath.equals("/addToCart")) { // TODO: Implement add product to cart action
// if user is adding item to cart for first time // create cart object and attach it to user session if (cart == null) {
cart = new ShoppingCart(); session.setAttribute("cart", cart); }
userPath = "/confirmation"; }
// use RequestDispatcher to forward request internally String url = "/WEB-‐INF/view" + userPath + ".jsp";
try { request.getRequestDispatcher(url).forward(request, response); } catch (Exception ex) { ex.printStackTrace(); } }
**/
@Override protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
String userPath = request.getServletPath(); HttpSession session = request.getSession(); ShoppingCart cart = (ShoppingCart) session.getAttribute("cart");
// if addToCart action is called if (userPath.equals("/addToCart")) {
// if user is adding item to cart for first time // create cart object and attach it to user session if (cart == null) {
cart = new ShoppingCart(); session.setAttribute("cart", cart);
// if purchase action is called } else if (userPath.equals("/purchase")) { // TODO: Implement purchase action if (cart != null) {
// extract user data from request String name = request.getParameter("name"); String email = request.getParameter("email"); String phone = request.getParameter("phone"); String address = request.getParameter("address"); String cityRegion = request.getParameter("cityRegion"); String ccNumber = request.getParameter("creditcard");
int orderId = orderManager.placeOrder(name, email, phone, address, cityRegion, ccNumber, cart); } userPath = "/confirmation"; }
// use RequestDispatcher to forward request internally String url = "/WEB-‐INF/view" + userPath + ".jsp";
try { request.getRequestDispatcher(url).forward(request, response); } catch (Exception ex) { ex.printStackTrace(); } }
</context-‐param> <session-‐config> <session-‐timeout>
30 </session-‐timeout> </session-‐config> <jsp-‐config> <jsp-‐property-‐group> <description>header and footer settings</description> <url-‐pattern>/index.jsp</url-‐pattern> <url-‐pattern>/WEB-‐INF/view/*</url-‐pattern> <include-‐prelude>/jspf/header.jspf</include-‐prelude> <include-‐coda>/jspf/footer.jspf</include-‐coda> </jsp-‐property-‐group> </jsp-‐config>
</web-‐app>