(Tiểu luận) đề tài thiết kế giao diện cho website cửa hàng bán đồ ăn nhanh

ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN ĐỒÁNCƠSỞ1 ĐỀ TÀI: THIẾT KẾ GIAO DIỆN CHO WEBSITE CỬA HÀNG BÁN ĐỒ ĂN NHANH Sinh viên thực : NGUYỄN THANH PHONG NGUYỄN PHƯỚC THỊNH Giảng viên hướng dẫn : THS ĐẶNG THỊ KIM NGÂN Lớp : 20IT12 || 20IT2 Đà nẵng, tháng 05 năm 2021 ĐẠI HỌC ĐÀ NẴNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN ĐỒÁNCƠSỞ1 THIẾT KẾ GIAO DIỆN CHO WEBSITE CỬA HÀNG BÁN ĐỒ ĂN NHANH Đà nẵng, tháng 05 năm 2021 LỜI NÓI ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Cùng với phát triển không ngừng kỹ thuật máy tính mạng điện tử, cơng nghệ thơng tin cơng nghệ có đẳng cấp cao chinh phục hết đỉnh cao đến đỉnh cao khác Mạng Internet sản phẩm có giá trị lớn lao ngày trở nên công cụ thiếu, tảng cho truyền tải, trao đổi thơng tin tồn cầu Giờ đây, việc liên quan đến thơng tin trở nên thật dễ dàng cho người sử dụng: cần có máy tính kết nối internet dịng liệu truy tìm gần lập tức… giới vấn đề mà bạn quan tâm ra, có đầy đủ thơng tin, hình ảnh chí đơi lúc có âm bạn cần… Bằng internet, thực nhiều công việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều này, thúc đẩy khai sinh phát triển thương mại điện tử phủ điện tử khắp giới, làm biến đổi đáng kể mặt văn hóa, nâng cao chất lượng sống người Trong hoạt động sản xuất, kinh doanh, đây, thương mại điện tử khẳng định vai trò xúc tiến thúc đẩy phát triển doanh nghiệp Đối với cửa hàng hay shop, việc quảng bá giới thiệu đến khách hàng sản phẩm đáp ứng nhu cầu khác hàng cần thiết Vậy phải quảng bá xây dựng Website cho cửa hàng quảng bá tất sản phẩm bán Vì vậy, chúng em thực đồ án “THIẾT KẾ GIAO DIỆN CHO WEBSITE CỬA HÀNG BÁN ĐỒ ĂN NHANH” LỜI CẢM ƠN Chúng em xin gửi lời cảm ơn chân thành tới nhà trường, khoa Khoa học máy tính tận tình bảo, góp ý tạo điều kiện cho chúng em hoàn thành đề tài nghiên cứu Đồ án sở cách tốt Chúng em xin cảm ơn ThS Đặng Thị Kim Ngân nhiệt tình hướng dẫn chúng em trình thực báo cáo đề tài nghiên cứu Trong trình thực đề tài nghiên cứu, chúng em cố gắng nỗ lực, nhiên khơng tránh khỏi sai sót Chúng em mong nhận góp ý thầy giáo, từ phía hội đồng để đề tài nghiên cứu chúng em hoàn thiện Chúng em xin chân thành cảm ơn! Đà nẵng, tháng 05 năm 2021 NHẬN XÉT (Của giảng viên hướng dẫn) ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… MỤC LỤC Contents Phần mở đầu 1 Tổng quan 1.1 Bối cảnh thực 1.2 Vấn đề cần giải 1.3 Nội dung cần thực Phương pháp nghiên cứu 2.1 Phương pháp 2.2 Phương pháp 2.3 Phương pháp 2.4 Kết luận .2 Chương Cơ sở lý thuyết 1.1 Cơ sở lý luận thực tiễn 1.1.1 Website gì? 1.1.2 Lợi ích Website 1.1.3 Tổng quan HTML .4 1.1.4 Tổng quan CSS 1.1.4 Tổng quan ngơn ngữ lập trình JavaScript 1.1.5 Giới thiệu thư viện hình ảnh Font Awesome 1.1.6 Tổng quan thức ăn nhanh 1.2 Giới thiệu đồ án 1.2.1 Công nghệ sử dụng .7 1.2.2 Bố cục Website 1.2.3 Quy mô Website Chương Phân tích thiết kế hệ thống 10 2.1 Mơ hình tổng quan hệ thống nghiên cứu 10 2.1.1 Phân tích thiết kế hướng đối tượng 10 2.1.2 Mô tả hệ thống 10 2.2 Thiết kế chi tiết 10 Chương Cài đặt xây dựng demo 12 3.1 Giao diện trang chủ 12 3.1.1 Thanh navigation 12 3.1.2 Phần header 12 3.1.3 Phần nội dung 12 3.1.4 Phần footer 17 3.2 Giao diện trang đặt bàn 17 3.3 Giao diện trang thực đơn 18 3.4 Giao diện trang blog 19 3.5 Giao diện trang 21 3.6 Giao diện trang liên hệ 22 Kết luận hướng phát triển 24 Kết luận 24 Hướng phát triển 24 DANH MỤC CÁC BẢNG Bảng – So sánh phương pháp nghiên cứu DANH MỤC HÌNH Hình 1.1 – Logo HTML Hình 1.2 – Logo CSS Hình 1.3 – Logo JavaScript Hình 1.4 – Logo Font Awesome Hình 1.5 – Sự cạnh tranh thương hiệu thức ăn nhanh Hình 1.6 – Giao diện đẹp nhờ công nghệ đại Hình 1.7 – Bố cục hợp lý Hình 3.1 – Thanh navigation .12 Hình 3.2 – Header trang chủ 12 Hình 3.3 – Phần nội dung 1: Đặt bàn 13 Hình 3.4 – Phần nội dung 2: Thực đơn 13 Hình 3.5 – Phần nội dung 3: Về 14 Hình 3.6 – Phần nội dung 4: Điểm bật 14 Hình 3.7: Phần nội dung 5: Đội ngũ .15 Hình 3.8 – Phần nội dung 6: Blog .15 Hình 3.9 – Phần nội dung 7: Liên hệ 16 Hình 3.10 – Màu chủ đạo website - màu đỏ .16 Hình 3.11 – Màu chủ đạo website - màu xanh 16 Hình 3.12 – Phần footer 17 Hình 3.13 – Phần đặt bàn 17 Hình 3.14 – Thư viện JS giúp nhập ngày tháng đơn giản .18 Hình 3.15 – Thực đơn sử dụng Menu Tab 18 Hình 3.16 – Phần nội dung viết 19 Hình 3.17 – Phần đăng 20 Hình 3.18 – Phần xem bình luận 20 Hình 3.19 – Phần nhập bình luận 21 Hình 3.20 – Phần 22 Hình 3.21 – Phần liên hệ 22 Chương Phân tích thiết kế hệ thống 2.1 Mơ hình tổng quan hệ thống nghiên cứu 2.1.1 Phân tích thiết kế hướng đối tượng - Người dùng (user) - Quản trị (admin) 2.1.2 Mô tả hệ thống - Người dùng (user): Đăng nhập / đăng kí tài khoản: tên đăng nhập, mật khẩu, Họ tên, năm sinh, email, số điện thoại, địa Truy cập trang website Đặt hàng, đặt bàn Đánh giá sản phẩm, nhà hàng - Quản trị (admin): Truy cập, chỉnh sửa, thêm mới, xóa bớt, cập nhật, nội dung website Xem đánh giá khách hàng Xem, tiếp nhận thông tin khách hàng đặt qua website 2.2 Thiết kế chi tiết - Trang chủ: giao diện tổng quan Website - Trang Đặt bàn: giao diện đặt hàng - Trang thực đơn: giao diện thực đơn ăn - Trang Blog: giao diện viết liên quan 10