Yussuf Abdi Said
Yussuf Abdi Said
Yussuf Abdi Said
SYSTEM
A Paper
Submitted to the
Graduate Faculty of
the
UMMA
UNIVERSITY
SCHOOL OF
BUSSINESS AND
TECHNOLOGY
By
AUGUST 2022
UMMA UNIVERSITY
Graduate School
Title
DICT/2021/47338
Electronic commerce, also known as ecommerce is a type of industry where buying and
The purpose of this application is to bring knowledge to students about ecommerce and
how an interactive ecommerce application can be designed from scratch using client-side
languages, such as JavaScript and HTML, combined with the server-side Java language through
Java Server Faces. The server side, mostly Java, contains all the implementation related to
setting up the database, creating session models for joining different user-interface (UI) pages,
calculating the shipping costs and sales tax, etc. It is responsible for taking information from the
database and making it available to the UI by mapping the category or item ID to the respective
IDs stored in the database. The client side is responsible for showing the entire user interface,
iii
ACKNOWLEDGMENTS
I would like to express my deep sense of gratitude and convey thanks to everyone who
helped me and supported during the completion of this project and my research paper. First, I
would like to express a deep sense of gratitude to Mr Felix Wasike for helping, guiding, and
supporting me Diploma certificate and research completion. I also convey thanks to my all
committee members for helping me from time to time and for being on my committee. I
acknowledge my department for providing the courses and a great atmosphere that helped
complete different chapters of this paper. I especially thank my supervisor, Mr Felix Wasike for
supporting me and my concepts and for allowing me to do something the way I liked, as well as
my company, fiza &amina, for helping me develop the skills necessary to design this
application as part of my diploma research. Last but not least, I would like to thank my family
members for their constant and unrelenting support towards my education and for their impartial
love for me. I would also like to thank my friends, without whom this project would have been
impossible.
iv
TABLE OF CONTENTS
ABSTRACT..................................................................................................................................iii
ACKNOWLEDGMENTS.............................................................................................................iv
LIST OF TABLES.......................................................................................................................vii
LIST OF FIGURES.....................................................................................................................viii
CHAPTER 1. INTRODUCTION..................................................................................................1
1.1. Motivation..........................................................................................................................2
CHAPTER 2. OBJECTIVES.........................................................................................................7
2.1. Requirements Analysis.......................................................................................................7
2.1.4. Constraints................................................................................................................12
v
2.1.8. Software System Quality Attribute..........................................................................16
CHAPTER 3. IMPLEMENTATION...........................................................................................17
3.1. Detailed Scope..................................................................................................................17
3.2.3.Class Diagram...........................................................................................................31
CHAPTER 4. TESTING.............................................................................................................57
4.1. Methodology.....................................................................................................................57
4.3.Test Cases..........................................................................................................................59
4.4. Results..............................................................................................................................65
REFERENCES.............................................................................................................................69
LIST OF TABLES
Table Page
vi
3. List of Test-Case Results. ........................................................................................................ 65
vii
LIST OF FIGURES
Figure
12. Screenshot of the Database: Orders/Ordered Products Before Placing Order.. .....................
13. Screenshot of the Database: Orders After Successfully Placing an Order. ...........................
14. Screenshot of the Database: Ordered Products After Successfully Placing an Order. ..........
viii
ix
CHAPTER 1. INTRODUCTION
smallscale business and its sustenance with competition from the well-established and
settled/brand owners. Most often, even if the quality of the product is really good, due to a lack of
advertisement or business at the small scale, it just becomes another face in the sea, and the
product does not reach a larger group of customers. In fast paced life of today when everyone is
squeezed for time, the majority of people are finicky when it comes to doing physical shopping.
Logistically, a consumer finds a product more interesting and attractive when they find it on the
website of a retailer directly and are able to see item’s details online.[4][5] The customers of today
are not only attracted because online shopping is very convenient, but also because they have
broader selections, highly competitive prices, better information about the product (including
people’s reviews) and extremely simplified navigation for searching regarding the product.
Moreover, business owners often offer online shopping options at low rates because the overhead
expenses in opening and running a physical store are higher. Further, with online shopping, their
products have access to a worldwide market, which increases the number of customers from
different ethnic groups, adds customer value, and overall sustainable in the marketing.[8]
Online web stores, such as Amazon and eBay, have gained huge popularity over the years
because one can buy almost everything at these stores. These web stores also give an opportunity
to a lot of small-scale companies and manufactures to reach the global market and to directly sell
their products to people without involving different other companies or middlemen before their
product can reach the shelves of a physical store. Further, instead of using the available platforms,
manufacturers can bring a concept of designing their own web store to sell their products directly
to the masses.
1
1.1. Motivation
The motivation for designing this shoe store came because I love online shopping rather
than spending lot of time at physical markets. Further, using the available stores to sell the
products, there is also the possibility of designing one’s own customized shopping-cart
application from scratch because custom-designed platforms are expensive. Moreover, I value
recent learning about the Java and JavaScript programming languages as well as seeing how
powerful and dynamic they are when it comes to web designing and applications. Apart from
helping computer science students understand the concepts of web-application designing, it would
be very easy to incorporate the idea of using programming techniques from the available visuals
to understand how a piece of code appears on a user interface. The languages used to build this
application are JavaScript, HTML, and Java because I found them to be extremely useful while
2
1.2. Aim of the Software
This software is developed to help computer science students learn about application
designing using JavaScript and HTML from their basic capabilities. This application allows the
student to understand the basics about the appearance of a first web page and how a complete
working application can be built from scratch. It allows students to understand the concept of
user-integrated graphics and how JavaScript can be embedded into HTML. Further, it gives
insight about how the client-side language interacts with the server-side language, Java, and
finally with the database. This shopping-cart application is designed, primarily, for computer
science students to learn and understand the concept of application development, and can also be
used to teach ecommerce and web-application topics. The application can be downloaded and
installed on different machines, and students can view the source code for all the different parts
shown on the UI to visually understand how a particular piece of code works. This shopping-cart
application is very versatile and can be enhanced by adding more functions and modified graphics
The history of ecommerce shopping carts began immediately after the World Wide Web,
or WWW, became a major medium to communicate information around the world. Ecommerce
shopping-cart applications allow consumers to buy goods or services directly over the internet
using a web browser. This online shopping evokes the business-to-consumer (B2C) process
where a consumer buys directly from the business. The process where a business buys from
shoppingcart applications using B2B process are eBay and Amazon, both of which were
launched in 1995. At present, most users of these online shopping-cart applications are people
3
who have higher levels of education, have exposure to technological advancements, and are in a
better income group. Such users develop a positive attitude towards these convenient shopping
techniques.[7] According to a study in December 2011, Equation Research surveyed 1,500 online
shoppers and found that 87% of tablet owners made online transactions during the early
Building a new successful shopping cart is simple because of high competition in the
market, and the designer of a shopping-cart application must consider the information load,
complexity, and novelty.[9] Complexity refers to the number of features available on the shopping
cart and the levels of marketing, whereas novelty involves the unexpected or unfamiliar aspects
of the site. A designer must also consider the consumers’ needs and expectations. A userfriendly
design is very critical to the success of any shopping-cart application because, unlike physical
stores, consumers at online stores come from all ages, genders, and cultures.[10] Logistics clearly
says that, to have a successful and profitable online shopping application, businesses have to
spend a significant amount of time and money for designing, developing, testing, and
maintaining the application. Apart from the high-class design and user interface, a good practice
A typical shopping cart should contain certain features such as adding items to the cart and
checking out those items using the available payment methods. Most shopping-cart applications
are implemented using HTTP cookies or query strings, and an HTML setup is required to install
the shopping cart on the servers that ultimately hosts the site on the internet. Most of these server-
based applications require data related to the items added in the shopping cart to be kept in a
session object which can be accessed later and manipulated dynamically because the users can
add or remove one or more items from the cart. Most simple shopping-cart applications do not
4
allow checkout to be done before any items are added to the cart. Data are often stored in an
external database or application-based databases which can be accessed in real time by the
application administrator.[12]
languages. Choosing a development platform and language depends on policies set by the
company for which the application is being designed. It also depends on several other factors
which are very important when considering the platform to design an application, for example,
how portable the application will be after being built or if the application is open sourced. Java is
chosen for this application because various reasons: it is a simple, robust, and cross-platform
language. Applications written in Java can be transported and run on any environment, be it MAC
or Linux, because Java programs are compiled into platform-independent byte codes.[11] Because
of the robustness of Java, it is a very safe language, as they provide exception handling and a layer
method to communicate with the database, which prevents the system from crashing easily.
Another very important factor from the development point of view is that the Java language is
object oriented, where everything is treated as an object and where class methods are
implemented instead of functions or procedures, which makes it very simple to understand the
code.
Several Java shopping-cart applications were examined, and implementation details were
compared with the proposed design for this application to build an even simpler architecture was
developed which is very easy to understand from the learning perspective. Some online shopping
• SoftSlate Commerce[12]
• Commerce4j[13]
5
• Cs.Cart[14]
• Apache Ofbiz[15]
These applications are designed for industrial purposes to generate revenue by providing
these applications to customers looking to launch a website for their respective businesses.[17] The
application proposed in this paper is more focused on developing a simple, yet complete,
application specifically designed for computer science students to learn the basics about
application design and development. This application performs all the basic functions that the
above-mentioned applications do, such as selecting an item and adding it to the shopping cart,
user login or registering, checkout of the item, etc. Other functions that can be added to this
application are proposed in the future work, and they would be necessary under a more complete
and complex design. The final application is expected to teach students enough to start them on a
The rest of the document is divided into three parts: Objectives, Implementation, and
Testing. The Objectives chapter lists the need for building the system. It provides use cases to
help the business and technical users with their understanding. It also gives a detailed explanation
for each use case to help with design and implementation, and outlines the constraints regarding
the software. The Implementation chapter contains the detailed design of the system, including
the Class Diagram, Activity Diagram, and Component Diagram. This chapter also includes a
detailed explanation for each component as well as the interaction of the class and its components
with each other when carrying out certain tasks, besides software’s mock screen shots.
6
CHAPTER 2. OBJECTIVES
All the steps required in the software-analysis process related to this project (product
assumptions, and dependencies for the online shopping cart application) are described in the
following sections.
The requirements analysis and gathering processes are critical for the success of any
determines the tasks that are required to determine the needs and conditions to design a new
product or to make modifications in any existing product/application. This process considers all
the stakeholders’ conflicting requirements, and analyzes the documentation and validation of the
system. The requirements should be actionable, measurable, testable, and related to the defined
needs of the system design. From the software-engineering perspective, requirements analysis is a
three-step process.
includes the task of identifying various requirement types from stakeholders or from project
documentation.
clear, complete, and consistent. The analysis also handles any ambiguous requirements that do
not clearly state what needs to be implemented, which could create a loss of resources and
Requirement analysis requires identifying the stakeholders and taking their needs into
account to help them understand the implications of designing the new system, along with
7
what modules are worth implementing and which ones are more cost efficient, and then to
identifying the use case which is being used for the project, can be utilized.
Stakeholder analysis says that, to clearly gather the requirements of the project, analysts
first need to identify the stakeholders. Stakeholders are people or organizations that have a
valid interest or use in the system. The steps to identify the stakeholders are as follows:
Once the stakeholders are successfully identified, interviews are conducted through
different processes; the needs and requirements of the system are identified, and a
requirements specification document is prepared. The document is then discussed with the
major stakeholders to identify any ambiguity with the requirements and understanding of the
system.
forms, including summary lists, natural language documents, visual documents, use cases,
different ways according to the stakeholders’ need, helping to create a clear contract between
development and business. The following sections include the different categories of
8
requirements specification document that are essential for designing this application: the
Internet Explorer 8.0 and above, Mozilla Firefox 2.0, and Google Chrome.
The two interface types found in the online shoe store are as follows:
1. User Interface: Users are able to view the home page of the shoe store, browse the different
categories, browse and add any number of items from any categories in the shopping cart,
look for information about each product, delete the items in the shoe store, save the store for
later viewing, check out or continue shopping after adding the item to the cart, and check out
2. Admin Interface: The administrator is able to view the users’ information that was entered
during checkout in the database, can update the information, price, shipping costs of the
Both interfaces are described, in detail, in the External Interface Requirement section of
Chapter 3.
The online shopping-cart application shall provide minimum hardware requirements. The
following hardware configurations are required for a PC using the online shopping-cart
application:
• Pentium processor
9
• 32 MB of free hard-drive space
• 128 MB of RAM
This section lists the requirements that are needed to run the system efficiently. The
operating system needed for the system to run effectively, the interface to run the application, the
driver for running Java web applications, the integrated development environment to develop the
application, and the third-party tool used for editing purposes are as follows:
2. Web Brower: Internet Explorer (8.0 and above), Mozilla Firefox (3.0 and above), or Google
Chrome
The online shoe store would have the following basic functions:
1. Display all the categories available for shopping on the system’s main page.
2. Display all the items linked to each category listed on the main page.
3. Allow the administrator to add new items to the existing list of available items.
7. Allow the administrator to view and edit information about each user that checkouts the items
The users of the online shopping-cart application, based on their roles, are customers
(users) and the administrator (owner). These users are identified based on their experience and
technical expertise.
1. Admin: The administrator is the owner of this online shopping-cart application. One must
have a basic understanding of computers and the internet as well as prior knowledge for
operating the eclipse and Java programming languages. The administrator is responsible for
maintaining all the training documents required for the system. The administrator can perform
• Assign or change the price of the items, update the items in the list, and delete the items.
2. Users: The users of this online shopping-cart application are all customers who would shop
to test the application. These users are anyone with shopping experience and the know-how to
browse through a shopping-cart application. They must have basic understandings about
computers and the internet. The users should be able to perform the following functions using
this system:
11
2.1.4. Constraints
1. Hardware Limitations: The minimum hardware requirement for the system is 128 MB of
2. Accessibility: Initially, the software should be available as a desktop application for a small
3. Others: The application should be built using Java and JavaScript inscribed in HTML, and it
should, initially, be accessible through the eclipse IDE and later published on a server.
1. Users and the administrator are accustomed to the paper-based system and would require
3. We assume that system users adhere to the system’s minimum software and hardware
requirements.
4. This system will use third-party software, and it is assumed that system users are familiar with
the software.
This section contains details about all the software that is required for designers to create a
system to satisfy the users’ requirements and for testers to test the given requirements. This
section contains the interface description of each GUI for the different system users. These
sections also give descriptions about all the system inputs, all the functions performed by the
12
2.1.6.1. Functional Requirements
This section contains the requirements for the online shopping-cart application. The
functional requirements, as collected from the users, have been categorized as follows to support
1. Educational Purpose: The main purpose of this online shopping-cart application is to teach
computer science students the basics of the Java, JavaScript, and HTML programming
• FR01: The students shall be able to view the source code for the entire application.
• FR02: The students shall be able to, individually, view and understand the code for all
• FR03: The students shall be able to debug the application’s source code using Firebug,
which is an online tool to inspect, edit, and monitor HTML, CSS, and JavaScript requests
2. User: View Categories and Items: The users shall be able to see the home page of the online
shopping-cart application when they first run the program. The users shall be able to view the
different categories, select categories, browse through the items in each category, and add
items to the shoe store. The users shall be able to view the shopping cart and more
• FR04: The users shall be able to view the categories on the application’s home page.
• FR07: The users shall be able to view more information about an item before adding it to
the cart.
13
• FR08: The users shall be able to able view the shopping cart.
• FR09: The users shall be able to browse through the available items.
3. User: View Shoe Store: After the first run of the application, the users shall be able to see
their designated home page. After browsing through the items and adding items to the
shopping cart, the users should be able to view the items in the shopping cart. The users shall
be able to check out or continue shopping. The users shall be able to delete items from the
cart.
• FR010: The users shall be able to view the items added to the cart.
• FR011: The users shall be able to check out with the current items in the cart.
• FR013: The users shall be able to delete items from the cart.
• FR014: The users shall be able to check out items only when there are items in the
shopping cart.
• FR015: The users shall login or register using the user authentication form.
• FR016: The users shall not login or register if the information is incomplete or invalid.
• FR017: The users shall place an order by completing the information in the order form.
• FR018: The users shall not be able to place an order if the information in the order form is
invalid or incomplete.
14
8. Admin: Add/Update/Delete Shopping Items
• FR020: The administrator shall be able to add new items to the list of shopping items.
• FR021: The administrator shall be able to modify/update an item’s price and description.
• FR022: The administrator shall be able to delete items from the main page of the
shopping-cart application.
• FR023: The administrator shall be able to view the entire history of the checked-out items.
• FR024: The administrator shall be able to view the entire history for the users who
This section lists the performance requirements expected from the online shopping-cart
application.
1. PR01: The users shall be able to add an item to the cart in fewer than 5 seconds.
2. PR02: The users shall be able to view information about an item in fewer than 5 seconds.
3. PR03: The users shall be able to check out the items in the shopping cart within 10 seconds
4. PR04: The navigation between pages shall take fewer than 5 seconds.
5. PR05: The application shall be able to do a validation check on the information provided in
the user-authentication form and the place-order form to avoid false or incomplete
information.
This section lists the design requirements for the online shopping-cart application.
15
1. DC01: The user interface (UI) must have specific fonts and font sizes. The system shall match
the fonts and font sizes used for all the pages of the application.
1. Integrity
• QA01: The authorized user shall be allowed to access the online shopping-cart
application.
• QA02: Based on the user type, the online shopping cart application shall provide a
userspecific interface.
2. Correctness
3. Availability
• QA04: The system shall be made available to the user/administrator year round.
4. Robustness
• QA05: The system shall be able to save items to the shopping cart.
16
CHAPTER 3. IMPLEMENTATION
This chapter includes the detailed design used to build the online shopping-cart
application. The system's design is used to create the functions and operations of the gathered
requirements in detail, including screen layouts, business rules, process diagrams, and other
documentation. The output of this chapter describes the new system which is defined as a
collection of modules and subsystems. This design stage takes the initial input requirements that
were identified in the approved requirements specification document. For each requirement, there
is a set of one or more design elements that are produced using the different prototypes. These
design elements describe the desired software features, in detail, including functional hierarchy
diagrams, screen layouts, activity diagrams, and class diagrams. The intention of these diagrams
is to describe the software in detail so that the system can develop the application with less
additional design input. The system’s mock screen shots are shown later in this chapter.
This project is supposed to be delivered in three phases, with each phase being an add-on
1. In the first delivery, the application must be able to add an item to the shopping cart and
case.
17
2. The application must be able to check out the items in the cart.
• Continue shopping.
4. The application must bring up the order form for the check out.
This section contains the system use-case diagram for the online
shoe store and also has a detailed explanation for each use case in the system.
The system’s use case shows the user a detailed view of the system and how the actors
would interact with each other and with the system. The explanation for each use case is then
provided below the system use case for the administrator (Figure 1) and the user (Figure 2),
helping the user to understand who are the actors areas as well as giving the description for each
use case along with its pre- and post-conditions that should be satisfied once the use case is
18
Precondition: Run the application.
Post-condition: The user successfully runs the application and is able to view the home page
Basic Flow:
Use-case description: This use case details the category for selecting a process where the user
can browse through the different categories and select one category to view items.
Precondition: The user/administrator successfully runs the application to view the home page
category.
Basic Flow:
Use-Case Description: This details the item-adding process for the system to access it. The
user should be able to add items to the cart and view information about the item.
Precondition: The items available for shopping are available for the user to browse.
Basic Flow:
20
Use-Case Description: This use case helps the user to view the shopping cart in the
application.
Precondition: None. The cart can be viewed with or without adding any items.
Post-condition: The user successfully adds the item to the shopping cart.
Basic Flow:
• View cart
Exceptional Flow:
• Select a category
21
Use-Case Description: This use case helps the user to decide whether he or she would like
to continue shopping after adding the item to the shopping cart or when he or she views the
empty cart.
Post-condition: The user is successfully able to view the shopping cart with the option to
continue shopping or to check out when there are items in the cart, or to continue shopping
Basic Flow:
• View cart
Exceptional Flow:
• Select a category
• Continue shopping
22
6. Use-Case Number: US-006
Use-Case Description: This use case helps the User/Admin to check out items from the
shopping cart.
Precondition: There is at least one item in the shopping cart to cause the checkout button to
appear.
Post-condition: The user is able to click on the checkout button when there are items in the
cart.
Basic Flow:
Exceptional Flow:
23
7. Use-Case Number: US-007
Use-Case Description: This use case helps the User/Admin to check out items in the
Precondition: There is at least one item in the shopping cart to check out the items and to
Basic Flow:
• Login/Register.
Exceptional Flow:
• Login/Register fails.
Use-Case Description: This use case helps the User/Admin to check out items in the
form.
Post-condition: The user is successfully able to check out items using the order form.
Basic Flow:
• Login/Register.
Exceptional Flow:
• Login/Register.
Use-Case Description: This use case helps the administrator to view the items, the user’s
Precondition: The administrator is able to connect the database controller when he or she first
Post-condition: The administrator is successfully able to view the database with the user’s
Basic Flow:
This section lists the activity diagram and describes the flow of activities in the system. A
detailed description is then given after the figure for each activity. Figure 3 provides the overview
26
The figure below demonstrates the activity flow for this online shoe store. The flow of the
application is similar for both the user and administrator. The flow begins when the user first
runs the application home screen online shoe store that appears in the web browser. The user can
browse through the available list of categories and can choose either to select a category or to
directly view the cart. In the category, a user can select view more information for details about a
particular item before deciding to add it to the shopping cart by clicking on the cart icon next to
the item. The user can then decide to either continue shopping by clicking the continue shopping
button or can check out by clicking on the checkout option. If there are no items in the cart, then
the user does not have an option to click checkout. The user can check out after doing the user
authentication by logging in with the username and password. Once the user successfully
logins/registers, the order form, where the user can put the correct information to place the order
appears. If the user includes incorrect or incomplete information, then placing the order is not
allowed. After the user successfully inputs the correct information, placing order is successful,
and the user can see the success message. The additional flow step for the administrators is that
they can view the user’s information, the user’s checkout, and the product details by using the
27
Fig. 3. Activity Diagram for Online Shoe store.
3.2.3. Class Diagram
1. User Authentication: This class is utilized to get user information from the database and is for
authenticating the users. The class diagram in Figure 4 shows the methods that are used in this
28
Authenticate User: This message is used to authenticate a particular user who has provided
the login credentials and wishes to login in the system. This method checks the credentials in
the database.
Check User Name: This method checks to see if the provided username already exists in the
database. If there is an existing user with the same name, then the user is prompted to select
Register User: This method allows a new user to register for an online shopping-cart
account by entering a valid username and password. If the username already exists in
Login User: This method allows the existing users to log in to the database with the
2. DB Controller: This class is used for getting users and product information from the database,
and it is also used to update the database with the information about new-user registration,
Initialize DB: This method allows the initialization of a database on the first run of the
application.
Retrieve Items List: This method fetches all items from the code/workspace into the database
Retrieve Category List: This method retrieves the list of all categories that are available for
Retrieve User’s Details: This role locates all the registered users in the database and also
fetches any new user who registers by completing the user-authentication form.
29
Get Order Details: This role updates the row in the database with the details of the user who
Get Ordered Product Details: This role inputs the details of the order once the items are
checked out and the order is successfully placed. This role updates the row in the database to
3. Place Order: This class is used to process all information regarding the order of products.
Get Checkout Information: This method provides information about items in the shopping
cart once the checkout method is called. This will further invoke the user-authentication
method.
Get User Authentication: This method fetches the user-authentication information. The
place-order class is invoked once all three methods are successfully called. If the user
Retrieve Order Form Information: This method is executed once user authentication is a
success. This method evaluates an order form on the UI for dynamic input from the user. If
any of the information is incomplete or is invalid, then an error message is depicted, and the
4. Cart: This class invokes the shopping cart. This class can be called in cases when no items
are added to the cart, when items are already there in the cart, or when the user adds an item to
the cart.
Get Items: This method retrieves information for all the items that the user adds to the
shopping cart.
30
5. Checkout: This class invokes the checkout button. The checkout class is only called when
there are items in the shopping cart. In the case of an empty shopping cart, the checkout class
Retrieve Cart Info: This method retrieves the shopping cart’s information if there are items
Get Items: This method gets all the items in the shopping cart. If the count of items in
shopping cart is greater than 0, then this function updates the card information, indicating
that cart is not empty which then calls the checkout class.
This section contains the implementation details for different packages and classes of the
shopping-cart application. It also contains the coding snippets that help computer science students
understand what a particular section of code represents. The following steps are required to run
2. Configure the tomcat server, and import the project file into Eclipse IDE
3. In the package explorer, expand the database package (Figure 5), and run
4. Once the JDBC connection is established using the database, run the default.xhtml
class from the web-content package that initiates the tomcat server and runs the application
31
Default.xhtml is a client-side implementation and is responsible for displaying the
application’s default main page. The code is implemented in HTML and JavaScript which calls
into the Master.XHTML which contains the template for the user-interface display. The coding
snippet in Figure 7 shows the setup of the main default page that contains the application title and
<ui:composition template="/WEB-INF/templates/Master.xhtml">
<ui:define name="Title">
Online Shoe store
</ui:define>
<ui:define name="ContentPlaceHolder1">
<script>
document.write("#{defaultPage.getCategoriesDisplay()}");
</script>
</ui:define>
</ui:composition>
</html>
Fig. 7. Implementation of the Default Page for the Shoe store Application.
The shopping-session bean represents server-side implementation of this online shopping-
cart application. This bean's client can add or remove an item or can retrieve information from the
database. All session beans require a session model that maps the item ID with the one described
in the database. The business interface for this online shoe store is a fairly plain Java interface
that defines all the business logic implemented in the session-model class. The primary purpose of
this session model is to run business tasks for the stakeholders. The snippet in Figure 8 describes
the session model used in the application code which is being mapped to the controller- and
server-side functions for calculating the sales tax and validating the form information.
32
package com.gupta.shoe store.session;
33
BigDecimal total = BD_ZERO;
for (final Product product: products) total = total.add(product.getPrice());
orderTotal = total; final BigDecimal salesTaxRate
= (zip == null) ? BD_ZERO : getSalesTaxRate(zip);
salesTax =
total.multiply(salesTaxRate).round(ROUNDING_POLICY).setScale(2);
finalTotal = total.add(salesTax).add(deliveryCharge);} public
final Products getProductsForCategory() {
return
MODEL.queryProducts(COL_CATEGORY_ID,categoryId);} public final
void addProduct(final String id) { final Product product =
MODEL.getProduct(id); if ((product == null) ||
products.contains(product)) return; products.add(product);
calculate();
orderInProgress();}
public final void deleteProduct(final String id) {
final Product product = products.removeById(id);
if (product != null) calculate();
orderInProgress();}
public final User getUser() {return user;}
public final boolean isLoggedIn() {return user != null;} public
final User login(final String username, final String password) {
user = MODEL.getUser(username,password); return user;}
public final User register(final String username, final String password) {
user = MODEL.registerUser(username,password); return user;}
public final void setCategoryId(final String id) {
categoryId = id;}
public final String getCategoryName() { return
(categoryId == null) ? "Online Shopping Center" :
MODEL.getCategories().getCategoryName(categoryId);}
public final Products getProducts() {return products;}
34
public void reinitialize() {
products.clear();
setZip(null); salesTax =
BD_ZERO; deliveryCharge =
BD_ZERO; finalTotal =
BD_ZERO;
setOrderPlaced(true);
}
}
Fig. 8. Session Model Code Snippet (continued)
This section describes the different interfaces for the online shopping-cart application. It
contains a detailed description about each interface along with a screen shot of the interface.
1. Home Page: The home page of the application (Figure 9) is common to all the system
users/administrators. This interface is available through the web application. At the time of
logging into the home page, the page shows the categories available for shopping. By default,
Entertainment
Each category links to an individual page containing the items related to the category to
which it is assigned.
35
Fig. 9. Screenshot of the Home Page.
2. Items Interface: This interface links all categories to an individual page that contains items
related to a particular category. Inside each category page, there are items which can be
browsed and added to the shopping cart. There is a button/link back to the home page that
would return the user to the application’s main page, showing the categories, and a user can
then choose to browse another category or directly view the cart to check out. There are six
categories on the main page, and each category contains six items in the user interface that
are similar to the main page. A similar page structure is used for both the home page and the
items page. There is a separate page for each category’s items; the pages are joined using
Java-server facets. The design and colors for the user interface are implemented by CSS and
HTML tags embedded in JavaScript. The screenshots demonstrate items on each page of the
category. The size of each image on the items page is a thumbnail (70 x 70 pixels). The size
Fi
36
Fig. 13. Screenshot of the Shoes Category.
3. Login Interface: The user has to login/register to the user-authentication form by utilizing the
username and password once the checkout button is clicked to place an order. The login
37
Fig. 22. Screenshot when the Information is Incomplete.
7. Order Form Interface: The order-form page (Figure 23) consists of a form where the
user/administrator completes the personal information, such as name, email address, shipping
address, and phone number, to check out. After filling in the information, the user places the
order by clicking on the place button, bringing him to a final message page indicating that the
38
Place Order: This interface notifies the user/administrator that the order was successfully placed
after the user has submitted the shipping information. The user cannot place an order if the
successfully.”
8. Database Interface: Using this, the administrator can access information for all users who
have placed order of the items in access database table which is automatically updated when
the place-order button is clicked. Figure 26 displays the database with the users’ tab that
contains the information for all the users that authorizes their information using the
userauthentication form. After clicking the refresh button on the users’ tab once a new user
successfully registers, that user’s information is updated on the first row in the database table.
39
.
Fig. 29. Screenshot of the Database: Orders/Ordered Products Before Placing Order.
40
Figure 30 displays informaiton about the user once the order is successfully placed. All the
columns are automatically updated with the appropriate informaton that was used on the order
Fig. 30. Screenshot of the Database: Orders After Successfully Placing an Order.
Figure 31 displays the ordered-products table in the database that contains information
about all the ordered products. This table displays all items that have been successfully checked
out. For example, in this screenshot, the user has ordered 1 item from the clothing category with
a price of $45 and another item from the jewelry category with a price of $250. Similarly, if more
successful orders are placed, then this table is updated, and the administrator can view the
This chapter includes the methods that were used for testing, validating, and evaluating the
system. The Conclusion and the Future Work for the software are also given.
4.1. Methodology
With this testing approach, all the specs were ready for a prototype, and a plan was already
built to be shown; the tester started writing his or her code and saw if he or she could obtain the
same results that the specs mentioned. This way, the specs were tested on each prototype, and
continuous testing was applied. This also helped to minimize the testing that would have to be
implemented at the end of the software lifecycle. In the process, all aspects of the software were
2. Create a document with the detailed requirement definition, an activity diagram with a
description of the flow, database tables to be used, a component diagram, and a description of
each component with the precondition and tables that would be affected by the component.
3. Give the document to the tester, and work with the tester while he or she writes the code to
check if the steps in the document can be implemented and if the result of each use case can
be achieved.
4. If the tester finds a step difficult to implement or thinks he or she is missing additional
5. Ask the tester to log on all the errors and difficulties he or she encountered while working on
43
6. Once the prototype is done and the results between the developer’s prototype and tester’s
prototype match, work on the other requirement, and expand the prototype to final software.
7. When the testing approach was implemented, the following pros and cons regarding the
• Different viewpoints for the same problem can lead to varying results.
This section lists the functional requirements used for creating the test-case table, the test
cases that were used to verify the interface table, and the results for the test-cases table.
Table 1 lists the functional requirements for the interface built for the online shoppingcart
The following list includes the steps that should be taken by the user, the conditions that
should be met for the successful execution of the test case, and the end result that should be met
• End Messages/Result
2. TC02: To test, the users can view the items they add to the shopping cart.
45
• Description of Purpose: The system shows all the saved items in shopping cart for a
particular user. The user can choose to check out the items or go back to continue
shopping.
• Input: The user adds an item to the shopping cart from any of the available categories.
• Output: The shopping-cart page pops up, showing the item that is added by the user.
• End messages/Result
user is able to add that item to the cart, and the item shows up in
3. TC03: To test, the Admin can upload new/revised categories and items.
• Description: The Admin can add or upload more items to a category or can add a
completely new category. The Admin can also modify the price, information and shipping
• Input
Selection=Categories
• End messages/Result
=existing), then display the modified items or categories in the shopping cart.
46
ii. If (User type == “Admin” &Selection == (Items || Category) & Item/
cart.
4. TC04: To test, the Admin can view all the users registered in the system.
• Description: The Admin can view all the users who are registered in the system in the
database.
• Input
Selection==View Database
• End messages/Result
i. If( login type == “Admin” & Database.clicked = ‘true’ and list.clicked=true and
5. TC05: To test, the Admin can view the information about all users who successfully placed an
order.
• Description: For the Admin, a database, which contains all information about the users, is
created after each user checks out the items and successfully places an order.
• Input
47
iii. Selection==DatabaseUsers Info
• End messages/Result
and userlist.exists=true), then display the database containing the user’s personal
information.
6. TC06: To test that users cannot checkout with an empty shopping cart.
• Description: If there are no items in the shopping cart, the checkout button is disabled, and
the users cannot click the checkout button. A user cannot check out with an empty
cart.
• Input
• End messages/Result
then display the empty shopping cart with no items and a disabled checkout button.
48
ii. If (login type == “Users” & Items.AddToCart = ‘true’ &ViewCart.clicked=’true’
&Checkout.clicked==’true’), then display items in the shopping cart with the checkout
7. TC07: To test that users are not able to submit an order form if the information in any of the
fields is invalid.
• Description: The users cannot place a successful order if any information on the order
form is invalid (i.e., A zip code is a 5-digit number, so any non-numeric value will be
• Input
• End messages/Result
andOrderFormInformation.Valid==’false’ or
andOrderFormInformation.Valid==’true’ and
49
4.4. Results
This section lists the results that were produced by running the test cases. Table 3 lists the
test cases that were used while testing the interface along with the expected result and the actual
50
CHAPTER 5. CONCLUSION/FUTURE WORK
This chapter includes the Conclusion reached after creating the current version of the
software to meet the system objectives. The comparison is done between the system that was
built and original requirements that were designed at the beginning of the project. It also
describes the Future Work that is intended to be accomplished with later versions of the software.
5.1. Conclusion
The main objective of the application is to help computer science students understand the
basics of Java, JavaScript, and HTML. By browsing through the application and looking at the
code for each graphical interpretation, students should be able to easily understand the
implementation. The following results have been achieved after the completing the system and
1. Should allow computer science students to browse through the code and application:
This is achieved when users, i.e., computer science students, are able to run and install the
application. When they run the application, they can browse through the implementation of
different objects.
2. Should allow users to browse through different product categories: This is achieved when
the user first runs the application and is directed to a home page that has categories available
for all the different item types that can be purchased with this online shopping-cart
application. The user can browse and click on any category to view the items listed for that
particular category.
3. Should allow users to save items to the cart and also to view detailed information about a
particular item: The users can add any number of items to the shopping cart from any of
51
the listed categories by simply clicking the cart icon at the right-hand corner of each item.
Users can view a detailed description of the item and price by clicking on the more icon next
4. Should allow users to check out the items: This is achieved when users click the checkout
button in the shopping cart. The checkout button disappears when there are no items in the
shopping cart. This implies that users can only click the checkout button when there are items
5. System users should be able to place the order by filling out the order form: This is
achieved when a user clicks the checkout button and an order form appears on the same page,
showing the detailed order total with shipping charges and sales tax, which requires the user to
complete all the information to successfully place an order. The user is not able to place an
6. The user should see a success message after placing an order: This is achieved when a
user successfully places an order by completely filling in all the rows after which he or she
can click the place-order button. The user receives a message that the order has been
successfully placed.
The following section discusses the work that will be implemented with future releases of
the software.
1. Detailed categories: Future work could involve adding more categories which are more
2. Watch/Wish List: Work can add a watch list or wish list so that users can add an item to a list
to watch for item prices to go down or to see when there is a sale on any of those items.
52
3. Enhanced User Interface: Work on enhancing the user interface by adding more
userinteractive features.
4. Recommended Items: Add a bar that would display the most-recommended items which
would depend on the number of times an item has been purchased by any users.
5. Payment Options: Add different payment options, such as Visa, MasterCard, PayPal, etc.,
where a user can also save the card information for later checkouts.
6. Shipping Options: Add different types of shipping options: regular shipping, expedited
7. Recent History: Display the user’s recently browsed items in the recent-history tab.
53
REFERENCES
1. Howe, A. von Mayrhauser, and Mraz, R. T. Test case generation as an AI planning problem.
Automated Software Engineering, 4:77-106, 1997.
2. Koehler, J., Nebel, B., Hoffman, J., and Dimopoulos, Y. Extending planning graphs to an ADL
subset. Lecture Notes in Computer Science, 1348:273, 1997.
3. Treutner, M. F., and Ostermann, H. Evolution of Standard Web Shop Software Systems: A
Review and Analysis of Literature and Market Surveys.
4. Jarvenpaa, S. L., and Todd, P. A. (1997). Consumer reactions to electronic shopping on the World
Wide Web. International Journal of Electronic Commerce, 1:59–88.
5. Peterson, R. A., Balasubramanian, S., and Bronnenberg, B. J. (1997). Exploring the implications
of the internet for consumer marketing. Journal of the Academy of Marketing Science, 25:329–
346.
6. "More Consumers Using Tablets to Holiday Shop [STUDY]." Retrieved on Mashable. December
8, 2011. " http://mashable.com/2011/12/08/tablets-to-holiday-shop/"
7. Bigne, Enrique. (2005). The Impact of internet user shopping patterns and demographics on
consumer mobile buying behavior. Journal of Electronic Commerce Research, 6(3).
9. Falk, Louis K., Sockel, Hy, and Chen, Kuanchin. (2005). E-Commerce and consumer's
expectations: what makes a website work. Journal of Website Promotion, 1:65–75.
10. Elliot, Steve, and Fowell, Sue. (2000). Expectations versus reality: a snapshot of consumer
experiences with Internet retailing", International Journal of Information Management 20:
323–336.
15. Ofbiz, The Apache Open for Business Project., Retrieved on 2013.
"http://ofbiz.apache.org/index.html"
55