Group 4

Lecturer : Nguyễn Minh Hiếu CE181623

Trương Quốc Hưng CE180632
Lê Nguyễn Xuân Ngân CE180972
Ngô Thị Thúy Vy CE181126
Trầm Huỳnh Duy Tân CE181517

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: Food Store
- Lecture and members:
FULL NAME ROLE
Nguyễn Minh Hiếu Lecturer
Trương Quốc Hưng Member
Ngô Thị Thúy Vy Member
Lễ Nguyễn Xuân Ngân Member
Trầm Huỳnh Duy Tân Member

1.2. Project background

In addition, our platform will provide detailed product information, customer reviews,
and culinary content such as recipes and cooking tips to support and inspire our
community. By focusing on user experience, product variety, and dedicated customer
service, we aim to become the premier destination for food seekers and enthusiasts
around the world.
We also aim to build an online community where people can share experiences,
discover new food trends, and learn from each other. Collaborating with local and
international suppliers will allow us to provide unique and high-quality products that
are difficult to find elsewhere.
Recognizing the importance of sustainability and social responsibility, we are
committed to promoting environmentally friendly practices and supporting small-
scale producers. We believe that connecting consumers with trusted food sources not
only enhances the culinary experience but also contributes to the sustainable
development of the community.

With the combination of modern technology and culinary passion, we believe that this
project will bring real value to customers and set a new standard in the field of food e-
commerce.

II.Software development model

3
Reasons for Choosing the MVC Model for the FoodStore Project

The MVC (Model-View-Controller) design pattern is an excellent approach for

creating web applications, and many businesses are now choosing to develop their
applications using the MVC architecture.

We have chosen the MVC model to develop the FoodStore website because it offers
the following advantages:

Efficiently organizes large-scale web applications: With a diverse range of food

products and high user traffic, MVC helps structure the FoodStore application clearly
and makes it easy to manage.

Easy to modify and update: FoodStore requires frequent updates of new products,
promotional programs, and features; MVC allows us to implement these changes
without affecting the entire system.

Accelerates the development process: MVC enables development teams to work in

parallel on different components (Model, View, Controller), helping to reduce the
overall time to launch FoodStore.

Simplifies planning and maintenance: The clear separation of concerns in MVC

makes it easier for us to plan future updates and maintain the system.

Returns data without formatting: This allows FoodStore to flexibly display

products across various devices and platforms, from desktops to mobile phones.

Supports TDD (Test-Driven Development): MVC aligns with the test-driven

development approach, helping us ensure code quality and reduce errors in
FoodStore.

Enables multiple views: With MVC, FoodStore can provide multiple user interfaces
for the same product data, meeting the diverse needs of our customers.

By applying the MVC model, we believe that FoodStore will deliver the best online
shopping experience for customers, while also allowing us to easily expand and
upgrade the system in the future.

II. esign Diagrams

3.1. Database
* Diagram

4
* ERD

* Data

5
3.2. Use case diagram

6
III. System Functions
4.1. Sign Up
- Allows users to sign up for a new account with basic information
such as: username, full name, password, and password confirmation. By
default, new accounts are assigned the customer account type.
4.2. Login
- Both users and admins are required to log in to access the
website. If the account type is Admin, the user will be redirected to the
admin homepage. Otherwise, customer accounts are redirected to the
customer homepage.
4.3. Log Out
- By pressing the logout button on either the admin or customer
homepage, users will be redirected to the general homepage. If they want
to use the website's features again, they are required to log in.
4.4. Customer function
- View Products: Customers can view all products, filter products
by type using buttons representing product categories, and view product
details by clicking on the product name.
- Add to Cart: Customers can add products to their cart in two
ways. First, by clicking the "Add to Cart" button on the homepage for
each product. Second, by clicking "Add to Cart" after viewing product

7
details. In the product detail page, customers can edit the quantity of the
product they want to add, which is not possible directly from the
homepage. Customers can also view their cart, including products,
quantities, and the total price.
- Check Out: Customers can click the "Order" button on the
homepage to view their orders. On the "My Orders" page, customers can
track the progress of their orders, and admins can manage customer
orders.
- Edit Information: Customers can update their profile information,
such as address, phone number, full name, email, and password. All
updates require the current password for verification.
4.5. Admin function
- Homepage: The admin homepage displays all products, allowing
the admin to see the details of any product.
- View Contact Form: Admins can view completed contact forms
submitted by customers, including general inquiries and forgotten
password requests.
- Product Management: A dedicated page provides an overview of
all products. Products can be deleted, new products can be added, and
product information can be edited. Note that the product ID cannot be
changed during editing.
- Order Management: The admin can view all orders. By clicking
the "View" button, the admin can see the details of a specific order,
including the products ordered, their quantities, prices, and the total price.

IV. 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 orther Check display Press orther 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 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
11 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
12 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

10
 product id.
Can save new
data into
database
13 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
detail page each order.
Display right
design

V. Management Methodologies
- We have chosen Agile to manage and develop this project
because it is a flexible software development methodology that provides
an effective approach to project management. Agile incorporates an
iterative and interactive workflow, allowing us to deliver the product to
users as quickly as possible while continuously improving based on
feedback.

VI. Web Interface

7.1. Sign In Page

11
7.2. Sign Up Page

7.3. Customer Home Page

12
7.4. Edit Information

7.5. View Product By Type

13
7.6. View Product Detail

7.7. View Cart Detail & Orther

14
7.8. Admin Home Page

15
7.9. Manage Product

7.10. Add New Product

7.11. Update Product Information

16
7.12. Order management

7.14. Order Detail

17
VII. Work Division Table
Full Name Work Percent Complete
Dương Hoàng Hào *Design Oder Detail 100%
Nam *CSS
*Database
*Design Product
Detail
*Servlet
Phan Thành Hưng * Design Home Page 100%
Customer and Admin
* Design Product and
Account Management
* Doc
* Database
* Servlet
* Presentation
* Controller cart
Bùi Trung Kiên * Design Sign In and 100%
Sign Up Page
*Presentation
*Design Edit Account
Page
* Database
* Servlet
* Controller login,
logout, resources
Trần Như Ý *Slide 100%
* Design Edit Account

18
 Page
* Database
* Servlet
* Controller Product,
Oder
Trần Hữu Tín * Database 100%
* Design Add, Edit
Product Page
* Design Diagram
* Controller Accounts,
Admin

19