Đồ án xây dựng website bán đồ nội thất online

ĐẠ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

XÂY DỰNG WEBSITE BÁN ĐỒ NỘI THẤT ONLINE

GV HƯỚNG DẪN: Nguyễn Tấn Toàn
SV THỰC HIỆN:
20521767 - Nguyễn Hoàng Phúc
20521833 - Nguyễn Thanh Sang

TP. HỒ CHÍ MINH, 2023


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
………………………………………………………………………………………
………………………………………………………………………………………
……………………………………….………………………………………………
……………………………………………………………………………….………
………………………………………………………………………………………
……………………………….………………………………………………………
……………………………………………………………………….………………
………………………………………………………………………………………
……………………….………………………………………………………………
……………………………………………………………….………………………
………………………………………………………………………………………
……………….………………………………………………………………………
……………………………………………………….………………………………

………………………………………………………………………………………
……….………………………………………………………………………………
……………………………………………….………………………………………
……………………………………………………………………………………….
………………………………………………………………………………………
……………………………………….………………………………………………
………………………………………………………………………………………
Ngày…...tháng…..năm 2023
Người nhận xét
(Ký tên và ghi rõ họ tê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ị các kiến
thức cơ bản, các kỹ năng thực tế để có thể lần đầu thực hiện Đồ án 1 của mình.
Chúng em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học
Công nghệ thông tin – ĐHQG TP.HCM vì đã tạo điều kiện về cơ sở vật chất với hệ
thống thư viện hiện đại, đa dạng các loại sách, tài liệu thuận lợi cho việc tìm kiếm,
nghiên cứu thơng tin.
Chúng em cũng muốn gửi lời cảm ơn chân thành đến thầy Nguyễn Tấn Toàn,
người đã tận tình hướng dẫn và giúp đỡ chúng em. Những lời khuyên quý báu của
thầy không chỉ giúp chúng em hồn thành đề tài mà cịn là tài sản vơ giá để chúng
em vững bước trên con đường học tập và lập nghiệp sau này. Cuối cùng, chúng em
cũng xin cảm ơn gia đình, tất cả thầy cơ trong khoa, bạn bè và các bạn trong lớp
PMCL2020.2, những người luôn sẵn sàng đồng hành và giúp đỡ chúng em trong
học tập cũng như cuộc sống.
Tuy nhiên trong quá trình nghiên cứu đề tài, do kiến thức chuyên ngành còn
hạn chế nên chúng em vẫn cịn nhiều thiếu sót khi tìm hiểu, đánh giá, trình bày về
đề tài. Rất mong nhận được sự quan tâm, góp ý của thầy để đề tài của chúng em

được đầy đủ và hoàn chỉnh hơn. Chúng em xin chân thành cảm ơn.

Thành phố Hồ Chí Minh, 06 tháng 07 năm 2023
Nhóm sinh viên thực hiện

Nguyễn Hoàng Phúc

Nguyễn Thanh Sang


MỤC LỤC
Chương 1. MỞ ĐẦU ........................................................................................................................2
1.1. Lý do chọn đề tài ................................................................................................................2
1.2. Mục tiêu đề tài.....................................................................................................................2
1.3. Đối tượng sử dụng .............................................................................................................2
1.4. Phạm vi ..................................................................................................................................2
1.5. Công nghệ sử dụng ............................................................................................................2
1.6. Liên kết ..................................................................................................................................3
Chương 2. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ.................................................................4
2.1. ReactJS ..................................................................................................................................4
2.1.1.

Virtual DOM ...........................................................................................................4

2.1.2.

Component ...............................................................................................................5

2.1.3.

JSX..............................................................................................................................5

2.1.4.

Props & State ..........................................................................................................5

2.1.5.

React Lifecycle .......................................................................................................6

2.2. NodeJS ...................................................................................................................................6
2.3. ExpressJS ..............................................................................................................................8
2.4. MongoDB .............................................................................................................................9
Chương 3. THIẾT KẾ HỆ THỐNG .......................................................................................... 11
3.1. Kiến trúc hệ thống: Mơ hình Client – Server ........................................................ 11
3.2. Yêu cầu chức năng ......................................................................................................... 12
3.2.1.

Sơ đồ Use case ..................................................................................................... 12

3.2.2.

Danh sách các actor ........................................................................................... 13

3.2.3.

Danh sách các use case ..................................................................................... 13


3.2.4.

Đặc tả use case..................................................................................................... 15

Chương 4. THIẾT KẾ CƠ SỞ DỮ LIỆU ................................................................................ 33
4.1. Sơ đồ lớp ............................................................................................................................ 33
4.2. Danh sách các quan hệ .................................................................................................. 33
4.2.1.

Bảng CUSTOMER ............................................................................................ 33

4.2.2.

Bảng STAFF ........................................................................................................ 34

4.2.3.

Bảng PRODUCT ................................................................................................ 34

4.2.4.

Bảng PRODUCT_IMAGE.............................................................................. 35

4.2.5.

Bảng PRODUCT_COLOR ............................................................................. 35

4.2.6.

Bảng PRODUCT_DIMENSION .................................................................. 35

4.2.7.

Bảng CATEGORY ............................................................................................ 36

4.2.8.

Bảng SUBCATEGORY ................................................................................... 36

4.2.9.

Bảng COLOR ...................................................................................................... 36

4.2.10.

Bảng SUPPLIER ................................................................................................ 36

4.2.11.

Bảng CART .......................................................................................................... 37

4.2.12.

Bảng CART_ITEM ........................................................................................... 37

4.2.13.

Bảng ORDER ...................................................................................................... 37

4.2.14.

Bảng ORDER_ITEM ........................................................................................ 38

4.2.15.

Bảng IMPORT..................................................................................................... 38

4.2.16.

Bảng IMPORT_DETAIL ................................................................................ 38

4.2.17.

Bảng FEEDBACK ............................................................................................. 38

4.2.18.

Bảng FEEDBACK_IMAGE........................................................................... 39

4.2.19.

Bảng ADDRESS ................................................................................................. 39

4.2.20.

Bảng DISCOUNT .............................................................................................. 40


4.2.21.

Bảng WISHLIST ................................................................................................ 40

4.2.22.

Bảng PAYMENT ............................................................................................... 40

4.2.23.

Bảng ATTACHMENT ..................................................................................... 40

Chương 5. THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG ............................................................ 41
5.1. Màn hình trang chủ......................................................................................................... 41
5.2. Màn hình đăng nhập / đăng ký ................................................................................... 42
5.3. Màn hình quên mật khẩu .............................................................................................. 43
5.4. Màn hình sản phẩm ........................................................................................................ 43
5.5. Màn hình chi tiết sản phẩm ......................................................................................... 44
5.6. Màn hình giỏ hàng .......................................................................................................... 45
5.7. Màn hình đặt hàng .......................................................................................................... 46
5.8. Màn hình thơng tin tài khoản ...................................................................................... 47
5.9. Màn hình danh sách địa chỉ ......................................................................................... 47
5.10.

Màn hình danh sách hóa đơn .................................................................................. 48

5.11.

Màn hình chi tiết hóa đơn ........................................................................................ 49

5.12.

Màn hình đánh giá sản phẩm .................................................................................. 50

5.13.

Màn hình đổi mật khẩu ............................................................................................. 51

5.14.

Màn hình danh sách sản phẩm u thích ............................................................ 52

5.15.

Màn hình về chúng tơi............................................................................................... 53

5.16.

Màn hình đăng nhập (nhân viên) ........................................................................... 53

5.17.

Màn hình trang chủ .................................................................................................... 54

5.18.

Màn hình đổi mật khẩu ............................................................................................. 55

5.19.

Màn hình quản lý sản phẩm .................................................................................... 56

5.20.

Màn hình thêm sản phẩm ......................................................................................... 57


5.21.

Màn hình chi tiết sản phẩm ..................................................................................... 58

5.22.

Màn hình chỉnh sửa sản phẩm ................................................................................ 59

5.23.

Màn hình quản lý danh sách nhập kho ................................................................ 60

5.24.

Màn hình chi tiết nhập kho ...................................................................................... 61

5.25.

Màn hình nhập kho ..................................................................................................... 61

5.26.

Màn hình thêm sản phẩm nhập kho ...................................................................... 62

5.27.

Màn hình quản lý đơn hàng ..................................................................................... 63

5.28.

Màn hình chi tiết đơn hàng ...................................................................................... 64

5.29.

Màn hình quản lý khách hàng ................................................................................ 65

5.30.

Màn hình chi tiết khách hàng.................................................................................. 65

5.31.

Màn hình quản lý nhân viên .................................................................................... 66

5.32.

Màn hình thêm nhân viên......................................................................................... 67

5.33.

Màn hình chỉnh sửa nhân viên ............................................................................... 68

5.34.

Màn hình quản lý đợt giảm giá .............................................................................. 69

5.35.

Màn hình thêm đợt giảm giá ................................................................................... 70

5.36.

Màn hình chỉnh sửa đợt giảm giá .......................................................................... 71

5.37.

Màn hình áp dụng đợt giảm giá cho sản phẩm ................................................. 72

5.38.

Màn hình quản lý loại sản phẩm ............................................................................ 73

5.39.

Màn hình thêm loại sản phẩm ................................................................................ 73

5.40.

Màn hình chỉnh sửa loại sản phẩm ....................................................................... 74

5.41.

Màn hình quản lý loại phịng .................................................................................. 74

5.42.

Màn hình thêm loại phịng ....................................................................................... 75

5.43.

Màn hình chỉnh sửa loại phịng .............................................................................. 75

5.44.

Màn hình quản lý màu............................................................................................... 76


5.45.

Màn hình thêm màu ................................................................................................... 77

5.46.

Màn hình chỉnh sửa màu .......................................................................................... 78

5.47.

Màn hình quản lý nhà cung cấp ............................................................................. 79

5.48.

Màn hình thêm nhà cung cấp .................................................................................. 79

5.49.

Màn hình chỉnh sửa nhà cung cấp ......................................................................... 80

Chương 6. CÀI ĐẶT VÀ KIỂM THỬ ...................................................................................... 81
6.1. Môi trường cài đặt và thử nghiệm ............................................................................. 81
6.2. Kết quả đánh giá .............................................................................................................. 81
Chương 7. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ........................................................... 82
7.1. Kết quả đạt được ............................................................................................................. 82
7.2. Hạn chế ............................................................................................................................... 82
7.3. Hướng phát triển.............................................................................................................. 82
BẢNG PHÂN CÔNG CÔNG VIỆC ................................................................................................ 83
TÀI LIỆU THAM KHẢO ............................................................................................................ 84

DANH MỤC HÌNH ẢNH
Hình 1: ReactJS ...................................................................................................................................4
Hình 2: NodeJS ...................................................................................................................................7
Hình 3: ExpressJS ..............................................................................................................................8
Hình 4: MongoDB ........................................................................................................................... 10
Hình 5: Sơ đồ Use case cho đối tượng khách hàng ......................................................... 12
Hình 6: Sơ đồ Use case cho đối tượng nhân viên............................................................. 12
Hình 7: Sơ đồ lớp............................................................................................................................ 33
Hình 8: Màn hình trang chủ ....................................................................................................... 42
Hình 9: Màn hình đăng nhập / đăng ký................................................................................ 42


Hình 10: Màn hình quên mật khẩu......................................................................................... 43
Hình 11: Màn hình sản phẩm.................................................................................................... 43
Hình 12: Màn hình chi tiết sản phẩm .................................................................................... 44
Hình 13: Màn hình giỏ hàng ...................................................................................................... 45
Hình 14: Màn hình đặt hàng ...................................................................................................... 46
Hình 15: Màn hình thơng tin tài khoản ................................................................................ 47
Hình 16: Màn hình danh sách địa chỉ .................................................................................... 47

Hình 17: Màn hình danh sách hóa đơn ................................................................................ 48
Hình 18: Màn hình chi tiết hóa đơn ....................................................................................... 49
Hình 19: Màn hình đánh giá sản phẩm................................................................................. 50
Hình 20: Màn hình đổi mật khẩu ............................................................................................ 51
Hình 21: Màn hình danh sách sản phẩm u thích ......................................................... 52
Hình 22: Màn hình về chúng tơi .............................................................................................. 53
Hình 23: Màn hình đăng nhập (nhân viên) ........................................................................ 53
Hình 24: Màn hình trang chủ .................................................................................................... 54
Hình 25: Màn hình đổi mật khẩu ............................................................................................ 55
Hình 26: Màn hình quản lý sản phẩm ................................................................................... 56
Hình 27: Màn hình thêm sản phẩm........................................................................................ 57
Hình 28: Màn hình chi tiết sản phẩm .................................................................................... 58
Hình 29: Màn hình chỉnh sửa sản phẩm .............................................................................. 59
Hình 30: Màn hình quản lý danh sách nhập kho.............................................................. 60
Hình 31: Màn hình chi tiết nhập kho ..................................................................................... 61
Hình 32: Màn hình nhập kho .................................................................................................... 62
Hình 33: Màn hình thêm sản phẩm nhập kho ................................................................... 62
Hình 34: Màn hình quản lý đơn hàng.................................................................................... 63
Hình 35: Màn hình chi tiết đơn hàng..................................................................................... 64
Hình 36: Màn hình quản lý khách hàng ............................................................................... 65
Hình 37: Màn hình chi tiết khách hàng ................................................................................ 65
Hình 38: Màn hình quản lý nhân viên................................................................................... 66


Hình 39: Màn hình thêm nhân viên ....................................................................................... 67
Hình 40: Màn hình chỉnh sửa nhân viên .............................................................................. 68
Hình 41: Màn hình quản lý đợt giảm giá ............................................................................. 69
Hình 42: Màn hình thêm đợt giảm giá .................................................................................. 70
Hình 43: Màn hình chỉnh sửa đợt giảm giá ........................................................................ 71
Hình 44: Màn hình áp dụng đợt giảm giá cho sản phẩm .............................................. 72

Hình 45: Màn hình quản lý loại sản phẩm .......................................................................... 73
Hình 46: Màn hình thêm loại sản phẩm ............................................................................... 73
Hình 47: Màn hình chỉnh sửa loại sản phẩm ..................................................................... 74
Hình 48: Màn hình quản lý loại phịng ................................................................................. 74
Hình 49: Màn hình thêm loại phịng ...................................................................................... 75
Hình 50: Màn hình chỉnh sửa loại phịng ............................................................................ 75
Hình 51: Màn hình quản lý màu .............................................................................................. 76
Hình 52: Màn hình thêm màu ................................................................................................... 77
Hình 53: Màn hình chỉnh sửa màu ......................................................................................... 78
Hình 54: Màn hình quản lý nhà cung cấp ............................................................................ 79
Hình 55: Màn hình thêm nhà cung cấp................................................................................. 79
Hình 56: Màn hình chỉnh sửa nhà cung cấp ....................................................................... 80


TÓM TẮT ĐỒ ÁN
Đồ án này được chúng em thực hiện với mục tiêu xây dựng một website bán đồ nột
thất online với UI đẹp và tiện dụng cho khách hàng, cũng như tìm hiểu về MERN
stack nói riêng và lập trình web nói chung.
Ứng dụng có hai front-end đều được viết bằng Reactjs và deploy bằng Vercel bao
gồm website cho người dùng và website cho các nhân viên của cửa hàng nội thất
(admin, nhân viên kho, nhân viên sale) cùng lấy api từ 1 back-end sử dụng Nodejs,
Expressjs deploy bằng Render. Database sử dụng MongoDB.
Đồ án bao gồm 7 chương, được viết theo quá trình phát triển của ứng dụng:
Chương 1: MỞ ĐẦU
-

Giới thiệu sơ lược về đồ án.

Chương 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
-

Giới thiệu về MERN Stack.

Chương 3: THIẾT KẾ HỆ THỐNG
-

Kiến trúc hệ thống và use case.

Chương 4: THIẾT KẾ CƠ SỞ DỮ LIỆU
-

Các bảng trong database.

Chương 5: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
-

Các màn hình của ứng dụng.

Chương 6: CÀI ĐẶT VÀ KIỂM THỬ
-

Môi trường cài đặt và đánh giá

Chương 7: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
-

Kết quả đạt được, hạn chế và hướng phát triển.

1

Chương 1. MỞ ĐẦU
1.1.

Lý do chọn đề tài

Trên thị trường hiện nay có rất nhiều website bán đồ nội thất, được phát triển bởi
các nền tảng phát triển thương mại điện tử hay tự phát triển bởi các công ty. Nhưng
không phải tất cả đều hoạt động hiệu quả và đáp ứng yêu cầu của người dùng.
Nhóm chúng em muốn tạo ra một website bán đồ nội thất với giao diện được tuỳ
chỉnh đặc biệt cho doanh nghiệp.
1.2.
-

Mục tiêu đề tài

Xây dựng website cho phép quản lý cửa hàng nội thất online, cho phép người
dùng mua hàng, tìm kiếm hàng, xem lịch sử mua hàng, cùng với đó là các chức
năng để tối ưu hóa dịch vụ chăm sóc khách hàng, nâng cao trải nghiệm mua
hàng và tăng cường khả năng tiếp cận khách hàng.

-

Xây dựng website với giao diện thân thiện, tối ưu, dễ tiếp cận.

-

Xây dựng hệ thống với tốc độ xử lý tối ưu nhất có thể.

1.3.

-

Đối tượng sử dụng

Các công ty sản xuất nội thất, muốn áp dụng công nghệ trong kinh doanh,
muốn tạo ra một website để mang lại dấu ấn riêng cho doanh nghiệp của mình.

1.4.
-

Phạm vi

Website admin cho phép quản lý hàng hóa nội thất, thống kê số liệu và quản
lý người dùng, nhân viên, đợt giảm giá sản phẩm.

-

Website khách hàng cho phép người dùng mua hàng, tìm kiếm thơng tin hàng
hóa, và các chức năng để tối ưu dịch vụ chăm sóc khách hàng.

1.5.

Cơng nghệ sử dụng

-

Thư viện ReactJS

-

NodeJS

2


-

Framework ExpressJS

-

MongoDB

-

Thiết kế giao diện: Figma

-

IDE: Visual Studio Code

-

Deploy Front-end: Vercel

-

Deploy Back-end: Render

1.6.

-

Liên kết

Github Front-end (Website khách hàng):
/>
-

Github Front-end (Website admin):
/>DMIN

-

Github Back-end:
/>
3


Chương 2. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
2.1.
-

ReactJS

React (ReactJs hay React.js) là 1 thư viện JavaScript mã nguồn mở được phát
triển bởi đội ngũ kỹ sư đến từ Facebook; nó được giới thiệu vào năm 2011,
cho đến nay là đã được hơn 10 năm. Nguyên lý xây dựng của React dựa trên
components (component-based approach), có thể tái sử dụng và phù hợp với
ứng dụng 1 trang (Single Page Application – SPA). React giúp lập trình viên
xây dựng giao diện người dùng dựa trên JSX (môt cú pháp mở rộng của

JavaScript), tạo ra các DOM ảo (virtual DOM) để tối ưu việc render 1 trang
web.

Hình 1: ReactJS
2.1.1. Virtual DOM
-

DOM hay Document Object Model là một cấu trúc trừu tượng của text. Mỗi
đoạn mã của HTML được gọi là một HTML DOM, các yếu tố trong HTML là
các nodes của DOM đó.

4


-

Tại sao chúng ta cần virtual DOM vì khi nodes thay đổi các nodes khác cũng
cần thay đổi. Chẳng hạn, bạn có 10 items nhưng nếu bạn thay đổi 1 thì DOM
cững thay đổi 9 items cịn lại quay trở lại trạng thái ban đầu.

-

Điều này là không thực sự cần thiết, bởi tốc độ xử lý của DOM nhanh nhưng
với các ứng dụng SPA việc thay đổi các DOM liên tục sẽ xảy ra khá chậm và
khơng mang tính khả thi cao khi triển khai ứng dụng lớn. Khi đó virtual DOM
sẽ được sử dụng để thay thế, được xây dựng dựa trên DOM thực tế.

-

Khi thực hiện render một JSX element, các virtual DOM object sẽ được cập

nhật khi virtual DOM được cập nhật. ReactJS so sánh virtual DOM với virtual
DOM trước đó nhằm đảm bảo trước khi thực hiện cập nhật, cập nhật trên DOM
thật sau đó và hiển thị trên màn hình.

-

Việc sử dụng virtual DOM sẽ giúp tiết kiệm tài nguyên và tốc độ xử lý nhanh
hơn vì virtual DOM tập trung cập nhật 1 items duy nhất.
2.1.2. Component

-

Khi làm việc trong các project lớn, UI có độ phức tạp cao và cần được chia
thành các thành phần nhỏ được gọi là component.

-

Trong ReactJS có hai loại component chính là Class component và Function
component.
2.1.3. JSX

-

JSX là thuật ngữ viết tắt của Javascript XML cho phép việc viết đoạn mã
HTML trong React trở nên đơn giản, dễ dàng và có cấu trúc hơn. Cú pháp gần
tương tự với HTML.
2.1.4. Props & State

-

Props và State là hai kiểu dữ liệu React. Nếu bạn chỉ mới tìm hiểu thì khá khó
để phân biệt ngay từ đầu, nhưng khi bạn bắt đầu cơng việc code thì sẽ nhanh
chóng có thể phân biệt được hai loại dữ liệu này.

5


-

Sự khác biệt lớn nhất giữa hai kiểu dữ liệu này: Trong khi state thì private và
chỉ thay đổi bên trong component thì Props mang tính external, được truyền
từ component cao hơn theo phân cấp.

-

Props là tham số được chuyển qua lại giữa các React component và được
truyền qua các component với cú pháp tương tự HTML attributes.

-

State là một object lưu trữ giá trị của các thuộc tính trong component và tồn
tại trong phạm vi của component đó. Khi giá trị của state được thay đổi,
component sẽ được render lại.

-

Cách để cài đặt state khá đơn giản là việc cài đặt hàm getInitialState() vào
component, và trả về bất cứ gì bạn muốn cài đặt trong state của component
này.

-

Để thay đổi state, chúng ta gọi hàm this.setState(), và truyền vào state mới
giống như một tham số.
2.1.5. React Lifecycle

-

React Lifecycle là một vịng đời của component. Trong khi render một
component thì ReactJS thực hiện nhiều tiến trình khác nhau và được lặp lại
nhiều lần với các component.

-

Khi một component được gọi lên trước, nó sẽ tiến hành cài đặt props và state
tiếp đó là mounting, unmounting, update, v.v khi đó bạn cần sử dụng hỗ trợ
của các hàm lifecycle.

2.2.
-

NodeJS

NodeJS là một mơi trường runtime chạy JavaScript đa nền tảng và có mã
nguồn mở, được sử dụng để chạy các ứng dụng web bên ngồi trình duyệt của
client. Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem
là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào
mơ hình hướng sự kiện (event-driven) không đồng bộ.

6

Hình 2: NodeJS
Ưu điểm:
-

IO hướng sự kiện khơng đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.

-

Sử dụng JavaScript – một ngơn ngữ lập trình dễ học.

-

Chia sẻ cùng code ở cả phía client và server.

-

NPM(Node Package Manager) và module Node đang ngày càng phát triển
mạnh mẽ..

-

Cộng đồng hỗ trợ tích cực.

-

Cho phép stream các file có kích thước lớn.
Nhược điểm:

-

Khơng có khả năng mở rộng, vì vậy khơng thể tận dụng lợi thế mơ hình đa lõi
trong các phần cứng cấp server hiện nay.

-

Khó thao tác với cơ sử dữ liệu quan hệ.

-

Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác.

-

Cần có kiến thức tốt về JavaScript.

-

Khơng phù hợp với các tác vụ địi hỏi nhiều CPU.

7


2.3.
-

ExpressJS

ExpressJS là một framework miễn phí và mã nguồn mở dành cho việc xây

dựng ứng dụng web trên nền tảng Node.js. Với ExpressJS, người dùng có thể
nhanh chóng thiết kế và phát triển các ứng dụng web và API một cách dễ dàng
và tiện lợi. Điều này đặc biệt hữu ích cho các nhà phát triển và lập trình viên
đã quen thuộc với JavaScript.

Hình 3: ExpressJS
-

Vì ExpressJS là một framework phát triển ứng dụng web trên Nodejs, các lập
trình viên có thể sử dụng mã đã có sẵn để xây dựng các ứng dụng web đơn
trang (SPA), đa trang hoặc kết hợp cả hai. Ngồi ra, ExpressJS cịn cung cấp
một kiến trúc MVC (Model-View-Controller) hữu ích để tổ chức các ứng dụng
web phía máy chủ.

-

Với các tính năng hỗ trợ nâng cao của Nodejs, ExpressJS giúp giảm bớt sự
phức tạp của việc xây dựng API hiệu quả. Nếu không sử dụng ExpressJS, lập
trình viên sẽ phải viết rất nhiều mã để xử lý các yêu cầu khác nhau.

-

Nhưng ExpressJS giúp cho việc này trở nên đơn giản hơn đáng kể. Với sự hỗ
trợ từ cộng đồng và các thư viện bên thứ ba, ExpressJS là một cơng cụ hữu ích
cho việc xây dựng các ứng dụng web và API trên Nodejs.
Lợi ích khi sử dụng:

-

ExpressJS là một cơng nghệ rất dễ học và sử dụng nếu bạn đã biết JavaScript.

Điều này giúp cho việc phát triển back-end dễ dàng hơn rất nhiều. Bởi vì mã

8


JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Nodejs,
ExpressJS cho phép mã được thực hiện một cách nhanh chóng và hiệu quả.
-

ExpressJS giúp giảm một nửa thời gian viết mã nhưng vẫn giúp nhà phát triển
xây dựng các ứng dụng web hiệu quả. Nó cịn cung cấp các tính năng khác
nhau giúp tiết kiệm cơng sức rất nhiều.

-

Sử dụng ExpressJS tương đối dễ dàng vì nó hỗ trợ JavaScript, một ngôn ngữ
rất dễ học đối với bất kỳ ai. Do đó, ExpressJS được coi là một cơng cụ tuyệt
vời để cho những người mới bắt đầu tham gia vào lĩnh vực phát triển ứng dụng
web và có thể giúp họ gặt hái thành cơng.

-

Ngồi ra, ExpressJS được phát triển dựa trên nền tảng Nodejs. Đây chính là
một kiến trúc hướng sự kiện và nó có khả năng xử lý lên đến hàng nghìn yêu
cầu của khách hàng trong cùng một lúc. Đó cũng là điều mà PHP không thể
thực hiện được. Nodejs được thiết kế đặc biệt để hỗ trợ các ứng dụng web
thực.

-

Việc sử dụng tiền một cách hiệu quả để tối đa hóa lợi nhuận là một điều quan
trọng đối với bất kỳ doanh nghiệp nào. ExpressJS là một ứng dụng web miễn
phí và mã nguồn mở, do đó khơng có lý do gì để không sử dụng framework
này.

2.4.
-

MongoDB

MongoDB, được biết đến như cơ sở dữ liệu NoSQL phổ biến nhất, là cơ sở dữ
liệu định hướng tài liệu mã nguồn mở. Thuật ngữ 'NoSQL' có nghĩa là 'khơng
có mối quan hệ' (Non-relational). Điều đó có nghĩa là MongoDB khơng dựa
trên cấu trúc cơ sở dữ liệu quan hệ giống như bảng mà cung cấp một cơ chế
hoàn toàn khác để lưu trữ và truy xuất dữ liệu. Định dạng lưu trữ này được gọi
là BSON (tương tự như định dạng JSON).

9


Hình 4: MongoDB
Cấu trúc tài liệu MongoDB đơn giản:
-

CSDL SQL sẽ lưu trữ dữ liệu ở định dạng bảng. Dữ liệu này được lưu trữ trong
một mơ hình dữ liệu được xác định trước, điều này sẽ không linh hoạt lắm đối
với các ứng dụng đang phát triển nhanh trong thế giới thực ngày nay. Các ứng
dụng hiện đại cần phải được kết nối với nhau, xã hội hóa và có tính tương tác
hơn. Các ứng dụng ngày nay đang ngày càng lưu trữ nhiều dữ liệu và các dữ
liệu đó đang cần phải được truy cập với tốc độ cao hơn.

-

Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) khơng phải là lựa chọn
chính xác khi xử lý dữ liệu lớn do thiết kế của chúng không thể mở rộng theo
quy mô ngang. Nếu CSDL chạy trên một máy chủ thì nó sẽ đạt đến giới hạn
mở rộng. Cơ sở dữ liệu NoSQL có khả năng mở rộng hơn và cung cấp hiệu
suất vượt trội. MongoDB là một cơ sở dữ liệu NoSQL có thể mở rộng quy mô
bằng cách thêm ngày càng nhiều máy chủ và tăng hiệu suất với mơ hình tài
liệu linh hoạt của nó.

10


Chương 3. THIẾT KẾ HỆ THỐNG
3.1.
-

Kiến trúc hệ thống: Mô hình Client – Server

Hệ thống được xây dựng dựa trên bộ cơng cụ MERN Stack (MongoDB,
ExpressJS, ReactJS, NodeJS).

-

Mơ hình hệ thống là mơ hình client server (mơ hình khách chủ) là mơ hình
mạng máy tính được tạo nên bởi 2 thành phần chính gồm client và server (được
dịch ra tiếng Việt là “máy khách” và “máy chủ”). Client sẽ đưa ra các yêu cầu
về lưu trữ tài nguyên và dịch vụ cài đặt từ phía server.

-

Yêu cầu dữ liệu được máy tính client gửi đến server qua kết nối mạng Internet
và sẽ được chấp nhận bởi server. Tiếp đó, server sẽ gửi trở lại những gói dữ
liệu mà máy client u cầu. Như vậy với mơ hình này, client khơng hề chia sẻ
bất cứ tài nguyên nào do mình nắm giữ.

-

Nói cách khác, mơ hình client – server là cấu trúc ứng dụng phân tán có chức
năng phân vùng các nhiệm vụ (workload) giữa các server (nhà cung cấp dịch
vụ hoặc tài nguyên) và client (người yêu cầu dịch vụ). Những ứng dụng của
mơ hình Client Server phổ biến nhất hiện nay đó là nền tảng Email, World
Wide Web…
Client:

-

Client nghĩa là “khách hàng”, như vậy có thể hiểu đơn giản client là một cá
nhân, tổ chức đăng ký sử dụng một dịch vụ nào đó. Khái niệm này cũng được
áp dụng tương tự trong lĩnh vực công nghệ. Cụ thể, Client đóng vai trị là máy
tính (Host) có thể tiếp nhận dữ liệu hoặc sử dụng dịch vụ nào đó được cung
cấp bởi Server (nhà cung cấp dịch vụ)
Server:

-

Server là máy chủ hoặc phương tiện dùng để phục vụ những dịch vụ nào đó.
Trong thế giới kỹ thuật số thì Server chính là máy tính từ xa có nhiệm vụ cung
cấp dữ liệu/thông tin hoặc quyền truy cập vào những dịch vụ nào đó.

11


-

Về bản chất, trong mơ hình Client – Server thì Client là đối tượng thực hiện
yêu cầu và Server sẽ đáp ứng yêu cầu đó (miễn là nó phải thuộc cơ sở dữ liệu).

3.2.

Yêu cầu chức năng
3.2.1. Sơ đồ Use case

Hình 5: Sơ đồ Use case cho đối tượng khách hàng

Hình 6: Sơ đồ Use case cho đối tượng nhân viên

12


3.2.2. Danh sách các actor
Actors

Ý nghĩa

1

Customer

Khách hàng: có thể xem,
tìm kiếm sản phẩm mà
khơng cần đăng nhập; có
thể đăng ký để sử dụng giỏ
hàng, wishlist, mua hàng và
quản lý tài khoản

2

Admin

Quản trị viên

3

Sale Staff

Nhân viên quản lý đơn
hàng

4

Storage Staff

Nhân viên quản lý kho

STT

3.2.3. Danh sách các use case
Role

Customer

Use case

Ý nghĩa

Đăng nhập

Đăng nhập để sử dụng đầy
đủ các chức năng của hệ
thống

Đăng ký

Đăng ký tài khoản khách
hàng

Đăng xuất

Đăng xuất khỏi hệ thống

Quên mật khẩu

Yêu cầu thay đổi mật khẩu

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

Tìm kiếm sản phẩm theo
yêu cầu

Xem danh sách sản phẩm

Xem danh sách tất cả sản
phẩm

Xem thông tin sản phẩm

Xem thông tin chi tiết sản
phẩm

Đặt hàng

Tạo đơn hàng

Đánh giá sản phẩm

Viết đánh giá sản phẩm

13


Admin

Sale Staff

Xem lịch sử đơn hàng

Xem danh sách các đơn
hàng

Thêm sản phẩm yêu thích

Thêm sản phẩm vào danh
sách yêu thích

Đổi mật khẩu

Thay đổi mật khẩu

Cập nhật thông tin cá nhân

Thay đổi thơng tin cá nhân

Quản lý địa chỉ

Thêm, xóa, sửa địa chỉ
nhận hàng

Quản lý giỏ hàng

Thêm, xóa, sửa sản phẩm,
trong giỏ hàng

Đăng nhập

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

Đăng xuất

Đăng xuất khỏi hệ thống

Đổi mật khẩu

Thay đổi mật khẩu

Xem thống kê

Xem thông tin thống kế của
hệ thống

Quản lý sản phẩm

Thêm, xóa, sửa, tìm kiếm
sản phẩm

Quản lý nhập kho

Xem, xác nhận yêu cầu
nhập kho, gửi yêu cầu nhập
kho

Quản lý đơn hàng

Xem thông tin, thay đổi
trạng thái đơn hàng

Quản lý khách hàng

Xem thông tin, tìm kiếm

khách hàng

Quản lý nhân viên

Thêm, xóa, sửa, tìm kiếm
nhân viên

Quản lý đợt giảm giá

Thêm, xóa, sửa, tìm kiếm
đợt giảm giá, áp dụng đợt
giảm giá cho sản phẩm

Đăng nhập

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

Đăng xuất

Đăng xuất khỏi hệ thống

Đổi mật khẩu

Thay đổi mật khẩu

14


Storage Staff

Quản lý sản phẩm

Xem chi tiết, tìm kiếm sản
phẩm

Quản lý đơn hàng

Xem thông tin, thay đổi
trạng thái đơn hàng

Đăng nhập

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

Đăng xuất

Đăng xuất khỏi hệ thống

Đổi mật khẩu

Thay đổi mật khẩu

Quản lý sản phẩm

Xem chi tiết, tìm kiếm sản
phẩm

Quản lý nhập kho

Xem, gửi yêu cầu nhập kho

3.2.4. Đặc tả use case
3.2.4.1.

Đăng nhập (khách hàng)

Tên use case

Đăng nhập

Mô tả

Đăng nhập để sử dụng đầy đủ các chức năng của hệ thống

Trigger

Nhấn vào nút đăng nhập

Điều kiện tiên quyết
Kết quả

Thiết bị có kết nối mạng
Tài khoản có tồn tại trong hệ thống
Đăng nhập thành công và chuyển qua trang chủ
1. Hệ thống hiển thị màn hình đăng nhập
2. Khách hàng nhập email và mật khẩu

Kịch bản chính

3. Hệ thống xác nhận email và mật khẩu đúng định dạng

4. Hệ thống xác nhận tài khoản có tồn tại trong database
5. Đăng nhập thành công, chuyển qua trang chủ

15