ĐỒ án CƠ SỞ 2 đề TÀI XÂY DỰNG WEBSITE MÔI GIỚI VIỆC LÀM

lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THƠNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE MÔI GIỚI VIỆC LÀM Sinh viên thực hiện: Nguyễn Mạnh Trường Đạt Phùng Anh Sang Lớp: 21GIT Giảng viên hướng dẫn: PGS TS Nguyễn Thanh Bình Đà Nẵng, tháng 11 năm 2022 lOMoARcPSD|9242611 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THƠNG VIỆT - HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG WEBSITE MÔI GIỚI VIỆC LÀM Sinh viên: Nguyễn Mạnh Trường Đạt Mã: 21IT010 Phùng Anh Sang Mã: 21IT043 Giảng viên hướng dẫn: PGS TS Nguyễn Thanh Bình Đà Nẵng, tháng 11 năm 2022 lOMoARcPSD|9242611 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN lOMoARcPSD|9242611 LỜI CẢM ƠN Để hoàn thành báo cáo đồ trước hết em xin gửi đến quý thầy cô, giáo khoa Khoa Học Máy Tính, trường Đại học Cơng nghệ thông tin Truyền thông Việt Hàn Đặc biệt, em xin trân trọng gửi đến PGS TS Nguyễn Thanh Bình tận tình hướng dẫn, giúp đỡ em hồn thành chuyên đề báo cáo lời cảm ơn sâu sắc Em xin chân thành cảm ơn thầy khoa Khoa Học Máy Tính nhiệt tình dạy bảo tạo điều kiện thuận lợi cho em suốt trình thực đồ án Em xin cảm ơn bạn sinh viên, anh chị sinh viên khóa trước nhiệt tình giúp đỡ em trình thực Vì kiến thức thân cịn nhiều hạn chế, suốt q trình thực đồ án này, em khơng tránh khỏi sai sót, kính mong nhận bảo thầy cô Cuối em xin gửi đến thầy cô, người giúp đỡ em lời cảm ơn trân trọng nhất, chúc người sức khoẻ thành công! Sinh viên, Nguyễn Mạnh Trường Đạt lOMoARcPSD|9242611 MỤC LỤC MỞ ĐẦU Giới thiệu 1 Mục tiêu đề tài Nội dung kế hoạch thực 3.1 Nội dung 3.2 Kế hoạch thực Phương pháp phạm vi nghiên cứu 4.1 Phương pháp nghiên cứu 4.2 Phạm vi nghiên cứu 4.3 Phương tiện nghiên cứu Kết đề tài Bố cục báo cáo Chương TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE NHỮNG HIỂU BIẾT CƠ BẢN VỀ WEB 4 1.1 Các khái niệm web 1.1.1 Web, trang web gì? 1.1.2 World Wide Web(WWW) gì? 1.2 Trang web 4 1.2.1 Web tĩnh gì? 1.2.2 Web động gì? TÌM HIỂU VỀ CÁC NGƠN NGỮ LẬP TRÌNH 4 2.1 Ngôn ngữ HTML 2.2 Ngôn ngữ CSS 2.3 Ngơn ngữ lập trình JavaScript CÁC FRAMEWORK VÀ LIBRARY HỖ TRỢ 3.1 Framework 7 3.1.1 Framework gì? 3.1.2 Tìm hiểu Bootstrap 3.2 Library 7 3.2.1 Library gì? 3.2.2 Tìm hiểu jQuery 7 lOMoARcPSD|9242611 CÔNG CỤ SỬ DỤNG 4.1 Visual Studio Code 4.2 Adobe Photoshop CC 2019 Kết chương Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG Yêu cầu 1.1 Yêu cầu chức 1.1.1 Đối với người dùng 1.1.2 Đối với người quản trị hệ thống 1.1.3 Yêu cầu hệ thống 1.2 Yêu cầu phi chức Các tác nhân 9 9 9 9 Thiết kế hệ thống 10 Kết chương 10 Chương XÂY DỰNG WEBSITE Giao diện website 11 11 1.1 Giao diện trang chủ 11 1.2 Giao diện dịch vụ tour du lịch 12 1.3 Giao diện trang dịch vụ vé máy bay 14 1.4 Giao diện trang dịch vụ khách sạn resort 16 1.5 Trang liên hệ 18 1.6 Trang đăng nhập 19 1.7 Trang đăng ký 20 1.8 Trang quản lý 20 1.9 Kết 21 1.10 Công cụ thiết kế 22 Chức website 22 Kết chương 22 KẾT LUẬN Kết đạt 23 23 1.1.Về kiến thức học tập 23 1.2 Về sản phẩm 23 lOMoARcPSD|9242611 Hạn chế 23 Hướng nghiên cứu 23 TÀI LIỆU THAM KHẢO 24 lOMoARcPSD|9242611 DANH MỤC CÁC TỪ VIẾT TẮT VIẾT TẮT NỘI DUNG SEO Search Engine Optimization CDN Content Delivery Network URL Uniform Resources Locator lOMoARcPSD|9242611 DANH MỤC CÁC BẢNG Bảng 1.1 - Bảng yêu cầu phi chức lOMoARcPSD|9242611 DANH MỤC HÌNH VẼ Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 2.1 - Sơ đồ đặc tả chức 3.1 - Giao diện trang chủ 3.2 - Giao diện trang chủ 3.3 - Giao diện trang chủ 3.4 - Giao diện dịch vụ tour du lịch 3.5 - Giao diện đặt tour chi tiết 3.6 - Trang dịch vụ vé máy bay 3.7 - Trang đặt vé máy bay chi tiết 3.8 - Giao diện trang đặt phòng khách sạn 3.9 - Trang đặt phòng khách sạn chi tiết 3.10 - Trang liên hệ 3.11 - Trang đăng nhập 3.12 - Trang đăng ký 3.13 - Trang quản lý tài khoản 3.14 - Trang quản lý tour 3.15 - Trang quản lý doanh thu hệ thống 10 11 11 12 13 14 14 15 16 17 18 19 20 20 21 21 lOMoARcPSD|9242611 - Tác nhân quản trị: người thực chức quản trị hệ thống, tài khoản, khách hàng, quản lý giao diện Để thực chức quản trị hệ thống tác nhân bắt buộc phải thực đăng nhập Tác nhân khách hàng: thực chức đăng ký tài khoản, đăng nhập Tìm kiếm dịch vụ, xem tin tức, đặt dịch vụ, đánh giá… Thiết kế hệ thống Hình 2.1 - Sơ đồ đặc tả chức Kết chương Sau phân tích hệ thống, em lên kế hoạch thực thiết kế trang web dựa tiêu chuẩn thân thiện người sử dụng Dựa sơ đồ em thực xây dựng trang web trình bày trang Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Chương XÂY DỰNG WEBSITE Giao diện website 1.1 Giao diện trang chủ Hình 3.1 - Giao diện trang chủ Hình 3.2 - Giao diện trang chủ Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.3 - Giao diện trang chủ ● Trang chủ gồm: ✔ Banner phần home ✔ Phần viết giới thiệu ✔ Phần slide show tour hot nhất: hiển thị tour mới, hot nhiều người đặt ✔ Phần khoảnh khắc bật: hiển thị ảnh, kỉ niệm bật du khách tour ✔ Phần đánh giá bật khách hàng thân thiết 1.2 Giao diện dịch vụ tour du lịch Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.4 - Giao diện dịch vụ tour du lịch ● Trang dịch vụ tour: hiển thị tour du lịch có sẵn, khách hàng tìm kiếm tour Sau lựa chọn tour thích hợp, khách hàng bấm nút chọn để đặt tour Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.5 - Giao diện đặt tour chi tiết ● Trang đặt tour chi tiết: hiển thị ô nhập thông tin từ người dùng, kiểm tra người dùng có nhập đầy đủ, định dạng email số điện thoại có hay không sau người dùng bấm nút đặt tour yêu cầu gửi đến người quản trị 1.3 Giao diện trang dịch vụ vé máy bay Hình 3.6 - Trang dịch vụ vé máy bay ● Trang cho phép người dùng xem, tìm kiếm vé máy bay theo tiêu chí hãng hàng khơng, ngày đi, khoảng giá… Sau người dùng ấn nút chọn, hệ thống chuyển hướng sang trang đặt vé máy bay chi tiết Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.7 - Trang đặt vé máy bay chi tiết ● Trang cho phép người dùng nhập thông tin cá nhân thông tin chuyến bay, người dùng bỏ trống nhập sai định dạng, hệ thống hiển thị báo lỗi Sau người dùng nhập đúng, ấn nút đặt yêu cầu gửi Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.4 Giao diện trang dịch vụ khách sạn resort Hình 3.8 - Giao diện trang đặt phòng khách sạn ● Trang dịch vụ khách sạn, resort hiển thị danh sách khách sạn resort cho khách hàng lựa chọn, khách hàng tìm kiếm khách sạn, sau lựa chọn dược, khách hàng ấn nút chọn website chuyển qua trang đặt chỗ chi tiết Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 Hình 3.9 - Trang đặt phòng khách sạn chi tiết ● Trang đặt khách sạn, resort chi tiết: hiển thị ô nhập thông tin từ người dùng, kiểm tra người dùng có nhập đầy đủ, định dạng email số điện thoại có hay khơng sau người dùng bấm nút đặt phịng u cầu gửi đến người quản trị người quản trị phản hồi Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.5 Trang liên hệ Hình 3.10 - Trang liên hệ ● Trang liên hệ: Cho phép người dùng gửi góp ý đến người quản trị, có thơng tin địa chỉ, số điện thoại, email Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.6 Trang đăng nhập Hình 3.11 - Trang đăng nhập ● Trang đăng nhập cho phép người dùng đăng nhập vào tài khoản Hệ thống yêu cầu nhập email mật Nếu nhập không định dạng có dịng lưu ý Sau ấn nút đăng nhập người dùng nhập sai hệ thống bắt nhập lại, cịn vào Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 1.7 Trang đăng ký Hình 3.12 - Trang đăng ký ● Trang đăng ký cho phép người dùng đăng ký tài khoản Hệ thống yêu cầu nhập tên đăng nhập, email mật Nếu nhập không định dạng có dịng lưu ý Sau đăng ký, người dùng có tài khoản hệ thống 1.8 Trang quản lý Hình 3.13 - Trang quản lý tài khoản Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 ● Trang quản lý cho phép người quản trị hệ thống quản lý tài khoản người dùng, sửa, xóa tài khoản cấm hệ thống Hình 3.14 - Trang quản lý tour ● Trang cho phép người quản lý xem danh sách tour đăng lên hệ thống từ cho phép hiển thị lên hệ thống xóa Hình 3.15 - Trang quản lý doanh thu hệ thống ● Trang cho phép người quản lý xem, so sánh doanh thu theo tháng hệ thống 1.9 Kết Hoàn thành trang web gồm: ✔ Trang chủ ✔ Trang đặt tour du lịch ✔ Trang đặt vé máy bay ✔ Trang đặt phòng khách sạn, resort ✔ Trang liên hệ Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 ✔ Trang giới thiệu ✔ Trang đăng nhập, đăng kí 1.10 Công cụ thiết kế ✔ Sử dụng ngôn ngữ HTML, CSS, JavaScript ✔ Sử dụng thư viện jQuery ✔ Sử dụng framework Bootstrap ✔ Sử dụng thư viện AOS để tạo hiệu ứng lăn chuột Chức website Các trang chứa liên kết trang lại ✔ Trang chủ: ✔ Trang đặt tour ✔ Trang đặt vé máy bay ✔ Trang đặt phòng khách sạn resort ✔ Trang liên hệ ✔ Trang đăng nhập/đăng ký Kết chương Quy trình thực thiết kế web đến gần hoàn thiện trang web với chức nêu Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 KẾT LUẬN Kết đạt 1.1.Về kiến thức học tập Để thiết kế trang web chuẩn việc khơng đơn giản, địi hỏi phải xây dựng theo giai đoạn: khảo sát, nghiên cứu, phân tích thiết kế hệ thống, nghiên cứu tổng quan cơng cụ lập trình, thiết kế Ngày du lịch Việt Nam phát triển mạnh nên việc xây dựng trang web hợp lý Thông qua nghiên cứu xây dựng đề tài này, em củng cố, học hỏi thêm nhiều thứ như: - Củng cố kiến thức thiết kế web HTML, CSS, JavaScript Biết thêm nhiều kiến thức xây dựng hệ thống web thời gian thực phân tích hệ thống trang web - Biết thêm nhiều kiến thức Bootstrap, JQuery, sử dụng thư viện JavaScript, CSS để làm cho trang web thêm linh hoạt bắt mắt 1.2 Về sản phẩm Qua dự án trên, em đạt số kết sau: - Xây dựng trang web với giao diện phù hợp, chưa tối ưu hoàn toàn đủ bắt mắt cho người dùng - Mọi người dễ dàng sử dụng trang web Hạn chế Bên cạnh kết đạt được, cịn nhiều hạn chế Do thời gian hồn thiện dự án cịn hạn chế nên số chức khác em chưa kịp hoàn thiện thời gian trước bảo vệ, mong thầy cô châm chước nhiều Sau song có thời gian, em cố gắng hoàn thiện phát triển hệ thống tốt từ đưa vào thực tiễn Hướng nghiên cứu Với hạn chế tồn nêu trên, hướng nghiên cứu em dự kiến sau: - Tìm hiểu thêm nhiều cơng nghệ hỗ trợ thiết kế web React, Angular, … để từ làm tăng tính thẩm mĩ hiệu trang web - Khai thác thêm nhiều chức kết nối với server để lưu liệu máy chủ, làm tăng độ linh hoạt cho trang web Downloaded by tran quang (quangsuphamhoak35@gmail.com) lOMoARcPSD|9242611 TÀI LIỆU THAM KHẢO [1 ] [2 ] [3 ] "https://daotao.vku.udn.vn/" "https://danang.gov.vn/" Phương pháp phân tích thiết kế hệ thống("quanlydoanhnghiep.edu.vn/phuong-phap-phan-tich-va-thiet-ke-hethong-thong-tin/") [4 Tìm hiểu Bootstrap ("https://getbootstrap.com") ] [5 Tìm hiểu jQuery("https://viblo.asia/p/tim-hieu-ve-jquery- l5XRBJdVRqPe") ] 24 Downloaded by tran quang (quangsuphamhoak35@gmail.com) ... lý 20 1.9 Kết 21 1.10 Công cụ thiết kế 22 Chức website 22 Kết chương 22 KẾT LUẬN Kết đạt 23 23 1.1.Về kiến thức học tập 23 1 .2 Về sản phẩm 23 lOMoARcPSD| 924 2611 Hạn chế 23 Hướng nghiên cứu 23 ... 21 IT010 Phùng Anh Sang Mã: 21 IT043 Giảng viên hướng dẫn: PGS TS Nguyễn Thanh Bình Đà Nẵng, tháng 11 năm 20 22 lOMoARcPSD| 924 2611 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN lOMoARcPSD| 924 2611 LỜI CẢM ƠN Để hoàn... nhập 3. 12 - Trang đăng ký 3.13 - Trang quản lý tài khoản 3.14 - Trang quản lý tour 3.15 - Trang quản lý doanh thu hệ thống 10 11 11 12 13 14 14 15 16 17 18 19 20 20 21 21 lOMoARcPSD| 924 2611 MỞ