Đang tải... (xem toàn văn)
TRƯỜNG ĐẠI HỌC TIỀN GIANG KHOA KỸ THUẬT CÔNG NGHỆ BÁO CÁO ĐỒ ÁN NGÀNH ĐỀ TÀI THIẾT KẾ XÂY DỰNG WEBSITE KHÁCH SẠN 2022 GIẢNG VIÊN HƯỚNG DẪN Nguyễn Minh Khánh SINH VIÊN THỰC HIỆN Lê Thành Quốc ĐHCNTT19A
TRƯỜNG ĐẠI HỌC TIỀN GIANG KHOA KỸ THUẬT CÔNG NGHỆ - - BÁO CÁO ĐỒ ÁN NGÀNH ĐỀ TÀI: THIẾT KẾ, XÂY DỰNG WEBSITE KHÁCH SẠN SINH VIÊN THỰC HIỆN: GIẢNG VIÊN HƯỚNG DẪN: Lê Thành Quốc Giảng viên Nguyễn Minh Khánh ĐHCNTT19A Võ Thành Chiến ĐHCNTT19A Lê Hoàng Phúc ĐHCNTT19B Tiền Giang, tháng 11 năm 2021 LỜI NÓI ĐẦU Đầu tiên, chúng em xin cảm ơn Ban Giám Hiệu nhà trường – Khoa Kỹ Thuật Công Nghệ tạo điều kiện cho chúng em thực đề tài Đặc biệt, chúng em xin cảm ơn Giảng viên Nguyễn Minh Khánh tận tình giúp đỡ, dẫn dẳt chúng em từ lúc hình thành ý tưởng đến hồn thành đề tài Qua q trình nghiên cứu thực đề tài, chúng em học nhiều điều bổ ích, biết lên kế hoạch xếp công việc cách khoa học hội quý báu cho chúng em hiểu biết Chúng em hy vọng qua thời gian thực đề tài này, điều chúng em học giúp chúng em cố kiến thức hành trang cho chúng em đạt bước tiến tốt tương lai Chúng em xin chân thành cảm ơn LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Khánh giáo viên hướng dẫn đồ án cho chúng em Thầy theo sát trình thực đồ án, nhiệt tình hướng dẫn, bảo để chúng em hoàn thành đồ án Trong trình làm đồ án, chúng em cố gắng để tìm hiểu, trao dồi kiến thức để hồn thành tốt đồ án chắn khơng tranh khỏi thiếu sót Chúng em mong nhận thơng cảm góp ý quý thầy cô Chúng em xin chân thành cảm ơn! Tiền Giang,01 tháng năm 2022 Nhóm sinh viên thực MỤC LỤC CHƯƠNG 1: GIỚI THIỆU 1.1 Giới thiệu đề tài: .1 1.2 Lý chọn đề tài: .1 1.3 Bối cảnh thực tiễn: 1.4 Mục tiêu: 1.5 Phân cơng nhiệm vụ tiến trình làm việc .1 1.6 Hình thức sitemap .3 CHƯƠNG 2: PHÂN TÍCH, THIẾT KẾ .4 2.1 Lí thuyết 2.2 Phân tích 2.2.1 Yêu cầu website 2.2.2 Yêu cầu chức .4 2.2.3 Thiết kế .5 2.3 Cài đặt XAMPP 2.4 Cài đặt chức liên hệ .13 2.5 Một số hình ảnh trang web 20 CHƯƠNG 3: TỔNG KẾT ĐÁNH GIÁ & HƯỚNG PHÁT TRIỂN CỦA TRANG WEB 24 3.1 Kết đạt được: 24 3.2 Kết luận: 24 3.3 Hướng phát triển 24 DANH MỤC HÌNH ẢNH Hình 1: Site map Hình 2: Sơ đồ use case Hình 3: Mơ hình class Hình 4: Giao diện trang chủ tải Hình 5: Cửa sổ cài đặt XAMPP 10 Hình 6: Chọn nơi lưu trữ XAMPP 10 Hình 7: Bỏ chọn “Learn more about Bitnami for XAMPP“ 11 Hình 8: Cài đặt xong XAMPP 11 Hình 9: Bảng điều khiển XAMPP 12 Hình 10: Bảng điều khiển XAMPP 12 Hình 11: Bật nút ”Cho phép ứng dụng an toàn” 13 Hình 12: Giao diện trang web PHP 14 Hình 13: Download zip .14 Hình 14: Cửa sổ PHPMailer-master 15 Hình 15: Cài đặt 16 Hình 16: Giao diện điều khiển XAMPP 16 Hình 17: Cửa sổ Subline text 17 Hình 18: Liên hệ .20 Hình 19: Giao diện trang chủ 21 Hình 20: Giao diện trang liên hệ .22 Hình 21: Giao diện phòng 22 Hình 22: Trang hội nghị 23 DANH MỤC TỪ VIẾT TẮT Từ viết tắt Tên viết tắt SQL sever Structure Query Language HTML Hypertext Markup Language CSS Cascading Style Sheets JS JavaScrip XML Xtensible Markup Language PHP Hypertext Preprocessor XAMPP Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) Perl (P) CSDL Cơ sở liệu TÓM TẮT Báo cáo chia làm phần: CHƯƠNG 1:Giới thiệu Giới thiệu đề tài Lý chọn đề tài Mục tiêu Phân công nhiệm vụ tiến trình làmm việc Hình thức Sitemap CHƯƠNG 2:PHÂN TÍCH, THIẾT KẾ Cơng nghệ sử dụng Các công việc thiết kế Mô tả chức trang web, bước lưu đồ Cài đặt CHƯƠNG 3:KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN Tổng kết thành đạt o Điểm mạnh , điểm yếu o So sánh Định hướng phát triển Tài liệu tham khảo CHƯƠNG 1: GIỚI THIỆU 1.1 Giới thiệu đề tài: Là đề tài thiết kế, xây dựng website khách sạn đáp ứng nhu cầu cho khách du lịch 1.2 Lý chọn đề tài: Ngành du lịch Việt Nam ngày phát triển mạnh mẽ, thu hút hàng triệu khách tham quan du lịch năm, với số thống kê khoảng 35 đến 37 triệu khách du lịch nước với đến triệu khách du lịch ngồi nước Đây hội lớn cho lĩnh vực khách sạn, song khơng dễ dàng có nhiều khách sạn mọc lên năm, việc cạnh tranh gay gắt tranh giành khách hàng điều tránh khỏi.Thiết kế website chuyên nghiệp vấn đề quan tâm hàng đầu người kinh doanh lĩnh vực 1.3 Bối cảnh thực tiễn: Hiện đời sống người nâng cao, nhu cầu du lịch ngày phát triển nhu cầu tìm khách sạn có phịng nghỉ chất lượng dịch vụ tốt để nghỉ ngơi thư giãn ngày phổ biến Bằng cách truy cập vào website tìm kiếm thơng tin phịng khách sạn giúp khách hàng chọn phịng theo ý thích Với tình hình dịch bệnh giảm bớt nay, nhu cầu việc du lịch người dân tăng cao Đặc biệt vào dịp cuối năm cũ bước sang năm nhu cầu du lịch cao Việc thiết kế, xây dựng website khách sạn vào thời gian hồn tồn hợp lí, phù hợp với tình hình thực tiễn 1.4 Mục tiêu: Mục tiêu trang web đặt hoàn thành xong là: Mục tiêu cá nhân Thao tác nhuần nhuyễn với làm Web, phục vụ khả nghề nghiệp sau trường Nắm bắt cấu trúc phần cứng, sơ đồ khối, nguyên lý hoạt động vận hành trang Web Biết cách làm đồ án hoàn chỉnh phục vụ cho việc làm đồ án tốt nghiệp sau Mục tiêu sản phẩm: Sản phẩm hoạt động ổn định, có nhiều lựa chọn du lịch Sản phẩm mang tính thẩm mỹ cao, dễ dàng sử dụng Phù hợp với đời sống 1.5 Phân cơng nhiệm vụ tiến trình làm việc Mã số sinh viên Họ tên Công việc thực 019101012 Lê Thành Quốc Thiết kế layout, đóng góp ý tưởng 019101016 Võ Thành Chiến Đóng góp ý kiến thiết kế layout – ý tưởng, viết báo cáo 019101046 Lê Hồng Phúc Code hồn thiện website Ngày Thành viên thực Mơ tả 1/10/2021 Cả nhóm Nhận đề tài 8/10/2021 Cả nhóm Lên ý tưởng thiết kế 10/10/2021 Lê Thành Quốc – Lê Hoàng Phúc Viết code thiết kế website 25/11/2021 Võ Thành Chiến Viết báo tiến độ 28/11/2021 Cả nhóm Tiếp tục hồn thiện 5/12/2021 Cả nhóm Viết báo cáo đồ án Cả nhóm Thuyết trình báo cáo Ghi 1.6 Hình thức sitemap Hình 1: Site map Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“ Và ấn Next lần để bắt đầu trình cài đặt XAMPP Hình 7: Bỏ chọn “Learn more about Bitnami for XAMPP“ Sau cài xong, ấn nút Finish để kết thúc cài đặt mở bảng điều khiển XAMPP Tuy nhiên, khởi động lại máy sau cài đặt xong để tránh tình trạng khơng khởi động localhost Hình 8: Cài đặt xong XAMPP 11 Khởi động localhost Bây bạn vào thư mục c:\xampp mở file xampp-panel.exe lên để bật bảng điều khiển XAMPP Hình 9: Bảng điều khiển XAMPP Bạn để ý thấy hai ứng dụng Apache MySQL có nút Start, dấu hiệu bảo ứng dụng chưa khởi động, ấn vào nút Start ứng dụng để khởi động Webserver Apache MySQL Server lên chạy localhost Nếu hai ứng dụng chuyển sang màu xanh hình khởi động thành cơng Hình 10: Bảng điều khiển XAMPP 12 Sau khởi động xong, bạn truy cập vào website với địa http://localhost/dashboard/ thấy hiển thị trang giới thiệu XAMPP hình *Lưu ý: phải chạy phần mềm bật start Apache MySQL suốt trình làm việc dự án bạn chạy 2.4 Cài đặt chức liên hệ Đầu tiên bạn mở trình duyệt truy cập vào đường link đây: https://myaccount.google.com/lesssecureapps Các bạn chọn địa mail mà bạn muốn khách hàng gửi cho bạn Hình 11: Bật nút ”Cho phép ứng dụng an toàn” Các bạn click vào nút bật cho phép ứng dụng an tồn Tiếp theo bạn mở trình duyệt truy cập đường link đây: https://github.com/PHPMailer/PHPMailer 13 Hình 12: Giao diện trang web PHP Tại ô Code màu xanh bạn nhấn vào bấm download zip Hình 13: Download zip Sau tải bạn giải nén file có tên PHPMailer-master 14 Hình 14: Cửa sổ PHPMailer-master Bạn mở thư mục src copy hết file vào project nằm htdocs 15 Hình 15: Cài đặt Tiếp theo mở phần mềm xampp control panel lên bấm start mục apache MySQL Hình 16: Giao diện điều khiển XAMPP Tiếp theo bạn mớ dự án thư mục htdocs Các file có html bạn phải đổi qua đuôi php ( mở sublime text visual studio code để đổi) 16 Hình 17: Cửa sổ Subline text Tới xong phần cài đặt Bây tới phần code: Các bạn tạo file có tên lienhe.php code form liên hệ vào file phần code tạo form liên hệ: lienhe.php Liên hệBạn có thắc mắc khó khăn cần giúp đỡ xin điền thông tin nội dung bên
Send Message Tiếp theo bạn thêm đoạn javascript vào để cấu hình chức cho form liên hệ 17 Script function sendEmail() { var name = $("#name"); var email = $("#email"); var subject = $("#subject"); var body = $("#body"); if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) { $.ajax({ url: 'sendEmail.php', method: 'POST', dataType: 'json', data: { name: name.val(), email: email.val(), subject: subject.val(), body: body.val() }, success: function (response) { $('#myForm')[0].reset(); $('.sent-notification').text("Gửi thành công."); } }); } } function isNotEmpty(caller) { if (caller.val() == "") { caller.css('border', '1px solid red'); return false; } else caller.css('border', ''); return true; } Tiếp tục bạn tạo file sendEmail.php file dùng dể code phần giao thức SMTP/SSL/POST để gửi email qua lại sendEmail.php Như code cài đặt xong chức liên hệ Bây test thử Mở giao diện liên hệ lên điền thông tin Sau nhấn gửi 19 Hình 18: Liên hệ Như thành công nội dung gửi 2.5 Một số hình ảnh trang web Giao diện trang chủ 20 Hình 19: Giao diện trang chủ Giao diện trang liên hệ 21 Hình 20: Giao diện trang liên hệ Danh mục đặt phịng Hình 21: Giao diện phịng Trang hội nghị 22 Hình 22: Trang hội nghị 23 CHƯƠNG 3: TỔNG KẾT ĐÁNH GIÁ & HƯỚNG PHÁT TRIỂN CỦA TRANG WEB Sau nhiều tuần nổ lực hoàn thành thời gian quy định Về giải nhiều vấn đề đặt nội dung hình thức Đây đề tài mang tính tổng hợp bao gồm thiết kế giao diện chức 3.1 Kết đạt được: Thiết kế hoàn chỉnh, hồn thiện mơ hình Các thành phần hoạt động tốt Hiểu biết rèn luyện thêm việc thực dự án khác sau Link website: https://tguhotel.000webhostapp.com/index.php Ưu điểm: Giao diện đẹp, dễ dàng trình duyệt web Tốc độ xử lý nhanh Mô cấu trúc trang web Nhược điểm: Sản phẩm chưa thử nghiệm với thời gian dài với nhiều môi trường khác nên chưa đánh giá xác độ ổn định Website giải vấn đề sạn Vẫn thiếu nhiều chức website đặt phịng khách 3.2 Kết luận: Mơ hình trang web khách sạn đề tài khơng đặt nhiều câu hỏi việc thực nghiên cứu đề tài Để thiết kế trang web phù hợp với nhu cầu sử dụng quảng bá khách sạn đồng thời để nghiên cứu phát triển thêm sau giúp cải thiện trang web ngày ổn định 3.3 Hướng phát triển Trong tương lai mơ hình cải tiến cơng nghệ phát triển thêm như: - Tối ưu hoá mã lệnh mơ hình giúp tiếp nhận lệnh hoạt động hiệu - Tối ưu hoá giao diện vận hành trình duyệt với nhiều thiết bị khác - Đơn giản hoá sử dụng để người dùng tiếp nhận cách nhanh 24 - Cập nhật thêm chức năng, địa điểm du lịch chưa có Tài liệu tham khảo o https://www.w3schools.com/ o Một số trang web khác 25 ... website đặt phịng khách 3.2 Kết luận: Mơ hình trang web khách sạn đề tài khơng đặt nhiều câu hỏi việc thực nghiên cứu đề tài Để thiết kế trang web phù hợp với nhu cầu sử dụng quảng bá khách sạn. .. thầy Nguyễn Minh Khánh giáo viên hướng dẫn đồ án cho chúng em Thầy ln theo sát q trình thực đồ án, nhiệt tình hướng dẫn, bảo để chúng em hoàn thành đồ án Trong trình làm đồ án, chúng em cố gắng... đề tài: Là đề tài thiết kế, xây dựng website khách sạn đáp ứng nhu cầu cho khách du lịch 1.2 Lý chọn đề tài: Ngành du lịch Việt Nam ngày phát triển mạnh mẽ, thu hút hàng triệu khách tham quan du
