Software Design Document
By WebSol
Group A:
Amit Kherwar UB30119565
Danish Naqash UB30115513
Minh Tuan Pham UB30110794
Muhammad Zohaib UB30116387
Riste Sekuloski 30128794
Client Name: Anil Kumar
Version: 2.1
Team Members:
Lecturer: Ahmed Haroon Bhutta
Amit Kherwar UB30119565
Danish Naqash UB30115513
Minh Tuan Pham UB30110794
Tutor/ Supervisor: Bilal Chaduary
Muhammad Zohaib UB30116387
Riste Sekuloski 30128794
Contents
1.0
2
3
4
Introduction ..................................................................................................................... 7
1.1
Scope ........................................................................................................................... 7
1.2
Purpose ........................................................................................................................ 7
1.3
Overview ..................................................................................................................... 7
1.4
Stakeholders ................................................................................................................ 8
1.5
Document Scope ......................................................................................................... 8
1.6
Product Scope.............................................................................................................. 8
Description & Justification ................................................................................................ 9
2.1
Development Languages ............................................................................................. 9
2.2
Benefits & Technical Basis For Design ...................................................................... 9
2.3
Resource allocation ..................................................................................................... 9
2.4
Budget ....................................................................................................................... 10
2.5
Control plan ............................................................................................................... 10
2.6
Risk management plan .............................................................................................. 10
2.7
Non-Functional Requirements .................................................................................. 11
Architectural Design & Design Consideration ................................................................ 12
3.1
Component, Connecters & Interface ..................................................................... 12
3.2
Constraints ............................................................................................................. 12
3.3
Static and dynamic aspects .................................................................................... 13
3.4
Assumptions .............................................................................................................. 13
3.5
System Environment ................................................................................................. 13
3.6
Hardware Environment ............................................................................................. 14
Design Architecture ......................................................................................................... 14
4.1
Waterfall Methodology ............................................................................................. 14
4.2
Three Tier Architecture ............................................................................................. 15
4.2.1
Client Tier .......................................................................................................... 17
4.2.2
5
Logic Tier........................................................................................................... 18
System Architecture and Interface ................................................................................... 18
5.1
Interface identification and diagrams ........................................................................ 18
5.2
Tools and Techniques................................................................................................ 19
5.3
HTML (HyperText Markup Language) .................................................................... 20
5.4
CSS (Cascading Style Sheets) ................................................................................... 20
5.5
MySQL ...................................................................................................................... 20
5.6
PHP............................................................................................................................ 21
PHP code used in the project for getting the data from fields and inserting into products
table: ..................................................................................................................................... 21
5.7
Apache Web Server ................................................................................................... 22
5.8
Design Tools ............................................................................................................. 23
5.9
Design Standards: ...................................................................................................... 24
5.9.1
Header Logo....................................................................................................... 24
5.9.2
Content Area: ..................................................................................................... 24
5.9.3
Left Side Bar: ..................................................................................................... 24
5.9.4
Body: .................................................................................................................. 25
5.9.5
Shopping Cart .................................................................................................... 25
5.9.6
Top Menu ........................................................................................................... 25
5.9.7
Footer ................................................................................................................. 25
5.10
Event Table and Structured Analysis with data flow diagrams............................. 30
5.11
System Context Diagram High-Level Design (HLD) ........................................... 34
5.12
Context Diagram for Highest Level Diagram ....................................................... 35
5.13
DFDs (Data Flow Diagrams) Low-Level Design.................................................. 36
5.13.1 DFD (Data Flow Diagrams) Level 0 ................................................................. 36
5.13.2 DFD (Data Flow Diagrams) Level 0 Administrator .......................................... 37
5.14
DFD (Data Flow Diagram) Level 1 Child Diagram .............................................. 38
5.14.1 DFD level 1 for Login........................................................................................ 38
5.14.2 DFD level 1 for Order ........................................................................................ 39
5.14.3 Use Case Diagram Object Oriented Analysis: ................................................... 40
5.14.4 Log in Subsystem for Customers and Administrator ......................................... 41
5.14.5 Subsystem for Add, Update, Delete, Search products for Users and
Administrator ................................................................................................................... 42
5.14.6 Subsystem of Updating, Deleting profiles for Users and Administrator ........... 43
5.14.7 Subsystem of Payments, Orders , Confirm Payments for Users and
Administrator ................................................................................................................... 44
5.15
Use Case Scenarios. ............................................................................................... 44
5.16
User ........................................................................................................................ 44
5.16.1 User Registration – Intermediate Description.................................................... 44
5.16.2 User Login – Intermediate Description.............................................................. 45
5.16.3 User Logout – Intermediate Description............................................................ 46
5.16.4 User-Search Products – Intermediate Description ............................................ 47
5.16.5 User- Add To Cart – Intermediate Description................................................. 48
5.17
Admin .................................................................................................................... 49
5.17.1 Admin login – Intermediate Description ........................................................... 49
5.17.2 Admin Add Products
– Intermediate Description ........................................ 50
5.17.3 Admin Delete Products – Intermediate Description .......................................... 51
5.17.4 Admin Delete User – Intermediate Description................................................. 52
5.17.5 Admin Log out – Intermediate Description ....................................................... 53
5.17.6 Admin View Order – Intermediate Description................................................. 54
5.17.7 Admin View Payment – Intermediate Description ............................................ 55
5.17.8 Admin Insert Brand/Category – Intermediate Description ................................ 56
5.17.9 Fully developed description example ................................................................ 57
6
Structure Chart Diagram for Order DFD level 1 ............................................................. 59
7
Activity Diagram for whole system ................................................................................. 60
8
Sequence Diagram for whole system ............................................................................... 62
9
Sequence Diagram for admin view orders from customer and confirm orders ............... 63
10
Sequence Diagram for browsing and buying products .................................................... 64
11
ER Diagram ..................................................................................................................... 65
11.1
Data Dictionary...................................................................................................... 65
11.1.1 Data Structure .................................................................................................... 65
12
Relational Schema ........................................................................................................... 69
13
Domain Class diagram ..................................................................................................... 70
14
State Machine diagram for cart ........................................................................................ 71
15
State Machine diagram for customer editing personal details ......................................... 72
16
Deployment Diagram ....................................................................................................... 72
17
Functional Requirements ................................................................................................. 73
Admin Panel .......................................................................................................... 73
17.2
Client Panel: .......................................................................................................... 75
18
17.1
Architecture Design Story Boards Screen Shots ............................................................. 77
Home ..................................................................................................................... 77
18.2
My account ............................................................................................................ 78
18.3
Product ................................................................................................................... 79
18.4
SignUp ................................................................................................................... 80
18.5
Cart ........................................................................................................................ 81
18.6
Login ...................................................................................................................... 82
18.7
Contact us .............................................................................................................. 83
18.8
Front end and Back end of our application............................................................ 84
19
18.1
References ........................................................................................................................ 85
1.0 Introduction
This project is all about the website creation and we have developed the website for
United Australia PTY LTD, in this website we have created the entire layout as per customer
needed, we have provided the all functional requirement. The main aim of this document is to
specify the project plan for Bedding and Linen under the supervision of WebSol team. This
document is going to deliver the brief outline that how project is going to be formed and also
include the milestones and deliverable
1.1
Scope
The main object of the product is to develop the a website for United Australia
Imports Pty Ltd for their online sales because we are in 2000 era where the online shopping is
on boom and we want to develop a complete online website and make a path for the company
to enter into the online world and start selling their product online.
Once they website will be live and people will start buying they can generate more
revenue and get more and more customer and grasp the online market.
1.2
Purpose
The website will provide the complete information of each and every product, and
allow user to see all the detail over website, there will be a shopping cart option that will
allow user to buy the product online and we will setup some feature of different postage that
will be user friendly and allow user to set the preference according to their own need.
1.3
Overview
This project is all about the website which we have made for United Australia Pty
Ltd, the Client name Anil Kumar, basically what he wants from us is the complete website
where he can sell his products and he has given this project to team WebSol and we are five
members working on this project names are mention on the top of documents, the project is
on his final stages as from now onward three weeks are left.
1.4
Stakeholders
In this project there are two stakeholders, Customers and Administrator. Customer is
the person responsible for accessing the website, browsing for products. Accessing details
and checking thoroughly before taking a decision of making a transaction.
While the administrator is the person responsible because of who the transaction can
be made so the most responsible person to put on display and provide the right details for the
products and also dispatching the products once the order while letting the customer also
know the status of the order & time duration according to the receivers address is the
administrator.
1.5
Document Scope
The main object of this document is to take all the requirements from the client & lay
them down for the developer, designer & database administrator to know where to start from
& to have a proper idea of what the client actually wants & what the and the things which
need to made for him are approved by the client with the help of a certain diagrams for the
layout.
this document will later on help further more elaborate the needs and wants of the
client, what was previously decided and also if the developers have actually come up to the
client’s needs or if the client later on tends to make some changes to products if it wasn’t
already document.
1.6
Product Scope
The product scope is to develop an ecommerce website for our client United Australia
Imports Pty Ltd for online sales as the previous website the client had was static and was
never used for online transactions. The previous website was only online to show customer
what they sell and a few types of products were available for the customers to browse through
to have some idea.
Even being in this era where most people buy stuff online and have little to do with
going to actual shops placing orders on phone even becomes time consuming. So our client
wants us to develop a complete online website and make a path for the company to enter into
the online world and start selling their product online. As the new website goes live the client
will have another chance of generating more revenue and to step in to the online market to
make a share in making more customers and to enter the online market again.
2
Description & Justification
This document is elaborates on the software requirement specifications. in this
documents we have tried to explain what the customer will be provided coming to a
consensus with the client needs with the help of the basic layout of a rough layout and
diagrams which the client has agreed upon and wants us to proceed with the provided
designs.
2.1
Development Languages
The website is developed on a PHP platform. PHP is an abbreviation for Hypertext
Preprocessor. It is a server side scripting language used for web development. It works on a
database which is linked to the website. Changes can be made to such a website on runtime.
A database needs to be made in this case to save pictures & details of the products. Also to
keep both of them linked to each other. Also the database stores the details of the customers
when a customer registers itself to make transactions.
2.2
Benefits & Technical Basis For Design
The reason to use PHP as a language for the website was to make changes later on if
the client needs in the long run. The client can ask any person who he wants to put any
other new things later when required in website through this language and will not need
to make a new interface or a website.
For example if in the long run the client plans to link his bank account also for
transactions, client will only need to ask any developer to do so and will not take the
developer much time and the developer will not need to make a new website or anything
and can just make changes and link the bank account of the customer and add it to the
web link.
2.3
Resource allocation
Each team member is indicated with a few certain tasks. The team leader also contact
person will monitor the whole progress.
2.4
Budget
None
2.5
Control plan
A time map will be built to make sure that all the tasks will be done on time. The team
leader would be the person who monitor the progress of each team member, make it publicly
so that the complete team knows the status. All suggestions will be mentioned to make sure
the solution will be made as soon as possible for any errors occurred.
2.6
Risk management plan
The client may request more requirements. This is one of possibility of the project.
The solution is that at the beginning, make all the requirements clear, any extra requirement
will be considered to be in support after the basic product is done.
2.7
Non-Functional Requirements
There are many non-functional requirements for an e-commerce website. Most of the
time computer-based systems perform automated procedures or processes; the same can be
applied even for the simplest website, because it will enable a visitor to navigate around the
site and find the information. But when we have more complex websites that are using
database at back end or PHP programming language to communicate with database and
verify visitors and may automate transactions through e-commerce.
The non-functional requirements for e-commerce website can be many here are few:

Performance or speed of the system

Quality

Environmental requirements or business rules

Size

Ease of use

Reliability

Robustness

Portability
Example:
The technical requirements may address how the page is displayed, the speed, compatibility
with different browsers and hardware platforms.
Website that is database-centred system:
The technical requirements may require developing database, number of records or
processing time.
Security: Users want the system to be secure so they can use that system for purchasing.
Usability: Usability means how much the system is easy to be used. Something that is fancy,
but still that must be usable, providing features that make feel comfortable with it. Usability
may also be associated with the overall impression of security, e.g. the email that receives to
confirm a payment from the website.
Availability: If the site is down for a long time then the system is not stable and user get a
really bad impression.
Performance: Performance of the system in our case website is how website is giving
feedback back to the users so user will know what is going on without being frustrated of
waiting something to be processed
Software Quality Attributes:
The system must be available 24/7,
3
Architectural Design & Design Consideration
3.1 Component, Connecters & Interface
3.1.1.1 Component
- Admin is a component of Person
- Customer is another component of Person
- Credit and cash is a component of Payment
3.1.1.2 Connector
-
A customer can have at least one order
An order can include one or many products
A product only belongs to a brand
A product belongs to a category.
An order “has” a payment.
3.1.1.3 Interface
- Person is an abstract class of admin and customer.
- Payment is an abstract class of Credit and Cash
3.2 Constraints
3.2.1.1 Constraints on interactions
- Customer must have an account to log in before can add to cart and make payment
- Customer must have a valid Paypal account
- Admin must log in an account with admin privilege to execute the content.
- The admin must log in to retrieve and modify customers’ detail.
3.2.1.2 Behavioral constraints
Customer
- The user name must be an email address
- Customer has to provide an image when sign up for a new account.
Admin
- The password must be longer than 8 letters and included at least one uppercase
letter and one lowercase letter.
- Click “Upload” button and chose the file for uploading purposes.
- All fields must be filled before submitted.
3.3 Static and dynamic aspects
3.3.1.1 Static aspects
The website does not contain any static pages.
3.3.1.2 Dynamic aspects
1. Easier design updates
As each part of the site is dependant, therefore changes across the website can be done
easily with once-time changes. In particular, a change on colour or design will be
updated to most pages.
2. More flexible data
The viewer can access and update their personal information easily whenever and
wherever they want.
3.4
Assumptions
In developing this ecommerce website, WebSol assumes the following steps:
1. Client will be able to perform all maintenance once ecommerce is uploaded on server.
2. We will provide user manual how to use the system.
3. Client will setup agreement with ISP where he will like to upload the website.
4. Client will provide and maintain the hardware required.
3.5
System Environment
 Any system can be used to operate the website
 Browser should be the updated one.
 Ram must me of more than 1gb.
3.6
Hardware Environment
For testing the WebSol can use any system, that have XAMP or WAMP installed. When
the project is finished and uploaded to real server it can be accessed by any computers,
laptops. They will have to have internet connections, and browsers that supports HTML.
The client is responsible for setting up the network
and for any hardware maintenance. So on the client side, the software requirement is
simple web browser. The web application provides the html pages and can be able to
understand the scripts such as JavaScript which most modern browsers are compatible
with.
4
4.1
Design Architecture
Waterfall Methodology
Waterfall methodology is being used to design this project, because that’s the heavy
methodology of all the methodologies. This is used to developed whole project, because the
steps are clear in that methodology and allow user to see the clear picture of every step, this
documentation require heavy documentation, this method is done in following sequence first
the part is of designing then developing the document, we are developing the project
following all the methods we have chosen this methodology for following main reasons.
Because we are inexperienced people working on this project, so waterfall methodology
provide step by step process for software development, which make it easy to use.
4.2
Three Tier Architecture
Three-tier architecture is consisted of client tier, logic tier, and data tier. This three tier
architecture shows how the data is requested from the client side or client tier and the main
process will logically be done by logic layer. The last step is the information to be send back
by the particular data layer to the client tier through the logic layer. Data send back should be
in understandable for the user – or user-friendly way. For example no one will understand if
he get this sequence of binary code:
010111011101111011111111:
In short, we can say it is the sequence or series that tells how the different layers switch the
particular request and result.
This architecture gives us more stability and is safer to use rather than other types of
architecture. We as team will propose the client to choose the reliable server and hosting
company because we know due to the heavy traffic to the server the server can be down for a
while and that will distract all the customers and visitors from our site. Also client will need
faster Internet to access smoothly.
Three tiers are listed below:
4.2.1 Client Tier
The topmost layer in this architecture is client tier. It displays the information to the client’s
browser, in readable and understandable format. Users can access information directly using
browser, they can use that information based on their needs. Furthermore users can send
request to the next tier for further data. For this particular project our ecommerce website, the
client tier would be our front end of the website or our index.php page where a lot of products
are listed and user can see and choose from the products. This is displayed because today we
have so many browsers that interpret HTML, Java Script. Different type of browsers (Apple
Safari, Mozilla Firefox, Google Chrome, etc.).
4.2.2 Logic Tier
Logic tier is also called the application tier where the all requests from the client tier side are
handling and processed. It represents the logic of our system. Requests are logically
processed in this layer and information is send back as result to the client. This layer has
provided the secure way to access to the database. It is not the job of client tier to go directly
and manipulate data stored in database all the job need to be passed and done through the
logic tier.
Logic tier doesn’t send client’s request to data tier without checking it first, it checks or
validate the data before do any action. If logic tier finds any problem then it directly will send
back to the client because the some problem encounter. This layer has the greatest role in the
whole architecture.
PHP and Apache server are the technology using in our project.
5
5.1
System Architecture and Interface
Interface identification and diagrams
This software system will be developed as a web application relaying on PHP and MYSQL.
PHP as scripting language will communicate with the database MYSQL processing different
queries. This application will need to interact with a certain web based server with a standard
web browser acting as the client.
Figure 11
The client will use the standard browser. This application will run on a server and must be
available 24/7. The web server will connect to the database.
The main interfaces:

Client -Web server

Server - database.
5.2
Tools and Techniques
Our website will be the product that incorporate different technologies that will
Work together to complete the system functionalities required as below:

HTML

CSS

MySQL

PHP

5.3
APACHE web server
HTML (HyperText Markup Language)
HTML is a markup language and is used to describe the format and structure
of text based information. HTML help us to create web pages with that can be displayed in a
web browser. This technology is
widely and supported by every new browsers.
HTML for this project will be used from client side for displaying the pages. Every user
request to the server will get respond data, and data needs to be in readable format so the user
only using the standard browser (Firefox or IE) to interpret HTML for the GUI.
5.4
CSS (Cascading Style Sheets)
CSS is cascading Style Sheets language and is used to describe how a web pages document is
formatted. CSS mainly focuses on the presentation of any document
written in HTML.
5.5
MySQL
MySQL is a free relational database management system that is
used by many organizations and also can be used by the developers for creating and
manipulating relational database. The MySQL database will be used to store data. This data
can be retrieved, deleted, manipulated regarding client need. MySQL also provides the ability
to backup its data to prevent data loss but also to import any data from external source.
Code from the project for the connection to MySQL database
<?php
$con=
mysqli_connect("mysql14.000webhost.com","a6214611_name","maca12345","a6214611_m
ystore");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
5.6
PHP
PHP is a server-side scripting language and mainly use is for web development but also used
as a general-purpose programming language. It is very good because the PHP code can used
together with HTML code. PHP code most of the time is processed by a PHP interpreter. The
PHP interpreter is located on a web server's. After the PHP code is interpreted and executed,
the web server can send the output to the client. For our project we have used PHP for getting
data from database, updating data, storing and deleting data.
PHP code used in the project for getting the data from fields and inserting into products
table:
<?php
if(isset($_POST['insert_post'])){
//getting the text data from the fields
$product_title = $_POST['product_title'];
$product_cat= $_POST['product_cat'];
$product_brand = $_POST['product_brand'];
$product_price = $_POST['product_price'];
$product_desc = $_POST['product_desc'];
$product_keywords = $_POST['product_keywords'];
//getting the image from the field
$product_image = $_FILES['product_image']['name'];
$product_image_tmp = $_FILES['product_image']['tmp_name'];
move_uploaded_file($product_image_tmp,"product_images/$product_image");
$insert_product = "insert into products
(product_cat,product_brand,product_title,product_price,product_desc,product_image,product
_keywords) values
('$product_cat','$product_brand','$product_title','$product_price','$product_desc','$product_i
mage','$product_keywords')";
$insert_pro = mysqli_query($con, $insert_product);
if($insert_pro){
echo "<script>alert('Product Has been inserted!')</script>";
echo "<script>window.open('index.php?insert_product','_self')</script>";
}
}
?>
5.7
Apache Web Server
Apache web server is http server software and is key for creating and development of the
World Wide Web. Apache runs on a UNIX operating system. Furthermore the Apache is
open source software, so we can use it for our project if we install WAMP.
Apache supports a variety of features and many programming languages including:

Perl

Python

PHP
.
We use Apache as our web server because of its free of cost and we can test our website
locally using the browser.
Now we can access our project if we use our browser
5.8
Design Tools
The tools that have been used to create these diagrams are:

Microsoft Office 2010 (layout)

Online Creatively page for creation diagrams like DFD, E-R Diagrams

Microsoft Office Visio 2010 (Traceability Matrix)

Enterprise Architect( Sequence Diagrams, State Chart Diagrams, Activity Diagrams,
Use Case diagrams)
5.9
Design Standards:
5.9.1 Header Logo
The logo will be located in the header. The logo will
be the United Australia logo in black and white and will be placed in the left side of the
webpage.
5.9.2 Content Area:
#content_area {
width:800px;
float:right;
background:white;
}
Content area will have this attributes. IT will float right and will be with white background.
The width will be 800px and the whole size will be 1000 px.
5.9.3 Left Side Bar:
As we defined the right content area and only 200px left we will assign to left side area with
background color black and this will be the category for displaying different products
categories and brands.
#sidebar {
width:200px;
background:black;
float:left;
}
5.9.4 Body:
All pages of this website will have skyblue color.
body {background:skyblue;}
5.9.5 Shopping Cart
The shopping cart attributes will be displayed in color black and will be above the content
area and that is why they have the same width:800px;
shopping_cart {width:800px; height:50px; background:black; color:white;}
5.9.6 Top Menu
The menu will be placed at the top of the page. The menu will change color to orange when
you place the cursor on the top of one of the titles or mouse hover option.
#menu a:hover {color:orange; font-weight:bolder; text-decoration:underline;}
Result:
5.9.7 Footer
Footer will have copyright information. The Footer will be located at the bottom of every
page and there will be nothing else after the footer.
#footer {
width:1000px;
height:100px;
background:gray;
clear:both;
}
CSS code for our project:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {background:skyblue;}
.main_wrapper{
width:1000px;
height:auto;
margin:auto;
background:white;
}
.header_wrapper{
width:1000px;
height:100px;
margin:auto;
}
#logo {float:left;}
.menubar {
width:1000px;
height:60px;
background:gray;
color:white;
}
#menu {
padding:0;
margin:0;
line-height:40px;
float:left;
}
#menu li {
list-style:none;
display:inline;
}
#menu a {
text-decoration:none;
color:white;
padding:8px;
margin:5px;
font-size:18px;
font-family:COMIC SANS MS;
}
#menu a:hover {color:orange; font-weight:bolder; text-decoration:underline;}
#form {float:right; padding-right:8px; line-height:50px;}
.content_wrapper {
width:1000px;
margin:auto;
background:pink;
}
#content_area {
width:800px;
float:right;
background:white;
}
#sidebar {
width:200px;
background:black;
float:left;
}
#sidebar_title {
background:white;
color:black;
font-size:22px;
font-family:arial;
padding:10px;
text-align:center;
}
#cats {
text-align:center;
}
#cats li {list-style:none; margin:5px;}
#cats a {color:white; padding:8px; margin:5px; text-align:center; font-size:20px; textdecoration:none; font-family:Comic Sans Ms;}
#cats a:hover {color:orange; font-weight:bolder; text-decoration:underline;}
#products_box {
width:780px;
text-align:center;
margin-left:30px;
margin-bottom:10px;
}
#single_product {float:left; margin-left:30px; padding:10px;}
#single_product img {border:2px solid black;}
#shopping_cart {width:800px; height:50px; background:black; color:white;}
#footer {
width:1000px;
height:100px;
background:gray;
clear:both;
}
5.10 Event Table and Structured Analysis with data flow diagrams
Event
Trigger
Source
Customer
log in
Customer
username and
password
Customer
Customer
Add
product
Customer press
add to Cart button
on particular
product
Customer
Customer
Update
Quantity
Visit ‘Go to Cart’
from main page
Customer
Customer
can
Search
products
Type name of the
products in the
search area at the
top of the page
Customer
Customer
can
continue
shopping
Customer choose
to continue
shopping and
adding more
products. Trigger
is continue
shopping button
Customer
Customer
Remove Product
Customer
Activity/Use
Case
Find customer
record by
username and
verify password,
redirect to
relevant platform
Product is added
to the cart for
that particular
customer,
storing
information
about, customer
ID, quantity of
the product
Customer can
change the
quantity of any
products that are
already in the
Cart, info will be
updated to the
relevant Cart
record in the
database
List every
possible item in
the database that
match that
keyword. Each
product stored in
master file for
database has it’s
own keywords
When continues
shopping is
activated then all
products are
listed from
database and
customer can
choose more and
them to cart.
Product is
Response
Destination
The main
homepage
for the
customer
Customer
Options to
proceed to
checkout or
to continue
shopping
Customer
Cart Page
displaying
new product
quantity and
updated
total Price
Customer
Page
displayed
according to
what is
matched in
the database
Customer
Response
will be
redirection
to all
products
page
Customer
Cart page
Customer
Customer
update
profile data(
Image,
Address)
Customer
Delete
Profile
Customer go to
my account
update profile
section
Customer
Customer press
delete account
button in my
account section
Customer
Customer
Make
Payment
Customer press
checkout
Button
Customer
Customer
view his/her
orders
My account/ my
orders section is
clicked
Customer
Customer
Log out
Log out link
clicked
Customer
Admin Log
In
Admin username
and password
Admin
selected from
Cart and
removed. The
query will
update the cart
table with
removing the
specific
product/item
Customer
change his data
and sends query
to update the
customer table
Delete the
profile must be
confirmed by the
system once
again asking if
you want to
proceed with
deleting the
account. If yes
delete customer
from master
table
If there are items
in the payment
then the page
will be
redirected to
PayPal listing all
products that
customer have in
the cart and
asking Customer
to provide
payment details.
refreshed
without
removed
product
New data
for the
customers is
stored in
tables
Session for
that
customer is
destroyed
and
customer
can’t log or
purchase
products
Customer
Customer
After
Customer
successful
or
unsuccessful
payment the
customer
will be
prompt with
the page
displaying if
the payment
goes
through
Get data from
Page with
Customer
the payment and tables listing
orders table from the orders
database for the
particular
customer id
Destroy the
Return the
Customer
session for that
index page
customer id
Find the
Index page
Admin
username and
for Admins
Admin Add
product
Admin press link
insert new
product from the
admin panel
Customer
Admin
Update
Update/Edith
Link is clicked
Admin
Admin can
Search
products
Admin can see
and list all
products in the
tabular format
Admin
Admin Can
add new
Categories
and brands
Admin visited
Admin
link add new
Categories/Brands
Admin Can
Remove
Products
Customer clicked Admin
delete link from
the listed products
Admin can
view the
customers
Admin click the
link to view all
customers
Admin
Admin can
delete
customer
Admin click the
link to delete
customers
Admin
password for the
particular admin
in the Admin
Database, verify
the password
Product is added
to the product
table storing info
about the
product
including
images, price
description
Admin can
change the name
of any products
categories and
brand, info will
be updated to the
relevant tables in
the database
List every
possible item in
the database that
exists. Each
product stored in
master file for
database has it’s
own description
When new
categories and
brands are
inserted query
will be executed
for updating the
categories and
brands table
Query will be
executed by
deleting the
product from the
product table
Query will be
executed by
listing all
customers from
customer table
Query will be
executed by
deleting
Product
Admin
successfully
added into
product
table,
proceed to
more adding
if needed
Successfully Admin
updated
prompt will
be displayed
Page
displayed
according to
what is in
the database
Admin
Successfully Admin
updated
prompt will
be displayed
Page with
Admin
the
remaining
product will
be displayed
Table of all Admin
customers
displayed
Data for the
customer
will be
Admin
profile
customers from
customer table
Admin can
view
customers
orders
View Orders link
is activated
Admin
Customer
Log out
Log out link
clicked
Customer
Admin can
confirm
customer
payment
View Orders link
is activated
Admin
deleted from
customer
table
Get data from
Page with
Admin
the payment and tables listing
orders table from the orders
database for all
done by the
customers
customers
Destroy the
Return the
Customer
session for that
index page
customer id
Admin can view The status in Admin
all orders done
order and
by the
payment
customers. Also table
by clicking the
changed
link confirm the
order the query
will be executed
and change the
Status of the
order from In
progress to
completed
5.11 System Context Diagram High-Level Design (HLD)
System Context Diagrams represents high level view of the system and all external
entities that will interact with a system. The system will need to know the flow of the
information in and out of the system. Such a diagram pictures the system at the center, with
no details of its interior structure, surrounded by all its interacting systems and primary users
of that system, environments and activities. The context diagram is used in analysis phase,
during planning the project this diagram will help to determine the scope of the project.
The objective of the system context diagram is to focus attention on external factors
and events that should be considered in developing a complete set of systems requirements
and constraints. The context diagram is part of the traditional approach as shown in the
picture:
5.12 Context Diagram for Highest Level Diagram
dfd Data Flow Model
Browsed Product/ Found Not Found
Register Successfully
Update Profile
Customer
Customer
Log In Successfully
Browse Product
Payment Successfully
Cart Updated Successfully
Register at Website
Profile Updated
0. WebSol
Add to Cart
Make Payment
Products Added/Updated
Payment/Orders Update Successfuly
Update/Add Products
Log in Success
Log In
Add Categories/Brands
Categories/Brand Added successfully
Mail Send to Customers
Confirm Payment/Orders
Send Email Confirmation
Administrator
Administrator
5.13 DFDs (Data Flow Diagrams) Low-Level Design
5.13.1 DFD (Data Flow Diagrams) Level 0
5.13.2 DFD (Data Flow Diagrams) Level 0 Administrator
5.14 DFD (Data Flow Diagram) Level 1 Child Diagram
5.14.1 DFD level 1 for Login
5.14.2 DFD level 1 for Order
5.14.3 Use Case Diagram Object Oriented Analysis:
Full Use Case Diagram
5.14.4 Log in Subsystem for Customers and Administrator
5.14.5 Subsystem for Add, Update, Delete, Search products for Users and
Administrator
5.14.6 Subsystem of Updating, Deleting profiles for Users and Administrator
5.14.7 Subsystem of Payments, Orders , Confirm Payments for Users and
Administrator
5.15
Use Case Scenarios.
The object oriented approach for using use case descriptions and creating use case diagrams.
A use case scenario represents a sequence or list and always defines an action between actor
and a system.
5.16 User
5.16.1 User Registration – Intermediate Description
Flow of activities for scenario of User Registration & Creation of Account
Description: Webpage user registration field
Precondition: The user must click on the link to register
Main Flow :
1. The user type first name, last name,.
2. The user types their email address.
3. The user types their password.
4. The user choose image
5. The user select country
6. The user types City
7. The user type contact number
8. The user types current address
9. The user clicks the create account button.
Post condition: The system verifies the user and redirects to login or to card page.
Exception:
Invalid username and email address if they are not filled in the fields and try to submit
the button
5.16.2 User Login – Intermediate Description
Flow of activities for scenario of user log in
Description: Webpage User log in
Precondition: The user must click on the link to login
Post condition: The system verifies the username and password and if there is match
with customer database then and redirects to index page.
Main Flow :
1. The user types username in the username text box.
2. The user types password in the password text box.
3. The user click the login button.
Exception Condition:
1.An error message will be pop up because of incorrect username or password has been
entered in the fields.
2. If there is no customer with that details registration page will be redirected to the user
5.16.3 User Logout – Intermediate Description
Flow of activities for scenario of user log out
Description: Webpage user log logout
Precondition: The user must click on the logout button
Post condition: The system will log out the user and welcome user will be empty and
index page will be displayed.
Main Flow :
1. User Clicks on the logout button.
Exception Condition:
1. There will be no button for logout if the user is not loged in, only after log in the log
out button will be displayed
5.16.4 User-Search Products – Intermediate Description
Flow of activities for scenario of User Searching Products
Description: Webpage will have functionality for user to search particular product
Precondition: The user must click on the search and enter the details
Post condition: The system verifies what the user searched and list of the products that
are matched by search.
Main Flow :
1. The user views the Product if there is information about them.
Exception Condition:
1. There will be no products on the page if the information that user search is not inside the
database
5.16.5 User- Add To Cart – Intermediate Description
Flow of activities for scenario of User Adding Products to card
Description: Webpage will have functionality for user to add particular product to card
Precondition: The user must click on the add product button under picture of the
product
Post condition: The system verifies what the user purchased and cart will be initialized
to zero.
Main Flow :
1. The user clicks the “add to cart” from the list of desired products.
Exception Condition:
1. No exception condition are available for this scenario.
5.17 Admin
5.17.1 Admin login – Intermediate Description
Flow of activities for scenario of admin log in
Description: Webpage user log in
Precondition: The admin must go to the link only known by the admins
Post condition: The system verifies the mail and password and if there is match with
admin database then and redirects to index page for admins.
Main Flow :
1. The admin types email address text box.
2. The admin types password in the password text box.
3. The admin click the login button.
Exception Condition:
1.An error message will be pop up because of incorrect mail or password has been entered in
the fields, stating that you are not admin
5.17.2 Admin Add Products
– Intermediate Description
Flow of activities for scenario of admin to add products
Description: Webpage Admin adding products
Precondition: The admin must click on the link to Insert new Product
Post condition: The system verifies the details about the product and insert new product
in the database for products.
Main Flow :
1. The admin types product name.
2. The admin selects the category and brand of the product
3. The admin selects the picture of the product
4. The admin add text and description.
5. The admin add keywords
6. The admin add price
Exception Condition:
1. If there is no pop up window saying that you have successfully inserted product then error
is occurred.
5.17.3 Admin Delete Products – Intermediate Description
Flow of activities for scenario of admin to delete/remove product
Description: Webpage admin delete products
Precondition: The admin must click on the link to delete Product, and products must be
inside the database so they can be deleted.
Post condition: The system verifies that the product is deleted and new table without
product will be displayed.
Main Flow :
1. The admin selects which product to delete.
Exception Condition:
1. If there is no pop up window saying that you have successfully deleted product then
error is occurred.
5.17.4 Admin Delete User – Intermediate Description
Flow of activities for scenario of admin to delete customer
Description: Webpage admin delete customer
Precondition: The admin must click on the link to delete Customer
Post condition: The system verifies that the customer is deleted and new table without
customer will be displayed.
Main Flow :
1. The admin selects which customer to be deleted.
Exception Condition:
1. If there is no pop up window saying that you have successfully deleted customer then
error is occurred.
5.17.5 Admin Log out – Intermediate Description
Flow of activities for scenario of admin to logout
Description: Webpage admin logout
Precondition: The admin must click on the link to logout
Post condition: The system verifies that the admin is logout and page of admin login will
be displayed.
Main Flow :
1. The admin clicks the link logout
Exception Condition:
1. No action for this scenario.
5.17.6 Admin View Order – Intermediate Description
Flow of activities for scenario of admin to view all orders from all customers
Description: Webpage admin view all orders
Precondition: The admin must click on the link to view order
Post condition: The system verifies that the order is confirmed and table order is
updated.
Main Flow :
1. The admin selects the view order link.
2. All orders are listed from each customer
3. The order can be confirmed from the admin and store that information in order
Exception Condition:
1. If there is no pop up window saying that you have successfully confirmed order then
error is occurred.
5.17.7 Admin View Payment – Intermediate Description
Flow of activities for scenario of admin to view all payments made from all customers
Description: Webpage admin view all payments
Precondition: The admin must click on the link to view payment
Post condition: The system verifies that the payment table must be displayed.
Main Flow :
1. The admin selects the view payment link.
2. All orders that are finished are listed as paid from every customer
Exception Condition:
1. No exception condition for this scenario.
5.17.8 Admin Insert Brand/Category – Intermediate Description
Flow of activities for scenario of admin to add category/brand
Description: Webpage admin Add products
Precondition: The admin must click on the link to add category/brand
Post condition: The system verifies the details about the new category or brand and insert
new data into category/brand database.
Main Flow :
1. The admin types category/brand name.
2. The admin selects the category/brand button
Exception Condition:
1. If there is no pop up window saying that you have successfully inserted
brand/category then error is occurred.
5.17.9 Fully developed description example
Use Case Name
Add new product.
Scenario
Add new product.
Trigger Event
Admin login to the admin page and click on the insert new
product link.
Breif Description
The administrators will insert new products inside the product
database through admin panel.
Actors
Admin.
Related Use Case
The product update.
Stakeholders
Administrators, they will update the content with new products
and customers that will be able to see the new products.
Preconditions
The admin must click on the link to enter new product.
Post conditions
The system verifies the details about the product and insert new
product in the database for porducts, product table must exists
before inserting the products.
Flow of Events
Actor
System
1.
The admin types product name.
2.
The admin selects the category and brand
of the product
3.
The admin selects the picture of the product
4.
The admin add text and description.
5.
The admin add keywords
2.System get the
Information from the
Fields.
2.1 Insert the data
6. The admin add price
7. The admin submit the product
Into product database
2.2 Verify the inserting
2.3 Display pop up
message
Exception Conditions
The system verifies the details about the product and insert new
product in the database for products, then the pop up window
will appear if not error occurred somewhere inside the script.
6
Structure Chart Diagram for Order DFD level 1
7
Activity Diagram for whole system
Activity Diagram for add to cart and payment
act Activ ity_Selection
Start
Shopping
Enter More
products
Brow se Items
Don't like the item, back to Browse
View Item
Add To Cart
PayItems
PayPal
Enter PayPal Details
Enter Credit card
details
Validation of
PayPal
Account
If not valid
Cancel the payment
Generate Email To
Customer
Activity
Final
Display
confirmation of
payment
8
Sequence Diagram for whole system
sd Sequence Diagram
Form: Main Page
User
Database
Admin
login()
requestDataCustomer()
DataVerified()
userLoggedIn()
searchInvenoty()
getProducts()
returnAllProducts()
allProducts()
addProducts()
addCart()
CartUpdated()
Add more products()
ProceedToChekout()
PayPal(productDetails)
EnterCustDetails()
PaymentSuccessfull()
storePayment()
storeNewOrder()
verifyPayment()
userViewOrder()
logOut()
9
Sequence Diagram for admin view orders from customer and confirm
orders
sd Instructor
Main Page
Order
Admin Database
Admin
log_in()
verify_user()
returnIs()
view_orders()
getCustomerOrders()
displayOrders()
CompleteOrder()
complete(orderId, status complete)
orderCompleted()
displayOrders()
Order DB
10 Sequence Diagram for browsing and buying products
sd Selection Sequence diagram
BrowseProducts
Checkout
PayPal
ProductsDb
CartDb
Customer
viewProduct()
listAllProducts()
returnProducts()
allProducts()
addProduct()
cartUpdate()
cartUpdated()
displayProductsTotal()
checkout(productsId, quantity)
displayItems()
storePayment()
paymentComplete()
CustomerDb
OrderDb
11 ER Diagram
11.1 Data Dictionary
11.1.1 Data Structure
CUSTOMER (Customer id,Customer_ip,Customer_name, Customer_email,
Customer_country, Customer_contact, Customer_city ,Customer_address, Customer_img);
PAYMENT (Payment id,Customer_id, Product_id,Amount, TRX_id, Currency,
Payment_date);
ORDER (Order id,Product_id, Customer_id, Quantity, Invoice_number, Status, Order_date);
CART (Cart id, Product_id , Customer_id, Customer_ip, Quantity);
PRODUCT (Product ID, Category_id, Brand_id, Product_title,
Product_price,Product_description, Product_img, Product_keywords);
CATEGORIES (Category_id, Category_title);
BRAND (Brand_id, Brand_title);
CUSTOMER
Table
Column Name
Type
Value
CUSTOMER
Customer ID
Integer
Customer IP
Varchar
Customer_name
text
Customer_email
Varchar
100
Customer_password Varchar
100
Description
Primary Key
255
Customer_country
text
Customer_city
text
Customer_contact
Varchar
255
Customer_address
Text
100
Customer_image
text
ORDER
Table
Column Name
Type
Value
Description
ORDER
Order ID
Integer
100
Primary key
Customer ID
integer
100
Foreign key
Product ID
integer
100
Foreign key
Quantity
integer
100
Invoice_number
integer
100
Status
Text
Order_date
Date
Table
Column Name
Type
Value
Description
CART
Cart ID
Integer
100
Primary key
Customer ID
Integer
100
Foreign key
Product_ID
Integer
100
Foreign key
Customer_IP
Varchar
255
Foreign key
Quantity
Integer
CART
PRODUCT:
Table
Column Name
Type
Value
Description
Product
Product ID
Integer
100
Primary key
Category_ID
Integer
100
Foreign Key
Brand_ID
Integer
100
Foreign Key
Product_title
Varchar
255
Prouct_price
Integer
100
Product_desc
Text
Product_img
Text
Product_keywords Text
CATEGORY:
Table
Column Name
Type
Value
Description
Category
Category ID
Integer
100
Primary key
Category_title
Text
Table
Column Name
Type
Value
Description
Brands
Brand ID
Integer
100
Primary key
Brand_title
Text
Table
Column Name
Type
Value
Description
PAYMENT
Payment ID
Integer
100
Primary Key
Customer ID
Integer
100
Foreign Key
Product_ID
Integer
100
Foreign Key
Amount
Integer
100
TRX_Id
Varchar
255
Currency
text
Payment_date
date
BRAND
PAYMENT
12 Relational Schema
13 Domain Class diagram
class Domain Model
Person
-
Cart
Gender
ID
name
phoneNum
-
+ toString() :void
Category
Product
CartId :int
CustomerID :int
CustomerIP :int
Quantity :int
-
+ displayItems() :void
0..*
BrandID
CategoryID
Description
Image
Price
ProductID
Title
1
CategoryID :int
Title :int
+ addCategory() :void
+ editCategory() :void
+ searchCategory() :void
1..*
1
+
+
+
+
+
+
+
+
+
+
+
+
+
+ addProduct() :void
+ editProduct() :void 1..*
+ searchProduct() :void
Customer
Administrator
adminID
adminName
addBrands() :void
addCategory() :void
addProducts() :void
generateReport() :void
generateReports() :void
sendConfirmation() :void
sendEmail() :void
toString() :void
updateInfo() :void
viewBrands() :void
viewCategories() :void
viewCustomers() :void
viewPaymnets() :void
-
address
Country
customerCity
customerID
customerIp
email
Image
name
+
+
+
+
addCustomer()() :void
editCustomer() :void
pay() :void
toString() :void
1
1..*
1
Order
1..* -
1
1..*
CustomerId
InvoiceNum
OrderDate
OrderId
ProductId
Quantity
Status
TRX
Payment
-
+ displayOrder() :void
amount
Currency
CustomerID
PaymentDate
paymentID
ProductId
TRX_ID
+ displayPayment() :void
Credit
-
amount :int
creditId :int
+ displayPayment() :void
Brand
1
Cash
-
amount :int
cashID :int
+ displayPayment() :void
BrandID
BrandName
+ addBrand() :void
+ editBrand() :void
+ searchBrand() :void
14 State Machine diagram for cart
stm StateChart
Initial
Cart Filed w ith items
Empty Cart
Add Items
Pay for items
Return the Empty Cart for new Purchase
Payment Cart
Clean the Cart
Success
Return the Same Cart to User
Cart Items
Cart to user
Final
15 State Machine diagram for customer editing personal details
stm StateChart
My Details
Edit Personal Info
Personal Info
[Enter New Personal Details]
[View your Details]
Store
Personal
Info in
Customer
DB
Submit Personal Info
[Send Personal Details]
Cancel
Save
Return back
Main Page
Final
16 Deployment Diagram
Deployment diagram it shows the configuration entire system, how client side, server and
database communication is done for any E-commerce website.
17 Functional Requirements
Introduction:
The functional requirement would be:
17.1 Admin Panel
Functional ID
G1
Functional Name
Sign In
Functional
Admin need user name and password to acces the admin section.
Description
Functional
Priority
Mandatory
Functional ID
G2
Functional Name
Admin Changes
Functional
Admin got all the rights to check client details.
Description
Functional
Optional
Priority
Functional ID
G3
Functional Name
Password Edit
Functional
Admin is allowed to change his/her password with necessary needed
Description
is old password.
Functional
Compulsory
Priority
Functional ID
G4
Functional Name
New User
Functional
Admin can add client info, which will be helpful for collecting client
Description
data.
Functional
Compulsory
Priority
Functional ID
G5
Functional Name
User Deleted
Functional
This Allow Admin to Delete any user.
Description
Functional
Compulsory
Priority
Functional ID
G6
Functional Name
Product not Exist
Functional
Admin can delete the selected product
Description
Functional
Mandatory
Priority
Functional ID
G7
Functional Name
Product Submission
Functional
Admin Can Add product.
Description
Functional
Mandatory
Priority
17.2 Client Panel:
Functional ID
G8
Functional Name
Password Edition
Functional
Clien is allowed to edit his/her password.
Description
Functional
Priority
Optional
Functional ID
G9
Functional Name
Detail Changes.
Functional
Client can changes the necessary details .
Description
Functional
Optional
Priority
Functional ID
G10
Functional Name
Shopping Cart
Functional
Client can proceed to checkout for the product which he has
Description
purchased.
Functional
Mandatory
Priority
Functional ID
G11
Functional Name
Session Close
Functional
Client can Log out once the checkout is complete.
Description
Functional
Priority
Optional
18 Architecture Design Story Boards Screen Shots
18.1 Home
18.2 My account
18.3 Product
18.4 SignUp
18.5 Cart
18.6 Login
18.7 Contact us
18.8 Front end and Back end of our application
19 References
A. Zisman, G. Spanoudakis, E. Pérez-Miñana, and P. Krause, "Tracing software requirements
artifacts," Proceedings of 2003 International Conference on Software Engineering Research and
Practice (SERP'03), Las Vegas, Nevada, USA, pp. 448-455, 2003.
B. Ramesh and M. Jarke, "Toward reference models for requirements traceability," IEEE
Transactions on Software Engineering, vol. 27, no. 1, pp. 58-93, 200
D. Le Vie Jr, "Writing software requirements specifications," TECHWR-L (MAR 2007)
http://techwhirl.com/skills/tech-docs/writing-software- requirements-specs (Retrieved December 19,
2013), 2007
E. Hull, K. Jackson, and J. Dick, Requirements engineering. Springer, 2010.
I. C. S. S. E. S. Committee and I.-S. S. Board, "IEEE Recommended Practice for Software
Requirements Specifications," 1998.
. Sommerville, Software Engineering. Addison-Wesley, 2004.
P. Letelier, "A framework for requirements traceability in UML-based projects," Proceedings of 1st
International Workshop on Traceability in Emerging Forms of Software Engineering, pp. 173-183,
2002
S. Lauesen, Software requirements: styles and techniques. Addison-Wesley Professional, 2002.
T. N. Nguyen and E. V. Munson, "A model for conformance analysis of software documents,"
Proceedings of the Sixth International Workshop on Principles of Software Evolution, pp. 24-35,
2003.