Group 1

Trần Quang Quí-CE160195

Trương Trọng Thiết-CE160161
Lê Phát Quý-CE160306
Võ Lập Quân-CE161081
Lecturer : Lương Hoàng Hướng

1
 TABLE OF CONTENT
I. Project overview
1.1. Introduction
1.2. Project background
II. Software development model
III. Design diagrams
3.1. Database
3.2. Use case Diagram
IV. System functions
4.1. Sign up
4.2. Login
4.3. Log out
4.4. Customer function
4.5. Admin function
V. Test case table
VI. Management Methodologies
VII. Web interface
VIII. Work division table

2
I. Project overview
1.1. Introduction
- Project name: Dietary supplement shop
- Lecture and members:
FULL NAME ROLE
Lương Hoàng Hướng Lecturer
Trần Quang Quí Member
Trương Trọng Thiết Member
Lê Phát Quý Member
Võ Lập Quân Member

1.2. Project background

- With the need for a healthy life and a good body, people are
going to use more and more dietary supplements. The purchase of
products is also a difficulty for users, as some places do not provide these
products. Understanding that need and difficulty, we decided to develop
this project, a website selling dietary supplements.

II. Software development model

- The MVC design pattern is an excellent method for creating web

applications. Several businesses are now opting for the development of
such applications based on the MVC architecture.
- We using MVC model to develop t his website because of:
+ Organizes large-size web applications

3
 + Easily Modifiable
+ Faster Development Process
+ Easy planning and maintenance
+ Returns data without formatting
+ Supports TTD (test-driven development)
+ Multiple Views

III. Design Diagrams

3.1. Database
* Diagram

* ERD

* Data

4
5
 3.2. Use case diagram

IV. System Functions

4.1. Sign Up
- Allow users sign up a new account with some information like:
username, password, fullname, phone, gender, address. A new account
will be defaulted type account be customer.
4.2. Login

6
 - User and Admin have to login to access the website. If the
account type is Admin, it will be moved to the admin home page. On the
other hand, it will be moved to the customer home page if the account
login is a customer.
- In addition, if users forgot there password, they can fill the form
at the forgot password button. It will send into admin gmail after that
admin can check the answer with there account information and if it is
determined, the admin will contact by text message, email or phonecall to
give their password again.
4.3. Log Out
- When pressing the log out button in both two home page, it will
be moved to the login page.
4.4. Customer function
- Contact: The customer can contact with admin by form at the
contact button.
- View product: Including view all product, view product by type
when press some buttons represent the product type and viewing product
detail when press in the name of product.
- Add to cart: The customer can add product to cart in 2 ways.
Firstly, press add to cart button in home page after each product.
Secondly, by pressing add to cart after production information in view
product detail page. One thing convenient is the customer can edit the
quantity of product they want to add in product detail page that in the
home page can not. The customer can see the cart including the product,
their quantity and total price they must pay.
- Check out: The customer press check out button in home page to
check to move to check out page In this page the customer have to fill the
information like username, phone number, email, full name and shipping

7
address. When pressing order, their information will be sent to admin to
cofirm order.
- Edit information: The customer can edit their information when
pressing in edit info. They can edit fullname, password,… but can not
edit the username.
4.5. Admin function
- Home page of admin can display all product and the admin can
see the detail of certain product.
- View contact form: The admin can see the filled contact forms
are sent by customers. It including contact form and forgot password
form.
- Account management: The admin can see all account and set
account permission into admin or customer and delete it. Another account
is set into admin also can set permission and delete customer account.
The main admin account can not be deleted.
- Product management: It having one page can show brief of all
product. The product can be deleted. The admin can add new product and
edit product information. When edit product information, the product id
can not be edited.
- Oder management: It will display all order and when pressing
view button, the admin can see order detail of certain order including:
what products are ordered, its quantity, price, total price,…
 Non-Function: checking account exist, password and account
format,…

V. Test Case Table

8
ID Func Procedure Test Expected Testing
Data & Test Result Result
Step
01 Login Check: Color, Type Display the Pass
font, type information, same with
textbox, button, login, press in design
page linked,… forgot password,
sign up.
02 Login Validation Type some Display right Pass
different announcement
information
03 Sign Up Check: color, Type Display the Pass
font , type information, same with
textbox, button, sign up design
…
04 Sign Up Validation & Type some Display right Pass
save data into different annoucement
database information, & can save
sign up into database
05 Display for Check display Press certain Display the Pass
customer product, product button same with
detail, display design
product by type
06 Add to cart Adding product Add product to Add Pass
into cart, check cart successful &
calculate result right price
07 Check out Check display Press check out Display all Pass
page, color, type button products are
textbox, added to cart,

9
 button,.., its quantity
calculate total and total price
price
08 Edit Check: color, Submit edit Edit Pass
Information font, type information successful.
account textbox, button, New data can
information that save into
can/can not edit database
09 Display for Check display Press certain Display the Pass
Admin product, product button same with
detail, display design
product by type
10 Move to Check path liked Press certain Can move to Pass
page linked in button button google form,
product
management
page, account
management
page
11 Set Set Set account Can set admin Pass
permission admin/customer, customer into <=> customer.
& delete delete account, admin and Others
account permission of admin into admin can not
another admin, customer, delete set main
display icon account admin account
button, display into customer.
account list All admin can
delete
account. Icon

10
 display right
and can
display all
account
12 Delete Check: can Delete product Can delete Pass
product & delete product, product and
display display delete display all
product list and edit product product,
button edit/delete
button icon
13 Add new Check add new Type Display the Pass
product product, font, information same with
type textbox, design. Can
button, color, add data into
display page database
14 Edit product Check display Type new Display the Pass
page, color, font, information for same with
type textbox, certain product design. Can
button. edit
Information information
can/can not edit except
product id.
Can save new
data into
database
15 Order Check display Press button Can display Pass
Management page, move to order all order from
page management customer, can
page and order see detail of

11
 detail page each order.
Display right
design

VI. Management Methodologies

- We choosing Agile to manage and develop this project. Because
Agile is a flexible software development methodology that has a specific
approach to software project management. It includes an integrated and
interactive workflow to get the product into the hands of the user as
quickly as possible.

VII. Web Interface

7.1. Sign In Page

7.2. Sign Up Page

12
7.3. Customer Home Page

7.4. Edit Information

7.5. View Product By Type

13
7.6. View Product Detail

7.7. View Cart Detail & Check out

14
7.8. Admin Home Page

7.9. Manage Product

7.10. Add New Product

15
7.11. Edit Product Information

7.12. Manage Account (Set Permission & Delete)

7.13. Order management

16
 7.14. Order Detail

VIII. Work Division Table

Full Name Work Percent Complete
Trương Trọng Thiết * Design Home Page 100%
Customer and Admin
* Design Product and
Account Management
Võ Lập Quân * Design Sign In and 100%
Sign Up Page
* Design Edit Account
Page
Lê Phát Quý * Database 100%
* Design Add, Edit

17
 Product Page
* Design Diagram
* Doc
Trần Quang Quí * Database 100%
* Servlet
* Load Data
* Summarize

18