E Commerce Website ( 1 )

(1)

Ecommerce Website

M30CDE Open System

Development

By :

Arijit Roy

2014

(2)

INTRODUCTION

4 APPLICATION DESIGN

4 W

EBSITE

W

IREFRAME

D

IAGRAMS

4 I

NDEX

P

AGE

4 C

ATEGORY

P

AGE

5 C

ART

P

AGE

5 C

HECKOUT

P

AGE

6 C

ONFIRMATION

P

AGE

6 D

EVELOPMENT

P

ROCESS

7 F

RONT

-‐

END DEVELOPMENT

7 W

EB APPLICATION PROJECT STRUCTURE

7 D

ATA MODELING

7 ER

D

IAGRAM

8 TECHNOLOGIES USED

8 HTML,

CSS,

AND

J

AVA

S

CRIPT TECHNOLOGIES

8 S

ERVLET AND

J

AVA

S

ERVER

P

AGES

(JSP)

TECHNOLOGIES

9 E

NTERPRISE

J

AVA

B

EANS

(EJB)

TECHNOLOGY

9 J

AVA

P

ERSISTENCE

API

(JPA)

9 T

HE

J

AVA

S

ERVER

P

AGES

S

TANDARD

T

AG

L

IBRARY

(JSTL)

9 J

AVA

D

ATABASE

C

ONNECTIVITY

(JDBC)

9 PAGE VIEWS AND CONTROLLER SERVLET

9 DATABASE CONNECTIVITY

10 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 SESSION MANAGEMENT

11 SESSION DATA HANDLING

11 CLIENT AND SERVER-‐SIDE VALIDATION

12 C

LIENT

S

IDE

12 S

ERVER

S

IDE

12 USE CASE SCENARIO

12 TESTING

13 T

EST

P

LAN

13

(3)

(4)

Introduction

This is the Website design for a Software Selling company called

“SoftwareForYou”, the company is a retailer for companies like Microsoft, Apple,

Adobe and some Antivirus companies.

The website is designed for the customers who wish to purchase software

online, so it basically includes a list of softwares available and a shopping cart

which will store the items until the customer procedes for checkout.

A Database is used to store all the data which is used or stored by the website.

Application Design

Website Wireframe Diagrams

Wireframe is a Rough Sketch of the website which is to be designed. This

particular website was designed based on the following diagrams:

Index Page

(5)

Category Page

Cart Page

(6)

Checkout Page

Confirmation Page

(7)

Development Process

The development process started with Designing the website and its data model,

Moreover the whole data flow had to be decided, and how the user interaction

will look like.

Front-‐end development

This part of the design process included designing the basic sctructure of the

website and all the included pages so that the website is easy to navigate and

use, I had to keep in mind different usability issues which are important to a web

designer, as the design of the website is the part that interacts with the user.

Some of the major issues are considered such as the response time of the website

and overall simplicity of the website, to facilitate low user frustration and higher

throughput of the website.

Web application project structure

The Web application was designed using HTML and CSS , To give the website a

vast cross browser compatibility, The Structure of the project is :

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

(8)

• Customer

•

• Product

• Order

By using these entities the ER diagram was created.

ER Diagram

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

(9)

Servlet and JavaServer Pages (JSP) technologies

All the pages of this website are designed on JSP, the user interface mostly is

developed using JSP, This gives a very easy to design environment to develop a

website, as it is very easy to use as compared to html coding.

Servlets are also used in the website to get the requests from the jsp pages, and

reply them with appropriate response. We are using two servlets named

“Controllerservlet” and “AdminServlet” to process the request and give response

to the jsp pages.

Enterprise JavaBeans (EJB) technology

This technology was used in this website when the Entity classes were created,

these entity classes represent each table of the database, so when any data has to

be stored an instance of a entity class will be created and the data will be passed

to Entity class, then it will be written to the database.

Java Persistence API (JPA)

Java persistence was helpful in generating the Session beans from the Entity

classes, JPA is helpful to the controller servlet because it provides a standard

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.

(10)

(11)

connection pool by looking into the Java Naming Directory Interface (JNDI). The

connection pool, which is associated with a particular data source from which

the connections are provided.

Entity Classes and Session Beans

MVC Diagram

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 Ma

_nagement

The shopping cart facility needs to remember the data of the cart, as user

(12)

To implement this we need to create a session when user starts the browsing

and maintain the session until the browser is closed, We use the HttpSession

interface to do this and we also create two servlets which store the shopping cart

data temporarily for each session.

Client and server

_-‐

side validation

Client Side

Form Validation or Client Side validation is a method of checking a form, so that

we can validate the inputs which are provided by the customer before they are

sent to the server for checking. This also prevents users to input malicious

content which would adversely affect the server. For this application we are

using a Jquery Plugin “

jquery.validate.js” .

Which is referenced in Header.jspf

so that the validation plugin can be directly referenced in the checkout.jsp

Server Side

Server side validation is done to check if the data is in correct format for further

processing and if the data is ready to be stored in the database. The server side

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.

(13)

Testing

Test Plan

A list of user-‐initiated requests to the server, based on the given use-‐case, might

look something like the following:

Use-Case Server Request

Welcome page is visited by the customer /Ecommerce/

Product category is selected /Ecommerce/category

Customer browses through products and selects the products he or she needs

/Ecommerce/addToCart

Customer selects a different category and continues /Ecommerce/category

Customer adds different items to cart /Ecommerce /addToCart

/Ecommerce/addToCart

“View Cart” Option is selected /Ecommerce /viewCart

Quantities of different products are updated. /Ecommerce/updateCart

Shopping cart is validated and checked by the customer and customer proceeds to the checkout page

/Ecommerce/checkout

Then the customer checks the total amount and fills in his personal details and bank details.

/Ecommerce/purchase

The order is processed and customer is taken to a

confirmation page. The confirmation page provides a unique reference number for tracking the customer order, as well as a summary of the order.

(n/a)

Test Results

These are the test results for the heap generated during the Runtime of the web

application.

(14)

Conclusion

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.

(15)

Screen Shots

(16)

(17)

(18)

(19)

(20)

(21)

(22)

(23)

(24)

(25)

(26)

(27)

(28)

(29)

(30)

(31)

<p id="categoryTitle">${selectedCategory.name}</p> us with the following information:</p>

(32)

(33)

(34)

(35)

(36)

(37)

(38)

(39)

(40)

(41)

(42)

(43)

(44)

</div> public class ControllerServlet extends HttpServlet {

(45)

* Handles the HTTP <code>GET</code> method.

(46)

(47)

// store category list in servlet context

(48)

(49)

// get user input from request

(50)

} phone, address, cityRegion, ccNumber, cart);

(51)

}

web.xml

<?xml version="1.0" encoding="UTF-‐8"?>

<web-‐app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-‐instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-‐app_3_1.xsd"> <context-‐param>

<description>Path of Product Images </description>

<param-‐name>productImagePath</param-‐name> <param-‐value>img/products</param-‐value> </context-‐param>

<context-‐param>

<description>Path of product categories</description> <param-‐name>categoryImagePath</param-‐name>

<param-‐value>img/categories</param-‐value> </context-‐param>

<context-‐param>

<description>delivery surcharge applied to all orders</description> <param-‐name>deliverySurcharge</param-‐name>

<param-‐value>3.00</param-‐value> </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>

E Commerce Website ( 1 )