Đề tài hi cooks website dạy nấu ăn

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN MƠN LẬP TRÌNH WEB TÊN ĐỀ TÀI HI-COOKS WEBSITE DẠY NẤU ĂN Ngành: CƠNG NGHỆ THƠNG TIN Chun ngành: Cơng nghệ phần mềm Giảng viên hướng dẫn: Bùi Mạnh Toàn Sinh viên thực hiện: MSSV: Lớp: Trần Tất Tuấn Anh 2080600162 20DTHJB1 Phan Bùi Khang Thái 2011065330 20DTHJB1 Tăng Quỳnh Như 2011181608 20DTHJB1 TP.Hồ Chí Minh - 2023 LỜI CẢM ƠN Chúng em xin bày tỏ lời cám ơn chân thành đến thầy Bùi Mạnh Toàn đồng hành chúng em mơn Lập trình Web Nhờ giảng dạy bảo nhiệt tình thầy mà chúng em hồn thành đồ án báo cáo thời hạn quy định Tuy nhiên q trình nghiên cứu đề tài, kiến thức cịn hạn chế nên chúng em cịn thiếu sót thực đề tài Chúng em mong nhận góp ý thầy để đồ án hồn thiện rút kinh nghiệm lần thực báo cáo Chúng em xin chân thành cám ơn! PHÂN CÔNG CÔNG VIỆC TT Họ tên Cơng việc đóng góp - Code - Thiết kế sở liệu Trần Tất Tuấn Anh - Thiết kế giao diện - Viết báo cáo - Làm powerpoint - Code - Thiết kế sở liệu Tăng Quỳnh Như - Thiết kế giao diện - Viết báo cáo - Làm powerpoint - Code - Thiết kế sở liệu Phan Bùi Khang Thái - Thiết kế giao diện - Viết báo cáo - Làm powerpoint NHẬN XÉT CỦA GIẢNG VIÊN MỤC LỤC Chương 1: TỔNG QUAN .7 1.1 Giới thiệu chung 1.2 Tổng quan đề tài nghiên cứu Chương 2: CHI TIẾT ĐỒ ÁN .4 2.1 Cấu trúc đồ án 2.2 Công nghệ sử dụng 2.2.1 ASP.NET MVC 2.2.2 API 2.3 Ngôn ngữ sử dụng 2.3.1 SQL Server Management Studio 18 2.3.2 Html CSS 2.3.3 JavaScript (JS) 2.4 Môi trường thiết kế Chương 3: KẾT QUẢ THỰC NGHIỆM Đăng ký, đăng nhập: 1.1 Trang đăng nhập 1.2 Trang đăng kí Đổi mật Trang chủ 10 Giới thiệu 11 Món ngon 12 Góp ý 14 CRUD 15 7.1 CRUD người dùng 15 7.2 CRUD ăn 15 7.3 CRUD đăng 15 Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết luận 16 16 4.1.1 Ưu điểm 16 4.1.2 Nhược điểm 16 4.1.3 Quá trình tiếp thu kiến thức 16 4.2 Hướng phát triển đồ án 17 TÀI LIỆU THAM KHẢO 18 Chương 1: TỔNG QUAN 1.1 Giới thiệu chung Vào khoảng năm 2012, trang blog ẩm thực chuyên giới thiệu địa điểm ăn uống Foody, Địa Điểm Ăn Uống, Lozi… xuất hiện; tiếp sau đời kênh YouTube, Food-blogger… Và đây, người ta cần điện thoại thông minh hay máy vi tính có kết nối Internet ngồi nhà tìm kiếm thơng tin liên quan đến việc ăn uống khắp giới Theo phát triển công nghệ số, trang web, trang blog chun ẩm thực ln khơng ngừng cải tiến hình thức cho bắt mắt hơn, thu hút nhiều người theo dõi Sự phát triển Internet công nghệ làm thay đổi cách tiếp cận ẩm thực người thích ăn uống Cụ thể, ngày nay, muốn học cách nấu ăn bất kỳ, bạn cần mở điện thoại, tìm kiếm từ khóa tương ứng có tay cơng thức, thành phần dễ dàng làm bếp nhà mà khơng cần phải đến trường lớp học Nắm bắt đặc thù này, nhóm em định tạo website “Hi-Cooks” để chia sẻ công thức nấu ăn Việt Nam tồn giới dành cho tín đồ ẩm thực Trang web kết nối hàng ngàn người yêu nấu ăn, nơi chia sẻ nhiều công thức độc đáo, giúp người thoả mãn khiếu ẩm thực “Hi-Cooks” tạo nên với mong muốn giúp cho người dễ dàng việc nấu ăn Từ cơng việc chuẩn bị nguyên liệu, phải chọn ăn hàng ngày lựa chọn loại thực phẩm tươi ngon trở nên dễ dàng 1.2 Tổng quan đề tài nghiên cứu Nhờ tiến nhanh chóng khoa học công nghệ ngày nay, nhà khoa học từ khắp nơi giới cho đời nhiều cơng trình mang tính đột phá Sự phát triển khơng ngừng cơng nghệ địi hỏi người phải cập nhật xu hướng công nghệ Số lượng người truy cập trang web trực tuyến hàng ngày ngưỡng cao Vì việc tận dụng phổ biến rộng rãi Internet, người dùng cập nhật thơng tin lúc nơi Đây tiền đề thúc đẩy phát triển trang web giúp người tìm kiếm tiếp nhận thông tin cách dễ dàng website dạy nấu ăn ngoại lệ Qua phân tích tìm hiểu khảo sát, nhóm em thống tạo trang web chia sẻ công thức nấu ăn hoạt động đa tảng, tương thích nhiều hệ điều hành giúp người dễ dàng việc chế biến thực phẩm sống hàng ngày Chương 2: CHI TIẾT ĐỒ ÁN 2.1 Cấu trúc đồ án Gồm phần: - Trang chủ: Hiển thị thông tin hình ảnh trang web; đăng chia sẻ công thức nấu ăn; giúp điều hướng người dùng đến trang khác - Giới thiệu: Giới thiệu trang web thơng tin web designer - Món ngon: Các ăn ngon đặc trưng miền Bắc, Trung, Nam nguyên liệu cách làm lọai - Góp ý: Nơi người dùng đóng góp ý kiến cá nhân cho trang web - Tài khoản: Cho phép đăng ký đăng nhập theo phân quyền admin người dùng 2.2 Công nghệ sử dụng 2.2.1 ASP.NET MVC Là Framework phát triển Microsoft dựa mơ hình MVC (Model – View – Controller) sử dụng Net Framework cho việc phát triển ứng dụng web động Trước Asp.Net MVC đời, lập trình viên sử dụng cơng nghệ Asp.Net Web Form tảng Net Framework để phát triển ứng dụng Web động ứng dụng thành ba thành phần để cài đặt, thành phần đóng vai trị khác ảnh hưởng lẫn models, views controllers  Model: Các đối tượng model phần ứng dụng, đối tượng thiết lập logic phần liệu ứng dụng Thông thường, đối tượng model lấy lưu trạng thái model CSDL  Views: Views thành phần dùng để hiển thị giao diện người dùng (UI) Thông thường, view tạo dựa vào thông tin liệu model  Controllers: Xử lý yêu cầu người dùng Đây thành phần dùng để quản lý tương tác người dùng, làm việc với model chọn view để hiển thị giao diện người dùng 2.2.2 API - Là viết tắt Application Programming Interface – phương thức trung gian kết nối ứng dụng thư viện khác Nó cung cấp khả truy xuất đến tập hàm hay dùng, từ trao đổi liệu ứng dụng - API thường ứng dụng ở:  Web API: hệ thống API sử dụng hệ thống website Hầu hết website ứng dụng đến Web API cho phép bạn kết nối, lấy liệu cập nhật sở liệu  API hệ điều hành: Windows hay Linux có nhiều API, họ cung cấp tài liệu API đặc tả hàm, phương thức giao thức kết nối Nó giúp lập trình viên tạo phần mềm ứng dụng tương tác trực tiếp với hệ điều hành  API thư viện phần mềm hay framework: API mô tả quy định hành động mong muốn mà thư viện cung cấp Một API có nhiều cách triển khai khác giúp cho chương trình viết ngơn ngữ sử dụng thư viện viết ngơn ngữ khác 2.3 Ngôn ngữ sử dụng 2.3.1 SQL Server Management Studio 18 - SQL viết tắt từ Structured Query Language , nghĩa ngôn ngữ truy vấn sở liệu Có thể coi SQL ngơn ngữ chung mà hệ thống sở liệu quan hệ phải đáp ứng SQL Server Management Studio ứng dụng phần mềm thiết kế Microsoft, mắt lần đầu năm 2005 Ứng dụng cho phép lập trình viên cấu hình, quản lý quản trị máy sở liệu (database engine) SQL Server SQL Server dùng vào việc tạo, trì lưu trữ, phân tích trích xuất sở liệu theo yêu cầu - SQL Server Management Studio nhóm em sử dụng báo cáo đồ án mơn Lập trình Web SQL Server Management Studio 18 2.3.2 Html CSS - HTML (viết tắt từ HyperText Markup Language) "Ngôn ngữ Đánh dấu Siêu văn bản" Sử dụng HTML để xây dựng cấu trúc lại thành phần website ứng dụng HTML hỗ trợ cơng nghệ CSS ngôn ngữ kịch giống JavaScript - CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web - CSS HTML có mối quan hệ mật thiết việc xây dựng website Nếu HTML đóng vai trị định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,… CSS giúp thêm style vào phần tử HTML đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… Một trang web chạy mà khơng cần CSS, chắn khơng có tình thẩm mỹ CSS làm cho giao diện người dùng trang web tỏa sáng mang đến trải nghiệm người dùng tuyệt vời Nếu khơng có CSS, trang web bắt mắt khó điều hướng nhiều Ngồi bố cục định dạng, CSS chịu trách nhiệm màu chữ, kích thước hình ảnh, khoảng cách đoạn 2.3.3 JavaScript (JS) - JavaScript (JS) ngôn ngữ lập trình phổ biến dùng để tạo trang web tương tác Được tích hợp nhúng vào HTML giúp website trở nên sống động JavaScript đóng vai trò phần trang web, thực thi cho phép Client-Side Script từ phía người dùng phía máy chủ (Nodejs) tạo trang web động - JavaScript ngơn ngữ lập trình thơng dịch với khả hướng đến đối tượng Là ngơn ngữ lập trình web với HTML, CSS có mối liên hệ lẫn để xây dựng website sống động, chuyên nghiệp:  HTML: cung cấp cấu trúc bản, hỗ trợ việc xây dựng layout, thêm nội dung dễ dàng website  CSS: Sử dụng để kiểm soát hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…  JS: Tạo nên nội dung “động” website 2.4 Mơi trường thiết kế Mơi trường nhóm em dùng để thiết kế trang web Visual Studio 2022 Chương 3: KẾT QUẢ THỰC NGHIỆM Đăng ký, đăng nhập: Người dùng cần đăng ký tài khoản đăng nhập email password 1.1 Trang đăng nhập Link: https://localhost:44317/Account/Login Hình 1.1.1 Giao diện view đăng nhập 1.2 Trang đăng kí Link: https://localhost:44317/Account/Register Hình 1.2.1 Giao diện view đăng ký Đổi mật Link: https://localhost:44317/Home/changePassword Hình 2.1 Giao diện view đổi mật Trang chủ Link: https://localhost:44317/Home/Index Đây nơi sau nhấn vào đường link trang web sau đăng nhập, nơi hiển thị đăng người dùng chia sẻ cơng thức nấu ăn Hình 3.1 Giao diện trang chủ Giới thiệu Link: https://localhost:44317/Home/Info Nơi giới thiệu địa chỉ, số điện thoại email liên lạc trang web thông tin web designers Hình 4.1 Giao diện view giới thiệu Món ngon Link: https://localhost:44317/Home/Food Ở mục ngon người xem lựa chọn xem ăn đặc trưng miền Bắc, Trung, Nam Ở trang ngon Miền Bắc, miền Trung, miền Nam ăn có hướng dẫn mua ngun liệu cách làm Hình 5.1 Giao diện view ngon miền Bắc Hình 5.2 Giao diện view ngon miền Trung Hình 5.3 Giao diện view ngon miền Nam Hình 5.4 Giao diện view ngon miền Tây Góp ý Link: https://localhost:44317/Home/Contact Nơi người dùng đóng góp ý kiến cá nhân để phát triển trang web Hình 6.1 Giao diện view góp ý CRUD Thêm, xóa, sửa, cập nhật thơng tin người dùng, ăn đăng 7.1 CRUD người dùng Link: https://localhost:44317/AdminNguoiDung/ListNguoiDung Hình 7.1.1 Danh sách người đăng ký web CRUD người dùng 7.2 CRUD ăn Link: https://localhost:44317/AdminFood/ListFood Hình 7.2.1 Chi tiết, sửa xóa ăn 7.3 CRUD đăng Hình 7.3.1 Chi tiết xóa đăng Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết luận 4.1.1 Ưu điểm - Phần mềm dễ sử dụng - Tiết kiệm thời gian việc trực tiếp đến lớp học nấu ăn - Website miễn phí cung cấp khơng gian chia sẻ niềm yêu thích cho người dùng - Tạo cộng đồng sôi động người tham gia, giúp trao đổi kinh nghiệm việc bếp núc nấu ăn 4.1.2 Nhược điểm - Không phù hợp với người lớn tuổi, người không thành thạo thiết bị điện tử thơng minh - Các bước nhỏ q trình làm bếp cũng bị lược bớt nhiều phần dẫn - Đơi lúc cơng thức nấu ăn khơng xác khơng phù hợp với số người - Giao diện chưa đáp ứng hầu hết tỉ lệ hình thiết bị khác 4.1.3 Quá trình tiếp thu kiến thức Trong q trình làm đề tài, nhóm chúng em nắm trình phát triển Website cách hiệu mang tính cơng nghiệp hiểu khái niệm thuộc lĩnh vực Trên sở chúng em có định hướng đắn học tập nghiên cứu môn khác sâu vào nghiên cứu thực hành làm phần mềm 4.2 Hướng phát triển đồ án Chương trình đáp ứng yêu cầu trang web hướng dẫn nấu ăn tạo môi trường để tín đồ mê ẩm thực chia sẻ kinh nghiệm, khu ăn uống công thức nấu ăn thông qua blog Giao diện trực quan, dễ sử dụng TÀI LIỆU THAM KHẢO [1] Kokotaru – Chia sẻ cơng thức ăn ngon điều thú vị sống https://kokotaru.com/