Đồ án cơ sở 1 xây dựng website đặt đồ ăn vkufood

Mục tiêu của đề tài Giúp sinh viên chỉ cần ngồi tại phòng nhưng có thể có được một bữa ăn ngon và hợp khẩu vị, hơn hết có thể liên kết với các quán ănxung quanh trường tạo nên một hệ thố

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

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

ĐỒ ÁN CƠ SỞ 1

XÂY DỰNG WEBSITE ĐẶT ĐỒ ĂN

VKUFOOD

Sinh viên thực hiện: Lê Đức Anh Việt Mã: 22IT338

Nguyễn Minh Hiếu Mã: 22IT.B076

Giáo viên hướng dẫn: TS Nguyễn Quang Vũ

Đà Nẵng , tháng 06 năm 2023

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

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

ĐỒ ÁN CƠ SỞ 1

XÂY DỰNG WEBSITE ĐẶT ĐỒ ĂN

VKUFOOD

Sinh viên thực hiện: Lê Đức Anh Việt Mã: 22IT338

Nguyễn Minh Hiếu Mã: 22IT.B076

Giáo viên hướng dẫn: TS Nguyễn Quang Vũ

Đà Nẵng , tháng 06 năm 2023

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI NÓI ĐẦU

Trong một thế giới ngày càng phát triển về công nghệ và thúc đẩy sự tiện ích cho cuộc sống, việc sử dụng công nghệ để đáp ứng nhu cầu

ăn uống là một xu hướng tất yếu Với sự đổi mới và sáng tạo, chúng

em đã nhận ra tiềm năng của một website đặt đồ ăn online để cung cấp một trải nghiệm thuận tiện và nhanh chóng cho cộng đồng sinh viên và giảng viên của trường Vì thế chúng em lựa chọn đề tài “Xây dựng website đặt đồ ăn VKUFood”

Trang web cung cấp một danh sách đa dạng các nhà cung cấp thực phẩm và nhà hàng nằm trong khu vực lân cận với trường VKU Người dùng có thể dễ dàng tìm kiếm và chọn lựa các món ăn phù hợp với

sở thích và nhu cầu của mình Thông qua website, người dùng có thể xem thông tin chi tiết về món ăn, giá cả, đánh giá từ người dùng khác và thực hiện đặt hàng một cách thuận tiện

Website VKUFood không chỉ hướng đến sự tiện lợi và nhanh chóng,

mà còn đảm bảo tính an toàn và chất lượng của các món ăn Qua quy trình kiểm tra và chấp thuận từ phía nhà cung cấp, website đảm

bảo rằng các món ăn đáp ứng các tiêu chuẩn về an toàn thực phẩm

và dinh dưỡng

Trong khoảng thời gian có hạn, nhóm chúng em đã tạo ra đượcwebsite đặt đồ ăn VKUFood Vì kiến thức còn hạn chế nên có thể sẽkhông đảm bảo được hoàn toàn yêu cầu của thầy cô Trong tươnglai, chúng em sẽ cố gắng cải thiện và phát triển website ngày cànghoàn thiện hơn

Trong quá trình thực hiện đồ án còn nhiều sai sót, chúng em rấtmong nhận được sự chỉ, đóng góp ý kiến của thầy cô dành chúng em

để khắc phục những hạn chế của đồ án và hoàn thiện nó trở nên tốt hơn

Chúng em hy vọng rằng thầy cô và các ban giám khảo sẽ vẫn luôn là những cố vấn hỗ trợ quý giá đối với sinh viên của mình Cảm

ơn thầy cô và các ban giám khảo rất nhiều

Chúng em xin chân thành cảm ơn!

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

DANH MỤC ẢNH

Hình ảnh 1: Ảnh HTML 10

Hình ảnh 2: Ảnh css 11

Hình ảnh 3: ảnh js 12

Hình ảnh 4:ảnh bootstrap 13

Hình ảnh 5: ảnh thiết kế 19

Hình ảnh 6: ảnh header 20

Hình ảnh 7: Content 22

Hình ảnh 8: footer 22

Hình ảnh 9: Giao diện cửa hàng 23

Hình ảnh 10: Giao diện giỏ hàng 23

Hình ảnh 11: giao diện đăng nhập 24

Hình ảnh 12: giao diện đăng ký 24

Hình ảnh 13: giao diện thanh toán 25

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 3

LỜI NÓI ĐẦU 4

LỜI CẢM ƠN 5

CHƯƠNG 1 GIỚI THIỆU CHUNG 8

1.1.Tổng quan đề tài 8

1.1.1 Tên đề tài 8

1.1.2 Lý do chọn đề tài 8

1.1.3 Mục tiêu của đề tài 8

1.2 Các công cụ hỗ trợ làm đề tài: 9

1.2.1 Visual Studio Code: 9

1.2.1 Google Chrome: 9

1.2.3 GitHub: 9

1.3 Các ngôn ngữ hỗ trợ làm đề tài: 10

1.3.1 Ngôn ngữ HTML 10

1.3.2 Ngôn ngữ CSS 11

1.3.3 Ngôn ngữ Javascript 12

1.3.4 Thư viện Bootstrap 13

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15

2.1.Phân tích yêu cầu 15

2.1.1 Yêu cầu người dùng: 15

2.1.2 Yêu cầu chức năng 16

2.1.3 Yêu cầu phi chức năng 17

2.1.4 Yêu cầu hệ thống 18

2.2.Thiết kế 19

2.2.1 Trang chủ 19

CHƯƠNG III: XÂY DỰNG VÀ TRIỂN KHAI WEBSITE 20

3.1 Cài đặt 20

3.2 Kết quả thử nghiệm 20

CHƯƠNG 4 : KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 26

4.1 Kết luận 26

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

CHƯƠNG 1 GIỚI THIỆU CHUNG.

1.1.Tổng quan đề tài.

1.1.1 Tên đề tài

Tên :VKUFood - Xây dựng website đặt đồ ăn các quán xung

quanh trường VKU cho sinh viên

Địa điểm: Trường đại học Công nghệ thông tin và Truyền

thông Việt Hàn

Mô hình kinh doanh: Bán công nghệ này cho các quán ăn

xung quanh trường VKU

Logan : Nhanh chóng - Tiết kiệm - Thuận tiện

Sứ mệnh: Giúp sinh viên xung quanh trường VKU có những

bữa ăn hợp khẩu vị và phù hợp với túi tiền

Tầm nhìn: Trở thành 1 thương hiệu dịch vụ nổi tiếng về đặt đồ

ăn xung quanh các trường đại học ở địa bàn Đà Nẵng

Chiến lược: Quảng bá rộng rãi ở các trường gần địa bàn xung

quanh trường VKU

1.1.2 Lý do chọn đề tài

Hầu như sinh viên ở trường VKU đều đến từ nhiều nơi đặc biệt làmiền trung, khẩu vị ở miền trung rất đa dạng tại vị trí nối liền từ Bắcsang Nam nên khẩu vị người miền trung rất đa dạng, để giúp sinhviên có một bữa ăn ngon và hợp khẩu vị mà không cần phải trảinghiệm từng quán đồ ăn khác nhau, chúng em đã tạo ra một trangweb giúp sinh viên có thể đặt đồ ăn ở các quán xung quanh trường,tạo điều kiện để sinh viên có thể dễ dàng tiếp cận các món ăn ở cácquán ăn xung quanh trường

1.1.3 Mục tiêu của đề tài

Giúp sinh viên chỉ cần ngồi tại phòng nhưng có thể có được một bữa

ăn ngon và hợp khẩu vị, hơn hết có thể liên kết với các quán ănxung quanh trường tạo nên một hệ thống quán ăn, cạnh tranh vềchất lượng sản phẩm và phân chia vùng khách hàng cho từng quán.Ngoài ra còn giúp sinh viên có thể có thêm việc làm bằng cách giúpcác quán ăn đưa đồ ăn tới cho sinh viên

1.2 Các công cụ hỗ trợ làm đề tài:

Trong quá trình thực hiện đề tài thiết kế website đặt đồ ăn VKUFood,

em sử dụng các công cụ hỗ trợ, trong đó công cụ chính được lựa

Ả

chọn là Visual Studio Code (VS Code) và trình duyệt Chrome Dướiđây là những công cụ, phần mềm hỗ trợ quan trọng mà em đã sửdụng:

1.2.1 Visual Studio Code:

Visual Studio Code (thường được viết tắt là VS Code) là một trình biên tập mã nguồn mở và miễn phí, phát triển bởi Microsoft Nóđược thiết kế để hỗ trợ các nhà phát triển trong việc viết mã, sửa lỗi

và xây dựng ứng dụng VS Code có thể hoạt động trên nhiều hệ điềuhành, bao gồm Windows, macOS và Linux

VS Code hỗ trợ một loạt ngôn ngữ lập trình phổ biến, bao gồmJavaScript, Python, C#, HTML, CSS, Java và nhiều ngôn ngữ khác,tích hợp tính năng quản lý phiên bản Git, có một hệ thốngextensions rộng lớn, cung cấp các tính năng gỡ lỗi mạnh mẽ để giúpbạn tìm và sửa lỗi trong mã nguồn Nhờ thế nhóm chúng em dễ dànglàm việc, sửa lỗi khi thiết kế web

1.2.2 Google Chrome:

Google Chrome là một trình duyệt web phổ biến được pháttriển bởi Google Nó cho phép người dùng duyệt và tương tác với cáctrang web trên Internet Chrome được xây dựng trên nền tảng mãnguồn mở Chromium và có sẵn trên nhiều nền tảng, bao gồmWindows, macOS, Linux, iOS và Android

Chrome cung cấp một giao diện người dùng đơn giản và trực quan,cho phép người dùng mở nhiều tab và cửa sổ trình duyệt cùng mộtlúc Nó có tốc độ tải trang nhanh và hỗ trợ các công nghệ web tiêntiến như HTML5, CSS3 và JavaScript, giúp hiển thị các trang web đẹpmắt và tương tác mượt mà

1.2.3 GitHub:

GitHub là một nền tảng phát triển phần mềm mạnh mẽ, dựatrên Git, cho phép quản lý phiên bản, hỗ trợ công tác nhóm và cungcấp dịch vụ hosting mã nguồn Với tính năng quản lý phiên bản và

mã nguồn mở, GitHub giúp theo dõi lịch sử thay đổi và hợp nhất mãnguồn dễ dàng Các tính năng hợp tác và phát triển nhóm bao gồmyêu cầu kéo và theo dõi vấn đề, tạo điều kiện cho sự hợp tác và thảoluận Đồng thời, GitHub cung cấp dịch vụ hosting cho mã nguồn vàcho phép triển khai trực tiếp Với một cộng đồng rộng lớn, GitHubcung cấp môi trường mạng xã hội cho việc khám phá, đóng góp vàkết nối với nhà phát triển khác trên toàn thế giới

Nhờ chức năng quản lý dự án tốt, chúng em đã sử dụng GitHub

để làm công cụ giúp làm việc, sao lưu, theo dõi tiến độ đồ án vớinhau

1.3 Các ngôn ngữ hỗ trợ làm đề tài:

Website VKUFood được tạo bằng cách sử dụng ngôn ngữ lập

trình web như HTML, CSS và JavaScript Công nghệ và công cụ pháttriển web ngày càng phát triển, cho phép tạo ra các trang web tùychỉnh và phức tạp với nhiều tính năng và giao diện đẹp mắt

1.3.1.2 Công dụng của HTML

HTML có các công dụng chính sau đây:

Xây dựng cấu trúc trang web

Định dạng và trình bày nội dung trên trang web.Tạo liên kết và điều hướng trang web

Tạo danh sách

Nhúng hình ảnh, video và âm thanh vào trang web

Tạo form nhập liệu và thu thập dữ liệu từ người dùng.

Định dạng và trình bày nội dung trên trang web

Điều chỉnh màu sắc, font chữ và kích thước của văn bản.Xác định kích thước, định dạng và vị trí của hình ảnh

Điều chỉnh khoảng cách, canh lề và đường viền của các phần tử.Tạo hiệu ứng chuyển động, đổ bóng và đèn nền

Điều chỉnh bố cục và kiểu dáng của trang web

CSS giúp tách biệt kiểu dáng và giao diện của trang web với cấutrúc và nội dung của nó, mang lại tính linh hoạt và dễ bảo trìtrong phát triển web

1.3.3.2 Công dụng của Javascript là gì ?

JavaScript (JS) có những công dụng chính sau:

Tương tác người dùng.

Xác thực dữ liệu.

Tải dữ liệu không cần làm tải lại trang.

Thao tác với DOM (Document Object Model).

Quản lý cookies.

Tích hợp dịch vụ và APIs.

Phát triển ứng dụng di động và hybrid.

1.3.4 Thư viện Bootstrap

1.3.4.1 Thư viện Bootstrap là gì ?

Bootstrap được xây dựng dựa trên HTML, CSS và JavaScript, và đikèm với một số thư viện CSS và JavaScript sẵn có Nó bao gồm mộttập hợp các kiểu dáng, mẫu thiết kế, component và các tính năngtương tác để giúp tăng tốc quá trình phát triển web

1.3.4.3 Hệ thống Grid System của Bootstrap là gì ?

Hệ thống Grid System của Bootstrap là một cách tiếp cậnlinh hoạt để tạo cấu trúc trang web đáp ứng Dựa trên lưới 12 cột và

sử dụng các lớp CSS, nó cho phép bạn chia bố cục trang thành các phần tử hàng và cột Bằng cách sử dụng các lớp cột, bạn có thể dễ dàng điều chỉnh kích thước và vị trí của các phần tử trên mọi kích thước màn hình Hệ thống Grid System giúp tạo giao diện đáp ứng một cách dễ dàng và giảm thiểu công việc tùy chỉnh, đảm bảo trải nghiệm người dùng tốt trên mọi thiết bị

CHƯƠNG 2 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG.

2.1.Phân tích yêu cầu.

2.1.1 Yêu cầu người dùng:

Trước khi bắt đầu thiết kế hệ thống website đặt đồ ăn, việc phân tích yêu cầu người dùng là một quá trình quan trọng để hiểu rõcác chức năng và tính năng cần có của hệ thống Dưới đây là một số yêu cầu người dùng phổ biến của dự án này được xem xét và khảo sát kỹ:

Hiển thị sản phẩm: Yêu cầu cơ bản của người dùng là có một giao diện thân thiện, dễ sử dụng và trực quan để hiển thị các sản của cácgian hàng đồ ăn Giao diện này cần đảm bảo trải nghiệm người dùngtốt, cho phép người dùng dễ dàng tìm kiếm, lọc và xem thông tin chitiết về từng quán lẫn sản phẩm của quán, bao gồm đánh giá, xếp hạng, ảnh,giá cả và khẩu vị Các tính năng như tìm kiếm nhanh, lọc sản phẩm lẫn quán ăn cũng nằm trong yêu cầu này

Tìm kiếm và lọc sản phẩm: Một yêu cầu quan trọng là cung cấp tính năng tìm kiếm và lọc món ăn lẫn quán xá Người dùng muốn có khả năng tìm kiếm món ăn dễ dàng bằng cách nhập từ khóa, tìm kiếm theo thương hiệu, giá cả, tên món, kích thước màn hình, hệ điều hành và các yếu tố khác Hệ thống cần cung cấp các công cụ tìm kiếm tiên tiến để người dùng có thể tìm thấy sản phẩm một cách nhanh chóng và chính xác Ngoài ra, khả năng lọc sản phẩm theo các tiêu chí này cũng cần được tích hợp, giúp người dùng thuận tiện trong việc tùy chỉnh và hạn chế kết quả hiển thị.

Quản lý giỏ hàng: Một yêu cầu quan trọng trong hệ thống là quản lý giỏ hàng của người dùng Người dùng cần có khả năng thêm các món ăn vào giỏ hàng, cập nhật số lượng và xóa sản phẩm khi cần

Hệ thống cần đảm bảo tính nhất quán và đáng tin cậy trong việc quản lý giỏ hàng của người dùng Ngoài ra, cần có tính năng tính toán tổng giá trị của giỏ hàng và cập nhật số lượng sản phẩm còn lại

để người dùng có thể theo dõi dễ dàng

Thanh toán và đặt hàng: Một trong những yêu cầu quan trọng nhất của người dùng là quy trình thanh toán và đặt hàng an toàn và thuận tiện Hệ thống cần hỗ trợ các phương thức thanh toán phổ biến như thanh toán qua thẻ tín dụng, ví điện tử và chuyển khoản ngân hàng Cần đảm bảo tính bảo mật và an toàn của thông tin thanh toán của người dùng thông qua việc sử dụng các giao thức mật mã hóa và phương thức xác thực đáng tin cậy Sau khi hoàn tất quy trình thanh toán, người dùng cần nhận được xác nhận đặt hàng

và thông tin vận chuyển để theo dõi quá trình giao hàng

Quản lý tài khoản người dùng: Hệ thống cần cung cấp chức năng đăng ký và đăng nhập để người dùng có thể quản lý thông tin cá nhân, địa chỉ giao hàng và theo dõi lịch sử mua hàng Người dùng cần có khả năng chỉnh sửa thông tin cá nhân, đổi mật khẩu và quản

lý các thông tin liên quan đến tài khoản của mình Ngoài ra, hệ thống cần đảm bảo tính bảo mật và riêng tư của thông tin người dùng thông qua việc áp dụng các biện pháp bảo vệ dữ liệu cá nhân.Tích hợp xã hội: cho phép chia sẻ sản phẩm, đánh giá và bình luận thông qua các mạng xã hội như Facebook, Twitter hoặc Instagram Tích hợp xã hội giúp tăng tính tương tác và phát triển cộng đồng trong hệ thống

2.1.2 Yêu cầu chức năng

Đăng ký và đăng nhập: cho phép người dùng đăng ký tài khoản mới với thông tin cá nhân cần thiết, bao gồm tên, địa chỉ email của

trường, mật khẩu, và số điện thoại liên hệ, số phòng ktx(nếu đang ở trong ktx của trường) Cung cấp tính năng đăng nhập để người dùng

có thể truy cập vào tài khoản của mình và sử dụng các chức năng khác của hệ thống

Hiển thị sản phẩm: hiển thị danh sách các món ăn với thông tin chi tiết bao gồm tên, ảnh, giá cả, số lượng, đánh giá, và tên quán ăn cung cấp Cung cấp giao diện thân thiện và trực quan để người dùng

có thể dễ dàng duyệt qua danh sách các đơn đặt hàng Đồng thời cho phép người dùng xem sản phẩm chi tiết với thông tin bổ sung như đánh giá từ người dùng khác, ảnh mô tả chi tiết

Tìm kiếm và lọc sản phẩm: cung cấp công cụ tìm kiếm nhanh để người dùng có thể nhập từ khóa và tìm kiếm sản phẩm theo tên quán, tên món ăn, hoặc các từ khóa liên quan Hỗ trợ các tùy chọn lọc sản phẩm theo thương hiệu, giá cả,xếp hạng đánh giá, và các yếu tố khác để người dùng có thể thu hẹp kết quả tìm kiếm theo yêucầu của mình

Quản lý giỏ hàng: cho phép người dùng thêm các món ăn vào giỏ hàng, cập nhật số lượng món ăn, và xóa sản phẩm khi cần và hiển thị tổng giá trị của giỏ hàng và cung cấp thông tin chi tiết về các mục trong giỏ hàng như tên sản phẩm, ảnh, giá cả, và tổng cộng.Thanh toán và đặt hàng: hỗ trợ các phương thức thanh toán an toàn

và đáng tin cậy như thanh toán qua thẻ tín dụng, ví điện tử, chuyển khoản ngân hàng, hoặc thanh toán khi nhận hàng Khách hàng có thể xác nhận đặt hàng và cung cấp thông tin vận chuyển cho người dùng sau khi hoàn tất quy trình thanh toán Sau đó cửa hàng sẽ gửi email xác nhận đặt hàng và cung cấp mã đơn hàng để người dùng

có thể theo dõi quá trình giao hàng

Hệ thống quản lý tài khoản người dùng mang đến cho người dùng sựthuận tiện và linh hoạt trong việc chỉnh sửa thông tin cá nhân, đổi mật khẩu và quản lý địa chỉ giao hàng, người dùng có thể cập nhật

và điều chỉnh các thông tin cá nhân của mình như tên,, số điện thoại

và địa chỉ email, số phòng(nếu ở trong ktx) Người dùng có thể dễ dàng thay đổi mật khẩu hiện tại thành một mật khẩu mới, đảm bảo tính bảo mật và an toàn cho tài khoản của họ Hệ thống cũng cho phép người dùng quản lý địa chỉ giao hàng của mình(nếu ở ngoài khu vực ktx) Người dùng có thể thêm, chỉnh sửa hoặc xóa các địa chỉ giao hàng trong danh sách của mình

Tích hợp xã hội: tích hợp các nút chia sẻ sản phẩm và đánh giá lên các mạng xã hội để người dùng có thể chia sẻ thông tin sản phẩm với bạn bè và nhận xét về sản phẩm Bên cạnh đó hiển thị đánh giá