ĐẠI HỌC ĐÀ NẴNGKHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNGĐỒ ÁN CƠ SỞ 1ĐỀ TÀI: WEBSITE VỀ ẨM THỰC ĐÀ NẴNG

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE VỀ ẨM THỰC ĐÀ NẴNG Sinh viên thực : NGUYỄN THUẬN HỊA HÀ CƠNG NHÂN Giảng viên hướng dẫn : THS NGUYỄN ANH TUẤN Lớp : 19IT1 Đà nẵng, tháng 08 năm 2020 ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: WEBSITE VỀ ẨM THỰC ĐÀ NẴNG Đà Nẵng, tháng 08 năm 2020 MỞ ĐẦU Cùng với phát triển công nghệ thông tin, người dùng internet ngày lớn dần Sự tham gia tích cực đông đảo lứa tuổi với nhu cầu chia sẻ thơng tin, tìm hiểu thơng tin kết nối bạn bè Theo thống kê tổ chức du lịch Thế giới, du khách thường chi trung bình 1/3 tổng chi phí chuyến cho hoạt động ẩm thực Điều chứng tỏ, du khách, ẩm thực không đơn việc ăn, uống mà khám phá, trải nghiệm nét văn hóa đặc trưng vùng, miền, quốc gia Vì vậy, để sản phẩm du lịch đặc biệt tỏa sáng cách bền vững hơn, ngành Du lịch, đơn vị liên quan, doanh nghiệp dịch vụ du lịch cần trọng nhiều đến giải pháp đảm bảo an tồn thực phẩm, đầu tư cơng phu cho khâu giới thiệu nghệ thuật ẩm thực gắn với sắc văn hóa, đời sống sinh hoạt cư dân địa phương Với lí chúng em chọn đề tài:” Website ẩm thực Đà Nẵng” Nhằm tạo website có ích cho người dùng muốn tìm hiểu ăn độc đáo Đà Nẵng giúp quảng bá ẩm thực nơi đến người du lịch cách dễ dàng Là trang mạng hữu ích dành cho người muốn du lịch, ăn uống, chia sẻ kinh nghiệm thân LỜI CẢM ƠN Đầu tiên nhóm em xin cảm ơn sâu sắc đến giảng viên Nguyễn Anh Tuấn – người trực tiếp hướng dẫn chúng em suốt trình hướng dẫn thực đồ án sở Chúng em xin chân thành cảm ơn giảng viên Khoa Công nghệ thông tin Truyền thông tạo điều kiện thuận lợi để giúp chúng em trình học tập thực đồ án Mặc dù trình tìm hiểu thực đồ án sở, chúng em có cố gắng định, song trình độ thời gian có hạn nên đề tài khơng tránh khỏi thiếu sót Vậy kính mong giảng viên bạn đóng góp để đồ án sở chúng em hồn thiện mong trở thành đồ án sở thực tương lai Nhóm em xin chân thành cảm ơn! NHẬN XÉT …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Chữ ký GVHD MỤC LỤC Chương Giới thiệu 1.1 Lý chọn đề tài .1 1.2 Mục tiêu đề tài 1.3 Công cụ thực 1.4 Sinh viên thực 1.5 Kết .2 Chương Nghiên cứu tổng quan 2.1 Tìm hiểu ngơn ngữ lập trình 2.2 Một số thư viện hỗ trợ Chương Phân tích thiết kế hệ thống 3.1 Khảo sát đặc tả yêu cầu 3.2 Phân tích thiết kế hệ thống Chương Triển khai xây dựng 4.1 Trang chủ 4.2 Giao diện menu 4.3 Đăng nhập 4.4 Đăng ký 4.5 Các module 4.6 Kết luận 12 4.7 Hướng phát triển 12 Chương Giới thiệu 1.1 Lý chọn đề tài Ngày nay, với phát triền công nghệ 4.0, người dùng internet ngày lớn dần với lứa tuổi với nhu cầu chia sẻ thông tin, tìm hiểu thơng tin kết nối bạn bè Vấn đề du lịch ẩm thực dễ dàng người dùng biết đến cách dễ dàng Ăn uống với đặc tính hành vi hoạt động có tần suất cao người sử dụng Nhu cầu ăn uống cao, nhiên việc ăn đâu, ăn điều mà người thường gặp khó khăn lựa chọn Theo thống kê tổ chức du lịch Thế giới, du khách thường chi trung bình 1/3 tổng chi phí chuyến cho hoạt động ẩm thực Điều chứng tỏ, du khách, ẩm thực không đơn việc ăn, uống mà khám phá, trải nghiệm nét văn hóa đặc trưng vùng, miền, quốc gia Với phát triển mạng xã hội thông tin ngập tràn, nhiên q rộng lớn mà chất lượng thơng tin khơng xác Vì vậy, “Website ẩm thực Đà Nẵng” nơi cung cấp thông tin ẩm thực ăn đặc sản, quán ăn tiếng đến người sử dụng qua dễ dàng quảng bá ẩm thực Đà Nẵng đến người 1.2 Mục tiêu đề tài - Quảng bá ẩm thực Đà Nẵng đến nhiều người du lịch hơn, giúp người dùng hiểu rõ văn hóa ẩm thực Đà Nẵng dễ dàng lựa chọn ngon quán ngon - Là trang web cung cấp đầy đủ ăn, quán ăn đầy đủ chi tiết Đà Nẵng - Đảm bảo thơng tin xác, chi tiết - Giao diện phù hợp, tối ưu cho việc đọc - Thiết kế website theo hướng tối ưu hoạt động điện thoại theo công nghệ Responsive – Phong cách thiết kế phù hợp tất thiết bị, độ phân giải hình 1.3 Cơng cụ thực - Ngơn ngữ lập trình đánh dấu siêu văn HTML Ngơn ngữ lập trình JavaScript Cơng cụ định dạng CSS Trình biên tập: Sublime Text Một số thư viện mở rộng Bootstrap 4, jQuery 1.4 Sinh viên thực - Nguyễn Thuận Hòa 19IT1 - Hà Công Nhân 19IT1 1.5 Kết - Xây dựng thành công website ẩm thực Đà Nẵng - Tìm hiểu nắm bắt kiến thức thiết kế website như: HTML, - CSS, JQUERY,… Với quy mô trang web vừa nhỏ, kiến thức chưa đủ thời gian không cho phép nên đề tài “Website ẩm thực Đà Nẵng” chưa có đầy đủ chức hoàn thiện trang cung cấp ẩm thực đà nẵng Nhóm cố gắng hồn chỉnh website với đầy đủ thông tin chức tương lai Chương Nghiên cứu tổng quan 2.1 Tìm hiểu ngơn ngữ lập trình 2.1.1 Ngôn ngữ HTML HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu văn sử dụng để tạo tài liệu truy cập mạng Tài liệu HTML tạo nhờ dùng thẻ phần tử HTML File lưu máy chủ dịch vụ web với phần mở rộng “.htm” “.html” Các trình duyệt đọc tập tin HTML hiển thị chúng dạng trang web Các thẻ HTML ẩn đi, hiển thị nội dung văn đối tượng khác: hình ảnh, media Với trình duyệt khác hiển thị tập HTML với kết định Các trang HTML gửi qua mạng internet theo giao thức HTTP HTML cho phép nhúng thêm đối tượng hình ảnh, âm mà cịn cho phép nhúng kịch vào ngơn ngữ kịch Javascript để tạo hiệu ứng động cho trang web Để trình bày trang web hiệu HTML cho phép sử dụng kết hợp với CSS HTML khơng cho phép nhúng thêm đối tượng hình ảnh, âm mà cho phép nhúng kịch vào ngơn ngữ kịch Javascript để tạo hiệu ứng động cho trang web HTML chuẩn ngôn ngữ internet tạo phát triển tổ chức World Wide Web Consortium cịn viết tắc W3C Trước HTML xuất theo chuẩn RFC HTML tương thích với hệ điều hành trình duyệt Khả dễ học, dễ viết ưu điểm HTML khơng việc soạn thảo địi hỏi đơn giản, dùng word, notepad hay trình soạn thảo văn để viết cần lưu với định dạng “.html “ “.htm” tạo file chứa HTML Hiện nay, phiên HTML HTML5 với nhiều tính ưu việt so với phiên cũ HTML cải tiến nhiều đặc biệt hỗ trợ mạnh mẽ phần tử multimedia mà không cần plugin Một tập tin HTML bao gồm đoạn văn HTML, tạo lên thẻ HTML HTML5 nói chung mạnh mẽ nhiều không tốc độ độ thích ứng cao mà khả hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) DOM (Document Object Model – đối tượng thao tác văn bản) 2.1.2 Ngôn ngữ CSS CSS (Cascading Style Sheets) ngôn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,…CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, kích thước, màu sắc ) CSS có cấu trúc đơn giản sử dụng từ tiếng anh để đặt tên cho thuộc tính CSS sử dụng viết trực tiếp xen lẫn vào mã HTML tham chiếu từ file css riêng biệt Hiện CSS thường viết riêng thành tập tin với mở rộng “.css” Chính mà trang web có sử dụng CSS mã HTML trở nên ngắn gọn Ngồi sử dụng tập tin CSS cho nhiều website tiết kiệm nhiều thời gian công sức Một đặc điểm quan trọng tính kế thừa CSS giảm số lượng dòng code mà đạt yêu cầu Tuy nhiên, CSS trình duyệt hiểu theo kiểu riêng Do vậy, việc trình bày nội dung trình duyệt khác không thống CSS cung cấp hàng trăm thuộc tính trình bày dành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu 2.2 Một số thư viện hỗ trợ 2.2.1 Thư viện Javascript JavaScript ngôn ngữ dạng script thường sử dụng cho việc lập trình web phía client, tn theo chuẩn ECMAScript Là ngôn ngữ linh động, cú pháp dễ sử dụng ngôn ngữ khác dễ dàng lập trình JavaScript khơng liên quan tới ngơn ngữ lập trình java, hầu hết trình duyệt ngày hỗ trợ Với javascript, ứng dụng web bạn trở nên vơ sinh động, mang tính trực quan tương tác cao JavaScript theo phiên hành ngơn ngữ lập trình kịch dựa đối tượng phát triển từ ý niệm nguyên mẫu Ngôn ngữ dùng rộng rãi cho trang web, dùng để tạo khả viết script sử dụng đối tượng nằm sẵn ứng dụng Giống Java, JavaScript có cú pháp tương tự ngơn ngữ lập trình C “.js” phần mở rộng thường dùng cho tập tin mã nguồn JavaScript 2.2.2 Thư viện BOOTSTRAP Bootstrap Framework có chứa HTML, CSS, JAVASCRIPT, Framework tiếng việt có nghĩa “khuôn khổ” giúp tiết kiệm thời gian, công sức việc xây dựng hai teamplate cho giao diện Desktop Mobile lỗi thời thay vào Responsive Responsive giúp website bạn hiển thị tương thích với kích thước hình nhờ bạn tùy chỉnh thị nhiều loại hình khác Ưu điểm Bootstrap: - 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 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 2.2.3 Thư viện JQUERY JQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006 với phương châm tuyệt vời: Write less, more - Viết hơn, làm nhiều JQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax Với jQuery, khái niệm Rapid Web Development khơng cịn q xa lạ JQuery cơng cụ tiện ích JavaScript làm đơn giản hóa tác vụ đa dạng với việc viết code Dưới liệt kê số tính tối quan trọng hỗ trợ jQuery: - Thao tác DOM − jQuery giúp dễ dàng lựa chọn phần tử DOM để traverse (duyệt) cách dễ dàng sử dụng CSS, chỉnh sửa nội dung chúng sử dụng phương tiện Selector mã nguồn mở, mà gọi Sizzle - Xử lý kiện − jQuery giúp tương tác với người dùng tốt việc xử lý kiện đa dạng mà không làm cho HTML code rối tung lên với Event Handler - Hỗ trợ AJAX − jQuery giúp bạn nhiều để phát triển site giàu tính phản hồi tốt sử dụng công nghệ AJAX - Hiệu ứng − jQuery kèm với nhiều hiệu ứng đa dạng đẹp mắt mà bạn sử dụng Website - Gọn nhẹ − jQuery thư viện gọn nhẹ - có kích cỡ khoảng 19KB (gzipped) - Được hỗ trợ hầu hết trình duyệt đại − jQuery hỗ trợ hầu hết trình duyệt đại, làm việc tốt IE 6.0+, FF 2.0+, Safari 3.0+, Chrome Opera 9.0+ - Cập nhật hỗ trợ công nghệ − jQuery hỗ trợ CSS3 Selector cú pháp XPath Chương Phân tích thiết kế hệ thống 3.1 Khảo sát đặc tả yêu cầu 3.1.1 Yêu cầu chức - Chức đăng ký nhận thông tin qua email - Đăng ký, đăng nhập 3.1.2 Giao diện người dùng - Website không nên phức tạp Dung lượng file không lớn Thanh menu thật đơn giản Cần có thơng tin liên hệ Màu chủ đạo, font chữ cần bắt mắt, hài hịa Tương thích với trình duyệt thiết bị 3.1.3 Yêu cầu hệ thống - Hệ thống hoạt động nhanh, xác - Có thể nâng cấp, update, bảo trì dễ dàng - Tính bảo mật độ an tồn cao 3.2 Phân tích thiết kế hệ thống 3.2.1 Các chức hệ thống Hệ thống quản trị trang web - Quản lí tin tức - Quản lí câu hỏi, ý kiến từ người dùng Chương Triển khai xây dựng 4.1 Trang chủ 4.2 Giao diện menu 4.3 Đăng nhập 4.4 Đăng ký 4.5 Các module 4.5.1 Món ăn (Food) 4.5.2 Quán ăn (Restaurant) 4.5.3 Tin tức (Magazine) 10 4.5.4 Liên hệ 11 4.6 Kết luận - Bản thân tích lũy kinh nghiệm việc phân tích thiết kế hệ - thống Xây dựng website sử dụng Bootstrap Website hỗ trợ tiếng Việt Hạn chế: Giao diện cịn thiếu sót Khơng có kiến thức backend nên nhiều chức chưa có Hạn chế ngơn ngữ 4.7 Hướng phát triển - Xây dựng giao diện thân thiện với người dùng - Kiểm tra trường hợp thiếu sót - Tận dụng mạnh cơng cụ hỗ trợ để website nhanh nhạy, - xác Xây dựng thêm nhiều chức để hệ thống đầy đủ tồn vẹn Tìm hiểu xu hướng người dùng để chỉnh sửa, bổ sung hệ thống phù hợp theo yêu cầu Cập nhật tính khác để nâng cấp hệ thống Phát triển thêm module chuyển đổi ngôn ngữ giúp cho người nước ngồi tìm việc dễ dàng 12 PHỤ LỤC https://www.ivivu.com/blog/tag/am-thuc-da-nang/?fbclid=IwAR274odwN9s1KGt0WKVBMvnWbsr5Lg2K6F0rWVfPuWltVPTbbl9wpKvKW4