Xây dựng website quảng bá và đặt tour du lịch sử dụng ReactJS và NestJS

Trang 1

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG KHOA ĐA PHƯƠNG TIEN

ĐÈ TÀI:

“XÂY DUNG WEBSITE QUANG BA VA ĐẶT TOUR

DU LICH SỬ DUNG REACTJS VÀ NESTJS” Giang viên hướng dan: TS TRAN QUY NAM

Sinh viên thực hiện: TRAN THIEN HAI

D19PTDPT2019 - 2023

ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

Trang 3

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA ĐA PHƯƠNG TIỆN Độc lập - Tự do - Hạnh phúc

DE TÀI DO AN TOT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Trần Thiện Hải

Lớp: DI9PTDPT Khoá: 2019-2023

Ngành đào tạo: Công Nghệ Đa Phương Tiện

Hệ đào tạo: Đại học chính quy

1 _ Tên đồ án/khoá luận tốt nghiệp: Xây dựng website quảng bá và đặt tour du lịch

sử dụng ReactJS và NestJS.

2 Lý do chọn dé tài:

Sau một thời kỳ dài chịu ảnh hưởng của dịch bệnh, thị trường du lịch Việt

Nam đã dan dan phát triển trở lại và có nhiều sự thay đổi đáng kể Người dân có nhu cầu đi du lịch trở lại ngay một nhiều hơn, vì vậy việc quảng bá du lịch và đặt tour trực tuyến ngày càng trở nên quan trọng, và để đáp ứng điều này, việc xây dựng một trang web là hoàn toàn cần thiết.

ReactJs và NestJs, là hai công nghệ tiên tiến và phổ biến hiện nay trong phát triển web, mang lại sự linh hoạt và hiệu suất Đề tải "Xây dựng website quảng bá và đặt tour du lich sử dụng ReactJs và NestJs" không chỉ đơn thuần là

một đề tài tốt nghiệp mà còn là cơ hội để bản thân em áp dụng những kiến thức mới

và sáng tạo trong một lĩnh vực đang trên đà phát triển mạnh mẽ, đóng góp vào sự

tiện lợi và linh hoạt của ngành du lịch trong thời đại SỐ.

Trang web quảng bá và đặt tour du lịch sẽ không chỉ giúp người dùng dễ

dàng tìm kiếm và lựa chọn tour phù hợp mà còn mở ra một công thông tin rộng lớn

về các điểm đến, trải nghiệm du lịch, các sự kiện đặc sac, Việc quan ly thong tin các tour, các điểm đến, dem lại cho người dùng những thông tin đầy đủ, chính xác và hữu ích nhất, giúp người dùng lựa chọn được tour du lịch hợp lý là những mục

tiêu mà em tin rằng dự án này có thể đạt được một cách hiệu quả.

Chính vì vậy, em đã lựa chọn đề tài “Xây dựng website quảng bá và đặt

tour du lich sử dụng ReactJS và NestJS” Website sẽ có các chức năng như quảng

bá các địa điểm du lịch nổi tiếng, tìm kiếm tour du lịch phù hợp với nhu cau, đặt

tour trực tuyến, quản lý các tour du lịch, các điểm đến, các câm nang du lịch, da

dạng và hữu ich với người dùng.

Trang 4

3 Nội dung chính của đồ án:

Đồ án được chia làm các chương như sau:

Chương 1: Tổng quan về đề tài

Chương 2: Cơ sở lý thuyết

Chương 3: Phân tích và thiết kế hệ thống

Chương 4: Xây dựng đề tài

4 Ngày giao đề tài: 05/10/2023

5 Ngày nộp quyển: 15/12/2023

GIẢNG VIÊN HƯỚNG DẪN SINH VIÊN THỰC HIỆN

(Ký, ghi rõ họ tên) (Ky, ghi rõ họ tên)

TRƯỞNG KHOA

(Ký, ghỉ rõ họ tên)

Trang 5

Đồ án tốt nghiệp Đại học

LỜI CẢM ƠN

Được học tập và nghiên cứu tại khoa Da phương tiện — Học viện Công nghệ Bưu

chính Viễn thông, em đã được trải nghiệm trong môi trường đào tạo tốt và nhận

được sự chỉ dạy nhiệt tình của các thầy, các cô trong khoa.

Trước hết, em xin được bày tỏ lòng biết ơn và gửi lời cảm ơn chân thành đến thầy Trần Quý Nam đã dạy cho em có được những kiến thức vững chắc, tận tình chỉ bảo, nhắc nhở và hướng dẫn em trong suốt quá trình làm đồ án tốt nghiệp.

Với lòng biết ơn sâu sắc nhất, em xin gửi đến quý thầy cô Khoa Đa phương tiện đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tại trường Nhờ có những lời hướng dẫn, dạy bảo của các thầy cô nên đề tài nghiên cứu

của em mới có thê hoàn thiện tốt đẹp.

Trong quá trình nghiên cứu của mình, mặc dù được sự hướng dẫn rất nhiệt tình, tận tâm của thầy Trần Quý Nam cùng với sự nỗ lực của cá nhân nhưng cũng không thể tránh được những thiếu sót Em rất mong nhận được sự cảm thông và những góp ý từ quý Thay, Cô và các bạn dé dé tài được hoàn thiện hơn.

Em xin chân thành cảm ơn!

Hà Nội, ngày 12 tháng 12 năm 2023

Sinh viên thực hiện

Trân Thiện Hải

Trần Thiện Hải - BI9DCPT071 i

Trang 6

MỤC LỤC

CHƯƠNG 1 TONG QUAN VE ĐÈ TAL 5c ccccccxersreresree |

1.1 Bối cảnh và mục tiêu -:Sc 2t 3E E3E153212E55555513111121111515511111 11515111 1EEE xe 1

Bo nẽ 1

1.1.2 Lý do chọn dé tai o.cccececccccccccsssscssescsscssssessesesecsesessessssececstsvssseseeeees | 1.2 Đối tượng và phạm Vi đề tài ¿+ Ss+S SE 12EEE15121E2121711121 111.1 tre | 1.2.1 Đối tượng mà đề tài hướng tới -:- + sec E2 2ErEerxrkeree I 1.2.2 Phạm vi của đề tai oe eeseeeccsseesssecsssessssecessecessseesneeesnneeenneeesneeesneeesneee 2 1.3 Cấu trúc đồ án +: 22x22 2221221122111 re 3 1.4 Kết luận chương 2-2252 22t 2E 2E1221221121122127121121121121121212112 1e re 4 CHƯƠNG 2 CƠ SỞ LÝ THUYÊT 2-2222 222++222E+2EE+2EESExzrxerkrerrree 5 2.1 HTML, CSS LG 2111 HS v1 S11 1H TH 1H kg KH kh 52.1.1 Html ( HyperText Markup Language) -++++s+ 52.1.2 CSS (Cascading Style Sheets) Là nh re 5

2.5.2 Đặc điỂm ose eeceeeecsseecsssesesnecessseesseeessncssnscesnscessseessneesnneessneeesteesnneessees 8 2.5.3 Một vai framework hỗ tTỢ ¿- ¿+ + St ‡EEEEEE11111111111 1111111111 ce2 8

Trang 7

2.9.1 Khái nIỆm - + 11 S19 9v TT TH nhu TH HH Hư 20

2.9.2 Tính năng hỗ trợ cho NestJS -¿- 2-5252 5222+2xczzxrrzrsree 20

Phê 21

2.10.2 Tinh năng hỗ trợ cho NestS c.ccccccsccsescsscsessesesessesesessssesssseseseeeees 21

CHUONG 3 PHAN TÍCH VA THIET KE HE THONG - 23

3.1 Khảo sát, phân tích sản phẩm, luồng sử dung của người dùng - 23

3.1.1 Mục tiêu của sản phẩm 2-52 2+2 E2 21211121 te 23

3.1.2 Kiến trúc hệ thống -¿- 2-2 ©52+2E+2E22E2E12E2EE212121 2121223 ze 23 3.1.3 Danh sách các chức năng của hệ thống - 2 ¿©5z+s+2x+sze: 25 3.1.4 Danh sách các đối tượng quản lý 2 +2x+E+xe£zxzxzxzreree 25 3.1.5 Phân tích luồng sử dụng chính của người dùng -: 25

3.2 Phân tích, thiết kế hệ thống -¿- 2-2 2 S9‡EEEEEEEE2EEEEE2EEE121EE1711 22x cE 26 Ea a ä-3 26

3.2.2 SC€TIATIO - Ghế 29

3.2.3 Lược đồ tuần tự -.::-52+:222xt22 t2 tri 38

CHƯƠNG 4 XÂY DỰNG DE TÀI 2-2252 21 E12 2E12212711211221 E11 xe 46

4.1 Xây dựng Fronf-End - - - + 1 211332111211 1191 1111111 1110111011801 101 g1 kg 46

4.1.1 Kiến thức chung được sử dụng ¿+ 2 sx+EsEczxzxerererrrees 46

4.1.2 Cau trúc frontend -¿+-s+2x+2xt2E12EE221211221271121121121 211.2 re 46

4.1.4 Các trang ø1ao dIỆNn - - Sc 3n S2 TH HH TH ng tre 534.2 Xây dựng cơ sở đữ GU oo ee ee eeceescceeeeeneceeeeeeeeeneeceseeeeeeeeeeeeeeeeeseeeeneeeees 66

4.2.1 Các trường thuộc tính của đối tượng - ¿2 2+cecs+xsrxerees 66

Trần Thiện Hai - BI9DCPT071 1H

Trang 8

4.2.2 Quan hệ giữa các đối tượng ¿- Sc tt E2 rrưyt 69

4.3 Xây dung Back-End - c1 2c 11 1112111111111 1111101110 1118011 1H 11c kg 70

4.3.1 Kiến thức chung được sử dụng -¿- + secs+xeEsrzxerzxerees 70 4.3.2 Các object và cau trúc chung ¿5c s+E‡Ex2EeEzEeEerzrereeg 70

ôn? 2n 72

TONG KET ĐÈ TÀI 55 2552 2222222221222 122 22 ri 77

TÀI LIEU THAM KHẢO 2-22 2 SE2E22EE£EE22E12E127171121127171711 21121 79

Trần Thiện Hải - BI9DCPT071 1V

Trang 9

Hình 2.4 Giao diện Swagger cùng các API của ứng dung NestJs 22

Hình 3.1 Sơ đồ luồng sử dụng chính của người dùng -2-©5¿5¿5s¿ 26

Hình 4.1 Cau trúc front-end - +: + s+SE+S22EE2E2E2E121217171717121211 21 ce 46

Hình 4.2 Giao diện thanh Header - - (<< << EE E121 E18 E£222333133 1 ke 47Hình 4.3 Giao diện thanh Footer c2 2222211111 1111113 1£ £Erkkeeess 48

Hình 4.4 Giao diện thé tour - . 2211332222111 181 125531111111 ke rrrre 48

Hình 4.5 Giao diện thẻ điểm đến -222c22ttrr 49

Hình 4.6 Giao diện thẻ tin tức du lịch 5-2555 2222222222332 x+ 50Hình 4.7 Giao diện đăng nhập - ¿2 2c 132211321111 11511 1111111581111 xeE 33

Hình 4.8 Giao diện đăng Ky - - - G0 0121111221111 1110111110111 g1 11k ng và 33

Hình 4.9 Giao diện quên mật khẩu - 5 St St St t1 SE5E5E1111151511151111 111115111 xe 54 Hình 4.10 Giao điện khôi phục mật khẩu cccccccccccsessesseesesssssesseesteseesssessesseseees 55

Hình 4.12 Giao diện trang chủ - - S0 3221121111511 1 91111119 11111 kg kg kg 56

Hình 4.14 Giao diện trang chủ - 2c 3S 1121112131111 1111111119111 11k kg krg 56Hình 4.15 Giao diện trang chủ - - c 2S 112111231111 111111111911 1H vn kh 57

Hình 4.16 Giao diện trang loại tOUT - - 6 2c 2222312113311, 57

Hình 4.17 Giao diện trang loại tour . 5 S2 2321112313111 EEEEExre 58

Hình 4.18 Giao điện bộ loc sắp XẾp ¿- 5-52 St E2 2121112121211 11 1121 te 58 Hình 4.19 Giao diện trang chỉ tiẾt tOuT ¿+ 2-5 +x+EE+E£EE+E£EEEEEEEEErErkerereree 59 Hình 4.20 Giao diện trang chỉ tiẾt tOU :- 2-52 ©5222222++EEEEzEeEtzxrxerszee 59 Hình 4.21 Giao diện trang chi tiết điểm đến 5- 2-52 Ss+E+E£E2E£EzEzEerree 60 Hình 4.22 Giao diện trang điểm đến 2-2 5¿©222EE+EEt2EE22EE2E2222221223 2x 60

Hình 4.23 Giao diện trang tin tức du Lich c5 5 32-1 2S krserrerrersrvee 61Hình 4.24 Giao diện trang đặt tour c2 3S 111212 11 1 1x re 62

Hình 4.25 Giao diện hồ sơ người dùng -:- 2 2SE+EE2EE2EE2E2EEErEerrerkrex 62

Hình 4.26 Giao diện nút thanh toán Paypal - ¿ 5 +22 3+ *+kEssseerrrsesse 63Hình 4.27 Giao diện đăng nhập Paypal . - Sc 3+ 3112 3xx xykserveg 64

Trần Thiện Hải - BI9DCPT071 V

Trang 10

Hình 4.28 Giao diện tài khoản khách hàng trừ tiền - 5-2 +cz+s+£ecs2 64

Hình 4.29 Giao diện tài khoản người bán tour nhận Cs sec 65

Hình 4.30 Bảng cơ sở dữ liệu User - 2 22c 332111211311 115151115111 k2 66Hình 4.31 Bảng cơ sở dữ liệu TOUT- c2 22c 33211122 E%5EEEEEEereervke 67Hình 4.32 Bảng cơ sở dữ liệu Tour Type cccccccccscccesecesecesseeseceseeesseeesseeeensaes 68

Hình 4.33 Bảng cơ sở dữ liệu Destination - - sành nhiệt 68

Hình 4.34 Cau trúc chung của các object Back-end ¿-5scccscsczxzxe2 70

Hình 4.35 Cấu trúc của object TOUF 2:22 + 2x2E22E++EE£E+2EE2EEzEzxerxzre 71

Hinh 4.36 API Xac thue an 72

Hình 4.37 API về Users - 555cc t2 treo 74 Hình 4.38 API về Tours -csc- 22 222 treo 74

Hình 4.39 API về Destinations -¿- 2-52 2222E22E2E2221271211212121121 2121 xe 75 Hình 4.40 API về Tour Types -¿- 2-52 S22S22E22E12E12121715E12171111E1 1E re 75 Hình 4.41 API vỀ Invoices 2-52 52522522S22E22E2E2121212121212117121 211121 xe 76

Hình 4.42 API về TravelTips 2-2 2s ‡EÉEEEEEEEEEE121121121121171 11111 xe 76

Trần Thiện Hải - BI9DCPT071 vi

Trang 11

Scenario 3.3 Quên mật khâu và khôi phục mật khâu - ¿2= s+s+s+ 30

Scenario 3.5 Sửa thông tin cá nhân - - 2 3221332111311 rErkkrree 31

Scenario 3.6 Xem danh sách các tour ni bật ở trang chủ -s-cs=s 32

Scenario 3.7 Xem danh sách các tour theo loại tour - 555555 c s55 32

Scenario 3.8 Xem danh sách các điểm đến - 2-52 +s+E£E2E£E£E2EeExzkrrees 32

Scenario 3.9 Lọc và tìm kiếm điểm đến - ¿+ +s+E+EvEEEEEEEEEEEEE+EsEsEErrrrres 33 Scenario 3.10 Xem chỉ tiết một điểm đến -¿-5: 2c 2ct2Eterrisrerrerrree 33

Scenario 3.11 Xem danh sách các tin tỨC -c 23c 3 1S xxssssreesres 33

Scenario 3.12 Lọc và tìm kiếm tin tỨC c- xxx +EEEEEEEEEEEEEeEEEkrkrrrrxrkeree 34 Scenario 3.13 Xem chỉ tiết một tin tức ¿:©:+¿2c2+2£xxtrxrtrrrrsrrrrrrrrres 34

Scenario 3.14 Lọc tour du lich - + 2< 1332222111111 1 1E 293111 sec 34

Scenario 3.15 Xem chi tiết một tour du lịch -¿-s- + x+E+ESt+E+EEEzEeErxsrresrez 35

Scenario 3.16 Dat tour du lịch _ ¿2-2 1E 22221111 E 2311 EEEkrrerreeeeeeses 35

Scenario 3.17 Thanh toán tour băng Paypal -2- 2 s5 eEE+E+EeEerrxrxreres 36

Scenario 3.18 Xem các tour đã đặt - - - S2 2221111122511 11111111111 re 36

Scenario 3.19 Thêm mới tour, loại tour, điểm đến, tin tức - s5: 37

Scenario 3.20 Chỉnh sửa tour, loại tour, điểm đến, tin tức :-:-scs=ssss2 37 Scenario 3.21 Xóa tour, loại tour, điểm đến, tin tức -. -:cs+c+z+Eszseszsscsz 38

Scenario 3.22 Xác nhận tinh trạng thanh toán . - 25 +2 sssrsseerres 38Sequence 3.1 Dang KY eee eee aa 39Sequence 3.2 Đăng mhap - - 2113321111191 11391 1111911111011 1E ng ng re 39

Sequence 3.3 Quên mật khâu - - 2-2 + ES+E£EE2EEEEEEE2EEEEEEEEEE1211111 11 EExe, 40 Sequence 3.4 Khôi phục mật khâu 2-22 2 ++2++E+£++E++E+zxzxvzxrrxerves 40

Sequence 3.5 Chỉnh sửa thông tin cá nhân - s5 S11 Esvrưy 41

Sequence 3.6 Xem danh sach tour, điểm đến, tin tức -:cccscessssssssrsez 4I

Trần Thiện Hải - BI9DCPT071 vii

Trang 12

Đô án tốt nghiệp Đại học

Sequence 3.7 Lọc và tìm kiếm tour, điểm đến, tin tức -¿-:cscscscsrerrs 42

Sequence 3.8 Xem chi tiết tour, điểm đến, tin tlhe ¿-:-2+x+xvcvEvrrszeserers 42

Sequence 3.9 Đặt fOUT - -.- L1 111111 1111911110 111901 1n 11H nHvv rre 43

Sequence 3.11 Thêm mới tour, loại tour, điểm đến, tin tức - 44

Sequence 3.12 Chỉnh sửa tour, loại tour, điểm đến, tin tức -. cccccsscs 44

Sequence 3.13 Xóa tour, loại tour, điểm đến, tin tức -:-.cccccesessxsesrsres 45

Sequence 3.14 Xác nhận tình trạng thanh toán ¿+ 5-5 ++*‡+++sssx+++seexss 45

Trần Thiện Hải - BI9DCPT071 viii

Trang 13

Do an tol nghiep Đại hoc

MO DAU

Trong khuôn khổ của đồ án tốt nghiệp, bản thân em với những kiến thức sẵn có từ

trường lớp, từ những bài tập, dự án cá nhân đã hoàn thành, cùng với việc trau dồi,

tìm hiểu học hỏi thêm kiến thức về lập trình web, và với sự tư vấn, hướng dẫn tận tình từ thầy Trần Quý Nam, em đã đưa ra quyết định làm đề tài đồ án “Xây dựng

website đặt tour du lịch sử dụng ReactJS và NestJS” Nội dung đồ án gồm co: CHUONG 1: TONG QUAN VE DE TAI

Chương này giới thiệu tong quan, mô ta về dé tài bao gồm tên dé tài, mục tiêu, đối tượng đề tài hướng đến, cấu trúc của đề tài.

CHƯƠNG 2: CƠ SỞ LÝ THUYET

Chương 2 sẽ đi vào tìm hiểu các khái niệm, các cơ sở lý thuyết về các công nghệ, kiến thức chung được sử dụng trong đề tài.

CHUONG 3: PHAN TÍCH VÀ THIET KE HE THONG

Phân tích và thiết kế hệ thống Chương nay mô ta về hệ thống của dé tai, các chức năng và các đối tượng cần quản lý, xây dựng các biểu đồ usecase, biểu đồ lớp,

biêu do tuân tự cho các chức năng đó, mô tả vê cơ sở dữ liệu database được sửdụng.

CHƯƠNG 4: XÂY DỰNG ĐÈ TÀI

Xây dựng đề tài Chương này trình bày việc xây dựng website cả về frontend và backend, xây dựng các giao diện, các chức năng, kết nối giữa giao diện, API và

Trần Thiện Hải - BI9DCPT071

Trang 14

Đồ an tôi nghiệp Đại học Chương T Tong quan ve de tal

CHUONG 1 TONG QUAN VE DE TAI

1.1 Bối cảnh và mục tiêu 1.1.1 Tên đề tài

Tên đề tài đồ án: Xây dựng website đặt tour du lịch sử dụng ReactJS và NestJS.

1.1.2 Lý do chọn đề tài

Sau một thời kỳ dai chịu ảnh hưởng của dịch bệnh, thị trường du lịch Việt

Nam đã dan dan phát triển trở lại và có nhiều sự thay đôi đáng ké Người dân có nhu cầu đi du lịch trở lại ngay một nhiều hơn, vì vậy việc quảng bá du lịch và đặt tour trực tuyến ngày càng trở nên quan trọng, và để đáp ứng điều này, việc xây dựng một trang web là hoàn toàn cần thiết.

ReactJs và NestJs, là hai công nghệ tiên tiến và phổ biến hiện nay trong phát triển web, mang lại sự linh hoạt và hiệu suất Đề tài "Xây dựng website quảng bá và đặt tour du lich sử dụng ReactJs và NestJs" không chỉ đơn thuần là một đề tải tốt nghiệp mà còn là cơ hội để bản thân em áp dụng những kiến thức mới và sáng tạo trong một lĩnh vực đang trên đà phát triển mạnh mẽ, đóng góp vào sự tiện lợi và linh hoạt của ngành du lịch trong thời đại SỐ.

Trang web quảng bá và đặt tour du lịch sẽ không chỉ giúp người dùng dễ

dàng tìm kiếm và lựa chọn tour phù hợp mà còn mở ra một công thông tin rộng lớn

về các điểm đến, trải nghiệm du lịch, các sự kiện đặc sắc, Việc quản lý thông tin

các tour, các điểm đến, đem lại cho người dùng những thông tin đầy đủ, chính xác

và hữu ích nhất, giúp người dùng lựa chọn được tour du lịch hợp lý là những mục

tiêu mà em tin rằng dự án này có thể đạt được một cách hiệu quả.

Chính vì vậy, em đã lựa chọn đề tài “Xây dựng website quảng ba và đặt

tour du lịch sử dụng ReactJS và NestJS” Website sẽ có các chức năng như quảng

bá các địa điểm du lịch nỗi tiếng, tìm kiếm tour du lịch phù hợp với nhu cau, đặt tour trực tuyến,quản lý các tour du lịch, các điểm đến, các câm nang du lich, đa

dạng và hữu ích với người dùng.

1.2 Đối tượng và phạm vi đề tài

1.2.1 Đối tượng mà đề tài hướng tới

Đối tượng chính mà đề tài này hướng tới bao gồm cả người sử dụng có nhu

cầu du lịch và những nhà cung cấp dịch vụ du lịch Cụ thể, những đối tượng chính bao gồm:

- _ Du khách và Người dùng cuối:

+ Những người muốn tìm kiếm thông tin về các địa điểm du lịch, các tour hấp dẫn và thông tin liên quan.

+ Những người muốn đặt tour du lịch một cách thuận tiện và nhanh chóng

qua trang web.

Trần Thiện Hải - BI9DCPT071 1

Trang 15

+ Người dùng cuỗi có nhu cau tìm kiếm và đặt tour trực tuyên một cách dé

Nhà cung cấp dịch vụ du lịch:

+ Nhà cung cấp dịch vụ muốn quản lý thông tin tour, giá cả, và khả dụng

của tour của họ một cách hiệu quả mình thông qua một nền tảng trực tuyến.

+ Cần một giao diện dé sử dung dé cập nhật va quản lý thông tin về các

tour và địa điểm du lịch.

Quản trị viên hệ thống:

+ Người quản trị hệ thống muốn có khả năng kiểm soát và giám sát toàn bộ

hệ thống, dam bảo tính 6n định va bảo mật của trang web.

+ Cần một giao diện quản trị để quản lý người dùng, theo dõi hoạt động và

thống kê liên quan đến sự sử dụng trang web.

Tóm lại, đê tài này nhăm đáp ứng nhu câu đa dạng của cả người dùng cá

nhân và doanh nghiệp trong việc tìm kiếm, quảng bá và đặt tour du lịch một cách

thuận tiện và hiệu qua qua giao diện sử dung ReactJS và NestJS.

1.2.2 Phạm vi của đề tài

Trong đề tài này, bản thân em sử dụng những kiến thức đã học, đã tìm hiểu, tích lũy được dé xây dựng một website quảng bá và đặt tour du lịch, sử dụng công nghệ ReactJS cho phan front-end và NestJS cho phan back-end Dưới đây là các

điêm cụ thê vê phạm vi của đê tài:

Giao diện Người Dùng (Front-end):

+ Công nghệ sử dụng: ReactJS — một framework phát triển frontend phố

biến, với nhiều điểm nổi trội như sự linh hoạt, dé sử dụng, hiệu suất cao, sử dụng component dé chia nhỏ giao diện thành từng phan riêng biệt dé quan

ly và xử lý, cùng với cộng đồng và tài liệu hỗ trợ lớn, là một sự lựa chọn tốt

dé phát triển front-end cho việc xây dựng một trang web nồi bat va hap dẫn

cho việc quảng bá và đặt tour du lịch.

+ Phát triển giao diện website người dùng thân thiện, linh hoạt và dễ sử

dụng cho máy tính.

+ Hiển thi thông tin chi tiết về các địa điểm du lich, các tour du lich,

+ Tích hợp chức năng tìm kiếm và lọc dé người dùng có thé dé dàng tìm kiếm thông tin mong muốn.

Trần Thiện Hải - BI9DCPT071 2

Trang 16

+ Công nghệ sử dụng: NestJs — một trong những framework NodeJS phát

triển back end mạnh mẽ nhất hiện nay, VỚI Các điểm mạnh như sử dụng TypeScript, các tính năng mạnh mẽ như Modularity ( Cấu trúc modulized

giúp mã nguồn có tổ chức, dé bảo trì, tái sử dung), Dependency Injection

( tạo mã linh hoạt và dễ kiểm thử) hay Decorators ( đánh dấu các thành phần của ứng dụng, giảm độ phức tạp của mã nguon) là một sự lựa chọn tốt

cho việc xây dung back-end cho website quảng bá và đặt tour du lịch thông

qua việc phân chia rõ ràng các đối tượng quản ký và chức năng, đặc biệt là khi kết hợp với ReactJS.

+ Xây dựng một hệ thống quản lý tour và đặt tour dé dàng, linh hoạt.

+ Tích hợp phương thức thanh toán ảo cho người dùng khi đặt tour.

+ Phát triển một giao điện quan trị cho người quản trị hệ thống dé giám sát

và quản lý toàn bộ trang web Hỗ trợ đăng tải hình ảnh, mô tả, giá cả, và

các thông tin khác liên quan đến các địa điểm và tour.

- Môi trường sử dụng: Website quảng bá và đặt tour du lịch mà em xây dựng

được sử dụng trên tất cả trình duyệt website hỗ trợ trên máy tính như Chrome, Cốc cốc, Microsoft Edge, Safari, Firefox,

- Phan tích thiết kế hệ thống: quá trình phân tích thiết kế hệ thống là qua trình quan trọng trước giai đoạn triển khai đối với mỗi một hệ thống, ứng

dụng, bao gồm giai đoạn nghiên cứu, phân tích các chức năng, các đối tượng cần quản lý, xác định, vẽ lên được sơ đồ hoạt động của của chức

- Công nghệ triển khai và cài đặt hệ thống: những công nghệ dùng dé thực thi và triển khai hệ thống, những thư viện sử dụng hay ngôn ngữ, phương pháp lập trình sẽ được nghiên cứu cụ thé về ưu nhược điểm và lý do sử

- Kiém thử hệ thống: kiểm tra về giao diện, chức năng của hệ thống dé đảm bảo giao diện thân thiện đối với người dùng, cũng như chức năng hoạt động tốt, không lỗi.

1.3 Cấu trúc đồ án

Như vậy, sau khi phân tích được phạm vi nghiên cứu của đồ án thì đồ án được

chia làm các chương như sau:

Chương 1: Tông quan về dé tài Chương này giới thiệu tông quan, mô tả vê đê tàibao gôm tên dé tai, mục tiêu, đôi tượng đê tài hướng đên, câu trúc của dé tài.

Chương 2: Cơ sở lý thuyết Chương này sẽ đi vào tìm hiểu các khái niệm, các cơ sở lý thuyết về các công nghệ, kiến thức chung được sử dụng trong đề tài.

Tran Thiện Hải - BI9DCPT071 3

Trang 17

Đồ án tốt nghiệp Đại học Chương 1 Tổng quan về dé tài

Chương 3: Phân tích và thiết kế hệ thống Chương này mô tả về hệ thống của đề tài, các chức năng và các đối tượng cần quản lý, xây dựng các biểu đồ usecase, biểu đồ lớp, biểu đồ tuần tự cho các chức năng đó, mô tả về co sở dữ liệu database

được sử dụng.

Chương 4: Xây dựng dé tài Chương này trình bày việc xây dựng website cả về

frontend và backend, xây dựng các giao diện, các chức năng, kết nối giữa giao

diện, API va database.

1.4 Kết luận chương

Chương đầu tiên của đồ án giới thiệu tổng quát về đề tài, đưa ra mục tiêu,

phạm vi cụ thể của đề tài, cũng như từng bước trong quá trình thực hiện đề tài, đây là

phần được coi như kim chỉ nam trong quá trình phát triển một website, xác địch

hướng đi của đề tài này.

Tom lại, “website quảng ba va đặt tour du lịch sử dung ReactJS và NestJS”

mà em xây dựng trong đề tài này có các chức năng như quảng bá các địa điểm du

lịch nỗi tiếng, tìm kiếm tour du lịch phù hợp với nhu cầu, đặt tour trực tuyến, quản

lý các tour du lịch, các điểm đến, các cảm nang du lịch, đa dạng và hữu ích với

người dùng Tuy nhiên, do thời gian, kiến thức, kinh nghiệm của bản thân còn có

hạn, nên cách thức và quá trình xây dựng website còn gặp nhiều vấn đề, khó khăn, chưa thực sự quá tốt.

Tiếp theo đây, chương 2 sẽ đi vào phần cơ sở lý thuyết, trình bày về các khái

niệm, các kiến thức, công nghệ mà bản thân em đã chọn lựa dé xay dung nén dé tai

Tran Thiện Hai - BI9DCPT071 4

Trang 18

Đồ án tốt nghiệp Đại học Chương 2 Cơ sở lý thuyết

CHƯƠNG 2 CƠ SỞ LÝ THUYET

2.1 HTML, CSS

2.1.1 Html ( Hyper Text Markup Language)

HTML là một ngôn ngữ đánh dấu được sử dụng dé tạo và cấu trúc nội dung

của trang web Nó không phải là một ngôn ngữ lập trình, mà thay vào đó là một

ngôn ngữ đánh dau dùng đề định dang và hiển thị thông tin trên trình duyệt HTML

sử dụng các thẻ và phần tử để xác định cấu trúc của trang, bao gồm tiêu đề, đoạn văn bản, hình ảnh, liên kết, biểu mẫu và nhiều phần khác.

2.1.2 CSS (Cascading Style Sheets)

CSS là ngôn ngữ được sử dung dé định dang và tao kiểu cho các trang web va

tài ligu HTML Nó cho phép bạn điều chỉnh mau sắc, kích thước, khoảng cách, vị trí

và nhiều yếu tô giao diện khác của các phan tử HTML CSS sử dụng các quy tắc, các thuộc tinh và các giá trị dé thay đổi diện mạo của các phan tử trong trang.

Nhìn chung:

HTML: Sử dung dé xác định cấu trúc và nội dung của trang web Nó sử dụng thẻ và phần tử để tạo các phần trên trang như tiêu đề, đoạn văn bản, hình ảnh, liên kết,

CSS: Sử dụng để tạo kiểu và định dạng cho trang web Nó sử dụng các quy

tắc và thuộc tinh dé điều chỉnh màu sắc, kích thước, vị trí, và các yếu tố khác của các phần tử trong trang.

Bằng cách sử dụng HTML và CSS cùng nhau, chúng ta có thê tạo ra các trang

web đẹp mắt, có cấu trúc rõ ràng và đễ dàng tùy chỉnh giao diện.

2.2 Javascript

2.2.1 Khái niệm

Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay.

Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên

sống động hơn bang cách thực hiện các thay đổi trang thái và tương tác người dùng mà không cần tải lại trang.

2.2.2 Vai trò

Vai trò của JavaScript trong lập trình web:

- _ Tương tác trực tiếp với HTML/CSS: JavaScript cho phép thay đối nội dung

và giao diện của trang web mà không cần phải tải lại toàn bộ trang Điều

này tạo ra trải nghiệm người dùng mượt mà và nhanh chóng.

- Tuong tác người dùng: JavaScript được sử dụng dé xử lý sự kiện từ người

dùng như click, hover, và input Điều này giúp tạo ra trang web đáp ứng và

tương tác, cung cấp trải nghiệm người dùng tốt hơn.

Trang 19

Tran Thiện Hải - BI9DCPT071 5Đồ án tốt nghiệp Đại học Chương 2 Cơ sở lý thuyết

- _ Giao tiếp máy chủ: JavaScript cho phép truyền dữ liệu giữa trình duyệt và

máy chủ mà không làm tải lại trang Sử dụng AJAX (AsynchronousJavaScript and XML) hoặc các phương thức như Fetch API, JavaScriptgiúp tạo ra ứng dụng web linh hoạt và nhanh chóng.

Trong lập trình ReactJS, JavaScript đóng một vai trò quan trọng như ngôn ngữ

chính dé xây dựng các thành phan và quan lý trạng thái của ứng dụng ReactJS sử

dụng JavaScript dé tạo các thành phan tái sử dung và xây dựng giao diện người dùng

hiệu quả.

2.2.3 Ưu điểm

Ưu điểm của JavaScript:

- Kha năng chạy trên mọi trình duyệt: JavaScript là ngôn ngữ có thé chạy

trên mọi trình duyệt hiện đại, giúp đảm bảo tính tương thích và mở rộng

của ứng dụng web.

- Cong đồng lớn và hỗ trợ mạnh mẽ: Sự phổ biến của JavaScript đã tạo ra một cộng đồng lập trình đông đảo Có nhiều thư viện, framework và tài

nguyên học tập giúp hỗ trợ và phát triển nhanh chóng các dự án.

- Cu pháp dé đọc và hiểu: JavaScript có cú pháp gần gũi với nhiều ngôn ngữ

lập trình khác, giúp cho việc đọc và hiểu mã nguồn dé dang hơn.

- _ Xử lý bất đồng bộ thông qua Promise và Async/Await: Điều này giúp quan

ly mã nguồn không đồng bộ một cách hiệu qua, giảm thiêu callback hell và

tăng tính nhất quán của mã nguồn.

- _ Tích hợp tốt với nhiều công nghệ khác nhau: JavaScript có thé tích hợp dễ

dàng với các công nghệ khác như APIs, thư viện bên ngoài và các

framework, tạo ra môi trường phát triển đa dạng và linh hoạt.

2.3 Axios

Axios là một thư viện JavaScript được sử dụng phô biến để thực hiện các yêu cầu HTTP từ trình duyệt hoặc môi trường Node.js Thường thì Axios được sử dụng dé

gửi các yêu cầu AJAX và tương tác với các API.

Với Axios, chúng ta có thể thực hiện các loại yêu cầu HTTP như GET, POST,

PUT, PATCH, DELETE và các phương thức khác dé làm việc với dữ liệu Nó cung

cấp các phương thức đơn giản để gửi yêu cầu và nhận phản hồi từ máy chủ, và cung

cấp cú pháp dễ hiéu và linh hoạt dé xử lý dữ liệu được trả về từ API.

Cài đặt: npm install axios

Sử dụng axios dé thực hiện yêu cầu lấy data:

import axios from 'axios’;

axios.get(‘https://api.example.com/data')

Trang 20

Trin Thien Hal — BIODCPTO nt

Đồ án tốt nghiệp Dai hoc Chương 2 Cơ sở lý thuyết

2.4 Ant Design

Hinh 2.1 Ant Design

Ant Design là một bộ thư viện giao diện người dung (UI) được phat triển bởi

Ant Group Nó cung cấp các thành phan giao diện và hệ thống thiết kế có san dé xây dựng các ứng dụng web chuyên nghiệp và hấp dẫn Ant Design giúp tiết kiệm thời gian và công sức trong việc tao giao diện và cung cấp một giao diện đồng nhất và hài

hòa cho ứng dụng của chúng ta.Cài đặt: npm install antd

Sử dụng các thành phan: Ant Design cung cấp nhiều thành phan giao diện như nút, biểu mẫu, bảng, menu, tab, v.v Chúng ta có thể import và sử dụng các thành

phần này trong ứng dụng của mình Ví dụ:

Import { Button, Input } from “antd”;

Ant Design không chỉ cung cấp các thành phần cơ bản mà còn giúp bạn xây dựng các giao diện ứng dụng hap dẫn với các hệ thống bố cục, mẫu thiết kế và hướng

dẫn sử dụng.

2.5 Front-end

2.5.1 Khái niệm

Frontend là phần của một ứng dụng web mà người dùng trực tiếp tương tác và nhìn thấy Nó giống như cánh cửa và cửa số của ngôi nhà web - nơi mà mọi người giao tiếp và trải nghiệm Frontend thường được xây dựng bằng HTML, CSS, và JavaScript HTML định nghĩa cấu trúc của trang web, CSS xác định giao diện và kiểu

dáng, và JavaScript thêm chức năng tương tác.

Trang 21

Trần Thiện Hải - B19DCPT071 7Đồ án tốt nghiệp Đại học Chương 2 Cơ sở lý thuyết

2.5.2 Đặc điểm

Một vài điểm quan trọng về front-end:

- Frameworks và Thư Viện: Có nhiều frameworks như React, Angular, hoặc

Vue.js giúp phát triển frontend hiệu quả hơn bang cách cung cấp cau trúc và công cụ

sẵn có.

- Responsive Design: Frontend cần linh hoạt để hiển thị trên nhiều thiết bị và

kích thước màn hình khác nhau Điều này gọi là thiết kế đáp ứng.

- Giao Diện Người Dùng (UI): Điều này bao gồm mọi thứ từ cách các phần tử được sắp xếp trên trang đến cách chúng phản ứng khi người dùng tương tác.

- Tương Tác Thông Minh: Frontend giúp xây dựng trải nghiệm tương tác

mượt mà và thú vị, từ việc kiểm soát form đến tải đữ liệu động mà không cần phải tải

lại trang.

- Ajax (Asynchronous JavaScript and XML): Cho phép gửi và nhận dữ liệu từ

máy chủ mà không cần phải làm mới trang, tăng trải nghiệm người dùng.

- Đa Dạng và Đa Phương Tiện: Hiển thị nội dung đa dạng như văn bản, hình ảnh, video, và âm thanh một cách hấp dẫn.

2.5.3 Một vài framework hỗ trợ

a Angular

Angular là một framework front-end do Google phát triển Nó có một cộng đồng mạnh mẽ và cung cấp một cách tiếp cận đầy đủ cho phát triển ứng dụng web.

Mô hình two-way data binding của Angular giúp tự động cập nhật giao diện khi dữ

liệu thay đổi.

Đặc điểm nỗi bật:

- Full-Featured: Angular là một framework đầy đủ, cung cấp đầy đủ mọi thứ để xây dựng một ứng dụng web, bao gồm routing, dependency injection, forms handling, và nhiều tính năng tích hợp sẵn.

- Two-way Data Binding: Cung cấp two-way data binding giữa model và view, giúp tự động cập nhật giao diện khi dữ liệu thay đôi và ngược lại.

- TypeScript: Angular sử dụng TypeScript, giúp kiểm tra lỗi tại giai đoạn phát

triển và tăng tính bảo mật.

- Modular Architecture: Angular sử dụng kiến trúc modular, giúp tăng khả

năng bảo trì và phát trién ứng dụng lớn.

Trang 22

Tran Thiện Hải - B19DCPTO71 8D6 an tot nghiép Dai hoc Chuong 2 Co sé ly thuyét

b VueJS

Vue.js là một framework linh hoạt va dé hoc Với cú pháp gần gũi với HTML, Vue.js thích hợp cho cả những người mới bắt đầu Nó có khả năng tích hợp gradualmente vao dự án hiện tai và sử dụng mô hình reactivity để theo dõi và tự

động cập nhật trạng thái.

Đặc điểm nồi bật:

- Simplicity and Flexibility: Vue.js được biết đến với cú pháp đơn giản và dễ

học Nó cho phép tích hợp gradualmente vào dự án hiện tại và có khả năng linh hoạt

- Reactivity: Sử dụng mô hình reactivity dé theo dõi và tự động cập nhật trang

thái, giúp quản lý trạng thái ứng dụng dễ dàng.

- Component-Based: Vue.Js cũng hướng tới mô hình component-based, giúp quản

ly mã nguồn và tăng khả năng tái sử dụng.

c NextJS

Next.js là một framework ReactJS để xây dựng ứng dụng web tĩnh hoặc

động Nó giúp tối ưu hóa hiệu suất và tăng khả năng tìm kiếm của trang web thông qua việc tạo ra các trang tĩnh tại thời điểm build.

Đặc điểm nồi bật:

- Server-side Rendering (SSR) và Pre-rendering: Next.js hỗ trợ SSR và

pre-rendering, giúp tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.

- Routing Tốt: Cung cấp hệ thống routing mạnh mẽ và tốt, giúp quản lý các

trang và URL dễ dàng.

- Static Site Generation (SSG): Cho phép tạo ra các trang web tĩnh tại thời

điểm build, giảm độ phức tạp của server và tăng khả năng mở rộng.

d NuxtJS

Nuxt.js là phiên bản Vue.js của Next.js Nó tối ưu hóa việc xây dựng ứng dụng Vue.js và cung cấp các tính năng như pre-rendering và server-side rendering.

Đặc điểm nỗi bật:

- SSR va SSG cho Vue.js: Nuxt.js mở rộng khả năng của Vue.js với SSR và

SSG, tối ưu hóa hiệu suất và SEO.

- Convention over Configuration: Sử dụng nguyên tac "Convention overConfiguration" đê giảm việc cau hình va tang toc qua trình phat triên.

- Plugin System: Cung cấp hệ thống plugin giúp tích hợp các tính năng bổ

sung vào dự án một cách dễ dàng.

Trang 23

- Virtual DOM và Hiệu Suất: Sử dụng Virtual DOM để tối ưu hóa hiệu suất,

giúp giảm thời gian load trang và tạo trải nghiệm người dùng mượt mà.

- Community Lớn va Ecosystem Mạnh Mé: Có một cộng đồng lớn, day đủ tài

nguyên học và nhiều thư viện hỗ trợ Ecosystem của React bao gồm nhiều công cụ giúp phát triển ứng dụng một cách nhanh chóng.

2.6 ReactJS

2.6.1 Tổng quan

Khái niệm:

ReactJS là một thư viện JavaScript mã nguồn mở, được phát triển bởi

Facebook, giúp xây dựng giao diện người dùng động và tương tác trên các ứng dụng

Nó tập trung vào việc xây dựng các thành phan (components) tái sử dụng va

quản lý trạng thái (state) của ứng dụng một cách hiệu quả.Thay vì làm việc trên toàn

ứng dụng web, ReactJS cho phép các nhà phát triển có thé phá vỡ giao diện người dùng phức tạp một cách thuận lợi thành các thành phần đơn giản.

Đặc điểm nỗi bật của ReactJS so với các framework front-end khác:

- Thư viện Component Reusable: React cho phép bạn xây dựng các thành

phan (components) có thé tái sử dụng Điều này giúp tối ưu hóa mã nguồn, giảm độ

phức tạp va tăng khả năng bao trì.

- Virtual DOM: React sử dụng Virtual DOM để tối ưu hóa hiệu suất Thay vì cập nhật toàn bộ DOM mỗi khi có thay đổi, React chỉ cập nhật những phần cần thiết Điều này giúp giảm tải cho trình duyệt và tăng tốc độ hién thị trang.

- One-way Data Binding: Dữ liệu chuyên động một chiều từ cha đến con, giúp

quản lý trạng thái (state) dễ dàng và tránh tình trạng xung đột.

Trang 24

- Thư viện Hỗ trợ Mạnh Mé: Có một cộng đồng lớn và phong phú, hỗ trợ bởi nhiều thư viện và công cụ bên thứ ba như Redux, React Router, Jest, va nhiều công

cụ khác.

Điểm mạnh của React.js dễ thấy nhất là phan Component:

- React.js chia nhỏ các phần của trang thành từng phan riêng biệt dé xử lý, gọi

là component, giúp dễ quan lý, dé sử dụng ở nhiều nơi.

- Mỗi khi dữ liệu được cập nhật mới, thay vì thay đổi nguyên trang, thì React.js sẽ giúp thay đổi chi component liên quan, việc nay sẽ tối ưu rất nhiều thời

gian làm mới dtr liệu.

- Đặc biệt là hầu hết các component thường dùng đã được phát triển và chia

sẻ, chỉ cần cài đặt và sử dụng.

=> Kết luận: Dựa trên tính chất của đề tài "Xây dựng website quảng bá và đặt tour du lịch," ReactJS có thé coi là sự lựa chọn phù hợp để xây dựng front-end cho

dé tài Sự linh hoạt, dé sử dụng, hiệu suất cao, vả cộng đồng hỗ trợ đông đảo của

ReactJS hoàn toàn có thé giúp xây dựng một trang web nỗi bật và hấp dẫn cho việc

quảng bá và đặt tour du lịch.

2.6.2 Componenfs

Trong ReactJS, components (các thành phan) là các khối xây dựng độc lập và

tái sử dụng của giao diện người dùng Chúng được coi như các khối xây dựng riêng

biệt, có thé chứa HTML, JSX, CSS, va logic JavaScript.

React thúc đây phương pháp phân chia giao diện thành các thành phan nhỏ

hơn, dé quan ly hơn, giúp mã nguồn trở nên dé đọc và bảo trì hơn Mỗi component

có thê chứa trạng thái (state) và nhận các giá trị đầu vào từ props.

Cách đơn giản dé viết 1 component trong React là viết 1 JavaScript function.

2.6.3 State

State trong React là một phan quan trong của mỗi component, cho phép lưu

trữ và theo dõi các dữ liệu có thé thay đổi trong suốt thời gian khi ứng dụng hoạt động Nó giữ những thông tin mà giao diện cần hiển thị và phản ánh những thay đồi người dùng tạo ra Khi state thay đôi, React sẽ tự động cập nhật giao diện để phản

ánh những thay đổi đó mà không cần phải thao tác thủ công State hoạt động như bộ "não" giúp ứng dụng có thé tương tác và thay đổi theo thời gian.

2.6.4 Các sự kiện và xử lý sự kiện- Các Sự Kiện (Events) Trong React:

React hỗ trợ hầu hết các sự kiện HTML thông qua cú pháp tương tự Một số sự kiện phổ biến bao gồm onClick, onChange, onSubmit, onMouseOver, và nhiéu su

tên khác.

Trang 25

Tran Thiện Hải - B19DCPTO71 11D6 an tot nghiép Dai hoc Chuong 2 Co sé ly thuyét

- Xu Ly Su Kién (Handling Events):

Truyén hàm xử lý sự kiện: Truyền một hàm xử lý sự kiện cho thuộc tính tương ứng của thành phần Hàm này sẽ được gọi khi sự kiện diễn ra.

Truyền tham số vào hàm xử lý sự kiện: Đôi khi chúng ta cần truyền thêm thông tin cụ thé vào hàm xử lý sự kiện Dé làm điều này, chúng ta cần bọc hàm xử lý

sự kiện bên trong một hàm khác.2.6.5 React Router

React Router là một thư viện bên thứ ba cho React được sử dung dé quản lý việc điều hướng và chuyền đổi giữa các trang (routes) trong ứng dụng React Nó cho phép tạo các liên kết, định tuyến, và quản lý trạng thái điều hướng trong ứng dụng

Cài dat React Router : npm install react-router-dom

Cac khai niém quan trong lién quan dén React Router:

- BrowserRouter: BrowserRouter là một thành phan cung cấp bởi React Router dé bọc toàn bộ ứng dụng Nó sử dụng HTMLS history API dé đảm bảo URL thay đổi khi bạn điều hướng qua các trang.

- Route là một thành phan dé xác định cách hiển thị nội dung dựa trên URL Mỗi Route sẽ kiểm tra xem URL hiện tại có khớp với định tuyến nào hay không và hiền thị nội dung tương ứng Một Route thường có 2 thuộc tính: path=" " xác định đường dẫn mà định tuyến sẽ được kích hoạt khi URL hiện tại khớp với nó; component={ }: xác định component mà sẽ được hiển

thị khi định tuyến được kích hoạt.

- URL Parameters: Dùng để định tuyến đến các URL có tham sé bằng cách sử dụng dấu hai chấm (:) Ví dụ:

Trong vi dụ này, :id là một tham số động Khi URL trùng khớp với định tuyến

nay, React Router sẽ truyền tham số id vào thành phần BlogDetail.

Link: Link là một thành phần để tạo liên kết điều hướng trong ứng dụng Nó thay thé thẻ <a> thông thường và không làm tải lại trang khi nhấn vào.

2.6.6 Hooks

Hooks là một tính năng cua React phiên bản 16.8 trở lên, cho phép sử dụngtrạng thái và các tính năng của React như vòng đời và hành vi của class components

trong các functional components Điêu này giúp việc viết code trở nên dễ dàng hơn,dé đọc hơn và dé kiểm tra hơn.

Một số hooks quan trọng trong React: useState, useEffect, useContext,

Trang 26

Trần Thiện Hải - B19DCPTO071 12Đồ án tốt nghiệp Đại học Chương 2 Cơ sở lý thuyết

Trong dé tai này, em sử dụng 3 hooks chính là useState, useEffect và

- useState: useState cho phep su dung va quan ly trang thai trong functionalcomponents Nó trả về một cặp giá trị: trang thái hiện tai và một ham décập nhật trạng thái đó.

- useEffect: useEffect được sử dụng để thực hiện các tác vụ liên quan đến

vòng đời của component (component lifecycle) trong functional

components Điều nay bao gồm việc thực hiện các tác vu sau khi

component đã được render hoặc trước khi component bi hủy bỏ.

- useParams: được sử dung để trích xuất các tham số từ đường link URL.

Khi sử dụng React Router dé tạo các đường dẫn động với tham số, ví dụ

như /users/:id, thì useParams sẽ giúp trích xuất giá trị của tham số id từ

2.6.7 React Icons

“react-icons" là một tap hợp các biểu tượng vector hỗ trợ trong React Nó cho phép chúng ta sử dụng các biểu tượng phổ biến từ nhiều thư viện biểu tượng khác nhau mà không cần phải tạo các hình ảnh hoặc thẻ SVG riêng lẻ Thư viện này giúp tăng hiệu suất ứng dụng và tiết kiệm thời gian trong việc tạo giao diện.

Cài đặt: npm install react-icons

Import react-icons: Chúng ta có thể import các biểu tượng từ thư viện

"react-icons" và sử dụng chúng trong mã nguồn Ví du: import biểu tượng hình máy bay và

sử dụng nó trong component:

import { BsAirplane } from "react-icons/bs"2.7 Back-end

2.7.1 Khai niém

Backend là phần của một ứng dụng chịu trách nhiệm xử ly logic, lưu trữ dữ liệu và tương tác với cơ sở đữ liệu Nó thường là phần "đăng sau" của một trang web hoặc ứng dụng di động mà người dùng không thấy được, nhưng đóng vai trò quan trọng trong việc duy trì chức năng của hệ thống.

2.7.2 Đặc điểm

Một vài điểm quan trọng về back-end:

- Xử ly Logic: Backend thực hiện logic kinh doanh của ứng dụng, xác định

cách dữ liệu nên được xử lý và trả về cho người dùng.

- Quản lý Dữ liệu: Nó tương tác với cơ sở dữ liệu để lưu trữ và truy xuất thông

Trang 27

- Bao mat: Backend chịu trách nhiệm đảm bảo rằng dữ liệu được xử lý và lưu trữ an toàn, đồng thời quản lý quyền truy cập.

- Xử lý yêu cầu từ Frontend: Backend nhận các yêu cầu từ phía frontend (giao

diện người dùng) và trả về đữ liệu hoặc thông báo tương ứng 2.7.3 Một vài framework hỗ trợ

a Django

Django là một framework Python mạnh mẽ được thiết kế dé tao ra ứng dụng web nhanh chóng và linh hoạt Nó tuân thủ nguyên tắc "batteries-included," đi kèm với nhiều tính năng tích hợp sẵn.

Đặc Điểm:

- Mô hình ORM mạnh mẽ giúp tương tác với cơ sở dit liệu.- Hệ thống admin

san có giúp quản lý dữ liệu dé dàng.

- URL routing và middleware giúp kiểm soát quy trình xử lý yêu cầu.

b ExpressJS

Express.Js là một framework backend cho Node.Js, tập trung vào việc xây

dựng ứng dụng web và API một cách đơn giản và linh hoạt.

Đặc Điểm:

- Middleware giúp xử lý yêu cầu và phản hồi.

- Routing linh hoạt cho phép xác định các endpoint của ứng dung.

- Hỗ trợ mô hình MVC thông qua các thư viện bên ngoài.

c Spring Boot (Java)

Spring Boot là một phan của hệ sinh thái Spring Framework, được thiết kế dé tạo ra ứng dụng Java nhanh chóng với cau hình mặc định.

Đặc Điểm:

- Tích hợp sẵn với Spring, giúp quản ly dependencies và cau hình một cách dé dàng - Hé trợ mô hình MVC và cung cấp RESTful API thông qua Spring MVC.

- Spring Boot Starter giúp khởi tạo dự án nhanh chóng với các cau hình mặc định.

d Laravel (PHP)

Laravel là một framework PHP mà mục tiêu là tối giản hóa quá trình phát triển và mang lại trải nghiệm dé sử dụng cho lập trình viên.

Trang 28

Đặc Điêm:

- Mô hình MVC được tích hợp sẵn, giúp tạo ra các ứng dụng có cấu trúc rõ

- Eloquent ORM giúp tương tác với cơ sở dữ liệu một cách thuận lợi.

- Artisan Console giúp thực hiện các công việc như tao migration, seeding dữ

liệu một cách dễ dàng.

e NestJS

NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và

Đặc điêm:

- TypeScript Everywhere: NestJS sử dung TypeScript, giúp tạo ra mã nguồn dễ đọc, kiểm soát lỗi trước khi chạy, và hỗ trợ autocompletion mạnh mẽ.

- Modularity: Mã nguồn NestJS có thé được tô chức thành các module nhỏ, giúp quản lý mã nguồn dễ dàng và tái sử dụng.

- Dependency Injection: NestJS sử dung Dependency Injection dé quản lý và

tổ chức mã nguồn Điều nay giúp giảm sự phụ thuộc và làm cho mã nguồn linh hoạt

- Middleware và Interceptors: Middleware giúp xử lý yêu cầu và phản hồi

trước khi chúng đến các endpoint Interceptors cho phép thực hiện các tác vụ trung

tâm như logging.

- ORM (TypeORM): NestJS tích hợp tốt với TypeORM, một ORM mạnh mẽ

cho TypeScript/JavaScript Giúp quan lý cơ sở dữ liệu một cách thuận lợi.

- Testing: NestJS cung cấp bộ testing tích hợp sẵn, giúp kiểm thử ứng dụng

một cách hiệu quả.2.8 NestJS

2.8.1 Tổng quan

NestJS là một framework Node.JS cho phép xây dựng ứng dụng phía server.

NestJS là sự kết hợp bởi OOP(Object Oriented Programming), FP(Functional

Programming), FRP(Functional Reactive Programming) Nest mở rộng các

framework Node.js như Express hay Fastify dé bổ sung thêm nhiều module hay thu

^ x ^ ~ A

"ho ‘a e L) mo irame Q m ON _mo fabbhaYe,

TypeScript và rat linh hoạt dé xây dựng các hệ thống backend.

Trang 29

Đặc điểm nỗi bat của NestJS so với các framework front-end khác:

- TypeScript Integration: Với TypeScript, NestJS cung cấp kiểu dir liệu tinh,

giúp giảm lỗi và tăng tính dự đoán trong quá trình phát triển.

- Thiết kế theo hướng đối tượng (OOP): NestJS sử dụng các nguyên tắc OOP giúp tạo ra mã nguồn có tổ chức, dé bảo trì và mở rộng.

- Cau trúc Mô-đun và Dependency Injection: NestJS sử dụng cấu trúc mô-đun giúp phân chia ứng dụng thành các thành phan độc lập Dependency injection giúp

quản lý và tái sử dụng mã nguồn một cách hiệu quả.

- Middleware và Pipes: NestJS hỗ trợ middleware và pipes, giúp kiểm soát các

yêu cầu và xử lý dữ liệu trước khi chúng đến tay các controller Điều này làm tăng

tính linh hoạt của ứng dụng.

- Mạnh mẽ với GraphQL và REST API: NestJS hỗ trợ cả GraphQL và REST

API, giúp chọn lựa theo yêu cầu của dự án.

Điểm mạnh của NestJS dễ thấy nhất là sự kết hợp linh hoạt giữa TypeScript và cấu trúc của nó, cùng với các tính năng mạnh mẽ như Modularity ( Cấu trúc

modulized giúp mã nguồn có tô chức, dé bảo trì, tái sử dung), Dependency Injection

( tạo mã linh hoạt va dé kiểm thử) hay Decorators ( đánh dau các thành phan của ứng dụng, giảm độ phức tạp của mã nguồn).

=> Kết luận: Nhìn chung với những điểm mạnh như sử dụng TypeScript,

OOP, cấu trúc mô-đun và sự hỗ trợ đa dạng cho GraphQL và REST API, NestJS là

một sự lựa chọn tốt cho việc xây dựng website quảng bá và đặt tour du lịch thông

qua việc phân chia rõ ràng các đối tượng quản ký và chức năng, đặc biệt là khi kết

hợp với ReactJS.

Trang 30

Trần Thiện Hải — B19DCPT071 16

Đồ án tốt nghiệp Dai học Chương 2 Cơ sở lý thuyết

2.8.2 Các thành phần

Trong NestJS, có một số thành phần chính quan trọng như sau:

- Modules: Modules là các đơn vị tổ chức mã nguồn trong NestJS Mỗi ứng dụng NestJS chứa ít nhất một module gốc (root module), va module này có thé chứa các module con Modules giúp tao ra cau trúc tổ chức rõ ràng và cho phép bạn quan ly các phụ thuộc giữa các thành phan.

- Controllers: Controllers là thành phần chịu trách nhiệm xử lý yêu cầu và phản hồi từ client Chúng định tuyến các yêu cầu đến các phương thức tương ứng trong service và xử lý logic nghiệp vu Controllers sử dung decorator dé xác định các

endpoint và định dang dtr liệu.

- Providers: Providers là các thành phần cung cấp dịch vụ trong NestJS Chúng có thé là services, repositories, gateways hoặc các thành phần khác cần thiết để xử lý logic nghiệp vu Providers được chia sẻ và sử dụng trong controllers,

services và các thành phần khác của ứng dụng.

- Services: Services là thành phần thực hiện logic nghiệp vụ của ứng dụng.

Chúng thường gắn liền với một module và sử dụng providers dé thực hiện các tác vụ

cụ thê Services thường được sử dụng trong controllers để xử lý logic nghiệp vụ phức

- Middleware: Middleware là các hàm trung gian được thực thi trước hoặc sau

khi yêu cầu di qua controller Chúng có khả năng thay đổi yêu cầu hoặc phản hồi,

thực hiện các xử lý chung hoặc áp dụng các chính sách bảo mật.2.8.3 TypeORM

Khái niệm

TypeORM là một ORM (Object-Relational Mapping) được sử dụng phô biến

trong NestJS dé tương tác với cơ sở dit liệu Với TypeORM, chúng ta có thé định

nghĩa các entity, tao migrations, tao repository và thực hiện các truy van dit liệu phức tạp TypeORM hỗ trợ nhiều tính năng và tích hợp tốt với TypeScript, giúp xây dựng

ứng dụng NestJS mạnh mẽ và linh hoạt.

Cài đặt: npm install @nestjs/typeorm

Các thành phần, tính năng hỗ trợ cho NestJS

TypeORM có một số thành phần và tính năng có thể hỗ trợ tốt cho NestJS:

- Entity: Trong TypeORM, Entity là một đại diện cho một bang trong cơ sở

dữ liệu Mỗi entity tương ứng với một bảng và các cột trong bảng đó Chúng ta có

thé tao ra các class trong NestJS và đánh dấu chúng là @Entity để định nghĩa các

entity.

Trang 31

- Migrations: Migrations là một tính năng quan trọng trong TypeORM cho

phép duy trì phiên ban cơ sở dit liệu Khi có thay đổi trong schema (bảng, cột, quan hệ, ), chúng ta có thé tạo ra migrations dé thực hiện các thay đổi này trong cơ sở dữ liệu một cách kiểm soát TypeORM cung cấp các câu lệnh để tạo, chạy và hủy

- Repository: Repository là một thành phan quan trọng trong TypeORM dé thực hiện các thao tác truy van dữ liệu Repository cung cấp các phương thức dé tạo, đọc, cập nhật và xóa dữ liệu từ cơ sở dữ liệu Chúng ta có thể tạo ra các repository trong NestJS dé tương tác với các entity và thực hiện các thao tác truy van dữ liệu.

- Kết nối với cơ sở dữ liệu: TypeORM hỗ trợ nhiều loại cơ sở đữ liệu như MySQL, PostgreSQL, SQLite, MSSQL, Chúng ta có thé cau hình kết nối với cơ

sở dit liệu trong file cau hình của NestJS (vi dụ: ormconfig.json) băng cách chỉ định loại cơ sở dt liệu, thông tin kết nối, và các tùy chọn khác.

- Query Builder: Query Builder là một tính năng của TypeORM cho phép xây

dựng các câu truy van dir liệu bằng cách sử dụng phương thức và cú pháp dé đọc Query Builder cho phép chúng ta thực hiện các truy vấn phức tạp và điều kiện lọc dữ

liệu một cách linh hoạt.

- Các quan hệ giữa các Entity: TypeORM hỗ trợ quan hệ giữa các Entity, bao

gồm quan hệ một-một (one-to-one), một-nhiều (one-to-many), nhiều-một

(many-to-one) và nhiéu-nhiéu (many-to-many) Bằng cách sử dung decorators như

@ManyToOne, @OneToMany và @ManyToMany, chúng ta có thé thiết lập và quản

ly quan hệ giữa các Entity trong ứng dụng NestJS của minh.

- Tích hợp với TypeScript: TypeORM được thiết kế dé tương thích tốt với

TypeScript, cho phép sử dụng các lợi ích của kiểu dữ liệu tĩnh và các tính năng của

TypeScript trong quá trình phát triển ứng dụng NestJS TypeORM sử dụng các

decorators dé đánh dấu các trường, quan hệ và phương thức trong các Entity, giúp

kiểm tra kiểu dữ liệu và tạo ra mã tĩnh.

2.8.4 Nodemailer

Khái niệm

Nodemailer là một thư viện trong Node.js giúp gửi email một cách dễ dàng.

Điều này có thể được sử dụng trong NestJS để thực hiện các tác vụ liên quan đến

email như xác nhận đăng ky, đặt lai mật khẩu, và các tình huống khác.

Cài đặt: npm install nodemailer

Trang 32

Đặc điềm

- Nodemailer ho trợ nhiêu dịch vụ email và cung cap các tùy chon mở rộngcho việc tương tác với chúng.

- Dễ dàng tích hợp với các dịch vụ như Gmail, SendGrid, hay các máy chủ

SMTP tự lưu trữ.

Tính năng hỗ trợ cho NestJS

Mục đích chính của việc tích hợp Nodemailer trong NestJS là dé quản lý việc

gửi email trong ứng dụng Điều này có thể bao gồm việc gửi email xác nhận khi

người dùng đăng ký, thông báo quên mật khẩu, hoặc các tác vụ khác liên quan đến

gửi email trong ứng dụng của bạn.

2.8.5 Berypt

Khái niệm

Bcrypt là một thuật toán hashing được sử dụng dé bảo vệ mật khẩu Hashing

là quá trình biến đổi một chuỗi ký tự thành một giá tri cố định, không thể đảo ngược.

Berypt thường được sử dụng dé lưu trữ mật khẩu một cách an toàn hơn so với các

phương pháp hashing khác như MDS hoặc SHA-1.Cài đặt: npm install bcrypt

Đặc điểm

Đặc điểm chính của Berypt là khả năng làm chậm quá trình hashing thông qua

việc thực hiện nhiều lượt hashing, điều này làm tăng độ khó cho việc tấn công

Mục đích chính của việc sử dung Berypt trong NestJS là bảo vệ mật khẩu

người dùng Khi người dùng đăng ký hoặc cập nhật mật khẩu, mật khâu của họ sẽ

được hash bằng Berypt trước khi lưu vào cơ sở dit liệu Khi kiểm tra đăng nhập,

Bcrypt được sử dụng để so sánh mật khẩu đã nhập với mật khẩu đã được hash trong

cơ sở đữ liệu.

2.8.6 Passport và JWTKhái niệm

Passport là một middleware authentication cho Node.js, được sử dụng rộng rãi

trong các ứng dụng Express và NestJS Nó giúp quản lý quá trình xác thực người

Trang 33

Trần Thiện Hải - B19DCPT071 19

JWT (JSON Web Token) là một tiêu chuẩn mở dé tao ra một cách an toàn dé

truyền thông tin giữa hai bên dưới dạng JSON Trong ngữ cảnh của xác thực người

dùng, JWT thường được sử dụng dé tao token khi người dùng đăng nhập thành công Token này sau đó được gửi với mỗi yêu cau từ client đến server dé chứng thực người

Đặc điểm của Passport là khả năng tích hợp dé dang với các chiến lược xác

thực khác nhau, cũng như cung cấp cơ sở ha tang dé quản lý quá trình đăng nhập và

xác thực.

JWT có đặc điểm chính là kích thước nhỏ, dễ parse, và có thể chứa các thông tin tùy chỉnh Token nay có thé được ký và xác thực dé đảm bảo tính toàn vẹn của nó.

Mục đích của việc sử dung Passport và JWT trong NestJS là xây dựng một hệ

thống xác thực an toàn và linh hoạt Passport giúp quản lý các chiến lược xác thực, trong khi JWT cung cấp một cách an toàn để chứng thực và xác nhận danh tính của

người dùng một cách hiệu quả.2.9 TypeScript

2.9.1 Khái niệm

TypeScript là một ngôn ngữ kịch ban (script) mã nguồn mở do Microsoft phát triển, kế thừa từ nền tang của JavaScript và bô sung khả năng làm việc với các kiêu dữ liệu tĩnh (static type) TypeScript có thé sử dụng dé phát triển các ứng dụng chạy

ở cả client-side (Angular2) và server-side (NodeJS) TypeScript sử dụng tat cả các

tính năng của của ES6 như classes, modules.

NestJS sử dụng TypeScript làm ngôn ngữ chính dé phát triển ứng dụng Với TypeScript, NestJS cung cap các lợi ich của kiểu đữ liệu tĩnh và định kiểu mạnh, giúp giảm thiểu lỗi trong quá trình phát triển, cung cấp trợ giúp tự động và cung cấp tài liệu chi tiết về mã nguồn.

2.9.2 Tính năng hỗ trợ cho NestJS

Trang 34

từ các trình biên dịch va IDEs Trong NestJS, việc sử dụng TypeScript giúp tạo ra mãnguôn rõ ràng, dé đọc và dê bao trì.

- Type Inference: TypeScript có khả năng suy luận kiểu tự động Khi sử dụng NestJS,

TypeScript sẽ tự động suy ra kiểu đữ liệu cho các đối tượng, phương thức, tham SỐ, và giá trị trả về Điều này giúp giảm việc lặp lại khi định kiểu và tăng tính nhất quán

của mã nguồn.

- Object-oriented Programming (OOP) Features: TypeScript hỗ trợ các tính năng của

lập trình hướng đối tượng như classes, inheritance, interfaces, abstract classes và

access modifiers Trong NestJS, chúng ta có thé sử dung các tính năng này dé xây dựng module, controllers, services và các thành phần khác theo mô hình OOP, tạo ra mã nguồn có cau trúc rõ ràng và dé bảo trì.

- Compile-time Type Checking: TypeScript kiểm tra kiêu di liệu tại thời gian biên dịch, giúp phát hiện và báo lỗi các lỗi kiểu dữ liệu trước khi chạy ứng dụng Điều này giúp giảm số lượng lỗi thời gian chạy và tăng tính ôn định của ứng dụng.

- Type Annotations va Interfaces: TypeScript cho phép định kiểu cho biến, tham sé, đối tượng và giá trị trả về bằng cách sử dụng type annotations hoặc interfaces Trong

NestJS, việc sử dung type annotations và interfaces giúp dam bao tính nhất quán và kiểm soát dữ liệu khi làm việc với các DTO, models, controllers và services.

2.10 Swagger

2.10.1 Khái niệm

Swagger là một công cụ phát triển API và tài liệu API tự động Nó cho phép tạo và hiển thi tài liệu API đưới dang trang web tương tác, giúp tăng tính tương tác và hiểu rõ hơn về các endpoint, tham số, phản hồi và các tài nguyên được hỗ trợ bởi

2.10.2 Tính năng hỗ trợ cho NestJS

+ Tao tài liệu API tự động: Swagger cho phép tạo tài liệu API tự động dựa trên mã

nguồn của ứng dụng Nó thu thập thông tin về các endpoint, các tham số, các phản hồi và các tài nguyên liên quan dé tao ra tài liệu chi tiết về API.

+ Hiển thị tài liệu API tương tác: Swagger UI cung cấp một giao diện tương tác cho

tài liệu API Nó giúp người dùng hiểu rõ hơn về các endpoint, các tham số, các phản

hồi và các tài nguyên được hỗ trợ bởi API Người dùng có thé thử nghiệm và gửi yêu

cầu API trực tiếp từ giao diện này.

+ Hỗ trợ định dạng mô ta API: Swagger hỗ trợ các định dang mô ta API phô biến

như OpenAPI Specification (OAS) và JSON Schema Điều này giúp dé dang chia sẻ

và sử dung tai liệu API với các công cụ khác nhau.

Trang 35

+ Hỗ trợ kiếm thử API: Swagger UI cung cap khả năng thử nghiệm và kiểm tra API

trực tiêp từ giao diện Người dùng có thê gửi yêu cau API và xem các phản hôi được

trả về Điều này giúp trong việc kiểm tra và xác nhận tính chính xác của API.

Trần Thiện Hải - B19DCPT071 21Đồ án tốt nghiệp Đại học Chương 2 Cơ sở lý thuyết

+ Tích hợp dé dàng: Swagger tích hợp tốt với các framework phát triển web phố

biến như NestJS, Express, và Node.js Nó cung cấp các thư viện và trình phân tích

mã nguồn dé sinh tài liệu API tự động từ mã nguồn ứng dụng.

{+ swagger nntp:/petstore swagger io/v2/swagger json es

Trang 36

Trần Thiện Hải — B19DCPTO71 22

Đồ án tốt nghiệp Đại học Chương 3 Phân tích và thiết kế hệ thống

CHUONG 3 PHAN TÍCH VA THIẾT KE HỆ THONG

3.1 Khảo sát, phân tích sản phẩm, luồng sử dung của người dùng

3.1.1 Mục tiêu của sản phẩm

- Mang đến cho người dung một website đặt tour du lịch với giao diện thân

thiện và đầy đủ các chức năng cơ bản cần thiết phải có

- Tăng trải nghiệm cho người dùng, đặc biệt là trong quá trình tìm kiếm

tour, đặt tour

- Cung cấp cho người dùng các dữ liệu, thông tin về du lịch một cách đầy đủ, chính xác va thực tế

3.1.2 Kiến trúc hệ thống

a Mô hình kiến trúc Client — Server

Hệ thống của em sử dụng mô hình kiến trúc Client — Server Đây là một mô

hình giao tiếp phổ biến giữa các máy tính, gồm một máy chủ (Server) và nhiều

máy khách (Client) kết nối với nhau Máy chủ xử lý yêu cầu từ các máy khách và trả về kết quả tương ứng Điều này giúp tăng tính ổn định, bảo mật va quản lý trong hệ thống Mỗi bên có một vai trò rõ ràng: máy chủ cung cấp dịch vụ hoặc tài nguyên, trong khi máy khách yêu cầu và sử dụng chúng.

Ưu điểm của mô hình kiến trúc này là các truy cập được bảo mật, giúp cho

việc chia sẻ dữ liệu dễ dàng hơn khi ở xa, không phụ thuộc và công nghệ, ngônngữ lập trình, bảo trì dé dàng.

Nhược điểm lớn nhất của mô hình kiến trúc này là sức chịu tải của server

khi có quá nhiều yêu cầu từ nhiều máy khách

- Server: Bao gồm cơ sở dữ liệu và hệ thống cung cấp api được cung cấp

- Client: Giao điện người dùng được xây dựng và các chức năng thé hiện

trên giao diện.

b Phương thức giao tiếp giữa Client — Server

Phương thức giao tiếp giữa Client và Server là cách mà thông tin và yêu cầu được truyền tải giữa hai bên trong kiến trúc Client-Server Hệ thống của em sử dụng phương thức giao tiếp thông qua Web API (Application Programming

V 7

a VU 4 °

liệu), PUT (cập nhật dữ liệu), DELETE (xóa dir liệu), cho phép client va server dễ

Trang 37

dàng giao tiếp, trao đổi thông tin, dir liệu được web api trả lại ở dạng JSON

(Javascript Object Notation) thông qua giao thức HTTPS hoặc HTTP.

Trần Thiện Hải — B19DCPT071 23

Cụ thé trong dé tài "Xây dựng website quảng bá và đặt tour du lich sử dung

ReactJS và NestJS" của em, giao tiếp giữa Client (ReactJS) và Server (NestJS)

sử dụng các công nghệ phé biến cho phương thức giao tiếp giữa Client — Server

như sau:

- RESTful API: Sử dụng RESTful API để xây dựng các endpoint cho việc

quảng bá và đặt tour du lịch Chăng hạn:

+ GET /tours: Lay danh sách các tour

+ GET /tours/:tourld: Lay thông tin chỉ tiết của một tour cụ thé

+ POST /tours: Tạo mới một tour

+ PUT /tours/:tourld: Cập nhật thông tin của một tour

+ DELETE /tours/:tourld: Xóa một tour

- Quản lý Trạng Thái (State Management): Sử dụng Redux va Context API

dé quan lý trang thai của ứng dụng, đặc biệt là khi tương tác với dữ liệu từ

API Khi dữ liệu từ API được nhận, cập nhật trạng thái dé render lại giao

dién nguoi dung.

- Giao Tiếp với Server: Sử dung Axios dé gửi yêu cầu HTTP đến các API

endpoint trên server Xử ly dữ liệu nhận được từ server và cập nhật trang

thái để render lại giao diện.

- API va Endpoint: Xây dựng các API endpoint sử dụng NestJS dé cung cấp dữ liệu và chức năng cho frontend Chang han Endpoint như /api/tours sẽ trả về danh sách các tour.

- Middleware và Logger: Sử dụng middleware dé xử lý yêu cau, ví dụ như xác thực người dùng Logger middleware để ghi log thông tin về các yêu cầu và phản hồi.

- Bảo Mật: Xác thực người dung, sử dung token hoặc session dé dam bảo

chỉ người dùng được ủy quyền mới có thể truy cập các API.

- Truy Cập Cơ Sở Dữ Liệu: Sử dung ORM (ObJect-Relational Mapping)

trong NestJS dé tương tác với cơ sở dữ liệu, ví dụ như TypeORM.

- Docker: Sử dụng Docker đê đóng gói ứng dụng cùng với mọi phụ thuộc

và triển khai đễ dàng trên nhiều môi trường.

Trang 38

Tran Thiện Hải - BI9DCPT071 24Đồ án tốt nghiệp Đại học Chương 3 Phân tích và thiết kế hệ thống

3.1.3 Danh sách các chức năng của hệ thống

Đối với Admin:

- Xem, thêm, sửa, xóa các tour, điểm đến, tin tức du lịch

- Xem danh sách các tour du lịch người dùng đặt

- Xem danh sách các người dùng

- Xem số liệu thống kê Đối với người dùng:

- Đăng nhập, đăng xuất, đăng ký

- Quên và khôi phục mật khâu băng mã OTP

- Xem trang chủ, trang loại tour, trang chỉ tiết từng tour, trang điểm đến,

trang tin tức,

- Lọc tour, tìm kiếm điểm đến, tin tức

- Quản lý thông tin cá nhân- Đặt tour

- Xem tour đã đặt

3.1.4 Danh sách các đối tượng quản lý

- Người dùng ( tên, email, mật khẩu, số điện thoại, địa chỉ, )

- Loại tour ( tour miền Bắc, miền Nam, châu Âu, ) - Tour ( tên, giá, lịch trinh, thời gian, điểm đến )

- Điểm đến ( tên, mô tả, )

- Tin tức du lịch

- Đơn đặt tour

Trang 39

3.1.5 Phân tích luồng sử dụng chính của người dùng

hệ thông bao lỗi

thành công Xem danh sách

chưa có tải khoản

hệ thông báo lỗi

dat tour

kiểm tra va điện cácthông tin cần thiết

thành công

Theo dõi tinh Xác nhận đặt tour Xem chỉ tiết tourtrang tour đã đặt

hệ thông báo lỗi

Hình 3.1 Sơ đồ luồng sử dụng chính của người dùng

3.2 Phân tích, thiết kế hệ thong

3.2.1 Sơ đồ usecase

a Sơ đồ usecase tông quan

Trang 40

Xem danh sách

Xem dach sách tour, tour, điểm đãn, tinđiểm đến, tin tức tức, người dùng

b Sơ đồ usecase về tài khoản

Đăng nhập

Người dùng Admin

Usecase 3.2 Tài khoản

c Sơ đồ usecase về tour