HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF ELECTRICAL AND ELECTRONIC ENGINEERING

----b&a---

PROJECT REPORT:
WEB APPLICATION

Instructor: Assoc. Prof. Lê Thị Lan

Name of group: N5
List of members: 1. Cao Sỹ Dương – 20213633
2. Nguyễn Lưu Anh Tài - 20203806
3. Maël Lucas Roger Didtsch – 2023T016
4. Ayoub Mostafa Ala – 2023T011
5. Nguyễn Việt Hùng – 20213614

Hanoi, 1/2024

1
Table of Contents
ABSTRACT............................................................................................................................3

I. Project Requirements and Contributions.........................................................................3

1. Project Requirements.............................................................................................................3

2. Project Contributions.............................................................................................................4

II. Function design..............................................................................................................4

1. User stories.............................................................................................................................4

2. Use cases.................................................................................................................................5

3. Detailed User Cases................................................................................................................5

4. Activity diagram.....................................................................................................................9
a. User Side..................................................................................................................................................9
b. Admin Side............................................................................................................................................10
c. Buying clothes........................................................................................................................................11
d. View/Edit Clothes (Order)....................................................................................................................12

III. Database Design........................................................................................................13

1. Entity Relationship Model....................................................................................................13

2. Relational model...................................................................................................................13

IV. Implementation..........................................................................................................14

1. Tools.....................................................................................................................................14

2. Website interface..................................................................................................................14

3. Backend Analysis..................................................................................................................17

V. Source code..................................................................................................................17

VI. Conclusion................................................................................................................17

1. Positive points.......................................................................................................................17

2. Drawbacks............................................................................................................................18

2
 ABSTRACT

As a team working on the development of our e-commerce web app for clothing
sales, a thorough problem analysis is crucial. In today's fashion landscape,
customers have a wide array of options when it comes to clothing, including tops,
bottoms, and more. However, we understand that people have diverse preferences
and needs when it comes to their clothing choices. We recognize that the fashion
industry is rapidly evolving, and consumer behavior is changing. Traditional brick-
and-mortar stores are facing stiff competition from the convenience and variety
offered by online shopping. Despite the advantages of e-commerce, there are still
several challenges that need to be addressed.

Customers often find it difficult to navigate the vast array of clothing options,
considering factors like style, brand, size, and occasion. Newcomers to online
fashion shopping may feel overwhelmed or concerned about the quality of
products. As a team, we aim to address these issues. Our customers desire tools to
simplify their shopping experience, such as personalized recommendations and the
ability to compare products easily. We also understand the importance of building
trust, offering clear return policies, and providing valuable information about
sizing and product quality. As a team, we are dedicated to crafting solutions that
enhance the online clothing shopping experience and make our e-commerce
platform a preferred destination for all fashion enthusiasts.

I. Project Requirements and Contributions

1. Project Requirements
- Develop a website for selling shoes using programing languages, database
and running on localhost.
- The website application will be developed for a specific purpose, such as e-
commerce, social media, or informational website. The website will be
developed using modern web technologies, such as HTML, CSS, Angular,
and a server-side language like Java.

3
- The website application will have a visually appealing design that aligns
with the brand identity and target audience.
2. Project Contributions

No Name Work load Status

1 Cao Sỹ Dương 100%
2 Nguyễn Lưu Anh Tài 100%
3 Maël Lucas Roger Didtsch 100%
4 Ayoub Mostafa Ala 100%
5 Nguyễn Việt Hùng 100%

II. Function design

1. User stories
- User stories: A user story is a small, self-contained unit of development
work designed to accomplish a specific goal within a product. A user story is
usually written from the user’s perspective and follows the format: “As [a
user persona], I want [to perform this action] so that [I can accomplish this
goal].”

Identifier Users stories

REQ-1 As a user, I want to easily navigate between clothing categories

(men, women, children) to find what I'm looking for.

REQ-2 As a user, I want to be able to filter clothes by brand to quickly

find products that interest me.
REQ-3 As a user, I want to see high-quality images and detailed product
descriptions to get a precise idea of what I might purchase.

REQ-4 As a loyal customer, I want to benefit from a loyalty program that

offers special discounts, loyalty points, or other perks.
REQ-5 As a customer, I want to be able to add items to my shopping cart
4
 and adjust quantities before proceeding to checkout.

REQ-6 As a customer, I want to be able to view my cart at any time and

see the total amount of my purchases.

REQ-7 As a customer, I want to place an order by providing a shipping

address and choosing a secure payment method.
REQ-8 As a customer, I want to receive a confirmation email after
placing my order, with details of my order and delivery tracking
information.
REQ-9 As a customer, I want to leave reviews on the products I've
purchased to assist other customers in their buying decisions.
REQ-10 As a user, I want to be able to create a user account to track my
orders and save my payment information.

2. Use cases

5
 3. Detailed User Cases
Use Case UC-1: View articles

Related Requirements: To enter the website

Initiating Actor: Customer

Actor’s Goal: Look at the articles he likes

Participating Actors: Website and supplier

Preconditions: The website has a lot of different articles for all customers

Postconditions: The customer can view the articles in detail by clicking

Flow of Events for Main Success Scenario:

® 1. The user click on an article to see its description

¬ 2. It show the description detailed of the product with more images

Use Case UC-2: Add articles to the basket

Related Requirements: View articles, Buy articles

Initiating Actor: Customer

Actor’s Goal: Add articles to the basket to buy it

Participating Actors: Website

Preconditions: The website has a lot of different articles for all customers, and they are available

Postconditions: The customer can add the articles in his basket to buy them or leave the website

Flow of Events for Main Success Scenario:

® 1. The user click on the little chart to add it in the basket

¬ 2. The basket contains the article and send an information to the website that 1 article is sold

6
 Use Case UC-3: Buy articles

Related Requirements: The basket must contain at least 1 article

Initiating Actor: The customer

Actor’s Goal: To buy articles liked

Participating Actors: Website and supplier

Preconditions: The basket must contain at least 1 article

Postconditions: The customer buy the articles, or he abandoned the processed

Flow of Events for Main Success Scenario:

® 1. The customer valid the basket

¬ 2. The website show the payment method

® 3. The customer pays the articles

¬ 4. The website print “payment accepted” and give a link to see the detailed of the transaction

Flow of Events for Extensions (Alternate Scenarios):

What could go wrong? List the exceptions to the routine and describe how they are handled

The payment did not work è The website print “error of payment” and bring back the customer to
® 1a.
the basket.

The payment did not work because of the website è It print “error of payment please try again later”
¬ 2a.
and bring back the customer to the main page.

Use Case UC-4: Write a review

Related Requirements: Log-in

Initiating Actor: Customer

Actor’s Goal: Write a review of an article to others customer

Participating Actors: Customer

7
 Preconditions: The customer must have bought the article to write a review about it

Postconditions: The review can be view by all the user

Flow of Events for Main Success Scenario:

® 1. The customer write a review and post it

¬ 2. The website show the review for all the customer that clicked on the product

Flow of Events for Extensions (Alternate Scenarios):

What could go wrong? List the exceptions to the routine and describe how they are handled

® 1a. The customer write a false review è we can’t do anything about it

¬ 2a. The customer write a false review and didn’t buy the product è we delete the review

Use Case UC-5: Cancel transaction

Related Requirements: L

Initiating Actor: Website owner

Actor’s Goal: Cancel a transaction made by a customer

Participating Actors: Website, (customer)

Preconditions: A customer bought articles

Postconditions: The transaction made is cancel

Flow of Events for Main Success Scenario:

® 1. The website owner cancel the transaction because of an error from the customer or something else.

¬ 2. The customer get his money back

8
4. Activity diagram
- Activity diagram: In Unified Modeling Language (UML), an activity diagram
is a graphical representation of an executed set of procedural system activities
and considered a state chart diagram variation. Activity diagrams describe
parallel and conditional activities, use cases and system functions at a detailed
level.

a. User Side

9
b. Admin Side

10
c. Buying clothes

11
d. View/Edit Clothes (Order)

12
III. Database Design
1. Entity Relationship Model
- An entity relationship model (ER model) is a conceptual representation of
data that describes the relationships between different entities within a
system or organization. In an ER model, entities represent objects or
concepts, and relationships represent the connections between those entities.

2. Relational model
- In the relational model, data is organized into tables, where each table
represents a single entity or relationship. Each table is made up of columns,
which represent attributes or characteristics of the entity or relationship, and
rows, which represent instances or occurrences of the entity or relationship.
- The relationships between tables are established through the use of primary
keys and foreign keys. A primary key is a unique identifier for each row in a

13
table, while a foreign key is a column or set of columns in one table that
refers to the primary key of another table.

14
IV. Implementation
1. Tools
- IDE: Visual Studio
- Programing languages: JAVA, CSS, HTML, SQL,..
- Framework: Angular, Spring Boot
- Running on localhost: + Angular is on localhost: 4200
+ Spring Boot API is on localhost: 8080

2. Website interface
- Login

15
- Home Page

- About

16
- Category

17
- Detal

18
3. Backend Analysis

V. Source code

Visit this link:

https://github.com/AyoubProjects28/github-hosting
VI. Conclusion
1. Positive points
- Self-study, discover technologies and software to help develop a web with
practical applications in reality
- Through the project development process, it helped the team better
understand the knowledge learned in class as well as how to apply them
- Help team members unite and work effectively and positively and improve
self-study spirit
2. Drawbacks

19
- The lack of knowledge causes the project to lack the necessary features (log-
in, filter,..)
- Still have difficulty in learning new knowledge about technology and
software
- The lack of careful planning makes the product construction not fully
progress compared to the proposed work

20