báo cáo đồ án môn lập trình web hi cooks website dạy nấu ăn

Theo sự phát triển của công nghệ số, các trang web, trang blog chuyên về ẩm thựcluôn không ngừng cải tiến hình thức sao cho bắt mắt hơn, thu hút nhiều người theo dõihơn.. Đây là tiề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

Chuyên 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:

TP.Hồ Chí Minh - 2023

0

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

cùng chúng em trong môn Lập trình Web Nhờ những sự giảng dạy và chỉ bảo nhiệt tình

của thầy mà chúng em có thể hoàn thành đồ án và bản báo cáo đúng thời hạn quy định Tuy nhiên trong quá trình nghiên cứu đề tài, do kiến thức còn hạn chế nên có thểchúng em sẽ còn thiếu sót khi thực hiện đề tài Chúng em mong nhận được sự góp ý củathầy để đồ án được hoàn thiện hơn và có thể rút kinh nghiệm trong những lần thực hiệnbáo cáo tiếp theo

Chúng em xin chân thành cám ơn!

PHÂN CÔNG CÔNG VIỆC

- Code

- Thiết kế cơ sở dữ liệu

- Thiết kế giao diện

- Viết báo cáo

- Làm powerpoint

- Code

- Thiết kế cơ sở dữ liệu

- Thiết kế giao diện

- Viết báo cáo

- Làm powerpoint

- Code

- Thiết kế cơ sở dữ liệu

- 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 7

1.2 Tổng quan về đề tài nghiên cứu 2

Chương 2: CHI TIẾT ĐỒ ÁN 4

2.1 Cấu trúc đồ án 4

2.2 Công nghệ sử dụng 4

2.2.1 ASP.NET MVC 5 4 2.2.2 API 5

2.3 Ngôn ngữ sử dụng 5

2.3.1 SQL Server Management Studio 18 5 2.3.2 Html và CSS 6 2.3.3 JavaScript (JS) 7

2.4 Môi trường thiết kế 7

Chương 3: KẾT QUẢ THỰC NGHIỆM 8

1 Đăng ký, đăng nhập: 8

1.1 Trang đăng nhập 8 1.2 Trang đăng kí 8

7.3 CRUD bài đăng 15

Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 16

4.1 Kết luận 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 của đồ á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, các trang blog về ẩm thực chuyên giới thiệu các địa điểm ănuống như Foody, Địa Điểm Ăn Uống, Lozi… xuất hiện; tiếp sau đó là sự ra đời củacác kênh YouTube, các Food-blogger… Và cũng bắt đầu từ đây, người ta chỉ cần mộtchiếc điện thoại thông minh hay một chiếc máy vi tính có kết nối Internet là có thểngồi ở nhà tìm kiếm mọi thông tin liên quan đến việc ăn uống khắp thế giới Theo sự phát triển của công nghệ số, các trang web, trang blog chuyên về ẩm thựcluôn không ngừng cải tiến hình thức sao cho bắt mắt hơn, thu hút nhiều người theo dõihơn Sự phát triển của Internet và công nghệ đã làm thay đổi cách tiếp cận ẩm thực củanhững người thích ăn uống Cụ thể, ngày nay, nếu muốn học cách nấu một món ăn bất

kỳ, bạn chỉ cần mở điện thoại, tìm kiếm từ khóa tương ứng là đã có trong tay côngthức, thành phần và dễ dàng làm ngay tại căn bếp nhà mình mà không cần phải đếntrường lớp học bài bản

Nắm bắt được những đặc thù này, nhóm em quyết định tạo ra website “Hi-Cooks” đểchia sẻ công thức nấu những món ăn ở Việt Nam và trên toàn thế giới dành cho nhữngtín đồ ẩm thực Trang web này sẽ kết nối hàng ngàn người yêu nấu ăn, là nơi chia sẻrất nhiều công thức độc đáo giúp mọi người thoả mãn khiếu ẩm thực của chính mình.,

“Hi-Cooks” được tạo nên với mong muốn có thể giúp cho mọi người sẽ dễ dàng hơn

trong việc nấu ăn của mình Từ công việc chuẩn bị các nguyên liệu, phải chọn món ănhàng ngày hoặc lựa chọn những loại thực phẩm tươi ngon sẽ trở nên dễ dàng hơn

1.2 Tổng quan về đề tài nghiên cứu

Nhờ sự tiến bộ nhanh chóng của khoa học và công nghệ ngày nay, các nhà khoa học từkhắp nơi trên thế giới đã cho ra đời nhiều công trình mang tính đột phá Sự phát triểnkhông ngừng của công nghệ cũng đòi hỏi con người luôn phải cập nhật những xu hướngcông nghệ mới nhất Số lượng người truy cập các trang web trực tuyến hàng ngày đều ởngưỡng rất cao Vì vậy việc tận dụng sự phổ biến rộng rãi của Internet, người dùng có thểcập nhật thông tin mọi lúc mọi nơi Đây là tiền đề thúc đẩy sự phát triển của các trangweb giúp mọi người tìm kiếm và tiếp nhận thông tin một cách dễ dàng và các website dạynấu ăn cũng không phải là ngoại lệ

Qua những phân tích và tìm hiểu cũng như khảo sát, nhóm em thống nhất tạo ra trangweb chia sẻ các công thức nấu ăn hoạt động đa nền tảng, tương thích nhiều hệ điều hànhgiúp mọi người có thể dễ dàng hơn trong việc chế biến thực phẩm trong cuộc sống hàngngày

Chương 2: CHI TIẾT ĐỒ ÁN

2.1 Cấu trúc đồ án

Gồm 4 phần:

- Trang chủ: Hiển thị thông tin và hình ảnh về trang web; các bài đăng chia sẻ

công thức nấu ăn; giúp điều hướng người dùng đến những trang khác

- Giới thiệu: Giới thiệu về trang web và thông tin web designer

- Món ngon: Các món ăn ngon đặc trưng 3 miền Bắc, Trung, Nam và nguyênliệu cũng như cách làm từng lọai món

- Góp ý: Nơi người dùng có thể đóng góp ý kiến cá nhân cho trang web.

- Tài khoản: Cho phép đăng ký hoặc đăng nhập theo phân quyền admin và

người dùng

2.2 Công nghệ sử dụng

2.2.1 ASP.NET MVC 5

Là một Framework phát triển bởi Microsoft dựa trên 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 khi Asp.Net MVC ra đời, lập trình viên sử dụng côngnghệ Asp.Net Web Form trên nền tảng Net Framework để phát triển ứng dụngWeb động ứng dụng thành ba thành phần để cài đặt, mỗi thành phần đóng mộtvai trò khác nhau và ảnh hưởng lẫn nhau đó là models, views và controllers

 Model: Các đối tượng model là một phần của ứng dụng, các đối

tượng này thiết lập logic của phần dữ liệu của ứng dụng Thôngthường, các đối tượng model lấy và lưu trạng thái của model trongCSDL

 Views: Views là các thành phần dùng để hiển thị giao diện người

dùng (UI) Thông thường, view được tạo dựa vào thông tin dữ liệumodel

 Controllers: Xử lý yêu cầu người dùng Đây là các thành phần dùng

để quản lý tương tác người dùng, làm việc với model và chọn view

để hiển thị giao diện người dùng

2.2.2 API

- Là viết tắt của Application Programming Interface – phương

thức trung gian kết nối các ứng dụng và thư viện khác nhau Nó cung cấp khả năngtruy xuất đến một tập các hàm hay dùng, từ đó có thể trao đổi dữ liệu giữa các ứng dụng

- API thường được ứng dụng ở:

 Web API: là hệ thống API được sử dụng trong các hệ thống website

Hầu hết các website đều ứng dụng đến Web API cho phép bạn kết nối, lấy dữ liệu hoặc cập nhật cơ sở dữ liệu

 API trên hệ điều hành: Windows hay Linux có rất nhiều API, họ

cung cấp các tài liệu API là đặc tả các hàm, phương thức cũng nhưcác giao thức kết nối Nó giúp lập trình viên có thể tạo ra các phầnmềm ứng dụng có thể tương tác trực tiếp với hệ điều hành

API của thư viện phần mềm hay framework: API mô tả và quy định

các hành động mong muốn mà các thư viện cung cấp Một API có thể có nhiều cách triển khai khác nhau và nó cũng giúp cho một chương trình viết bằng ngôn ngữ này có thể sử dụng thư viện được viết bằng ngôn ngữ khác

2.3 Ngôn ngữ sử dụng

2.3.1 SQL Server Management Studio 18

- SQL là viết tắt của từ Structured Query Language, nghĩa là ngôn ngữtruy vấn cơ sở dữ liệu Có thể coi SQL là ngôn ngữ chung mà bất cứ hệ thống

cơ sở dữ liệu quan hệ nào cũng phải đáp ứng SQL Server Management Studio là

một ứng dụng phần mềm thiết kế bởi Microsoft, ra mắt lần đầu năm 2005 Ứngdụng này cho phép lập trình viên cấu hình, quản lý và quản trị bộ máy cơ sở dữliệu (database engine) SQL Server SQL Server được dùng vào việc tạo, duy trì

và lưu trữ, phân tích và trích xuất cơ sở dữ liệu theo yêu cầu

- SQL Server Management Studio nhóm em sử dụng trong báo cáo đồ ánmôn Lập trình Web là SQL Server Management Studio 18

- CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được

sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu(HTML) Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web

- CSS và HTML có mối quan hệ mật thiết trong việc xây dựng mộtwebsite Nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo

ra các đoạn văn bản, các tiêu đề, bảng,… thì CSS sẽ giúp chúng ta có thể thêmstyle vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, fontchữ, thay đổi cấu trúc… Một trang web có thể chạy mà không cần CSS, nhưng nóchắc chắn sẽ không có tình thẩm mỹ CSS làm cho giao diện người dùng của mộttrang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời Nếu không cóCSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều.Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hìnhảnh, khoảng cách giữa các đoạn và hơn thế nữa

2.3.3 JavaScript (JS)

- JavaScript (JS) là ngôn ngữ lập trình phổ biến dùng để tạo ra các trangweb tương tác Được tích hợp và nhúng vào HTML giúp website trở nên sốngđộng hơn JavaScript đóng vai trò như một phần của trang web, thực thi cho phépClient-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra cáctrang web động

- JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đếnđối tượng Là một trong 3 ngôn ngữ chính trong lập trình web với HTML, CSS và

có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:

 HTML: cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout,thêm nội dung dễ dàng trên website

 CSS: Sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục,style, màu sắc,…

 JS: Tạo nên những nội dung “động” trên website

2.4 Môi trường thiết kế

Môi trường nhóm em dùng để thiết kế trang web là Visual Studio 2022

Chương 3: KẾT QUẢ THỰC NGHIỆM

Hình 1.2.1 Giao diện view đăng ký

2 Đổi mật khẩu

Link: https://localhost:44317/Home/changePassword

Hình 2.1 Giao diện view đổi mật khẩu

3 Trang chủ

Link: https://localhost:44317/Home/Index

Đây là nơi đầu tiên hiện ra sau khi nhấn vào đường link trang web hoặc sau khi đăng nhập, cũng là nơi hiển thị các bài đăng của người dùng chia sẻ về các công thức nấu ăn

Hình 3.1 Giao diện trang chủ

4 Giới thiệu

Link: https://localhost:44317/Home/Info

Nơi giới thiệu về địa chỉ, số điện thoại và email liên lạc của trang web và thông tin các web designers

Hình 4.1 Giao diện view giới thiệu

5 Món ngon

Link: https://localhost:44317/Home/Food

Ở mục món ngon người xem có thể lựa chọn xem các món ăn đặc trưng ở 3 miền Bắc, Trung, Nam Ở mỗi trang món ngon Miền Bắc, miền Trung, miền Nam mỗi món ăn sẽ có hướng dẫn mua nguyên liệu và cách làm

Hình 5.1 Giao diện view món ngon miền Bắc

Hình 5.2 Giao diện view món ngon miền Trung

Hình 5.3 Giao diện view món ngon miền Nam

Hình 5.4 Giao diện view món ngon miền Tây

6 Góp ý

Link: https://localhost:44317/Home/Contact

Nơi người dùng có thể đóng góp ý kiến cá nhân để phát triển trang web

Hình 6.1 Giao diện view góp ý

Hình 7.2.1 Chi tiết, sửa và xóa món ăn

7.3 CRUD bài đăng

Hình 7.3.1 Chi tiết và xóa bài đă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 trong việc trực tiếp đến các 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 ra một cộng đồng sôi động giữa những người tham gia, giúp trao đổi kinhnghiệm trong việc bếp núc nấu ăn

- Giao diện chưa đáp ứng được hầu hết tỉ lệ màn hình trên các thiết bị khác nhau

4.1.3 Quá trình tiếp thu kiến thức

Trong quá trình làm đề tài, nhóm chúng em đã nắm được quá trình phát triển mộtWebsite một cách hiệu quả mang tính công nghiệp và hiểu được những khái niệm cơ bảnthuộc lĩnh vực này Trên cơ sở đó chúng em đã có định hướng đúng đắn khi học tậpnghiên

cứu các môn khác cũng như đi sâu vào nghiên cứu và thực hành làm phần mềm

4.2 Hướng phát triển của đồ án

Chương trình cơ bản đáp ứng được yêu cầu của một trang web hướng dẫn nấu ăn và tạomôi trường để tín đồ mê ẩm thực có thể chia sẻ các kinh nghiệm, khu ăn uống hoặc côngthức nấu ăn thông qua các bài 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 món ăn ngon và những điều thú vị trong cuộc sống

https://kokotaru.com/