MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP ĐẠ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Ở 1 ĐỀ TÀI THIẾT KẾ WEBSITE HƯỚNG DẪN NẤU ĂN 1 LỜI MỞ ĐẦU 2 Trong thực tế, không ph[.]
ĐẠ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 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ệt-Hà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 ! MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT DANH MỤC HÌNH 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 18 4.1 Giao diện trang chủ: 18 4.2 Giao diện ăn: 19 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: 22 4.7 Giao diện đăng kí: 23 CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 24 5.1 Kết đạt được: 24 5.2 Hạn chế: .24 5.3 Hướng phát triển: 25 DANH MỤC TÀI LIỆU THAM KHẢO .26 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 .22 Figure 9: Đăng kí .23 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 1.2 Phương pháp, kết quả: 1.2.1 Phương pháp: - Trước tiên ta phải phân tích thiết kế giao diện, hệ thống website phần mềm - Dựa kiến thức học, sử dụng ngôn ngữ HTML, CSS, Bootstrap số cơng cụ lập trình Sublime Text để thiết kế website tĩnh - Tham khảo, tiếp thu ý kiến, thông tin từ giảng viên hướng dẫn để hồn thiện website tốt phần mềm ngơn ngữ sử dụng 1.2.2 Kết quả: - Giao diện hội tụ đủ ba yếu tố độc đáo , tinh tế đại Hình ảnh sắc nét sống động Tiện lợi cho việc người dùng tìm hiểu rõ ăn Tốc độ tải trang web nhanh Website tương thích với thiết bị di động hay máy tính thị trường Ngồi trang web thiết kế dễ dàng sử dụng tiện nâng cấp tương lai - Ngoài ra, trang web số chức chưa hòan thiện chưa khai thác nhiều nội dung 1.3 Cấu trúc đồ án: - Chương 2: Nghiên cứu thiết kế + Đây chương nêu cụ thể lý thuyết ngôn ngữ lập trình webiste Do giúp ta hiểu cụ thể ngôn ngữ lập trình ngơn ngữ siêu văn - Chương 3: Phân tích thiết kế hệ thống + Chương tập trung vào cách thức hoạt động website miêu tả chi tiết chức để giúp cho khách hàng tiếp cận dễ dàng với trang web - Chương 4: Kết đạt + Ở chương trình bày số kết đạt được, thư viện sử dụng sau thiết kế giao diện website CHƯƠNG 2: THIẾT KẾ NGHIÊN CỨU 2.1 Cơ sở lí thuyết: 2.1.1 Sơ lược ngơn ngữ lập trình web HTML: - HTML chữ viết tắt HyperText Markup Language(ngôn ngữ đánh dấu siêu văn bản) HTML sinh để tạo nên trang web với mẫu thơng tin trình bày World Wide Web HTML viết lên phần mềm, trình soạn thảo văn thơng thường notepad++, editplus, trình soạn thảo chuyên dụng visual studio, sublime text 3,… Một file HTML có hai địng dạng mở rộng html htm 2.1.2 Sơ lược ngơn ngữ lập trình web CSS: - CSS (Cascading Style Sheet) Web cấu tạo từ thẻ html với thẻ html thể khung website Để chỉnh, trình bày cho đẹp mắt ta cần sử dụng ngôn ngữ CSS Đây ngôn ngữ dùng nhiều ngôn ngữ website, thường ngôn ngữ html 2.1.3 Sơ lược ngôn ngữ lập trình web Bootstrap: - Bootstrap xây dựng dựa tảng HTML templates, CSS templates Javascript để hình thành nên mẫu thiết kế có sẵn typography, forms, buttons( nút bấm), tables(bảng), navigation, modals, image carousels nhiều thành phần khác Với mục đích giúp cho nhà phát triển thiết kế reponsive cho website dễ dàng nhanh hơn, plugin Javascript tích hợp Bootstrap 10 2.1.4 Giới thiệu phần mềm Visual Studio Code: 2.1.4.1 Visual Code gì? - VisualCode công cụ soạn thảo mã nguồn Microsoft phát triển, giới thiệu lần đầu vào năm 2015 thức phát hành năm 2016 VSC cài đặt sử dụng Windows, MacOS Linux VSC mã nguồn mở hồn tồn miễn phí - 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 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 chun 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 q khơng nào! 11 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ỗ 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 12 - 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 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 Ngồi ra, chúng tơi 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ọ yê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 khơng phải 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 Quá 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 13 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) 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 14 + Hiển thị nguyên 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 ngun 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 để hồ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 15 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 + Món Ăn + Video + Liên hệ + Đăng nhập + Đăng kí 16 Figure 1: Trang chủ 4.2 Giao diện ăn: 17 Figure 2: Món ăn Figure 3: Nguyên liệu ăn 18 Figure 4: Các bước thực ăn 19 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ệ 20