Xây dựng trang web đặt tour du lịch trực tuyến sử dụng công nghệ mern stack

LỜI CẢM ƠN Trên thực tế khơng có thành công mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, em nhận nhiều quan tâm, giúp đỡ quý Thầy, cô bạn bè Với lòng biết ơn sâu sắc nhất, em xin gửi đến quý Thầy Cô Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh với tri thức tâm huyết để truyền đạt vốn kiến thức quý báu cho em suốt thời gian học tập trường Em xin chân thành cảm ơn Thầy Lê Văn Vinh tận tâm giảng dạy hướng dẫn em qua buổi học lớp buổi thực hành Nếu khơng có lời hướng dẫn, dạy bảo thầy em nghĩ đồ án em khó hồn thiện Một lần nữa, em xin chân thành cảm ơn thầy Đồ án thực khoảng thời gian gần tháng Bước đầu vào thực tế, tìm hiểu lĩnh vực này, kiến thức em hạn chế cịn nhiều bỡ ngỡ Do vậy, khơng tránh khỏi thiếu sót điều chắn, em mong nhận ý kiến đóng góp quý báu quý Thầy Cô bạn học lớp để kiến thức em lĩnh vực hồn thiện Sau cùng, em xin kính chúc q Thầy Cơ Khoa Cơng Nghệ Thơng Tin tồn thể quý Thầy Cô Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Trân trọng kính chào! Sinh viên thực v MỤC LỤC Trang bìa phụ i NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN iii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN .v Danh mục bảng Error! Bookmark not defined Danh mục hình Error! Bookmark not defined CHƯƠNG 1.TỔNG QUAN 1.1.Tính cấp thiết đề tài 1.2.Khảo sát trạng 1.2.1.Vietnam Tourist 1.2.2.Saigon Star Travel 1.2.3.Tour đảo Bình Hưng 1.3.Cơng nghệ lập trình 1.4.Phạm vi nghiên cứu CHƯƠNG 2.CƠ SỞ LÝ THUYẾT 2.1.Giới thiệu MERN Stack 2.1.1.Stack gì, đời? 2.1.2.MERN Stack 2.2.Các công nghệ hỗ trợ khác 14 2.2.1.Redux 14 2.2.2.Ant Design 15 CHƯƠNG 3.XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU 17 3.1.Phân tích yêu cầu đề tài 17 3.1.1.Tên đề tài 17 3.1.2.Chức trang web 17 3.1.3.Yêu cầu đặt 17 3.2.Mơ hình hóa yêu cầu 19 3.3.Đặc tả chi tiết usecase 20 3.3.1.Guest 20 3.3.2 User 23 vi 3.3.3.Admin 25 3.4.Các lược đồ 27 CHƯƠNG 4.THIẾT KẾ PHẦN MỀM 32 4.1.Thiết kế sở liệu 32 4.2.Thiết kế giao diện, mơ tả mục đích hình dành cho admin 35 4.2.1.Login 35 4.2.2.Navbar left menu 35 4.2.3.Quản lý user 36 4.2.4.Quản lý Tour gallery 41 4.2.5.Quản lý tours 43 4.2.6.Xem lịch sử đặt tour 51 4.2.7.Cấu hình 52 4.2.8.Cấu hình footer 56 4.2.9.Cấu hình dòng thời gian 57 4.3.Thiết kế giao diện, mô tả mục đích hình người dùng cuối 59 4.3.1.Header footer 59 4.3.2.Đăng nhập/đăng ký 60 4.3.3.Trang chủ/danh sách tours 65 4.3.4.Xem chi tiết tour 66 4.3.5.Đặt tour 71 4.3.6.Thư viện du lịch 73 4.3.7.Giới thiệu 76 4.3.8.Trang cá nhân (dành cho người dùng đăng ký tài khoản) 78 4.4.Thiết kế thư mục 83 CHƯƠNG 5.CÀI ĐẶT VÀ KIỂM THỬ 87 5.1.Môi trường cài đặt 87 5.2.Kiểm thử 87 CHƯƠNG 6.KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 90 6.1.Những điểm đạt 90 6.2.Những khó khăn cách khắc phục 90 6.3.Ưu điểm 90 6.4.Hướng phát triển 91 Tài liệu tham khảo 92 vii Danh mục bảng Bảng 3.1 Thống kê nghiệp vụ Guest 20 Bảng 3.2 Thống kê, mô tả quy định cho nghiệp vụ Guest 21 Bảng 3.3 Thống kê nghiệp vụ User 22 Bảng 3.4 Thống kê, mô tả quy đinh cho nghiệp vụ user 23 Bảng 3.5 Thống kê nghiệp vụ admin 25 Bảng 3.6 Thống kê, mô tả quy định cho nghiệp vụ admin 25 Bảng 4.1 Đặc tả giao diện đăng nhập admin 35 Bảng 4.2 Đặc tả giao diện navbar admin 35 Bảng 4.3 Đặc tả giao diện Left menu 36 Bảng 4.4 Đặc tả giao diện quản lý users 37 Bảng 4.5 Đặc tả giao diện xem/chỉnh sửa user 38 Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour user 40 Bảng 4.7 Đặc tả giao diện xác nhận xóa user 40 Bảng 4.8 Đặc tả giao diện quản lý tour gallery 41 Bảng 4.9 Đặc tả giao diện chỉnh/tạo sửa tour gallery 42 Bảng 4.10 Đặc tả giao diện quản lý tours 44 Bảng 4.11 Đặc tả giao diện chỉnh sửa chi tiết tour 48 Bảng 4.12 Đặc tả giao diện popup xác nhận xóa tour 51 Bảng 4.13 Đặc tả giao diện xem lịch sử đặt tour 52 Bảng 4.14 Đặc tả giao diện xem chi tiết người đặt tour 52 Bảng 4.15 Đặc tả giao diện cấu hình điều khoản đặt tour 53 Bảng 4.16 Đặc tả giao diện lựa chọn ngông ngữ hiển thị cho trang tour 54 Bảng 4.17 Đặc tả giao diện quản lý header 54 Bảng 4.18 Đặc tả giao diện cấu hình tạo/chỉnh sửa header 55 Bảng 4.19 Đặc tả giao diện cấu hình footer 57 Bảng 4.20 Đặc tả giao diện cấu hình dịng thời gian 58 Bảng 4.21 Đặc tả giao diện chỉnh sửa/tạo kiện 59 Bảng 4.22 Đặc tả giao diện header 60 Bảng 4.23 Đặc tả giao diện footer 60 Bảng 4.24 Đặc tả giao diện đăng nhập 61 Bảng 4.25 Đặc tả giao diện đăng ký 62 viii Bảng 4.26 Đặc tả giao diện thông báo kiểm tra email 63 Bảng 4.27 Đặc tả giao diện thông báo đăng ký tài khoản thành công 64 Bảng 4.28 Đặc tả giao diện xem danh sách tours 66 Bảng 4.29 Đặc tả giao diện giới thiệu chung 67 Bảng 4.30 Đặc tả giao diện xem lịch trình 69 Bảng 4.31 Đặc tả giao diện xem thông tin 71 Bảng 4.32 Đặc tả giao diện đặt tour 71 Bảng 4.33 Đặc tả giao diện trước toán Paypal 73 Bảng 4.34 Đặc tả giao diện thơng báo tốn thành công 73 Bảng 4.35 Đặc tả giao diện danh sách thư viện du lịch 74 Bảng 4.36 Đặc tả giao diện xem chi tiết viết 75 Bảng 4.37 Đặc tả giao diện giới thiệu trang web 77 Bảng 4.38 Đặc tả giao diện liên hệ với 77 Bảng 4.39 Đặc tả giao diện trang cá nhân 78 Bảng 4.40 Đặc tả giao diện xem chi tiết tour đặt 79 Bảng 4.41 Đặc tả giao diện chỉnh sửa thông tin cá nhân 80 Bảng 4.42 Đặc tả giao diện cài đặt tài khoản 81 Bảng 4.43 Đặc tả giao diện thay đổi mật 82 Bảng 4.44 Đặc tả giao diện xóa tài khoản 83 Bảng 5.1 Bảng kiểm thử hệ thống Error! Bookmark not defined ix Danh mục hình KHĨA LUẬN TỐT NGHIỆP i NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN iii PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iv LỜI CẢM ƠN v Trang bìa phụ i vi NHIỆM VỤ THỰC HIỆN ĐỒ ÁN TỐT NGHIỆP ii vi PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN LỜI CẢM ƠN iii vi iv vi v vi Danh mục bảng Error! Bookmark not defined vi Danh mục hình Error! Bookmark not defined vi CHƯƠNG 1.TỔNG QUAN vi CHƯƠNG 2.CƠ SỞ LÝ THUYẾT vi CHƯƠNG 3.XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU .17 vi CHƯƠNG 4.THIẾT KẾ PHẦN MỀM 32 vii CHƯƠNG 5.CÀI ĐẶT VÀ KIỂM THỬ 87 vii CHƯƠNG 6.KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Tài liệu tham khảo 90 vii 92 vii Danh mục bảng viii Bảng 5.1 Bảng kiểm thử hệ thống defined CHƯƠNG Error! Bookmark not ix TỔNG QUAN Hình 1.1 Giao diện trang chủ Vietnam Tourist Hình 1.2 Giao diện trang chủ Saigon Star Trevel Hình 1.3 Giao diện trang chủ Tour đảo Bình Hưng x CHƯƠNG CƠ SỞ LÝ THUYẾT Hình 2.1 Các phận cấu thành stack [1] Hình 2.2 MERN Stack [2] Hình 2.3 MongoDB [3] Hình 2.4 NodeJS [4] Hình 2.5 NodeJS Components [4] 10 Hình 2.6 ExpressJS [4] 11 Hình 2.7 ReactJS [5] 11 Hình 2.9 Nguyên lý hoạt động Redux[7] 14 Hình 2.10 Cấu trúc Redux [7] 15 Hình 2.11 Ant Design cho ReactJS [7] 16 CHƯƠNG XÁC NHẬN, PHÂN TÍCH VÀ MƠ HÌNH HĨA U CẦU 17 Hình 3.1 Usecase Diagram người dùng cuối 19 Hình 3.2 Usecase diagram người quản trị 20 Bảng 3.1 Thống kê nghiệp vụ Guest 20 Bảng 3.2 Thống kê, mô tả quy định cho nghiệp vụ Guest 21 Bảng 3.3 Thống kê nghiệp vụ User 22 Bảng 3.4 Thống kê, mô tả quy đinh cho nghiệp vụ user 23 Bảng 3.5 Thống kê nghiệp vụ admin 25 Bảng 3.6 Thống kê, mô tả quy định cho nghiệp vụ admin 25 CHƯƠNG THIẾT KẾ PHẦN MỀM 32 Hình 4.1 Cấu trúc liệu Default type 32 Hình 4.2 Cấu trúc liệu User 32 Hình 4.3 Cấu trúc liệu Tour 33 Hình 4.4 Cấu trúc liệu TourGallery 33 Hình 4.5 Cấu trúc liệu BookingHistory 33 xi Hình 4.6 Cấu trúc liệu Notification 33 Hình 4.7 Cấu trúc liệu ContactUS 34 Hình 4.8 Cấu trúc liệu Config 34 Hình 4.9 Cấu trúc liệu Crash 34 Hình 4.11 Giao diện đăng nhập admin 35 Bảng 4.1 Đặc tả giao diện đăng nhập admin 35 Hình 4.12 Giao diện navbar admin 35 Bảng 4.2 Đặc tả giao diện navbar admin 35 Hình 4.13 Left menu admin 36 Bảng 4.3 Đặc tả giao diện Left menu 36 Hình 4.14 Giao diện quản lý users 37 Bảng 4.4 Đặc tả giao diện quản lý users 37 Hình 4.15 Giao diện xem/chỉnh sửa thơng tin user 38 Bảng 4.5 Đặc tả giao diện xem/chỉnh sửa user 38 Hình 4.16 Giao diện xem lịch sử đặt tour user 39 Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour user 40 Hình 4.17 Popup xác nhận xóa user 40 Bảng 4.7 Đặc tả giao diện xác nhận xóa user 40 Hình 4.18 Giao diện quản lý Tour gallery 41 Bảng 4.8 Đặc tả giao diện quản lý tour gallery 41 Hình 4.19 Giao diện giao diện chỉnh sửa tour gallery 42 Bảng 4.9 Đặc tả giao diện chỉnh/tạo sửa tour gallery 42 Hình 4.20 Giao diện quản lý tours 44 Bảng 4.10 Đặc tả giao diện quản lý tours 44 Hình 4.21 Giao diện chỉnh sửa/tạo chi tiết tour(1) 45 Bảng 4.11 Đặc tả giao diện chỉnh sửa chi tiết tour 48 Hình 4.25 Giao diện popup xác nhận xóa tour 51 Bảng 4.12 Đặc tả giao diện popup xác nhận xóa tour 51 xii Hình 4.26 Giao diện xem lịch sử đặt tour 51 Bảng 4.13 Đặc tả giao diện xem lịch sử đặt tour 52 Hình 4.27 Giao diện xem chi tiết người đặt tour 52 Bảng 4.14 Đặc tả giao diện xem chi tiết người đặt tour 52 Hình 4.28 Giao diện cấu hình điều khoản đặt tour 53 Bảng 4.15 Đặc tả giao diện cấu hình điều khoản đặt tour 53 Hình 4.29 Giao diện lựa chọn ngơn ngữ hiển thị cho trang đặt tour 53 Bảng 4.16 Đặc tả giao diện lựa chọn ngông ngữ hiển thị cho trang tour 54 Hình 4.30 Giao diện quản lý header 54 Bảng 4.17 Đặc tả giao diện quản lý header 54 Hình 4.31 Giao diện cấu hình tạo/chỉnh sửa header 55 Bảng 4.18 Đặc tả giao diện cấu hình tạo/chỉnh sửa header 55 Hình 4.32 Giao diện cấu hình footer 56 Bảng 4.19 Đặc tả giao diện cấu hình footer 57 Hình 4.33 Giao diện cấu hình dịng thời gian 58 Bảng 4.20 Đặc tả giao diện cấu hình dịng thời gian 58 Hình 4.34 Giao diện chỉnh sửa/tạo kiện 59 Bảng 4.21 Đặc tả giao diện chỉnh sửa/tạo kiện 59 Hình 4.35 Giao diện header 59 Bảng 4.22 Đặc tả giao diện header 60 Hình 4.36 Giao diện footer 60 Bảng 4.23 Đặc tả giao diện footer 60 Hình 4.37 Giao diện đăng nhập 61 Bảng 4.24 Đặc tả giao diện đăng nhập 61 Hình 4.38 Giao diện đăng ký (1) 62 Hình 4.39 Giao diện đăng ký (2) 62 xiii Bảng 4.25 Đặc tả giao diện đăng ký 62 Hình 4.40 Giao diện thơng báo kiểm tra email 63 Bảng 4.26 Đặc tả giao diện thông báo kiểm tra email 63 Hình 4.41 Giao diện thơng báo đăng ký tài khoản thành công 64 Bảng 4.27 Đặc tả giao diện thông báo đăng ký tài khoản thành công 64 Hình 4.42 Giao diện xem danh sách tours 65 Bảng 4.28 Đặc tả giao diện xem danh sách tours 66 Hình 4.43 Giao diện giới thiệu chung 67 Bảng 4.29 Đặc tả giao diện giới thiệu chung 67 Hình 4.44 Giao diện xem lịch trình 69 Bảng 4.30 Đặc tả giao diện xem lịch trình 69 Hình 4.45 Giao diện xem thông tin 70 Bảng 4.31 Đặc tả giao diện xem thơng tin 71 Hình 4.46 Giao diện đặt tour 71 Bảng 4.32 Đặc tả giao diện đặt tour 71 Hình 4.47 Giao diện trước toán paypal 72 Bảng 4.33 Đặc tả giao diện trước toán Paypal 73 Hình 4.48 Giao diện thơng báo tốn thành cơng 73 Bảng 4.34 Đặc tả giao diện thơng báo tốn thành cơng 73 Hình 4.49 Giao diện dánh sách thư viện du lịch 74 Bảng 4.35 Đặc tả giao diện danh sách thư viện du lịch 74 Hình 4.50 Giao diện xem chi tiết viết 75 Bảng 4.36 Đặc tả giao diện xem chi tiết viết 75 Hình 4.51 Giao diện giới thiệu trang web 76 Bảng 4.37 Đặc tả giao diện giới thiệu trang web 77 Hình 4.52 Giao diện liên hệ với 77 Bảng 4.38 Đặc tả giao diện liên hệ với 77 xiv 4.3.8 Trang cá nhân (dành cho người dùng đăng ký tài khoản) - Giao diện trang cá nhân: v v v v v v Hình 4.53 Giao diện trang cá nhân Bảng 4.39 Đặc tả giao diện trang cá nhân STT Kiểu Mô tả/Ghi Text Tên người dùng Menulist Danh sách tùy chọn Button Đăng xuất Button Đến giao diện chỉnh sửa thông tin cá nhân Button Đến giao diện cài đặt tài khoản List Danh sách tours mà người dùng đặt 78 - Giao diện tạo xem chi tiết tour đặt: v v Hình 4.54 Giao diện xem chi tiết tour đặt Bảng 4.40 Đặc tả giao diện xem chi tiết tour đặt STT Kiểu Mô tả/Ghi Text Thơng tin tour đặt Button Đóng giao diện - Giao diện chỉnh sửa thông tin cá nhân: 79 v v v v v v v v v 10 v Hình 4.55 Giao diện chỉnh sửa thơng tin cá nhân Bảng 4.41 Đặc tả giao diện chỉnh sửa thông tin cá nhân STT Kiểu Mô tả/Ghi Text Email người dùng Input Nhập tên người dùng Input Nhập họ tên lót Radio button Chọn giới tính Selection Chọn tên quốc gia Selection Chọn mã quốc gia Input Nhập ID/passport Input Nhập số điện thoại Input Nhập địa 10 Button Lưu thông tin 80 - Giao diện cài đặt tài khoản: v v Hình 4.56 Giao diện cài đặt tài khoản v Bảng 4.42 Đặc tả giao diện cài đặt tài khoản STT Kiểu Mô tả/Ghi Text Thông tin người dùng Button Đến giao diện đổi mật - Button Giao diện đổi mật khẩu: Đến giao diện xóa tài khoản 81 v v3 v v Hình 4.57 Giao diện đối mật Bảng 4.43 Đặc tả giao diện thay đổi mật STT Kiểu Mô tả/Ghi Input Nhập mật cũ Input Nhập mật Input Xác nhận mật Button Lưu mật Sau kiểm tra điểu kiện thỏa mãn điều kiện button đổi sang màu cam người dùng nhấn để lưu mật 82 - Giao diện xóa tài khoản: v v Hình 4.58 Giao diện xóa tài khoản Bảng 4.44 Đặc tả giao diện xóa tài khoản STT Kiểu Mô tả/Ghi Text, image Lời cảnh báo xóa tài khoản Button Xác nhận xóa tài khoản 4.4 Thiết kế thư mục - Thiết kế thư mục frontend trang admin: • Common: thư mục chứa component có tính tái sử dụng, xuất nhiều hình • Controller: thư mục gọi tồn API backend • Scss: thư mục dùng để chỉnh làm đẹp cho giao diện hình admin • Views: Thư mục bao gồm thư mục chủ yếu hình chức admin Mỗi thư mục gồm file index.js 83 Hình 4.59 Thiết kế thư mục cho fronend trang admin - Thiết kế thư mục cho frontend trang đặt tour: • Pages: Thư mục tổng tồn mã nguồn cho hình trang đặt tour • Components: thư mục chứa component tái sử dụng nhiều lần • Container: thư mục chứa thành phần luôn xuất tất hình (header, footer) • Screen: thư mục chứa giao diện hình chức trang web, bao gồm nhiều thư mục Mỗi thư mục thường có file index.js, file style.scss thư mục chứa component 84 Hình 4.60 Thiết kế thư mục fronend cho trang đặt tour - Thiết kế thư mục cho backend: • Models: chứa file mapping với database • Controller: chứa service bao gồm APIs connect với database hệ thống frontend • Routes: chứa router API 85 Hình 4.61 Thiết kế thư mục cho backend (1) Hình 4.62 Thiết kế thư mục cho backend (2) 86 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ 5.1 Môi trường cài đặt - Sử dụng công nghệ Nodejs 14.7.0 MongoDB phiên 4.4.2 Trình duyệt Chrome phiên 87.0.4280.88 (Official Build) (64-bit) 5.2 Kiểm thử Bảng 5.1 Bảng kiểm thử hệ thống STT Tên test case Quy trình Kết mong đợi Kết Kiểm thử chức đăng nhập Nhấn vào nút Login header Nhập username, password vào form đăng nhập Gõ phím Enter nhấn vào nút Đăng nhập Ứng dụng giữ trang tại, đồng thời nút Login header đổi thành nút My page Pass Nhấn vào nút Login header Nhấn vào biểu Kiểm thử tượng chức Google+ giao đăng nhập diện đăng nhập với Chuyển đến giao Google diện login Google Thực bước cần thiết Ứng dụng giữ trang tại, thay đổi nút Login header thành nút My page Pass Nhấn vào nút Login header Nhấn vào dòng chữ Sign up Nhập thông tin cần thiết vào form đăng kí Nhấn vào nút Đăng kí Ứng dụng thông báo kiểm tra email để xác nhận Sau xác thực từ email cách nhấp vào link email chuyển đến giao diện thơng báo đăng ký thành cơng Pass Kiểm thử chức đăng kí 87 Kiểm thử chức cập nhật thông tin Nhấn vào nút My page Nhấn tiếp vào nút Info More Chỉnh sửa lại trường muốn thay đổi Nhấn nút Save Ứng dụng giữ trang tại, đồng thời thông báo cập nhập thông tin thành công Pass Kiểm thử chức tìm kiếm tour Nhập từ khóa vào tìm kiếm Nhấn vào nút tìm kiếm gõ Enter Hiển thị danh sách kết phủ hợp Pass Kiểm thử chức đổi mật Nhấn vào nút My page Nhấn vào nút Account More Nhấn vào Chang password Nhập thông tin mật cũ Nhấn nút change password Cập nhật lại mật người dùng Pass Kiểm thử chức tìm kiếm viết thư viện du lịch Nhập từ khóa vào tìm kiếm Nhấn nút tìm kiếm gõ Enter Hiển thị danh sách kết phù hợp Pass 88 Kiểm thử chức toán tour với Paypal Chọn tour xem chi tiết Nhấn vào nút Book Nhập đầy đủ thông tin form Booking Nhấn nút Book Nhấn nút Paypal Tiến hành tốn với Paypal Thơng báo đặt tour thành công đồng thời gửi email cho người dùng thông tin tour Kiểm thử chức xem chi tiết tour Nhấn vào tour trang danh sách tour Hiển thị thơng chi tiết tour 10 Kiểm thử chức xem chi tiết viết thư viện du lịch Nhấn vào viets danh sách thư viện du lịch Hiển thị chi tiết bào viết Pass 11 Kiểm thử chức đăng xem lịch sử đặt tour Nhấn vào nút My page Nhấn vào nút Booking History Hiển thị danh sách tour mà người dùng đặt Pass 12 Kiểm thử Nhấn vào My page chức Nhấn vào nút xem chi Booking history tiết tour Nhấn vào tour cụ đặt thể đặt Hiển thị pop up thông tin chi tiết tour Pass Pass Pass 89 CHƯƠNG KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Những điểm đạt - - Hoàn thành tiến độ Xử lý củng thực đầy đủ ý tưởng, thuật toán ban đầu mà người thực đề Sau thời gian tìm hiểu nghiên cứu thực hiện, đề tài “XÂY DỰNG TRANG WEB ĐẶT TOUR ONLINE” hoàn thiện so với mục tiêu ban đầu Mục tiêu đạt được, không vậy, người thực đưa vào sử dụng công nghệ kỹ thuật mà ban đầu chưa đặt Cụ thể điểm mà nhóm đạt sau: • Tìm hiểu cơng nghệ liên quan đến javacript – tổng hợp tạo nên công nghệ MERN Stack • Tìm hiểu cơng nghệ hỗ trợ khác như: o Redux để lưu state dễ dàng o Ant design, Font awesome, Sweet Alert hỗ trợ component có sẵn cho Frontend o DraftJS để tạo nên text editor (WYSIWYG editor) o Bảo mật tốt với Json Web Token o Cloudinary để lưu hình ảnh dung lượng lớn • Hiện thực usecase hệ thống 6.2 Những khó khăn cách khắc phục - - Người thực lần tìm hiểu cơng nghệ MERN STACK, thời gian làm quen với công nghệ chưa đủ lâu để nắm vững kiến thức chuyên môn công nghệ Tư thiết kế liệu giao diện hạn chế Chưa có quán khâu xử lý code thuật toán, giao diện cho thực đồng Mặc dù cố gắng việc thực tồn số điểm chưa đạt thời gian có hạn Khâu thiết kế xử lý giao diện vụng Cách khắc phục: Tham khảo tài liệu sách củng internet, nhờ vào hướng dẫn, góp ý, đóng góp ý tưởng giảng viên hướng dẫn Lê Văn Vinh nên hoàn thành tốt tiến độ 6.3 Ưu điểm - Thông tin lưu trữ trực quan, quán Có độ bảo mật tốt json web token Giao diện đại, dễ nhìn, thân thiện với người dùng Ứng dụng đơn giản, dễ sử dụng Áp dụng công nghệ Hệ thống chạy code online, tốc độ phản hồi nhanh 90 - Khả bảo trì, mở rộng dễ dàng, nhanh chóng Giao diện responsive mượt mà cho nhiều kích thước hình 6.4 Hướng phát triển - Cải thiện, phát triển nhiều tính có Hỗ trợ kết nối API từ bên thứ ba Tối ưu hóa nghiệp vụ Thêm animation cho kiện Thêm nghiệp vụ thu phí theo tháng đưa vào quảng cáo Hỗ trợ nhiều ngôn ngữ Cung cấp nhiều tour du lịch Xây dựng tính có hỗ trợ trí tuệ nhân tạo để tối ưu hóa hệ thống Hỗ trợ đa dạng dịch vụ 91 Tài liệu tham khảo Tiếng Việt [1] Technical Stack gì? (2017, May 23) Retrieved https://toidicodedao.com/2017/05/23/giai-thich-technical-stack-la-gi/ from [2] Giới thiệu MERN Stack (n.d.) Retrieved from https://niviki.com/gioi-thieumern-stack/ [3] Tìm hiểu MongoDB (2017, May 24) Retrieved from https://viblo.asia/p/timhieu-ve-mongodb-4P856ajGlY3 [4] Tìm hiều ExpressJS framework (2017, Jul 1) Retrieved from https://viblo.asia/p/phan-1-tim-hieu-express-js-framework-Qbq5Qq7m5D8 [5] Tìm hiểu Reactjs cách sử dụng (2016, Dec 27) Retrieved from https://viblo.asia/p/tim-hieu-reactjs-co-ban-va-cach-su-dung-BYjv4ke0GxpV [6] Le Van Giang (2018, September 15) Redux Retrieved from https://viblo.asia/p/redux-co-ban-m68Z00JdZkG [7] Nguyen Nhat Anh (2018, November 24) Giới thiệu Ant Design Retrieved from https://viblo.asia/p/gioi-thieu-ant-design-L4x5xwzblBM 92 ... địa điểm du lịch - Xử lý quy trình đặt tour - Hiển thị danh sách lịch sử đặt tour - Xem, thêm, xóa, sửa danh sách tour, danh sách viết thư viện du lịch - Thanh toán tour 3.1.3 Yêu cầu đặt 3.1.3.1... MERN STACK 3.1.2 Chức trang web Đây website giới thiệu tour du lịch đến người có nhu cầu du lịch đặt tour online Có chức sau: - Đăng ký, đăng nhập phân quyền - Cập nhật thông tin cá nhân - Đặt tour. .. Giao diện xem lịch sử đặt tour user: Hình 4.16 Giao diện xem lịch sử đặt tour user 39 Bảng 4.6 Đặc tả giao diện xem lịch sử đặt tour user STT Kiểu Mô tả/Ghi Input Nhập thông tin tour để tìm kiếm