(Tiểu luận) đề tài thiết kế website giới thiệu khách sạn và đặt phòng trực tuyến

TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THIẾT KẾ WEB ĐỀ TÀI Thiết kế website giới thiệu khách sạn đặt phòng trực tuyến Giảng viên hướng dẫn: ThS Phạm Văn Tiệp Sinh viên thực hiện: Bạch Đăng Bảo - MSV: 1351020008 Hà Nội, tháng năm 2021 TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THIẾT KẾ WEB ĐỀ TÀI Thiết kế website giới thiệu khách sạn đặt phòng trực tuyến Giảng viên hướng dẫn: ThS Phạm Văn Tiệp Sinh viên thực hiện: Bạch Đăng Bảo - MSV: 1351020008 Hà Nội, tháng năm 2021 MỞ ĐẦU Chúng ta sống giời mà công nghệ chiếm vị trí thiết yếu sống, từ thứ nhỏ đến cỗ máy đại có xuất cơng nghệ Thật thiếu không nhắc đến thứ mà sử dụng ngày Đó website Một trang web tập tin HTML XHTML truy nhập dùng giao thức HTTP Trang mạng xây dựng từ tệp tin HTML (trang mạng tĩnh) vận hành CMS chạy máy chủ (trang mạng động) Website xây dựng nhiều ngơn ngữ lập trình khác (PHP, ASP.NET, Java, Ruby on Rails, Perl, ) Website giao tiếp hiển thị cho người dùng truy cập phần mềm gọi trình duyệt website Một số trình duyệt website tiếng kể đến Internet Explorer cài đặt mặc định vào máy tính cài hệ điều hành windows thay Edge Windows 10 hay Chrome phát triển Google Firefox phát triển Mozilla LỜI CẢM ƠN Lời đầu tiên, em xin trân trọng cảm ơn Thầy Ths Phạm Văn Tiệp tận tình hướng dẫn tơi q trình học tập em việc hoàn thành BTL Em xin chân thành cảm ơn Thầy, Cô thuộc khoa CNTT trường Đại Học Đại Nam tận tình giảng dạy cho em thời gian học tập Xin cảm ơn cơng cụ tìm kiếm google trợ giúp suốt trình làm BTL Và cuối cùng, xin gửi lời cảm ơn đến gia đình, bạn bè, tập thể lớp CNTT 13-02, người sẵn sàng sẻ chia giúp đỡ học tập sống Mong rằng, mãi gắn bó với Xin chúc điều tốt đẹp đồng hành người.” NHẬN XÉT (Của giảng viên hướng dẫn) Mục Lục MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT DANH MỤC CÁC BẢNG, SƠ ĐỒ, HÌNH .8 I Giao Diện Trang Web HÌNH 1.1 Giao diện trang chủ HÌNH 1.2 Giao diện trang đặt phòng khách sạn HÌNH 1.3 Giao diện đăng nhập II Cấu Trúc Mã Nguồn: KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT 11 Chương 1: Cấu trúc Trang Chủ 12 Chương 2: Cấu trúc trang Đặt Phòng 15 Chương 3: Giao diện trang đăng nhập 19 Chương 4: Nhận xét cá nhân 21 DANH MỤC TÀI LIỆU THAM KHẢO 22 DANH MỤC CÁC BẢNG, SƠ ĐỒ, HÌNH I Giao Diện Trang Web HÌNH 1.1 Giao diện trang chủ HÌNH 1.2 Giao diện trang đặt phịng khách sạn HÌNH 1.3 Giao diện đăng nhập II Cấu Trúc Mã Nguồn: Thư mục chính: - index.html: Trang chủ - sig-in.html: Đăng ký thành viên - intro.html: Trang giới thiệu - Bietthu.html: Trang đặt phòng Folder Image: Chứa folder ảnh icon website, background, button login, search Folder Css: Chứa file css liên quan để định dạng website Folder Js: Chứa file javascripts để làm menu slide cho Top sites, cuộn trang, cập nhật lượt visit 10 KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT BTL: Bài Tập Lớn Ghi chú: Cụm từ viết viết tắt chữ ký hiệu thay chữ viết liền nhau, để thay cho cụm từ có nghĩa thường lặp nhiều lần văn người chấp nhận 11 Trình bày trang tập lớn Chương 1: Cấu trúc Trang Chủ Header: Demo: Gồm ba phần: Website logo (#logo), nav-item (nav-item), khung đăng nhập (#loginDropdown), phần liên hệ (#contact) - Website logo: Ảnh đại diện Website - Nav-item: Dẫn đến trang người dùng muốn - Login dropdown: Người dùng đăng nhập để thực chức cao Giao diện click vào nút login: Carousel slider: 12 Demo: Gồm ba phần chính: Carousel- indicator (#carousel-indicator), Carousel inner (#carouselinner), Carousel prev-next (#carousel prev-next) -Carousel- indicator: Cho phép chuyển slider cách nhấn vào nút tương ứng -Carousel inner: Hiển thị ảnh nội dung slider Người dùng sử dụng button slider để thực chức mong muốn -Carousel prev-next: Cho phép chuyển qua chuyển lại slider Main 1: Demo: Gồm phần chính: Menu chọn (#cssmenu) Search-button (#search-button) - Menu: Người dùng chọn điểm xuất phát, điểm đến thành phố có sẵn menu, ngồi người dùng cịn chọn loại phương tiện mà mong muốn - Search-button: Tìm Kiếm dựa thành phố phương tiện khách hàng chọn 13 Main 2: Demo: Người dùng click vào hai danh mục để sử dụng tính tương ứng Main 3: Demo: 14 Gồm phần chính: Menu Thành Phố (#city-menu) Buynow-button (#buynow-button) -Menu Thành Phố: Người dùng chọn thành phố mà muốn đến -Buynow-button: Khi chọn thành phố ưng í, người dùng nhấn đặt để tiếp tục Footer: Demo: 15 Gồm phần bản: -Khung kết nối mạng xã hội (#social media) – Hiển thị biểu tượng kết nối với tảng mạng xã hội -Chứa liên kết liên hệ trang web (#link) – List liên kết liên hệ trang web ảnh Chương 2: Cấu trúc trang Đặt Phòng Header: Demo: Gồm ba phần: Website logo (#logo), nav-item (nav-item), khung đăng nhập (#loginDropdown), phần liên hệ (#contact) - Website logo: Ảnh đại diện Website - Nav-item: Dẫn đến trang người dùng muốn - Login dropdown: Người dùng đăng nhập để thực chức cao Giao diện click vào nút login: 16 Carousel slider: Demo: Gồm ba phần chính: Carousel- indicator (#carousel-indicator), Carousel inner (#carouselinner), Carousel prev-next (#carousel prev-next) -Carousel- indicator: Cho phép chuyển slider cách nhấn vào nút tương ứng -Carousel inner: Hiển thị ảnh nội dung slider Người dùng sử dụng button slider để thực chức mong muốn -Carousel prev-next: Cho phép chuyển qua chuyển lại slider Main: Demo: 17 Gồm phần chính: Menu Thành Phố (#city-menu) Buynow-button (#buynow-button) -Menu Thành Phố: Người dùng chọn thành phố mà muốn đến -Buynow-button: Khi chọn thành phố ưng í, người dùng nhấn đặt để tiếp tục Footer: Demo: 18 Gồm phần bản: -Khung kết nối mạng xã hội (#social media) – Hiển thị biểu tượng kết nối với tảng mạng xã hội -Chứa liên kết liên hệ trang web (#link) – List liên kết liên hệ trang web ảnh 19 Chương 3: Cấu trúc trang đăng nhập Header: Demo: Gồm ba phần: Website logo (#logo), nav-item (nav-item), khung đăng nhập (#loginDropdown), phần liên hệ (#contact) - Website logo: Ảnh đại diện Website - Nav-item: Dẫn đến trang người dùng muốn - Login dropdown: Người dùng đăng nhập để thực chức cao Giao diện click vào nút login: Login site: Demo: 20 Gồm phần chính: Phần đăng nhập: bao gồm logo (#logo) Phần Đăng Nhập Đăng Ký: Người dùng sử dụng để đăng nhập đăng ký tài khoản…Nút đăng nhập phần quên mật để người dùng dễ thao tác Nút Đăng Ký Ngay, Người dùng sử dụng để đăng ký tài khoản Phần text: Chứa hiệu trang web Footer: Demo: 21