(Tiểu luận) thiết kế web (12) đề tài xây dựng website quản lí nhà hàng gold

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH THIẾT KẾ WEB (12) ĐỀ TÀI: XÂY DỰNG WEBSITE QUẢN LÍ NHÀ HÀNG GOLD Sinh viên thực hiện: TRẦN CƠNG HÙNG HỒNG XUÂN HƯNG NGUYỄN VIẾT HUY Giảng viên hướng dẫn: ThS LƯƠNG KHÁNH TÝ Lớp: 21IT2 – 21IT7 Đà nẵng, tháng 06 năm 2022 21IT615 21IT488 21IT684 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH THIẾT KẾ WEB (12) XÂY DỰNG WEBSITE QUẢN LÍ NHÀ HÀNG GOLD Đà Nẵng, tháng 06 năm 2022 MỞ ĐẦU Nhà Hàng GOLD Ẩm Thực Việt có địa số 470 - Trần Đại Nghĩa - Ngũ Hành Sơn - Đà Nẵng Nhà hàng sở hữu không gian ẩm thực ấm cúng với kết hợp tinh tế văn hóa ẩm thực Việt Nam văn hóa ẩm thực Á Đơng Đến với Nhà Hàng GOLD Ẩm Thực Việt, khách hàng thưởng thức ăn độc đáo, sáng tạo mang đậm dấu ấn đặc trưng Trong đó, ấn tượng bật với thiết kể ẩm thực chủ đạo gồm ăn đặc sắc chế biến từ nguyên liệu truyền thống nguyên liệu nhập 100% đảm bảo chất lượng thực phẩm tới cho khách hàng Nhà Hàng GOLD Ẩm Thực Việt ln có sức hút kì lạ khơng với thực khách nước mà thực khách ngoại quốc yêu nét đẹp truyền thống Các ăn Việt Nam mang hương vị đặc trưng cho vùng miền Nhà hàng ẩm thực Việt Đà Nẵng đa dạng phong phú, nhiên để tìm nơi “đúng chất” khơng dễ dàng Đồng thời tương lai đẩy mạnh, phát triển chuỗi nhà hàng chuyên hải sản cao cấp, thú rừng hoang dã ăn tinh hoa Thực đơn đa dạng 200 ăn set combo dành cho 2-4 người với mức giá hợp lý Với ăn đặc trưng tiếng mà thực khách đến GOLD ẩm thực Việt bỏ qua GOLD ẩm thực Việt điểm đến cho khách hàng có nhu cầu tiếp khách, tụ tập bạn bè, gia đình, liên hoan sinh nhật Thông tin liên hệ: Địa chỉ: Số 470 - Trần Đại Nghĩa - Ngũ Hành Sơn - Đà Nẵng Điện thoại: 0388281722 Email: goldrestaurant@gmail.com LỜI CẢM ƠN Để hoàn thành báo cáo trước tiên chúng em xin gửi đến thầy giáo Lương Khánh Tý - người trực tiếp hướng dẫn đồ án sở lời cảm ơn sâu sắc Cảm ơn thầy quan tâm, hướng dẫn định hướng cho chúng em hướng phát triển đề tài, cung cấp kiến thức lý thuyết để thực sản phẩm Vì khả sinh viên cịn hạn chế, q trình học tập, hồn thiện báo cáo tập sinh viên khơng tránh khỏi sai sót, kính mong nhận ý kiến đóng góp từ giáo viên hướng dẫn Cuối chúng em kính chúc thầy giáo dồi sức khỏe đạt nhiều thành công tốt đẹp công việc Em xin chân thành cảm ơn! NHẬN XÉT (Của giảng viên hướng dẫn) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Đà Nẵng, ngày … tháng 06 năm 2022 Giảng viên hướng dẫn TS LƯƠNG KHÁNH TÝ MỤC LỤC Chương Giới thiệu 1.1 Tên đề tài 1.2 Giới thiệu dự án 1.3 Mục tiêu 1.4 Logo website Chương Công cụ thiết kế 2.1 Tìm hiểu HTML 2.1.1 HTML gì? 2.1.2 Cấu trúc HTML Website 2.2 Tìm hiểu CSS 2.2.1 CSS gì? 2.3 Tìm hiểu JS 2.3.1 JS gì? 2.3.2 JS dùng làm gì? 2.4 Tìm hiểu jQuery 2.4.1 jQuery gì? 2.5 Tìm hiểu SCSS 2.5.1 SCSS gì? 2.6 Tìm hiểu Sublime Text 2.6.1 Sublime Text gì? 2.6.2 Tại nên lựa chọn Sublime Text 3? Chương Phần Website 3.1 Giới thiệu trang web 3.2 Nội dung trang web chức bên 3.3 Hình ảnh website quản lý nhà hàng gold 3.3.1 Thanh header, menu 3.3.2 Thanh footer 3.3.3 Trang chủ 3.3.4 Trang giới thiệu 3.3.5 Trang menu lẩu 3.3.6 Trang menu nướng BBQ 3.3.7 Trang menu buffet 3.3.8 Trang menu đồ uống 3.3.9 Trang đặt bàn 3.3.10 Trang tin tức 3.3.11 Trang liên hệ Chương Kết luận 4.1 Kết 4.2 Hạn chế 4.3 Hướng phát triển 1 1 2 2 2 2 2 3 3 4 5 8 9 10 10 11 12 12 12 12 DANH MỤC HÌNH Hình – Logo website nhà hàng gold Hình - Thanh header, menu .5 Hình - Thanh footer Hình - Trang chủ Slide Hình - Trang chủ - Buffet Hình - Trang chủ - Lẩu Hình – Trang chủ - Drink Hình – Trang chủ - BBQ Hình – Trang chủ - Ý kiến khách hàng Hình 10 - Trang giới thiệu Hình 11 – Trang menu lẩu Hình 12 - Trang menu BBQ Hình 13 - Trang menu buffet .9 Hình 14 - Trang menu đồ uống 10 Hình 15 - Trang đặt bàn 10 Hình 16 - Trang tin tức .11 Hình 17 – Trang liên hệ - Map 11 Hình 18 – Trang liên hệ - Ý kiến 11 DANH MỤC CỤM TỪ VIẾT TẮT STT 10 11 12 Cụm từ Viết tắt Application Programming Interface Asynchronous JavaScript and XML Cascading Style Sheets Content Delivery Network Document Object Model Extensible Markup Language Gigabyte HyperText Markup Language Identification JavaScript Software-as-a-Service Uniform Resource Locator API AJAX CSS CDN DOM XML GB HTML ID JS SAAS URL Chương Giới thiệu 1.1 Tên đề tài “XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG GOLD” 1.2 Giới thiệu dự án Với phát triển công nghệ thông tin nay, dễ dàng tạo website quản lý nhà hàng đẹp mắt để phục vụ nhu cầu ăn uống khách hàng tiện lợi dễ dàng xưa Đề tài nhằm mục tiêu xây dựng website để quản lý nhà hàng việc khách hàng thông qua website để tiến hành lựa chọn thực đơn, tìm hiểu kĩ nhà hàng tiến hành việc đặt bàn tiện lợi cho nhu cầu ăn uống khách hàng 1.3 Mục tiêu - Xây dựng trang web gồm trang sau: Trang chủ Trang giới thiệu Trang menu lẩu Trang menu nướng BBQ Trang menu Buffet Trang menu đồ uống Trang đặt bàn Trang tin tức Trang liên hệ 1.4 Logo website Hình – Logo website nhà hàng gold Công cụ thiết kế website Sử dụng ngơn ngữ lập trình web HTML, JavaScript, jQuery công cụ hỗ trợ định dạng CSS, SCSS để tạo website tĩnh Sử dụng Sublime Text 3: phần mềm lập trình đa tảng, editor tiếng cho lập trình viên chạy nhiều hệ điều hành máy tính Chương Cơng cụ thiết kế 2.1 Tìm hiểu HTML 2.1.1 HTML gì? HTML (HyperText Markup Language) ngơn ngữ lập trình dùng để xây dựng cấu trúc lại thành phần có website Là ngôn ngữ đánh dấu siêu văn Người ta thường sử dụng HTML việc phân chia đoạn văn, heading, links, blockquotes… 2.1.2 Cấu trúc HTML Website Một website thường chứa nhiều trang trang lại có tập tin HTML riêng HTML khơng phải ngơn ngữ lập trình khơng thể thực chức động, có tác dụng bố cục định dạng trang web phải kết hợp với CSS (Cascading Style Sheets) JavaScript 2.2 Tìm hiểu CSS 2.2.1 CSS gì? CSS (Cascading Style Sheets) ngôn ngữ sử dụng để tạo nên phong cách cho Website Có thể hiểu cơng cụ giúp thêm vào thay đổi mặt hình thức bố cục màu sắc, font chữ… Hoạt động cách khoanh vùng chọn dựa thẻ HTML, ID hay Class từ áp dụng thuộc tính cần thay đổi lên vùng chọn Có thể hiểu website khơng có CSS đơn trang chứa văn với hai màu chủ đạo trắng đen 2.3 Tìm hiểu JS 2.3.1 JS gì? JS (JavaScript) ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website sống động Các slide show, pop-up quảng cáo tính autocomplete Google viết JS JS hỗ trợ hầu hết trình duyệt máy tính điện thoại 2.3.2 JS dùng làm gì? Khi tải trang web, trình duyệt phân tích cú pháp HTML tạo loại liệu gọi DOM từ nội dung DOM thể chế độ xem trực tiếp trang web với mã JavaScript Đoạn mã thực cập nhật cho DOM trình bày cho người dùng Trình duyệt ghi nhận kiện giao diện người dùng như: di chuyển chuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi người dùng, đoạn mã thực cơng việc lập trình tương ứng Sử dụng tất tiện ích này, bạn xây dựng ứng dụng nhỏ để phục vụ cho vài mục đích cho phép 2.4 Tìm hiểu jQuery 2.4.1 jQuery gì? JQuery tích hợp nhiều module khác Từ module hiệu ứng module truy vấn selector JQuery sử dụng đến 99% tổng số website giới jQuery khơng phải ngơn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript Với jQuery, bạn làm nhiều việc mà lại tốn cơng sức JQuery cung cấp API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý kiện thao tác AJAX đơn giản 2.5 Tìm hiểu SCSS 2.5.1 SCSS gì? SCSS chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp bạn viết CSS theo cách ngơn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển bảo trì code Ngồi có nhiều thư viện hỗ trợ kèm theo giúp bạn viết code CSS cách dễ dàng vào đơn giản 2.6 Tìm hiểu Sublime Text 2.6.1 Sublime Text gì? Sublime Text phần mềm lập trình đa với ưu điểm cho phép mở file nhanh với vài phím tắt, lựa chọn thao tác nhiều đơn vị lúc, chế độ hạn chế tập trung, chuyển đổi dự án nhanh chóng, tùy biến dễ dàng chia sẻ hình dễ dàng để chỉnh sửa 2.6.2 Tại nên lựa chọn Sublime Text 3? Sublime Text editor phổ biến cho nhà ngơn ngữ lập trình, với giao diện sử dụng thân thiện với khả tùy chỉnh linh hoạt Tuy đời sau Notepad++ ứng dụng đánh giá mang đến trải nghiệm người dùng tốt hẳn phù hợp để xây dựng website quản lí nhà hàng Chương Phần Website 3.1 Giới thiệu trang web Đây website quản lý nhà hàng online nhằm mục đích phục vụ nhu cầu ăn uống khách hàng Về phía khách hàng: + Xem thơng tin sơ nhà hàng + Tìm hiểu nét đặc trưng văn hóa ẩm thực nhà hàng gold + Thông qua website để đặt bàn trước thuận tiện cho việc ăn uống + Biết trước loại thực đơn, thức ăn giá để tiện lợi lên kế hoạch trước đến nhà hàng Về phía quản lý: + Thơng qua thông tin cá nhân khách hàng đặt bàn trước website thực quy trình chuẩn bị + Cập nhật giá hay vấn đề phát sinh nhà hàng để khách hàng kịp thời theo dõi 3.2 Nội dung trang web chức bên Các trang web có liên kết để kết nối với Mọi trang có menu để chuyển trang cách dễ dàng, thực tìm kiếm thơng tin nhà hàng hay ăn để thực việc lựa chọn tốt để đem đến trải nghiệm hồn mỹ cho thân khách hàng Trang chủ: - Hiển thị thông tin sơ lược nhà hàng - Chuyển sang trang khác - Hiển thị địa hotline nhà hàng Trang giới thiệu: Có hình ảnh bao quát phong cảnh, sắc đẹp phịng ăn nhà hàng gold hóa ẩm thực Xem thông tin không gian nhà hàng nét văn Trang menu lẩu: Chứa lẩu đa dạng với loại thực phẩm thơm ngon bổ dưỡng Trang menu nướng BBQ: Chứa nướng đầy đủ loại thiếu ngun liệu độc tơn cho nướng hải sản thịt Trang menu buffet: - Có loại buffet cho khách hàng lựa chọn Trang menu đồ uống: - Với đầy đủ loại thức uống có thị trường Trang đặt bàn: Khách hàng điền thông tin cá nhân thông tin vấn đề liên quan để nhân viên quản lý chuẩn bị chọn Có hiển thị gợi ý thông tin đặt bàn cho khách hàng dễ dàng lựa Trang tin tức: - Tất tin tức liên quan đến nhà hàng - Có thể tìm kiếm tin tức muốn tìm hiểu Trang liên hệ: - Hiển thị vị trí địa nhà hàng gold google map Để lại ý kiến cho nhà hàng gặp phải vấn đề 3.3 Hình ảnh website quản lý nhà hàng gold 3.3.1 Thanh header, menu Nằm web, chứa logo website, địa hotline nhà hàng, đường dẫn sang trang khác Xuất tất trang HTML thuộc website quản lý nhà hàng gold Hình - Thanh header, menu 3.3.2 Thanh footer Nằm web, chứa đường dẫn tới trang mạng xã hội thuộc website nhà hàng gold, logo web, địa cách thức liên hệ với nhà hàng gold Xuất tất trang HTML thuộc website nhà hàng gold Hình - Thanh footer 3.3.3 Trang chủ Gồm phần slide thơng tin loại thực đơn, phần slide hiển thị hình ảnh ăn đặc trưng cho nhà hàng để khách hàng vừa truy cập vào website có cảm giác hấp dẫn từ ánh nhìn bên cạnh có nhiều thơng tin liên quan đến khái niệm loại thực đơn nhà hàng để khách hàng nhận biết Ý kiến khách hàng hiển thị Hình - Trang chủ Slide Hình - Trang chủ - Buffet Hình - Trang chủ - Lẩu Hình – Trang chủ - Drink Hình – Trang chủ - BBQ Hình – Trang chủ - Ý kiến khách hàng 3.3.4 Trang giới thiệu Hiển thị hình ảnh sơ lược phịng bàn ăn nhà hàng thông tin phong cách văn hóa ẩm thực nhà hàng gold Hình 10 - Trang giới thiệu 3.3.5 Trang menu lẩu Chứa tên lẩu hình ảnh minh họa nguyên liệu cho lẩu để khách hàng tự lựa chọn Hình 11 – Trang menu lẩu 3.3.6 Trang menu nướng BBQ Chứa loại nướng hấp dẫn kèm hình ảnh minh họa bắt mắt nguyên liệu cho nướng chia khách hàng dễ dàng chọn lựa Hình 12 - Trang menu BBQ 3.3.7 Trang menu buffet Hiển thị loại buffet với loại giá khác cho khách hàng chọn lựa hiển thị list thức ăn có loại buffet Hình 13 - Trang menu buffet 3.3.8 Trang menu đồ uống Chứa đầy đủ loại đồ uống khác từ rượu, bia nước giải khát với giá khác Hình 14 - Trang menu đồ uống 3.3.9 Trang đặt bàn Khách hàng điền thông tin theo gợi ý mà nhà hàng hiển thị trang đặt bàn điền vào form cho để thực trình đặt bàn Hình 15 - Trang đặt bàn 3.3.10 Trang tin tức Chứa tin tức ngày liên quan tới nhà hàng có vấn đề cập nhật cho khách hàng theo dõi liên quan đến vấn đề khác Hình 16 - Trang tin tức 3.3.11 Trang liên hệ Hiển thị vị trí nhà hàng đồ thắc mắc hay có vấn đề cần ý kiến khách hàng thực trang Hình 17 – Trang liên hệ - Map Hình 18 – Trang liên hệ - Ý kiến 1 Chương 4.1 - Kết luận Kết Kinh nghiệm Website, Sublime Text 3, CSS, JS, Font Awesome, Thành thạo Sublime Text Thiết kế website với kiến thức có Hiểu sâu kiến thức ngơn ngữ HTML kĩ thiết kế website Tìm hiểu nhiều điều rút nhiều kinh nghiệm q báu 4.2 Hạn chế Vì kiến thức cịn hạn chế nên làm chức đơn giản áp dụng kiến thức học vấn đề phân tích hệ thống chưa thật đầy đủ sâu vào lĩnh vực, áp dụng vào thực tế Một số hạn chế bài: Mức độ tìm hiểu cịn sơ sài, đơn giản, chưa mang đến tính hiệu cao để giải tốn triệt để với mức độ lớn Chương trình xây dụng chưa có tính thực tế cao, chưa đáp ứng yêu cầu thực tế 4.3 Hướng phát triển Phát triển chương trình đồ án thành một: Ứng dụng quản lí nhà hàng thành cơng hữu ích, giúp đỡ doanh nhân nói riêng người nói chung