Online Grocery Store

43
Eastern Visayas State University-Tanauan Campus Online Grocery Store In Partial Fulfilment of the Requirements in ENTREP 413 (Entrepreneurship) Submitted by: Elorde, Raymund L. Flores, Nicka P. Peroy, Irish Mae F. BSIT-4A Submitted to: Engr. Greg S. Campos

Transcript of Online Grocery Store

Page 1: Online Grocery Store

Eastern Visayas State University-Tanauan Campus

Online Grocery Store

In Partial Fulfilment of the Requirements in

ENTREP 413 (Entrepreneurship)

Submitted by:

Elorde, Raymund L.

Flores, Nicka P.

Peroy, Irish Mae F.

BSIT-4A

Submitted to:

Engr. Greg S. Campos

October 2013

Page 2: Online Grocery Store

ABSTRACT

An online Grocery Store permits a customer to submit online orders for items and/or services from a store that serves both walk-in customers and online customers. The online Store system presents an online display of all the items they want to sell. This web based application helps customers to choose their daily needs and add products to their shopping cart. Customers provides their complete detail of address and contact and they get their chosen products in their home.

This Web application saves lots of time of customers.

Page 3: Online Grocery Store

Introduction to Servlets

ObjectiveServlet technology was the original Java based solution for web development

however due to the problems of maintaining the HTML within the Java code

they were never a great success. JSP was the solution to this. However as we

will see later there is still a place for Servlets in Java Server development.

This topic looks at the architecture of a Servlet and how to go about writing

one.

Just What is a Servlet ?

A Servlet is quite simply a java class that adheres to the general model of a

Servlet as defined by the Servlet API. A Servlet Container, also known as a

Servlet Enginetranslates requests from whatever protocol is being used into

objects that the Servlet understands, and also gives the Servlet an object which

it can use to send a response. This container is also responsible for managing

the lifecycle of a Servlet.

Now we have already met the idea of a JSP Container which manages JSP

execution. In fact the JSP Container is only responsible for the rewriting of a

JSP page to a Servlet and then allows the Servlet Container handle the actual

execution.

The Servlet Lifecycle

Servlet containers are responsible for handling requests, passing that request to

the Servlet and then returning the response to the client. The actual

Page 4: Online Grocery Store

impementation of the container will vary from program to program but the

interface between Containers and Servlets is defined by the Servlet API much

in the same way as there are many JSP Containers all adhering the to JSP

Specification.

The basic lifecycle of a Servlet is,

The Servlet Container creates an instance of the Servlet.

The Container calls the instance's init() method.

If the Container has a request for the Servlet it will call the instance's service()

method.

Before the instance is destroyed the Container will call the destroy() method.

Finally the instance is destroyed and marked for garbage collection.

Typically the init() method is only called once and then the service()method is

called repeatedly for each request. This is much more efficient than executing

inti(),service(), destroy() for each request. What happens, you may ask yourself,

when a service() method is still executing when the Container receives another

request ? Typically this will involve the creation of another program execution

thread. In practice, Servlet Containers create a pool of threads to which

incoming requests are generally allocated.

A Basic ServletA Servlet is defined by the javax.servlet.Servlet interface. There is also a

GenericServletabstract class which provides a basic implementation of the Servlet

interface. However for this discusssion we will only look at the HttpServlet class

Page 5: Online Grocery Store

which extends the GenericServletclass. When you come to write a Servlet it will be

this class that you are most likely to extend.

The service() method

The service() method is implemented by the HttpServlet as a dispatcher of HTTP

Requests and therefore should never be overridden. When a request is made the

service()method will determine the type of request (GET, POST, etc) and dispacth

it to the appropriate method (doGet(), doPost(), etc). For the most part you will be

overridding doGet()and the doPost() methods. These have message signatures

similar to,

protected void do Post(HttpServletRequest request,

HttpServletResponse response)

throws ServletException, java.io.IOException

We already know the two objects HttpServletRequest and HttpServletResponseas

these are just the implicit objects request and response and can be manipulated in

exactly the same way within the body of the doGet(), doPost()methods.

The init() method

The init() method is executed when the Servlet is first instantiated. The Servlet

container will pass an object of type ServletConfig to the method so that container

specific configuration data can be stored by that Servlet instance for leter use.

Not every Servlet requires that the init() method do something. The type of work

carried out by this method can include such activities as initiating database

connections, establishing default values or instantiating JavaBeans. If your Servlet

doesn't require any kind of initialiation activity then don't include an init() method

in your Servlet

The destroy() method

You can assume that at any given time the Servlet container will decide to remove

the Servlet. This might occur if the Container needs to free some memeory or the

Page 6: Online Grocery Store

Servlet hasn't been requested for some time. The destroy() method is called prior to

removing of the Servlet so you can use this method for any clean up activity that

may be required; releasing database connections etc.

Introduction to JSP

Java Server Pages or JSP for short is Sun's solution for developing dynamic web

sites. JSP provide excellent server side scripting support for creating database

driven web applications. JSP enable the developers to directly insert java code into

jsp file, this makes the development process very simple and its maintenance also

becomes very easy. JSP pages are efficient, it loads into the web servers memory

on receiving the request very first time and the subsequent calls are served within a

very short period of time.

In today's environment most web sites servers dynamic pages based on user

request. Database is very convenient way to store the data of users and other

things. JDBC provide excellent database connectivity in heterogeneous database

environment. Using JSP and JDBC its very easy to develop database driven web

application.

Java is known for its characteristic of "write once, run anywhere." JSP pages are

platform independent. Your port your .jsp pages to any platform.

The Components of JSPs

JSP syntax is almost similar to XML syntax. The following general rules are

applicable to all JSP tags.

Page 7: Online Grocery Store

1. Tags have either a start tag with optional attributes, an optional body, and a

matching end tag or they have an empty tag possibly with attributes.

2. Attribute values in the tag always appear quoted. The special strings ' and

" can be used if quotes are a part of the attribute value itself.

Everything in a JSP page can be divided into two categories:

1. Elements that are processed on the server

2. Template data or everything other than elements, that the engine processing the

JSP engines.

Element data or that part of the JSP which is processed on the server, can be

classified into the following categories:

1. Directives

2. Scripting elements

3. Standard actions

Benefits of JSP

One of the main reasons why the JavaServer Pages technology has evolved into

what it is today and it is still evolving is the overwhelming technical need to

simplify application design by separating dynamic content from static template

display data. Another benefit of utilizing JSP is that it allows to more cleanly

separate the roles of web application/HTML designer from a software developer.

The JSP technology is blessed with a number of exciting benefits, which are

chronicled as follows:

Page 8: Online Grocery Store

1. The JSP technology is platform independent, in its dynamic web pages, its web

servers, and its underlying server components. That is, JSP pages perform perfectly

without any hassle on any platform, run on any web server, and web-enabled

application server. The JSP pages can be accessed from any web server.

2. The JSP technology emphasizes the use of reusable components. These

components can be combined or manipulated towards developing more purposeful

components and page design. This definitely reduces development time apart from

the At development time, JSPs are very different from Servlets, however, they are

precompiled into Servlets at run time and executed by a JSP engine which is

installed on a Web-enabled application server such as BEA WebLogic and IBM

WebSphere

Page 9: Online Grocery Store

INTRODUCTION TO PROJECT

Concepts:

o Front-end development

o Web application project structure

o Data modeling

o Database connectivity

o Session management

o Transactional business logic

o Client and server-side validation

o Web application Security.

Technologies:

o HTML, CSS, and JavaScript technologies

o Servlet and JavaServer Pages (JSP) technologies

o The JavaServer Pages Standard Tag Library (JSTL)

o Java Database Connectivity (JDBC)

Page 10: Online Grocery Store

Development Tools:

o NetBeans 6.9 IDE

o GlassFish, a Java EE application server

o MySQL, a relational database management server (RDBMS)

Designing the Application

Welcome Page:-

The welcome page is the website's home page, and entry point for the application.

It introduces the business and service to the user, and enables the user to navigate

to any of the four product categories.

Page 11: Online Grocery Store

category page

The category page provides a listing of all products within the selected category. From this page, a user is able to view all product information, and add any of the listed products to his or her shopping cart. A user can also navigate to any of the provided categories.

cart page

The cart page lists all items held in the user's shopping cart. It displays product details for each item, and tallies the subtotal for the items in the cart. From this page, a user can:

Clear all items in his or her cart (Clicking 'clear cart' causes the 'proceed to checkout' buttons and shopping cart table to disappear.)

Remove item from the Shopping cart.

Return to the previous category by clicking 'continue shopping'

Proceed to checkout

Page 12: Online Grocery Store

checkout page

The checkout page collects information from the customer using a form. This page also displays purchase conditions, and summarizes the order by providing calculations for the total cost.The user is able to send personal details over a secure channel.

Page 13: Online Grocery Store

Designing the Data Model

Entities of the data model:-

1. Customer2. Category3. Product4. Order

Customer Table:-

Product Table:-

Category Table:-

Page 14: Online Grocery Store

Order:-

Connecting Application to the Database

This part focuses on database connectivity of our application to the database, add the data to the different tables. Then, we need to setup connection pool and data source on the Glassfish server. We need to retrieve data of category and product table in our application JSP pages.

Adding data to the Category table:-

Adding data to the Product table:-

Page 15: Online Grocery Store

Creating a connection poll and Data source:-

1. Click the New File button in the IDE's toolbar2. Select the GlassFish category, then select JDBC

Resource and click Next.3. Enter details to set up the data source

Page 16: Online Grocery Store

4.Click Next. In Step 4, Add Connection Pool Properties, specify the following

details:

o Datasource Classname: com.mysql.jdbc.jdbc2.optional.MysqlDataSource

o Resource Type: javax.sql.ConnectionPoolDataSource

o Description: (Optional) Connects to the project database

5.Click Finish. The wizard generates a sun-resources.xml file for the project that

contains all information required to set up the connection pool and data source on

GlassFish. The sun-resources.xml file is a deployment descriptor specific to the

GlassFish application server. When the project next gets deployed, the server will

read in any configuration data contained in sun-resources.xml, and set up the

connection pool and data source accordingly. Note that once the connection pool

and data source exist on the server, your project no longer requires the sun-

resources.xml file.

Quering the Database from JSP:-

Setting Context Parameters:-

This section demonstrates how to configure context parameters for the application,

and how to access parameter values from JSP pages. The owner of an application

may want to be able to change certain settings without the need to make intrusive

changes to source code. Context parameters enable you application-wide access to

Page 17: Online Grocery Store

parameter values, and provide a convenient way to change parameter values from a

single location, should the need arise.

Setting up context parameters can be accomplished in two steps:

1. Listing parameter names and values in the web deployment descriptor

2. Calling the parameters in JSP pages using the initParam object

you create context parameters for the image paths to category and product images

used in the project. Begin by adding the provided image resources to the project,

then perform the two steps outlined above.

1.Import the img folder into the project. the img folder, then in the IDE's

Projects window, paste the folder into the project's Web Pages node.

Open the project's web deployment descriptor. In the Projects window,

expand the Configuration Files node and double-click web.xml.

Click the General tab, then expand Context Parameters and click the Add

button.

In the Add Context Parameter dialog, enter the following details:

o Parameter Name: productImagePath

o Parameter Value: img/products/

Page 18: Online Grocery Store

1. Click OK.

2. Click the Add button again and enter the following details:

o Parameter Name: categoryImagePath

o Parameter Value: img/categories/

3. Click the XML tab to view the XML content that has been added to the

deployment descriptor. The following <context-param> entries have been

added:

4. <context-param>

5. <description>The relative path to product images</description>

6. <param-name>productImagePath</param-name>

7. <param-value>img/products/</param-value>

8. </context-param>

9. <context-param>

10. <description>The relative path to category images</description>

11. <param-name>categoryImagePath</param-name>

Page 19: Online Grocery Store

12. <param-value>img/categories/</param-value>

</context-param>

Accessing database in index page:-

1. In the Projects window, double-click the index.jsp node to open it in the

editor.

2. At the top of the file, before the first <div> tag, place your cursor on a

blank line, then type 'db' and press Ctrl-Space. In the code-completion

pop-up window that displays, choose DB Query and write

<sql:query var="categories" dataSource="jdbc/myaffablebean">

SELECT * FROM category

</sql:query>

3. Then access, the category database using jstl for each loop, by using

following code.

<div id="indexRightColumn">

<c:forEach var="category" items="${categories.rows}">

<div class="categoryBox">

<a href="category.jsp?${category.id}">

Page 20: Online Grocery Store

<span class="categoryLabelText">${category.name}</span>

<img src="${initParam.categoryImagePath}${category.name}.jpg"

style="height:120px; width:180px;"

alt="${category.name}">

</a>

</div>

</c:forEach>

</div>

Accessing database in category page:-

Three aspects of the category page need to be handled dynamically. The left

column must indicate which category is selected, the table heading must display

the name of the selected category, and the table must list product details pertaining

to the selected category. In order to implement these aspects using JSTL, you can

follow a simple, 2-step pattern:

Page 21: Online Grocery Store

1. Retrieve data from the database using the JSTL sql tag library.

2. Display the data using the JSTL core library and EL syntax.

3. In the Projects window, double-click the category.jsp node to open it in the editor.

4. Add the following SQL query to the top of the file.

<sql:query var="categories" dataSource="jdbc/myaffablebean">

SELECT * FROM category

</sql:query>

5.Between the <div id="categoryLeftColumn"> tags, replace the existing static

placeholder content with the following <c:forEach> loop.

<div id="categoryLeftColumn">

<c:forEach var="category" items="${categories.rows}">

<c:choose>

<c:when test="${category.id==pageContext.request.queryString}">

<div class="categoryButton" id="selectedCategory">

<span class="categoryText">${category.name}</span>

</div>

</c:when>

<c:otherwise>

Page 22: Online Grocery Store

<a href="category.jsp?${category.id}" class="categoryButton">

<div class="categoryText">

${category.name}

</div>

</a>

</c:otherwise>

</c:choose>

</c:forEach>

</div>

5. Click on run project.

Session management in online Store:-

Every e-commerce application that offers some form of shopping cart functionality

needs to be able to remember user-specific data as users click through the website.

Unfortunately for you the developer, the HTTP protocol, over which

communication on the Internet takes place, is a stateless protocol. Each request

received by your server is an independent piece of information that has no relation

to previously received requests. Therefore, if a customer clicks a button to add an

Page 23: Online Grocery Store

item to his or her shopping cart, your application must take measures to ensure not

only that the state of the user's cart is updated, but that the action doesn't affect the

cart of another user who happens to be browsing the site at the same time.

Handling session data:-

Applications can manage user sessions with the HttpSession object. You can bind

user-specific data to the HttpSession object, then access this data at a later stage.

Both bind and access actions can be done from Java classes, as well as from

session-scoped variables in EL expressions.

The online store application uses the HttpSession object to identify users over

multiple requests. An HttpSession object is obtained using getSession() on a given

request:

HttpSession session=req.getSession();

For session management we have to to create shopping servlet and two java classes

1. Product class

2. Shopping cart class

Product class:-

In the product class we set and get all the detail of the product like product_id,

name, description, price, quantity.

Product class:-

Page 24: Online Grocery Store

package shopping;

/**

*

* @author kavita

*/

public class product {

String name;

String description;

int id;

float price;

int quantity;

public product()

{

name="";

Page 25: Online Grocery Store

description="";

price=0;

quantity=0;

}

public void setname(String pname)

{

name=pname;

}

public String getname()

{

return name;

}

public void setdescription(String desc)

{

Page 26: Online Grocery Store

description=desc;

}

public String getdescription()

{

return description;

}

public void setprice(float p)

{

price=p;

}

public float getprice()

{

return price;

}

Page 27: Online Grocery Store

public void setid(int pid)

{

id=pid;

}

public int getid()

{

return id;

}

public void setquantity(int q)

{

quantity=q;

}

public int getquantity()

{

Page 28: Online Grocery Store

return quantity;

}

}

Shopping servlet:-

Shopping servlet perform various operations on the cart-

1. Remove item from the cart.

2. Proceed to the check out.

3. Calculate annual amount of the customer

4. Manage session for each customer

After processing of shopping servlet control is transfer to the registration page, in

the registration page customer can enter his complete detail for complete

processing of his order.

Registration page:-

Page 29: Online Grocery Store

Register page:-

It contains following fields to enter:-

1. Name

2. Email

3. Address

4. Contact

5. Region

Page 30: Online Grocery Store

After filling registration page control is transfer to register servlet where it accepts

all the parameters of registration page and save it into the sql table customers.

Confirmation Page:-

Confirmation page generates a order reference number and order will start

processing by the store admin. You can enjoy home delievery of your daily needs

at your doorstep with in 30 minutes

Admin Login:-

Admin login page provides a login page in which admin of the store has to enter

his login name and password and login successfully and view customers orders

detail, and start processing their order.

Page 31: Online Grocery Store

when admin enters his username and password control is transfer to the servlet,

servlet check given user name and password with the stored user name and

password if it matches then admin will be redirected to the welcome page.

If it does not matches then user is redirected to unsuccessful login page

Admin Page:-

Page 32: Online Grocery Store
Page 33: Online Grocery Store

Our online grocery store lets you shop for groceries online quickly and easily.

Point. Click. Done. That's how easy and quick it is to grocery shop online in our online grocery store. Online grocery shopping at Walmart.com not only saves you time and effort; it also saves you money, thanks to the Every Day Low Prices you always get at Walmart.

Our huge selection of online groceries includes all the snacks, beverages, condiments, cleaning supplies like detergents and soaps and thousands upon thousands of other items you use every day. Best of all, you can buy groceries online from the comfort of your home or office, so why not save a trip to the store while saving yourself some time and gas money, too?

We do everything we can to keep our prices low, so you can spend less and enjoy more of the things you love. Shopping for groceries online is also a smart way to stock up on the things you use in bulk. Many of our online grocery items qualify for free delivery with our HomeFree shipping program, too. Once you've experienced how easy it is to do your grocery shopping online, you'll want to shop groceries online every time.

Walmart's online grocery store is the place to find excellent values on household essentials, baking goods, cleaning supplies, snacks and cookies, beverages, condiments and so many more of the things you need. Save time and money by getting your groceries online at Walmart.com's online grocery store.