Đồ Án môn lập trình web Đề tài web order Đồ Ăn

Báo cáo này giới thiệu quá trình xây dựng hệ thống Web Order Đồ Ăn, bao gồm thiết kế, phát triển và triển khai các tính năng như đặt hàng, thanh toán và quản lý đơn hàng.. · Đây là cơ h

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

VIỆN KHOA HỌC KĨ THUẬT BƯU ĐIỆN

NGƯỜI HƯỚNG DẪN:

Nguyễn Mạnh Dũng

Hà Nội, Tháng 12 năm 2024

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

VIỆN KHOA HỌC KĨ THUẬT BƯU ĐIỆN

ĐỒ ÁN MÔN: LẬP TRÌNH WEB

ĐỀ TÀI:

WEB ORDER ĐỒ ĂN

SINH VIÊN THỰC HIỆN ĐỒ ÁN

Vũ Trọng Tiến - B23DCCC158

GIẢNG VIÊN:

VŨ VĂN THƯƠNG

Hà Nội, Tháng 12 năm 2024

Lời mở đầu

Trong thời đại công nghệ số, việc đặt hàng đồ ăn trực tuyến đã trở thành xu hướng phổ biến, mang lại sự tiện lợi và nhanh chóng cho cả khách hàng lẫn nhà

hàng Báo cáo này giới thiệu quá trình xây dựng hệ thống Web Order Đồ Ăn,

bao gồm thiết kế, phát triển và triển khai các tính năng như đặt hàng, thanh toán và quản lý đơn hàng

Mục tiêu của dự án là tạo ra một nền tảng thân thiện, hiệu quả, giúp tối ưu hóa quy trình đặt hàng và nâng cao trải nghiệm người dùng

Trân trọng!

MỤC LỤC

Trang phụ bìa Lời mở đầu

Chương I GIỚI THIỆU

1.1 Mục tiêu 1.2Ý nghĩa

Chương II PHÂN TÍCH YÊU CẦU HỆ THỐNG

2.1 Đối tượng sử dụng 2.2 Chức năng chính

Chương III THIẾT KẾ HỆ THỐNG

3.1 Kiến trúc hệ thống 3.2 Thiết kế giao diện người dùng (UI/UX) 3.3 Cơ sở dữ liệu

Chương IV TRIỂN KHAI CÔNG NGHỆ VÀ SỬ DỤNG

4.1 Công cụ và ngôn ngữ lập trình

4.2 Quá trình triển khai

6.1 Đánh giá tổng quan hệ thống 6.2 Những khó khăn

Chương VII

ĐỀ XUẤT VÀ HƯỚNG PHÁT TRIỂN

7.1 Cải thiện tính năng 7.2 Bổ sung tính năng mới

Chương VIII KẾT LUẬN

8.1 Tổng kết quá trình thực hiện

1 Giới Thiệu

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

· Đề tài này có tính ứng dụng cao và phù hợp với thực tế hiện nay

· Thị trường dịch vụ đặt món trực tuyến đang phát triển nhanh chóng nhưng vẫn còn nhiều tiềm năng để cải thiện và đổi mới

· Đây là cơ hội để nhóm nghiên cứu và áp dụng các kiến thức về lập trình, thiết kế giao diện người dùng, và quản lý cơ sở dữ liệu vào thực tế

1 2 Mục Tiêu Đồ Án

Mục tiêu của đồ án là xây dựng một hệ thống website đặt đồ ăn trực tuyến nhằm đáp ứng nhu cầu ngày càng tăng về mua sắm và đặt món qua internet Hệ thống sẽ cung cấp các tính năng chính bao gồm:

· Dành cho khách hàng:

o Đặt món ăn trực tuyến một cách dễ dàng và tiện lợi

o Thanh toán qua các phương thức an toàn và linh hoạt

o Theo dõi trạng thái đơn hàng theo thời gian thực

· Dành cho nhà hàng:

o Quản lý thực đơn linh hoạt với khả năng cập nhật món ăn, giá cả

o Tiếp nhận và xử lý đơn hàng nhanh chóng

1.3 Ý Nghĩa Thực Tiễn

· Đáp ứng nhu cầu thị trường:

Với xu hướng tiêu dùng online phát triển mạnh mẽ, một website đặt đồ ăn trực tuyến

sẽ hỗ trợ khách hàng tiết kiệm thời gian, dễ dàng so sánh thực đơn giữa các nhà hàng,

và đặt món mọi lúc, mọi nơi

· Hỗ trợ nhà hàng nhỏ và vừa:

Nhiều nhà hàng chưa có giải pháp công nghệ phù hợp để quản lý đơn hàng và tương tác với khách hàng trực tuyến Website này cung cấp một nền tảng dễ sử dụng, giúp

họ tiếp cận khách hàng tiềm năng và tăng doanh thu

· Nâng cao trải nghiệm khách hàng:

Khách hàng có thể đặt món ăn, thanh toán trực tuyến, và nhận hàng tận nhà mà khôngcần rời khỏi nơi làm việc hoặc nhà riêng

· Giảm thiểu sai sót:

Với việc tự động hóa quy trình đặt hàng và quản lý dữ liệu, hệ thống giúp giảm thiểu các sai sót do con người như giao nhầm món, nhập sai thông tin đơn hàng

· Đóng góp vào chuyển đổi số:

Góp phần vào xu hướng chuyển đổi số trong ngành thực phẩm và dịch vụ, giúp tăng hiệu quả hoạt động và cạnh tranh của các nhà hàng trên thị trường

2 Phân Tích Yêu Cầu Hệ Thống

 Yêu cầu: Hệ thống linh hoạt cho phép thêm, sửa, xóa món ăn; nhận thông báo về đơn hàng mới

 Khách hàng có thể xem thực đơn, và đặt món ăn trực tuyến

 Cho phép tùy chỉnh món ăn2.2.3 Thanh toán trực tuyến:

 Tích hợp các cổng thanh toán phổ biến như ví điện tử, thẻ tín dụng, thẻ ngân hàng

 Xác nhận thanh toán thành công2.2.4 Theo dõi đơn hàng:

 Khách hàng có thể theo dõi trạng thái đơn hàng ( đã hoàn thành)

 Nhà hàng có thể quản lý trạng thái đơn hàng trong thời gian thực.2.2.5 Quản lý thực đơn (Dành cho nhà hàng):

 Chức năng thêm, sửa, xóa món ăn, thay đổi giá và hình ảnh món ăn

3 Thiết Kế Hệ Thống

3.1 Kiến Trúc Hệ Thống

Hệ thống được thiết kế dựa trên mô hình kiến trúc MVC (Model-View-Controller),

chia thành ba lớp chính để đảm bảo tính rõ ràng, dễ mở rộng và bảo trì:

1 Xử lý yêu cầu từ người dùng thông qua giao diện frontend.

2 Tương tác với cơ sở dữ liệu để thực hiện các thao tác thêm, sửa, xóa dữ liệu

3 Quản lý bảo mật như mã hóa thông tin và xác thực người dùng.3.1.3 Database (Model):

 Công nghệ: MongoDB để lưu trữ dữ liệu.

 Chức năng:

1 Lưu trữ và quản lý thông tin người dùng, món ăn, và đơn hàng

2 Cung cấp khả năng truy xuất dữ liệu nhanh chóng, đảm bảo tính toàn vẹn dữ liệu

MÔ HÌNH HOẠT ĐỘNG:

 Người dùng: Gửi yêu cầu từ trình duyệt (ví dụ: xem thực đơn, đặt món).

 Backend API: Nhận yêu cầu, xử lý logic và gửi phản hồi.

 Database: Truy xuất hoặc cập nhật thông tin, gửi dữ liệu qua API.

 Frontend: Hiển thị kết quả cho người dùng.

3.2 Thiết Kế Giao Diện Người Dùng (UI/UX)

Giao diện người dùng được thiết kế để đảm bảo tính trực quan, thân thiện và dễ sử

dụng Các thành phần chính bao gồm:

3.2.1 Trang chủ (Home):

 Hiển thị danh sách các món ăn

 Thanh tìm kiếm giúp người dùng tìm kiếm nhanh món ăn

3.2.2 Trang thực đơn (Menu):

 Hiển thị chi tiết thực đơn của từng nhà hàng, bao gồm:

1 Tên món ăn

2 Giá

3 Ảnh minh họa

3.2.3 Giỏ hàng (Cart):

 Hiển thị danh sách món ăn đã chọn, số lượng, giá tiền, và tổng số tiền

 Cung cấp tùy chọn xóa món hoặc thay đổi số lượng

3.2.4 Trang thanh toán (Checkout):

 Hỗ trợ nhập thông tin người nhận (tên, số điện thoại, địa chỉ)

 Tích hợp các phương thức thanh toán trực tuyến như thẻ tín dụng, ví điện tử

3.2.5 Trang quản lý (Admin/Restaurant):

 Admin: Quản lý thông tin người dùng, nhà hàng, và đơn hàng.

 Nhà hàng: Cập nhật thực đơn, xem và xử lý đơn hàng.

3.3 Cơ Sở Dữ Liệu

Cơ sở dữ liệu được thiết kế để hỗ trợ đầy đủ các chức năng của hệ thống đặt đồ ăn trực tuyến, bao gồm quản lý món ăn, thẻ món ăn, người dùng, và các mối quan hệ

giữa chúng Thiết kế này đảm bảo tính toàn vẹn dữ liệu, hiệu quả truy xuất, và khả năng mở rộng trong tương lai.

Mô Tả Các Bảng

1 BẢNG FOODS (MÓN ĂN)

Bảng này lưu trữ thông tin chi tiết về các món ăn được cung cấp trong hệ thống Các cột chính bao gồm:

 id: Mã định danh duy nhất cho mỗi món ăn

 name: Tên của món ăn

 cook_time: Thời gian chế biến món ăn, lưu dưới dạng chuỗi (ví dụ: "10-20 phút")

 price: Giá của món ăn, lưu dưới dạng số thập phân

 favorite: Cột boolean đánh dấu món ăn có được người dùng yêu thích hay không

 stars: Điểm đánh giá trung bình của món ăn, tính theo thang điểm từ 1 đến 5

 image_url: Đường dẫn đến hình ảnh món ăn

 origins: Lưu danh sách các quốc gia hoặc vùng xuất xứ của món ăn dưới dạng JSON

2 BẢNG TAGS (THẺ MÓN ĂN)

Bảng này lưu thông tin về các thẻ món ăn để phân loại chúng Các cột chính bao gồm:

 name: Tên thẻ, ví dụ như "FastFood", "Pizza", "Lunch"

 count: Số lượng món ăn được gắn với thẻ này

3 BẢNG FOODS_TAGS (LIÊN KẾT MÓN ĂN VÀ

 tag_name: Tham chiếu đến bảng Tags, đại diện cho thẻ món ăn.

4 BẢNG USERS (NGƯỜI DÙNG)

Bảng này lưu trữ thông tin về người dùng, bao gồm cả khách hàng và quản trị viên Các cột chính bao gồm:

 id: Mã định danh duy nhất cho mỗi người dùng

 name: Tên người dùng

 email: Địa chỉ email duy nhất của người dùng, dùng để đăng nhập

 password: Mật khẩu của người dùng, lưu dưới dạng đã mã hóa

 address: Địa chỉ của người dùng

 is_admin: Cột boolean đánh dấu người dùng có quyền quản trị hay không

Mối Quan Hệ Giữa Các Bảng

1.Foods và Tags:

1 Quan hệ nhiều-nhiều giữa món ăn và thẻ món ăn Một món ăn có thể

có nhiều thẻ (ví dụ: "FastFood", "Lunch"), và một thẻ có thể gắn với nhiều món ăn

2 Quan hệ này được quản lý thông qua bảng trung gian Foods_Tags

2.Users và Foods (Favorite):

1 Một người dùng có thể yêu thích nhiều món ăn Quan hệ này có thể được triển khai bằng cách thêm cột favorite trong bảng Foods hoặc tạo bảng trung gian nếu cần chi tiết hơn

4 Triển khai và công nghệ sử dụng

4.1 CÔNG CỤ VÀ NGÔN NGỮ LẬP TRÌNH

Trong quá trình triển khai hệ thống đặt đồ ăn trực tuyến, nhóm đã sử dụng các công nghệ hiện đại, đảm bảo hiệu suất cao, khả năng mở rộng và tương tác mượt mà giữa các thành phần Các công nghệ được sử dụng bao gồm:

4.1.1 Frontend (Giao diện người dùng):

1 React.js: Framework chính được sử dụng để xây dựng giao diện người

dùng React hỗ trợ kiến trúc component-based, giúp tái sử dụng mã nguồn và tối ưu hóa hiệu suất

2 React Router: Quản lý điều hướng giữa các trang, đảm bảo trải

nghiệm người dùng mượt mà

3 Axios: Thư viện để gửi các yêu cầu HTTP từ frontend đến backend.

4 HTML5 và CSS3: Cung cấp cấu trúc và kiểu dáng cho giao diện.

4.1.2 Backend (Xử lý logic ứng dụng):

1 Node.js: Nền tảng JavaScript phía server, giúp xử lý lượng lớn yêu cầu

đồng thời mà không làm giảm hiệu suất

2 Express.js: Framework nhẹ, giúp xây dựng API RESTful nhanh chóng

và hiệu quả

3 JSON Web Token (JWT): Được sử dụng để xác thực người dùng và

quản lý phiên đăng nhập

4.1.3 Cơ sở dữ liệu:

1 MongoDB: Hệ quản trị cơ sở dữ liệu NoSQL, linh hoạt và dễ dàng mở

rộng MongoDB được sử dụng để lưu trữ các thông tin về người dùng, món ăn, thẻ món ăn và đơn hàng

2 Mongoose: Thư viện ORM (Object-Relational Mapping) hỗ trợ thao

tác với MongoDB, giúp mô hình hóa dữ liệu và thực hiện các truy vấn phức tạp dễ dàng

4.1.4 Công cụ kiểm thử và quản lý:

1 Postman: Kiểm thử API RESTful để đảm bảo backend hoạt động

4.1.5 Triển khai ứng dụng:

1 Frontend: Triển khai trên Netlify để đảm bảo tốc độ tải trang nhanh

và khả năng mở rộng

2 Backend: Triển khai trên Heroku để cung cấp API cho frontend.

3 MongoDB Community: Cung cấp cơ sở dữ liệu MongoDB miễn phí

và mã nguồn mở để triển khai trên máy chủ cục bộ hoặc môi trường tự quản lý

4.2 QUÁ TRÌNH TRIỂN KHAI

Quá trình triển khai được thực hiện theo các bước chính sau:

4.2.1 Phân tích yêu cầu:

1 Thu thập và phân tích yêu cầu từ các nhóm người dùng (khách hàng, nhà hàng, quản trị viên)

2 Xây dựng danh sách các tính năng chính và phụ dựa trên yêu cầu đã phân tích

4.2.2 Thiết kế hệ thống:

1 Thiết kế giao diện người dùng (UI/UX) sử dụng Figma, tập trung vào tính trực quan và thân thiện với người dùng

2 Thiết kế cơ sở dữ liệu với MongoDB, định nghĩa các bảng dữ liệu như

Users, Foods, Tags, và Orders

3 Xây dựng API RESTful với các endpoint như:

1 /api/users: Quản lý người dùng

2 /api/foods: Quản lý món ăn

3 /api/orders: Quản lý đơn hàng

4.2.3 Phát triển hệ thống:

1 Frontend:

1 Xây dựng các trang chính như Trang chủ, Giỏ hàng, Trang thanh toán và Quản lý món ăn

2 Kết nối frontend với backend bằng Axios.

1 POST /api/users/login: Đăng nhập người dùng

2 POST /api/users/register: Đăng ký người dùng mới

3 GET /api/users/profile: Lấy thông tin cá nhân (yêu cầu JWT)

4.3.2 Foods (Món ăn):

1 GET /api/foods: Lấy danh sách món ăn

2 GET /api/foods/:id: Lấy chi tiết một món ăn

3 POST /api/foods: Thêm món ăn mới (quyền Admin)

4 PUT /api/foods/:id: Cập nhật món ăn (quyền Admin)

5 DELETE /api/foods/:id: Xóa món ăn (quyền Admin)

4.3.3 Orders (Đơn hàng):

1 POST /api/orders: Tạo đơn hàng mới

2 GET /api/orders/user/:id: Lấy danh sách đơn hàng của một người dùng

3 GET /api/orders/:id: Lấy chi tiết một đơn hàng.

5.Kết quả đạt được

5.1 CÁC CHỨC NĂNG ĐÃ HOÀN THIỆN

Trong quá trình phát triển và triển khai hệ thống, nhóm đã hoàn thành các chức năng cốt lõi, đảm bảo đáp ứng các yêu cầu đã đề ra Cụ thể:

5.1.1 Giao diện người dùng (Frontend):

1 Xây dựng các trang chính bao gồm:

1 Trang chủ: Hiển thị danh sách các món ăn nổi bật và thanh tìm

kiếm món ăn

2 Trang thực đơn: Hiển thị danh sách món ăn theo danh mục,

kèm hình ảnh, giá, và thông tin chi tiết

3 Giỏ hàng: Hiển thị các món ăn đã chọn, tổng giá trị đơn hàng

và nút thanh toán

4 Trang thanh toán: Hỗ trợ nhập thông tin người nhận, lựa chọn

phương thức thanh toán

5 Trang quản lý (Admin): Quản lý thông tin món ăn, người

dùng, và đơn hàng

5.1.2 Hệ thống API (Backend):

1 Cung cấp các endpoint RESTful hoạt động ổn định:

1 Quản lý người dùng: Đăng ký, đăng nhập, cập nhật thông tin cánhân

2 Quản lý món ăn: Lấy danh sách món ăn, thêm mới, cập nhật và xóa món ăn (dành cho Admin)

3 Quản lý đơn hàng: Tạo đơn hàng, theo dõi trạng thái đơn hàng

2 Sử dụng JWT (JSON Web Token) để bảo mật và xác thực người

dùng

5.1.3 Cơ sở dữ liệu (MongoDB Community):

1 Tạo và quản lý các collection:

1 Users: Lưu thông tin người dùng

2 Foods: Lưu trữ thông tin món ăn

3 Orders: Lưu thông tin về đơn hàng và trạng thái của chúng

4 Tags: Lưu thẻ phân loại món ăn

2 Sử dụng Mongoose để dễ dàng thao tác với dữ liệu trong MongoDB.5.1.4 Tính năng bảo mật:

1 Bảo mật thông tin người dùng: Mã hóa mật khẩu trước khi lưu trữ

trong cơ sở dữ liệu bằng thư viện bcrypt

2 Bảo mật API: Sử dụng middleware để xác thực các yêu cầu cần quyền

truy cập (dựa trên JWT)

5.1.5 Triển khai ứng dụng:

1 Backend: Triển khai trên môi trường cục bộ với MongoDB

Community, cung cấp môi trường ổn định để vận hành API

5.2 ƯU ĐIỂM NỔI BẬT

5.2.1 Hiệu suất cao:

1 Ứng dụng hoạt động nhanh nhờ sử dụng React.js cho giao diện và Node.js với Express cho backend

2 Cơ sở dữ liệu MongoDB Community đảm bảo tốc độ truy xuất dữ liệu nhanh và khả năng mở rộng linh hoạt

5.2.2 Tính thân thiện với người dùng:

1 Giao diện được thiết kế trực quan, dễ sử dụng, ngay cả với người dùng không quen thuộc với công nghệ

2 Hỗ trợ tìm kiếm món ăn, lọc theo danh mục và theo dõi trạng thái đơn hàng

5.2.3 Khả năng mở rộng:

1 Cấu trúc hệ thống được thiết kế linh hoạt, dễ dàng thêm mới các tính năng như gợi ý món ăn, đánh giá món ăn hoặc báo cáo doanh thu.5.2.4 Bảo mật:

1 Mã hóa dữ liệu nhạy cảm, xác thực người dùng chặt chẽ và hạn chế truy cập vào các API quản lý

1 Thời gian tải dữ liệu:

Khi danh sách món ăn hoặc đơn hàng quá lớn, thời gian tải có thể bị ảnh hưởng

2 Tích hợp thanh toán trực tuyến:

Chưa hỗ trợ các cổng thanh toán như PayPal, Stripe

3 Tính năng nâng cao:

Chưa có tính năng đánh giá và gợi ý món ăn cho người dùng dựa trên lịch sử mua hàng

6 Đánh giá và vấn đề gặp phải

6.1 ĐÁNH GIÁ TỔNG QUAN HỆ THỐNG

Hệ thống đặt đồ ăn trực tuyến được phát triển đã đáp ứng được phần lớn các yêu cầu ban đầu, bao gồm khả năng quản lý món ăn, người dùng, và đơn hàng Qua quá trình thử nghiệm và triển khai, nhóm đã có những đánh giá tổng quan sau:

6.1.1 Tính ổn định:

6.1.2 Trải nghiệm người dùng:

1 Giao diện thân thiện, dễ sử dụng với khách hàng và quản trị viên

2 Các chức năng như tìm kiếm món ăn, giỏ hàng và thanh toán được thiết kế trực quan, dễ hiểu

6.2 NHỮNG VẤN ĐỀ GẶP PHẢI

Mặc dù đạt được nhiều kết quả tích cực, nhóm đã gặp phải một số vấn đề trong quá trình phát triển và triển khai hệ thống, bao gồm:

6.2.1 Tích hợp cơ sở dữ liệu MongoDB Community:

1 Trong giai đoạn đầu, việc thiết kế và quản lý dữ liệu trên MongoDB gặp khó khăn do không quen thuộc với cấu trúc dữ liệu JSON

2 Một số vấn đề xảy ra khi truy vấn dữ liệu phức tạp, chẳng hạn như xử

lý dữ liệu lồng nhau (nested data)

6.2.2 Quản lý trạng thái trong React:

1 Khi xây dựng giao diện giỏ hàng và thanh toán, việc quản lý trạng thái phức tạp trong React đòi hỏi nhóm phải áp dụng thư viện Redux để duy trì tính nhất quán.

6.2.3 Hiệu suất tải dữ liệu:

1 Với danh sách món ăn lớn, thời gian tải trang thực đơn bị chậm nếu không tối ưu hóa truy vấn cơ sở dữ liệu

2 API đôi khi trả về lượng dữ liệu dư thừa, gây ảnh hưởng đến hiệu suất tổng thể

6.2.4 Tính năng thanh toán:

1 Do hạn chế thời gian, hệ thống chưa tích hợp được các cổng thanh toántrực tuyến như PayPal hoặc Stripe, dẫn đến việc thanh toán phải thực hiện ngoại tuyến

6.2.5 Khả năng kiểm thử:

1 Việc kiểm thử toàn bộ hệ thống gặp khó khăn do thiếu công cụ tự độnghóa kiểm thử Hầu hết các trường hợp đều được kiểm tra thủ công, dẫnđến mất nhiều thời gian

6.3 CÁC HƯỚNG GIẢI QUYẾT

Nhóm đã thực hiện một số giải pháp để khắc phục những vấn đề trên:

6.3.1 Tối ưu hóa cơ sở dữ liệu:

1 Sử dụng Mongoose Aggregation Framework để xử lý các truy vấn

phức tạp

2 Tạo các chỉ mục (Indexes) trên các trường được truy vấn thường xuyên, như name, tags để giảm thời gian truy vấn

6.3.3 Quản lý trạng thái: