Xây dựng website đặt tour du lịch đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Priority 5 Brief description Hiển thị nội dung của trang chủ cho người dùng chưa đăng nhập truy cập vào đường dẫn tương ứng dẫn đến trang chủ Preconditions Người dùng chưa đăng nhập t

LỜI MỞ ĐẦU

Với sự phát triển bùng nổ của công nghệ thông tin như hiện nay thì việc ứng dụng công nghệ thông tin vào trong quản lý là hết sức cần thiết nhằm đơn giản hóa và nâng cao hiệu suất công việc Chính vì vậy mà sự lớn mạnh của các doanh nghiệp công nghệ thông tin trong nước đã và đang đóng một vai trò vô cùng quan trọng trong sự phát triển kinh tế của nước nhà

Hiện nay, nền kinh tế các nước trên thế giới đang phát triển mạnh mẽ, trong đó có

cả Việt Nam Mức sống, thu nhập của người dân tăng lên, cải thiện rất nhiều theo từng năm Do đời sống vật chất đã đầy đủ, nên phát sinh thêm nhu cầu thoải mái về tinh thần

là điều dễ hiểu Bởi vậy, ngành du lịch trong nước đang ngày càng chiếm tỉ trọng lớn trong cơ cấu nền kinh tế nước ta Tuy nhiên với đặc thù của người du lịch là lần đầu tiên ghé thăm, không có nhiều kinh nghiệm hoặc không biết nhiều về điểm du lịch như vị trí, thời tiết, nơi nghỉ chân và các dịch vụ ăn uống khác Nhưng thay vào đó hầu như vị khách nào cũng sử dụng thiết bị truy cập mạng hoặc các thiết bị thông minh, vì thế việc thiết kế website du lịch trở nên đặc biệt quan trọng đối với mọi doanh nghiệp kinh doanh

du lịch Nhận thấy tiềm năng phát triển và khả năng áp dụng thực tế rất cao, nhóm thực hiện đã tập trung tìm hiểu và thực hiện đề tài “XÂY DỰNG WEBSITE ĐẶT TOUR DU LỊCH”

MỤC LỤC

Chương 1 Tổng quan 1

1.1 Lý do chọn đề tài 1

1.2 Mục đích của đề tài 1

1.3 Quy trình nghiệp vụ và phương pháp tiếp cận 2

1.3.1 Quy trình nghiệp vụ 2

1.3.2 Phương pháp tiếp cận 2

1.4 Khảo sát hiện trạng 3

1.4.1 Website: mytour.vn 3

1.4.2 Website: saigontourist.net 7

Chương 2 Công nghệ áp dụng 11

2.1 ExpressJS Framework 11

2.1.1 ExpressJS là gì? 11

2.1.2 Một vài tính năng nổi bật 11

2.1.3 Các thành phần chính 12

2.2 Công nghệ ReactJS 12

2.2.1 ReactJS là gì? 12

2.2.2 Đặc trưng của ReactJS 13

Chương 3 Phân tích yêu cầu 17

3.1 Lược đồ use case 17

3.2 Thống kê nghiệp vụ cho từng đối tượng 17

3.2.1 Người dùng chưa đăng nhập 17

3.2.2 Người dùng đã đăng nhập 19

3.2.3 Quản trị viên 31

Chương 4 Thiết kế hệ thống 38

4.1 Mô hình kiến trúc 38

4.2 Lược đồ lớp 38

4.3 Lược đồ tuần tự 39

4.3.1 Chức năng “Đăng ký” 39

4.3.2 Chức năng “Đăng nhập” 40

4.3.3 Chức năng “Sửa thông tin cá nhân” 41

4.3.4 Chức năng “Xác nhận email” 42

4.3.5 Chức năng “Thêm tour mới” 43

4.3.6 Chức năng “Tìm kiếm tour” 44

4.3.7 Chức năng “Đánh giá tour” 45

4.3.8 Chức năng “Đặt tour” 46

4.3.9 Chức năng “Thanh toán tour” 47

4.3.10 Chức năng “Xem trang chủ admin” 48

4.3.11 Chức năng “Thống kê” 49

4.4 Physical diagram 50

4.4.1 Mô tả bảng 50

4.4.2 Danh sách chi tiết các bảng 51

Chương 5 Giao diện 61

5.1 Giao diện trang khách 61

5.1.1 Trang chủ 61

5.1.2 Trang đăng ký 66

5.1.3 Trang đăng nhập 67

5.1.4 Trang thông tin cá nhân 68

5.1.5 Trang danh sách tour 69

5.1.6 Trang chi tiết tour 71

5.1.7 Trang chi tiết đặt tour 76

5.1.8 Trang thanh toán momo 78

5.1.9 Trang chi tiết hóa đơn 79

5.1.10 Trang danh sách bài viết 80

5.1.11 Trang chi tiết bài viết 81

5.1.12 Trang lịch sử đặt tour 82

5.2 Giao diện trang quản trị 84

5.2.1 Trang chủ 84

5.2.2 Trang quản lý danh sách booking 86

5.2.3 Trang quản lý danh sách tour 87

5.2.4 Trang thêm tour mới 90

5.2.5 Trang hình ảnh tour 92

5.2.6 Trang lịch trình tour 93

5.2.7 Trang mô tả chi tiết tour 94

5.2.8 Trang quản lý danh sách dịch vụ 96

5.2.9 Trang quản lý danh sách bài viết 97

5.2.10 Trang quản lý danh sách đánh giá 99

5.2.11 Trang thông tin cá nhân 100

Chương 6 Cài đặt và kiểm thử 102

6.1 Deploy 102

6.1.1 Deploy on AWS: back-end (môi trường NodeJS) 102

6.1.2 Deploy front-end (React app với môi trường NodeJS) 105

6.2 Kiểm thử 106

6.2.1 Mục tiêu kiểm thử 106

6.2.2 Kiểm thử trang khách 106

6.2.3 Kiểm thử trang quản trị 135

Chương 7 Kết luận 158

7.1 Kết quả đạt được 158

7.2 Ưu điểm 159

7.3 Nhược điểm 160

7.4 Hướng phát triển 160

TÀI LIỆU THAM KHẢO 161

DANH MỤC CÁC HÌNH

Hình 1.1 Trang chủ website mytour.vn (1) 3

Hình 1.2 Trang chủ website mytour.vn (2) 3

Hình 1.3 Trang chủ website mytour.vn (3) 4

Hình 1.4 Trang chi tiết tour của website mytour.vn (1) 4

Hình 1.5 Trang chi tiết tour của website mytour.vn (2) 5

Hình 1.6 Chức năng tìm kiếm tour của website mytour.vn 5

Hình 1.7 Chức năng đặt tour của website mytour.vn 6

Hình 1.8 Chức năng đăng nhập của website mytour.vn 6

Hình 1.9 Trang chủ phần đầu của website saigontourist.net 7

Hình 1.10 Trang chủ phần các tour mùa hè của website saigontourist.net 7

Hình 1.11 Trang chủ các gói khuyến mãi của website saigontourist.net 8

Hình 1.12 Trang chi tiết tour của website saigontourist.net (1) 8

Hình 1.13 Trang chi tiết tour của website saigontourist.net (2) 9

Hình 1.14 Chức năng tìm kiếm của website saigontourist.net 9

Hình 1.15 Pop-up hỏi người dùng ở khu vực nào của website saigontourist.net 10

Hình 2.1 ExpressJS 11

Hình 2.2 Sơ đồ mô tả các lớp trung gian xử lý HTTP 11

Hình 2.3 ReactJS 12

Hình 2.4 ReactJS – JSX 13

Hình 2.5 Single-way data flow (Luồng dữ liệu một chiều) 14

Hình 2.6 ReactJS – Virtual DOM 14

Hình 2.7 Lợi ích của ReactJS 15

Hình 3.1 Lược đồ use case 17

Hình 4.1 Mô hình kiến trúc 38

Hình 4.2 Lược đồ lớp 38

Hình 4.3 Lược đồ tuần tự “Đăng ký” 39

Hình 4.4 Lược đồ tuần tự “Đăng nhập” 40

Hình 4.5 Lược đồ tuần tự “Sửa thông tin cá nhân” 41

Hình 4.6 Lược đồ tuần tự “Xác nhận email” 42

Hình 4.7 Lược đồ tuần tự “Thêm tour mới” 43

Hình 4.8 Lược đồ tuần tự “Tìm kiếm tour” 44

Hình 4.9 Lược đồ tuần tự “Đánh giá tour” 45

Hình 4.10 Lược đồ tuần tự “Đặt tour” 46

Hình 4.11 Lược đồ tuần tự “Thanh toán tour” 47

Hình 4.12 Lược đồ tuần tự “Xem trang chủ admin” 48

Hình 4.13 Lược đồ tuần tự “Thống kê” 49

Hình 4.14 Physical diagram 50

Hình 5.1 Trang chủ (1) (user) 61

Hình 5.2 Trang chủ (2) (user) 61

Hình 5.3 Trang chủ (3) (user) 62

Hình 5.4 Trang chủ (4) (user) 62

Hình 5.5 Trang chủ (5) (user) 63

Hình 5.6 Trang đăng ký 66

Hình 5.7 Trang đăng nhập 67

Hình 5.8 Trang thông tin cá nhân (user) 68

Hình 5.9 Trang danh sách tour (1) 69

Hình 5.10 Trang danh sách tour (2) 70

Hình 5.11 Trang chi tiết tour (1) 71

Hình 5.12 Trang chi tiết tour (2) 72

Hình 5.13 Trang chi tiết tour (3) 72

Hình 5.14 Trang chi tiết tour (4) 73

Hình 5.15 Trang chi tiết đặt tour 76

Hình 5.16 Trang thanh toán momo 78

Hình 5.17 Trang chi tiết hóa đơn 79

Hình 5.18 Trang danh sách bài viết 80

Hình 5.19 Trang chi tiết bài viết 81

Hình 5.20 Trang lịch sử đặt tour 82

Hình 5.21 Trang chủ (admin) 84

Hình 5.22 Trang quản lý danh sách booking 86

Hình 5.23 Trang quản lý danh sách tour 87

Hình 5.24 Trang thêm tour mới 90

Hình 5.25 Trang hình ảnh tour 92

Hình 5.26 Trang lịch trình tour 93

Hình 5.27 Trang mô tả chi tiết tour 94

Hình 5.28 Trang quản lý danh sách dịch vụ 96

Hình 5.29 Trang quản lý danh sách bài viết 97

Hình 5.30 Trang quản lý danh sách đánh giá 99

Hình 5.31 Trang thông tin cá nhân (admin) 100

Hình 6.1 Giao diện trang lấy thông tin tích hợp MoMo 103

Hình 6.2 Giao diện trang quản lý hostinger 104

Hình 6.3 Giao diện trang quản lý Route53 của AWS 104

DANH MỤC CÁC BẢNG

Bảng 3.1 Đặc tả nghiệp vụ xem trang chủ của người dùng chưa đăng nhập 17

Bảng 3.2 Đặc tả nghiệp vụ đăng ký của người dùng chưa đăng nhập 18

Bảng 3.3 Đặc tả nghiệp vụ đăng nhập của người dùng đã đăng nhập 19

Bảng 3.4 Đặc tả nghiệp vụ xem thông tin của người dùng đã đăng nhập 20

Bảng 3.5 Đặc tả nghiệp vụ sửa thông tin tài khoản của người dùng đã đăng nhập 21

Bảng 3.6 Đặc tả nghiệp vụ xem danh sách tour của người dùng đã đăng nhập 22

Bảng 3.7 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập 23

Bảng 3.8 Đặc tả nghiệp vụ tìm kiếm tour của người dùng đã đăng nhập 25

Bảng 3.9 Đặc tả nghiệp vụ xem chi tiết một tour của người dùng 26

Bảng 3.10 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập 26

Bảng 3.11 Đặc tả nghiệp vụ xem danh sách các tour đã đặt của người dùng đã đăng nhập 28

Bảng 3.12 Đặc tả nghiệp vụ đánh giá tour đã đi của người dùng đã đăng nhập 29

Bảng 3.13 Đặc tả nghiệp vụ xem blog du lịch của người dùng đã đăng nhập 30

Bảng 3.14 Đặc tả nghiệp vụ xem trang quản lý danh sách tour 31

Bảng 3.15 Đặc tả nghiệp vụ thêm tour của quản trị viên 31

Bảng 3.16 Đặc tả nghiệp vụ sửa tour của quản trị viên 32

Bảng 3.17 Đặc tả nghiệp vụ xóa tour của quản trị viên 33

Bảng 3.18 Đặc tả nghiệp vụ sửa lịch trình tour, sửa chính sách tour, sửa mô tả, sửa timeline của quản trị viên 34

Bảng 3.19 Đặc tả nghiệp vụ xem trang quản lý bài viết của quản trị viên 35

Bảng 3.20 Đặc tả nghiệp vụ xem trang thống kê của quản trị viên 36

Bảng 4.1 Mô tả các bảng trong lược đồ cơ sở dữ liệu 50

Bảng 4.2 Mô tả chi tiết bảng Accounts 51

Bảng 4.3 Mô tả chi tiết bảng Evaluates 52

Bảng 4.4 Mô tả chi tiết bảng Images 53

Bảng 4.5 Mô tả chi tiết bảng Timelines 54

Bảng 4.6 Mô tả chi tiết bảng Services 55

Bảng 4.7 Mô tả chi tiết bảng Categories 56

Bảng 4.8 Mô tả chi tiết bảng Orders 56

Bảng 4.9 Mô tả chi tiết bảng Posts 57

Bảng 4.10 Mô tả chi tiết bảng Schedule 58

Bảng 4.11 Mô tả chi tiết bảng Tours 59

Bảng 5.1 Mô tả trang chủ (user) 63

Bảng 5.2 Mô tả trang đăng ký 66

Bảng 5.3 Mô tả trang đăng nhập 67

Bảng 5.4 Mô tả trang thông tin cá nhân (user) 68

Bảng 5.5 Mô tả trang danh sách tour 70

Bảng 5.6 Mô tả trang chi tiết tour 73

Bảng 5.7 Mô tả trang chi tiết đặt tour 76

Bảng 5.8 Mô tả trang thanh toán momo 78

Bảng 5.9 Mô tả trang chi tiết hóa đơn 79

Bảng 5.10 Mô tả trang danh sách bài viết 80

Bảng 5.11 Mô tả trang chi tiết bài viết 81

Bảng 5.12 Mô tả trang lịch sử đặt tour 82

Bảng 5.13 Mô tả trang chủ (admin) 84

Bảng 5.14 Mô tả trang quản lý danh sách booking 86

Bảng 5.15 Mô tả trang quản lý danh sách tour 87

Bảng 5.16 Mô tả trang thêm tour mới 90

Bảng 5.17 Mô tả trang hình ảnh tour 92

Bảng 5.18 Mô tả trang lịch trình tour 93

Bảng 5.19 Mô tả trang mô tả chi tiết tour 94

Bảng 5.20 Mô tả trang quản lý danh sách dịch vụ 96

Bảng 5.21 Mô tả trang quản lý danh sách bài viết 97

Bảng 5.22 Mô tả trang quản lý danh sách đánh giá 99

Bảng 5.23 Mô tả trang thông tin cá nhân (admin) 100

Bảng 6.1 Test case trang thông tin cá nhân (user) 106

Bảng 6.2 Test case của chức năng “Đăng nhập” 108

Bảng 6.3 Test case của chức năng “Đăng ký” 110

Bảng 6.4 Test case trang chủ (user) 113

Bảng 6.5 Test case trang danh sách tour 116

Bảng 6.6 Test case trang chi tiết tour 119

Bảng 6.7 Test case trang đặt tour 123

Bảng 6.8 Test case trang hóa đơn 129

Bảng 6.9 Test case trang tour đã đặt 132

Bảng 6.10 Test case trang cẩm nang du lịch 134

Bảng 6.11 Test case trang chủ (admin) 135

Bảng 6.12 Test case trang quản lý booking 137

Bảng 6.13 Test case trang danh sách tour 140

Bảng 6.14 Test case trang danh sách dịch vụ 146

Bảng 6.15 Test case trang danh sách bài viết 149

Bảng 6.16 Test case trang danh sách đánh giá 153

Bảng 6.17 Test case trang thông tin cá nhân (admin) 156

Chương 1 Tổng quan

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

Trước đây việc kinh doanh bán tour du lịch chỉ đơn thuần là các công việc như quản

lý tour, đặt tour, thống kê doanh thu thông qua giấy tờ và bảng tính excel… Tuy nhiên, đến khi nhu cầu đi du lịch theo tour của khách hàng ngày càng tăng thì việc quản lý bằng giấy tờ không còn hiệu quả, việc quản lý đặt tour, doanh thu sẽ mất nhiều thời gian và thiếu sót Vì thế, hệ thống kinh doanh quản lý bán tour trực tuyến đã được ra đời

Hệ thống bán tour trực tuyến là một phân hệ giúp cho khách hàng có thể đặt tour giữ chỗ và thanh toán trực tuyến Nhờ đó, tiết kiệm rất nhiều thời gian và công sức cho khách hàng mỗi khi có nhu cầu đi du lịch Website du lịch trực tuyến là một thể hiện của hệ thống bán tour trực tuyến

Sự ra đời của hệ thống bán tour trực tuyến đã giúp giảm thiểu hạn chế về không gian

và thời gian rất nhiều giữa việc liên kết bán tour, tăng khả năng quản trị một cách hiệu quả, giảm thiểu thời gian cho nhân viên cũng như ban quản trị, tăng thêm doanh thu bán hàng, góp phần tạo cầu nối gắn kết khách hàng với công ty du lịch, thông qua các kênh thông tin đa chiều với nhiều tiện ích, khách hàng có thể tra cứu các thông tin du lịch trong và ngoài nước trên website mọi lúc mọi nơi

1.2 Mục đích của đề tài

Tìm hiểu ExpressJS, Ant Design, Bootstrap Framework và thư viện ReactJS về cách thức hoạt động, cấu hình và tích hợp vào dự án Từ đó xây dựng một server có độ bảo mật và tốc độ với ExpressJS, một giao diện thân thiện có mức độ trải nghiệm người dùng cao với Ant Design và một Single page load (SPA) với ReactJS

Nhóm chọn đề tài “Xây dựng website đặt tour du lịch” với những mục đích sau:

− Xây dựng một website kinh doanh tour du lịch cho một chủ thể (cá nhân hoặc một doanh nghiệp) để quảng bá tour của họ lên mạng và tiếp cận nhiều người dùng hơn, là kênh trao đổi thông tin giữa người bán và người mua tour

− Tìm hiểu ExpressJS để xây dựng web application

− Tìm hiểu thư viện ReactJS để xây dựng giao diện người dùng

− Tìm hiểu và sử dụng Ant Design

− Nâng cao kỹ năng giải quyết vấn đề, tìm kiếm thông tin, áp dụng các công nghệ mới trong xây dựng và phát triển các tính năng phổ biến về lĩnh vực tour du lịch

1.3 Quy trình nghiệp vụ và phương pháp tiếp cận

1.3.2 Phương pháp tiếp cận

− Cách tiếp cận: Nghiên cứu các trang web đặt tour đã có trên internet

− Sử dụng phương pháp nghiên cứu:

o Phương pháp đọc tài liệu

o Phương pháp phân tích mẫu

o Phương pháp thực nghiệm làm những module nhỏ

1.4 Khảo sát hiện trạng

1.4.1 Website: mytour.vn

Mytour.vn là một trong những ứng dụng đặt phòng trực tuyến hàng đầu Việt Nam Với Mytour.vn, người dùng sẽ tìm kiếm phòng dễ dàng với giá "hạt rẻ", thông tin khách sạn được mô tả rõ ràng, cùng với rất nhiều chương trình khuyến mại [3]

1.4.1.1 Một số hình ảnh

Hình 1.1 Trang chủ website mytour.vn (1)

Hình 1.2 Trang chủ website mytour.vn (2)

Hình 1.3 Trang chủ website mytour.vn (3) 1.4.1.2 Ưu điểm

Hình 1.5 Trang chi tiết tour của website mytour.vn (2)

− Bố cục sắp xếp: Hài hòa, rõ ràng, cách sắp xếp quen thuộc cùng với thông tin cần thiết và chất lượng hình ảnh cao Trải nghiệm người dùng tốt

− Hiệu ứng: Các hiệu ứng không nhiều, đơn giản (chủ yếu là chuyển tiếp và di chuyển ngang, đưa chuột vào sẽ nổi bật lên)

− Dữ liệu sản phẩm: Đầy đủ các thông tin quan trọng và có các thông tin liên quan 1.4.1.2.2 Chức năng

− Tìm kiếm: Có gợi ý tìm kiếm theo từ khóa thu hút

Hình 1.6 Chức năng tìm kiếm tour của website mytour.vn

− Sắp xếp, bộ lọc: Theo khoảng giá, địa điểm, chủ đề

− Đặt tour: Đặt tour qua tổng đài, gửi đơn đặt tour, xem chương trình tour, lịch trình khởi hành, điều khoản chính sách, các dịch vụ đi kèm khác, đánh giá tour

Hình 1.7 Chức năng đặt tour của website mytour.vn

− Đăng nhập: Đăng nhập bằng email đã đăng ký, lưu thông tin người dùng và gợi ý các chuyến đi liên quan

Hình 1.8 Chức năng đăng nhập của website mytour.vn

− Thanh toán: Đặt tour qua tổng đài và gửi đơn đặt tour

− Các chức năng đặc biệt khác: Góp ý website, cẩm nang du lịch, chương trình khuyến mãi, thông báo đến người dùng, chia sẻ và like trên facebook

− Khi nhấn vào điểm đến phổ biến nước ngoài thì chuyển hướng sang trang web

có tên miền khác

1.4.1.3 Nhược điểm

− Không gợi ý search tour theo địa điểm, ngày đi…

− Chưa có chức năng sắp xếp tour tăng, giảm dần theo giá…

− Chưa có phương thức thanh toán thuận tiện

− Chưa có tính năng đặc biệt khác như liên kết Messenger, Zalo…

1.4.2.1 Một số hình ảnh

Hình 1.9 Trang chủ phần đầu của website saigontourist.net

Hình 1.11 Trang chủ các gói khuyến mãi của website saigontourist.net

1.4.2.2 Ưu điểm

1.4.2.2.1 Giao diện

− Tông màu: Tương phản, dịu mắt

− Chi tiết sản phẩm: Mô tả chi tiết về chuyến đi, có hình ảnh tham khảo, lịch trình đầy đủ…

Hình 1.12 Trang chi tiết tour của website saigontourist.net (1)

− Bố cục sắp xếp: Sắp xếp các thông tin dễ nhìn và tìm kiếm, các mục hài hòa

− Hiệu ứng: Hiệu ứng đơn giản, chủ yếu là chuyển tiếp trang, hiệu ứng zoom ảnh

và các slider show bắt mắt

− Dữ liệu sản phẩm: Cung cấp được đầy đủ các thông tin cần thiết của một chuyến

đi và những thông tin liên quan khác

Hình 1.13 Trang chi tiết tour của website saigontourist.net (2)

1.4.2.2.2 Chức năng

− Tìm kiếm: UX tốt – mờ nền, có chọn địa điểm đến, ngày đi, ngày về Kết quả trả

về khá tốt nhưng còn giới hạn số tour

Hình 1.14 Chức năng tìm kiếm của website saigontourist.net

− Sắp xếp: Trang có 3 sự lựa chọn: ngày gần nhất, giá thấp nhất, hấp dẫn nhất

− Đặt tour: Trang có tất cả thông tin chi tiết như giá cả (người lớn, trẻ em, em bé), ngày khởi hành, mã tour, các thông tin hay về tour, chức năng in chương trình

tour, lịch trình rõ ràng, hình ảnh nhiều, chính sách tour, các câu hỏi thường gặp, dịch vụ đi kèm và các tour liên quan

− Đăng nhập giúp lưu thông tin chuyến đi và nâng cấp tài khoản, đồng thời giúp đặt tour nhanh hơn ở lần sau

− Hỗ trợ khách hàng: hotline, trả lời thắc mắc qua email và chatbot (đa ngôn ngữ)

1.4.2.3 Nhược điểm

− Pop-up ở hình dưới luôn xuất hiện khi chuyển tới bất kỳ trang nào và khi người dùng xác nhận hoặc tắt mới biến mất

Hình 1.15 Pop-up hỏi người dùng ở khu vực nào của website saigontourist.net

− Chưa có chức năng đánh giá chuyến đi, điều này sẽ không giúp cho người dùng

có cái nhìn tổng quan hoặc kinh nghiệm đi tour của người dùng trước

2.1.2 Một vài tính năng nổi bật

Hình 2.2 Sơ đồ mô tả các lớp trung gian xử lý HTTP

− Thiết lập router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL

− Cho phép trả về các trang HTML dựa vào các tham số với template engines

− Hiệu suất cao, super-high test coverage

− HTTP helpers (redirection, caching, etc)

− Tạo ứng dụng nhanh chóng

− Thiết lập các lớp trung gian để tiếp nhận và trả về các HTTP request (như hình dưới)

2.1.3 Các thành phần chính

− Express (): một Express application, là hàm đầu tiên được gọi

− Application: một app object, có những phương thức để: Routing HTTP requests,

Cấu hình middleware, Rendering HTML views, đăng ký một template engine

− Request: Đối tượng req đại diện cho HTTP request và có các thuộc tính cho

request query string, parameters, body, HTTP headers… Đây là một phiên bản nâng cao Node’s request

− Response: Đối tượng res đại diện cho HTTP response mà ứng dụng Express gửi

khi nhận được HTTP request

− Router: Một đối tượng bộ định tuyến là một phiên bản riêng biệt của middleware

và routes Nó như là một ứng dụng nhỏ, chỉ có khả năng thực hiện các chức năng định tuyến và middleware Mỗi ứng dụng Express đều có bộ định tuyến ứng dụng tích hợp

2.2 Công nghệ ReactJS

2.2.1 ReactJS là gì?

Hình 2.3 ReactJS

ReactJS được hiểu nôm na là một thư viện trong đó có chứa nhiều JavaScript mã nguồn mở và cha đẻ của ReactJS đó chính là một ông lớn với cái tên ai cũng biết đó chính

là Facebook Mục đích của việc tạo ra ReactJS là để tạo ra những ứng dụng website hấp dẫn với tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu Và mục đích chủ chốt của ReactJS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh, có khả năng mở rộng cao và đơn giản thực hiện

Nhìn chung tất cả những tính năng hay sức mạnh của ReactJS thường xuất phát từ việc tập trung vào các phần riêng lẻ chính vì điểm này nên khi làm việc trên web thay vì

nó sẽ làm việc trên toàn bộ ứng dụng của website thì ReactJS cho phép developer có chức năng phá vỡ giao diện của người dùng từ một cách phức tạp và biến nó trở thành các phần đơn giản hơn nhiều lần có nghĩa là render dữ liệu không chỉ được thực hiện ở vị trí server

mà còn có thể thực hiện ở vị trí client khi sử dụng ReactJS [2]

2.2.2 Đặc trưng của ReactJS

2.2.2.1 JSX

Hình 2.4 ReactJS – JSX

Trong React, thay vì thường xuyên sử dụng JavaScript để thiết kế bố cục trang web thì sẽ dùng JSX JSX được đánh giá là sử dụng đơn giản hơn JavaScript và cho phép trích dẫn HTML cũng như việc sử dụng các cú pháp thẻ HTML để render các subcomponent JSX tối ưu hóa code khi biên soạn, vì vậy nó chạy nhanh hơn so với code JavaScript tương đương

2.2.2.2 Redux

Hình 2.5 Single-way data flow (Luồng dữ liệu một chiều)

ReactJS không có những module chuyên dụng để xử lý data, vì vậy ReactJS chia nhỏ view thành các component nhỏ có mối quan hệ chặt chẽ với nhau Tại sao chúng ta phải quan tâm tới cấu trúc và mối quan hệ giữa các component trong ReactJS? Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu một chiều từ cha xuống con Việc ReactJS sử dụng one-way data flow có thể gây ra một chút khó khăn cho những người muốn tìm hiểu và ứng dụng vào trong các dự án Tuy nhiên, cơ chế này sẽ phát huy được ưu điểm của mình khi cấu trúc cũng như chức năng của view trở nên phức tạp thì ReactJS sẽ phát huy được vai trò của mình

2.2.2.3 Virtual DOM

Hình 2.6 ReactJS – Virtual DOM

Những Framework sử dụng Virtual-DOM như ReactJS khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự

thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding Điều này làm cho tốc độ ứng dụng tăng lên đáng kể – một lợi thế không thể tuyệt vời hơn khi sử dụng Virtual-DOM

2.2.2.4 Lợi ích khi sử dụng ReactJS

Hình 2.7 Lợi ích của ReactJS

Lợi ích đầu tiên: tạo ra cho chính bản thân một DOM ảo, đây là nơi mà các component được tồn tại trên đó Việc tạo ra DOM như vậy giúp cải thiện hiệu suất làm việc rất nhiều, khi có tính toán cần thay đổi hoặc cần cập nhật những gì lên DOM thì ReactJS đều tính toán trước và việc còn lại chỉ là thực hiện chúng lên DOM, làm như vậy sẽ giúp cho ReactJS tránh được những thao tác cần có trên một DOM mà không cần tốn thêm bất cứ chi phí nào

Lợi ích thứ hai: viết các đoạn code JS sẽ trở nên dễ dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này cho phép ta trộn giữa code HTML và Javascript Ngoài ra còn có thể đem đoạn code thêm vào trong hàm render mà không cần phải thực hiện việc nối chuỗi và được đánh giá là một trong những đặc tính thú vị của ReactJS và việc chuyển đổi các đoạn HTML thành các hàm khởi động đều được thực hiện từ bộ biến đổi chính đó chính là JSX

Có nhiều công cụ phát triển là lợi ích tiếp theo của ReactJS Khi bắt đầu một ReactJS đừng quên cài đặt thêm ứng dụng mở rộng của Chrome chuyên dành cho ReactJS vì nó

sẽ giúp debug code một cách dễ dàng hơn, khi đã cài đặt nó xong bạn sẽ có một cái nhìn trực tiếp vào Virtual Dom và lúc đó cũng đồng nghĩa với việc là bạn đang xem một cây DOM thông thường vậy

Thân thiện với SEO: dưới sự hỗ trợ của các render và trả về trình duyệt dưới dạng web page khi mà chạy ReactJS trên server và các Virtual Dom giúp cho React có thể đáp ứng đầy đủ được tính SEO Friendly

Chương 3 Phân tích yêu cầu

3.1 Lược đồ use case

Hình 3.1 Lược đồ use case

3.2 Thống kê nghiệp vụ cho từng đối tượng

3.2.1 Người dùng chưa đăng nhập

Là tất cả những đối tượng chưa đăng nhập vào hệ thống và sử dụng ứng dụng web này để thực hiện đăng ký tài khoản, đặt tour du lịch, xem danh sách các tour, tìm kiếm tour, xem danh sách blog, tìm kiếm blog

Bảng 3.1 Đặc tả nghiệp vụ xem trang chủ của người dùng chưa đăng nhập

Code specified U-XTC

Use case name Xem trang chủ

Priority 5

Brief description Hiển thị nội dung của trang chủ cho người dùng chưa đăng nhập truy

cập vào đường dẫn tương ứng dẫn đến trang chủ

Preconditions Người dùng chưa đăng nhập truy cập vào đường dẫn đến trang chủ

Post-conditions Nội dung của website được hiển thị đầy đủ lên trình duyệt

Actor(s) Người dùng chưa đăng nhập

Secondary actor Người dùng đã đăng nhập, Người quản trị

Trigger Người dùng chưa đăng nhập truy cập vào đường dẫn tương ứng với

trang chủ

Main scenario Step Action

1 Hệ thống nhận request từ trình duyệt

2 Hệ thống trả dữ liệu của trang chủ cho trình duyệt

Extensions Step Branching Action

Bảng 3.2 Đặc tả nghiệp vụ đăng ký của người dùng chưa đăng nhập

Code specified U-DK

Use case name Đăng ký

Brief description Người dùng chưa đăng nhập tiến hành đăng ký tài khoản cho mình,

hệ thống kiểm tra và lưu trữ tài khoản vào database

Preconditions Người dùng chưa đăng nhập truy cập đường dẫn đến trang đăng ký

Post-conditions Người dùng chưa đăng nhập đăng ký tài khoản thành công Hệ thống

thông báo cho khách đăng ký thành công và gợi ý đến trang đăng nhập

Actor(s) Người dùng chưa đăng nhập

Secondary actor Không

Trigger Người dùng chưa đăng nhập đã chọn đăng ký

Main scenario Step Action

1 Hệ thống trả về form đăng ký cho khách

2 Người dùng chưa đăng nhập nhập thông tin tài khoản theo

yêu cầu (username, email, phone, password)

3 Hệ thống kiểm tra dữ liệu nhập vào từ form có hợp lệ không

4 Hệ thống trả về kết quả đăng ký

Extensions Step Branching Action

3.1 Nếu không hợp lệ đưa ra thông báo đến khách, yêu cầu nhập

lại thông tin

Open issues 4 Hệ thống gợi ý khách đến trang đăng nhập

3.2.2 Người dùng đã đăng nhập

Là tất cả những đối tượng đã đăng nhập vào hệ thống và sử dụng ứng dụng web này

để thực hiện đặt các tour du lịch, xem các thông tin về tour du lịch và blog liên quan Tiến hành đặt tour, xem lịch trình tour du lịch, bình luận, đánh giá tour và đăng xuất

Bảng 3.3 Đặc tả nghiệp vụ đăng nhập của người dùng đã đăng nhập

Code specified U-DN

Use case name Đăng nhập

Brief description Người dùng đăng nhập vào hệ thống bằng email và password, cookie

được khởi tạo và trang web hiển thị trạng thái đã đăng nhập (avatar hiện lên ở header thay cho chữ “sign in”)

Preconditions

Post-conditions Hệ thống ghi nhận người dùng đã đăng nhập và hiển thị các chức

năng hợp lệ với user, các chức năng liên quan: mua tour, bình luận, các hóa đơn và dữ liệu khách trước đó được lưu vào user vừa đăng nhập

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng nhấn vào các button hoặc link dẫn đến trang đăng nhập

Main scenario Step Action

1 Người dùng nhập thông tin login (email, password và tùy

chọn ghi nhớ)

2 Hệ thống hiển thị trạng thái chờ và xử lý nghiệp vụ

3 Hệ thống hiển thị kết quả của nghiệp vụ

Extensions Step Branching Action

3.1 Nếu thông tin đăng nhập có email không hợp lệ thì trả về

thông báo không tồn tại email trong hệ thống dữ liệu 3.2 Nếu password sai với email tương ứng thì trả về thông báo

password không đúng 3.3 Nếu thông tin đăng nhập thành công thì chuyển về trang chủ

và hiển thị avatar ở header thay cho chữ “sign in” Hệ thống lưu token ở trong cookie mà back-end gửi lên

Open issues 4 Hệ thống gợi ý người dùng đến trang đăng nhập và trang chủ

Bảng 3.4 Đặc tả nghiệp vụ xem thông tin của người dùng đã đăng nhập

Code specified U-XTK

Use case name Xem thông tin tài khoản

Brief description Người dùng xem các thông tin của họ được hiển thị dưới dạng

drawer (right), các thông tin cá nhân và đơn hàng, tour, và họ có thể chỉnh sửa thông tin ngay trên drawer này

Preconditions Người dùng đã đăng nhập vào hệ thống

Post-conditions Thông tin tài khoản không thay đổi gì so với lúc ban đầu drawer

được hiển thị

Actor(s) Người dùng đã đăng nhập

Secondary actor Quản lý

Trigger Người dùng hover vào [avatar] ở thanh navigation

Main scenario Step Action

1 Người dùng chọn [profile] trong dropdown của [avatar]

2 Hệ thống kiểm tra tính hợp lệ của phiên và hiển thị thông tin

của người dùng dưới dạng là drawer (bên phải)

Extensions Step Branching Action

2.1 Nếu token không hợp lệ thông báo lỗi cho client Front-end

xóa token và cookie hiện tại và chuyển đến trang đăng nhập

Bảng 3.5 Đặc tả nghiệp vụ sửa thông tin tài khoản của người dùng đã đăng nhập

Code specified U-STTTK

Use case name Sửa thông tin tài khoản

Brief description Khi người dùng chọn chức năng sửa tài khoản, người dùng điền vào

thông tin muốn chỉnh sửa, hệ thống nhận thông tin thay đổi và lưu trữ vào database

Preconditions Người dùng đã đăng nhập vào hệ thống

Post-conditions Thông tin tài khoản thay đổi thành công

Actor(s) Người dùng đã đăng nhập

Secondary actor Quản lý

Trigger Người dùng đã chọn sửa tài khoản

Main scenario Step Action

1 Hệ thống hiển thị form nhập liệu với những thông tin tài

khoản của người dùng tương ứng với phiên đăng nhập

2 Người dùng nhập liệu các thông tin muốn thay đổi

3 Hệ thống kiểm tra các thông tin nhập hợp lệ hay không

4 Hệ thống lưu trữ các thông tin và trả về thông tin mới đồng

thời thông báo thành công cho người dùng

Extensions Step Branching Action

3.1 Nếu không hợp lệ thì thông báo đến người dùng và yêu cầu

người dùng nhập lại thông tin

Bảng 3.6 Đặc tả nghiệp vụ xem danh sách tour của người dùng đã đăng nhập

Code specified U-XDMT

Use case name Xem danh mục tour

Brief description Người dùng truy cập và trang danh mục tour, các mục trong hero

menu hoặc sử dụng chức năng tìm kiếm tại trang chủ sẽ hiển thị trang danh mục tour Danh sách tour được hiển thị theo ngày khởi hành gần nhất hoặc theo kết quả tìm kiếm mà server trả về

Preconditions Không

Post-conditions Không

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng truy cập vào link dẫn tới trang danh mục tour

Main scenario Step Action

1 Hệ thống gửi yêu cầu lấy dữ liệu theo param tại trình duyệt

2 Hệ thống tính toán và hiển thị tour theo điều kiện sắp xếp và

lọc

Extensions Step Branching Action

2.1 Nếu không có sản phẩm hiển thị dòng chữ “Chưa có dữ liệu

phù hợp” và trạng thái chờ dữ liệu

Bảng 3.7 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập

Code specified U-TTT

Use case name Thanh toán tour

Brief description Người dùng chọn hình thức thanh toán online ở bước 3 của đặt tour

Người dùng tiến hành thanh toán với cổng thanh toán đã chọn, hệ thống hiển thị kết quả trả về

Preconditions Người dùng đã hoàn thành bước 2 của đặt tour (mã đặc tả:

14-U-DT)

Post-conditions

Actor(s) Người dùng đã đăng nhập

Secondary actor Cổng thanh toán

Trigger Người dùng nhấn [Thanh toán ngay] của một trong các cổng thanh

toán

Main scenario Step Action

1 Người dùng chọn hình thức thanh toán

2 Người dùng chọn một trong số các cổng thanh toán và

chọn [Thanh toán ngay]

3 Hệ thống chuyển dữ liệu thanh toán tới trang của cổng

thanh toán tương ứng

4 Người dùng tiến hành thanh toán với các yêu cầu của

cổng thanh toán (nhập thông tin thẻ) và tiến hành xác nhận thanh toán

5 Hệ thống hiển thị kết quả thanh toán cho người dùng

Extensions Step Branching Action

3.1 Nếu người dùng chọn thanh toán chuyển khoản và chọn

[done], hệ thống chuyển tới trang kết quả đơn hàng đang được chờ thanh toán và hiển thị mã PIN cho người dùng lưu lại

5.1 Nếu người dùng chọn hủy thanh toán hệ thống hiển thị

lại trang thanh toán ở bước 1 – xác nhận tour muốn mua

Open issues Hệ thống gửi mail xác nhận đã thanh toán đơn hàng với

mã PIN tương ứng cho người dùng

Cổng thanh toán gửi mail xác nhận cho người dùng Trang kết quả thanh toán có điều hướng về trang chủ

Bảng 3.8 Đặc tả nghiệp vụ tìm kiếm tour của người dùng đã đăng nhập

Code specified U-TKT

Use case name Tìm kiếm tour

Brief description Người dùng đang ở trang chủ hoặc trang danh mục sản phẩm, nhập

dữ liệu tìm kiếm và chọn các tùy chọn tìm kiếm: ngày dự định đi từ ngày nào đến ngày nào, tìm kiếm theo (địa chỉ, địa danh, tên tour, loại tour)

Preconditions Không

Post-conditions Không

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng đang ở một trong các trang: trang chủ, trang danh mục

tour, và nhấn [Tìm kiếm Tour]

Main scenario Step Action

1 Người dùng nhập dữ liệu muốn tìm kiếm, chọn các tùy chọn

tìm kiếm: ngày dự định đi từ ngày nào đến ngày nào và chọn các tùy chọn tìm kiếm: tên tour, địa chỉ, địa danh, loại tour

2 Hệ thống hiển thị danh mục tour theo điều kiện tương ứng

Extensions Step Branching Action

Open issues Nếu dữ liệu tìm kiếm không có gợi ý người dùng đến các kết

quả tìm kiếm có dữ liệu nhiều hơn

Bảng 3.9 Đặc tả nghiệp vụ xem chi tiết một tour của người dùng

Code specified U-XCTT

Use case name Xem chi tiết một tour

Brief description Người dùng muốn xem thông tin chi tiết của một tour Và người

dùng nhấn vào hình ảnh hoặc tiêu đề của tour, hoặc nút [Xem chi tiết] tại một tour bất kỳ

Preconditions Không

Post-conditions Không

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng nhấn vào hình ảnh, tiêu đề của tour, hoặc nút [Xem chi

tiết] tại một tour bất kỳ

Main scenario Step Action

1 Người dùng nhấn vào ảnh hoặc tiêu đề của tour

2 Hệ thống hiển thị trang chi tiết tour tương ứng với tour mà

người dùng chọn

Extensions Step Branching Action

Bảng 3.10 Đặc tả nghiệp vụ thanh toán tour của người dùng đã đăng nhập

Code specified U-TTT

Use case name Thanh toán tour

Brief description Sau khi người dùng chọn được tour ưng ý, họ tiến hành đặt tour, hệ

thống hiển thị trang với 3 bước:

Xác nhận lại tour muốn đặt Nhập thông tin cần thiết để hệ thống tính toán chi phí Người dùng chọn hình thức thanh toán: thanh toán online hoặc chuyển khoản

Preconditions Không

Post-conditions Thông tin hóa đơn được gửi cho người dùng qua email họ nhập,

hiển thị kết quả thanh toán đối với thanh toán online và hiển thị mã PIN để họ lưu trữ lại

Actor(s) Người dùng đã đăng nhập

Secondary actor Quản lý, cổng thanh toán

Trigger Người dùng chọn [Thanh toán ngay] của tour họ muốn tiến hành

thanh toán

Main scenario Step Action

1 Người dùng nhấn vào [Thanh toán ngay]

2 Hệ thống chuyển hướng đến trang thanh toán với 3 bước

3 Người dùng xác nhận thông tin và chọn next

4 Hệ thống hiển thị trang form cho người dùng nhập các

thông tin cần thiết: tên, email, số điện thoại, địa chỉ, số người lớn, số trẻ em, đồng ý với điều khoản và chính sách

5 Người dùng nhập các thông tin và chọn [Xác nhận thông

tin là chính xác]

6 Hệ thống thông báo cho người dùng và yêu cầu đến bước

tiếp theo

7 Người dùng chọn hình thức thanh toán và tiến hành thanh

toán

8 Hệ thống hiển thị kết quả đặt tour cho người dùng

Extensions Step Branching Action

8.1 Nếu người dùng chọn thanh toán chuyển khoản và chọn

[done], hệ thống chuyển tới trang kết quả đơn hàng đang được chờ thanh toán và hiển thị mã PIN cho người dùng lưu lại

8.2 Nếu người dùng chọn hủy thanh toán hệ thống hiển thị

lại trang thanh toán ở bước 1 – xác nhận tour muốn mua

Open issues Hệ thống gửi mail xác nhận đã thanh toán đơn hàng với

mã PIN tương ứng cho người dùng

Bảng 3.11 Đặc tả nghiệp vụ xem danh sách các tour đã đặt của người dùng đã đăng

nhập

Code specified U-XDSTDD

Use case name Xem danh sách tour đã đặt

Brief description Người dùng muốn xem tour mà họ đã đặt, hệ thống hiển thị danh

sách tour đã đặt dưới dạng drawer

Preconditions Không

Post-conditions Không

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng hover vào “Tên người dùng” ở thanh navigation

Main scenario Step Action

1 Người dùng chọn [Danh sách tour đã đặt] trong dropdown

của “Tên người dùng”

2 Hệ thống kiểm tra người dùng có đăng nhập không và hiển

thị dữ liệu tour đã đặt

Extensions Step Branching Action

2.1 Nếu token không hợp lệ thông báo lỗi cho client Front-end

xóa token và cookie hiện tại và chuyển đến trang đăng nhập 2.2 Nếu người người dùng chưa đăng nhập, lấy dữ liệu được lưu

ở local storage

Bảng 3.12 Đặc tả nghiệp vụ đánh giá tour đã đi của người dùng đã đăng nhập

Code specified U-DGT

Use case name Đánh giá tour đã đi

Brief description Hệ thống gửi mail cho người dùng đến trang đánh giá khi tour kết

thúc Người dùng đánh giá mức độ hài lòng của mình hoặc bỏ qua

Preconditions Người dùng đã đặt tour và thời gian tour đã kết thúc

Post-conditions Không

Actor(s) Người dùng đã đăng nhập

Secondary actor Không

Trigger Người dùng nhấn vào link mà hệ thống gửi yêu cầu đánh giá tour

sau thời gian tour kết thúc

Main scenario Step Action