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

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE ẨM THỰC BA MIỀN Sinh viên thực : 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 Với hướng dẫn tận tình Cơ Lê Thị Thu Nga nhóm chúng em hồn thành báo cáo đồ án Tuy cố gắng tìm hiểu, phân tích thiết kế cài đặt hệ thống khơng tránh khỏi thiếu sót Em mong nhận thơng cảm góp ý q Thầy Em xin chân thành cảm ơn NHẬN XÉT CỦA GIÁO VIÊN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… NHẬN XÉT (Của giảng viên hướng dẫn) …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… MỤC LỤC 1.2.1 Visual Studio Code gì? 10 1.2.2.Tính Visual Studio Code .10 Biên tập mã 10 Trình gỡ lỗi 10 Thiết kế .11 MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Mạng Internet sản phẩm có giá trị lớn lao ngày trở nên công cụ khơng thể thiếu, tảng cho truyền tải, trao đổi thơng tin tồn cầu Giờ đây, việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: cần có máy tính kết nối internet dịng liệu truy tìm gần giới vấn đề mà bạn quan tâm ra, có đầy đủ thơng tin, hình ảnh chí đơi lúc có âm bạn cần Cùng với phát triển nhanh chóng Internet hình thức tìm hiểu du lịch ẩm thực nước tồn giới thơng qua Internet phát triển khơng Việt Nam có ẩm thực mang nét đặc trưng riêng, đặc biệt Nhưng chưa biết đến rộng rãi, người cần tìm hiểu khó khăn thơng tin ít, cũ, khơng có bật Vì chúng em thiết kế trang web ẩm thực ba miền Trong phát triển du lịch nước ta bên cạnh xây dựng cơng trình , địa điểm tham quan du lịch , đặc sắc bên cạnh ẩm thực nhân tố quan trọng đị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 ẩm thực Việt Nam vùng miền hình chữ S có thơng tin ăn mang hướng truyền thống sắc dân tộc vùng miền Bên cạnh giúp nhà hàng , địa điểm ăn uống truyền thống Việt Nam 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 thưởng thức Từ quảng bá rộng rãi ẩm thực nước nhà Vì , chúng em thực đồ á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 vùng miền khác Cung cấp cho người dùng thông tin, địa điểm ăn uống ăn khác nhau, giúp người dùng tìm hiểu cách dễ dàng, đầy đủ nội dung Chương KIẾN THỨC TỔNG QUAN 1.1.Ngôn ngữ 1.1.1.HTML – HTML viết tắt cụm từ Hypertext Markup Language ( Hiểu nghĩa “Ngôn ngữ đánh dấu siêu văn thẻ” ) – HTML khơng phải ngơn ngữ lập trình máy tính mà ngơn ngữ sử dụng thẻ html để biểu diễn trang web Tìm hiểu HTML Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần trang text graghics ,và đáp lại thao tác người dùng thao tác ấn phím nhắp chuột Hầu hết Web browser, đặc biệt Microsoft Internet Explorer, Chrome, Firefox Safari nhận biết tag HTML vượt xa chuẩn HTML đặt VD: Trong văn html thẻ đánh dấu liên kết đến tài liệu đó, thẻ đánh dấu đoạn văn, thẻ đánh dấu dạng đề mục…tuy nhiên chưa cần sâu vào vấn đề làm gì, nhắc đến chúng viết sau – Một tài liệu html tương đương với trang web Một tài liệu html diễn tả trang web – Các thẻ html gọi phần tử html ( hay element ) – Nếu bạn muốn hiểu biết chút lập trình web, học html bước bỏ qua 1.1.2.HTML5 CSS3 HTML5 sản phẩm phát triển HTML, viết tắt thuật ngữ ngơn ngữ web Hyper Text Markup Language, định dạng cốt lõi hầu hết website HTML5 cho phép nhà phát triển, lập trình web tạo trang web có tính ưu việt Khơng vậy, HTML5 đem đến cho người dùng trải nghiệm tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú HTML5 CSS3 làm cho ứng dụng web trang web hấp dẫn HTML5 có tính thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng nhiều Ví dụ nhiều màu sắc hỗ trợ đường cong, việc làm mờ, góc trịn (thay ép buộc nhà thiết kế web sử dụng hình ảnh để tạo góc trịn), dĩ nhiên việc lưu trữ offline Tất điều làm trang Web trở nên dễ nhìn hơn, bắt mắt làm cho thứ trở nên sát với mà nhà thiết kế tưởng tượng đầu 1.1.3.JAVASCIPT - - JavaScript ngơn ngữ lập trình đa tảng (cross-platform), ngơn ngữ lập trình kịch bản, hướng đối tượng JavaScript ngôn ngữ nhỏ nhẹ (small and lightweight) Khi nằm bên môi trường (host environment), JavaScript kết nối tới object mơi trường cung cấp cách quản lý chúng (object) JavaScript chứa thư viện tiêu chuẩn cho object, ví dụ như: Array, Date, Math, yếu tố cốt lõi ngơn ngữ lập trình như: tốn tử (operators), cấu trúc điều khiển (control structures), câu lệnh JavaScript mở rộng cho nhiều mục đích việc bổ sung thêm object; ví dụ: Client-side JavaScript - JavaScript phía máy khách, JavaScript mở rộng cách cung cấp object để quản lý trình duyệt Document Object Model (DOM) Ví dụ, phần mở rộng phía máy khách cho phép ứng dụng tác động tới yếu tố trang HTML phản hồi giống tác động người dùng click chuột, nhập form, chuyển trang Server-side JavaScript - JavaScript phía Server, JavaScript mở rộng cách cung cấp thêm đối tượng cần thiết để để chạy JavaScript máy chủ Ví dụ, phần mở rộng phía server cho phép ứng dụng kết nối với sở liệu (database), cung cấp thông tin cách liên tục từ yêu cầu tới phần khác ứng dụng, thực thao tác với tập tin máy chủ 1.1.4 BOOTSTRAP Bootstrap Front-end framework, sưu tập miễn phí công cụ để tạo trang web ứng dụng web Nó chứa HTML CSS dựa mẫu thiết kế cho kiểu chữ, hình thức, nút, chuyển hướng thành phần giao diện khác, mở rộng JavaScript tùy chọn Bootstrap Front-end framework, sưu tập miễn phí công cụ để tạo trang web ứng dụng web Nó chứa HTML CSS dựa mẫu thiết kế cho kiểu chữ, hình thức, nút, chuyển hướng thành phần giao diện khác, mở rộng JavaScript tùy chọn Bootstrap phát triển Mark Otto Jacob Thornton Twitter framework, công cụ để phục vụ công việc nội Twitter Trước phát triển Bootstrap, có nhiều thư viện khác sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột Bootstrap đời để khắc phục yếu tố này, giúp nhà phát triển, lập trình Twitter triển khai cơng việc nhanh hơn, tiện lợi đồng Bootstrap tương thích với phiên tất trình duyệt tiếng giới Chrome, Firefox, IE, Opera Kể từ phiên 2.0 trở lên hỗ trợ Responsive Web Design Thiết kế bố trí trang web tự động điều chỉnh, tự động tương thích thiết bị 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 Boostrap: Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiết kiệm nhiều thời gian Các thư viện Bootstrap có đoạn mã sẵn sàng cho bạn áp dùng vào website Bạn khơng phải tốn q nhiều thời gian để tự viết code cho giao diện Tùy biến cao Bạn hồn tồn dựa vào Bootstrap phát triển tảng giao diện Bootstrap cung cấp cho bạn hệ thống Grid System mặc định bao gồm 12 bột độ rộng 940px Bạn thay đổi, nâng cấp phát triển dựa tảng 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ết Đây xu hướng phát triển giao diện website ưu chuộng giới 1.2.Công cụ: Visual Studio Code 1.2.1 Visual Studio Code gì? Visual studio công cụ hỗ trợ lập trình website tiếng Mcrosoft chưa có phần mềm thay Visual Studio viết ngơn ngữ C# VB+ Đây ngơn ngữ lập trình giúp người dùng lập trình hệ thống dễ dàng nhanh chóng thơng qua Visual Studio Visual Studio phần mềm lập trình hệ thống sản xuất trực tiếp từ Microsoft Từ đời đến nay, Visual Studio có nhiều phiên sử dụng khác Điều đó, giúp cho người dùng lựa chọn phiên tương thích với dịng máy cấu hình sử dụng phù hợp Bên cạnh đó, Visual Studio cịn cho phép người dùng tự chọn lựa giao diện cho máy tùy thuộc vào nhu cầu sử dụng 1.2.2.Tính Visual Studio Code - Biên tập mã Giống IDE khác, Visual Studio gồm có trình soạn thảo mã hỗ trợ tơ sáng cú pháp hoàn thiện mả sử dụng IntelliSense không cho hàm, biến phương pháp mà cịn sử dụng cho cấu trúc ngơn ngữ như: Truy vấn vòng điều khiển Bên cạnh đó, trình biên tập mã Visual Studio hỗ trợ cài đặt dấu trang mã để điều hướng cách nhanh chóng dễ dàng Hỗ trợ điều hướng như: Thu hẹp khối mã lệnh, tìm kiếm gia tăng,… Visual Studio cịn có tính biên dịch tức mã viết phần mềm biên dịch để nhằm cung cấp thông tin phản hồi cú pháp biên dịch lỗi đánh dấu gạch gợn sóng màu đỏ - Trình gỡ lỗi Visual Studio có trình gỡ lỗi có tính vừa lập trình gỡ lỗi cấp máy gỡ lỗi cấp mã nguồn Tính hoạt động với hai mã quản lý giống ngôn ngữ máy sử dụng để gỡ lỗi ứng dụng viết ngôn ngữ hỗ trợ 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, bố trí dùng để xây dựng nút điều khiển bên khóa chúng vào bên cạnh mẫu Điều khiển trình bày liệu liên kết với nguồn liệu như: Cơ sở liệu truy vấn WPF Designer Tính giống Windows Forms Designer có cơng dụng hỗ trợ kéo thả ẩn dụ Sử dụng tương tác người máy tính nhắm mục tiêu vào Windows Presentation Foundation Web designer/development Visual Studio có trình soạn thảo thiết kế website cho phép trang web thiết kế theo tính kéo thả đối tượng Mục đích để hỗ trợ người dùng tạo trang web dễ dàng hơn, yêu cầu đơn giản thiết kế web du lịch hay trang giới thiệu công ty sử dụng tính đảm bảo cho bạn sở hữu website hoàn chỉnh Chương THIẾT KẾ WEBSITE 2.1.Yêu cầu chức website - Thơng tin ăn - Các cơng thức ăn - Các địa điểm ăn uống tiếng số tỉnh thành - Các ăn đặc trưng tỉnh thành khác Xây dựng website thông tin đơn giản , thân thiện dễ sử dụng , cho phép người dùng xem tra cứu thơng tin Tìm hiểu thơng tin văn hóa , du lịch , địa điểm ăn uống Website thiết kế : - Giao diện hài hòa thân thiện người dùng - Giúp đỡ tìm hiểu sắc văn hóa du lịch - Dễ dàng tìm kiếm thấy thơng tin cần tìm hiểu Khách hàng gửi ý kiến thơng qua gmail mình, đóng góp ý đến website, giúp website ngày phát triển Ngồi chia sẻ cơng thức ăn khác giúp người tìm hiểu tốt 2.2.Phân tích chức 2.2.1.Về phía Admin Login/Logout: Quản trị viên đăng nhập để quản lí chức website Xóa, chỉnh sửa viết: Quản trị viên tùy chọn thêm, xóa chỉnh sửa thư mục, viết hình ảnh liên quan Đăng tin mới: Quản trị viên cập nhật tin tức thực đơn Quản lý người dùng: Thông báo số người truy cập số người online website Trả lời phản hồi: Quản trị viên phản hồi ý kiến người dùng đánh giá / bình luận, hỏi đáp Admin Trả lời phản hồi Login/Logout Xóa, chỉnh sửa viết Đăng tin Quản lý người dùng 2.2.2.Về phía User Đánh giá/Bình luận: Chức đánh giá cho phép người dùng gửi đánh giáo từ 1-5 cho dịch vụ hệ thống, người dùng commment/bình luận sản phẩm ăn, dịch vụ khách sạn sau sử dụng tài khoản cá nhân hệ thống Gửi ý kiến phản: Người dùng đặt câu hỏi, ý kiến website User Đánh giá/Bình luận: Thơng tin ăn truyền thống người Việt Nam Xem chi tiết Gửi ý kiến phản hồi 2.2.3.Các module Đặc sãn vùng miền Thông tin địa chi tiết nhà hàng tiếng 1.Module giới thiệu sản phẩm: Các chức giới thiệu sản sẩm thể bảng Bảng 1: Giới thiệu sản phẩm Chức Mơ tả Kích hoạt Thơng tin đầu vào Mô tả chi tiết Cung cấp chức hiển thị thơng tin chi tiết ăn, địa điểm ăn uống có Website Khách hàng click vào menu sản phẩm Các thơng tin ăn Admin đưa vào CSDL website : Tên ăn ,ngun liệu,cách chế biến Các thơng tin cửa hàng : Vị trí ,các ăn phục vụ 2.Module tìm kiếm ăn: Các chức tìm kiếm ăn thể bảng Bảng 2: Tìm kiếm ăn Chức Mơ tả Kích hoạt Thơng tin đầu vào Q trình xử lý Thông tin đầu Mô tả chi tiết Giúp người dùng nhanh chóng tìm kiếm ăn muốn xem Khách hàng chọn menu tìm kiếm Yêu cầu khách hàng nhập vào thơng tin Tên ăn Tìm kiếm CSDL theo từ khóa Từ CSDL lấy sản phẩm tìm Hiển thị sản phẩm tìm thấy lên Website, khơng tìm thấy sản phẩm xuất thơng báo khơng tìm thấy 3.Module tin tức: Các chức tin tức thể bảng Bảng 3: Tin tức Chức Mơ tả Kích hoạt Thơng tin đầu vào Q trình xử lý Thơng tin đầu Mô tả chi tiết Cung cấp tin tức ăn , địa điểm mới, kiện xảy cho khách hàng Khi khách hàng chọn menu tin tức Các tin tức Admin cập nhật ngày lên CSDL Website Truy cập sở liệu lấy tin tức Hiển thị danh sách tin tức dạng tóm tắt khách hàng bấm vào “Xem thêm” chi tiết viết Các viết thời trang hay xu hướng trội 4.Module liên hệ phản hồi: Các chức liên hệ phản hồi thể bảng Bảng 4: Liên hệ phản hồi Chức Mơ tả Kích hoạt Thơng tin đầu vào Mơ tả chi tiết Khách hàng gửi ý kiến đóng góp cho cơng ty Người dùng chọn menu đóng góp ý kiến Các ý kiến phản hồi khách hàng Website Chương XÂY DỰNG WEBSITE 3.1.Website dành cho User Đối với khách hàng truy cập Website hệ thống cung cấp chức năng: - Xem hình ảnh ăn - Xem ăn tiếng vùng miền khác  Phở gà miền bắc  Bún bò Huế miền trung  Hủ tiếu Nam Vang miền Nam - Chức đóng góp ý kiến cho trang web 3.2.Website dành cho Admin Người quản trị có quyền sử dụng chức sau: - Chức cập nhật ăn - Chức cập nhật thêm cửa hàng - Chức cập nhật địa điểm ăn uống - Chức quản lý , hỗ trợ khách hàng - Chức quản lý liên hệ khách hàng 3.3 Các chức khác 3.3.1.Tăng tỉ lệ truy cập : Quảng cáo : Quảng cáo ứng dụng nhiều người truy cập Facebook, Youtube, Twitter, Intagram … Quảng bá địa điểm ăn uống: Thông qua nhà hàng địa điểm ăn uống, để địa điểm ăn uống tự quảng cáo Website Đa dạng nội dung : - Phải cho thấy nội dung khác biệt, đa dạng - Luôn cập nhật thêm - Dùng chất lượng thông tin để giữ chân người dùng KẾT LUẬN 1.Kết đạt Ưu điểm - Thông qua thiết kế websit,nhóm học nội dung sau: - Tìm hiểu ngôn ngữ: Html,Javascrip,boostrap,…, công cụ thiết kế website Visual Studio Code, Sublime Text sử dụng thành thạo - Đã thiết kế website có giao diện thân thiện, dễ dùng - Có khả sử dụng dành cho User Admin Nhược điểm - Tuy nhiên chưa đầy đủ chức năng,hình ảnh chưa xử lý chuẩn 2.Hướng phát triển - Kết hợp với địa điểm du lịch tiếng, nhà hàng, địa điểm ăn uống để phát triển trang web - Kết nối với nhà hàng địa điểm ăn uống muốn quảng bá địa điểm ăn uống - Trang Web cập nhật them ăn mới, ăn vùng miền giúp người dùng biết thêm nhiểu thông tin - Bổ sung chức quản lý website - Quản lý thông tin nội dung cho trang web - Quản lý chương trình khuyến nhà hàng có trang web - Kết hợp với dịch vụ du lịch khác - Tăng tính bảo mật cho website - Bảo mật source code website :có thể dùng kỹ thuật mã hóa hồn tồn source code website để chống đánh cắp bảo mật thông