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

Vì vậy, chúng em chọn đề tài “ thiết kế website hướng dẫn nấu ăn” để giúp cho các nội trợ có thể học hỏi, có thêm nhiều kiến thức, công thức nấu ăn để có một bữa ăn ngon cho một buổi tiệ

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

Sinh viên thực hiện : 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 5 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Ở 1

ĐỀ TÀI: THIẾT KẾ WBSITE HƯỚNG DẪN NẤU ĂN

Đà Nẵng, tháng 5 năm 2021

LỜI MỞ ĐẦU

- Trong thực tế, không phải ai cũng biết nấu ăn và 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 những người bận rộn với công việc, thì không có thời gian để đến các trung tâm hay khóa học nấu ăn Thêm vào đó, với sự phát triển của CNTT, mạng truyền thông, thiết bị thông minh, việc tiếp cận với các trang mạng một cách dễ dàng và mọi lúc, giúp tiết kiệm thời gian và công sức

- Đề tài này nhằm mục tiêu hỗ trợ cho các nội trợ có thể 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 đầu tiên cho phép em gửi lời cảm ơn tới các Thầy Cô giáo các cán bộ công tác tại 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 mọi điều kiện giúp đỡ chúng em trong thời gian xây dựng và 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 đỡ, chỉ bảo về nghiệp vụ và trực tiếp hướng dẫn nhóm chúng em trong suốt quá trình hoàn thành đồ án này

- Tuy nhiên do thời gian có hạn và cùng với nhiều nguyên nhân khác, mặc dù chúng

em đã nổ lực hết mình xong đồ án của nhóm , tuy vẫn còn mắc phải những thiếu sót và hạn chế Em rất mong nhận được sự thông cảm và chỉ bảo của các Thầy Cô cùng tất cả các 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 4

NHẬN XÉT 5

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 hiện đề 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 về ngôn ngữ lập trình web HTML: 12

2.1.2 Sơ lược về ngôn ngữ lập trình web CSS: 12

2.1.3 Sơ lược về ngôn ngữ lập trình web Bootstrap: 12

2.1.4 Giới thiệu về phần mềm Visual Studio Code: 12

2.1.4.1 Visual Code là gì? 12

2.1.4.2: Những tính năng mạnh mẽ của visual code: 13

2.1.5 Giới thiệu về 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 của 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 mó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 quả đạ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 của một món ăn 19

Figure 4: Các bước thực hiện của một món ă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

1 HyperText Markup Language HTML

2 Cascading Style Sheet CSS

3 Công Nghệ Thông Tin CNTT

CHƯƠNG 1: GIỚI THIỆU

1.1 Tổng quan

1.1.1 Bối cảnh thực hiện đề tài:

- Ngày nay, không phải ai cũng biết nấu ăn và nấu ăn ngon Với những người bận rộn với công việc thì việc nấu ăn càng trở nên khó khăn hơn vì không có thời gian để đến trung tâm hay khóa học nấu ăn Với sự phát triển của thời đại 4.0 thì bây giờ mọi người đi đâu hay làm gì cũng phải cần có một chiếc điện thoại kết nối với mạng, việc tiếp cận với các trang mạng là điều hết sức

dễ dàng, mọi lúc và mọi nơi, giúp tiết kiệm thời gian và 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 các nội trợ có thể học hỏi, có thêm nhiều kiến thức, công thức nấu ăn để có một bữa ăn ngon cho một buổi tiệc, liên hoan hay một buổi ăn cho gia đình

1.1.3 Đề xuất nội dung thực hiện:

- Thiết kế giao diện website giới thiệu các công món ăn nhằm giúp người dùng dễ dàng xem được thông tin của các món ăn

- Thiết kế giao diện website cho phép một dùng truy cập vào trang web một cách nhanh chóng mà không các thủ tục phức tạp

- Website công khai, minh bạch và cung cấp thông tin chính xác nhằm đem lại

sự tin cậy cho người dùng

- Tham khảo, tiếp thu ý kiến, thông tin từ giảng viên hướng dẫn để hoàn thiện website tốt hơn phần mềm và 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ế và hiện đại Hình ảnh sắc nét

và sống động Tiện lợi cho việc người dùng tìm và hiểu rõ hơn về món ăn Tốc độ tải trang web nhanh Website có thể tương thích với mọi thiết bị di động hay máy tính trên thị trường Ngoài ra trang web được thiết kế dễ dàng

sử dụng và tiện nâng cấp trong tương lai

- Ngoài ra, trang web còn một số chức năng chưa hòan thiện và chưa khai thác được nhiều nội dung

1.3 Cấu trúc đồ án:

- Chương 2: Nghiên cứu thiết kế

+ Đây là chương nêu cụ thể lý thuyết về những ngôn ngữ lập trình của một webiste Do đó có thể giúp ta hiểu được cụ thể hơn về các ngôn ngữ lập trình và ngôn ngữ siêu văn bản

- Chương 3: Phân tích và thiết kế hệ thống

+ Chương này tập trung vào cách thức hoạt động của website và miêu tảchi tiết chức năng để giúp cho khách hàng có thể tiếp cận dễ dàng với trang web

- Chương 4: Kết quả đạt được

+ Ở chương này trình bày một số kết quả đạt được, các thư viện được sửdụng sau khi 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 về ngôn ngữ lập trình web HTML:

- HTML là chữ viết tắt của HyperText Markup Language(ngôn ngữ đánh dấu siêu văn bản) HTML được sinh ra để tạo nên các trang web với các mẫu thông tin được trình bày trên World Wide Web HTML có thể được viết lên bởi các phần mềm, các trình soạn thảo văn bản thông thường như notepad++, editplus, hoặc các trình soạn thảo chuyên dụng như visual studio,

sublime text 3,… Một file HTML sẽ có hai địng dạng mở rộng là html và htm

2.1.2 Sơ lược về ngôn ngữ lập trình web CSS:

- CSS (Cascading Style Sheet) Web được cấu tạo từ các thẻ các html nhưng với các thẻ html thì mới thể hiện được bộ khung của website Để căn chỉnh, trình bày cho đẹp mắt thì ta cần sử dụng ngôn ngữ CSS Đây là ngôn ngữ được dùng nhiều trong ngôn ngữ website, thường đi cùng ngôn ngữ html

2.1.3 Sơ lược về ngôn ngữ lập trình web Bootstrap:

- Bootstrap được xây dựng dựa trên nền tảng HTML templates, CSS templates

và Javascript cơ bản để hình thành nên những mẫu thiết kế có sẵn như

typography, forms, buttons( nút bấm), tables(bảng), navigation, modals, image carousels cũng như nhiều thành phần khác nữa Với mục đích giúp chocác nhà phát triển có thể thiết kế reponsive cho website được dễ dàng và nhanh hơn, các plugin của Javascript đã được tích hợp và trong Bootstrap

2.1.4 Giới thiệu về phần mềm Visual Studio Code:

2.1.4.1 Visual Code là gì?

- VisualCode là một công cụ soạn thảo mã nguồn do Microsoft phát triển, đượcgiới thiệu lần đầu vào năm 2015 và chính thức phát hành năm 2016 VSC có thể cài đặt và sử dụng trên cả Windows, MacOS và Linux VSC là mã nguồn

mở và nó hoàn toàn miễn phí

- Có thể nói VSC là sự kết hợp tuyệt vời giữa tính đơn giản của một editor và các công cụ hỗ trợ mạnh mẽ dành cho lập trình viên như Debugger, Git, Terminal và còn nhiều hơn nữa Đúng vậy, nhìn chung thì VSC vẫn chỉ là mộtCode Editor nhưng độ hữu ích thì không kém cạnh IDE nào.

2.1.4.2: Những tính năng mạnh mẽ của visual code:

- Nói đến những tính năng hỗ trợ lập trình viên thì từ lúc bắt đầu, VSC đã cho thấy sự vượt trội so với các Code Editor khác Tiêu biểu trong số các tính năng này có thể kể đến như:

1 IntelliSense

- IntelliSense là sự kết hợp giữa code auto-complete và trí tuệ nhân tạo (AI) Tính năng này cung cấp một loạt các đề nghị cùng với gợi ý hoặc mô tả ngắn khi ta đang viết code Những gợi ý này được tính toán dựa theo các nhân tố bối cảnh như ngôn ngữ lập trình, cú pháp, biến, hàm, cũng như các code trong file

- Hầu hết các Code Editor hiện đại đều có IntelliSense, nhưng ít phần mềm nào chuyên nghiệp bằng VisualCode Đây là tính năng nâng cao hiệu suất lập trình và không thể thiếu đối với lập trình viên chuyên nghiệp

- VisualCode cung cấp sẵn IntelliSense cho các ngôn ngữ lập trình

JavaScript, CSS, HTML, TypeScript Ngoài ra bạn cũng có thể cài

thêm IntelliSense cho các ngôn ngữ khác thông qua extension, hoặc bạn cũng có thể tự custom tính năng này cho phù hợp với mình, tiện quá đúng không nào!

2 Tích hợp sẵn Git

- Nhu cầu làm việc nhóm và lưu trữ là không thể thiếu, vì vậy tích

hợp Git vào Code Editor như một tính năng cơ bản là một lựa chọn đúng đắn Git trên VisualCode cung cấp cho bạn những git action cơ bản như commit code, pull, push,… Và qua từng phiên bản thì việc hỗ trợ Git càng đầy đủ

3 Debugger

- Một trong những tính năng chính của VisualCode chính là khả năng hỗ trợ debug tuyệt vời Theo mặc định, VisualCode chỉ kèm theo trình Debug hỗ

trợ NodeJS Nhưng tất nhiên, một lần nữa, bạn cũng có thể cài thêm các extension để debug cho các ngôn ngữ khác.

4 Tích hợp Terminal:

- Terminal là một chương trình giao diện cửa sổ dòng lệnh (command line

interface) Cũng như Git, nhu cầu sử dụng terminal của lập trình viên là

vô cùng quan trọng

- Trên VisualCode, bạn có thể mở một hoặc nhiều tab terminal tại thư mục làm việc hiện tại, điều này làm tăng hiệu suất công việc lên rất nhiều đấy

5 Khả năng tùy chỉnh và mở rộng:

- VisualCode cung cấp một khả năng 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,… đều vô cùng linh hoạt Ngoài ra bạn còn có thể tùy chỉnh trên từng workspace rất tiện lợi cho từng loại dự án

- Cũng như các Code Editor/IDE khác, VisualCode cũng có khả năng mở

rộng thông qua việc cài thêm các extension

2.1.5 Giới thiệu về 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 do người dùng gửi, chẳng hạn như nội dung người dùng gửi trongGoogle Doanh nghiệp của tôi và Maps

- Nội dung quét từ sách

- Cơ sở dữ liệu công khai trên Internet

- Và nhiều nguồn khác

Tuy nhiên, trang này sẽ tập trung vào các trang web

Google thực hiện ba bước cơ bản để tạo kết quả từ các trang web:

1.Thu thập dữ liệu:

- Bước đầu tiên là tìm những trang tồn tại trên web Google không lưu giữmột danh mục trung tâm về mọi trang web, do đó, chúng tôi phải liên tụctìm kiếm các trang mới và thêm những trang đó vào danh sách các trang đã

biết Google biết đến một số trang vì chúng tôi đã truy cập các trang đó từtrước Google tìm thấy các trang khác khi đi theo đường liên kết từ mộttrang đã biết đến một trang mới Ngoài ra, chúng tôi cũng phát hiện một sốtrang khác khi chủ sở hữu trang web gửi danh sách các trang để Google thuthập dữ liệu Nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ webđược quản lý, thì họ có thể yêu cầu Google thu thập dữ liệu mọi trang bạnmới tạo hoặc cập nhật.

- Khi phát hiện ra URL của một trang, Google sẽ truy cập hoặc thu thập dữ

liệu trang đó để tìm hiểu nội dung trên trang Google hiển thị trang và phân

tích cả nội dung văn bản lẫn nội dung không phải văn bản cũng như bố cụchiển thị tổng thể để quyết định vị trí của trang trong kết quả của Tìm kiếm.Càng hiểu rõ về trang web của bạn bao nhiêu thì Google càng có thể hiểnthị trang cho những người đang tìm kiếm nội dung của bạn một cách phùhợp bấy nhiêu

2 Lập chỉ mục:

- Sau khi tìm thấy một trang, Google sẽ cố gắng tìm hiểu nội dung của trang

đó Quá trình này gọi là lập chỉ mục Google phân tích nội dung của trang,lập danh mục hình ảnh và tệp video nhúng trên trang và cố gắng tìm hiểu

trang theo cách khác Thông tin này được lưu trữ trong chỉ mục của Google – một cơ sở dữ liệu khổng lồ lưu trữ trong rất nhiều máy tính.

3 Phân phát (và xếp hạng):

- Khi người dùng nhập cụm từ tìm kiếm, Google sẽ cố gắng tìm câu trả lời phù hợp nhất trong chỉ mục của chúng tôi dựa trên nhiều yếu tố Google cố gắng xác định các câu trả lời có chất lượng cao nhất và xem xét những yếu

tố sẽ cung cấp trải nghiệm người dùng tốt nhất và câu trả lời phù hợp nhất, như vị trí, ngôn ngữ và thiết bị của người dùng (máy tính hoặc đ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 của website hướng dẫn:

- Khi vào trang web, khách hàng có thể kích món ăn mình thích, hệ thống sẽ chuyển khách hàng đến trang xem thông tin, ở đây sẽ hiển thị nguyên liệu, gia vị, cách chuẩn bị, cách nấu ăn

- Khách hàng cũng có thể tìm kiếm món ăn mình muốn nấu, khách hàng tìm kiếm theo tên món ăn , nếu có tên của món ăn thì hệ thống sẽ trả về món ăn

ăn đó thì cần những nguyên liệu gì, khối lượng bao nhiêu,…

+ Hiển thị cách chế biến: Khách hàng sẽ học được cách chế biến

nguyên liệu nấu ăn, các bước để hoàn thành một món ăn ngon, cách nem nếm cho phù hợp khẩu vị,…

- Hiển thị video hướng dẫn nấu ăn: Video giúp cho khách hàng nắm rõ hơn

về cách chọn nguyên liệu, từng bước chế biến đến nem nếm và những lời khuyên bổ ích từ đầu bếp hướng dẫn nấu ăn

- Xem thông tin món ăn: Người quản lí xem hướng dẫn nấu ăn để kiểm tra xem có chính xác hay thiếu xót không, nếu có vấn đề thì cần phải điều chỉnh hoặc bổ sung thêm để có thể hướng dẫn chính xác đến với khách hàng

- Tìm kiếm thông tin món ăn: Khách hàng cũng có thể tìm kiếm món ăn mìnhmuốn nấu, hệ thống sẽ kiểm tra nếu có tên của món ăn thì sẽ trả về món ăn

có trong từ khóa mà khách hàng đã nhập

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

Figure 2: Món ăn

Figure 3: Nguyên liệu của một món ăn

Figure 4: Các bước thực hiện của một món ăn

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ệ

4.5 Giao diện footer:

Figure 7: Footer

4.6 Giao diện đăng nhập:

Figure 8: Đăng nhập 4.7 Giao diện đăng kí:

Figure 9: Đăng kí

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

5.1 Kết quả đạt được:

- Nắm bắt được một số khái niệm cơ bản phục vụ cho việc viết báo cáo

- Trình bày được báo cáo một cách khoa học và có hệ thống những kiến thứchiểu biết của bản thân, có tham khảo các tài liệu về các 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 đã được học ởtrường trong suốt học kì

- Tăng khả năng tư duy logic, có thể nghiên cứu độc lập một vấn đề mà trướcđây chúng em không mấy quan tâm

- Về cài đặt chương trình:

+ Giới thiệu các 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 khi khách hàng có nhu cầu tìm hiểu

và học cách nấu

+ Cập nhật: Món ăn, khách hàng

- Về tính năng chương trình:

+ Thông tin về món ăn được cập nhật kịp thời, chính 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 các tài liệu chuyên ngành nhưng do hạn chế về khả năng và kinh nghiệm nên không thể tránh khỏi những thiếu sót nhất định

- Báo cáo chưa giải quyết được trọn vẹn những vấn đề phát sinh trong quá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 còn lủng củng,còn nhiều vấn đề chưa chính xác cần khắc phục trong quá trình phát triển,nâng cấp phần mềm giai đoạn sau