You are on page 1of 33

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

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.

Introduction to Servlets
Objective Servlet 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

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 Servlet A 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

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, 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

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.

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:

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

o o o o o o o

Front-end development Web application project structure Data modeling Database connectivity Session management Transactional business logic Client and server-side validation Web application Security.

o o o o

HTML, CSS, and JavaScript technologies Servlet and JavaServer Pages (JSP) technologies The JavaServer Pages Standard Tag Library (JSTL) Java Database Connectivity (JDBC)

Development Tools:
o o o

NetBeans 6.9 IDE GlassFish, a Java EE application server 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.

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

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.

Designing the Data Model

Entities of the data model:1. 2. 3. 4. Customer Category Product Order

Customer Table:-

Product Table:-

Category Table:-


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:-

Creating a connection poll and Data source:1. Click the New File button in the IDE's toolbar 2. Select the GlassFish category, then select JDBC Resource and click Next. 3. Enter details to set up the data source

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

Datasource Classname: com.mysql.jdbc.jdbc2.optional.MysqlDataSource Resource Type: javax.sql.ConnectionPoolDataSource 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 sunresources.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

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 o

Parameter Name: productImagePath Parameter Value: img/products/

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

Parameter Name: categoryImagePath 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. 6. 7. <description>The relative path to product images</description> <param-name>productImagePath</param-name> <param-value>img/products/</param-value>

8. </context-param> 9. <context-param> 10. <description>The relative path to category images</description>

11. 12.

<param-name>categoryImagePath</param-name> <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?${}">

<span class="categoryLabelText">${}</span> <img src="${initParam.categoryImagePath}${}.jpg" style="height:120px; width:180px;" alt="${}">

</a> </div> </c:forEach>


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: 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="${}"> <div class="categoryButton" id="selectedCategory"> <span class="categoryText">${}</span> </div> </c:when>

<c:otherwise> <a href="category.jsp?${}" class="categoryButton"> <div class="categoryText"> ${} </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 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:package shopping;

/** * * @author kavita */ public class product { String name; String description; int id; float price; int quantity;

public product() {

name=""; description=""; price=0; quantity=0;

public void setname(String pname) { name=pname;

} public String getname() { return name;

} public void setdescription(String desc)

{ description=desc;

} public String getdescription() { return description;

} public void setprice(float p) { price=p;

} public float getprice() { return price;

} public void setid(int pid) { id=pid;

} public int getid() { return id;

} public void setquantity(int q)

{ quantity=q;

} public int getquantity()

{ return quantity; } }

Shopping servlet:Shopping servlet perform various operations on the cart1. 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:-

Register page:It contains following fields to enter:1. Name 2. Email 3. Address 4. Contact 5. Region

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.

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:-

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 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's online grocery store.