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

-

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

2

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 q trình hồ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 !

3


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...................................................................................................8
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......................................................18
4.1 Giao diện trang chủ:......................................................................................18
4.2 Giao diện món ăn:..........................................................................................19
4.3 Giao diện video:.............................................................................................21
4.4 Giao diện liên hệ:...........................................................................................21
4



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 quả đạ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
5


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.........................................................................................22
Figure 9: Đăng kí...............................................................................................23

6


DANH MỤC CỤM TỪ VIẾT TẮT

STT


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

4

Visual Code

VSC

7



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.2 Vấn đề cần giải quyết:
-

Website hướng dẫn nấu ăn nhằm giúp cho những người nội trợ có thêm
những bí quyết, cách nấu ăn ngon cho gia đình.

-

Website giải quyết được vấn đề thời gian đối với những người bận rộn với
công việc, không có thời gian để đến các 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ợ có thể học ở bất cứ đâu và có thể
áp dụng ngay sau khi 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á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.

8


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 và thiết kế giao diện, hệ thống của website bằng
phần mềm.

-


Dựa trên kiến thức đã học, chúng ta sử dụng các ngôn ngữ HTML, CSS,
Bootstrap và một số cơng cụ lập trình như Sublime Text để thiết kế một
website tĩnh.

-

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. Ngồ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.

-

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

9


+ Ở 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
cho cá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.

10


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,
được giớ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ó hồn tồ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ột
Code 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 tố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. Ngồ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 q đúng
khơng nào!

11


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. Ngồ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.


12


-

Nội dung do người dùng gửi, chẳng hạn như nội dung người dùng gửi
trong Google 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ục
tì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ột
trang đã biết đến một trang mới. Ngồ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
thu thậ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ể u cầu Google thu thập dữ liệu mọi trang
bạn mớ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ục hiể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ển thị 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
đó. Q 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

13


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 mà khách hàng đã nhập.

-

Người quản lí có nhiệm vụ cập nhật các món ăn lên website, sửa thơng tin
các món ăn bị lỗi, xóa các món ăn sai, khơng phù hợp.

-


Khách hàng có thể để lại phản hồi về thông tin hướng dẫn, khi phản hồi
khách hàng phải ghi rõ chủ đề và để 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ị món ăn:
+ Hiển thị tên món ăn: Để khách hàng biết được món ăn đó tên gì.

14


+ Hiển thị nguyên liệu nấu ăn: Hiển thị tất cả các nguyên liệu liên quan
đến món ăn được hướng dẫn, khách hàng biết được muốn nấu mó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ình
muố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.

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 món ăn:

17



Figure 2: Món ăn

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

18


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