ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI: THIẾT KẾ WEBSITE HƯỚNG DẪN NẤU ĂN

ĐẠI HỌC ĐÀ NẴNG TRƯỜ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Ế WEBSITE HƯỚNG DẪN NẤU ĂN Sinh viên thực : HỒ ANH DŨNG PHAN THỊ MINH THẢO Giảng viên hướng dẫn : TS ĐẶNG QUANG HIỂN Lớp : 20IT2 Đà nẵng, tháng năm 2021 ĐẠI HỌC ĐÀ NẴNG TRƯỜ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Ế WBSITE HƯỚNG DẪN NẤU ĂN Đà Nẵng, tháng năm 2021 LỜI MỞ ĐẦU - - Trong thực tế, biết nấu ăn biết nấu ăn ngon, phù hợp với lứa tuổi, sức khỏe, điều kiện kinh tế Đối với người bận rộn với cơng việc, khơng có thời gian để đến trung tâm hay khóa học nấu ăn Thêm vào đó, với phát triển CNTT, mạng truyền thông, thiết bị thông minh, việc tiếp cận với trang mạng cách dễ dàng lúc, giúp tiết kiệm thời gian công sức Đề tài nhằm mục tiêu hỗ trợ cho nội trợ học hỏi có thêm kiến thức, công thức nấu ăn, giúp tiết kiệm thời gian, có thêm nhiều lựa chọn hợp lí Vì vậy, chúng em chọn đề tài “ thiết kế website hướng dẫn nấu ăn” LỜI CẢM ƠN - Lời cho phép em gửi lời cảm ơn tới Thầy Cô giáo cán công tác Khoa Khoa Học Máy Tính – Trường Đại Học CNTT Và Truyền Thông ViệtHàn tạo điều kiện giúp đỡ chúng em thời gian xây dựng hoàn thành đồ án - Đặc biệt em xin bày tỏ lòng biết ơn sâu sắc tới thầy Ts Đặng Quang Hiển người tận tình giúp đỡ, bảo nghiệp vụ trực tiếp hướng dẫn nhóm chúng em suốt q trình hồn thành đồ án - Tuy nhiên thời gian có hạn với nhiều nguyên nhân khác, chúng em nổ lực xong đồ án nhóm , cịn mắc phải thiếu sót hạn chế Em mong nhận thông cảm bảo Thầy Cô tất bạn Em xin chân thành cảm ơn ! NHẬN XÉT (Của giảng viên hướng dẫn) ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… MỤC LỤC LỜI MỞ ĐẦU .3 LỜI CẢM ƠN NHẬN XÉT DANH MỤC HÌNH .7 DANH MỤC CỤM TỪ VIẾT TẮT .9 CHƯƠNG 1: GIỚI THIỆU 10 1.1 Tổng quan 10 1.1.1 Bối cảnh thực đề tài: .10 1.1.2 Vấn đề cần giải quyết: 10 1.1.3 Đề xuất nội dung thực hiện: 10 1.2 Phương pháp, kết quả: 11 1.2.1 Phương pháp: 11 1.2.2 Kết quả: 11 1.3 Cấu trúc đồ án: .11 CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU 12 2.1 Cơ sở lí thuyết: 12 2.1.1 Sơ lược ngơn ngữ lập trình web HTML: 12 2.1.2 Sơ lược ngơn ngữ lập trình web CSS: 12 2.1.3 Sơ lược ngôn ngữ lập trình web Bootstrap: .12 2.1.4 Giới thiệu phần mềm Visual Studio Code: 12 2.1.4.1 Visual Code gì? 12 2.1.4.2: Những tính mạnh mẽ visual code: 13 2.1.5 Giới thiệu môi trường hoạt động Chrome: 14 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 16 3.1 Cách thức hoạt động website hướng dẫn: 16 3.2 Miêu tả chức năng: .16 CHƯƠNG 4: WEBSITE HƯỚNG DẪN NẤU ĂN 17 4.1 Giao diện trang chủ: .17 4.2 Giao diện ăn: 18 4.3 Giao diện video: 21 4.4 Giao diện liên hệ: 21 4.5 Giao diện footer: 22 4.6 Giao diện đăng nhập: 23 4.7 Giao diện đăng kí: 23 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 25 5.1 Kết đạt được: 25 5.2 Hạn chế: .25 5.3 Hướng phát triển: 26 DANH MỤC TÀI LIỆU THAM KHẢO 27 DANH MỤC HÌNH Figure 1: Trang chủ 18 Figure 2: Món ăn .19 Figure 3: Nguyên liệu ăn 19 Figure 4: Các bước thực ăn 20 Figure 5: Video hướng dẫn nấu ăn .21 Figure 6: Liên hệ 21 Figure 7: Footer 22 Figure 8: Đăng nhập 23 Figure 9: Đăng kí .24 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ Viết tắt HyperText Markup Language HTML Cascading Style Sheet CSS Công Nghệ Thông Tin CNTT Visual Code VSC CHƯƠNG 1: GIỚI THIỆU 1.1 Tổng quan 1.1.1 Bối cảnh thực đề tài: - Ngày nay, biết nấu ăn nấu ăn ngon Với người bận rộn với cơng việc việc nấu ăn trở nên khó khăn khơng có thời gian để đến trung tâm hay khóa học nấu ăn Với phát triển thời đại 4.0 người đâu hay làm phải cần có điện thoại kết nối với mạng, việc tiếp cận với trang mạng điều dễ dàng, lúc nơi, giúp tiết kiệm thời gian cơng sức Vì vậy, chúng em chọn đề tài “ thiết kế website hướng dẫn nấu ăn” để giúp cho nội trợ học hỏi, có thêm nhiều kiến thức, cơng thức nấu ăn để có bữa ăn ngon cho buổi tiệc, liên hoan hay buổi ăn cho gia đình 1.1.2 Vấn đề cần giải quyết: - Website hướng dẫn nấu ăn nhằm giúp cho người nội trợ có thêm bí quyết, cách nấu ăn ngon cho gia đình - Website giải vấn đề thời gian người bận rộn với cơng việc, khơng có thời gian để đến trung tâm hay khóa học nấu ăn - Tiết kiệm chi phí đồng thời người nội trợ học đâu áp dụng sau xem từ website hướng dẫn nấu ăn 1.1.3 Đề xuất nội dung thực hiện: - Thiết kế giao diện website giới thiệu cơng ăn nhằm giúp người dùng dễ dàng xem thơng tin ăn - Thiết kế giao diện website cho phép dùng truy cập vào trang web cách nhanh chóng mà khơng thủ tục phức tạp - Website công khai, minh bạch cung cấp thơng tin xác nhằm đem lại tin cậy cho người dùng 10 - Có thể nói VSC kết hợp tuyệt vời tính đơn giản editor công cụ hỗ trợ mạnh mẽ dành cho lập trình viên Debugger, Git, Terminal cịn nhiều Đúng vậy, nhìn chung VSC Code Editor độ hữu ích khơng cạnh IDE 2.1.4.2: Những tính mạnh mẽ visual code: - Nói đến tính hỗ trợ lập trình viên từ lúc bắt đầu, VSC cho thấy vượt trội so với Code Editor khác Tiêu biểu số tính kể đến như: IntelliSense - IntelliSense kết hợp code auto-complete trí tuệ nhân tạo (AI) Tính cung cấp loạt đề nghị với gợi ý mô tả ngắn ta viết code Những gợi ý tính tốn dựa theo nhân tố bối cảnh ngơn ngữ lập trình, cú pháp, biến, hàm, code file - Hầu hết Code Editor đại có IntelliSense, phần mềm chuyên nghiệp VisualCode Đây tính nâng cao hiệu suất lập trình khơng thể thiếu lập trình viên chuyên nghiệp - VisualCode cung cấp sẵn IntelliSense cho ngôn ngữ lập trình JavaScript, CSS, HTML, TypeScript Ngồi bạn cài thêm IntelliSense cho ngôn ngữ khác thông qua extension, bạn tự custom tính cho phù hợp với mình, tiện khơng nào! Tích hợp sẵn Git - Nhu cầu làm việc nhóm lưu trữ khơng thể thiếu, tích hợp Git vào Code Editor tính lựa chọn đắn Git VisualCode cung cấp cho bạn git action commit code, pull, push,… Và qua phiên việc hỗ trợ Git đầy đủ Debugger - Một tính VisualCode khả hỗ trợ debug tuyệt vời Theo mặc định, VisualCode kèm theo trình Debug hỗ 13 trợ NodeJS Nhưng tất nhiên, lần nữa, bạn cài thêm extension để debug cho ngơn ngữ khác Tích hợp Terminal: - Terminal chương trình giao diện cửa sổ dịng lệnh (command line interface) Cũng Git, nhu cầu sử dụng terminal lập trình viên vơ quan trọng - Trên VisualCode, bạn mở nhiều tab terminal thư mục làm việc tại, điều làm tăng hiệu suất công việc lên nhiều Khả tùy chỉnh mở rộng: - VisualCode cung cấp khả tùy chỉnh tuyệt vời dành cho người dùng, từ theme, font chữ, kích thước đến tùy chỉnh tính năng, keyboard shortcut, snippets, coding style,… vơ linh hoạt Ngồi bạn cịn tùy chỉnh workspace tiện lợi cho loại dự án - Cũng Code Editor/IDE khác, VisualCode có khả mở rộng thơng qua việc cài thêm extension 2.1.5 Giới thiệu môi trường hoạt động Chrome: Google lấy thông tin từ nhiều nguồn khác nhau, bao gồm: - Trang web - Nội dung người dùng gửi, chẳng hạn nội dung người dùng gửi Google Doanh nghiệp Maps - Nội dung quét từ sách - Cơ sở liệu công khai Internet - Và nhiều nguồn khác Tuy nhiên, trang tập trung vào trang web Google thực ba bước để tạo kết từ trang web: 1.Thu thập liệu: - Bước tìm trang tồn web Google không lưu giữ danh mục trung tâm trang web, đó, chúng tơi phải liên tục tìm kiếm trang thêm trang vào danh sách trang 14 biết Google biết đến số trang chúng tơi truy cập trang từ trước Google tìm thấy trang khác theo đường liên kết từ trang biết đến trang Ngoài ra, phát số trang khác chủ sở hữu trang web gửi danh sách trang để Google thu thập liệu Nếu bạn sử dụng nhà cung cấp dịch vụ lưu trữ web quản lý, họ u cầu Google thu thập liệu trang bạn tạo cập nhật - Khi phát URL trang, Google truy cập thu thập liệu trang để tìm hiểu nội dung trang Google hiển thị trang phân tích nội dung văn lẫn nội dung văn bố cục hiển thị tổng thể để định vị trí trang kết Tìm kiếm Càng hiểu rõ trang web bạn Google hiển thị trang cho người tìm kiếm nội dung bạn cách phù hợp nhiêu Lập mục: - Sau tìm thấy trang, Google cố gắng tìm hiểu nội dung trang Q trình gọi lập mục Google phân tích nội dung trang, lập danh mục hình ảnh tệp video nhúng trang cố gắng tìm hiểu trang theo cách khác Thông tin lưu trữ mục Google – sở liệu khổng lồ lưu trữ nhiều máy tính Phân phát (và xếp hạng): - Khi người dùng nhập cụm từ tìm kiếm, Google cố gắng tìm câu trả lời phù hợp mục dựa nhiều yếu tố Google cố gắng xác định câu trả lời có chất lượng cao xem xét yếu tố cung cấp trải nghiệm người dùng tốt câu trả lời phù hợp nhất, vị trí, ngơn ngữ thiết bị người dùng (máy tính điện thoại) 15 CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Cách thức hoạt động website hướng dẫn: - Khi vào trang web, khách hàng kích ăn thích, hệ thống chuyển khách hàng đến trang xem thông tin, hiển thị nguyên liệu, gia vị, cách chuẩn bị, cách nấu ăn - Khách hàng tìm kiếm ăn muốn nấu, khách hàng tìm kiếm theo tên ăn , có tên ăn hệ thống trả ăn mà khách hàng nhập - Người quản lí có nhiệm vụ cập nhật ăn lên website, sửa thơng tin ăn bị lỗi, xóa ăn sai, khơng phù hợp - Khách hàng để lại phản hồi thông tin hướng dẫn, phản hồi khách hàng phải ghi rõ chủ đề để lại tên để tiện cho việc phản hồi 3.2 Miêu tả chức năng: - Hiển thị ăn: + Hiển thị tên ăn: Để khách hàng biết ăn tên + Hiển thị ngun liệu nấu ăn: Hiển thị tất nguyên liệu liên quan đến ăn hướng dẫn, khách hàng biết muốn nấu ăn cần nguyên liệu gì, khối lượng bao nhiêu,… + Hiển thị cách chế biến: Khách hàng học cách chế biến nguyên liệu nấu ăn, bước để hoàn thành ăn ngon, cách nem nếm cho phù hợp vị,… - Hiển thị video hướng dẫn nấu ăn: Video giúp cho khách hàng nắm rõ cách chọn nguyên liệu, bước chế biến đến nem nếm lời khuyên bổ ích từ đầu bếp hướng dẫn nấu ăn - Xem thơng tin ăn: Người quản lí xem hướng dẫn nấu ăn để kiểm tra xem có xác hay thiếu xót khơng, có vấn đề cần phải điều chỉnh bổ sung thêm để hướng dẫn xác đến với khách hàng - Tìm kiếm thơng tin ăn: Khách hàng tìm kiếm ăn muốn nấu, hệ thống kiểm tra có tên ăn trả ăn có từ khóa mà khách hàng nhập 16 CHƯƠNG 4: WEBSITE HƯỚNG DẪN NẤU ĂN 4.1 Giao diện trang chủ: - Thanh menu: + Thanh tìm kiếm 17 + Món Ăn + Video + Liên hệ + Đăng nhập + Đăng kí Figure 1: Trang chủ 4.2 Giao diện ăn: 18 Figure 2: Món ăn Figure 3: Nguyên liệu ăn 19 Figure 4: Các bước thực ăn 20 4.3 Giao diện video: Figure 5: Video hướng dẫn nấu ăn 4.4 Giao diện liên hệ: Figure 6: Liên hệ 21 4.5 Giao diện footer: Figure 7: Footer 22 4.6 Giao diện đăng nhập: Figure 8: Đăng nhập 4.7 Giao diện đăng kí: 23 Figure 9: Đăng kí 24 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết đạt được: - Nắm bắt số khái niệm phục vụ cho việc viết báo cáo - Trình bày báo cáo cách khoa học có hệ thống kiến thức hiểu biết thân, có tham khảo tài liệu vấn đề có liên quan đến nội dung tìm hiểu, nghiên cứu - Trong thời gian làm đề tài hoàn thiện thêm kiến thức học trường suốt học kì - Tăng khả tư logic, nghiên cứu độc lập vấn đề mà trước chúng em khơng quan tâm - Về cài đặt chương trình: + Giới thiệu cách nấu ăn đến với khách hàng + Cho phép tra cứu công thức nấu ăn khách hàng có nhu cầu tìm hiểu học cách nấu + Cập nhật: Món ăn, khách hàng - Về tính chương trình: + Thơng tin ăn cập nhật kịp thời, xác + Giao diện thân thiện với người dùng 5.2 Hạn chế: - Mặc dù có nhiều cố gắng, tìm hiểu kiến thức học, kết hợp tra cứu tài liệu chuyên ngành hạn chế khả kinh nghiệm nên khơng thể tránh khỏi thiếu sót định - Báo cáo chưa giải trọn vẹn vấn đề phát sinh trình quản lý - Báo cáo chưa đạt tính thẩm mĩ cao, phong cách hành văn lủng củng, nhiều vấn đề chưa xác cần khắc phục q trình phát triển, nâng cấp phần mềm giai đoạn sau 25 5.3 Hướng phát triển: - Mở rộng mơ hình qua năm - Tiếp cận đến nhiều đối tượng khách hàng chưa biết nấu ăn - Tìm hiểu thêm số ngôn ngữ, phần mềm ứng dụng để nâng cao giao diện đồ họa đẹp mắt, sinh động 26 DANH MỤC TÀI LIỆU THAM KHẢO https://webdesign.tutsplus.com/vi/tutorials/css-experiments-with-asearch-form-input-and-button cms-22069 - Tác giả: Paula Borowska https://www.youtube.com/channel/UC-2EWHDbHnx5JOeyWfLdIxQ https://www.w3schools.com/html/default.asp http://webso.vn/web.php?web=10357 https://viblo.asia/p/bai-1-bootstrap-la-gi-gioi-thieu-ve-bootstrapDzVkpLbDknW- Tác giả: Pham Thi Ngoc Mai https://www.hostinger.vn/huong-dan/css-la-gi - Tác giả: Hai G https://www.marketenterprise.vn/blog/gioi-thieu-ve-visual-studio-codeky-i.html#:~:text=VSCode%20l%C3%A0%20m%E1%BB%99t%20c %C3%B4ng%20c%E1%BB%A5,n%C3%B3%20ho%C3%A0n%20to %C3%A0n%20mi%E1%BB%85n%20ph%C3%AD - Tác giả: Trung Dang 27