Tìm hiểu reactjs và xây dựng website bán giày

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM

Đồ án 1
TÌM HIỂU REACTJS VÀ XÂY DỰNG WEBSITE BÁN GIÀY
Giảng viên hướng dẫn
Ths. THÁI THỤY HÀN UYỂN

Tp. Hồ Chí Minh, 2022


Sinh viên thực hiện:
STT
1
2

Họ và tên
Trương Thị Kim Liên
Nguyễn Vũ Thành Long

MSSV
19521748
19521795


NHẬN XÉT ĐỒ ÁN 1
(Của cán bộ giảng viên)


Lời cảm ơn

Sau quá trình học tập và rèn luyện tại khoa Công nghệ Phần mềm trường Đại học
Công nghệ Thông tin – ĐHQG TP.HCM, chúng em đã được trang bị những kiến
thức và những kỹ năng cơ bản để có thể hồn thành các đồ án mơn học.
Đồ án 1 là môn học mang lại cho sinh viên cái nhìn mới trong việc áp dụng những
kiến thức đã có để giải quyết các vấn đề thực tế. Môn học cũng như là một thử
thách và cơ hội để sinh viên có thể rèn luyện và hồn thiện bản thân qua những
kinh nghiệm, kỹ năng khi làm đồ án.
Chúng em xin gửi lời cảm ơn đến cô THÁI THỤY HÀN UYỂN đã tận tình quan
tâm, giúp đỡ và hướng dẫn nhóm trong suốt q trình làm đồ án. Qua những lời
góp ý, chỉ bảo của cơ mà nhóm có thể hồn thành đồ án tốt hơn.
Nhóm cũng xin cảm ơn tất cả các thầy cô, anh chị, bạn bè đã giúp đỡ, hỗ trợ trong
suốt q trình nhóm hồn thành đồ án.
Trong q trình học tập và hồn thiện đồ án cịn gặp nhiều sai sót, chúng em mong
nhận được sự góp ý của q thầy cơ và các bạn để có thể hồn thiện hơn.
Chúng em xin chân thành cảm ơn!


Mục lục
CHƯƠNG I: GIỚI THIỆU CHUNG
Đề tài
Lý do chọn đề tài
Đối tượng nghiên cứu
Phạm vi nghiên cứu
Phương pháp nghiên cứu

6
6
6
6
7

7

CHƯƠNG II:TÌM HIỂU REACTJS
Giới thiệu
Lịch sử phát triển của ReactJs
Tính năng của ReactJs
Lợi ích khi sử dụng ReactJs

8
8
8
8
10

CHƯƠNG 3: TÌM HIỂU CÁC CÔNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI
12
Tổng quan về JS
12
Tổng quan về MongoDB
13
Tổng quan về NodeJS
14
CHƯƠNG 4: XÂY DỰNG HỆ THỐNG
Mơ hình Use-case
Sơ đồ lớp
Sơ đồ tuần tự
Thiết kế giao diện

15
15

32
35
35

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Thành quả đạt được
Ưu và nhược điểm

50
50
50

CHƯƠNG 6: TÀI LIỆU THAM KHẢO

51

CHƯƠNG 7: BẢNG PHÂN CÔNG CÔNG VIỆC

52


CHƯƠNG I: GIỚI THIỆU CHUNG
1. Đề tài
- Tên đề tài: Tìm hiểu ReactJS và xây dựng website bán giày
- Cơng nghệ sử dụng:
● Front-end: ReactJS, Axios
● Back-end: Restful API, NodeJS
- Cơ sở dữ liệu: MongoDB
2. Lý do chọn đề tài
Hiện nay, thương mại điện tử đã trở nên phổ biến với các doanh nghiệp và

hầu hết người dân tại các nước phát triển và đang phát triển. Không thể phủ
nhận những lợi ích to lớn mà nó mang lại, từ đó giúp cho thương mại điện tử
trở thành một phần không thể tách rời trong chiến lược phát triển kinh doanh
của các doanh nghiệp.
Nắm bắt được tiềm năng phát triển của thương mại điện tử trong tình hình
dịch bệnh COVID-19 đang bùng nổ, các doanh nghiệp đã nắm bắt tình hình
và tập trung đẩy mạnh phát triển các hình thức quảng cáo, mua bán dựa trên
thương mại điện tử để mang lại nhiều lợi ích cũng như tiếp cận, đáp ứng yêu
cầu của khách hàng một cách nhanh chóng hơn.
Và các doanh nghiệp buôn bán giày cũng không bỏ qua cơ hội phát triển mà
thương mại điện tử mang lại. Chính vì thế, nhóm quyết định thực hiện xây
dựng một trang web bán giày để đáp ứng nhu cầu tìm kiếm, lựa chọn và mua
sắm giày cho người tiêu dùng.
Ngoài ra, để có thể hịa thiện được trang web, nhóm đã tìm hiểu và quyết
định sử dụng cơng nghệ là ReactJS vì nó đã trở nên rất phổ biến bởi những
tính năng linh hoạt và đơn giản cho các lập trình viên trong quá trình phát
triển phần mềm.
3. Đối tượng nghiên cứu
- Người làm đề tài:
● Sinh viên đang học tập và nghiên cứu tại trường Đại học Công nghệ
Thông tin – ĐHQG Tp. Hồ Chí Minh.
- Cơng nghệ, cơng cụ phát triển:
● Visual Studio Code
● ReactJS
● Restful API


● NodeJS
● MongoDB
- Thiết kế giao diện:

● Phác thảo và thiết kế giao diện sử dụng công cụ Figma
- Đối tượng trong phạm vi đề tài hướng đến:
● Quản lý hệ thống bán hàng
● Những doanh nghiệp phân phối hàng hóa trong và ngồi nước.
● Người tiêu dùng trong nước và (có thể) ngồi nước.
4. Phạm vi nghiên cứu
- Website được nhóm xây dựng và phát triển bằng ReactJs trên mơi trường
web.
- Tìm hiểu ReactJs để áp dụng vào phần mềm hỗ trợ người dùng có cái
nhìn tổng quan về sản phẩm trước khi lựa chọn mua hàng.
5. Phương pháp nghiên cứu
- Cách tiếp cận: Website được xây dựng dựa trên mơ hình MVC trên mơi
trường đa nền tảng.
- Phương pháp nghiên cứu:
● Phương pháp đọc tài liệu.
● Phương pháp phân tích các website hiện nay đã xây dựng bằng cách
sử dụng ReactJs.
● Phương pháp thực nghiệm.


CHƯƠNG II:TÌM HIỂU REACTJS
1. Giới thiệu
ReactJs là một thư viện Javascript mã nguồn mở được phát triển bởi
Facebook để tạo ra những trang web hấp dẫn, nhanh và hiệu quả với mã hóa
tối thiểu. Mục đích cốt lõi của ReactJS khơng chỉ khiến cho trang web phải
thật mượt mà cịn phải nhanh, khả năng mở rộng cao và đơn giản.
ReactJs phân tách các trang web thành các thành phần riêng lẻ. Chính vì vậy,
thay vì làm việc trên tồn bộ ứng dụng web, ReactJs cho phép một lập trình
viên có thể phân tách giao diện người dùng phức tạp thành các thành phần
đơn giản hơn.

2. Lịch sử phát triển của ReactJs
- React được tạo ra bởi Jordan Walke – một kỹ sư phần mềm của
Facebook. Ông đã cho phát hành nguyên mẫu đầu tiên của React được
gọi là “FaxJS”. Nó được triển khai lần đầu tiên trên News Feed của
Facebook vào năm 2011 và sau đó trên Instagram vào năm 2012.
- Nó được mở mã nguồn (open-sourced) tại JSConf US tháng 5 năm 2013.
- Vào ngày 26 tháng 9 năm 2017, React 16.0 được phát hành ra công
chúng.
- Vào ngày 16 tháng 2 năm 2019, React 16.8 đã được phát hành ra công
chúng. Bản phát hành đã giới thiệu React Hooks.
- Vào ngày 10 tháng 8 năm 2020, React v17.0 đã được phát hành ra công
chúng, đáng chú ý là bản phát hành lớn đầu tiên khơng có thay đổi lớn
đối với API dành cho nhà phát triển React.
- Phiên bản hiện tại là v18.0.1.
3. Tính năng của ReactJs
Tính chất của ReactJs:
- ReactJs mang tính chất khai báo.
- ReactJs rất đơn giản.
- ReactJs dựa trên các thành phần riêng lẻ.
- ReactJs hỗ trợ phía máy chủ
- ReactJs được ứng dụng rất rộng rãi.
- ReactJs rất nhanh.
- ReactJs rất dễ để học.


3.1.

JSX
JSX là một phần mở rộng cú pháp cho JavaScript.
Trong React, thay vì sử dụng JavaScript thơng thường để tạo khn mẫu,

nó sẽ sử dụng JSX. JSX là một JavaScript đơn giản cho phép trích dẫn
HTML và sử dụng các cú pháp thẻ HTML này để hiển thị các thành phần
con. Cú pháp HTML được xử lý thành các lệnh gọi Javascript của React
Framework. Tuy nhiên, các nhà phát triển không nhất thiết phải sử dụng
JSX trong phát triển React, nhưng có sự khác biệt lớn giữa việc viết tài
liệu React.js bằng JSX và JavaScript.

3.2.

Redux
Redux là một predictable state management tool cho các ứng dụng
Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán,
chạy trong các môi trường khác nhau (client, server, and native) và dễ
dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm
và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với
React.

3.3.

Single Way Data Flow
React.js được thiết kế để chỉ hỗ trợ dữ liệu đang chảy xi dịng, theo
một hướng. Nếu dữ liệu phải chảy theo hướng khác, bạn sẽ cần các tính
năng bổ sung.
React chứa một tập hợp các giá trị bất biến được chuyển đến trình kết
xuất thành phần dưới dạng thuộc tính trong các thẻ HTML. Các thành
phần khơng thể sửa đổi trực tiếp bất kỳ thuộc tính nào nhưng hỗ trợ chức
năng gọi lại để thực hiện sửa đổi.

3.4.

Virtual DOM
React chứa một bản đại diện của DOM thực trong bộ nhớ được gọi là
Virtual DOM. Thao tác DOM thực chậm hơn nhiều so với VDOM vì
khơng có gì được vẽ trên màn hình. Khi trạng thái của bất kỳ đối tượng
nào thay đổi, VDOM chỉ sửa đổi đối tượng đó trong DOM thực thay vì
cập nhật tồn bộ đối tượng.


Điều đó làm cho mọi thứ di chuyển nhanh chóng, đặc biệt là so với các
công nghệ front-end khác phải cập nhật từng đối tượng ngay cả khi chỉ
một đối tượng thay đổi trong ứng dụng web.
4. Lợi ích khi sử dụng ReactJs
● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi
tạo website dễ dàng hơn bởi vì bạn khơng cần phải code nhiều như
khi tạo trang web thuần chỉ dùng JavaScript, HTML và nó đã cung
cấp cho bạn đủ loại “đồ chơi” để bạn có thể dùng cho nhiều trường
hợp.
● Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ
tốt, đủ flexible để có thể thỏa các “yêu cầu” của nhiều dự án khác
nhau, bạn chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu
như toàn bộ ở các dự án sau. Không chỉ riêng mỗi ReactJS mà các
framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó,
ví dụ Flutter chẳng hạn.

● Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều
biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng
thực chất nó được sinh ra khơng chỉ làm mỗi đều đó. Nếu bạn cần
phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React
Native – một framework khác được phát triển cũng chính
Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử

dụng lại các Business Logic trong ứng dụng.
● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa
thông tin website của bạn lên top đầu tìm kiếm của Google. Bản
chất ReactJS là một thư viện JavaScript, Google Search Engine
hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn
cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!


● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng
trong việc debug trong quá trình phát triển ứng dụng. Điều đó giúp
tăng tốc q trình release sản phẩm cung như q trình coding của
bạn.
● Cơng cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu
thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt
qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec,
v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là
cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến
hiện tại của ReactJS trên thị trường Việt Nam là như thế nào.


CHƯƠNG 3: TÌM HIỂU CÁC CƠNG NGHỆ ỨNG DỤNG TRONG ĐỀ TÀI
1. Tổng quan về JS
1.1. Khái niệm
Javascript chính là một ngơn ngữ lập trình với khả năng đem tới sự sinh động khi
thiết kế website. Đây là dạng ngôn ngữ theo kịch bản, dựa trên chính đối tượng
phát triển có sẵn, hoặc là tự định nghĩa ra. Chính vì tính tiện lợi, hiệu quả ứng dụng
cao mà ngơn ngữ lập trình này được tin dùng ngày càng nhiều, ứng dụng rộng rãi
trong các website hiệu quả.
1.2.

Ưu điểm

● Sử dụng Javascript được thực hiện từ phía khách hàng: Điều này tức là
các mã được tiến hành thực hiện thông qua bộ vi xử lý của chính người
dùng, thay vì sử dụng trên máy chủ web. Chính đặc điểm này giúp việc tiết
kiệm năng thông, đồng thời giảm những căng thẳng, hoạt động quá nhiều
trên máy chủ web dễ dàng hơn.
● Là ngơn ngữ lập trình dễ dàng sử dụng: Đơn giản, dễ dàng tìm hiểu và sử
dụng là đặc điểm nổi bật của ngơn ngữ lập trình này. Với những cú pháp khá
tương đồng với tiếng Anh thì việc sử dụng Javascript trở nên dễ dàng, dễ
tiếp cận hơn rất nhiều. Thơng qua mơ hình DOM được sử dụng, cung cấp tới
nhiều tính năng hữu ích, được viết sẵn đem lại khả năng đáp ứng tốt cho
những nhu cầu, những địi hỏi khác nhau từ phía người dùng.
● Đánh giá cao ở độ nhanh chóng với người dùng cuối: Việc sử dụng ngơn
ngữ JS có khả năng đảm bảo khi mã được thực hiện trên thiết bị máy tính
của người dùng thì quá trình xử lý, lẫn kết quả đều hoàn thành gần như ngay
lập tức. Thời gian cụ thể phụ thuộc vào từng nhiệm vụ cụ thể mất thời gian
nhất định, song thường nó rất nhanh có thể giúp vấn đề được giải quyết.
● Mang tới các tính năng bổ sung cho các website: Thông qua bên thứ ba
như Grease monkey giúp đảm bảo cho các nhà phát triển ngơn ngữ
Javascript dễ dàng viết các đoạn mã, từ đó thực hiện trên website hiệu quả
như mong muốn. Việc mở rộng thêm các tính năng của trang web trở nên
đơn giản và dễ dàng hơn rất nhiều.
● Sử dụng đa dạng trên nhiều trình duyệt: Một ưu điểm nổi bật giúp JS
ngày càng được tin dùng, ứng dụng phong phú là ở khả năng sử dụng thơng
qua nhiều trình duyệt khác nhau. Từ các trình duyệt trên máy tính như


Chrome, tới Firefox,… hay những trình duyệt trên thiết bị di động,… đều có
thể sử dụng được đầy đủ và hiệu quả. Chính vì sự thích hợp với nhiều trình

duyệt, nhiều nền tảng khác nhau giúp nó được tin dùng nhiều hơn để đáp
ứng tốt cho đòi hỏi của con người.
● Dễ dàng khi sử dụng với ngôn ngữ Javascript: Sử dụng JS đảm bảo dễ
học, dễ dàng phát hiện lỗi khi xuất hiện, đồng thời nó hoạt động nhanh
chóng và nhẹ nhàng hơn nhiều ngơn ngữ lập trình khác. Bởi thế, q trình sử
dụng có thể thích hợp với nhiều đối tượng người dùng, đem lại hiệu quả cao
và tránh những ảnh hưởng khơng mong muốn có thể xảy ra.
● Sở hữu giao diện thân thiện, nhiều tính năng: Nếu so sánh với nhiều ngơn
ngữ lập trình khác thì việc sử dụng Javascript mang tới ưu điểm ở giao diện
thân thiện, có thể phù hợp với mọi đối tượng người dùng. Đem tới tính
tương tác cao giúp q trình ứng dụng của mỗi người có được kết quả tốt
đẹp. Cùng với nhiều tính năng mà ngơn ngữ này mang tới chắc chắn sẽ giúp
website chúng ta tạo ra có được hiệu quả sử dụng lý tưởng.
2. Tổng quan về MongoDB
2.1. Khái niệm
MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kế theo
kiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linh hoạt cho
phép các dữ liệu lưu trên bảng không cần phải tuân theo một dạng cấu trúc nhất
định nào. Chính do cấu trúc linh hoạt này nên MongoDB có thể được dùng để
lưu trữ các dữ liệu có cấu trúc phức tạp và đa dạng và không cố định (hay cịn
gọi là Big Data).
2.2.

Ưu điểm

● Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó
một Collection giữ các Document khác nhau. Số trường, nội dung và kích cỡ
của Document này có thể khác với Document khác.
● Cấu trúc của một đối tượng là rõ ràng.
● Khơng có các Join phức tạp.

● Khả năng truy vấn sâu hơn. MongoDB hỗ trợ các truy vấn động trên các
Document bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh
mẽ như SQL.


● MongoDB dễ dàng để mở rộng.
● Việc chuyển đổi/ánh xạ của các đối tượng ứng dụng đến các đối tượng cơ sở
dữ liệu là không cần thiết.
● Sử dụng bộ nhớ nội tại để lưu giữ phần công việc, giúp truy cập dữ liệu
nhanh hơn.
3. Tổng quan về NodeJS
3.1. Khái niệm
NodeJS là một nền tảng (platform) phía Server side được xây dựng, vận hành
trên V8 JavaScript runtime của Chrome giúp xây dựng và phát triển các ứng
dụng mạng một cách nhanh chóng và có khả năng mở rộng dễ dàng.

3.2. Ưu điểm
● Có tốc độ xử lý nhanh nhờ cơ chế xử lý bất đồng bộ (non-blocking). Bạn có
thể dễ dàng xử lý hàng ngàn kết nối trong khoảng thời gian ngắn nhất.
● Giúp bạn dễ dàng mở rộng khi có nhu cầu phát triển website.
● Nhận và xử lý nhiều kết nối chỉ với một single-thread. Nhờ đó, hệ thống xử
lý sẽ sử dụng ít lượng RAM nhất và giúp quá trình xử Nodejs lý nhanh hơn
rất nhiều.
● Có khả năng xử lý nhiều Request/s cùng một lúc trong thời gian ngắn nhất.
● Có khả năng xử lý hàng ngàn Process cho hiệu suất đạt mức tối ưu nhất.
● Phù hợp để xây dựng những ứng dụng thời gian thực như các ứng dụng chat,
mạng xã hội …


CHƯƠNG 4: XÂY DỰNG HỆ THỐNG

1. Mơ hình Use-case
1.1. Sơ đồ Use-case


1.2. Danh sách Actor
STT

Tên Actor

1

Khách hàng

2

Admin

Ý nghĩa / Ghi chú

1.3. Danh sách Use-case
STT

Tên Use-case

Ý nghĩa / Ghi chú

1

Đăng nhập

Đăng nhập vào phần
mềm 

2

Đăng ký

Đăng ký tài khoản cho
người dùng mới

3

Đăng xuất

Cho phép người dùng
thoát khỏi tài khoản
đang sử dụng


4

Xem thông tin sản phẩm Xem các thông tin chi
tiết của sản phẩm để tiến
hành mua hàng

5

Thêm sản phẩm vào giỏ Cho phép người dùng
hàng
thêm sản phẩm vào giỏ

hàng để mua hàng

6

Xem giỏ hàng cá nhân

Cho phép người dùng
truy cập vào giỏ hàng cá
nhân để xem các sản
phẩm đã thêm và tiến
hành đặt hàng

7

Mua hàng

Cho phép người dùng
mua sản phẩm đã chọn
trong giỏ hàng

8

Xóa sản phẩm khỏi giỏ Cho phép người dùng
hàng
xóa sản phẩm đã chọn ra
khỏi giỏ hàng

9

Xem thơng tin cá nhân

10

Chỉnh sửa thông tin cá Cho phép người dùng
nhân
thay đổi thông tin cá
nhân đã đăng ký từ
trước

11

Xem thông tin các đơn Xem các thông tin về
hàng
đơn hàng đã đặt

12

Thêm/Xóa/Sửa
phẩm

Cho phép người dùng
xem lại thơng tin cá
nhân đã đăng ký từ
trước

sản Thêm/Xóa/Chỉnh
sản phẩm

sửa

13

Xem danh sách đơn Cho phép admin xem
hàng 
thông tin các đơn hàng
hiện có

14

Cập nhật đơn hàng

Cho phép admin cập
nhật trạng thái của đơn
hàng

15

Xem báo cáo doanh thu

Cho phép admin xem
thống kê doanh thu 

1.4. Đặc tả Use-case
1.4.1. Đăng nhập
STT

01

Tên use case

Đăng nhập

Mục đích

Đăng nhập vào  hệ thống.

Người dùng

Khách hàng, Admin

Điều kiện kích hoạt

Người dùng khởi động hệ thống.

Trạng thái hệ thống trước khi - Tài khoản đã được tạo sẵn.
bắt đầu use-case
- Thiết bị của người dùng đã được kết nối với
internet khi thực hiện đăng nhập.
Trạng thái hệ thống sau khi thực - Người dùng đăng nhập ứng dụng thành cơng.
hiện use-case
Luồng sự kiện chính

1. Người dùng truy cập vào trang web.
2. Người dùng nhập tài khoản, mật khẩu và
chọn lệnh đăng nhập.


3. Hệ thống xác thực thông tin đăng nhập thành
công và cho phép người dùng truy cập ứng

dụng. 
Luồng sự kiện phụ

Không 

Mở rộng

- Hệ thống xác thực thông tin đăng nhập không
thành công và hiển thị thông báo.
+ TH1: Người dùng hủy đăng nhập.
      Use case dừng lại.
+ TH2: Người dùng chọn lệnh quên mật khẩu.
Use case tiếp tục use case 03.
+ TH3: Người dùng chọn lệnh đăng ký.
Use case tiếp tục use case 02. 

Các yêu cầu đặc biệt

Không

1.4.2. Đăng ký
STT

02

Tên use case

Đăng ký

Mục đích

Đăng ký tài khoản người dùng cho phần mềm.

Người dùng

Khách hàng, Admin

Điều kiện kích hoạt

Người dùng khởi động phần mềm và chọn lệnh
đăng ký.

Trạng thái hệ thống trước khi - Người dùng chưa có tài khoản.
bắt đầu use-case


Trạng thái hệ thống sau khi thực - Người dùng đăng ký tài khoản thành công.
hiện use-case
- Hệ thống lưu thơng tin tài khoản mới vào dữ
liệu.
Luồng sự kiện chính

1. Người dùng chọn lệnh đăng ký tài khoản.
2. Người dùng nhập tài khoản mật khẩu muốn
đăng ký và chọn lệnh đăng ký.
3. Hệ thống xác thực thông tin tài khoản mật
khẩu hợp. lệ, tài khoản chưa từng được đăng ký
và cho phép người dùng sử dụng tài khoản để
đăng nhập vào hệ thống.
4. Hệ thống lưu thông tin tài khoản mới vào dữ

liệu.

Luồng sự kiện phụ

Không 

Mở rộng

- Hệ thống xác thực thông tin đăng ký không
thành công và hiển thị thông báo.
+ TH1: Người dùng hủy đăng ký.
      Use case dừng lại.
+ TH2: Người dùng nhập lại thông tin.
Use case quay lại bước 2.
+ TH3: Người dùng chọn lệnh quay lại.
Use case tiếp tục use case 01.
+ TH4: Người dùng chọn lệnh quên mật khẩu.
Use case tiếp tục use case 03.

Các yêu cầu đặc biệt

Tài khoản, mật khẩu đăng ký không được chứa
các kí tự đặc biệt và khoảng trống. 


1.4.3. Đăng xuất
STT

03

Tên use case

Đăng xuất

Mục đích

Đăng xuất khỏi tài khoản đang sử dụng

Người dùng

Khách hàng, Admin

Điều kiện kích hoạt

- Người dùng đã đăng nhập thành công vào
phần mềm.

Trạng thái hệ thống trước khi - Người dùng đã đăng nhập thành công.
bắt đầu use-case
Trạng thái hệ thống sau khi thực - Người dùng đăng xuất thành công.
hiện use-case
- Hệ thống quay trở lại màn hình đăng nhập.
Luồng sự kiện chính

1. Người dùng mở màn hình thơng tin cá nhân.
2. Người dùng chọn lệnh đăng xuất.
3. Hệ thống xác nhận người dùng có thật sự
muốn đăng xuất hay khơng.
4. Hệ thống quay trở lại màn hình đăng nhập.

Luồng sự kiện phụ

Khơng 

Mở rộng

- Hệ thống xác nhận người dùng không đăng
xuất thành công.
+ TH1: Người dùng hủy đăng xuất.
      Use case dừng lại.

Các yêu cầu đặc biệt

Không


1.4.4. Xem thông tin sản phẩm
STT

04

Tên use case

Xem thông tin sản phẩm

Mục đích

Xem chi tiết thơng tin sản phẩm mà người dùng
muốn mua

Người dùng

Khách hàng, Admin

Điều kiện kích hoạt

- Người dùng đã đăng nhập thành công vào
phần mềm.
- Người dùng chọn vào sản phẩm muốn xem.

Trạng thái hệ thống trước khi - Người dùng đã đăng nhập thành công.
bắt đầu use-case
- Hệ thống có đầy đủ thơng tin về các sản phẩm.
Trạng thái hệ thống sau khi thực - Hiển thị thông tin sản phẩm mà người dùng
hiện use-case
muốn xem.
Luồng sự kiện chính

1. Người dùng chọn sản phẩm mà mình muốn
xem.
2. Hệ thống truy cập vào dữ liệu để lấy ra thông
tin về sản phẩm mà người dùng muốn xem.
3. Chuyển sang màn hình thơng tin sản phẩm
cho phép người dùng xem thông tin chi tiết về
sản phẩm.

Luồng sự kiện phụ

Không 

Mở rộng

Không

Các yêu cầu đặc biệt

Không

1.4.5. Thêm các sản phẩm vào giỏ hàng


STT

05

Tên use case

Thêm sản phẩm vào giỏ hàng

Mục đích

Thêm sản phẩm giỏ hàng để người dùng mua
sản phẩm

Người dùng

Khách hàng

Điều kiện kích hoạt

- Người dùng đã đăng nhập thành cơng vào
phần mềm.

Trạng thái hệ thống trước khi - Người dùng đã đăng nhập thành công.
bắt đầu use-case
Trạng thái hệ thống sau khi thực - Hệ thống cập nhật thông tin vào dữ liệu
hiện use-case
Luồng sự kiện chính

1. Người dùng xem thông tin về sản phẩm.
2. Người dùng chọn lệnh thêm vào giỏ hàng.
3. Sản phẩm được thêm vào giỏ hàng của người
dùng.

Luồng sự kiện phụ

Không 

Mở rộng

Không

Các yêu cầu đặc biệt

Không

1.4.6. Xem giỏ hàng cá nhân
STT
Tên use case
Mục đích

Người dùng

06
Xem giỏ hàng cá nhân
Cho phép người dùng xem các sản phẩm đã
thêm vào giỏ hàng cá nhân
Khách hàng


Điều kiện kích hoạt
Trạng thái hệ thống trước khi
bắt đầu use-case
Trạng thái hệ thống sau khi
thực hiện use-case
Luồng sự kiện chính

Luồng sự kiện phụ
Mở rộng

Các yêu cầu đặc biệt

- Người dùng đã đăng nhập thành công vào
phần mềm.
- Người dùng đã đăng nhập thành công.
Không
1. Người dùng chọn lệnh xem giỏ hàng cá
nhân ở các màn hình.
2. Hệ thống truy cập vào dữ liệu.
3. Hiện thông tin các sản phẩm người dùng đã
thêm vào giỏ hàng.

Không 
Nếu giỏ hàng cá nhân chưa có sản phẩm nào
+ TH1: Người dùng chọn lệnh tiếp tục mua
hàng.
Use case kết thúc quay lại màn hình trang chủ.
Khơng

1.4.7. Mua hàng
STT
Tên use case
Mục đích
Người dùng
Điều kiện kích hoạt
Trạng thái hệ thống trước
khi bắt đầu use-case
Trạng thái hệ thống sau khi
thực hiện use-case

07
Mua hàng
Cho phép người dùng đặt những sản phẩm đã
chọn trong giỏ hàng
Khách hàng
- Người dùng đã đăng nhập thành công vào phần
mềm.
- Người dùng đã đăng nhập thành công.
- Hệ thống tạo đơn hàng và cập nhật dữ liệu.


Luồng sự kiện chính

Luồng sự kiện phụ

Mở rộng

Các yêu cầu đặc biệt

1. Người dùng chọn lệnh xem giỏ hàng cá nhân ở
các màn hình.
2. Hệ thống truy cập vào dữ liệu.
3. Hiện thông tin các sản phẩm người dùng đã
thêm vào giỏ hàng.
4. Người dùng chọn tất cả sản phẩm và chọn lệnh
đặt hàng.
5. Hệ thống tạo đơn hàng có tất cả sản phẩm
trong giỏ hàng và cập nhật dữ liệu.
Luồng phụ 1:
Các bước 1 2 3 giống luồng chính.
4. Người dùng chọn vào sản phẩm mà mình
muốn mua và chọn lệnh đặt hàng.
5. Hệ thống tạo đơn hàng với các mặt hàng người
dùng đã chọn và cập nhật dữ liệu.
Nếu giỏ hàng cá nhân chưa có sản phẩm nào
+ TH1: Người dùng chọn lệnh tiếp tục mua hàng.
Use case kết thúc quay lại màn hình trang chủ.
Người dùng thêm ít nhất một sản phẩm vào giỏ
hàng

1.4.8. Xóa sản phẩm khỏi giỏ hàng
STT

Tên use case
Mục đích
Người dùng
Điều kiện kích hoạt
Trạng thái hệ thống trước
khi bắt đầu use-case
Trạng thái hệ thống sau khi
thực hiện use-case

08
Xóa sản phẩm khỏi giỏ hàng
Cho phép người dùng xóa các sản phẩm đã thêm
vào giỏ hàng
Khách hàng
- Người dùng đã đăng nhập thành công vào phần
mềm.
- Người dùng đã đăng nhập thành công.
- Hệ thống cập nhật dữ liệu.