Online Store

Design Document
Version 1.0

Yasmeen Ayub

Student ID: BC130401632

Group ID: N/A

Supervisor: Akmal khan

1|Page

REVISION HISTORY
Date (dd/mm/yyyy) Version Description Author
This project is about development of
Online Store using PHP and MySQL.
The approach taken in developing the
Online Store is by having two different
interfaces for owner and customer.
Owner/admin interface to manage the
product details and orders and
09/01/2017 1.0 customer interface to allow user to buy BC130401632
products online. . In this document we
create ERD, sequence diagram,
Architecture diagram, class diagram,
database diagram, and Test Case to
have a better of the design of the
website and it is greatly beneficial in
coding of the website and databases.
2|Page

Contents
Revision History...............................................................................................................................i
1 Intrpduction..............................................................................................................................1
2 Entity Relationship Diagram (ERD)........................................................................................1
3 Sequence Diagrams.................................................................................................................1
4 Architecture Design Diagram..................................................................................................1
5 Class Diagram..........................................................................................................................1
6 Database Design......................................................................................................................1
7 Interface Design.......................................................................................................................2
7.1 Admin Login Page............................................................................................................2
7.2 Admin Home page............................................................................................................3
7.3 Home page........................................................................................................................4
7.4 Customer Login Page........................................................................................................5
7.5 Customer Registration.......................................................................................................6
8 Test Cases................................................................................................................................7
8.1 Customer login..................................................................................................................7
8.2 Customer Registration.......................................................................................................7
8.3 View Products...................................................................................................................8
8.4 Add item to the cart...........................................................................................................8
8.5 Admin Login.....................................................................................................................9
8.6 Admin viewing customer orders.......................................................................................9
8.7 Admin adding a product..................................................................................................10
8.8 Admin Deleting a product...............................................................................................11
8.9 Admin editing product details or stock in quantity.........................................................11
1|Page

1 INTRODUCTION
This design document belongs to development of online shopping website project.
SQL and PHP languages are used in the development of this online shopping
website. The website include different interfaces for admin and customer. The
project allows admin to add/remove a product and modify the product details from
the system. Moreover, it allow admin view the customer orders. The customers can
view products on the webpage and can only add items on cart once logged in the
system. From the shopping cart they can confirm their orders.

Design document has a considerable importance in development of a website

especially when databases are included in the website. It allow developer to
translate their ideas in a documentation form which helps in clarifying the whole
design of the system. This document justifies the working structure and patterns of
the system. The development of the databases, class structures and coding of
graphical interface is only possible after the completion of this document

This design document includes:

Entity Relationship Diagram

Sequence Diagrams for each use case
Architecture Diagram of the project
Class diagram
Database Diagram
Conceptual Interface Design
Test Cases
2|Page

2 ENTITY RELATIONSHIP DIAGRAM (ERD)

3 SEQUENCE DIAGRAMS

4 ARCHITECTURE DESIGN DIAGRAM

5 CLASS DIAGRAM

6 DATABASE DESIGN
3|Page

7 INTERFACE DESIGN
7.1 Admin Login Page

Al-noor
Garme
<<

Admin login
nts
User name

Password
4|Page

7.2 Admin Home page

Al-noor
Garme
nts
Edit contact details
Manage Products View orders

Add a product image

Unstitched Spun Cotton three piece Unstitched Spun Cotton three piece Product name
black and blue black and blue Product price
Rs. 2125.00 Rs. 3015
Remove Change in stock Remove Change in stock Save Change in stock
item quantity item quantity item quantity
5|Page

7.3 Home page

Al-noor
Garme Customer Login Sign up

nts
Contact us
Products About us

Unstitched Spun Cotton three piece Unstitched Spun Cotton three piece Unstitched Spun Cotton three piece
black and blue beige and black red and beige
Rs. 2125.00 Rs. 3015 Rs. 2500

Add item to the cart Out of stock Add item to the cart
6|Page

7.4 Customer Login Page

Al-noor
Garme
Customer
ntsname login
User

Password

Not a member? Sign up by clicking

here
7|Page

7.5 Customer Registration

Customer Registration
Full name

Address

Email address

User name

Password
8|Page

8 TEST CASES
8.1 Customer login
Pre-Condition
The customer must have valid login username and password
Step Action System Response Result
01 User click on customer login button Interface will be opened PASS

02 User will enter the username and System will check the username and PASS
password password, if it is valid, user will
enter into the application, otherwise,
an error will be printed on screen
stating invalid username and/or
password and field will be cleared
03 In case of user data is wrong, the Same as step 02 PASS
customer repeat step 02
9|Page

8.2 Customer Registration

Pre-Condition
The email address of the customer is not associated with any account in the system
Step Action System Response Result
01 User click on customer login button Interface will be opened PASS

02 User will enter the full name System will check the data enter PASS
address, email address, desired with the following criteria.
username and password. Full Name field should only have
alphabet
Desired username will not match
with any username in the database
Email address should not match
with any email address in
customer database.
Password should be alphanumeric
between 8 to 30 characters
If the data entered is valid, then
system will register the customer
and customer login interface will be
opened, otherwise, it will show in
which field data is invalid and
shows the message stating the
criteria of that field
03 In case of user data is wrong, the Same as step 02 PASS
customer repeat step 02
10 | P a g e

8.3 View Products

Pre-Condition
Any user can visit this place by just entering the webpage address on the web browser,
therefore, not any particular pre-condition
Step Action System Response Result
01 User enters the webpage address The home webpage will be opened. NOT
e.g. www.alnoorgarments.com.pk That contain all the information TESTED
about the products fetched from
product database. Every product
which has stock quantity above 0
in the database has an add to cart
button
02 User clicks on the image of the System shows the enlarge image of PASS
product the product

8.4 Add item to the cart

Pre-Condition
User should be a registered customer and should be logged in
Step Action System Response Result
01 User clicks on the add to cart System checks whether the user is PASS
button. logged in or not. If the user is
logged in then, the item will be
added to cart, otherwise the user
will be redirected to customer login
page
02 Customer either login the system or Once, customer login, the product PASS
sign up and then log in will be added to cart
11 | P a g e

8.5 Admin Login

Pre-Condition
The user must have valid login username and password that is saved in the admin
database previously
Step Action System Response Result
01 User enters the admin page of the Admin login Interface will be PASS
online portal opened
02 User will enter the username and System will check the username and PASS
password password, if it is valid, user will
enter into admin interface,
otherwise, an error will be printed
on screen stating invalid username
and/or password and field will be
cleared
03 In case of user data is wrong, the Same as step 02 PASS
customer repeat step 02

8.6 Admin viewing customer orders

12 | P a g e

Pre-Condition
The admin must be logged in the admin interface
Step Action System Response Result
01 Admin clicks on view customer The webpage of customer orders PASS
orders button displayed, showing the customer
names who has ordered. There will
also be a button of orders history
02 User will click on the customer System shows the order and the PASS
name to see the order total cost of the order

03 In case of order being delivered, The order will be removed from the PASS
customer tick the delivered box customer orders page into the order
history
04 User clicks on view orders history System shows the page in which a PASS
table is showing all the previous
orders with customer names,
product details and total bill

8.7 Admin adding a product

13 | P a g e

Pre-Condition
User is logged in admin interface and is on manage products page
Step Action System Response Result
01 User click on + sign button The system will ask the user to PASS
upload the picture of the product
02 User clicks enters the name and System will check the name is alpha PASS
price of the product and clicks on numerical and price is numerical. In
save item case of valid data, the product is
saved in the database with a product
ID, the initial stock quantity is 0,
until admin change it. The product
shows on the website homepage. If
valid data is not entered, an error
will be printed to enter the valid
data in the specific field
03 User clicks on change the quantity System will open a prompt to allow PASS
in stock button to specify the user to enter the quantity of product
quantity of product in stock in stock. If entered data is
numerical, system accepts it,
otherwise, ask user to enter a
numerical figure.

8.8 Admin Deleting a product

Pre-Condition
User is logged in admin interface and is on manage products page
Step Action System Response Result
01 User click on remove button, The system open the prompt PASS
below the product details confirming to delete the product
02 User click yes to confirm deletion Product is removed from the PASS
of product database
14 | P a g e

8.9 Admin editing product details or stock in quantity

Pre-Condition
User is logged in admin interface and is on manage products page
Step Action System Response Result
01 User click on name box to change A small save sign is appear on the PASS
the name of the product right end of the box, in case, of any
changes in the name
02 User click save button to confirm Product new name is saved in the PASS
changes in the name database

03 User click on price box to change A small save sign is appear on the PASS
the price of the product right end of the box, in case, of any
changes in the price

04 User click save button to confirm Product new price is saved in the PASS
changes in the price database

05 User clicks on change the quantity System will open a prompt to allow PASS
in stock button to specify the user to enter the quantity of product
quantity of product in stock in stock. If entered data is
numerical, system accepts it,
otherwise, ask user to enter a
numerical figure.