Tìm hiểu REACTJS và xây dựng WEBSITE bán đồ gia dụng (báo cáo cuối kì đồ án 1)

1

ĐẠ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ÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG
WEBSITE BÁN ĐỒ GIA DỤNG

Giảng viên hướng dẫn: ThS. HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực
hiện:
LÊ THANH TUẤN –MSSV: 19522467 VÕ ĐÔNG PHÚ –MSSV: 19522025

Thành phố Hồ Chí Minh, tháng 06 năm 2022
2


ĐẠ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ÀI: TÌM HIỂU REACTJS VÀ XÂY DỰNG
WEBSITE BÁN ĐỒ GIA DỤNG

Giảng viên hướng dẫn: HUỲNH HỒ THỊ MỘNG TRINH Sinh viên thực hiện:
LÊ THANH TUẤN –MSSV: 19522467
VÕ ĐÔNG PHÚ –MSSV: 19522025 Thành phố Hồ Chí Minh, tháng 06 năm 2022

3

Lời cảm ơn


Đồ án 1 là môn đầu tiên đặt tiền đề cho việc xây dựng khóa luận tốt nghiệp. Đây là
mơn học có nhiều thử thách, địi hỏi người học phải dành nhiều thời gian, cơng sức để
nghiên cứu, tìm tịi và xây dựng. Đồng thời, đây cũng là cơ hội để sinh viên thực hành
những gì đã học trong suốt những năm đại học và học hỏi thêm nhiều kiến thức, kinh
nghiệm và kỹ năng mới phục vụ cho công việc sau này. Cho nên đây được xem là thử
thách và cũng là cơ hội để sinh viên được rèn luyện, hồn thiện bản thân bằng những kĩ
năng tích lũy được trong suốt q trình làm đồ án.
Để có thể đi đến đoạn cuối của hành trình là cả sự nỗ lực, cố gắng và kiên trì. Đồng
hành cùng sinh viên vượt qua thử thách này là sự có mặt và giúp đỡ của những người
thầy tận tâm trong công việc.
Nhóm xin chân thành cảm ơn cơ Huỳnh Hồ Thị Mộng Trinh đã tận tình giúp đỡ nhóm
em hồn thành đồ án 1 của mình. Chính nhờ những sự góp ý, động viên của cơ đã giúp
đồ án của nhóm được hoàn thiện và chuyên nghiệp nhiều hơn. Bên cạnh đó, nhóm đã
học hỏi được rất nhiều kiến thức, kinh nghiệm và bài học thú vị trong q trình làm
khố luận, đó sẽ là những hành trang hữu ích cho nhóm sau này.
Nhóm cũng xin chân thành cảm ơn các anh chị, bạn bè đã giúp đỡ nhóm trong quá trình
thực hiện đồ án. Nhờ mọi người mà nhóm có nhiều góc nhìn khác nhau về đề tài đang
làm, từ đó giúp hồn thiện đồ án của nhóm. Một lần nữa, nhóm xin chân thành cảm ơn
cơ và mọi người.
4

NHẬN XÉT
(Của giáo viên hướng dẫn)
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

……………………………………………………………………………………


……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
MỤC LỤC
Lời cảm ơn.................................................................................................................................. 3
CHƯƠNG I: GIỚI THIỆU CHUNG ............................................................................................ 1
1. Đề tài ................................................................................................................................... 1 2.
Lý do chọn đề tài .................................................................................................................. 1 3.

Tóm tắt đề tài....................................................................................................................... 1 4.
Mục tiêu đề tài...................................................................................................................... 1 5.
Phương pháp nghiên cứu ...................................................................................................... 2 6. Ý


nghĩa và hướng của đề tài.................................................................................................. 2 6.1. Về
mặt tài liệu ................................................................................................................. 2 6.2. Về mặt
sản phẩm ............................................................................................................. 2 CHƯƠNG II:
CÔNG NGHỆ LIÊN QUAN................................................................................... 3 1.
Reactjs................................................................................................................................. 3 1.1.
Giới thiệu........................................................................................................................ 3 1.2. Tính
năng nổi bật của ReactJs:........................................................................................... 4 1.3. Lý do sử
dụng.................................................................................................................. 5 2. ASP.NET Web
API............................................................................................................... 5 2.1. Giới
thiệu........................................................................................................................ 5 2.2 Tính năng
nổi bật của ASP.NET Web API: .......................................................................... 6 2.3. Lý do sử dụng
ASP.NET Web API: ................................................................................... 6 3.
PostgreSQL.......................................................................................................................... 6 3.1.
Giới thiệu........................................................................................................................ 6 3.2. Lý
do sử dụng PostgreSQL................................................................................................ 7 CHƯƠNG
III: PHÂN TÍCH HỆ THỐNG .................................................................................... 9 1. Danh
sách yêu cầu hệ thống .................................................................................................. 9 2. Đặt tả
Use-case .................................................................................................................. 10 2.1. Đặc tả
Use-case “Đăng ký” ............................................................................................. 12 2.2. Đặc tả Usecase “Đăng nhập”.......................................................................................... 13 2.3. Đặc tả Use-case
“Thêm sản phẩm”................................................................................... 15 2.4. Đặc tả Use-case “Sửa
sản phẩm”..................................................................................... 16 2.5. Đặc tả Use-case “Xóa sản
phẩm” .................................................................................... 17 2.6. Đặc tả Use-case “Tìm kiểm sản
phẩm” ............................................................................ 18 2.7. Đặc tả Use-case “Xem thông tin sản
phẩm”...................................................................... 19
2.8. Đặc tả Use-case “Xem danh mục sản phẩm”..................................................................... 20

2.9. Đặc tả Use-case “Thêm giỏ hàng” ................................................................................... 21
2.10. Đặc tả Use-case “Kiểm tra giỏ hàng” ............................................................................. 22
2.11. Đặc tả Use-case “Xóa sản phẩm khỏi giỏ hàng” .............................................................. 23
2.12. Đặc tả Use-case “Cập nhật sản phẩm trong giỏ” .............................................................. 24
2.13. Đặc tả Use-case “Đặt hàng”.......................................................................................... 25
3. Sơ đồ dữ liệu ...................................................................................................................... 27
3.1. Bảng User..................................................................................................................... 28
3.2. Bảng Admin.................................................................................................................. 28
3.3. Bảng Product................................................................................................................. 29


3.4. Bảng DetailProduct ........................................................................................................ 30
3.5. Bảng Category............................................................................................................... 30
3.6. Bảng Discount............................................................................................................... 31
3.7. Bảng Transaction ........................................................................................................... 31
CHƯƠNG V: THIẾT KẾ GIAO DIỆN ...................................................................................... 32
1. Trang Home ................................................................................................................... 32 2.
Trang sản phẩm.............................................................................................................. 36 3.
Trang khuyến mãi........................................................................................................... 37 4.
Trang giỏ hàng................................................................................................................ 38 5.
Trang Liên hệ..................................................................................................................... 39 6.
Chi tiết sản phẩm ............................................................................................................... 40
CHƯƠNG VI: TỔNG KẾT........................................................................................................ 42
1. Cơng nghệ sử dụng ............................................................................................................. 42
2. Độ hồn thiện chức năng..................................................................................................... 42
3.Kết quả đạt được và hướng phát triển.................................................................................. 43
3.1. Kết quả đạt được............................................................................................................ 43 3.2.
Hướng phát triển............................................................................................................ 44
CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC ................................................................... 45
CHƯƠNG VIII: TÀI LIỆU THAM KHẢO ................................................................................ 47

1. ReactJS: 47 2.
PostgreSQL: .............................................................................. 47 3.
ASP.NET Web API: 47 4.
Redux: 47 5.
Axios: 47

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 đồ gia
dụng - Cơng nghệ sử dụng:
• Frontent: Reactjs, Axios, Redux
• Backent: ASP.NET Web API
- Cơ sở dữ liệu: Postgres
2. Lý do chọn đề tài


Trong thời kì cơng nghệ ngày càng phát triển, Internet được ứng dụng ở khắp
mọi nơi thì nhu cầu mua sắm trang thiết bị gia dụng của mọi người cũng thay đổi.
Từ đó, nhóm quyết định xây dựng một trang web bán đồ gia dụng để đáp ứng như
cầu tìm hiểu, lựa chọn và mua sắm các thiết bị gia dụng cho gia đình. Ngồi ra, để
xây dựng giao diện website linh động thì nhóm đã tìm hiểu và quyết định chọn
cơng nghệ Reactjs, một cơng nghệ lập trình giao diện mới và được đơng đảo lập
trình viên sử dụng để phát triển phần mềm.
3. Tóm tắt đề tài
Website bán hàng gia dụng được xây dựng để đáp ứng như cầu tìm hiểu, lựa
chọn và mua sắm của mọi gia đình.
4. Mục tiêu đề tài
- Xây dựng một trang web từ công nghệ Reactjs với cách chức năng cơ bản
đáp ứng được nhu cầu người dùng. Bên cạnh đó, học hỏi thêm nhiều công nghệ và
kiến thức mới về lập trình website, API, Services. Từ đó hồn thiện thêm về kĩ

năng lập trình để tiếp tự phát triển dự án cho mơn học Đồ án 2.
- Tìm hiểu được cơng nghệ thích hợp xây dựng ứng dụng.
- Hồn thành được báo cáo môn học.
5. Phương pháp nghiên cứu
- Nghiên cứu các Website có sẵn trên thị trường, nhận xét được ưu khuyết
điểm của các Website đó.
- Nghiên cứu các tài liệu đặc tả về các Website tương tự như Website
… - Tìm hiểu các
cơng nghệ mới trên thị trường, nhận xét và chọn ra những cơng nghệ thích hợp để
xây dựng website.
6. Ý nghĩa và hướng của đề tài
6.1. Về mặt tài liệu
- Sử dụng nguồn tài liệu tham khảo về Reactjs, ASP.NET Web API,
PostgreSQL.


- Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mơ hình thiết kế giao
diện. 6.2. Về mặt sản phẩm
- Tạo ra website mua sắm với một số tính năng cơ bản
- Chức năng phù hợp với tình hình thực tế và dễ sử dụng.
CHƯƠNG II: CƠNG NGHỆ LIÊN QUAN
1. Reactjs
1.1. Giới thiệu
• ReactJS là một thư viện JavaScript được tạo ra để xây dựng giao diện người
dùng có khả năng tương tác tốt và nhanh chóng cho các ứng dụng web và di
động. Nó là một thư viện mã nguồn mở, xây dựng dựa trên các component,
giao diện người dùng chỉ chịu trách nhiệm cho tầng view của ứng dụng.
• Nó được sử dụng bởi các cơng ty lớn, đã thành lập và các công ty mới thành
lập như: Netflix, Airbnb, Instagram và New York Times..v..v. ReactJS mang
lại nhiều lợi thế cho các lập trình viên, khiến nó trở thành một lựa chọn tốt

hơn so với các Framework khác như Angular.
• Trong kiến trúc Model View Controller (MVC), tầng view chịu trách nhiệm
về giao diện của ứng dụng. ReactJS được tạo ra bởi Jordan Walke, một kỹ
sư phần mềm tại Facebook.

Hình 1.1: Logo Reactjs
1.2. Tính năng nổi bật của ReactJs:


- JSX – JavaScript Syntax Extension: JSX như tên gọi của nó, là một phần
mở rộng cú pháp cho JavaScript. Nó được sử dụng với ReactJS để mơ tả
giao diện người dùng trông như thế nào. Bằng cách sử dụng JSX, chúng ta
có thể viết các cấu trúc HTML trong cùng một tệp chứa mã JavaScript. Điều
này làm cho mã dễ hiểu và dễ gỡ lỗi hơn, vì nó tránh việc sử dụng các cấu
trúc DOM JavaScript phức tạp.
- Virtual DOM: Virtual DOM là một định dạng dữ liệu của JavaScript, với
khối lượng nhẹ và được dùng để thể hiện nội dung của DOM – Document
Object Model – Mơ hình Đối tượng Tài liệu tại một thời điểm nhất định nào
đó. Khi trạng thái của một đối tượng thay đổi, VDOM chỉ thay đổi đối tượng
đó trong DOM thực thay vì cập nhật tất cả các đối tượng.
- Performance: ReactJS sử dụng VDOM, giúp các ứng dụng web chạy
nhanh hơn nhiều so với những ứng dụng được phát triển với các Framework
front-end khác.
- Redux: Redux là một phần cực kỳ quan trọng trong ReactJS. Bản thân của
ReactJS không sở hữu các module chuyên dụng nhằm để xử lý dữ liệu. Vì
thế, ReactJS được triển khai một cách độc lập và chia nhỏ View thành những
component nhỏ khác nhau, điều này sẽ giúp cho việc quản lý dễ dàng hơn,
các thành phần sẽ liên kết chặt chẽ với nhau hơn.
- One-way Data Binding
- Component: ReactJS được xây dựng xoay quanh các component, trong

khi đó, các Framework khác dùng template. Để tạo ra một component có đầy
đủ những đặc tính, bạn chỉ cần sử dụng phương thức createClass dùng để
nhận một tham số mơ tả đặc tính.
1.3. Lý do sử dụng
Dễ dàng tạo các ứng dụng động: ReactJS giúp tạo các ứng dụng web động
dễ dàng hơn vì nó u cầu ít mã hóa hơn và cung cấp nhiều chức năng hơn, trái
ngược với JavaScript, nơi việc viết mã thường trở nên phức tạp rất nhanh.


Cải thiện hiệu năng với Virtual DOM: ReactJS cho phép người dùng xây
dựng các Virtual DOM và host chúng trong bộ nhớ. Ưu điểm này sẽ giúp Vitural
thay đổi ngay khi DOM thực tế có sự thay đổi. Cập nhật liên tục giúp các ứng dụng
tránh tình trạng bị gián đoạn. Người dùng sử dụng liên tục, website ổn định giúp
doanh thu duy trì và tăng trưởng vượt bậc.
Các component có thể tái sử dụng:
• Các thành phần là các khối xây dựng của bất kỳ ứng dụng ReactJS nào và
một ứng dụng đơn lẻ thường bao gồm nhiều thành phần.
• Các thành phần này có logic và điều khiển của chúng, và chúng có thể được
sử dụng lại trong tồn bộ ứng dụng, do đó làm giảm đáng kể thời gian phát
triển của ứng dụng.
2. ASP.NET Web API
2.1. Giới thiệu
ASP.NET Web API là một framework (khung làm việc), được cung cấp bởi Microsoft, giúp
dễ dàng xây dựng API Web, tức là các dịch vụ dựa trên giao thức HTTP. ASP.NET Web API
là một nền tảng lý tưởng để xây dựng các dịch vụ Restful trên đỉnh.NET Framework.

Hình 2.1: Logo ASP.NET Web API


2.2 Tính năng nổi bật của ASP.NET Web API:

- Thuận tiện cho các hành động (action) CRUD (create – read – update –
delete)
- Thỏa thuận nội dung được tích hợp sẵn
- Cho phép sử dụng các attribute tiền tố điều hướng (route prefix) và route Định nghĩa quy tắc ràng buộc cho route
- Hỗ trợ CORS (Cross-Origin Resource Sharing ~ Chia sẻ giữa các nguồn
tài nguyên gốc)
2.3. Lý do sử dụng ASP.NET Web API:
Có thể kể ra 1 số lợi ích khi sử dụng ASP.NET Web API như sau: Cấu hình
- Mặc định sử dụng REST
- Trìu tượng hóa với các Route
- Mở rộng chức năng xử lý dạng đường ống đơn giản
3. PostgreSQL
3.1. Giới thiệu
PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng (object
relational database management system) có mục đích chung, hệ thống cơ sở dữ
liệu mã nguồn mở tiên tiến nhất hiện nay.


Hình 3.1: Logo PostgreSQL
Khác với phần lớn cơ sở dữ liệu khác, PostgreSQL hoạt động rất ổn định không
yêu cầu bảo trì cầu kỳ. Nó dễ dàng để triển khai trên nhiều ứng dụng khác nhau với
phí đầu tư hợp lý. Đến đây, bạn hẳn phần nào hiểu hơn định nghĩa PostgreSQL là
gì.
3.2. Lý do sử dụng PostgreSQL
PostgreSQL mang đến người dùng vơ số chức năng hữu ích. Cùng với đó là
khả năng vận hành ổn định, tốc độ tối ưu.
- Cung cấp nhiều kiểu dữ liệu: PostgreSQL cung cấp đa dạng kiểu dữ liệu như
nguyên hàm, cấu trúc, hình học,..
- Bảo đảm toàn vẹn dữ liệu: Dữ liệu trong PostgreSQL ln được đảm bảo
tính tồn vẹn.

- Tính năng thiết lập linh hoạt: PostgreSQL cho phép người dùng thiết lập
danh mục từ cơ bản đến nâng cao, tối ưu ưu hóa tốc độ truy cập, hỗ trợ
thống kê trên nhiều cột,.. Cùng với đó là vơ số thiết lập khác.
- Chức năng bảo mật: PostgreSQL hỗ trợ xây dựng hàng rào bảo mật, xác
thực mạnh.
- Khả năng mở rộng: Người dùng có thể thực hiện mở rộng hệ thống qua các
phức thức lưu trữ, kết nối cơ sở dữ liệu.
- Chức năng tìm kiếm văn bản: PostgreSQL cung cấp tính năng tìm kiếm văn
bản đầy đủ, hệ thống hóa ký tự theo cách khoa học.


Ngồi ra, PostgreSQL cịn tích hợp chức năng cùng lúc quản lý số lượng lớn
người dùng.
CHƯƠNG III: PHÂN TÍCH HỆ THỐNG
1. Danh sách yêu cầu hệ thống
Qua khảo sát từ những người dùng có nhu cầu, cũng như tham khảo các ứng
dụng khác, nhóm đã đưa ra danh sách thể hiện các nghiệp vụ mà ứng dụng cần
có:
Bảng 3.1. Danh sách yêu cầu của hệ thống
STT

Tên yêu cầu

Ghi
chú

1

Đăng nhập, đăng ký

Để thanh toán đơn hàng người
dùng phải đăng ký hoặc đăng
nhập tài khoản để tiến hành
thanh toán đơn hàng.

2

Quản lý sản phẩm

Admin sẽ thực hiện thêm, xóa
và cập nhật sản phẩm

3

Xem sản phẩm

Khách hàng sẽ truy cập vào
trang web để xem sản phẩm

4

Xem danh mục sản phẩm

Khách hàng sẽ truy cập vào
trang web để xem danh mục
sản phẩm

5

Thêm giỏ hàng

Khách hàng sẽ thêm sản
phẩm muốn mua vào giỏ
hàng


6

Kiểm tra giỏ hàng

Khách hàng có thể thêm, xóa
và cập nhật sản phẩm

7

Đặt hàng

Khách hàng đăng nhập tài
khoản để tiến hành thanh toán
đơn hàng

2. Đặt tả Use-case


Hình 3.1: Sơ đồ Use-case

Bảng 3.2: Danh sách các Actor
ST
T

Tên Actor

Ý nghĩa/Ghi chú

1

Admin

Người quản trị trang web

2

Khách hàng

Người truy cập sử dụng trang web

Bảng 3.3: Danh sách các Use-case
STT

Tên Usecase

Ý nghĩa / ghi chú

1

Đăng ký

Tạo tài khoản cá nhân để mua hàng

2

Đăng nhập

Đăng nhập để thanh toán đơn hàng
học đăng nhập để quản trị website

3

Thêm sản phẩm

Admin thêm sản phẩm


4

Sửa sản phẩm

Admin cập nhật thơng tin sản phẩm

5

Xóa sản phẩm

Admin xóa sản phẩm

6

Tìm kiếm sản phẩm

7

Xem thơng tin sản phẩm

Admin tìm kiếm sản phẩm trong danh sách
Khách hàng xem thông tin sản phẩm
trên website

8

Xem danh mục sản phẩm

Khách hàng xem danh mục sản phẩm
trên website

9

Thêm giỏ hàng

Khách hàng thêm sản phẩm vào giỏ hàng

10

Kiểm tra giỏ hàng

Khách hàng kiểm tra sản phẩm trong
giỏ hàng

11

Xóa sản phẩm trong giỏ hàng

12

13

Khách hàng xóa sản phẩm trong giỏ hàng

Cập nhật sản phẩm trong

Khách hàng cập nhật sản phẩm trong

giỏ hàng

giỏ hàng

Đặt hàng

Khách hàng tiến hàng thanh toán sản phẩm

2.1. Đặc tả Use-case “Đăng ký”
Bảng 3.2.1: Bảng đặc tả Use-case “Đăng ký”
Mô tả
Tác nhân

Tạo tài khoản cá nhân để mua hàng
Khách hàng


Luồng chính

Hành vi của tác nhân

Hành vi của hệ thống

1 - Người dùng truy
cập website
2 - Chọn vào nút Đăng
ký tài khoản.
3 - Điền đầy đủ thông
tin cá nhân được yêu
cầu.
4 - Nhấn vào nút Đăng ký.
5 - Website kiểm tra thông
tin tài khoản.
6 - Nếu thông tin hợp lệ,
hiện thông báo tạo tài
khoản thành công, tự động
đăng nhập vào website.
Luồng thay thế

Thông tin điền vào bị thiếu hoặc sai cú pháp:
1 - Website hiện thông báo lỗi thông tin
2 – Khách hàng nhập lại thông tin bị sai hoặc thiếu

3 - Tiếp tục thực hiện bước 4 ở dòng sự kiện
chính Số điện thoại/email sử dụng đã được đăng
ký:
1 - Website báo Tài khoản đã được đăng ký
2 – Khách hàng nhập lại thông tin tài khoản
khác 3 - Tiếp tục thực hiện bước 4 ở dòng sự

kiện chính

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành công với server.

Điều kiện sau

Thành công:

Thất bại:

- Thông tin tài khoản

CSDL không thay đổi

khách hàng mới được lưu
vào CSDL
- Lưu lại thông tin đăng
nhập cho lần đăng nhập
kế tiếp

2.2. Đặc tả Use-case “Đăng nhập”
Bảng 3.2.2: Bảng đặc tả Use-case “Đăng nhập”
Mơ tả
Tác nhân
Luồng chính

Khách hàng đăng nhập vào website
Admin, Khách hàng
Hành vi của tác nhân
1 - Người dùng truy
cập website
2 - Chọn cách thức đăng

Hành vi của hệ thống


nhập (Đăng nhập tài
khoản cũ, Đăng nhập tài
khoản khác)
3 - Nếu hình thức đăng nhập là
Tài khoản cũ, website kiểm tra
thông tin về người dùng trong
hệ thống
4 - Nếu thông tin hợp lệ,
chuyển tiếp vào trang chủ của
website
Luồng thay thế

Người dùng chọn hình thức đăng nhập tài khoản
khác: 1 - Người dùng nhập thông tin về tài khoản và
mật khẩu 2 - Nhấn vào nút Đăng nhập
3 - Website kiểm tra thơng tin người dùng có trong hệ
thống 4 - Tiếp tục bước 4 ở dịng sự kiện chính
Thơng tin đăng nhập không hợp lệ:
1 - Website hiện thông báo lỗi

2 - Website đăng nhập lại bằng thông tin khác
3 - Tiếp tục thực hiện bước 3 ở dòng sự kiện phụ: đăng
nhập bằng tài khoản

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành cơng với server.

Điều kiện sau

Không đổi


2.3. Đặc tả Use-case “Thêm sản phẩm”
Bảng 3.2.3: Bảng đặc tả Use-case “Thêm sản phẩm”
Mô tả

Amin muốn thêm một sản phẩm mới

Tác nhân

Admin

Luồng chính

Hành vi của tác nhân

Hành vi của hệ thống

1 – Admin thực hiện
đăng nhập vào website
quản trị 2 - Admin truy
cập vào trang thêm sản
phẩm
3 – Nhập thơng tin
sản phẩm và hồn
thành
4 - Hệ thống hiển thị thông
báo đã thêm sản phẩm thành
công
Luồng thay thế

Không

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành công với server.

Điều kiện sau

Cập nhật thông tin về sản phẩm lên CSDL.

2.4. Đặc tả Use-case “Sửa sản phẩm”
Bảng 3.2.4: Bảng đặc tả Use-case “Sửa sản phẩm”
Mô tả

Admin muốn cập nhật thông tin sản phẩm

Tác nhân
Luồng chính

Admin
Hành vi của tác nhân

Hành vi của hệ thống

1 – Admin thực hiện
đăng nhập vào trang
quản trị 2 – Admin chọn
vào sản phẩm cần sửa
3 – Admin nhập thông
tin cần sửa
4 - Bấm nút Lưu
5 – Website kiểm tra thông
tin sản phẩm
7 - Nếu thông tin hợp lệ,
website hiện thông báo cập
nhật sản phẩm thành công.
8. Nếu thông tin không hợp
nệ, website hiện thông báo cập
nhật sản phẩm không thành
công và yêu cầu nhập lại
thông tin

Luồng thay thế

Thông tin thay đổi không hợp lệ:

1 – Website quay về trang cập nhật sản phẩm
2 – Admin nhập lại thông tin sản phẩm
3 – Lưu thông tin sản phẩm

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành cơng với server.

Điều kiện sau

Thông tin sản phẩm được cập nhật trên database

2.5. Đặc tả Use-case “Xóa sản phẩm”
Bảng 3.2.5: Bảng đặc tả Use-case “Xóa sản phẩm”
Mơ tả
Tác nhân
Luồng chính

Admin xóa sản phẩm
Admin
Hành vi của tác nhân

Hành vi của hệ thống

1 – Admin thực hiện
đăng nhập vào trang
quản trị 2 – Admin chọn

vào sản phẩm cần xóa
3 – Admin click xóa
sản phẩm
4 - Bấm nút Lưu
6 - Hệ thống thực hiện xóa
Sản phẩm lên CSDL.
7 - Màn hình hiển thị sự kiện


xóa sản phẩm thành cơng
Luồng thay thế

Khơng có

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành cơng với server.

Điều kiện sau

Hệ thống tạo xóa sản phẩm trong CSDL.

2.6. Đặc tả Use-case “Tìm kiểm sản phẩm”
Bảng 3.2.6: Bảng đặc tả Use-case “Tìm kiếm sản phẩm”
Mơ tả
Tác nhân
Luồng chính

Admin/ khách hàng muốn tìm kiếm sản phẩm

Admin/ khách hàng
Hành vi của tác nhân

Hành vi của hệ thống

1 - Người dùng thực
hiện truy cập website
2 - Người dùng chọn
vào tab tiềm kiếm
3 – Nhập thơng tin
sản phẩm cần tìm
kiếm
4 - Bấm vào nút Tìm kiếm
7 – Hệ thống trả về thơng tin
sản phẩm được tìm kiếm nếu
có.


Luồng thay thế

Khơng có

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành cơng với server.

Điều kiện sau

Khơng có

2.7. Đặc tả Use-case “Xem thơng tin sản phẩm”
Bảng 3.2.7: Bảng đặc tả Use-case “Xem thông tin sản phẩm”
Mô tả
Tác nhân
Luồng chính

Khách hàng muốn xem chi tiết thơng tin sản phẩm.
Khách hàng
Hành vi của tác nhân

Hành vi của hệ thống

1 – Khách hàng thực
hiện truy cập website
2 – Khách hàng truy
cập trang sản phẩm
3 - Chọn vào sản
phẩm muốn xem
thông tin
4 – Hệ thống hiển thị thông
tin về sản phẩm


Luồng thay thế

Khơng có

Điều kiện trước

Thiết bị truy cập phải có kết nối mạng.
Kết nối thành cơng với server.

Điều kiện sau

Khơng có

2.8. Đặc tả Use-case “Xem danh mục sản phẩm”
Bảng 3.2.8: Bảng đặc tả Use-case “Xem danh mục sản phẩm”
Mô tả
Tác nhân
Luồng chính

Khách hàng muốn xem danh mục sản phẩm
Khách hàng
Hành vi của tác nhân

Hành vi của hệ thống

1 – Khách hàng thực
hiện truy cập website
2 – Khách hàng truy
cập trang sản phẩm
3 – Chọn vào danh
mục cần xem sản
phẩm
6 - Hệ thống thực hiện hiển thị