Đồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hànhĐồ án tốt nghiệp: Xây dựng Website quản lý và kinh doanh vụ lữ hành
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM HOÀNG TRỌNG TẤN – 16110454 NGUYỄN NGỌC HOÀNG VY - 16110530 Đề tài: XÂY DỰNG WEBSITE QUẢN LÝ VÀ KINH DOANH DỊCH VỤ LỮ HÀNH KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2016 – 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CƠNG NGHỆ PHẦN MỀM HỒNG TRỌNG TẤN – 16110454 NGUYỄN NGỌC HOÀNG VY - 16110530 Đề tài: XÂY DỰNG WEBSITE QUẢN LÝ VÀ KINH DOANH DỊCH VỤ LỮ HÀNH KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2016 – 2020 LỜI CẢM ƠN Để hoàn thành tiểu luận chúng em xin tỏ lòng biết ơn sâu sắc đến thầy Lê Văn Vinh trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh tận tình hướng dẫn tạo điều kiện giúp đỡ em suốt trình thực báo cáo làm sản phẩm demo Một lần em chân thành cảm ơn thầy chúc thầy dồi sức khoẻ Tuy nhóm cố gắng tìm hiểu và đọc tài liệu từ nhiều nguồn khác nhau, vốn hiểu biết để thực đề tài nội dung đề tài không tránh khỏi thiếu sót Kính mong đóng góp ý kiến q thầy để em hồn thiện báo cáo góp ý cho sản phẩm demo, là sở vững để sau trường làm việc Chúng em xin chân thành cảm ơn! i LỜI CAM ĐOAN Chúng xin cam đoan: Những nội dung tiểu luận thực hướng dẫn trực tiếp thầy Lê Văn Vinh Mọi tham khảo dùng tiểu luận trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm công bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, chúng tơi xin chịu hồn tồn trách nhiệm./ Tp.Hồ Chí Minh, ngày tháng (Ký & ghi rõ họ tên) Đại diện nhóm ii năm 2020 ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN ******** ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP Họ tên sinh viên thực 1: Hoàng Trọng Tấn MSSV 1: 16110454 Họ tên sinh viên thực 2: Nguyễn Ngọc Hoàng Vy MSSV 2: 16110530 Thời gian làm tiểu luận: từ 16/03/2020 đến 30/7/2020 Chuyên ngành: Công nghệ phần mềm Tên tiểu luận: Xây dựng website quản lý và kinh doanh dịch vụ lữ hành Giáo viên hướng dẫn: Tiến sĩ Lê Văn Vinh Nhiệm vụ tiểu luận: Lý thuyết: - Lý thuyết liên quan đến dịch vụ lữ hành - Javascript language (ES6, ES7, ES9), Boostrap UI(v4.0), jQuery, Ajax - Expressjs framework: RESTful API, Routing, Middleware - Reactjs library: JSX, State and Lifecycle, Handling Events, Redux (actions, reducers, store), React Router DOM (Link, Redirect, match, authencation, query parameters) - Ant design framework (v3.x): config with react, components Thực hành: - Xây dựng ứng dụng website quản lý dành cho admin và trang người dùng dành cho khách hàng muốn cung cấp dịch vụ lữ hành (tour) iii Kế hoạch thực hiện: STT Thời gian Nội dung công việc Ghi Tiến hành khảo sát Tuần (17/03/2020) trạng, xác định yêu cầu Xác nhận đề tài thiết kế phần mềm, vẽ Use case, Sequence, Class Diagram Tuần (16/04/2020) Tuần Báo cáo phần khảo sát trạng, xác Sửa lại usecase tiến định yêu cầu thiết kế phần mềm, hành thiết kế giao diện hướng dẫn xác định sản phẩm làm Báo các chức ban đầu Tiếp tục hồn thành (14/05/2020) nhận góp ý giao diện CSDL Tuần 10 (28/05/2020) Tuần 14 Tuần 15 chức Báo cáo giao diện chức Tiếp tục chức làm, góp ý phần chưa hợp lý giao tạo report và toán diện online Báo cáo chức hoàn thành Thực chức (25/06/2020) phần viết báo cáo Thực chức lại Báo cáo tổng kết nội dung thực Báo cáo xin chữ ký xác (02/07/2020) nhận GVHD Chữ ký sinh viên 1: …………………………… Chữ ký sinh viên 1: …………………………… Tp Hồ Chí Minh, ngày……tháng……năm 20… Ý kiến giáo viên hướng dẫn Người viết đề cương (Ký & ghi rõ họ tên) (Ký & ghi rõ họ tên) iv MỤC LỤC Trang LỜI CẢM ƠN i LỜI CAM ĐOAN ii MỤC LỤC v DANH MỤC CHỮ VIẾT TẮT xi DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ xii DANH MỤC BẢNG BIỂU xvi PHẦN MỞ ĐẦU 1 Tính cấp thiết đề tài Mục đích đề tài Cách tiếp cận phương pháp nghiên cứu 3.1 Đối tượng nghiên cứu 3.2 Phương pháp nghiên cứu Kết dự kiến đạt PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Tổng quan ExpressJS Framework 1.1.1 Khái niệm lịch sử phát triển 1.1.2 Một vài tính bậc 1.1.3 Các thành phần [24] Tổng quan ReactJS Framework 1.2 1.2.1 Khái niệm reactjs lịch sử hình thành 1.2.2 Các khái niệm sử dụng reactjs v Ưu nhược điểm Chương 2: KHẢO SÁT HIỆN TRẠNG 10 1.2.3 2.1 Website: tugo.com.vn 10 2.1.1 Một số hình ảnh 10 2.1.2 Ưu điểm 10 2.1.3 Nhược điểm 11 2.2 Website: saigontourist.net 12 2.2.1 Một số hình ảnh 12 2.2.2 Ưu điểm 13 2.2.3 Nhược điểm 16 Website: ivivu.com 17 2.3 2.3.1 Một số hình ảnh 17 2.3.2 Ưu điểm 18 2.3.3 Nhược điểm 19 Website: mytour.vn 20 2.4.1 Một số hình ảnh 20 2.4.2 Ưu điểm 21 2.4.3 Nhược điểm 23 2.4 2.5 Website: travel.com.vn 24 2.5.1 Một số hình ảnh 24 2.5.2 Ưu điểm 25 2.5.3 Nhược điểm 27 2.6 Kết luận 27 Chương 3: XÁC ĐỊNH YÊU CẦU 28 vi 3.1 Lược đồ use case 28 3.2 Thống kê nghiệp vụ cho đối tượng 29 3.2.1 Người dùng 29 3.2.2 Quản trị viên 47 Chương 4: THIẾT KẾ PHẦN MỀM 57 4.1 Lược đồ lớp 57 4.1.1 Lược đồ lớp cho chức phân quyền 57 4.1.2 Lược đồ lớp cho chức liên quan đến tour 58 4.1.3 Lược đồ lớp cho chức liên quan đến toán tour 60 4.1.4 Lược đồ lớp cho chức liên quan đến blog 61 4.1.5 Lược đồ lớp cho chức liên quan đến thông báo 62 4.1.6 Lược đồ lớp cho chức liên quan đến thẻ dịch vụ 62 4.2 Lược đồ 63 4.2.1 Chức đăng ký (U-DK) 63 4.2.2 Chức xác thực email (U-XTM) 64 4.2.3 Chức đăng nhập (U-DN, A-DN) 65 4.2.4 Chức sửa thông tin tài khoản (U-STK, A-STK) 66 4.2.5 Chức đặt lại mật (U-DLMK, A-DLMK) 67 4.2.6 Chức tìm kiếm tour (U-TKT) 68 4.2.7 Chức đặt tour (U-DT) 69 4.2.8 Chức toán tour (U-TTT) 70 4.2.9 Chức đánh giá tour (U-DGT) 71 4.2.10 Chức yêu cầu tư vấn (U-YCTV) 71 4.2.11 Chức xem trang chủ admin(A-XTC) 72 vii 4.2.12 Chức thêm tour (A-TT) 73 4.2.13 Chức sửa tour (A-ST) 74 4.2.14 Chức xóa tour (A-XT) 75 4.2.15 Chức sửa lịch trình tour (A-SLTT) 76 4.2.16 Chức thống kê doanh thu (A-TKDT) 77 4.3 Lược đồ sở liệu 78 4.3.1 Mô tả bảng 82 4.3.2 Danh sách chi tiết bảng 82 Chương 5: THIẾT KẾ GIAO DIỆN 5.1 92 Giao diện trang khách 92 5.1.1 Giao diện trang chủ (GD-U-XTC) 92 5.1.2 Giao diện điều hướng 97 5.1.3 Giao diện footer 98 5.1.4 Giao diện trang danh mục tour (GD-U-XDMT) 99 5.1.5 Giao diện trang chi tiết tour (GD-U-XCTT) 100 5.1.6 Giao diện đánh giá tour 102 5.1.7 Giao diện trang đăng ký (GD-U-DK) 103 5.1.8 Giao diện trang đăng nhập (GD-U-DN) 105 5.1.9 Giao diện trang đặt lại mật (GD-U-DLMK) 105 5.1.10 Giao diện trang đặt tour (GD-U-DT) 107 5.1.11 Giao diện trang toán cổng ngân lượng (GD-U-TTT) 111 5.1.12 Giao diện trang ordered (GD-U-ORDER) 112 5.1.13 Giao diện trang blog (GD-U-XBDL) 113 5.1.14 Giao diện trang blog-single (GD-U-XBV) 114 viii Bảng 6.12 Bảng trường hợp kiểm thử chức trang đăng nhập ID Test Test Steps Description (Procedure) FNC_ Kiểm DN01 chức Expected Result Status tra Nhập thông Hệ thống validate ô nhập liệu Pass tin đầy đủ trả kết sai trường ấn xác nhận validate nhập liệu FNC_ Kiểm tra nút Nhập Nếu thơng tin hợp lệ khơng Pass DN02 nhấn Đăng liệu đăng nhập thơng báo validate khơng thông Chọn đăng báo nhập nhập Nếu email không tồn hệ thống trả kết “email khơng tồn hệ thống” Nếu password sai hệ thống trả “password is wrong” 6.2.9 Kiểm thử trang đăng nhập admin Đường dẫn: (https://admin-kinhdoanhtourdulich.herokuapp.com/login) Module: login Pre-condition: Không Test Priority: Bảng 6.13 Bảng trường hợp kiểm thử giao diện trang đăng nhập admin ID Test Description Expected Result Test Steps (Procedure) Status Kiểm tra UI UI_DN07 Kiểm tra vị trí Kiểm tra vị trí Như giao diện GD-A- Pass thành header phần DN Kiểm tra vị trí nhập liệu thông tin đăng ký UI_DN08 Kiểm tra menu Như UI_XTC02 Như giao diện GD-A- Pass DN UI_DN09 Kiểm tra “look 1.Cuộn trang load Các thành phần Pass and feel” trang thành công 154 face up cuộn trang UI_DN10 Kiểm tra Kiểm tra nút nhấn Các nút nhấn nhấn Pass nút nhấn UI_DN11 UI_DN12 Register Kiểm tra Kiểm tra liên kết Các liên kết không Pass liên kết dẫn tới phần cuối đăng ký chuyển trạng thái, không trang nội load lại trang tra Hover lên biểu tưởng Hiển thị tooltip miêu Pass Kiểm tooltip dấu hỏi trường tả tương ứng miêu tả input nhập liệu step Kiểm tra Validate VD_DN02 tra Kiểm tra validate ô Không chấp nhận để Pass Kiểm validate nhập E-mail: trường trống chấp nhận nhập Kiểm tra validate ô email hợp lệ thông tin đăng nhập Password Không chấp nhận để ký nội dung trống trang Bảng 6.14 Bảng trường hợp kiểm thử chức trang đăng nhập admin ID Test Test Steps Description (Procedure) FNC_ Kiểm DT03 chức validate Expected Result Status tra Nhập thông Hệ thống validate ô nhập liệu Pass tin đầy đủ trả kết sai trường ấn xác nhận nhập liệu FNC_ Kiểm tra nút Nhập Nếu thơng tin hợp lệ khơng Pass DT04 nhấn nhập Đăng liệu đăng nhập thông báo validate khơng thơng Chọn đăng báo nhập Nếu email không tồn hệ thống trả kết “email không tồn hệ thống” Nếu password sai hệ thống trả “password is wrong” 155 6.2.10.Kiểm thử trang chủ admin Đường dẫn: (https://admin-kinhdoanhtourdulich.herokuapp.com/) Module: thông tin report, line chart, circle chart Pre-condition: Đã đăng nhập Test Priority: Bảng 6.15 Bảng trường hợp kiểm thử giao diện trang chủ admin ID Test Test Steps (Procedure) Description Expected Result Status Kiểm tra UI Như giao UI_ Kiểm tra vị trí Kiểm tra vị trí header XTC08 thành Kiểm tra vị trí card thông GD-A-XTC phần diện Pass tin thống kê Kiểm tra vị trí line chart report Kiểm tra vị trí circle chart report Kiểm tra vị trí thành phần khác Kiểm tra vị trí thành phần sidebar Kiểm tra vị trí thành phần topbar Kiểm tra vị trí thành phần footer Kiểm tra vị trí backtop 10 Kiểm tra vị trí messenger plugin UI_ Kiểm XTC09 menu tra Kiểm tra menu đầu trang (sidebar Như topbar) giao diện Pass GD-A-XTC Kiểm tra thành phần menu UI_ Kiểm XTC10 “look tra cuộn trang load trang thành Các thành phần Pass face up and công feel” cuộn trang UI_ Kiểm tra Kiểm tra search engine - ô nhập từ Các ô input Pass XTC11 trường quy cách GD- nhập khóa liệu A-XTC UI_ Kiểm tra Kiểm tra nút nhấn tìm kiếm Các nút nhấn có Pass XTC12 nút nhấn Kiểm tra nút đóng sidebar 156 thể nhấn Kiểm tra nút plugin messenger UI_ Kiểm tra Kiểm tra liên kết tới kết Các liên kết không Pass XTC13 liên kết dẫn tới tìm kiếm trang kết tìm kiếm Kiểm tra liên kết sidebar trang nội chuyển trạng thái, không load lại Kiểm tra liên kết trang thành phần email notifications Kiểm tra liên kết phần footer UI_ Kiểm tra Kiểm tra thứ tự tab tìm Thứ tự tab: Pass XTC14 thành phần tab kiếm search input, key, di chuyển Kiểm tra hover vào user mode, search button chuột, phím dashboard Tooltip hiển thị lên tương ứng: tắt, tooltip “Go to User MODE”, “Go to report and analytics Bảng 6.16 Bảng trường hợp kiểm thử chức trang chủ admin ID Test Test Steps Description (Procedure) FNC_ Kiểm XTC03 chức Expected Result Status tra Nhập từ khóa tìm Hệ thống validate nhập Pass kiếm liệu trả kết sai trường nhập liệu validate FNC_ Kiểm tra Nhấp vào biểu Hiển thị dropdown thông Pass XTC04 nút bấm hiển tượng thông báo báo thị dropdown Nhấp vào biểu Hiển thị dropdown email tương ứng: tưởng email email Hiển thị action user Nhấp vào biểu thông báo, tưởng avatar thông tin user FNC_ XTC05 Đăng xuất Nhấp vào biểu Dropdown actions Pass tưởng avatar 157 Modal hỏi đăng xuất hay Chọn logout khơng lên Nếu chọn có hệ thống đăng xuất quay trang login 6.2.11.Kiểm thử trang sửa tour Đường dẫn: (https://admin-kinhdoanhtourdulich.herokuapp.com/admin/tour) Module: thêm tour, thêm hình ảnh, xếp dịng liệu, lọc dịng liệu, tìm kiếm dịng liệu, phân trang, xóa dịng liệu, sửa dòng liệu Pre-condition: Đã đăng nhập Test Priority: Bảng 6.17 Bảng trường hợp kiểm thử giao diện trang sửa tour ID Test Description Test Steps (Procedure) Expected Result Status Kiểm tra UI UI_ Kiểm tra vị trí Kiểm tra vị trí header ST01 thành phần Như giao diện Pass Kiểm tra vị trí phần thơng tin GD-A-ST chức Kiểm tra vị trí bảng liệu Kiểm tra vị trí backtop Kiểm tra vị trí messenger plugin UI_ Kiểm tra menu ST01 Kiểm tra menu đầu trang Như giao diện Pass (sidebar topbar) GD-A-ST Kiểm tra thành phần menu UI_ Kiểm tra “look cuộn trang load trang thành Các thành Pass ST03 and feel” phần face công up trang 158 cuộn UI_ Kiểm tra Kiểm tra search engine - ô nhập từ Các ST04 trường nhập liệu input Pass quy cách khóa Kiểm tra trường nhập liệu GD-A-ST add tour UI_ Kiểm tra nút Kiểm tra nút nhấn tìm kiếm ST05 nhấn Các nút nhấn Pass Kiểm tra nút đóng sidebar nhấn Kiểm tra nút plugin messenger Kiểm tra nút add tour Kiểm nút edit, delete Kiểm tra nút phân trang UI_ Kiểm tra liên Kiểm tra liên kết tới trang sửa Các liên kết Pass ST06 kết dẫn tới trang lịch trình khơng chuyển Kiểm tra liên kết sidebar nội trạng thái, Kiểm tra liên kết không load lại thành phần email notifications trang Kiểm tra liên kết phần footer tra Như UI_XTC14 UI_ Kiểm ST07 thành phần tab key, di Như Pass UI_XTC14 chuyển chuột, phím tắt, tooltip Bảng 6.18 Bảng trường hợp kiểm thử chức trang sửa tour ID Test Test Steps Description (Procedure) FNC_ Kiểm tra chức Chọn add tour ST01 thêm tour Expected Result Bảng nhập liệu tạo Pass Nhập thông tin tour cần thiết Nếu thông tin không hợp Nhấn “+ Add” lệ, thông báo hiển thị Nhấn “Clear” trường nhập Nhấn “Cancle” Thêm tour 159 Status Toàn trường liệu bị làm trống Bảng nhập liệu tạo tour bị ẩn FNC_ Kiểm tra chức Nhấp vào Edit Các dòng liệu Pass ST02 sửa dịng button dịng chứa input liệu Kết lưu lại muốn sửa Sửa liệu cột thông báo hiển thị cho người muốn sửa dùng chọn save button FNC_ Kiểm tra chức Nhấp vào Edit Các dòng liệu Pass ST03 sửa dòng button dịng chứa input liệu cancel muốn sửa Ngay cancel button hiển Sửa liệu cột thị lên confirm hỏi có muốn muốn sửa hủy, chọn “có”, liệu chọn cancel button không thay đổi, chọn cancel thao tác giữ nguyên FNC_ Kiểm tra chức Nhấp chọn delete Hiển thị confirm hỏi có Pass ST04 delete button dịng liệu muốn xóa Dữ liệu xóa thơng dịng liệu muốn xóa xác nhận Chọn “có” báo cho người dùng với title confirm lên tour bị xóa button FNC_ Kiểm tra chức Nhấp chọn delete Hiển thị confirm hỏi có Pass ST05 delete button dịng liệu muốn xóa dịng liệu muốn xóa cancel Khơng tiến hành xóa Chọn “khơng” confirm lên button 160 FNC_ Kiểm tra chức Chọn dấu mở rộng Hiển thị hình ảnh theo Pass ST06 mở rộng dịng liệu (dấu +) hàng ngang dòng dòng liệu để Chọn upload liệu GD-A-ST thêm, sửa, xóa, Chọn file ảnh phù Mở dialog open file xem hỉnh ảnh hợp chọn Open Hình ảnh tải lên với hiệu tour ứng tải ô upload, web thông dialog Chọn biểu tường báo tải lên ảnh thành cơng với hình mắt tên file hover vào hình ảnh Mở dialog có hiển thị Chọn biểu tưởng hình ảnh hình ảnh download hover chọn vào hình ảnh Tải hình ảnh chọn, Chọn biểu tưởng mở hình ảnh tab thùng rác hover Hình ảnh bị xóa hiển thị vào hình ảnh thơng báo tên hình ành bị xóa FNC_ Kiểm tra chức Chọn dấu mở rộng Hiển thị hình ảnh theo Pass ST07 mở rộng dòng liệu (dấu +) dòng liệu để chọn sửa tour Chọn Go Schedule button hàng ngang dòng to liệu GD-A-ST Chuyển tới trang sửa lịch trình với tour expand tương ứng FNC_ Kiểm tra chức Nhấp vào tiêu đề Dữ liệu toàn bảng Pass ST08 xếp cột cột xếp theo cột với Nhấp tiếp tục cột liệu xếp theo alphabet từ lần xuống Nhấp tiếp tục cột Dữ liệu toàn bảng lần xếp theo cột với liệu xếp theo alphabet từ lên Dữ nguyên liệu cột ban đầu 161 FNC_ Kiểm tra chức Nhấp biểu tượng Hiển thị dropdown Pass ST09 tìm kiếm kính lúp tiêu đề cột cơng cụ tìm kiếm liệu theo cột cột Dữ liệu bảng hiển thị Nhập từ khóa phù hợp với kết tìm kiếm chọn button search với từ khóa tìm kiếm Nhấp vào biểu highlight màu vàng tượng kính lúp Hiển thị dropdown tiêu đề cột cột cơng cụ tìm kiếm với Chọn Reset button từ khóa trước Dữ liệu bảng hiển thị lại ban đầu trước tìm kiếm FNC_ Kiểm tra chức Load trang xong Hai cột fixed phía Pass ST10 fix hai cột bên phải Eidt Delete, Scroll hiển thị hoạt động Kiểm tra chức scroll bảng liệu vượt 400px (height), 1600px (width) FNC_ Kiểm tra chức Load liệu xong ST11 trang Tương ứng với phân Nhấp vào dòng liệu có nhiêu số phân trang Tải liệu trang tương ứng Nhấp vào first Load liệu trang Nhấp vào last Load liệu trang cuối Nhấp vào previous Nhấp vào next Nhấp liệu trang trước Nhấp liệu trang sau 162 PHẦN KẾT LUẬN Kết đạt Sau 15 tuần nghiên cứu, tìm hiểu làm việc em đạt kết sau: - Hiểu rõ khái nhiệm bản, phương thức hoạt động và vịng đời components react app Từ vận dụng để giải toán liên quan đến xây dựng front-end cho web kinh doanh dịch vụ lữ hành (tour) - Hiểu vận dụng thư viện redux, redux-thunk, react-router-dom để tích hợp vào front-end giải vấn đề mà thân reactjs chưa giải - Hiểu rõ cấu hình sử dụng Ant Design framework việc xây dựng frontend cho website với giao diện đẹp, dễ sử dụng và có tính tương tác cao Kết hợp với Boostrap v4.0 kiến thức biết HTML, CSS để responsive web sử dụng cho nhiều thiết bị với kích cỡ hình khác - Hiểu cách xây dựng server ứng dụng REST API sử dụng thư viện Express Giải vấn đề bảo mật thông tin nhạy cảm phân quyền truy cập route với token hợp lệ hay không kết hợp cookie, session Giải vấn đề hình ảnh lưu thư mục server - Sử dụng tốt git control (Github) để lưu trữ mã nguồn quản lý dự án, phân branch theo khối công việc thực hiện, backup (với 270 commits) - Đáp ứng yêu cầu ban đầu đề ra, tính ứng dụng cao thực tế - Nâng cao kỹ thân về: lập trình với javascript, HTML, CSS, MySQL, thiết kế giao diện, sử dụng API bên thứ ba (trong giải vấn đề toán online bằng cổng tốn (ngân lượng, MoMo, Paypal), cấu hình CkEditor để lưu trữ hình ảnh, plugin messenger facebook, gửi mail bằng gmail google), deploy lên hosting (cấu hình deploy), làm việc linh hoạt môi trường với dev production - Nâng cao kỹ viết trình bày báo cáo, lập hồ sơ kỹ thuật, tìm kiếm, giải vấn đề, xếp thời gian biểu lập kệ hoạch thực - Xây dựng thành công hệ thống website kinh doanh dịch vụ lữ hành Với trang cho người dùng sử dụng, trang cho quản trị viên API server 163 Ưu điểm đề tài - Giải vấn đề lập trình khó như: tốn online (qua cổng tốn), mơi trường cho người dùng tự trình bày ý tưởng (trong việc tạo lịch trình cho tour) - Giao diện đẹp, đơn giản dễ sử dụng và tính tương tác cao loại thiết bị khác (hạn chế cuộn trang bằng hiển thị theo slide) Tối ưu hóa trải nghiệm người dùng: với trạng thái chờ tải trang, tải liệu mới, thông báo sau hành động người dùng - Sử dụng nhiều thư viện lập trình viên ưa thích và hỗ trợ hồn thành nhanh nghiệp vụ hệ thống - Là SPA nên trải nghiệm người dùng cải thiện nhiều - Người mua bán tour dễ dàng liên hệ với để giải vấn đề kinh doanh khiếu nại khách hàng - Dễ dàng thay đổi đối tượng quản lý trang web (người nhận tiền, tài khoản nhận tiền khách hàng tốn, phơng màu website) với biến môi trường lưu hệ thống quản lý heroku.com - Hoàn thành chức sau: o Xem tour, đặt tour với toán online qua cổng toán: ngân lượng MoMo o Quản lý tour gồm hình ảnh lịch trình, sách và điều khoản, liên hệ, chi tiết giá, lưu ý cho tour o Xem viết quản lý viết o Đăng nhập, đăng ký, xác thực, đặt lại mật có xác thực qua mail, đăng nhập với Google Facebook o Thống kê doanh thu, doanh thu theo tháng và năm, loại hình số lượng người du lịch (cá nhân, cặp đơi, gia đình, bạn bè, doanh nghiệp), thống kê điểm đến khách theo khu vực (Việt Nam vùng miền Thế giới: Châu Á, Âu, Mỹ) o Yêu cầu tư vấn với messenger plugin o Hoạt động nhiều thiết bị với kích cỡ hình khác 164 Hạn chế đề tài - Hệ thống chưa hoàn thiện hoàn toàn, với chức tương tự chức xây dựng phương hướng lập trình gần thời gian đề tài ngắn nên lược bỏ - Việc tối ưu liệu lưu trữ chưa đáp ứng tính mở rộng hệ thống - Giao diện nhiều chỗ cần tinh chỉnh để cải thiện hiệu và trải nghiệm người dùng tốt - Hosting heroku chưa phù hợp với ứng dụng sử dụng reactjs (do sử dụng free nên có nhiều hạn chế hiệu năng, lưu trữ data) Hướng phát triển Vì điểm tồn hạn chế nêu trên, em rút biện pháp sau để khắc phục phát triển đề tài nữa, cụ thể là: - Hồn thiện chức cịn lại: tốn cho cổng toán khác, viết, tài khoản quản lý viết, tài khoản - Mở rộng tối ưu trải nghiệm sử dụng hiệu chức quan trọng - Thêm tính bật: chatbox với ngơn ngữ tự nhiên (NLP), thơng báo với lập trình socket, kết hợp âm báo hiệu cho người dùng, tự động đăng lên trang kết nối với facebook - Cấu hình nâng cao Ant Design Pro để dễ tùy biến tinh chỉnh chức theo ý tưởng khách hàng yêu cầu thực tế ứng dụng - SEO cho website – tăng ưu đãi không giảm giá - Phát triển thêm tính liên quan đến quản lý xe, quản lý hướng dẫn viên du lịch, phân loại khách hàng - Phát triển thêm chức liên quan đến quản lý đơn hàng phía người quản trị viên - Phát triển thêm tính quản lý tour theo thời lượng ngày khởi hành, nên hiển thị tour có ngày khởi hành đến và tiến hành trực quan - Cải thiện nghiệp vụ nhanh chóng dễ dàng thao tác - Sử dụng tích hợp thêm cho dự án: 165 o Webpack module bundler để cấu hình project, o Nextjs framework để tích hợp tính auth, routing serverrendered o Docker để build, run deploy lên server mà nắm quyền quản lý server từ xa, (giải vấn đề heroku – hosting trạng thái ngủ khơng có người dùng truy cập, vấn đề upload file missing heroku) 166 DANH MỤC TÀI LIỆU THAM KHẢO Sách: [1] David Flanagan, JavaScript: The Definitive Guide 6th Edition, O’Reilly Media ,5/2011 [2] Scott Chacon and Ben Straub, Pro Git 2nd Edition, 2009, apresss, 2014, Tài liệu số: [3] AWS https://aws.amazon.com/vi/ [4] BX Bizcharts https://bizcharts.net/ [5] CKSource - CKEditor https://ckeditor.com/ckeditor-5/ [6] Colorlib https://colorlib.com/wp/free-travel-website-templates/ [7] Creative Tim https://www.creative-tim.com/bootstrap-themes [8] CSSgradient.io https://cssgradient.io/ [9] Dan Abramov and the Redux documentation authors, https://react-redux.js.org/ [10] Erik Rasmussen, https://redux-form.com/, v8.2.2 [11] Facebook Open Source, https://reactjs.org/docs , v16.12.0 [12] Github, https://github.com [13] ivivu.com, https://www.ivivu.com/ [14] Jean-Philippe Sirois Zack Hall, https://lodash.com/ , Lodash [15] MoMo https://developers.momo.vn/ [16] Mozilla, https://developer.mozilla.org/vi/docs/Web/ , Last modified: 9/9/2019 [17] mytour.vn https://mytour.vn/ [18] Nganluong.vn https://www.nganluong.vn/ [19] PuTTY https://www.putty.org/ [20] React Training, https://reacttraining.com/react-router/ [21] SaigonTourist, https://www.saigontourist.net/ [22] SSLForFree https://www.sslforfree.com/ [23] Stack Exchange Inc https://stackoverflow.com/ [24] TJ Holowaychuk, https://expressjs.com/ , v4.17.1 [25] travel.com.vn https://travel.com.vn/ [26] Tugo.com.vn, https://tugo.com.vn [27] W3schools, https://www.w3schools.com/ [28] XTech, https://ant.design/ v4.0 Khác: [29] Nganluong.vn, Tài liệu tích hợp CHECKOUT TIÊU CHUẨN Version 2.0, HN-02/2017 167 ... Tên tiểu luận: Xây dựng website quản lý và kinh doanh dịch vụ lữ hành Giáo viên hướng dẫn: Tiến sĩ Lê Văn Vinh Nhiệm vụ tiểu luận: Lý thuyết: - Lý thuyết liên quan đến dịch vụ lữ hành - Javascript... 16110530 Đề tài: XÂY DỰNG WEBSITE QUẢN LÝ VÀ KINH DOANH DỊCH VỤ LỮ HÀNH KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHĨA 2016 – 2020 LỜI CẢM ƠN Để hồn thành tiểu luận chúng... nghiệp vụ xem trang quản lý viết (11) quản trị viên 53 Bảng 3.29 Đặc tả nghiệp vụ xem trang quản lý thông báo (16) quản trị viên 53 Bảng 3.30 Đặc tả nghiệp vụ xem trang thống kê (21) quản trị