(Đồ án hcmute) xây dựng trang website đặt phòng khách sạn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THƠNG TIN XÂY DỤNG WEBSITE ĐẶT PHỊNG KHÁCH SẠN GVHD: ThS LÊ THỊ MINH CHÂU SVTH: PHẠM THỊ NHƯ HẢO MSSV: 16110068 SVTH: NGUYỄN THỊ DIỆU HUYỀN MSSV: 16110094 SKL 0 7 Tp Hồ Chí Minh, tháng 12/2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẶT PHÒNG KHÁCH SẠN SVTH : PHẠM THỊ NHƯ HẢO MSSV : 16110068 SVTH : NGUYỄN THỊ DIỆU HUYỀN MSSV : 16110094 Khóa : 2016 Ngành : CƠNG NGHỆ THÔNG TIN GVHD : THS LÊ THỊ MINH CHÂU Tp Hồ Chí Minh, tháng 12 năm 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE ĐẶT PHÒNG KHÁCH SẠN SVTH : PHẠM THỊ NHƯ HẢO MSSV : 16110068 SVTH : NGUYỄN THỊ DIỆU HUYỀN MSSV : 16110094 Khóa : 2016 Ngành : CÔNG NGHỆ THÔNG TIN GVHD : THS LÊ THỊ MINH CHÂU Tp Hồ Chí Minh, tháng 12 năm 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** Tp Hồ Chí Minh, ngày 30 tháng 12 năm 2020 NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Phạm Thị Như Hảo Họ tên sinh viên: Nguyễn Thị Diệu Huyền Ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: ThS Lê Thị Minh Châu Ngày nhận đề tài: 14/09/2020 MSSV: 16110068 MSSV: 16110094 Lớp: 16110ST3 ĐT: 090 220 0557 Ngày nộp đề tài: 28/12/2020 Tên đề tài: Ứng dụng Vuejs version Spring Restful API vào xây dựng website đặt phòng khách sạn Các số liệu, tài liệu ban đầu: sách link trang web phần tài liệu tham khảo Nội dung thực đề tài: - Tìm hiểu nghiệp vụ trang web đặt phòng chuỗi khách sạn - Nghiên cứu vận dung công nghệ Vuejs version 2, Spring Restful API - Xây dựng website đề tài phần đặt phịng quản lý thơng tin hệ thống khách sạn Sản phẩm: Website đặt phòng khách sạn TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN Nguyễn Đăng Quang Lê Thị Minh Châu i an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên sinh viên: Phạm Thị Như Hảo MSSV: 16110068 Họ tên sinh viên: Nguyễn Thị Diệu Huyền MSSV: 16110094 Ngành: Công nghệ thông tin Tên đề tài: Ứng dụng Vuejs version Spring Restful API vào xây dựng website đặt phòng khách sạn Giảng viên hướng dẫn: ThS Lê Thị Minh Châu NHẬN XÉT Về nội dung đề tài & khối lượng thưc hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng năm 20… Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ii an CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên: Phạm Thị Như Hảo MSSV: 16110068 Họ tên sinh viên: Nguyễn Thị Diệu Huyền MSSV: 16110094 Ngành: Công nghệ thông tin Tên đề tài: Ứng dụng Vuejs version Spring Restful API vào việc xây dựng website đặt phòng khách sạn Giảng viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thưc hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng chữ: ) Tp Hồ Chí Minh, ngày tháng năm 20… Giáo viên phản biện (Ký & ghi rõ họ tên) iii an LỜI CẢM ƠN Lời đầu tiên nhóm chúng em xin gửi lời cảm ơn đến khoa Đào tạo Chất lượng cao tạo điều kiện thuận lợi cho chúng em thực đồ án tốt nghiệp Chúng em xin gửi lời cảm ơn đến quý thầy cô môn khoa Đào Tạo Chất Lượng Cao nói chung, ngành Cơng Nghệ Thơng Tin nói riêng tận tình giảng dạy, trang bị cho chúng em kiến thức quý báu suốt thời gian học tập đại học, cung cấp kiến thức cần thiết hỗ trợ cho chúng em việc thực đề tài Cuối nhóm chúng em xin gửi lời cảm ơn chân thành sâu sắc đến Lê Thị Minh Châu tiếp nhận tận tình dẫn nhóm chúng em thực đồ án tốt nghiệp Đây khoảng thời gian chúng em bắt đầu với cơng việc ngồi doanh nghiệp khơng có điều kiện để đến trường vào hành khơng ngại vất vả sẵn sàng dành khoảng thời gian nghỉ ngơi ban đêm để tạo điểu kiện thuận lợi cho chúng em báo cáo tiến độ Những lời góp ý, dạy cô hành trang quý báu cho chúng em đường sự nghiệp sống sau Mặc dù có nhiều cố gắng thời gian có hạn, trình độ, kĩ cịn nhiều hạn chế nên chắn khơng thể tránh khỏi thiếu sót Rất mong nhận sự đóng góp, bảo, bổ sung từ quý thầy cô Chúng em xin chân thành cảm ơn Tp Hồ Chí Minh, tháng 12 năm 2020 Sinh viên thực Sinh viên thực Phạm Thị Như Hảo Nguyễn Thị Diệu Huyền iv an TÓM TẮT Đây đề tài nhóm tác giả lựa chọn phát triển nhằm mục đích xây dựng trang web hỗ trợ cung cấp dịch vụ đặt phòng cho chuỗi khách sạn Website có chức sau: - Hỗ trợ người dùng đăng nhập Facebook Google Hỗ trợ người dùng tìm kiếm thơng tin phịng phù hợp với nhu cầu cách đơn giản, nhanh chóng Cho phép người dùng thực việc đặt phịng online Cho phép người dùng thực thao tác tốn Paypal sau đặt phịng Hỗ trợ người chủ khách sạn thực việc quản lí thơng tin liệu có hệ thống khách sạn chi nhánh, phòng, dịch vụ, … Cho phép nhân viên khách sạn thực việc xuất hóa đơn cho khách hàng, xem thơng tin đặt phịng quản lí thông tin cá nhân Để thực đề tài nhóm tác giả thực khảo sát trạng, tìm hiểu nghiệp vụ từ trang web chuổi khách sạn lớn nước như: vinpearl, sixsense, … Với mục đích xây dựng website có giao diện thân thiện với người dùng, cung cấp chức cần thiết cho trang đặt phòng kèm với khả mở rộng phát triển, nhóm lựa chọn sử dụng framework Vuejs kết hợp với Bootstrap Material design để xây dựng giao diện người dùng kết hợp với Spring framework để xây dựng nên REST API phía server v an MỤC LỤC NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP i NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN iii LỜI CẢM ƠN iv TÓM TẮT v MỤC LỤC vi DANH MỤC TỪ VIẾT TẮT ix DANH MỤC BẢNG BIỂU x DANH MỤC HÌNH ẢNH xi Chương TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Khảo sát trạng 1.2.1 Trang web https://www.vinpearl.com/ 1.2.2 Trang web https://www.sixsenses.com/ 1.3 Mục tiêu đề tài Chương CƠ SỞ LÝ THUYẾT 10 2.1 Tổng quan REST RESTful API 10 2.1.1 Khái niệm 10 2.1.2 Cách thức hoạt động 12 2.1.3 Ưu điểm 13 2.1.4 Nhược điểm 13 2.2 Tổng quan framework Vuejs 13 2.2.1 Giới thiệu framework Vuejs 13 2.2.2 Ưu điểm Vuejs 14 2.2.3 Nhược điểm Vuejs 15 2.3 Tổng quan Spring Framework 15 2.3.1 Giới thiệu Spring Framework 15 2.3.2 Ưu điểm Spring Framework 16 2.3.3 Spring Boot Spring MVC 17 vi an Chương 3: PHÂN TÍCH VÀ MƠ HÌNH HÓA YÊU CẦU 18 3.1 Yêu cầu người dùng 18 3.2 Yêu cầu hệ thống 18 3.2.1 Các tác nhân hệ thống 18 3.2.2 Chức tác nhân 19 3.2 Lược đồ Usecase 21 3.3 Đặc tả usecase tính bật 22 Chương THIẾT KẾ HỆ THỐNG 27 4.1 Thiết kế liệu 27 4.1.1 Mơ hình ERD 27 4.1.2 Mô tả bảng 28 4.2 Kiến trúc hệ thống 35 4.2.1 Front-end 35 4.2.2 Back-end 36 4.3.Thiết kế xử lí 36 4.3.1 Sequence Diagram (Lược đồ tuần tự) 36 4.3.2 Class Diagram (Lược đồ lớp) 41 4.3.2.5 Class Diagram đối tượng booking 44 4.4 Thiết kế giao diện 45 4.4.1 Screen flow giao diện phía người dùng guest 45 4.4.2 Screen flow giao diện người dùng user 47 4.4.3 Screen flow giao diện người dùng Admin 49 4.4.3 Screen flow giao diện người dùng employee 51 4.4.1 Giao diện quản lí Admin 52 4.4.2 Giao diện phía người dùng 60 Chương CÀI ĐẶT 73 5.1 Cài đặt môi trường cần thiết 73 5.2 Cài đặt source code phía front-end 73 5.3 Cài đặt source code phía back-end 75 Chương 6: KẾT LUẬN VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 77 6.1 Kết luận 77 vii an Báo cáo đồ án tốt nghiệp Address Branch Phone Có Có Label Địa branch Label Số điện thoại Hình 28 Màn hình hiển thị danh sách phòn Bảng 14 Đặc tả chi tiết hình hiển thị thơng tin phịng STT Tên Our Rooms Room Bắt buộc Có Có Định dạng Chú thích Label Label Chương 4: Thiết kế hệ thống column Room 66 an Báo cáo đồ án tốt nghiệp 10 11 12 13 14 15 16 17 Number Name Service ImageRoom nameRoom amountPeople bed Service Select Number Price Select Có Có Có Có Có Có Có Có Có Booking Information DateCheckInOut Amount of people Room Information Total Lable Price Image Label Label Label Label Select Label Button column number column price column image Thơng tin tên phịng Tổng số lượng người lớn phịng Thơng tin loại giường phòng số giường Liệt kệ dịch vụ hỗ trợ phòng Hiển thị danh sách số lượng phòng cịn trống Thơng tin giá phịng Thực cập nhập số phòng chọn bên form xác nhận Label Label Label Label Label Chương 4: Thiết kế hệ thống Cập nhập số lượng loại phòng mà user chọn Cập nhập tổng user chọn 67 an Báo cáo đồ án tốt nghiệp Hình 29 Màn hình giao diện thông tin liên lạc Bảng 15 Đặc tả hình giao diện thơng tin liên lạc STT Tên Contract Message Name Email Phone Send Address Bắt buộc Có Có Có Có Có Có Có Định dạng Label Input Input Input Label Button Label Chương 4: Thiết kế hệ thống Chú thích Nhập tin nhắn message Nhập tên khách hàng Nhập email nhận thông tin Số điện thoại Thực gửi thông tin nhập cho khách sạn Địa khách sạn 68 an Báo cáo đồ án tốt nghiệp Phone Email Có Có Label Label Chương 4: Thiết kế hệ thống Số điện thoại khách sạn Địa email khách sạn 69 an Báo cáo đồ án tốt nghiệp Hình 30 Màn hình đăng kí Bảng 16 Đặc tả chi tiết hình đăng kí STT Tên Close Create Account Name Email Phone Id Card Password Register Bắt buộc Có Có Có Có Có Có Có Có Định dạng Chú thích Icon Label Text Text Text Text Text Button Chương 4: Thiết kế hệ thống Tên full name Nhập email dùng để đăng kí tài khoản Nhập số điện thoại đăng kí tài khoản Nhập IdCard Nhập password Call API Đăng ký tài khoản thực đăng kí tài khoản 70 an Báo cáo đồ án tốt nghiệp 10 FaceBook Google Button Có Button Có Call API Đăng ký Tài khoản Facebook Capp API Đăng ký tài khoản Google Hình 31 Mản hình login Bảng 17 Đặc tả hình login STT Tên Close Sign In Email Pass Remember me Sign in Sign up now Bắt buộc Có Có Có Có Có Có Có Định dạng Icon Label Text Text Check Box Button Link Chương 4: Thiết kế hệ thống Chú thích Tên email/ username Nhập password tài khoản Call API Đăng nhập Đóng popup login, mở popup register 71 an Báo cáo đồ án tốt nghiệp FaceBook Google Có Có Button Button Chương 4: Thiết kế hệ thống Call API Đăng nhập Tài khoản facebook Capp API Đăng nhập tài khoản google 72 an Báo cáo đồ án tốt nghiệp Chương CÀI ĐẶT 5.1 Cài đặt môi trường cần thiết Tải cài đặt nodejs đường dẫn: https://nodejs.org/en/download/ Tải cài đặt môi trường phát triển Java đường dẫn: https://www.oracle.com/java/technologies/javase-jdk15-downloads.html Lựa chọn phiên phù hợp, tải cài đặt theo bước Tải cài đặt Maven đường dẫn: https://maven.apache.org/download.cgi Lựa chọn phiên phù hợp, tải cài đặt theo bước Tải cài đặt MySQL để quản lí liệu đường dẫn: https://dev.mysql.com/downloads/mysql/ Lựa chọn phiên 8.0.x , tải cài đặt theo bước Bước 2: Tải source code địa chỉ: https://github.com/HaoPham1912/HotelManagement Bước 3: Cài đặt source code Hình Thành phần repository sau clone tải giải nén 5.2 Cài đặt source code phía front-end Souce code gồm hai project front-end có tên h2fe admin-frontend nhằm tách giao diện user admin thành hai phần riêng biệt Cách cài đặt hai project hoàn tồn giống Bước 1: Tại chương trình editor (VS Code, Sublime Text, WebStorm, …) tiến hành mở folder chứa project front-end Chương 5: Cài đặt 73 an Báo cáo đồ án tốt nghiệp Hình Project sau mở VS Code Bước 2: Mở cửa sổ terminal trỏ đến thư mục chứa project, chạy lệnh npm install để tiến hành download cài đặt package cho project Hình Lệnh cài đặt package cho project Bước 3: Để chạy project thực hiên chạy lệnh npm run serve Chương 5: Cài đặt 74 an Báo cáo đồ án tốt nghiệp Hình Kết sau start project Bước 4: Truy cập vào hai đường dẫn để truy cập vào giao diện 5.3 Cài đặt source code phía back-end Bước 1: Mở thư mục HotelManagementSystem folder chứa repository tải clone trước IDE Trong trường hợp nhóm sử dụng IntelliJ IDEA Chương 5: Cài đặt 75 an Báo cáo đồ án tốt nghiệp Hình 5 Kết sau mở project IntelliJ IDEA Bước 2: Sau IntelliJ IDEA tự động cài đặt dependency hoàn tất Tiến hành start project Chương 5: Cài đặt 76 an Báo cáo đồ án tốt nghiệp Chương 6: KẾT LUẬN VÀ ĐỊNH HƯỚNG PHÁT TRIỂN 6.1 Kết luận 6.1.1 Kết đạt Sau kết thúc trình thực đề tài, kết thu trang web đáp ứng yêu cầu trang đặt phòng khách sạn, gồm chức như: - Tìm kiếm phịng dựa nhu cầu người dùng (theo khu vực, ngày đến, ngày đi, số lượng người) Lựa chọn phòng phù hợp với nhu cầu Đặt phịng Quản lí thơng tin khách sạn (chi nhánh, phịng, giường, dịch vụ, sách hủy phịng) Quản lí thơng tin đặt phịng, thơng tin hóa đơn khách hàng Xuất hóa đơn cho khách hàng trả phịng Quản lí chương trình ưu đãi, khuyến Giúp cho người dùng thực việc đặt phòng cách đơn giản, nhanh chóng Doanh nghiệp quản lí thơng tin hệ thống Trang web có giao diện trực quan sinh động, dễ sử dụng Thơng qua q trình tìm hiểu thực đề tài, nhóm tiếp thu vận dụng thêm kiến thức công nghệ - Vuejs framework áp dụng vào việc xây dựng giao diện Xây dựng nên API xử lí yêu cầu người dùng sử dụng Spring Boot Json Web Token (JWT) cách sử dụng JWT để xác thực người dùng hệ thống, Fireabase sử dụng Firebase storage để dùng làm bên thứ ba lưu trữ liệu hình ảnh hệ thống Bên cạnh kết thời gian có hạn thiếu kinh nghiệm làm việc với công nghệ làm cho trang web cịn hạn chế tồn đọng mặc tính lẫn thiết kế dẫn đến sản phẩm cuối tính hồn thiện kính mong q thầy thơng cảm 6.1.2 Hạn chế Bên cạnh kết đạt được, lí thời gian có hạn, nguồn lực thực đề tài nhiều hạn chế dẫn đến đề tài tồn nhiều nhược điểm, chưa đáp ứng hồn chỉnh tính mà trang đặt phịng khách sạn cần có như: - Chức hiển thị nội dung đa ngôn ngữ Chức tốn trực tuyến đa dạng hình thức Chương 6: Kết luận định hướng phát triển an 77 Báo cáo đồ án tốt nghiệp - Chức hồn tiền khách hàng hủy phịng thõa mãn điều kiện hồn tiền Chức gợi ý phịng cho khách hàng theo lịch sử đặt phòng Chức gửi tin nhắn, email thơng báo sách ưu đãi, xác nhận thơng tin đặt phịng Deploy chạy trang web mơi trường thực tế 6.2 Khó khăn Cịn hạn chế khả vận dụng công nghệ vào đề tài, làm nhiều thời gian, ảnh hưởng đến chất lượng sản phẩm 6.3 Định hướng phát triển Trong tương lai, nhóm tiến hành chỉnh sửa cách tổ chức lại source code cách khoa học, dễ phát triển mở rộng Thực chỉnh sửa tính cịn phát sinh lỗi xây dựng thêm chức mà trang web thiếu, liệt kê mục hạn chế Triển khai trang web môi trường thực tế Chương 6: Kết luận định hướng phát triển an 78 Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO Tiếng Việt [1] https://topdev.vn/blog/restful-api-la-gi/ [2] https://phambinh.net/bai-viet/restful-api-la-gi-cung-tim-hieu-ve-restful-api/ [3] https://blog.itnavi.com.vn/spring-la-gi-spring-framework-cua-java/ Tiếng Anh [4] https://www.geeksforgeeks.org/rest-api-architectural-constraints/ [5] https://www.javatpoint.com/spring-tutorial [6] https://vuejs.org/ [7] https://spring.io/ Link Github: https://github.com/HaoPham1912/HotelManagement Tài liệu tham khảo 79 an S an K L 0 ... vào xây dựng website đặt phòng khách sạn Các số liệu, tài liệu ban đầu: sách link trang web phần tài liệu tham khảo Nội dung thực đề tài: - Tìm hiểu nghiệp vụ trang web đặt phòng chuỗi khách. .. khách sạn - Nghiên cứu vận dung công nghệ Vuejs version 2, Spring Restful API - Xây dựng website đề tài phần đặt phịng quản lý thơng tin hệ thống khách sạn Sản phẩm: Website đặt phòng khách sạn. .. thực việc đặt phòng online Cho phép người dùng thực thao tác toán Paypal sau đặt phòng Hỗ trợ người chủ khách sạn thực việc quản lí thơng tin liệu có hệ thống khách sạn chi nhánh, phòng, dịch