Xây dựng website đặt khách sạn sử dụng golang và vuejs

Nhận thức được thực tiễn ấy và mong muốn góp phần giúp cho những doanh nghiệp lĩnh vực du lịch và dịch vụ có được một ứng dụng phục vụ cho nhu cầu của mình, nhóm chúng em quyết định chọn

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE ĐẶT KHÁCH SẠN SỬ DỤNG GOLANG VÀ VUEJS

GVHD: TS LÊ VĂN VINH SVTH : TRẦN KIỆN KHANG HOÀNG HỮU ĐỨC

S KL0 1 1 2 3 2

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM

KHOA CÔNG NGHỆ THÔNG TIN

KHOÁ LUẬN TỐT NGHIỆP

Giảng viên hướng dẫn:

TS Lê Văn Vinh Sinh viên thực hiện:

Trần Kiện Khang 19110375 Hoàng Hữu Đức 19110349

TP Hồ Chí Minh, tháng 07 năm 2023

ĐỀ TÀI: XÂY DỰNG WEBSITE ĐẶT KHÁCH SẠN SỬ

DỤNG GOLANG VÀ VUEJS

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

Tp Hồ Chí Minh, ngày 13 tháng 2 năm 2023

NHIỆM VỤ TIỂU LUẬN CHUYÊN NGÀNH

Họ và tên sinh viên:

Giảng viên hướng dẫn: TS Lê Văn Vinh

Ngày nhận đề tài: 13/02/2023 Ngày nộp đề tài: 17/07/2023

1 Tên đề tài: Xây dựng website đặt khách sạn sử dụng Golang và VueJS

2 Các số liệu, tài liệu ban đầu: Khảo sát hiện trạng qua những website đặt chỗ phổ biến ngày nay

3 Nội dung thực hiện đề tài:

- Xây dựng một trang web đặt phòng và bán phòng

- Xây dựng một trang quản trị có phân quyền người bán phòng, nhân viên và quản trị viên thực hiện các chức năng với quyền hạn tương ứng

4 Sản phẩm đạt được: Website đặt khách sạn thân thiện dễ dàng sử dụng

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

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

Họ và tên sinh viên:

Ngành: Công Nghệ Thông Tin

Tên đề tài: Xây dựng website đặt khách sạn sử dụng Golang và VueJS

Giảng viên hướng dẫn: TS Lê Văn Vinh

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm: (Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2023

Giảng viên hướng dẫn (Ký & ghi rõ họ tên)

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên sinh viên:

Ngành: Công Nghệ Thông Tin

Tên đề tài: Xây dựng website đặt khách sạn sử dụng Golang và VueJS

Giảng viên phản biện: ThS Trương Thị Ngọc Phượng

NHẬN XÉT

1 Về nội dung đề tài và khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 2023

Giảng viên phản biện (Ký & ghi rõ họ tên)

LỜI CẢM ƠN

Để hoàn thiện được bản báo cáo Khoá luận tốt nghiệp trước tiên nhóm thực hiện báo

cáo xin gửi đến thầy Lê Văn Vinh lời cảm ơn chân thành vì đã đồng hành và hướng dẫn

sinh viên thực hiện chuyên đề này

Nhóm thực hiện báo cáo xin bày tỏ lòng biết ơn đến ban lãnh đạo của Trường Đại

học Sư phạm Kỹ thuật TPHCM và Khoa Công nghệ thông tin đã tạo cho sinh viên có cơ

hội được trao dồi, học tập và phát triển nền tảng vững chắc để thực hiện chuyên đề này

Nhờ có những kiến thức nền tảng, kết hợp với những kinh nghiệm tích lũy được

trong quá trình làm việc ở các công ty Tập thể thầy cô Khoa công nghệ thông tin tận tâm

trong quá trình giảng dạy, đặc biệt là thầy Lê Văn Vinh cho đem đến cho nhóm thực hiện

báo cáo những kiến thức và kinh nghiệm vững chắc về chuyên ngành và công việc tương

lai sau này

Vì kiến thức bản thân còn nhiều hạn chế, hoàn thiện chuyên đề này nhóm thực hiện

báo cáo không tránh khỏi những sai sót, kính mong nhận được những ý kiến đóng góp từ

quý thầy (cô) để xem xét lại và hoàn thiện sản phẩm hơn, cũng như hoàn thiện bản thân

hơn

Nhóm thực hiện báo cáo chân thành cảm ơn !

Nhóm thực hiện

Trần Kiện Khang – 19110375 Hoàng Hữu Đức - 19110349

MỤC LỤC

LỜI CẢM ƠN 1

MỤC LỤC 2

DANH MỤC HÌNH ẢNH 5

DANH MỤC BẢNG BIỂU 9

PHẦN MỞ ĐẦU 13

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 13

2 ĐỐI TƯỢNG NGHIÊN CỨU 13

3 PHẠM VI NGHIÊN CỨU 14

4 KHẢO SÁT CÁC ỨNG DỤNG CÓ LIÊN QUAN 14

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 19

5.1 Phía khách hàng 19

5.2 Phía nhân viên, quản lý, chủ khách sạn 20

5.3 Phía quản trị viên 20

PHẦN NỘI DUNG 22

Chương 1 CƠ SỞ LÝ THUYẾT 22

1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA BACK-END 22

1.1.1 Ngôn ngữ Golang 22

1.1.2 Echo Framework 23

1.1.3 PostgreSQL 24

1.1.4 Các thư viện, công nghệ khác 24

1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA FRONT-END 26

1.2.1 VueJS Framework 26

1.2.2 Vueuse 28

1.2.3 Dayjs 29

1.2.4 NuxtJS Framework 30

1.2.5 Typescript 31

1.2.6 Các thư viện và công nghệ khác 32

Chương 2 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 35

2.1 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 35

2.2 XÁC ĐỊNH YÊU CẦU 35

2.2.1 Yêu cầu chức năng 35

2.2.2 Yêu cầu phi chức năng 37

2.3 MÔ HÌNH HÓA YÊU CẦU 38

2.3.1 Lược đồ Use case 38

2.3.2 Mô tả Use case chi tiết 40

Chương 3 THIẾT KẾ PHẦN MỀM 93

3.1 LƯỢC ĐỒ TUẦN TỰ - SEQUENCE DIAGRAM 93

3.1.1 Phía khách hàng 93

3.1.2 Phía nhân viên 105

3.1.3 Phía quản trị viên 128

3.2 LƯỢC ĐỒ LỚP – CLASS DIAGRAM 133

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 135

3.3.1 Sơ đồ cơ sở dữ liệu 135

3.3.2 Chi tiết bảng dữ liệu 137

3.4 THIẾT KẾ GIAO DIỆN 163

3.4.1 Giao diện đăng nhập 163

3.4.2 Giao diện đăng ký 164

3.4.3 Giao diện thanh tìm kiếm 166

3.4.4 Giao diện chọn nhanh 167

3.4.5 Giao diện kết quả tìm kiếm 168

3.4.6 Giao diện chi tiết khách sạn 170

3.4.7 Giao diện trang giỏ hàng 173

3.4.8 Giao diện trang thanh toán 174

3.4.9 Giao diện trang lịch sử đặt phòng 175

Chương 4 CÀI ĐẶT VÀ KIỂM THỬ 176

4.1 CÀI ĐẶT 176

4.1.1 Yêu cầu 176

4.1.2 Tiến hành chạy chương trình 176

4.2 KIỂM THỬ 177

4.2.1 Kế hoạch kiểm thử 177

4.2.2 Tiến hành kiểm thử 177

PHẦN KẾT LUẬN 182

1 KẾT QUẢ ĐẠT ĐƯỢC 182

2 ƯU ĐIỂM 183

3 NHƯỢC ĐIỂM 183

4 HƯỚNG PHÁT TRIỂN 183

TÀI LIỆU THAM KHẢO 185

DANH MỤC HÌNH ẢNH

Hình 1 Hình ảnh website Booking.com (Nguồn https://www.booking.com/) 14

Hình 2 Hình ảnh phần mềm Agoda (Nguồn https://www.agoda.com) 15

Hình 3 Hình ảnh website Traveloka (Nguồn https://www.traveloka.com) 16

Hình 4 Hình ảnh website HotelFriend 17

Hình 5 Hình ảnh website Go2Joy 18

Hình 6 Logo Golang 22

Hình 7 Logo echo framework 23

Hình 8 Logo PostgreSQL 24

Hình 9 Logo docker 25

Hình 10 Lợi ích khi sử dụng Vue 27

Hình 11 Thư viện VueUse 29

Hình 12 Thư viện Dayjs 30

Hình 13 Ngôn ngữ Typescript 32

Hình 14 Kiến trúc chung của hệ thống 35

Hình 15 Mối quan hệ giữa quản trị viên và bên bán phòng 38

Hình 16 Usecase bên mua phòng 38

Hình 17 Usecase bên bán phòng 39

Hình 18 Usecase quản trị viên 39

Hình 19 Sequence Đăng nhập với google 93

Hình 20 Sequence Đăng nhập 94

Hình 21 Sequence Đăng ký tài khoản 95

Hình 22 Sequence Đổi mật khẩu 96

Hình 23 Sequence Đặt lại mật khẩu 97

Hình 24 Sequence Chỉnh sửa thông tin cá nhân 98

Hình 25 Sequence Chỉnh sửa ảnh đại diện 99

Hình 26 Sequence Tìm kiếm khách sạn 100

Hình 27 Sequence Đặt phòng 101

Hình 28 Sequence Hủy đặt phòng 101

Hình 29 Sequence Nâng cấp hạng thành viên 102

Hình 30 Sequence Lịch sử đặt phòng 102

Hình 31 Sequence Bình luận/đánh giá khách sạn 103

Hình 32 Sequence Chỉnh sửa bình luận/đánh giá 103

Hình 33 Sequence Xoá bình luận/đánh giá 104

Hình 34 Sequence Xem khách sạn 105

Hình 35 Sequence Tạo khách sạn 106

Hình 36 Sequence Chỉnh sửa khách sạn 107

Hình 37 Sequence Xoá khách sạn 108

Hình 38 Sequence Thêm hình ảnh khách sạn 109

Hình 39 Sequence Xoá hình ảnh 110

Hình 40 Sequence Thêm hình giấy phép kinh doanh 111

Hình 41 Sequence Xem phòng 112

Hình 42 Sequence Tạo phòng 113

Hình 43 Sequence Chỉnh sửa phòng 114

Hình 44 Sequence Xoá phòng 115

Hình 45 Sequence Thêm ảnh phòng 116

Hình 46 Sequence Xoá ảnh phòng 117

Hình 47 Sequence Tạo gói giá 118

Hình 48 Sequence Chỉnh sửa gói giá 119

Hình 49 Sequence Xoá gói giá 120

Hình 50 Sequence Thêm/Cập nhật đêm nghỉ 121

Hình 51 Sequence Thêm/Cập nhật giá phòng 122

Hình 52 Sequence Tạo voucher 123

Hình 53 Sequence Chỉnh sửa voucher 124

Hình 54 Sequence Xoá voucher 125

Hình 55 Sequence Thêm nhân viên 126

Hình 56 Sequence Xoá nhân viên 127

Hình 57 Sequence Tạo tài khoản 128

Hình 58 Sequence Chỉnh sửa tài khoản 129

Hình 59 Sequence Tìm kiếm người dùng 130

Hình 60 Sequence Giải quyết yêu cầu thanh toán 131

Hình 61 Sequence Thiết lập tỷ lệ hoa hồng 132

Hình 62 Sequence Thiết lập tỷ xếp hạng 132

Hình 63 Sequence Duyệt khách sạn 133

Hình 64 Lược đồ lớp - Class diagram 134

Hình 65 Thiết kế cơ sở dữ liệu 136

Hình 66 Giao diện đăng nhập 163

Hình 67 Giao diện đăng ký 164

Hình 68 Giao diện thanh tìm kiếm 166

Hình 69 Giao diện chọn nhanh 167

Hình 70 Giao diện kết quả tìm kiếm 168

Hình 71 Giao diện chi tiết khách sạn 170

Hình 72 Giao diện chi tiết khách sạn 171

Hình 73 Giao diện trang giỏ hàng 173

Hình 74 Giao diện trang thanh toán 174

Hình 75 Giao diện trang lịch sử đặt phòng 175

DANH MỤC BẢNG BIỂU

Bảng 1 Mô tả usecase “Đăng nhập với tài khoản Google” 40

Bảng 2 Mô tả usecase “Đăng nhập” 41

Bảng 3 Mô tả usecase “Đăng kí tài khoản” 42

Bảng 4 Mô tả usecase “Đổi mật khẩu” 43

Bảng 5 Mô tả usecase “Đặt lại mật khẩu” 45

Bảng 6 Mô tả usecase “Chỉnh sửa thông tin” 46

Bảng 7 Mô tả usecase “Chỉnh sửa ảnh đại diện” 47

Bảng 8 Mô tả usecase “Tìm kiếm khách sạn” 48

Bảng 9 Mô tả usecase “Đặt phòng” 49

Bảng 10 Mô tả usecase “Huỷ đặt phòng” 50

Bảng 11 Mô tả usecase “Nâng hạng thành viên” 52

Bảng 12 Mô tả usecase “Xem lịch sử đặt phòng” 53

Bảng 13 Mô tả usecase “Bình luận đánh giá khách sạn” 54

Bảng 14 Mô tả usecase “Chỉnh sửa bình luận đánh giá khách sạn” 55

Bảng 15 Mô tả usecase “Xoá bình luận đánh giá khách sạn” 56

Bảng 16 Mô tả usecase “Xem khách sạn” 57

Bảng 17 Mô tả usecase “Tạo khách sạn” 58

Bảng 18 Mô tả usecase “Chỉnh sửa khách sạn” 59

Bảng 19 Mô tả usecase “Xoá khách sạn” 60

Bảng 20 Mô tả usecase “Thêm hình ảnh khách sạn” 61

Bảng 21 Mô tả usecase “Xoá hình ảnh khách sạn” 63

Bảng 22 Mô tả usecase “Thêm giấy phép kinh doanh” 64

Bảng 23 Mô tả usecase “Xem phòng” 65

Bảng 24 Mô tả usecase “Tạo phòng” 66

Bảng 25 Mô tả usecase “Chỉnh sửa phòng” 67

Bảng 26 Mô tả usecase “Xoá phòng” 68

Bảng 27 Mô tả usecase “Thêm hình ảnh phòng” 69

Bảng 28 Mô tả usecase “Xoá hình ảnh phòng” 71

Bảng 29 Mô tả usecase “Tạo gói giá” 72

Bảng 30 Mô tả usecase “Chỉnh sửa gói giá” 73

Bảng 31 Mô tả usecase “Xoá gói giá” 74

Bảng 32 Mô tả usecase “Thêm / cập nhật đêm nghỉ” 76

Bảng 33 Mô tả usecase “Thêm / cập nhật giá phòng” 77

Bảng 34 Mô tả usecase “Tạo voucher” 78

Bảng 35 Mô tả usecase “Chỉnh sửa voucher” 79

Bảng 36 Mô tả usecase “Xoá voucher” 80

Bảng 37 Mô tả usecase “Thêm nhân viên” 81

Bảng 38 Mô tả usecase “Xoá nhân viên” 82

Bảng 39 Mô tả usecase “Gửi yêu cầu thanh toán” 84

Bảng 40 Mô tả usecase “Tạo tài khoản” 85

Bảng 41 Mô tả usecase “Cập nhật tài khoản” 86

Bảng 42 Mô tả usecase “Tìm kiếm tài khoản” 87

Bảng 43 Mô tả usecase “Giải quyết yêu cầu thanh toán” 88

Bảng 44 Mô tả usecase “Thiết lập tỉ lệ hoa hồng” 89

Bảng 45 Mô tả usecase “Thiết lập xếp hạng” 89

Bảng 46 Mô tả usecase “Duyệt khách sạn” 90

Bảng 47 Mô tả usecase “Gửi thông báo” 92

Bảng 48 User 137

Bảng 49 Hotels 138

Bảng 50 Room Types 139

Bảng 51 Bảng Rate Plans 140

Bảng 52 Bảng Hotel Works 141

Bảng 53 Hotel Types 142

Bảng 54 Hotel Facility 143

Bảng 55 Bảng Role Model 145

Bảng 56 Room Type Facilities 146

Bảng 57 Room Type Views 149

Bảng 58 Room Nights 150

Bảng 59 Payment Method 150

Bảng 60 Status Works 151

Bảng 61 Lock Rooms 151

Bảng 62 Rate Packages 152

Bảng 63 Payment Statuses 152

Bảng 64 Payments 153

Bảng 65 Payout Requests 155

Bảng 66 Vouchers 156

Bảng 67 Voucher Excepts 157

Bảng 68 Reviews 157

Bảng 69 Ranks 158

Bảng 70 User Ranks 158

Bảng 71 Notifications 159

Bảng 72 Carts 160

Bảng 73 Cart Details 161

Bảng 74 Configuration Url Defines 161

Bảng 75 Wallets 162

Bảng 76 Wallet Transactions 162

Bảng 77 Mô tả giao diện đăng nhập 163

Bảng 78 Mô tả giao diện đăng ký 165

Bảng 79 Mô tả giao diện thanh tìm kiếm 166

Bảng 80 Mô tả giao diện chọn nhanh 168

Bảng 81 Mô tả giao diện kết quả tìm kiếm 169

Bảng 82 Mô tả giao diện chi tiết khách sạn 171

Bảng 83 Mô tả giao diện giỏ hàng 173

Bảng 84 Mô tả giao diện trang thanh toán 174

Bảng 85 Giao diện trang lịch sử đặt phòng 175

Bảng 86 Kiểm thử đăng nhập 177

Bảng 87 Kiểm thử tìm phòng 179

Bảng 88 Kiểm thử thêm phòng 180

PHẦN MỞ ĐẦU

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Cùng với sự phát triển và hội nhập của nền kinh tế Việt Nam trong những năm gần đây Ngành Du Lịch và Dịch Vụ là một trong những lĩnh vực có tốc độ tăng trưởng khá nhanh ở Việt Nam nói chung và thế giới nói riêng Đặc biệt là đại dịch COVID vừa qua, những lĩnh vực trên là những lĩnh vực mà người ta muốn phục hồi nhanh chóng nhất Hàng nghìn khách sạn, nhà hàng, công ty du lịch dược thành lập với mong muốn đáp ứng nhu cầu của con người ngày càng tăng lên Công tác quản lý khách sạn ngày càng trở nên khó khăn hơn Điều đó chính là động lực để thúc đẩy các doanh nghiệp hiện thực hóa ý tưởng, tạo ra những phần mềm đáp ứng mong muốn ứng dụng công nghệ thông tin trong công tác quản lý để dễ dàng kiểm soát thông tin cũng như là phục vụ đời sống con người ngày càng trở nên hiện đại hơn

Nhận thức được thực tiễn ấy và mong muốn góp phần giúp cho những doanh nghiệp lĩnh vực du lịch và dịch vụ có được một ứng dụng phục vụ cho nhu cầu của mình, nhóm chúng em quyết định chọn phát triển chủ đề tiểu luận chuyên ngành “XÂY DỰNG WEBSITE ĐẶT KHÁCH SẠN SỬ DỤNG GOLANG VÀ VUEJS”

2 ĐỐI TƯỢNG NGHIÊN CỨU

Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu đi du dịch, những người muốn đặt phòng trực tuyến Đây có thể là những người đang lên kế hoạch cho một chuyến

du lịch hoặc đặt phòng trực tuyến, hoặc những người cần nghỉ ngơi trong một thời gian ngắn Ngoài ra, đối tượng hướng đến khác bao gồm cả các nhà cung cấp dịch vụ khách sạn, chủ khách sạn muốn quảng bá và bán phòng trên nền tảng này Bên cạnh đó là các công nghệ sử dụng giúp hiện thực hóa đề tài Cụ thể như sau:

- Sử dụng Vuejs, Nuxtsj, Naive UI, Pinia và một số thư viện khác hỗ trợ để xây dựng giao diện người dùng thân thiện, tương tác tốt với người sử dụng

- Nghiên cứu Restful API với Echo Framework của Golang để xây dựng nên hệ thống APIs hỗ trợ truy xuất và thao tác với dữ liệu nhanh chóng, chính xác nhất

- Sử dụng cơ sở dữ liệu SQL với hệ quản trị là Postgresql để lưu trữ dữ liệu

- Nghiên cứu bảo mật hệ thống bằng các middleware của Echo Framework như

3 PHẠM VI NGHIÊN CỨU

Nghiên cứu tập trung vào việc xây dựng một website đặt phòng trực tuyến xoay quanh các yêu cầu gồm: tìm và đặt phòng, đánh giá, thanh toán trực tuyến, tạo khách sạn, tạo phòng và bán phòng, thống kê, quản lý thông tin các khách sạn, hình ảnh và quản lý người dùng

4 KHẢO SÁT CÁC ỨNG DỤNG CÓ LIÊN QUAN

4.1 Booking.com:

Hình 1 Hình ảnh website Booking.com (Nguồn https://www.booking.com/)

- Các chức năng chính:

o Khách hàng booking (đặt phòng, chỗ lưu trú)

o Tìm kiếm khách sạn, chọn loại phòng phù hợp theo nhu cầu người dùng

o Quản lý lịch sử đặt phòng, chuyến bay trong tài khoản người dùng

o Có giao diện xem lại lịch sử đặt phòng, đặt phương tiện

o Tìm kiếm khách sạt, homestay, đặt vé máy bay

o Thanh toán online booking

o Review đánh giá các dịch vụ

- Ưu điểm:

o Các chức năng dịch vụ đa dạng (Tìm kiếm đặt vé khách sạn, máy bay)

o Có hỗ trợ tính năng tìm kiếm đánh giá

o Hỗ trợ nhiều ngôn ngữ khác nhau

o Đặt vé các dịch vụ như khách sạn, chỗ ở máy bay, cho thuê xe

o Tìm kiếm khách sạn theo ngày tháng năm, địa điểm

o Đánh giá chất lượng dịch vụ

- Ưu điểm:

o Giao diện dễ sử dụng

o Có chức năng, hệ thống voucher điểm thưởng cho tài khoản

o Các bước đặt vé có chia theo từng bước rõ ràng

- Khuyết điểm:

o Khi đặt vé điền thông tin nhiều

o Có một số chức năng chỉ hỗ trợ trong app Traveloka (Chức năng điểm thưởng của tôi)

o Quản lý nhân viên

o Quản lý các thông tin khuyến mãi, đánh giá người dùng

o Phân quyền giữa người dùng và nhân viên khi sử dụng phần mềm

o Báo cáo thống kê

- Ưu điểm:

o Website hỗ trợ tốt các chức năng quản lý khách sạn (quản lý phòng, trạng thái cơ sở vật chất trong một khách sạn)

o Website có một chức năng đặc biệt là mở rộng cho người dùng cuối

Từ đó, người dùng có thể tự tìm kiếm phòng, đặt phòng và thanh toán online qua website Mà không cần nhân viên phải thực hiện Đưa ra các chương trình khuyến mãi người dùng cuối có thể xem

o HotelFriend có hỗ trợ app di động giúp khách hàng sử dụng tiện lợi hơn

o Giao diện đẹp, bắt mắt dễ sử dụng

- Khuyết điểm:

o Tài liệu hướng dẫn sử dụng không chi tiết

o Hệ thống thanh toán online của phần mềm rất hạn chế (Không hỗ trợ thanh toán bằng tiền Việt Nam chỉ thanh toán bằng đồng Dollar, Euro,…)

o Hệ thống không ưu tiên đề xuất khách sạn còn phòng trống

4.5 Go2Joy:

Hình 5 Hình ảnh website Go2Joy

- Các chức năng chính:

o Đặt phòng khách sạn

o Đăng nhập, đăng ký tài khoản

o Tìm kiếm phòng khách sạn theo ngày, xem thông tin, hình ảnh về khách sạn

- Ưu điểm:

o Giao diện đơn giản, dễ sử dụng

o Giúp khách tự tìm phòng theo nhu cầu dễ dàng

o Có chức năng ưu đãi dành cho khách hàng

- Khuyết điểm:

o Hệ thống không hỗ trợ giỏ hàng

o Đặt phòng thanh toán phải bắt buộc qua cài app

5 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Xem thông tin phòng ở khách sạn

- Xem thông tin dịch vụ tương ứng với các phòng trong khách sạn

- Thanh toán Online ( Thanh toán Momo và VNPay)

- Quản lý ví

- Nâng cấp thành viên

- Xem các lịch sử các phòng đã đặt

5.2 Phía nhân viên, quản lý, chủ khách sạn

Nhân viên có thể thực hiện các chức năng:

- Xem được khách sạn mình đang làm việc

- Quản lý checkin checkout của khách

Quản lý có thể thực hiện các chức năng:

- Xem được khách sạn mình đang làm việc

- Quản lý checkin checkout của khách

- Thêm, sửa khách sạn, hình ảnh khách sạn, giấy phép kinh doanh

- Thêm, sửa phòng

- Thêm, sửa gói giá

- Chỉnh sửa số lượng phòng và giá bán phòng

- Thêm xoá sửa voucher

- Xem thông tin doanh thu

- Gửi yêu cầu thanh toán

Chủ khách sạn có thể thực hiện các chức năng:

- Quản lý được khách sạn của mình

- Quản lý checkin checkout của khách

- Thêm, xoá sửa khách sạn, hình ảnh khách sạn, giấy phép kinh doanh

- Thêm xoá sửa phòng

- Thêm xoá sửa gói giá

- Chỉnh sửa số lượng phòng và giá bán phòng

- Thêm xoá sửa voucher

- Xem thông tin doanh thu

- Gửi yêu cầu thanh toán

- Thêm xoá sửa tài khoản của quản lý và nhân viên

5.3 Phía quản trị viên

Quản trị viên có thể thực hiện các chức năng:

- Quản lý toàn bộ phòng, gói dịch vụ, ngày bán phòng, giá bán phòng của từng khách sạn trong hệ thống

- Quản lý toàn bộ tài khoản trong hệ thống

- Chỉnh sửa tỉ lệ hoa hồng và số sao của khách sạn

- Quản lý toàn bộ bình luận, đánh giá của hệ thống

- Giải quyết yêu cầu thanh toán từ phía khách sạn

- Duyệt khách sạn

PHẦN NỘI DUNG Chương 1 CƠ SỞ LÝ THUYẾT

1.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA BACK-END

1.1.1 Ngôn ngữ Golang

Ngôn ngữ Go (Golang) là ngôn ngữ đa dụng, mã nguồn mở được thiết kế, phát triển bởi các kỹ sư của Google (Ken Thompson, Robert Griesemer và Rob Pike) được ra mắt vào năm 2012 Golang được tạo ra nhằm để xây dựng các ứng dụng đáng tin cậy, có hiệu suất cao [2]

Với độ tin cậy, hiệu quả của Golang thì ngôn ngữ này đã được một số doanh nghiệp

1.1.2 Echo Framework

Giới thiệu

Echo framework là một framework dựa trên ngôn ngữ Golang, mã nguồn mở, được phát triển bởi LabStack Framework này được dùng để phát triển các API trong hệ thống ứng dụng Echo là framework tập trung vào sự đơn giản hóa giúp phát triển API dễ dàng,

có hiệu suất cao và có tính mở rộng

Hình 7 Logo echo framework

Echo framework cung cấp các tính năng chính giúp phát triển API như:

- Tạo các đường dẫn (Endpoint) để ứng dụng Client gọi tới API cũng như lắng nghe các Request gửi tới hệ thống

- Tạo các Controllers (Handlers) để tiếp nhận và xử lý các công việc cần làm của từng cái Endpoint đó

- Hỗ trợ tích hợp các Middlewares: Với từng đường dẫn hoặc khi gọi tới hệ thống thì Echo có một số middleware có sẵn hỗ trợ những chức năng cơ bản

có thể tích hợp vào đường dẫn như JWT middleware, CORS middleware, logger, validate giúp tiết kiệm thời gian phát triển ứng dụng không phải làm lại từ đầu các chức năng cơ bản

Ưu điểm

Echo Framework đơn giản, tài liệu hướng dẫn dễ đọc,dễ học và dễ sử dụng

Echo là framework mã nguồn mở

Echo Framework có dung lượng nhẹ, cài đặt dễ dàng (Cài đặt qua CMD) và có hiệu suất cao

Echo framework không ràng buộc về mặt tổ chức dự án

Framework có sẵn nhiều middleware các chức năng cơ bản như JWT, Validate, Binding các request giúp tiết kiệm thời gian phát triển ứng dụng và dễ dàng hơn

Đặc biệt, PostgreSQL có một số hosting hỗ trợ cấu hình cơ sở dữ liệu trên server miễn phí và có thể kết nối dễ dàng vào PgAdmin 4

Hình 8 Logo PostgreSQL

1.1.4 Các thư viện, công nghệ khác

JSON Web Token

JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa giao thức truyền tin an toàn giữa các thành phần bằng 1 đối tượng JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào phần Signature của nó Phần Signature của JWT token

sẽ được mã hóa lại bằng HMAC hoặc RSA Trong đó chuỗi Token phải có ba thành phần

là Header, phần Payload và phần Signature được ngăn cách bằng dấu “.” [8]

Người ta thường sử dụng JWT trong xác thực API Khi người dùng đã đăng nhập

vào hệ thống và hệ thống trả về JWT token thì những request tiếp theo từ phía người dùng

sẽ kèm token JWT đó Việc này giúp API khi lấy được Token từ request thì sẽ kiểm tra

được quyền của người dùng và cấp quyền truy cập vào các đường dẫn, Service và các tài

nguyên khác của hệ thống

Docker

Docker là một công cụ phát triển phần mềm, giúp các lập trình viên có thể chạy phần

mềm, ứng dụng của mình trên một môi trường độc lập trên hệ điều hành Windows, Linux,

MacOS Docker được xây dựng bằng Golang được phát triển bởi Docker.Inc phát hành vào

năm 2013 [6]

Hình 9 Logo docker

Các ứng dụng được cấu hình dùng Docker thì sẽ được tạo ra dưới dạng Image và khi

chạy ứng thì Image trở thành Container được chạy trong môi trường ảo hóa được cấp riêng

và độc lập không gây ảnh hưởng hay xung đột với các thành phần khác trong máy tính

Sử dụng Docker cho ứng dụng mang lại một số lợi ích như sau:

- Ứng dụng được chạy trong môi trường ảo hóa thì sẽ có môi trường tách biệt

nên sẽ không gây ảnh hưởng xung đột với các thành phần hoặc cấu hình khác trên máy tính

- Docker cung cấp môi trường ảo hóa nhưng Docker không giống máy ảo nên dung lượng sẽ nhẹ và sử dụng ít tài nguyên máy tính hơn so với máy ảo Ứng dụng được chạy trong Container Docker thì có thể kiểm soát dễ dàng (Tắt/Chạy, xóa, thêm Container, xuất Logger) với Docker Desktop

- Docker hỗ trợ cấu hình môi trường chạy ứng dụng dễ dàng bằng Dockerfile

và dữ liệu cấu hình trong Dockerfile có thể tái sử dụng nhiều lần hoặc chia sẻ cho người khác

- Docker chạy trong Container đã được cấu hình đầy đủ thì khi deploy lên server thì server chỉ cần chạy Container đó không cần phải cài đặt thêm thư viện hoặc thay đổi cấu hình server theo nhu cầu của ứng dụng

1.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở PHÍA FRONT-END

1.2.1 VueJS Framework

Giới thiệu

Vue.js là một framework JavaScript tiến bộ được sử dụng để xây dựng giao diện người dùng Nó được tạo ra bởi Evan You vào năm 2014 và đã được nhiều người ưa chuộng trong cộng đồng phát triển web [16]

Vue.js được thiết kế để dễ hiểu và sử dụng, là một lựa chọn tuyệt vời cho cả những lập trình viên mới và có kinh nghiệm Nó sử dụng hệ thống mẫu (templating system) cho phép nhà phát triển tạo giao diện người dùng động và phản ứng với dữ liệu một cách dễ dàng Vue.js cũng có một virtual DOM (Document Object Model) giúp cải thiện hiệu suất bằng cách giảm số lần thao tác DOM thực tế cần thiết

Một số tính năng chính của Vue.js bao gồm kiến trúc thành phần (component-based architecture), giúp tái sử dụng mã và dễ bảo trì, và các chỉ thị tích hợp sẵn (built-in directives), cho phép nhà phát triển dễ dàng thêm chức năng động vào ứng dụng của họ Vue.js cũng có một hệ sinh thái plugin và thư viện mạnh mẽ, giúp nhà phát triển nhanh chóng và dễ dàng thêm chức năng bổ sung vào ứng dụng của mình [7]

Hình 10 Lợi ích khi sử dụng Vue

Các tính năng nổi bật của Vue

Reactive data binding: Vue.js sử dụng hệ thống reactive data binding, có nghĩa là các thay đổi trong dữ liệu được tự động phản ứng trên giao diện người dùng Điều này làm cho việc tạo giao diện người dùng động và phản ứng trở nên dễ dàng

Kiến trúc thành phần (Component-based architecture): Vue.js cho phép nhà phát triển tạo các component (thành phần giao diện tái sử dụng ) và composables (thành phần logic tái sử dụng), có thể kết hợp để tạo ra giao diện người dùng phức tạp Điều này giúp việc bảo trì và mở rộng ứng dụng trở nên dễ dàng hơn

Virtual DOM: Vue.js sử dụng một virtual DOM (Document Object Model), giúp cải thiện hiệu suất bằng cách giảm số lần thao tác DOM thực tế cần thiết

Chỉ thị (Directives): Vue.js có một tập hợp các chỉ thị tích hợp sẵn cho phép nhà phát triển dễ dàng thêm chức năng động vào ứng dụng của họ Điều này bao gồm các chỉ thị để điều khiển sự hiển thị của các phần tử, xử lý các sự kiện và nhiều hơn nữa

Mẫu (Templates): Vue.js sử dụng hệ thống mẫu đơn giản và dễ hiểu, cho phép nhà phát triển tạo giao diện người dùng động và phản ứng một cách dễ dàng mà không cần phải viết mã phức tạp

Pinia: Pinia là một thư viện quản lý trạng thái trực quan (state management) cho Vue.js, giúp dễ dàng quản lý trạng thái của ứng dụng lớn Nó cung cấp một kho trung tâm cho tất cả các thành phần trong một ứng dụng, giúp dễ dàng quản lý dữ liệu và các thay đổi trạng thái

Vue Router: Vue Router là một thư viện định tuyến (routing) cho Vue.js, cho phép nhà phát triển dễ dàng tạo ra các ứng dụng đơn trang (single-page applications) động và phản ứng Nó cung cấp các tính năng như định tuyến lồng nhau, tải trang lười biếng (lazy loading) Bên cạnh đó còn cung cấp các thẻ meta cho một page, và cung cấp tính năng navigation guard (bảo vệ điều hướng) giúp cho việc phân quyền truy cập đường dẫn trên ứng dụng bảo mật hơn

Ưu điểm của Vue

- Dễ học và sử dụng, là một lựa chọn tuyệt vời cho cả những lập trình viên mới và

có kinh nghiệm

- Nhanh và nhẹ, có kích thước bundle nhỏ và thời gian k-rendering nhanh chóng

- Linh hoạt và có thể tùy chỉnh, cho phép nhà phát triển dễ dàng thêm và loại bỏ tính năng khi cần thiết

- Kiến trúc thành phần thúc đẩy tái sử dụng mã và bảo trì

- Chỉ thị tích hợp và reactive data binding giúp tạo giao diện người dùng động và phản ứng một cách dễ dàng

- Cộng đồng lớn và tích cực, với nhiều tài nguyên và hỗ trợ có sẵn

Nhược điểm

- Khả năng mở rộng hạn chế so với các framework khác như React

- Có thể không phải là lựa chọn tốt nhất cho các ứng dụng lớn và phức tạp

- Hệ sinh thái plugin và thư viện nhỏ hơn so với React, điều này có thể khiến việc tìm kiếm các plugin hoặc thư viện cụ thể khó khăn hơn

- Hỗ trợ giới hạn cho server-side rendering

1.2.2 Vueuse

Vueuse là một thư viện Vue.js mã nguồn mở cung cấp các hàm tiện ích để giúp phát triển ứng dụng Vue.js dễ dàng hơn Thư viện này cung cấp hơn 200 hàm tiện ích, bao gồm

các hàm liên quan đến định dạng ngày tháng, xử lý chuỗi, thao tác với mảng và đối tượng,

xử lý event và rất nhiều chức năng khác [10]

Hình 11 Thư viện VueUse

Vueuse cũng cung cấp các hàm tiện ích cho các chức năng phổ biến như xử lý vị trí, đọc và ghi cookie, xử lý URL và xử lý định dạng số tiền tệ Ngoài ra, thư viện còn cung cấp các hàm tiện ích cho các chức năng phức tạp hơn như xử lý đa ngôn ngữ và xử lý dữ liệu đồng bộ

Vueuse được phát triển bởi đội ngũ Vue.js và được sử dụng rộng rãi trong các ứng dụng Vue.js Thư viện này rất dễ sử dụng và được cập nhật thường xuyên, giúp các nhà phát triển Vue.js tiết kiệm thời gian và nâng cao hiệu quả làm việc

1.2.3 Dayjs

Day.js là một thư viện JavaScript siêu nhẹ và không có phụ thuộc, được sử dụng để định dạng, hiển thị và tính toán ngày tháng Day.js nhẹ hơn so với Moment.js, một thư viện ngày tháng nổi tiếng khác, và cung cấp các phương thức đơn giản và dễ sử dụng để xử lý ngày tháng trong JavaScript [12]

Hình 12 Thư viện Dayjs

Day.js có thể được sử dụng để định dạng ngày tháng, tính toán khoảng cách giữa các ngày tháng, chuyển đổi ngày tháng sang chuỗi, xử lý múi giờ và rất nhiều chức năng khác Thư viện này cũng hỗ trợ ngôn ngữ nhiều quốc gia và tích hợp linh hoạt với các framework như Vue.js và React

Day.js được thiết kế để có hiệu suất cao và có kích thước nhỏ, chỉ khoảng 2KB khi

sử dụng phiên bản nén Thư viện này cũng hỗ trợ các plugin tiện ích để mở rộng chức năng của nó Với cấu trúc đơn giản và dễ sử dụng, Day.js là một sự lựa chọn tuyệt vời để xử lý ngày tháng trong các ứng dụng JavaScript nhẹ và có hiệu suất cao

1.2.4 NuxtJS Framework

Giới thiệu

NuxtJS là một framework server-side rendering cho Vue.js, thiết kế để dễ dàng xây dựng ứng dụng web đa nền tảng, khắc phục được nhược điểm server-side rendering của Vue Nó cung cấp một tập hợp các quy ước và công cụ giúp đơn giản hóa quá trình phát triển, cho phép nhà phát triển tập trung vào việc xây dựng ứng dụng của mình thay vì cấu hình quá trình biên dịch

Một trong những tính năng chính của NuxtJS là khả năng tạo ra các trang web tĩnh (static site generation), có thể được lưu trữ trên một mạng lưới phân phối nội dung (CDN)

để cải thiện hiệu suất và khả năng mở rộng Nó cũng cung cấp hỗ trợ tích hợp cho side rendering, cải thiện hiệu suất và SEO của các ứng dụng web [13]

server-NuxtJS cung cấp nhiều tính năng khác, bao gồm kiến trúc modular, hệ thống định tuyến mạnh mẽ và hỗ trợ middleware và plugin Nó cũng bao gồm một máy chủ phát triển tích hợp và hỗ trợ hot module replacement (HMR), giúp dễ dàng phát triển và kiểm tra ứng dụng

- Hỗ trợ kiến trúc modular giống Vue, cho phép linh hoạt và tái sử dụng

- Cung cấp hỗ trợ tích hợp cho middleware và plugin

- Bao gồm máy chủ phát triển tích hợp và hỗ trợ hot module replacement (HMR)

- Có cộng đồng lớn và tích cực với tài liệu và hỗ trợ rộng rãi

Nhược điểm

- Có thể phức tạp hơn để học và sử dụng so với các framework đơn giản hơn

- Yêu cầu cấu hình và thiết lập hơn so với một số framework khác

- Không phù hợp cho các dự án nhỏ hoặc đơn giản hơn nơi server-side rendering hoặc static site generation không cần thiết

1.2.5 Typescript

TypeScript là ngôn ngữ lập trình hướng đối tượng được phát triển bởi Tập đoàn Microsoft, trong khi JavaScript là ngôn ngữ lập trình cho web Hoặc hiểu đơn giản TypeScript là một dạng nâng cao của JavaScript bổ sung các kiểu dữ liệu tĩnh và tính hướng đối tượng mà JavsScript còn thiếu sót

1.2.6 Các thư viện và công nghệ khác

Axios

Axios là một thư viện HTTP Client dựa trên Promise dành cho node.js và trình duyệt

Nó có tính đẳng hình (tức là cùng codebase có thể chạy trong cả trình duyệt và node.js) Ở phía server thì nó sử dụng native module http trong node.js, còn ở phía client (trình duyệt) thì nó sử dụng XMLHttpRequest [15]

Các tính năng chính của Axios có thể kể đến như:

- Tạo request từ trình duyệt bằng XMLHttpRequest

- Tạo request từ node.js bằng http

- Hỗ trợ Promise API

- Đón chặn request và response

- Biến đổi dữ liệu request và response

- Bãi bỏ request

- Tự động chuyển đổi cho dữ liệu JSON

- Hỗ trợ phía client bảo vệ chống lại XSRF

FormKit

FormKit là một framework form mã nguồn mở cho Vue Nó cung cấp cho các nhà phát triển các công cụ để xây dựng các biểu mẫu của họ nhanh hơn 10 lần bằng cách đơn giản hóa cấu trúc biểu mẫu, tạo, xác thực, định dạng, nộp, xử lý lỗi, và nhiều hơn nữa FormKit không chỉ là một thư viện UI Đó là một framework xây dựng biểu mẫu toàn diện cho các nhà phát triển Vue giúp viết các biểu mẫu sẵn sàng cho sản xuất chất lượng cao nhanh hơn, dễ truy cập hơn, với DX và UX tốt hơn, và ít mã hơn [11]

Một số tính năng của FormKit bao gồm:

- Các tính năng mạnh mẽ cho dòng dữ liệu, xử lý lỗi và quản lý trạng thái của biểu mẫu (Form)

- Hơn 24 đầu vào dễ truy cập được cung cấp bởi một component duy nhất

- Hơn 20 quy tắc xác thực tích hợp và hỗ trợ viết quy tắc xác thực riêng

- Sử dụng giao diện mặc định Genesis CSS của FormKit, Tailwind hoặc phương pháp tùy chỉnh riêng với sự kiểm soát đầy đủ trên mọi phần tử DOM

- Tạo biểu mẫu với schema động tương thích JSON của FormKit Đầy đủ kết xuất cho lưu trữ cơ sở dữ liệu

Tailwind

Tailwind là một utility-first CSS framework Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới

ra những class bằng chính những class của nó

Sử dụng Tailwind giúp cho chúng ta tối ưu code CSS, viết code ngắn gọn hơn Và hơn nữa, việc có nhiều thêm những class nhưng với quy tắc đặt tên cực kỳ thân thiện với người dùng, lập trình viên nhìn vào class và có thể biết được class này nó đang style những