Xây dựng trang web khách sạn señorita

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 TIN HỌC QUẢN LÝ Đề tài: Xây dựng trang web khách sạn Señorita Đơn vị thực tập : TMA Solutions Bình Định Giảng viên hướng dẫn : TS Đặng Trung Thành I LỜI CẢM ƠN Kính gửi Ban lãnh đạo Trường Đại học Kinh tế Đà Nẵng, Khoa Thống kê - Tin học, tồn thể đội ngũ Cơng ty TMA Solutions Bình Định, Em xin gửi lời cảm ơn chân thành sâu sắc đến Quý vị hội thực tập học tập mà em nhận Với hướng dẫn, định hướng ủng hộ Trường, Khoa, Quý thầy cô phụ trách hướng dẫn Công ty, em có hành trình thực tập đầy ý nghĩa TMA Solutions Bình Định Thực tập 10 tuần TMA Solutions Bình Định giúp em khơng áp dụng kiến thức chuyên môn từ Trường vào thực tế, mà mở giới ngành công nghệ thông tin phát triển phần mềm Em trải nghiệm môi trường làm việc chuyên nghiệp, tiếp xúc trực tiếp với dự án thú vị thực tế Những kiến thức, kỹ học thực tế mà em thu nhận suốt thời gian thực tập nguồn động viên tài sản quý báu nghiệp tương lai Em muốn bày tỏ lòng biết ơn đặc biệt đến giảng viên, nhà quản lý, người hỗ trợ em Khoa Thống kê - Tin học Sự dẫn, động viên chia sẻ kinh nghiệm từ Quý thầy cô giúp em vượt qua thách thức phát triển không lĩnh vực học thuật mà khả làm việc nhóm giao tiếp Cuối cùng, em xin gửi lời cảm ơn chân thành đến Công ty TMA Solutions Bình Định Sự mở cửa hội thực tập cho em không hội làm quen với mơi trường cơng việc thực tế mà cịn hành trình trưởng thành phát triển thân Em biết ơn hỗ trợ kiến thức mà em nhận từ đội ngũ tận tâm Công ty II LỜI CAM ĐOAN Em tên Phan Bá Hoàng, sinh viên lớp 46K14 khoa Thống kê - Tin học, Trường Đại học Kinh tế Đà Nẵng, xin cam đoan dự án trang web trình bày báo cáo em kết cơng việc nỗ lực cá nhân em Trong suốt trình thực dự án, em đảm nhận tồn quy trình từ ý tưởng ban đầu, thiết kế, phát triển, triển khai trang web Em xác nhận tất thành phần, mã nguồn, giao diện, chức thiết kế dự án trang web công sức em, thực tay không chép sử dụng từ nguồn khác mà không ghi rõ Em xin cam đoan tất thông tin, liệu tài liệu từ nguồn khác sử dụng dự án dẫn chứng theo quy tắc trích dẫn khơng vi phạm quyền tác giả quyền Em hy vọng cam đoan giúp thể chân thật trung thực trình thực dự án trang web em Xin cảm ơn có hội để chứng minh lực hồn thành dự án cách đáng tự hào III MỤC LỤC LỜI CẢM ƠN III LỜI CAM ĐOAN IV MỤC LỤC V DANH MỤC HÌNH ẢNH VIII DANH MỤC CÁC TỪ VIẾT TẮT IX LỜI MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ CƠNG TY TMA SOLUTIONS, 1.1 Giới thiệu tởng quát doanh nghiệp thực tập 1.1.1 Giới thiệu chung 1.1.2 Lĩnh vực hoạt động 1.1.3 Công nghệ 1.2 Tởng quan vị trí việc làm 1.2.1 Khái quát Frontend Developer 1.2.2 Yêu cầu kiến thức kỹ Frontend Developer 1.2.3 Cơ hội nghề nghiệp Frontend Developer 1.2.4 Mức lương Frontend Developer : 10 CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 12 Javascript: 12 2.1.1 JavaScript (ES6 trở lên): 12 2.1.2 JavaScript Syntax: 12 2.1.3 JS Objects: 12 2.1.4 JS Functions: 12 2.1.5 Local Storage, Session Storage, Cookie: 13 2.1.6 JS HTML DOM: 13 IV 2.2 ReactJS - Main Concepts: 13 2.2.1 Introducing JSX: 13 2.2.2 Rendering Elements: 13 2.2.3 Components and Props: 13 2.2.4 State and Lifecycle: 13 2.2.5 Handling Events: 14 2.2.6 Conditional Rendering: 14 2.2.7 Lists and Keys: 14 2.2.8 Forms: 14 2.2.9 Composition vs Inheritance: 14 2.2.10 Communication between Parent and Child: 14 2.3 ReactJS - HOOKS 14 2.3.1 Introducing Hooks: 14 2.3.2 Hooks at a Glance: 15 2.3.3 Using the State Hook: 15 2.3.4 Using the Effect Hook: 15 2.3.5 Hooks API Reference: 15 2.4 ReactJS - ADVANCED GUIDES 15 2.4.1 Context: 15 2.4.2 Error Boundaries: 15 2.4.3 Forwarding Refs: 16 2.4.4 Fragments: 16 2.5 Redux: 16 2.5.1 Khởi tạo Redux Store: 16 2.5.2 Tích hợp Redux vào ReactJS: 16 V 2.6 React Router: 17 2.6.1 Cài đặt React Router: 17 2.6.2 Tạo Component Định nghĩa Routes: 18 2.6.3 Sử dụng Link NavLink: 19 2.6.4 Truy cập Params Query Parameters: 19 CHƯƠNG TRIỂN KHAI DỰ ÁN 21 3.1 Phân tích yêu cầu hệ thống: 21 3.1.1 Mục tiêu đề tài: 21 3.1.2 Yêu cầu chức năng: 21 3.1.3 Yêu cầu phi chức 21 3.2 Dữ liệu đăng nhập: 22 3.3 Xây dựng giao diện trang web 23 3.2.1 Giao diện trang đăng nhập: 23 3.2.2 Giao diện trang chủ: 24 3.2.3 Giao diện trang giới thiệu: 25 3.2.4 Giao diện trang dịch vụ: 26 3.2.5 Giao diện trang liên hệ: 27 3.2.6 Giao diện trang đặt phòng: 28 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 29 CHECK LIST CỦA BÁO CÁO 30 VI DANH MỤC HÌNH ẢNH Hình Logo Cơng Ty TMA Solutions Bình Định .3 Hình Tạo liệu với mockAPI .22 Hình Giao diện trang đăng nhập 23 Hình Giao diện trang chủ 24 Hình Giao diện trang giới thiệu .25 Hình Giao diện trang dịch vụ 27 Hình Giao diện trang liên hệ 28 Hình Giao diện trang đặt phòng 29 VII DANH MỤC CÁC TỪ VIẾT TẮT AI : Artificial Intelligence Js : Javascripts API : Application Programming Interface DOM : Document Object Model ES6 : ECMAScript JSX : JavaScript XML CSS : Cascading Style Sheets VIII LỜI MỞ ĐẦU Mục tiêu đề tài - Nghiên cứu xây dựng trang web khách sạn Señorita - Thiết kế giao diện hấp dẫn thân thiện với người dùng: Phát triển giao diện trực quan, dễ sử dụng hấp dẫn cho trang web khách sạn Señorita nhằm tạo trải nghiệm tốt cho người dùng tìm hiểu dịch vụ tiện ích khách sạn - Hệ thống đặt phòng tốn trực tuyến: Phát triển chức đặt phịng trực tuyến cho khách hàng, bao gồm lựa chọn loại phịng, ngày nhận phịng, ngày trả phịng tích hợp cởng tốn để hồn tất q trình đặt chỗ - Tích hợp đánh giá nhận xét: Tạo chế để khách hàng đánh giá viết nhận xét trải nghiệm họ khách sạn Mục tiêu cung cấp thông tin phản hồi từ người dùng để cải thiện chất lượng dịch vụ - Tích hợp hệ thống đăng nhập quản lý tài khoản khách hàng: Cho phép khách hàng đăng nhập vào trang web để quản lý thông tin cá nhân, lịch sử đặt phòng dịch vụ liên quan khác Đối tượng phạm vi nghiên cứu - Người dùng thực đặt phòng sử dụng trang web - Quản lý khách sạn nhân viên liên quan - Các chuyên gia lĩnh vực công nghệ thiết kế web - Các đối thủ cạnh tranh ngành khách sạn dịch vụ đặt phòng trực tuyến 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 - Mở đầu IX - Chương 1: TỔNG QUAN VỀ CÔNG TY TMA SOLUTIONS - Chương 2: CỞ SỞ LÝ THUYẾT - Chương 3: TRIỂN KHAI THỰC NGHIỆM - Kết luận hướng phát triển X