ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: ẨM THỰC VÀ ĂN VẶT ĐÀ NẴNG. Giảng viên hướng dẫn : THS. LÊ KIM TRỌNG

Đi kèm theo đó, các hệ thống website cũng phát triển không ngường với đủ các lĩnh vực: văn hoá, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, ca nhạc, phim ảnh, giáo dục, y tế…

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

Đà nẵng, tháng 6 năm 2021

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

KHOA KHOA HỌC MÁY TÍNH

ĐỒ ÁN CƠ SỞ 1

ĂN VẶT VÀ ẨM THỰC ĐÀ NẴNG

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

MỞ ĐẦU

1 Giới Thiệu

Ngày nay, chúng ta đang được sống trong kỷ nguyên của tin học nhờ

sự vượt bậc sự bùng nổ mạnh mẽ của công nghệ thông tin, Công nghệ thông tin không ngừng chỉ dừng lại ở mục đích phục vụ cho khoa học kĩ thuật mà đi sâu vào đời sống, chính trị, kinh tế, xã hội, trở nên thân thiện, gần gũi, mang lại nhiều lợi ích cho con người Công nghệ thông tin ngày càng khẳng định được tính hữu ích và sức mạnh trong mọi phương diện, mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường hiện như bây giờ.

Đi kèm theo đó, các hệ thống website cũng phát triển không ngường với đủ các lĩnh vực: văn hoá, thời sự, khoa học công nghệ, làm đẹp, nấu ăn, thể thao, ca nhạc, phim ảnh, giáo dục, y tế… Tuy nhiên, để tạo ra một trang web có sức sống bền lâu thì bản thân nó phải mạng lại lợi ích cho nhiều người Giao diện bắt mắt là yếu tố quan trọng để người xem click chuột đến website của bạn Những yếu tố quyết định giữ chân đọc giả lại là nội dung

mà website cung cấp.

Đà Nẵng được người dân ưu ái đặt cho những biệt danh là “thành phố đáng sống nhất Việt Nam”, “ thành phố của những cây cầu”, … Nơi đây hút lượng lớn khách du lịch đến thăm hàng năm bởi vẻ đẹp được thiên nhiên ban tặng và một nền ẩm thực phong phú sẽ khiến du khách tứ phương phải nhớ mãi Không chỉ những món đặc sản nổi tiếng làm mê mẩn khách

du lịch mà những món ăn vặt Đà Nẵng cũng khiến du khách phải nhớ nhung, lưu luyến.

Đồ ăn vặt là món mà nhiều người ưa thích Đà Nẵng có rất nhiều món ăn vặt nhưng ăn ở đâu, vừa ngon lại vừa rẻ thì không phải ai cũng biết DaNaFood sẽ lên danh sách các quán ăn vặt ở Đà Nẵng ngon nhưng lại có giá sinh viên để bạn tham khảo nhé.

2 Mục tiêu

Mục tiêu chính của đề tài là thiết kế giao diện website giúp cho người dùng có thể tìm kiếm thông tin về các món ăn, thức uống, địa điểm ăn vặt với giá thành hợp lí trên địa bàn Thành phố Đà Nẵng.

3 Phương pháp nghiên cứu

- Nghiên cứu quy trình phân tích, thiết kế website

- Nghiên cứu cách sử dụng các công nghệ cần thiết để thiết kế, xây dựng mộtwebsite như: HTML5, CSS, Javascript, Bootstrap

4 Nội dung và tiến độ nghiên cứu

Thời gian Nội dung thực hiện Người thực hiện

LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ vàhướng dẫn rất tận tình của các thầy cô thuộc Đại Học Công Nghệ Thông Tin VàTruyền Thông Việt Hàn – Đại Học Đà Nẵng Em xin cảm ơn các thầy cô thuộc bộ mônchuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quý báu vàcần thiết trong suốt thời gian quá để em có thể thực hiện và hoàn thành đồ án củamình Đặc biệt em xin chân thành cảm ơn thầy Lê Kim Trọng, người đã trực tiếphướng dẫn chúng em trong thời gian thực hiện đồ án này

Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin đãủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chúng tôitrong quá trình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên

đề tài không tránh khỏi những sai sót Em rất mong nhận được sự thông cảm của quýthầy cô và mong đón nhận những góp ý của thầy cô và 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ẫu) MỤC LỤC (Chèn mục lục tự động: References/Table of Contents) Trang MỞ ĐẦU 1

Chương 1 Giới thiệu 13

1.1 Tên đề tài: Ẩm thực và ăn vặt Đà Nẵng 9

1.2 Giới thiệu đề tài 9

1.3 Phương pháp, kết quả 9

1.4 Cấu trúc đồ án…….……… ……… 10

1.5 Các công cụ hỗ trợ thực hiện thiết kế Website………10

1.6 Ý tưởng………11

1.7 Mục tiêu………12

Chương 2 Nghiên cứu tổng quan 13

2.1 Mô hình 13

2.2 Tính khả thi 13

2.3 Xây dựng Website 13

Chương 3 Triển khai xây dựng 15

3.1 Tìm hiểu layout của 1 website 15

3.2 Thiết kế trang chủ Website 15

3.2 Thiết kế trang tài liệu chi tiết 17

Chương 4 Kết luận và Hướng phát triển 21

4.1 Kết luận 21

4.2 Hướng phát triển 21

DANH MỤC TÀI LIỆU THAM KHẢO 22

Chương 1 GIỚI THIỆU

1.1 Tên đề tài: Ẩm thực và ăn vặt Đà Nẵng

1.2 Giới thiệu đề tài:

Thời gian gần đây, Đà Nẵng được nhiều Tạp chí nổi tiếng thế giới bình chọn là điểm đáng đến nhất thế giới Thành phố ngày càng nổi tiếng và được ví như Miami của Việt Nam, với những khách sạn, nhà nghỉ cùng các resort đẳng cấp trải dọc bãi biển Thành phố này đang tổ chức nhiều hoạt động, sân chơi về ẩm thực, đưa ẩm thực trở thành một loại hình du lịch hấp dẫn du khách, nhất là khách quốc tế.

Những năm gần đây, ẩm thực Đà Nẵng tạo được dấu ấn trong lòng du khách bốn phương Khi nhắc tới ẩm thực Đà Nẵng phải kể tới mì Quảng, bún chả cá, bún mắm thịt heo, bánh tráng cuốn thịt heo, bánh tráng đập, bún thịt nướng, bánh xèo, nem nướng, chả bò, mít trộn, các món cá biển, ốc hấp

và nướng, cơm gà, Nhiều du khách đến Đà Nẵng đánh giá “Đà Nẵng là thiên đường ẩm thực” với những món ăn đặc sắc, hương vị thơm ngon không thể quên.

Dựa trên tình hình thực tế đó, Chúng tôi đã khảo sát và đặt ra bài toán thiết kế Website Ẩm thực và ăn vặt Đà Nẵng Là website giúp mọi người dùng có thể tìm kiếm thông tin về các món ăn, thức uống, địa điểm ăn vặt với giá thành hợp lí.

1.3 Phương pháp, kết quả

 Phương pháp triển khai thực hiện đề tài

- Thu thập thông tin : tài liệu cho website,tìm hiểu về các công nghệ cần thiết để xây dựng website như:HTML,Bootstrap,CSS,

Javascript,…

- Sử dụng Visual code để xây dựng website

- Tạo logo cho trang website

- Lên ý tưởng cho trang website

- Xây dưng trang website

 Kết quả đã đạt được

- Thiết kế được logo cho trang web

Hình 1.1 Logo

- Thu thập được nhiều thông tin về giao diện trang website

- Thiết kế giao diện cho website trang chủ, trang ăn vặt, coffee,

1.4 Cấu trúc đồ án

- Nguyên cứu tổng quan

- Triển khai xây dựng

- Kết luận và hướng phát triển

1.5 Các công cụ hỗ trợ thực hiện thiết kế website

Các phần mềm lập trình :

- Visual Studio Code

Ưu điểm của các phần mềm này là nó rất dễ để có thể cài đặt và sử dụng,tất cả đều được tối ưu cho ngôn ngữ HTML và các ngôn ngữ lập trình web Cácphần mềm đều có trình kiểm tra chính tả, số dòng, tự động hoàn thành, xem trướctrang và là công cụ soạn thảo văn bản và hình ảnh Và đều tối ưu cho hệ điềuhành Windows Hỗ trợ mạnh mẽ cho cộng đồng nhiều Plugins, snippets, codeauto complete, highlight beautiful, tùy biến giao diện, phím tắt, và rất nhiều thứkhác nữa Phát triển rất tích cực với sự hỗ trợ của Microsoft Các tài liệu chínhthức được duy trì tốt Có sự hỗ trợ rất tích cực của cộng đồng với tất cả cácplugin bạn cần Nếu gửi một lỗi trên GitHub, bạn thường sẽ nhận được phản hồitrong vòng 4 ngày Thực hiện tính năng tìm kiếm và thay thế vô cùng dễ dàng,

chính vì vậy giúp cho chúng ta nhanh chóng chỉnh sửa những đoạn code bị lỗi.

Tự động báo lỗi trong quá trình viết chương trình Phần mềm Bracker được tíchhợp sẵn tính năng Quick Edit giúp cho mọi người có thể dễ dàng và nhanh chóngsoạn thảo các chương trình Tự động báo lỗi khi lập trình javascript với công cụJSLint

Nhược điểm của các phần mềm này là chưa tối ưu hoàn toàn về ngôn ngữ, sẽrất khó giải quyết khi gặp các lỗi bug, code, Các phím tắt mặc định không có ýnghĩa và người dùng phải cấu hình lại gần như tất cả chúng Các phần mềm chiađược ít cột hiện thi tập tin Đối với eclipse, phần mềm này khá tốn dung lượng bộnhớ Một số phần mềm cần phải trả phí như Sublime Text…

Các công cụ hỗ trợ việc thiết kế :

Thư viện Bootstrap là một thư viện sẵn có nên việc sử dụng nó sẽ giúpbạn phát triển nhanh chóng website của mình Rất dễ sử dụng, vì nó được viếtbằng html, css, javascript nên bạn chỉ cần có kiến thức cơ bản về 3 cái đó là có thể

sử dụng bootstrap tốt Tính năng Responsive hữu ích: Bootstrap xây dựng sẵnreponsive css trên các thiết bị mobiles, tablets, và desktops nên bạn sẽ không mấtthời gian viết cái đống css lằng nhằng nữa Tương thích với trình duyệt: Nó tươngthích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, andOpera)

Javascript sẽ giúp tăng tính tương tác trên website Script này chạy trêncác trình duyệt của người dùng thay vì trên server và thường sử dụng thư viện củabên thứ 3 nên có thể tăng thêm chức năng cho website mà không phải code từđầu

Photoshop CS6 để khắc phục được hầu hết những lỗi trên hình ảnh.Photoshop cho phép bạn đổi màu, thêm bớt, xoá bỏ vật thể Bạn cũng có thể dễdàng tạo ra những hiệu ứng tuyệt đẹp bằng photoshop

Responsive để làm cho website có thể tự điều chỉnh kích thước theo màn hình,giúp cho người dùng có được trải nghiệm tối ưu mà không ảnh hưởng bởi loạithiết bị mà họ dùng để truy cập vào website Lợi ích đầu tiên là trang web có thể

tải một cách nhanh chóng mà không bị biến dạng, để cho người dùng không cầnphải resize bằng tay.

1.6 Ý tưởng:

- Nhu cầu cuộc sống con người tăng nhanh, đòi hỏi họ muốn trải nghiệm nhiều thứ về vật chất và tinh thần Các hàng quán ở Đà Nẵng cũng càng ngày càng mọc

lên Để đáp ứng nhu cầu đó, chúng tôi đã đưa ra ý tưởng phuc vụ nhu cầu này

XÂY DỰNG WEBSILE VỀ ẨM THỰC VÀ ĂN VẶT ĐÀ NẴNG ra đời, đem

đến cho chúng ta an tâm hơn mỗi khi tìm kiếm, không còn lo ngại phải đi đến nơimới mua được? Ăn ở đâu ngon?Và giá cả như nào? … Những vấn đề luôn làm chúng ta đau đầu khi nghĩ đến Cho nên nhóm chúng em đã quyết định đưa ra website này để giải quyết những vấn đề đó

1.7 Mục tiêu:

- Mọi người dễ dàng tìm hiểu về địa điểm và giá thành

- Quảng bá hình ảnh đến bạn bè trong nước, đưa các địa điểm

quán ăn nổi bật đến các vùng miền chưa được biết đến

- Tạo niềm tin với cộng đồng.

- Tiếp nhận phản hồi từ người sử dụng để hoàn thiện hơn.

- Khắc phục các lỗi, hay những vấn đề khiến người dùng bức xúc khi sử dụng

Chương 2 Nghiên cứu tổng quan

3.2 Mô hình

- Website “DaNa Food” gồm các phần :

+ Trang chủ: thông tin các quán Caffee, quán ăn vặt, các quán ăn nổi tiếng ở Đà Nẵng

+ Trang Ẩm thực: bao gồm các khu ẩm thực nổi tiếng, ngon nhất trên địa bàn Thành phố Đà Nẵng

+ Trang giới thiệu về đặc sản Quảng Nam- Đà Nẵng: Mỳ Quảng

+ Liên hệ

- Website “DaNa Food” cho phép người dùng đánh giá, góp ý kiến

cá nhân qua mục Liên hệ

Tổng hợp lại ý kiến của người dùng, sửa lỗi và hoàn tất hệ thống và chứng tỏ được các yêu cầu của trang web được thỏa mãn

- Website được cập nhật liên tục gồm: điều chỉnh các lỗi mà chưa được phát hiện trong các giai đoạn trước, nâng cấp hệ thống và cập nhật các địa điểm mới nhất.

2.2 Tính khả thi

- Giao diện dễ sử dụng cho tất cả mọi người

Chi phí phát triển không quá cao , dễ dàng thu hút được nhà đầu tư.

- Lợi thế :

Hiện nay có các website tương tự đã có trên thị trường tuy nhiên chưa đáp ứng đầy đủ nhu cầu của người sử dụng , do đó chúng ta có thể học hỏi chọn lọc và cải tiến những vấn đề còn tồn đọng để gia công hoàn chỉnh

- Đang là xu thế của giới trẻ hiện nay, đa phần người dùng chúng ta hướng tới đều thực hiện tìm kiếm trên thiết bị thông minh nên những ứng dụng như này rất được sự ủng hộ chủa đông đảo người dùng.

2.3 Xây dựng Website

Tạo dấu ấn với người sử dụng: Trước tiên cần phải chuyên nghiệp trong

từng chi tiết Do vậy các tính năng cần được sắp xếp một cách khoa học, dễ tìm kiếm và đáp ứng nhu cầu của khách hàng khi ghé vào web

Tạo dựng được lòng tin: Đối với người dùng thì lòng tin rất quan trọng, một

website chuyên nghiệp mang lại dấu ấn sâu sắc với khách hàng từ đó làm cho họ có cảm giác tin tưởng về những chỉ số về những địa điểm, giá tiền phù hợp với mỗi người.

Tính chia sẻ website cao: Muốn website được chia sẻ nhiều trên cộng đồng

thì chất lượng bài viết cần hay và lôi cuốn, bên cạnh đó thiết kế với tính thẩm mỹ cao, tạo ấn tượng đặc biệt với người xem

- Liệt kê các tin tức mới, tin tức nổi bật trên trang chủ.

2 Module Giới thiệu:

- Giới thiệu chung về website.

- Review của một số người dùng sau khi sử dụng.

3 Module Liên hệ:

- Các form liên hệ cơ bản để nhận phản hồi của người truy cập

- Liên hệ hỗ trợ trực tuyến

Chương 3 Triển khai xây dựng

3.1 Tìm hiểu layout của một website

Thông qua việc tìm hiểu về layout của một số website nhóm chúng em nhận một website cơ bản bao gồm 2 phần:

 Header: Phần đầu trang, đây là khu vực người ta thường đặt logo, banner, khẩu hiệu của website/blog

 Content: Phần nội dung, nó có thể là nội dung một bài viết hoặc danh sách các bài viết;

3.3 Thiết kế trang chủ website

Trang chủ của website là phần đầu tiên đập vào mắt của người dùng, trang chủ cần phải có màu sắc hài hòa , giao diện đơn giản,dễ sử dụng

 Liên hệ

 Thông tin

Hình 3.1: Trang chủ

Hình 3.2: Hình ảnh trang chủ

3.4 Thiết kế trang tài liệu chi tiết

3.4.1 Trang chủ

Trang chủ sẽ hiển thị các thông tin về website của nhóm chúng em như:

- Các quán Coffee, khu ẩm thực, quán ăn vặt nổi bật

- Các món ngon ở Đà Nẵng

- Địa điểm các quán Mỳ Quảng

3.3.2 Coffee & Tea

Coffee & Tea sẽ cho bạn biết các quán trà sữa, các quán cafe ở Đà Nẵng nổi nhất, đẹp mắt hiện nay bao gồm đầy đủ các thông tin về :

+ Địa chỉ

+ Giá cả

+ Số điện thoại

+ Thời gian mở cửa

Hình 3.2: Coffee & Tea

3.3.3 Ẩm thực

Trang ẩm thực sẽ hiển thị các khu ẩm thực nổi bật trên địa bàn Thành phố

Đà Nẵng hiện nay với bao gồm đầy đủ thông tin chi tiết

Hình 3.3: Ẩm thực

3.4.2 Mỳ Quảng

Mỳ Quảng là món ăn không thể không ăn khi bước chân đến Đà Nẵng- Quảng Nam Các bước nấu một tô Mỳ Quảng thơm ngon, đậm đà hương vị sẽ nằm ở trong trang này

Hình 3.4: Mỳ Quảng

3.4.3 Trang ăn vặt

Các món ăn vặt nổi tiếng ở Đà Nẵng sẽ được liệt kê chi tiết trong 2 trang

ăn vặt này Bao gồm đầy đủ các thông tin chi tiết như địa chỉ, giờ mở cửa, giá cả Các quán ăn sẽ được dẫn đến trang web Foody.vn nếu bạn cần tìm hiểu thêm nhiều thông tin về các quán ăn đó

Hình 3.5: Trang ăn vặt

3.4.4 Trang liên hệ

Trang liên hệ bao gồm thông tin, địa chỉ và form điền các góp ý nếu người

sử dụng cần được giải đáp thắc mắc

Hình 3.6: Trang liên hệ

3.4.5 Thông tin

Hình 3.7: Trang thông tin

Chương 4 Kết luận và Hướng phát triển

4.1 Kết luận

Trong quá trình làm đồ án, chúng em cũng gặp rất nhiều khó khăn nhưng được sự giúp đỡ tận tình của thầy, nhóm em đã hoàn thành đồ án.Chúng em đã tìm hiểu và tham khảo các trang web chuyên cung cấp tài liệu Từ đó nhóm đưa

ra các ý tưởng, định hướng về giao diện web Trong khi làm đồ án kiến thức có hạn nên không tránh khỏi các sai sót , mong thầy cô và các bạn đóng góp ý kiến

để đồ án được hoàn thiện tốt hơn, để đáp ứng với nhu cầu thực tế

Cuối cùng chúng em xin chân thành cảm ơn sự giúp đỡ của thầy trong quátrình làm đồ án, để đồ án được hoàn thành

Tuy nhiên, vẫn còn nhiều 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