Đồ án xây dựng website bán điện thoại di động

ĐẠ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 ĐIỆN THOẠI DI ĐỘNG

GV HƯỚNG DẪN: TS. ĐỖ THỊ THANH TUYỀN
Sinh viên thực hiện:
1. VÕ ĐÌNH VÂN - 20522147
2. NGUYỄN HUỲNH TUẤN KHANG – 20521437

TP. HỒ CHÍ MINH, tháng 7 năm 2023


LỜI CẢM ƠN
Quá trình hội nhập đang diễn ra trên tồn thế giới. Và q trình mở cửa này sẽ
làm cho hoạt động ngoại thương càng khẳng định được vị trí quan trọng của mình. Điều
này đã dẫn đến sự phát triển không ngừng của các hoạt động mua bán trao đổi hàng hóa,
đặc biệt là các mặt hàng điện tử như điện thoại di động, đóng góp quan trọng trong sự
tăng trưởng không ngừng và là điều kiện để phát triển đối với mọi quốc gia. Vì vậy,
nhóm chúng em quyết định chọn đề tài: “ Xây dựng website bán điện thoại di động ”.
Bài báo cáo gồm các chương sau:
Chương 1: Giới thiệu đề tài: giới thiệu khái quát về đề tài, lý do chọn đề tài, mục tiêu
của dự án.
Chương 2: Phân tích cơng nghệ sử dụng: mô tả về những công nghệ được áp dụng vào
dự án, cách sử dụng, chức năng, thành phần, ưu điểm, nhược điểm.
Chương 3: Phân tích và thiết kế hệ thống: trình bày cụ thể sơ đồ Usecase, class diagram,
đi từ tổng quan đến chi tiết kiến trúc hệ thống.

Chương 4: Phân tích và thiết kế giao diện: trình bày tồn bộ các màn hình hiển thị của
dự án và mơ tả cụ thể các chức năng từng màn hình.
Đầu tiên, nhóm muốn gửi lời cảm ơn sâu sắc đến giáo viên hướng dẫn Đỗ Thị
Thanh Tuyền đã tạo cơ hội, giúp đỡ cho nhóm chúng em trong suốt q trình thực hiện
và hoàn thành đồ án này. Tuy nhiên do còn hạn chế về kiến thức và thời giạn thực hiện,
nhóm chúng em có nhiều thiếu sót. Do đó, nhóm mong muốn nhận được phản hồi từ cô
để cải thiện về nội dung và hình thức, từ đó phát triển tiếp đồ án này trong kì sau với kết
quả tốt hơn.
Nhóm sinh viên thực hiện
VÕ ĐÌNH VÂN – NGUYỄN HUỲNH TUẤN KHANG


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

Ngày…tháng……năm 2023
Giảng viên hướng dẫn

TS. Đỗ Thị Thanh Tuyền



MỤC LỤC
Chương 1.

GIỚI THIỆU ĐỀ TÀI ............................................................................ 1

1.1. Tóm tắt đồ án .................................................................................................... 1
1.2. Lý do chọn đề tài ............................................................................................... 1
1.3. Mục tiêu ............................................................................................................. 2
1.3.1.

Customer and Visitor ............................................................................. 2

1.3.2.

Manager................................................................................................... 2

1.4. Phạm vi .............................................................................................................. 3
1.5. Đối tượng sử dụng ............................................................................................ 4
1.5.1.

Visitor ...................................................................................................... 4

1.5.2.

Customer ................................................................................................. 4

1.5.3.

Manager................................................................................................... 4

1.6. Tổng quan dự án ............................................................................................... 4
1.7. Yêu cầu hệ thống – mục đích của dự án ......................................................... 4
1.8. Các chức năng chính ........................................................................................ 5
1.9. Cơng nghệ sử dụng ........................................................................................... 5
1.10.

Mơi trường lập trình ..................................................................................... 5

1.11.

Cơng cụ hỗ trợ ............................................................................................... 5

Chương 2.

GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG .............................................. 6

2.1. React .................................................................................................................. 6
2.1.1.

Giới thiệu [5.1] ........................................................................................ 6

2.1.2.

Ưu điểm [5.2]........................................................................................... 6

2.1.3.

Nhược điểm [5.2] .................................................................................... 7

2.2. Redux [5.3] ........................................................................................................ 7
2.2.1.

Giới thiệu ................................................................................................. 7

2.2.2.

Cách hoạt động của Redux .................................................................... 8

2.3. MySQL [6.2] ...................................................................................................... 9


2.3.1.

MySQL là gì? .......................................................................................... 9

2.3.2.

Cơ chế hoạt động .................................................................................. 10

2.3.3.

Tại sao dùng MySQL ........................................................................... 11

2.3.4.

Ưu điểm ................................................................................................. 11

2.3.5.

Nhược điểm ........................................................................................... 12

2.4. NodeJS là gì [6.1] ............................................................................................ 13
2.4.1.

Khái niệm .............................................................................................. 13

2.4.2.

Tính năng .............................................................................................. 14

2.4.3.

Ứng dụng ............................................................................................... 14

2.4.4.

Ưu điểm ................................................................................................. 15

2.4.5.

Nhược điểm ........................................................................................... 15

Chương 3.

PHÂN TÍCH THIẾT KẾ HỆ THỐNG .............................................. 17

3.1. Use-case diagram. ........................................................................................... 17
3.2. Action list ......................................................................................................... 17
3.3. Use-case list ..................................................................................................... 18
3.4. Use-case cụ thể ................................................................................................ 19
3.4.1.

Use-case "Login" .................................................................................. 19

3.4.2.

Use-case “Logout” ................................................................................ 20

3.4.3.

Use-case “Register” .............................................................................. 21

3.4.4.

Use-case “Forgot Password” ............................................................... 22

3.4.5.

Use-case “Manage Cart”...................................................................... 22

3.4.6.

Use-case “Payment” ............................................................................. 23

3.4.7.

Use-case “Change User Profile” .......................................................... 24

3.4.8.

Use-case “Manage product” ................................................................ 25

3.5. Class diagram .................................................................................................. 26
3.6. Class diagram explan ..................................................................................... 27
3.6.1.

Bảng user ............................................................................................... 27


3.6.2.

Bảng category ....................................................................................... 28

3.6.3.

Bảng products ....................................................................................... 28

3.6.4.

Bảng image ............................................................................................ 29

3.6.5.

Bảng size ................................................................................................ 29

3.6.6.

Bảng color ............................................................................................. 30

3.6.7.

Bảng cart ............................................................................................... 30

3.6.8.

Bảng invoice .......................................................................................... 31

3.6.9.

Bảng detail invoice................................................................................ 31

3.7. Tổng quan thiết kế kiến trúc ......................................................................... 32
3.8. Chi tiết thiết kế kiến trúc ............................................................................... 32
3.8.1.

Frontend layer ...................................................................................... 32

3.8.2.

Backend layer ....................................................................................... 33

Chương 4.

XÂY DỰNG ỨNG DỤNG ................................................................... 35

4.1. Header.............................................................................................................. 35
4.2. Footer ............................................................................................................... 36
4.3. Màn hình Login .............................................................................................. 37
4.4. Màn hình Register .......................................................................................... 38
4.5. Màn hình Forgot password ............................................................................ 39
4.6. Màn hình Change password .......................................................................... 40
4.7. Màn hình Home Page ..................................................................................... 42
4.8. Màn hình Category ......................................................................................... 44
4.9. Màn hình Product detail ................................................................................ 45
4.10.

Màn hình Cart ............................................................................................. 47

4.11.

Màn hình Order info ................................................................................... 48

4.12.

Màn hình Detail Bill .................................................................................... 50

4.13.

Màn hình Thanks ........................................................................................ 51

4.14.

Màn hình Page not found ........................................................................... 52

4.15.

Màn hình Profile (User profile) ................................................................. 53

4.16.

Màn hình Profile (Change password) ....................................................... 55

4.17.

Màn hình Profile (Delivery address) ......................................................... 56

4.18.

Màn hình Profile (Purchase) ...................................................................... 58

4.19.

Màn hình Profile (See detail) ..................................................................... 59

4.20.

Màn hình Profile (See logout) .................................................................... 60

4.21.

Màn hình Profile (Purchase empty) .......................................................... 61

4.22.

Màn hình Product Modifier ....................................................................... 62

4.23.

Màn hình Product Modifier (Modal) ........................................................ 63

4.24.

Màn hình Product List................................................................................ 65

4.25.

Màn hình Product List (Empty) ................................................................ 66

KẾT LUẬN ................................................................................................................ 67
TÀI LIỆU THAM KHẢO ........................................................................................... 69


DANH MỤC BẢNG
Bảng 3.1: Bảng danh sách các hoạt động ....................................................................... 17
Bảng 3.2: Bảng danh sách Usecase ................................................................................ 18
Bảng 3.3: Mô tả Use Case Login ................................................................................... 19
Bảng 3.4: Mô tả Use Case Logout ................................................................................. 20
Bảng 3.5: Mô tả Use Case Register ............................................................................... 21
Bảng 3.6: Mô tả Use Case Forgot Password .................................................................. 22
Bảng 3.7: Mô tả Use Case Manage Cart ........................................................................ 22
Bảng 3.8: Mô tả Use Case Payment ............................................................................... 23
Bảng 3.9: Mô tả Usecase Change User Profile .............................................................. 24

Bảng 3.10: Mô tả Use Case Manage product................................................................. 25
Bảng 3.11: Bảng User .................................................................................................... 27
Bảng 3.12: Bảng category .............................................................................................. 28
Bảng 3.13: Bảng products .............................................................................................. 28
Bảng 3.14: Bảng image .................................................................................................. 29
Bảng 3.15: Bảng size...................................................................................................... 29
Bảng 3.16: Bảng color.................................................................................................... 30
Bảng 3.17: Bảng cart ...................................................................................................... 30
Bảng 3.18: Bảng invoice ................................................................................................ 31
Bảng 3.19: Bảng detail invoice ...................................................................................... 31
Bảng 4.1: Tính năng của Header .................................................................................... 35
Bảng 4.2: Tính năng của Footer ..................................................................................... 36
Bảng 4.3: Tính năng màn hình Login ............................................................................ 37
Bảng 4.4: Tính năng màn hình Register ........................................................................ 38
Bảng 4.5: Tính năng màn hình Forgot password ........................................................... 40
Bảng 4.6: Tính năng màn hình Change password ......................................................... 41
Bảng 4.7: Tính năng màn hình Home Page ................................................................... 43


Bảng 4.8: Tính năng màn hình Category ....................................................................... 44
Bảng 4.9: Tính năng màn hình Product detail ............................................................... 46
Bảng 4.10: Tính năng màn hình Cart ............................................................................. 47
Bảng 4.11: Tính năng màn hình Order info ................................................................... 49
Bảng 4.12: Tính năng màn hình Register ...................................................................... 51
Bảng 4.13: Tính năng màn hình Profile (User profile) .................................................. 53
Bảng 4.14: Tính năng màn hình Profile (Change password) ......................................... 55
Bảng 4.15: Tính năng màn hình Profile (Delivery address) .......................................... 57
Bảng 4.16: Tính năng màn hình Profile (Purchase) ....................................................... 58
Bảng 4.17: Tính năng màn hình Product Modifier ........................................................ 62
Bảng 4.18: Tính năng màn hình Product Modifier (Modal) .......................................... 64

Bảng 4.19: Tính năng màn hình Product List ................................................................ 65


DANH MỤC HÌNH ẢNH
Hình 2.1: React JS ............................................................................................................ 7
Hình 2.2: Redux ............................................................................................................... 9
Hình 2.3: MySQL........................................................................................................... 10
Hình 2.4: Bảng lưu trữ dữ liệu và sự liên quan .............................................................. 11
Hình 2.5: Nodejs ............................................................................................................ 13
Hình 3.1: Use-case diagram ........................................................................................... 17
Hình 3.2: Hình class diagram ......................................................................................... 26
Hình 3.3: Kiến trúc Front-end ........................................................................................ 32
Hình 3.4: Kiến trúc Back-end ........................................................................................ 33
Hình 4.1: Hình Header User........................................................................................... 35
Hình 4.2: Hình Header Manager .................................................................................... 35
Hình 4.3: Hình Footer .................................................................................................... 36
Hình 4.4: Màn hình Login .............................................................................................. 37
Hình 4.5: Màn hình Register .......................................................................................... 38
Hình 4.6: Màn hình Forgot password ............................................................................ 39
Hình 4.7: Màn hình Change password ........................................................................... 40
Hình 4.8: Màn hình Home Page ..................................................................................... 42
Hình 4.9: Màn hình Category......................................................................................... 44
Hình 4.10: Màn hình Product detail ............................................................................... 45
Hình 4.11: Màn hình Cart .............................................................................................. 47
Hình 4.12: Màn hình Order info .................................................................................... 48
Hình 4.13: Màn hình Detail bill ..................................................................................... 50
Hình 4.14: Màn hình Thanks ......................................................................................... 51
Hình 4.15: Màn hình Page not found ............................................................................. 52
Hình 4.16: Màn hình Profile (User profile) ................................................................... 53
Hình 4.17: Màn hình Profile (Change password) .......................................................... 55

Hình 4.18: Màn hình Profile (Delivery address)............................................................ 56
Hình 4.19: Màn hình Profile (Purchase) ........................................................................ 58
Hình 4.20: Màn hình See detail...................................................................................... 59
Hình 4.21: Màn hình Profile (See logout) ...................................................................... 60
Hình 4.22: Màn hình Profile (Purchase empty) ............................................................. 61
Hình 4.23: Màn hình Product Modifier ......................................................................... 62
Hình 4.24: Màn hình Product Modifier (Modal) ........................................................... 63
Hình 4.25: Màn hình Product List.................................................................................. 65
Hình 4.26: Màn hình Product List (Empty) ................................................................... 66


Chương 1. GIỚI THIỆU ĐỀ TÀI
1.1.

Tóm tắt đồ án

● Tên đề tài: Xây dựng website bán điện thoại di động.
● Mô tả sơ lược:
o Website được thiết kế đơn giản và bắt mắt hơn các trang web hiện tại trên thị
trường với độ tiếp cận cao và dễ sử dụng, dễ thao tác khi thực hiện.
o Nhóm xây dựng Website quản lý hoạt động mua bán điện thoại di động nhằm
mục đích đơn giản hóa các hoạt động trao đổi về hàng điện tử.
o Trong tương lai sẽ có tích hợp những chức năng về dự đoán lượt mua/ bán và
liên hệ khách hàng.
1.2.

Lý do chọn đề tài

● Công nghệ được tạo ra để giúp đời sống của con người trở nên dễ dàng và tiện
lợi. Trong đó, phát minh vĩ đại là điện thoại đã ra đời để biến điều đó thành sự
thật. Tuy nhiên, dần dần theo thời gian, con người càng có những nhu cầu về tiện
ích riêng như mua sắm online, tham khảo các mặt hàng thông qua website, những
dịch vụ hậu đãi. Vậy nên, với sự phát triển của thời đại, nhằm tối ưu hoá những
sở thích cá nhân và tiếp cận người dùng thì website quản lý bán điện thoại di
động chính là cách thức để đưa công nghệ điện thoại mới đến người tiêu dùng
một cách nhanh chóng nhất.
● Trang web quản lý bán điện thoại như chiếc cầu nối giữa người sản xuất, người
bán hàng và cả người tiêu dùng, vậy nên nó đóng vai trị cực kỳ quan trọng trong
q trình thương mại điện tử. Mà cụ thể, người dùng có thể truy cập trang web
và tham khảo các sản phẩm điện thoại mà họ cần với thông tin đầy đủ, sản phẩm
đa dạng và có thể so sánh nhiều mẫu mã , hãng điện thoại khác nhau. Từ đó giúp
cho trải nghiệm người dùng được tối ưu hoá và cải thiện doanh thu bán hàng.

1


Cùng với việc bắt kịp các xu hướng công nghệ hiện đại, các dịng sản phẩm ln
được cập nhật một cách nhanh chóng, website cịn có khả năng phân tích dữ liệu
người dùng để đưa ra các đề xuất mua hàng nhằm tối thiểu hoá rủi ro tồn kho
nhưng vẫn đáp ứng được yêu cầu của khách hàng mà không bị lỗi thời. Chung
quy lại, website quản lý bán điện thoại không chỉ được tạo ra nhằm cải thiện cách
tiếp thị đến thị trường mà có thể giúp doanh nghiệp có được doanh số mong muốn
và tiếp cận được cơng nghệ và cả khách hàng mục tiêu.
● Nhằm bắt kịp được sự phát triển của công nghệ và mạng lưới bán hàng điện tử
online, hơn hết là đáp ứng nhu cầu khách hàng trong thời đại mới như hiện nay.
Website được tạo ra với các mục đích phục vụ cộng đồng, tín đồ đam mê cơng
nghệ, đồng thời mang lại nguồn thu nhập và góp phần vào sự phát triển của doanh
nghiệp nói riêng và đất nước nói chung.

1.3.

Mục tiêu

1.3.1. Customer and Visitor
● Website cung cấp cho khách hàng các chức năng cơ bản như đặt hàng, tìm
kiếm và hiển thị thông tin sản phẩm nhằm giúp người dùng dễ dàng trong việc
xem các thông tin sản phẩm phù hợp.
● Người dùng tiết kiệm được thời gian chờ đặt hàng và tránh tình trạng thiếu
thơng tin sản phẩm.
● Khách hàng sau khi có được sản phẩm như ý sẽ tiến hành đăng nhập tài khoản
để mua sản phẩm. Thông tin người dùng, sản phẩm sẽ được lưu lại hệ thống
dễ dàng sử dụng.
1.3.2. Manager
● Để giúp doanh nghiệp quản lý tốt hơn thì website cịn có chức năng thống kê
hàng tháng về kho hàng, doanh thu và doanh số cần được theo dõi sát sao, có

2


dữ liệu bán hàng và khách hàng. Dựa vào những thông tin thống kê được từ
chức năng này sẽ cho ra các hoạch định chiến lược cho kinh doanh và các
mục tiêu dài hạn sau này.
● Tăng hiệu suất và lợi nhuận cho doanh nghiệp.
● Trang bán hàng của website có thể thêm hoặc xố sản phẩm giúp dễ dàng
kiểm sốt rủi ro hàng tồn kho cũng như có thể bắt kịp nhu cầu người dùng.
● Thu thập dữ liệu về xu hướng và sở thích người tiêu dùng khi truy cập vào
website.
● Cung cấp một trải nghiệm trực tuyến tốt hơn cho khách hàng.
1.4.

Phạm vi

● Nền tảng hỗ trợ: Triển khai trên website
● Chức năng:
o Xem chi tiết sản phẩm
o Phân loại các loại điện thoại ( Apple, SamSung, Realme,…)
o Đặt hàng
o Đăng ký tài khoản
o Tìm kiếm sản phẩm
o Quản lý giỏ hàng ( thêm và xóa sản phẩm ở giỏ hàng)
o Xem thông tin quảng cáo
o Quên mật khẩu
o Thanh toán sản phẩm đã mua
o Thay đổi thông tin cá nhân ( thay đổi mật khẩu, xem đơn hàng đã mua, và
thay đổi thông tin địa chỉ)
o Quản lý doanh thu hàng tháng
o Quản lý đơn đặt hàng
o Quản lý sản phẩm ( thêm, xóa và sửa sản phẩm)

3


1.5.

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

1.5.1. Visitor
● Họ có thể xem chi tiết sản phẩm, đăng ký tài khoản, tìm kiếm sản phẩm, xem
thông tin quảng cáo, quên mật khẩu.

1.5.2. Customer
● Kế thừa tồn bộ chức năng của Visitor, thay đổi thơng tin cá nhân (thay đổi
mật khẩu, xem đơn hàng đã mua, và thay đổi thông tin địa chỉ), đặt hàng, quản
lí giỏ hàng ( thêm và xóa sản phẩm ở giỏ hàng) và thanh tốn.
1.5.3. Manager

● Họ sẽ quản lí sản phẩm ( thêm, xóa, và sửa sản phẩm).
1.6.

Tổng quan dự án

• Website bán điện thoại di động này là một nền tảng thương mại điện tử thân thiện
và chuyên nghiệp, mang đến cho khách hàng trải nghiệm mua sắm thuận tiện và
đáng tin cậy. Với một giao diện trực quan và dễ sử dụng, trang web cung cấp một
loạt các sản phẩm điện thoại di động từ các thương hiệu nổi tiếng và đáng tin cậy
trên toàn cầu. Bên cạnh đó, website bán điện thoại di động cung cấp cơng cụ quản
lý tồn bộ hệ thống bằng trực tuyến, tạo điều kiện thuận lợi để mở rộng kinh
doanh, tăng doanh số bán hàng và xây dựng một hệ thống kinh doanh trực tuyến
tin cậy và chuyên nghiệp, thu hút sự quan tâm và lòng tin của khách hàng.
1.7.

Yêu cầu hệ thống – mục đích của dự án

• Xây dựng hệ thống trực quan, dễ dàng sử dụng
• Hệ thống có giao diện hiện đại, dễ sử dụng
• Hỗ trợ chức năng tìm kiếm và bộ lọc thơng minh
• Cung cấp thông tin chi tiết sản phẩm

4

• Quản lý đơn hàng và thanh toán
Các chức năng chính

1.8.

● Tìm kiếm sản phẩm
● Xem chi tiết sản phẩm
● Đặt hàng và thanh toán
● Quản lý giỏ hàng
● Đăng ký và quản lý tài khoản
● Quản lý đơn hàng
Công nghệ sử dụng

1.9.

● Công cụ thiết kế UI/UX: Figma.
● Lưu trữ ảnh : Cloudinary.
● Ngôn ngữ sử dụng: Javascript.
● Xây dựng website: HTML5, CSS3.
● Cơ sở dữ liệu: MySQL.
● Thư viện sử dụng:
o Front-end: Reactjs.
o Back-end: Nodejs.
1.10.

Mơi trường lập trình

● Visual Studio Code (VS Code).
1.11.

Cơng cụ hỗ trợ

● Tìm hiểu các công cụ hỗ trợ: Figma, StarUML (WebApp hỗ trợ vẽ diagram).
● Môi trường làm việc: Notion.

5


Chương 2. GIỚI THIỆU CÔNG NGHỆ SỬ DỤNG
2.1.

React

2.1.1. Giới thiệu [5.1]
● React là một thư viện JavaScript declarative, hiệu quả và linh hoạt cho việc
xây dựng giao diện người dùng. React cho phép bạn tạo những giao diện (UI)
phức tạp từ những đoạn code nhỏ và độc lập. Những đoạn code này được gọi
là “components”.
● Components của công cụ này được phát triển bởi Facebook. Nó được ra mắt
như một công cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi
trước các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript bán
chạy nhất thời bấy giờ.
2.1.2. Ưu điểm [5.2]
● Dễ sử dụng: React là một thư viện GUI nguồn mở JavaScript tập trung vào
một điều cụ thể hoàn thành nhiệm vụ UI hiệu quả. Được phân loại thành kiểu
“V” trong mơ hình MVC (Model-View-Controller).
● Hỗ trợ Reusable Component trong Java: React cho phép bạn sử dụng lại
components đã được phát triển thành các ứng dụng khác có cùng chức năng.
Tính năng tái sử dụng component là một lợi thế khác biệt cho các lập trình

viên.
● Viết component dễ dàng hơn: react component kết hợp tuyệt vời của
JavaScript và HTML. Có thể làm rõ tồn bộ q trình viết cấu trúc trang web.
Ngồi ra, phần mở rộng cũng giúp render nhiều lựa chọn dễ dàng hơn.
● Hiệu suất tốt hơn với Virtual DOM: React sẽ cập nhật hiệu quả q trình
DOM (Document Object Model – Mơ hình đối tượng tài liệu).

6


● Thân thiện với SEO: React cho phép bạn tạo giao diện người dùng có thể
được truy cập trên các cơng cụ tìm kiếm khác nhau. Tính năng này là một lợi
thế rất lớn vì khơng phải tất cả các khung JavaScript đều thân thiện với SEO.
2.1.3. Nhược điểm [5.2]
● React tăng kích thước của ứng dụng mà người dùng tải xuống
● Sẽ có thêm chi phí về khả năng tính tốn và bộ nhớ của thiết bị.
● Để bắt đầu học React JS, một lập trình viên khơng chỉ phải học thư viện mà
cịn phải làm quen với mơ hình.

Hình 2.1: React JS
2.2.

Redux [5.3]

2.2.1. Giới thiệu
● Redux là một thư viện Javascript có tác dụng tạo ra một lớp quản lý mọi trạng
thái của ứng dụng. Hay nói cách khác, Redux là một predictable state

7

management tool (công cụ quản lý cao cấp) cho các ứng dụng được viết bằng
ngơn ngữ lập trình Javascript và còn được gọi là Redux js.
● Redux giúp các ứng dụng bạn viết có thể hoạt động một cách nhất qn và có
thể hoạt động trong nhiều mơi trường khác nhau như client, server, native,…
Ngoài ra, sử dụng thư viện Redux để lưu trữ cũng giúp quá trình test/kiểm thử
phần mềm dễ dàng hơn.
2.2.2. Cách hoạt động của Redux
● Redux dựa trên 3 thành phần chính là: Actions, Store, Reducers.
o Actions: là bước đầu tiên trong luồng hoạt động của Redux và là cách để
gửi dữ liệu từ ứng dụng đến Redux Store (cửa hàng redux). Bất cứ khi nào
trạng thái của app hay là render của view thay đổi thì sẽ có một hành động
sẽ được tạo ra.
o Reducers: Sau khi các dữ liệu được Actions sẽ chuyển về Reducers. Đây
là nơi state được lưu giữ dưới dạng đối tượng và giúp xác định sự thay đổi
trạng thái ứng dụng sao cho đáp ứng Action được gửi tới Store. Lúc này
Reducer sẽ làm nhiệm vụ định hướng sự thay đổi của các state mỗi khi
Actions có phản hồi và phản hồi được gửi đến reducer.
o Store: Store là nơi lưu trạng thái của ứng dụng và chỉ có duy nhất một
Store trong bất kỳ một chương trình ứng dụng Redux nào. Nhiệm vụ của
store chính là quản lý, access các state được lưu, update state thông qua
dispatch, cho phép truy cập state thông qua Getstate và đăng ký hoặc hủy
đăng ký các listeners thông qua helper methods.

8


Hình 2.2: Redux
2.3.

MySQL [6.2]

2.3.1. MySQL là gì?
● MySQL là 1 hệ thống quản trị về cơ sở dữ liệu với mã nguồn mở (được gọi
tắt là RDBMS) và đang hoạt động theo mơ hình dạng client-server. Đối với
RDBMS – Relational Database Management System thì MySQL đã được tích
hợp apache và PHP.
● Được phát hành chính thức từ thập niên 90s, MySQL hiện đang quản lý dữ
liệu qua những cơ sở dữ liệu, với mỗi một cơ sở dữ liệu hoàn tồn có thể có
rất nhiều những bản quan hệ có chứa dữ liệu. Ngồi ra, MySQL cũng có cùng
1 cách thức truy xuất cũng như mã lệnh tương tự cùng với ngôn ngữ SQL.

9


Hình 2.3: MySQL
2.3.2. Cơ chế hoạt động
● Với những thơng tin chi tiết trên về khái niệm MySQL, vậy cơ chế hoạt động
của MySQL là gì? Theo đó cách thức vận hành chính tại MySQL mơi trường
hiện tại là:
● MySQL đang tạo ra bảng để có thể lưu trữ dữ liệu và định nghĩa về sự liên
quan giữa những bảng đó
● Client sẽ trực tiếp gửi yêu cầu SQL bằng 1 lệnh đặc biệt có trên MySQL.
● Ứng dụng tại server sẽ tiến hành phản hồi thông tin cũng như trả về những
kết quả trên máy client.

10


Hình 2.4: Bảng lưu trữ dữ liệu và sự liên quan

2.3.3. Tại sao dùng MySQL
● MySQL là CSDL có tốc độ khá cao, ổn định và khá dễ sử dụng có thể hoạt
động được trên khá nhiều hệ điều hành.
● Tính bảo mật mạnh và sử dụng được trên nhiều ứng dụng mà MySQL cịn
hồn tồn được sử dụng miễn phí.
● MySQL khơng chỉ dừng lại ở bổ trợ cho PHP và Perl, mà nó cịn bổ trợ cho
nhiều ngơn ngữ khác, Nó là nơi để lưu trữ thơng tin trên các trang web được
viết bằng Perl hoặc PHP.
2.3.4. Ưu điểm
● Nhanh chóng: Nhờ vào việc đưa ra một số những tiêu chuẩn và cho phép
MySQL làm việc hiệu quả cũng như tiết kiệm chi phí, giúp gia tăng tốc độ
thực thi.

11


● Mạnh mẽ và khả năng mở rộng: MySQL hoàn tồn có thể xử lý số lượng lớn
dữ liệu và đặc biệt hơn thế nữa thì nó cịn có thể mở rộng nếu như cần thiết.
● Đa tính năng: Ưu điểm MySQL là gì? MySQL hiện đang hỗ trợ nhiều những
chức năng SQL rất được mong chờ từ 1 hệ quản trị CSDL quan hệ cả gián
tiếp cũng như trực tiếp.
● Độ bảo mật cao: MySQL là gì? Hiện tại nó đang rất thích hợp cho những ứng
dụng truy cập CSDL thông qua internet khi sở hữu rất nhiều những tính năng
về bảo mật và thậm chí là đang ở cấp cao.
● Dễ dàng sử dụng: MySQL đang là cơ sở dữ liệu dễ sử dụng, ổn định, tốc độ
cao và hoạt động trên rất nhiều những hệ điều hành đang cung cấp 1 hệ thống
lớn những hàm tiện ích rất mạnh.
2.3.5. Nhược điểm
● Dung lượng hạn chế: Trong trường hợp nếu như số lượng bản ghi của bạn
đang lớn dần lên thì khi đó q trình truy xuất dữ liệu sẽ diễn ra vơ cùng khó

khăn. Như vậy cần phải áp dụng rất nhiều những biện pháp khác nhau để có
thể gia tăng được tốc độ truy xuất những dữ liệu ví dụ như tạo cache MySQL
hoặc chia tải database ra nhiều server.
● Độ tin cậy: Nhược điểm MySQL là gì? Theo đó cách thức nhận chức năng cụ
thể đang được xử lý cùng với MySQL (ví dụ như kiểm toán, những giao dịch,
tài liệu tham khảo,…) khiến cho nó trở nên kém tin cậy hơn một số những hệ
quản trị về cơ sở dữ liệu có quan hệ khác.

12


2.4.

NodeJS là gì [6.1]

2.4.1. Khái niệm
● Nodejs là một nền tảng được xây dựng dựa trên thời gian chạy JavaScript của
Chrome để dễ dàng xây dựng các ứng dụng mạng nhanh và có thể mở rộng.
Nodejs sử dụng kiến trúc hướng sự kiện event-driven, khơng chặn (nonblocking), làm cho nó nhẹ hơn và hiệu quả hơn, hoàn hảo cho các ứng dụng
real-time sử dụng nhiều dữ liệu chạy trên các thiết bị phân tán.
● Là một môi trường chạy mã nguồn mở, đa nền tảng, Nodejs được dùng để
phát triển các ứng dụng mạng. Node.js cũng cung cấp một thư viện phong
phú gồm các mô-đun JavaScript khác nhau, giúp đơn giản hóa việc phát triển
các ứng dụng web sử dụng Node.js ở một mức độ lớn.

Hình 2.5: Nodejs

13