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

Chương nay mô ta về hệ thống của dé tai, các chứcnă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ệ

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

D19PTDPT

2019 - 2023

ĐẠI HỌC CHÍNH QUY

HÀ NỘI - 2023

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 trongphá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.

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)

Đồ á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ầyTrầ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ạitrườ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ứucủ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ũngkhô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

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

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 5 2.1.1 Html ( HyperText Markup Language) -++++s+ 5 2.1.2 CSS (Cascading Style Sheets) Là nh re 5 2.2 [s0 DƯ 5

2.2.1 Kad MiG 5

”50/0: 00 0Ẽ7Ẽ70 na 5

2.2.3 Ưu điỂm -25: 22t 21221122112221122112211121112111211120121.1 re 6 2.3 vo ẢẢ 6

2.4 Ant DeSi ››jÀaẳdẦỒŨỮ 7

P90 0 7

2.5.1 Kut MiG na à 7

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

2.6.1 TONG QUAM 10

2.6.2 COMPONEMNES ce e lãi “mm: 11

2.6.4 Cac sự kiện và xử lý sự KiG0 eee eee ecceeeceeeceeeneeeeeeeeeeenseeeseeeeseteeeeees 11 2.6.5 React ÑOUf€T- G HH TH TH kh 12 2.6.6 cố 12

P.8 vo 1n 13

2.7 cóc Art 13

Trần Thiện Hải — BI9DCPT071 ii

“s20 4A 20

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 233.1.3 Danh sách các chức năng của hệ thống - 2 ¿©5z+s+2x+sze: 253.1.4 Danh sách các đối tượng quản lý 2 +2x+E+xe£zxzxzxzreree 253.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 53 4.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

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

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 704.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

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 47 Hì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+ 50 Hì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 54Hì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 56 Hì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 58Hình 4.19 Giao diện trang chỉ tiẾt tOuT ¿+ 2-5 +x+EE+E£EE+E£EEEEEEEEErErkerereree 59Hình 4.20 Giao diện trang chỉ tiẾt tOU :- 2-52 ©5222222++EEEEzEeEtzxrxerszee 59Hình 4.21 Giao diện trang chi tiết điểm đến 5- 2-52 Ss+E+E£E2E£EzEzEerree 60Hì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 61 Hì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 63 Hình 4.27 Giao diện đăng nhập Paypal . - Sc 3+ 3112 3xx xykserveg 64

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

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

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 66 Hình 4.31 Bảng cơ sở dữ liệu TOUT- c2 22c 33211122 E%5EEEEEEereervke 67 Hì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 74Hình 4.38 API về Tours -csc- 22 222 treo 74

Hình 4.39 API về Destinations -¿- 2-52 2222E22E2E2221271211212121121 2121 xe 75Hình 4.40 API về Tour Types -¿- 2-52 S22S22E22E12E12121715E12171111E1 1E re 75Hì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

Scenario 3.2 Đăng nhập - - - - 1 121211112211 11111 1111011111111 1n ng ng 1k re 30

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 33Scenario 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 34Scenario 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 37Scenario 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 38 Sequence 3.1 Dang KY eee eee aa 39 Sequence 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, 40Sequence 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

Đô á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

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ậntì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, đốitượ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ôngnghệ, 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ứcnă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à

database.

Trần Thiện Hải - BI9DCPT071

Đồ 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àiTê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ó nhucầ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 tourtrự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ựngmộ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áttriể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ảitố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ángtạ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, đặttour 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ínhbao 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 tourhấ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

+ 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é

đàng.

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ôngnghệ 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ìmkiếm thông tin mong muốn

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

+ 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ụngTypeScript, 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ànhphầ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, ứngdụng, bao gồm giai đoạn nghiên cứu, phân tích các chức năng, các đốitượng cần quản lý, xác định, vẽ lên được sơ đồ hoạt động của của chức

năng.

- 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ươngpháp lập trình sẽ được nghiên cứu cụ thé về ưu nhược điểm và lý do sử

dụng.

- 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 độngtố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ài bao 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

Đồ á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

nay.

Tran Thiện Hai - BI9DCPT071 4

Đồ á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ạnvă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ácthuộ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ụngthẻ 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ênkế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ácphầ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

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 (Asynchronous JavaScript and XML) hoặc các phương thức như Fetch API, JavaScript giú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ầuHTTP 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')

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âydự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ờigian 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âydự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áng, và JavaScript thêm chức năng tương tác.

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ểmMộ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, formshandling, 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

Tran Thiện Hải - B19DCPTO71 8 D6 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ợpgradualmente 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

cao.

- 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ôngqua 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 ứngdụ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 over Configuration" đê 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.

Tran Thiện Hải - BI9DCPT071 9

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

- 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

web.

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ườidù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.

Tran Thiện Hải - BI9DCPT071 10

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

- Thư viện Hỗ trợ Mạnh Mé: Có một cộng đồng lớn và phong phú, hỗ trợ bởinhiề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à đặttour 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 đồingườ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.

Tran Thiện Hải - B19DCPTO71 11 D6 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êmthô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ó chophé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

web.

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é đảmbả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 haykhô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 URLhiện tại khớp với nó; component={ }: xác định component mà sẽ được hiểnthị 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ụ:

<Route path="/blog/:id" component={BlogDetail} />

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ụng trạ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,

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à

useParams.

- useState: useState cho phep su dung va quan ly trang thai trong functional

components 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ừ

URL.

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ó chophé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ácnhau 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úptă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à

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

Tran Thiện Hải - BI9DCPT071 13

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

- Bao mat: Backend chịu trách nhiệm đảm bảo rằng dữ liệu được xử lý và lưutrữ 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ụngweb nhanh chóng và linh hoạt Nó tuân thủ nguyên tắc "batteries-included," đi kèmvớ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áttriển và mang lại trải nghiệm dé sử dụng cho lập trình viên

Tran Thiện Hải - BI9DCPT071 14

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

Đặ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õ

ràng.

- 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âydự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ộtmô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à

API.

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

hơn.

- 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

Tran Thiện Hải - BI9DCPT071 15

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

Đặ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 OOPgiú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ô-đungiúp phân chia ứng dụng thành các thành phan độc lập Dependency injection giúpquả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 ứngdụ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.

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 ứngdụng NestJS chứa ít nhất một module gốc (root module), va module này có thé chứacá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 ứngtrong 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

tap.

- 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ứctạ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.

Tran Thiện Hải - BI9DCPT071 17

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

- 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

migrations.

- 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 repositorytrong 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ỉ địnhloạ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

Tran Thiện Hải - BI9DCPT071 18

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

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

brute-force.

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

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à JWT Khá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

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

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

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ôngtin 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ó

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

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áttriể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ớiTypeScript, 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ấptài liệu chi tiết về mã nguồn

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

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ì.

Tran Thiện Hải - BI9DCPT071 20

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

- 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áncủ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âydự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êndị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ềunà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.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ảnhồ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.

+ 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

Swagger PetstoreTM

Terms of service

leveloper Apache 2.0

Find out more about Swagger

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àinguyê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ôn ngữ 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êucầ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ễ

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

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

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êucầ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

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

Tran Thiện Hải - BI9DCPT071 25

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

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

hệ thông báo lỗi

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

Đồ án tốt nghiệp Đại học Chương 3 Phân tích và thiết kế hệ thố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