ĐỒ ÁN CƠ SỞ: ĐỀ TÀI: WEBSITE ẨM THỰC BA MIỀN

MỞ ĐẦUNgày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: WEBSITE ẨM THỰC BA MIỀN.

Sinh viên thực hiện : NGUYỄN VĂN ANH

LÊ NGỌC HUY HOÀNG

Lớp : 19IT4

Giảng viên hướng dẫn : TS LÊ THỊ THU NGA

Đà Nẵng, tháng … năm 2020

LỜI CẢM ƠN

NHẬN XÉT CỦA GIÁO VIÊN

………

………

………

………

………

Với sự hướng dẫn tận tình của Cô Lê Thị Thu Nga nhóm chúng em

đã hoàn thành bài báo cáo đồ án này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thống nhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm

và góp ý của quí Thầy cô 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 Chương 1 Kiến thức tổng quan………7

1.1 Ngôn ngữ ……….7

1.2 Công cụ ……… ………10

Chương 2 Thiết kế website ……… ………10

2.1 Yêu cầu chức năng website ………12

2.2 Phân tích chức năng ……… ………12

Chương 3 Xây dựng website……….……16

3.1 Website dành cho User ……….…….16

3.2 Website dành cho Admin ……… ………17

3.3 Các chức năng khác ……….……….17

MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở nên một công cụ không thể thiếu,

là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những âm thanh nếu bạn cần Cùng với sự phát triển nhanh chóng của Internet thì các hình thức tìm hiểu về

du lịch ẩm thực các nước trên toàn thế giới thông qua Internet cũng phát triển không kém Việt Nam có nền ẩm thực mang nét đặc trưng riêng, đặc biệt Nhưng hiện nay chưa được biết đến rộng rãi, người cần tìm hiểu cũng rất khó khăn vì thông tin ít, cũ, và không

có sự nổi bật Vì vậy chúng em thiết kế ra trang web ẩm thực ba miền.

Trong sự phát triển du lịch của nước ta hiện nay bên cạnh xây dựng các công trình , các địa điểm tham quan du lịch mới , đặc sắc thì bên cạnh đó ẩm thực cũng là một nhân tố quan trọng quyết định đến ngày phát triển du lịch Để giúp người dùng ,

du khách , người muốn tìm hiểu về ẩm thực Việt Nam trên các vùng miền hình chữ S có được thông tin của các món ăn mang hướng truyền thống bản sắc dân tộc của từng vùng miền Bên cạnh đó giúp các nhà hàng , các địa điểm ăn uống truyền thống Việt Nam được biết đến rộng rãi giúp du khách , người muốn tìm hiểu dễ dàng tìm đến và thưởng thức Từ đó quảng bá rộng rãi nền ẩm thực nước nhà.

Vì vậy , chúng em đã thực hiện đồ án : “Website ẩm thực ba miền”

Mục tiêu:Mục tiêu giúp quảng bá ẩm thực truyền thống Việt

Nam ở các vùng miền khác nhau Cung cấp cho người dùng các thông tin, các địa điểm ăn uống của các món ăn khác nhau, giúp người dùng tìm hiểu một cách dễ dàng, đầy đủ nội dung nhất

Chương 1 KIẾN THỨC TỔNG QUAN

1.1.Ngôn ngữ

1.1.1.HTML

– HTML là viết tắt của cụm từ Hypertext Markup Language ( Hiểu nghĩa

là “Ngôn ngữ đánh dấu siêu văn bản bằng thẻ” )

– HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn

ngữ sử dụng các thẻ html để biểu diễn các trang web

Tìm hiểu về HTML

Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình

duyệt (Web browsers) cách hiển thị các thành phần của trang như text và

graghics ,và đáp lại những thao tác của người dùng bởi các thao tác ấn phím

và nhắp chuột Hầu hết các Web browser, đặc biệt là Microsoft Internet

Explorer, Chrome, Firefox và Safari nhận biết các tag của HTML vượt xa

những chuẩn HTML đặt ra

VD: Trong văn bản html thẻ đánh dấu một liên kết đến một tài liệu nào đó,

thẻ đánh dấu một đoạn văn, thẻ đánh dấu một dạng đề mục…tuy nhiên bây giờ chúng ta chưa cần đi sâu vào mấy vấn đề này làm gì, chúng ta sẽ nhắc đến chúng trong những bài viết sau

– Một tài liệu html tương đương với một trang web Một tài liệu html diễn tả một trang web

– Các thẻ html còn được gọi là các phần tử html ( hay các element )

– Nếu bạn muốn hiểu biết một chút về lập trình web, học html sẽ là bước

đầu tiên và không thể bỏ qua

1.1.2.HTML5 và CSS3

HTML5 là sản phẩm của sự phát triển tiếp theo của HTML, đó là viết tắt của thuật ngữ ngôn ngữ web Hyper Text Markup Language, là định dạng cốt lõi hầu hết website hiện nay

HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu việt hơn Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn

HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn

1.1.3.JAVASCIPT

JavaScript là một ngôn ngữ lập trình đa nền tảng (cross-platform), ngôn

ngữ lập trình kịch bản, hướng đối tượng JavaScript là một ngôn ngữ nhỏ và nhẹ (small and lightweight) Khi nằm bên trong một môi trường (host

environment), JavaScript có thể kết nối tới các object của môi trường đó và cung cấp các cách quản lý chúng (object)

JavaScript chứa các thư viện tiêu chuẩn cho các object, ví dụ

như: Array, Date, và Math, và các yếu tố cốt lõi của ngôn ngữ lập trình như: toán tử (operators), cấu trúc điều khiển (control structures), và câu lệnh JavaScript có thể được mở rộng cho nhiều mục đích bằng việc bổ sung thêm các object; ví dụ:

- Client-side JavaScript - JavaScript phía máy khách, JavaScript được mở

rộng bằng cách cung cấp các object để quản lý trình duyệt và Document Object Model (DOM) của nó Ví dụ, phần mở rộng phía máy khách cho phép một ứng dụng tác động tới các yếu tố trên một trang HTML và phản hồi giống các tác động của người dùng như click chuột, nhập form, và chuyển trang

- Server-side JavaScript - JavaScript phía Server, JavaScript được mở rộng

bằng cách cung cấp thêm các đối tượng cần thiết để để chạy JavaScript trên máy chủ Ví dụ, phần mở rộng phía server này cho phép ứng dụng kết nối với

cơ sở dữ liệu (database), cung cấp thông tin một cách liên tục từ một yêu cầu tới phần khác của ứng dụng, hoặc thực hiện thao tác với các tập tin trên máy chủ

1.1.4 BOOTSTRAP

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công

cụ để tạo ra các trang web và các ứng dụng web Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công

cụ để tạo ra các trang web và các ứng dụng web Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột Bootstrap ra đời

để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera

Kể từ phiên bản 2.0 trở lên nó cũng hỗ trợ Responsive Web Design Thiết

kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động)

Một số ưu điểm chính của Boostrap:

1 Tiết kiệm thời gian:

Boostrap giúp người thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng cho bạn áp dùng vào website của mình Bạn không phải tốn quá nhiều thời gian để tự viết code cho giao diện của mình

2 Tùy biến cao

Bạn hoàn toàn có thể dựa vào Bootstrap và phát triển nền tảng giao diện của chính mình Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột và độ rộng 940px Bạn có thể thay đổi, nâng cấp và phát triển dựa trên nền tảng này

3 Responsive Web Design

Với Bootstrap, việc phát triển giao diện website để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xu hướng phát triển giao diện

website đang rất được ưu chuộng trên thế giới

1.2.Công cụ: Visual Studio Code

1.2.1 Visual Studio Code là gì?

Visual studio là một trong những công cụ hỗ trợ lập trình website rất nổi

tiếng nhất hiện nay của Mcrosoft và chưa có một phần mềm nào có thể thay thế được nó Visual Studio được viết bằng 2 ngôn ngữ đó chính là C# và VB+ Đây là 2 ngôn ngữ lập trình giúp người dùng có thể lập trình được hệ thống một các dễ dàng và nhanh chóng nhất thông qua Visual Studio

Visual Studio là một phần mềm lập trình hệ thống được sản xuất trực tiếp

từ Microsoft Từ khi ra đời đến nay, Visual Studio đã có rất nhiều các phiên bản sử dụng khác nhau Điều đó, giúp cho người dùng có thể lựa chọn được phiên bản tương thích với dòng máy của mình cũng như cấu hình sử dụng phù hợp nhất

Bên cạnh đó, Visual Studio còn cho phép người dùng có thể tự chọn lựa giao diện chính cho máy của mình tùy thuộc vào nhu cầu sử dụng

1.2.2.Tính năng Visual Studio Code

- Biên tập mã

Giống như bất kỳ một IDE khác, Visual Studio gồm có một trình soạn thảo

mã hỗ trợ tô sáng cú pháp và hoàn thiện mả bằng các sử dụng

IntelliSense không chỉ cho các hàm, biến và các phương pháp mà còn sử dụng cho các cấu trúc ngôn ngữ như: Truy vấn hoặc vòng điều khiển

Bên cạnh đó, các trình biên tập mã Visual Studio cũng hỗ trợ cài đặt dấu trang trong mã để có thể điều hướng một cách nhanh chóng và dễ dàng Hỗ trợ các điều hướng như: Thu hẹp các khối mã lệnh, tìm kiếm gia tăng,…

Visual Studio còn có tính năng biên dịch nền tức là khi mã đang được viết thì phần mềm này sẽ biên dịch nó trong nền để nhằm cung cấp thông tin phản hồi về cú pháp cũng như biên dịch lỗi và được đánh dấu bằng các gạch gợn sóng màu đỏ

- Trình gỡ lỗi

Visual Studio có một trình gỡ lỗi có tính năng vừa lập trình gỡ lỗi cấp máy

và gỡ lỗi cấp mã nguồn Tính năng này hoạt động với cả hai mã quản lý

giống như ngôn ngữ máy và có thể sử dụng để gỡ lỗi các ứng dụng được viết bằng các ngôn ngữ được hỗ trợ bởi Visual Studio

- Thiết kế

Windows Forms Designer

Được sử dụng với mục đích xây dựng GUI sử dụng Windows Forms, được

bố trí dùng để xây dựng các nút điều khiển bên trong hoặc cũng có thể khóa chúng vào bên cạnh mẫu Điều khiển trình bày dữ liệu có thể được liên kết với các nguồn dữ liệu như: Cơ sở dữ liệu hoặc truy vấn

WPF Designer

Tính năng này cũng giống như Windows Forms Designer có công dụng hỗ trợ kéo và thả ẩn dụ Sử dụng tương tác giữa người và máy tính nhắm mục tiêu vào Windows Presentation Foundation

Web designer/development

Visual Studio cũng có một trình soạn thảo và thiết kế website cho phép các trang web được thiết kế theo tính năng kéo và thả đối tượng Mục đích là để

hỗ trợ người dùng tạo trang web dễ dàng hơn, những yêu cầu đơn giản như thiết kế web du lịch hay các trang giới thiệu của công ty có thể sử dụng tính năng này vì nó vẫn đảm bảo cho bạn sở hữu được một website hoàn chỉnh

Chương 2 THIẾT KẾ WEBSITE 2.1.Yêu cầu chức năng website

- Thông tin của món ăn

- Các công thức món ăn

- Các địa điểm ăn uống nổi tiếng của một số tỉnh thành

- Các món ăn đặc trưng của các tỉnh thành khác nhau

Xây dựng 1 website thông tin đơn giản , thân thiện dễ sử dụng , cho phép người dùng xem và tra cứu thông tin Tìm hiểu các thông tin về văn hóa , du lịch , địa điểm ăn uống

Website được thiết kế :

- Giao diện hài hòa thân thiện đối với người dùng

- Giúp đỡ tìm hiểu bản sắc văn hóa du lịch

- Dễ dàng tìm kiếm thấy thông tin mình cần tìm hiểu

Khách hàng có thể gửi ý kiến thông qua gmail của mình, đóng góp ý đến website, giúp website càng ngày phát triển hơn Ngoài ra có thể chia sẻ các công thức các món ăn khác giúp mọi người tìm hiểu tốt hơn

2.2.Phân tích chức năng

2.2.1.Về phía Admin

Login/Logout: Quản trị viên có thể đăng nhập để quản lí các chức năng của website

Xóa, chỉnh sửa bài viết: Quản trị viên có thể tùy chọn thêm, xóa hoặc chỉnh sửa các thư mục, bài viết và hình ảnh liên quan.

Đăng tin mới: Quản trị viên có thể cập nhật các tin tức mới về thực đơn.

Quản lý người dùng: Thông báo số người truy cập và số người đang online trên website

Trả lời phản hồi: Quản trị viên có thể phản hồi những ý kiến khi người dùng đánh giá / bình luận, hỏi đáp.

Admin

2.2.2.Về phía User

Đánh giá/Bình luận:Chức năng đánh giá cho phép người dùng gửi đánh

giáo từ 1-5 sao cho bất kì dịch vụ nào trên hệ thống, người dùng được

commment/bình luận về một sản phẩm món ăn, dịch vụ khách sạn sau khi đã

sử dụng bằng tài khoản cá nhân trên hệ thống

Gửi ý kiến phản: Người dùng có thể đặt câu hỏi,ý kiến về website

User

Quản lý người dùng Đăng tin mới

Xóa, chỉnh sửa bài

viết

Trả lời phản hồi

hồi

Thông tin về các món ăn

truyền thống của người

Việt Nam

Đánh giá/Bình luận:

Login/Logout

2.2.3.Các module chính

1.Module giới thiệu sản phẩm:

Các chức năng giới thiệu sản sẩm được thể hiện trong bảng 1

Bảng 1: Giới thiệu sản phẩm

Mô tả Cung cấp chức năng hiển thị thông tin chi

tiết về các món ăn, các địa điểm ăn uống có trên Website

Kích hoạt Khách hàng click vào menu sản phẩm

Thông tin đầu vào Các thông tin của món ăn được Admin đưa

vào CSDL của website như là : Tên món

ăn ,nguyên liệu,cách chế biến Các thông tin của cửa hàng : Vị trí ,các món

ăn phục vụ

2.Module tìm ki ếm các món ăn:

Các chức năng tìm kiếm món ăn được thể hiện trong bảng 2

Bảng 2: Tìm kiếm món ăn

Mô tả Giúp người dùng nhanh chóng tìm kiếm

được món ăn muốn xem Kích hoạt Khách hàng chọn menu tìm kiếm Thông tin đầu vào Yêu cầu khách hàng nhập vào các thông tin

Tên món ăn Quá trình xử lý Tìm kiếm trong CSDL theo từ khóa

Từ CSDL lấy ra các sản phẩm tìm được Thông tin đầu ra Hiển thị sản phẩm tìm thấy lên Website,

nếu không tìm thấy sản phẩm xuất ra thông báo không tìm thấy

Đặc sãn từng vùng

miền

Thông tin về địa chỉ chi tiết của các nhà hàng nổi

tiếng

3.Module tin tức:

Các chức năng tin tức được thể hiện ở bảng 3

Bảng 3: Tin tức

Mô tả Cung cấp các tin tức về món ăn , địa điểm

mới, sự kiện sắp xảy ra cho khách hàng Kích hoạt Khi khách hàng chọn menu tin tức Thông tin đầu vào Các tin tức luôn được Admin cập nhật hằng

ngày lên CSDL của Website Quá trình xử lý Truy cập cơ sở dữ liệu lấy tin tức Thông tin đầu ra Hiển thị danh sách tin tức dưới dạng tóm

tắt và khi khách hàng bấm vào “Xem thêm” mọi chi tiết của bài viết sẽ hiện ra Các bài viết về thời trang hay các xu hướng nổi trội

4.Module liên hệ và phản hồi:

Các chức năng liên hệ và phản hồi được thể hiện ở bảng 4

Bảng 4: Liên hệ và phản hồi

Mô tả Khách hàng có thể gửi ý kiến đóng góp cho

công ty Kích hoạt Người dùng chọn menu đóng góp ý kiến Thông tin đầu vào Các ý kiến và phản hồi của khách hàng về

Website

Chương 3 XÂY DỰNG WEBSITE