Xây dựng giao diện website quản lý và đặt phòng tại khách sạn clement

TRƯỜNG ĐẠI HỌC KINH TẾ KHOA THỐNG KÊ – TIN HỌC BÁO CÁO THỰC TẬP NGHỀ NGHIỆP NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN XÂY DỰNG GIAO DIỆN WEBSITE QUẢN LÝ VÀ ĐẶT PHÒNG TẠI KHÁCH SẠN CLEMENT Đơn vị thực tập : TMA Solutions Bình Định Cán hướng dẫn : Đỗ Minh Tuấn Giảng viên hướng dẫn : Nguyễn Văn Chức LỜI CẢM ƠN Trước tiên, em xin gửi lời cảm ơn chân thành đến Cơng Ty TMA Solutions Bình Định hỗ trợ giúp đỡ quý báu q trình thực tập nghề nghiệp cơng ty Sự ân cần tận tâm thành viên cơng ty giúp em có trải nghiệm thực tế phát triển kỹ cách toàn diện Em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Đại học Kinh Tế Đà Nẵng, đặc biệt thầy cô khoa Thống Kê- Tin Học trường tạo điều kiện cho em thực tập Và em xin chân thành cảm ơn cô Nguyễn Thị Uyên Nhi nhiệt tình hướng dẫn hướng dẫn em hồn thành tốt khóa thực tập Cuối cùng, em xin cảm ơn đến anh Đỗ Minh Tuấn tất anh chị khác - Mentor hướng dẫn em trực tiế p ta ̣i công ty TMA Solutions Bình Đinh ̣ giúp đỡ, cung cấp tài liê ̣u cho em quá trình thực tâ ̣p để hoàn thành đươc̣ kỳ thực tâ ̣p tốt Trong trình thực tập, q trình làm báo cáo thực tập, khó tránh khỏi sai sót, mong thầy, bỏ qua Đồng thời trình độ lý luận kinh nghiệm thực tiễn hạn chế nên báo cáo khơng thể tránh khỏi thiếu sót, em mong nhận ý kiến đóng góp thầy, để em học thêm nhiều kinh nghiệm hoàn thành tốt báo cáo tốt nghiệp tới LỜI CAM ĐOAN Em xin cam đoan dự án Thiết kế giao diện cho Website quản lý đặt phòng khách sạn Clement là kế t quả nghiên cứu đô ̣c lâ ̣p dưới sự hướng dẫn của giảng viên hướng dẫn: TS Nguyễn Thị Uyên Nhi Mentor: Đỗ Minh Tuấn Ngoài ra, không có bấ t cứ sự chép nào của người khác Dự án, nô ̣i dung báo cáo là sản phẩ m mà em đã nổ lực nghiên cứu quá trình ho ̣c ta ̣i nhà và bên thực tâ ̣p Các dữ liê ̣u, kế t quả trình bày báo cáo là hoàn toàn trung thực, em xin chiụ hoàn toàn trách nhiê ̣m, kỷ luâ ̣t bô ̣ mô và nhà trường đề nế u có vấ n đề nào xảy MỤC LỤC LỜI CẢM ƠN iv MỤC LỤC vi DANH MỤC HÌNH ẢNH viii DANH MỤC BẢNG BIỂU ix DANH MỤC CÁC TỪ VIẾT TẮT x LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ CƠNG TY TMA BÌNH ĐỊNH SOLUTIONS VÀ CƠ SỞ LÝ THUYẾT VỀ FRONT – END DEVELOPER 1.1 Giới thiê ̣u tổ ng quan về công ty TMA Solutions 1.1.1 Tổng quan công ty 1.1.2 Cơ cấu tổ chức 1.1.3 Tầm nhìn sứ mệnh cơng ty TMA Solutions Bình Định 1.2 Tở ng quan về vi ̣trí Front – End Developer 2.2.1 Định nghĩa Front-End Developer 2.2.2 Developer làm công việc gì? 2.2.3 Cơ hội nghề nghiệp (Front-End) 1.3 Cơ sở lý thuyế t về Front – End Developer 1.3.2 Basic Git Usage 1.3.3 JavaScript 10 1.3.4 ReactJS Basic 13 1.3.5 Redux 17 Hình 1.3.5 Redux 17 CHƯƠNG PHÂN TÍCH YÊU CẦU CỦA HỆ THỐNG WEBSITE QUẢN LÝ VÀ ĐẶT PHÒNG TẠI KHÁCH SẠN CLEMENT 19 2.1 Phân tích yêu cầu hệ thống 19 2.1.1 Mô tả dự án 19 2.1.2 Yêu cầu chức hệ thống 19 2.2 Phân tích hệ thống 20 2.2.1 Các tác nhân 20 2.2.1 Use Case 22 CHƯƠNG TRIỂN KHAI DỰ ÁN XÂY DỰNG GIAO DIỆN WEBSITE QUẢN LÝ VÀ ĐẶT PHÒNG TẠI KHÁCH SẠN CLEMENT 23 3.1 Thiết kế dự án 23 3.1.1 Quản lý công việc tảng trello 23 3.1.2 Quản lý source code tảng GitHub 24 3.1.3 Mục tiêu thiết kế giao diện 24 3.1.4 Quy trình thiết kế giao diện web ReactJS 24 3.2 Thiết kế giao diện 27 3.3 Bảng phân công công việc 43 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .46 TÀI LIỆU THAM KHẢO .48 CHECK LIST CỦ A BÁO CÁo .49 PHỤ LỤC 50 DANH MỤC HÌNH ẢNH Hình 1.1.1 Cơng ty TMA Bình Định Hình 1.3.1 Logo HTML-CSS Hình 1.3.3 Logo JavaScript 10 Hình 1.3.3 Cấu trúc HTML DOM 14 Hình 1.3.4 ReacJS 14 Hình 1.1.8 Redux 17 Hình 2.2.1 UseCase tổng quát 22 Hình 2.3.1 Trello 23 Hình 2.3.2 Quản lý code GitHub 24 Hình 3.1.4.1 Components 25 Hình 3.1.4.2 Pages 26 Hình 3.1.4.2 Redux 27 Hình 2.3.5 Giao diện trang chủ 28 Hình 3.2.2 Giao diện trang Rooms 31 Hình 3.2.4 Giao diện trang Explore 35 Hình 3.2.5 Giao diện trang Gallery 36 Hình 3.2.6 Giao diện trang Booking 38 Hình 3.2.7 Giao diện trang Payment cart 40 Hình 3.2.8 Giao diện trang đăng nhập/đăng ký 41 Hình 3.2.9 Giao diện trang Admin 42 DANH MỤC BẢNG BIỂU Bảng 2.1.2 Bảng yêu cầu chức hệ thống 19 Bảng 2.2.1 Bảng tác nhân 21 Bảng 3.3 Bảng phân công việc 43 DANH MỤC CÁC TỪ VIẾT TẮT Chữ viết tắt Chữ đầy đủ HTML HyperText Markup Language DOM Document Object Model CSS Cascading Style Sheets JSX Javascript XML SPA Single Page Application Dev Developer LỜI MỞ ĐẦU Lý chọn đề tài Khách du lịch nước hay khách nước dự định Việt Nam họ có - mong muốn tìm kiếm khách sạn đảm bảo chỗ thích hợp, tiện nghi với giá hợp lý đặt phịng trước đến Nắm bắt dược nhu cầu đó, chúng em chọn đề tài “Thiết kế giao diện cho website quản lý đặt phòng khách sạn Clement”, để xây dựng trang web đặt phòng quản lý khách sạn Tiết kiệm chi phí thời gian: Clement Hotel cho phép khách hàng đặt phòng khách - sạn cho nhà quản lý khách sạn quản lý việc đặt phịng khách hàng thông qua hệ thống trực tuyến Điều giúp tăng cường trải nghiệm đặt phịng dễ dàng nhanh chóng Một website Clement Hotel giúp tiếp cận khách hàng khơng địa - phương mà cịn toàn quốc quốc tế Điều mở nhiều hội kinh doanh giúp xây dựng thương hiệu phạm vi rộng Thiết kế website Clement Hotel không xu hướng mà yếu tố - quan trọng giúp doanh nghiệp tiếp cận khách hàng, mở rộng thị trường nâng cao hiệu suất kinh doanh Mu ̣c tiêu đề tài - Mục tiêu đề tài "Thiết kế giao diện cho website quản lý đặt phòng khách sạn Clement" xây dựng giao diện trực quan, thân thiện với người dùng cho trang web quản lý đặt phòng khách sạn Giao diện tập trung vào việc cung cấp thông tin dễ dàng tìm kiếm khách sạn, loại phịng, tiện nghi dịch vụ, cho phép khách hàng dễ dàng thực thao tác đặt phòng, quản lý đặt phịng, tốn trực tuyến đánh giá Đối tượng phạm vi nghiên cứu a) Đối tượng: - Người dùng: Đối tượng nghiên cứu người dùng website Clement Hotel Là khách hàng tiềm có nhu cầu đặt phịng khách sạn trực tuyến - Nhà quản lý website: Những người quản lý điều hành website Clement Hotel, bao gồm người có trách nhiệm thiết kế giao diện, quản lý nội dung, hoạt động liên quan đến đặt phòng trả phòng website b) Phạm vi nghiên cứu: - Quy trình quản lý: Nghiên cứu tập trung vào quy trình quản lý khách sạn Clement, bao gồm quản lý nhân sự, quản lý tài chính, quản lý dịch vụ, quản lý hoạt động hàng ngày Đối tượng nghiên cứu phạm vi sách, quy trình, cấu tổ chức khách sạn - Hệ thống đặt phòng: Phạm vi nghiên cứu bao gồm việc tìm hiểu đánh giá hệ thống đặt phòng khách sạn Clement Nghiên cứu xem xét công nghệ sử dụng, cách thức tiếp cận tương tác với khách hàng qua hệ thống đặt phòng - Hiệu suất vận hành: Mục tiêu nghiên cứu đánh giá hiệu suất vận hành khách sạn Clement, bao gồm số chất lượng dịch vụ, hiệu tài chính, tỷ lệ phịng trống đầy phòng, mức độ hài lòng khách hàng - Cải tiến phương pháp tối ưu hóa: Phạm vi nghiên cứu đề xuất biện pháp cải tiến phương pháp tối ưu hóa quản lý đặt phòng khách sạn Clement Những cải tiến liên quan đến cải thiện quy trình, áp dụng công nghệ mới, đào tạo nhân viên, hay thay đổi chiến lược kinh doanh - Áp dụng công nghệ phương pháp quản lý tiên tiến: Nghiên cứu xem xét khả áp dụng công nghệ phương pháp quản lý tiên tiến quản lý đặt phòng khách sạn Clement Điều bao gồm việc tìm hiểu trí tuệ nhân tạo, phân tích liệu, ứng dụng cơng nghệ thơng tin giải pháp quản lý sáng tạo khác Kết cấu đề tài Đề tài tổ chức gồm phần mở đầu, chương nội dung phần kết luận hướng phát triển - Mở đầu - Chương 1: Tổng quan cơng ty TMA Bình Định Solutions sở lý thuyết Front – End Developer 3.2.5 Giao diện trang Gallery 36 Hình 3.2.5 Giao diện trang Gallery 3.2.6 Giao diện trang Booking 37 38 Hình 3.2.6 Giao diện trang Booking 39 3.2.7 Giao diện trang Payment cart 40 Hình 3.2.7 Giao diện trang Payment cart 3.2.8 Giao diện trang đăng nhập / đăng ký 41 Hình 3.2.8 Giao diện trang đăng nhập/đăng ký 3.2.9 Giao diện trang Admin 42 Hình 3.2.9 Giao diện trang Admin 3.3 Ngày Bảng phân công công việc Công việc Người thực 43 Tiến độ Ghi 01/0803/08 Xây dựng trang giao diện đăng ký Phạm Quốc An Hoàn thành 100% 01/0803/08 Xây dựng trang giao diện đăng nhập Phạm Quốc An Hoàn thành 100% 01/0803/08 Xây dựng giao diện header, footer cho trang Lưu Thị Hoài Thu Hoàn thành 100% 03/0808/08 Xây dựng trang giới thiệu Hoàn thành 100% Bao gồm (trang chủ, trang rooms, trang restaurant, trang explore, trang gallery) Lưu Thị Hoài Thu 03/0806/08 Xây dựng trang giao diện booking Phạm Quốc An Hoàn thành 100% 07/08 10/08 Xây dựng trang giao diện giỏ hàng , tốn Huỳnh Ngọc Thiện Hồn thành 100% 07/0809/08 Xây dựng trang giao diện my booking Trương Đình Thắng Hồn thành 100% 07/0810/08 Xây dựng trang giao diện quản lý phịng Trần Hồi Việt Hồn thành 100% 10/0814/08 Xây dưng trang giao diện quản lý đơn đặt phịng Trần Hồi Việt Hồn thành 100% Trương Đình Thắng 44 10/0812/08 Xác nhận gửi liệu đăng ký Phạm Quốc An Hoàn thành 100% 10/0812/08 Xác nhận gửi liệu đăng nhập Phạm Quốc An Hoàn thành 100% 08/08 Kết nối trang giới thiệu trang booking Lưu Thị Hoài Thu Hoàn thành 100% 10/8- Quản lý giỏ hàng (Thêm phịng vào giỏ hàng, xóa phịng khỏi giỏ hàng) Huỳnh Ngọc Thiện Hoàn thành 100% 14/0818/08 Quản lý trang my booking Trương Đình Thắng Hồn thành 100% 10/0816/08 Tìm kiếm phịng Lưu Thị Hồi Thu Hồn thành 100% 16/0820/08 Quản lý phịng ( Thêm phịng, sửa thơng tin phịng, xóa phịng) Trần Hồi Việt Hồn thành 100% 17/0821/08 Quản lý đơn đặt phòng ( xem đơn đặt phòng, sửa đơn đặt phịng, xóa đơn đặt phịng) Trần Hồi Việt Hoàn thành 100% 20/8 45 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ● Đạt được: - Học nhiều kiến thức - Vận dụng kiến thức có vào dự án cơng ty đề - Kỹ giao tiếp làm việc nhóm nâng cao - Nâng cao khả tự học, tiếp thu kiến thức cách chủ động - Kỹ làm việc theo nhóm, phân chia cơng việc rõ ràng - Làm quen với môi trường làm việc chuyên nghiệp doanh nghiệp - Kỹ thuyết trình nâng cao ● Hạn chế: - Không đủ kiến thức để làm nhiều chức - Vẫn thiếu kinh nghiệm kỹ làm việc - Chưa vận dụng thành thạo kiến thức học để áp dụng vào dự án - Không đủ thời gian để hoàn thiện dự án - Chưa thể khảo sát nhu cầu người dùng cho dự án ● Hướng phát triển: - Sau đợt thực tập em đặt cho thân lộ học thực hành để trở thành Developer chuyên nghiệp Đầu tiên em nghĩ cần cải thiện kĩ 46 tiếng anh, kỹ giao tiếp, kỹ làm việc nhóm, kỹ làm việc độc lập, kỹ nói trước đám đông, chỉnh chu tác phong đồng phục làm việc - Sau đợt thực tập em nắm rõ quy trình làm việc chuyên nghiệp công ty, kỹ mềm mà công ty dạy từ em cố gắng cải thiện điểm mạnh điểm cịn thiếu xót để tương lai trở thành Developer giỏi 47 TÀI LIỆU THAM KHẢO w3school, HTML Tutorial, https://www.w3schools.com/html/ Redux, https://viblo.asia/p/xay-dung-ung-dung-react-bang-redux-AQ3vVkQnRbOr ReactJS, React Document, https://react.dev/learn Mui, https://mui.com/material-ui/getting-started/overview/ Stackoverflow, https://stackoverflow.com/questions Redux, https://redux.js.org/tutorials/essentials/part-1-overview-concepts 48 CHECK LIST CỦ A BÁO CÁO STT Nô ̣i dung công viêc̣ Báo cáo đươc̣ trình bày (đinh ̣ da ̣ng) đúng với yêu cầ u Báo cáo có số lươṇ g trang đáp ứng đúng yêu cầ u (30-50 trang) Báo cáo trình bày đươc̣ phầ n mở đầ u bao gồ m: Mu ̣c tiêu, Pha ̣m vi và đố i tươṇ g, kế t cấ u … Báo cáo trình bày về công ty, vi ̣ trí viê ̣c làm (công việc làm gì, kiến thức kỹ cần thiết gì, đường phát triển nghiệp (career path)), sở lý thuyế t phù hơp̣ với nô ̣i dung của đề tài (Tố i đa 10-12 trang) Báo cáo có sản phẩ m cu ̣ thể phù hơp̣ với mu ̣c tiêu đă ̣t của đề tài Báo cáo có phầ n kế t luâ ̣n và hướng phát triể n của đề tài Có 49 Không Ghi chú PHỤ LỤC 50