Đề 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 ĐỒ ÁN CƠ SỞ ĐỀ 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 ĐỒ ÁN CƠ SỞ 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ụ khơng thể 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 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 .1 2.2 Phương pháp .2 2.3 Phương pháp .2 2.4 Kết luận 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 .5 1.1.5 Giới thiệu thư viện hình ảnh Font Awesome .6 1.1.6 Tổng quan thức ăn nhanh .6 1.2 Giới thiệu đồ án 1.2.1 Công nghệ sử dụng 1.2.2 Bố cục Website 1.2.3 Quy mô Website .9 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 .5 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 .8 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 chúng tơi 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 - Trang Về chúng tôi: giao diện thông tin đội ngũ nhân viên, nhà hàng - Trang Liên hệ: giao diện thông tin liên hệ, địa nhà hàng 11 Chương Cài đặt xây dựng demo 3.1 Giao diện trang chủ 3.1.1 Thanh navigation Hình 3.1 – Thanh navigation - Thanh cân đối, dễ nhìn, màu sắc dễ nhìn - Thanh gồm logo nhà hàng nằm bên trái menu lựa chọn nằm bên phải - Thanh cố định đầu trang - Thiết kế lớp navbar Bootstrap 3.1.2 Phần header Hình 3.2 – Header trang chủ - Thiết kế đơn giản thu hút người xem - Thiết kế Bootstrap + CSS 3.1.3 Phần nội dung 12 - Phần nội dung đơn giản đầy đủ nội dung, bố cục hợp lí, tạo cảm giác dễ chịu cho người xem - Phần thiết kế Bootstrap, CSS, JavaScript, iframe google map FontAwesome Hình 3.3 – Phần nội dung 1: Đặt bàn 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ề chúng tơi 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ũ 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ệ - Các chi tiết phối hợp hài hòa, thống với màu chủ đạo trang: xanh đỏ Hình 3.10 – Màu chủ đạo website - màu đỏ Hình 3.11 – Màu chủ đạo website - màu xanh 16 3.1.4 Phần footer Hình 3.12 – Phần footer - Được thiết kế đơn giản, màu sắc nhẹ nhàng, hài hòa - Bố cục cân đối, hợp lí - Thể đầy đủ thơng tin cần có: địa chị, liên kết nhận thơng báo 3.2 Giao diện trang đặt bàn Hình 3.13 – Phần đặt bàn - Form giúp khách hàng điền thông tin tiến hành đặt hàng 17 Hình 3.14 – Thư viện JS giúp nhập ngày tháng đơn giản - Giúp khách hàng nhập thông tin cách nhanh chóng xác nhờ sử dụng JS 3.3 Giao diện trang thực đơn Hình 3.15 – Thực đơn sử dụng Menu Tab - Giúp khách hàng thao tác xem sản phẩm thực đơn thuận tiện chuyên nghiệp 18 3.4 Giao diện trang blog Hình 3.16 – Phần nội dung viết - Thiết kế bố cục đẹp mắt với phần bên trái chứa nội dung viết 19 Hình 3.17 – Phần đăng - Các viết bố trí xếp theo hàng dọc phía bên phải trang Hình 3.18 – Phần xem bình luận 20 Hình 3.19 – Phần nhập bình luận - Và phần bên với giao diện thiết kế giúp khách hàng xem bình luận người để lại bình luận thân 3.5 Giao diện trang chúng tơi 21 Hình 3.20 – Phần - Phần giúp cung cấp thông tin nhà hàng đến với thực khách 3.6 Giao diện trang liên hệ Hình 3.21 – Phần liên hệ 22 - Khách hàng tìm thấy địa chỉ, thơng tin liên hệ để lại đánh giá, góp ý trang 23 Kết luận hướng phát triển Kết luận - Đánh giá thị trường thức ăn nhanh - Thực thành công phần giao diện cho Website HTML, CSS JavaScript Hướng phát triển - Tiếp tục phát triển phần giao diện thêm thẩm mỹ - Bổ sung sở liệu - Hoàn thành website hồn chỉnh ngơn ngữ lập trình học kì tới 24