thiết kế hệ thống eatclean sử dụng công nghệ reactjs và laravel

User bao gồm các chức năng về quản lý như quản lý combo, quản lý món ăn trong combo, quản lý đơn hàng, thu thập và phân tích dữ liệu.. Một yếu tố quan trọng của hệ thống Eatclean là khả

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

KHÓA LUẬN TỐT NGHIỆP

GVHD: THS TRƯƠNG QUANG PHÚC SVTH : CAO NHẬT KHANG

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

BỘ MÔN CÔNG NGHỆ KỸ THUẬT MÁY TÍNH

ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI:

TP.HCM, Tháng 6 năm 2023

THIẾT KẾ HỆ THỐNG EATCLEAN SỬ DỤNG CÔNG NGHỆ REACTJS VÀ LARAVEL

SVTH: CAO NHẬT KHANG MSSV: 19119098

KHÓA: 2019

NGÀNH: CÔNG NGHỆ KỸ THUẬT MÁY TÍNH GVHD: THS TRƯƠNG QUANG PHÚC

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

Ngày nhận đề tài: 21/02/2023 Ngày nộp đề tài: 26/06/2023

1 Tên đề tài: Thiết kế hệ thống Eatclean sử dụng công nghệ ReactJS và Laravel

2 Các số liệu, tài liệu ban đầu: Kiến thức cơ bản về các kiến trúc và hệ thống website

3 Nội dung thực hiện đề tài: Tìm hiểu về công nghệ ReactJS và Laravel, thư viện Axios để tương tác API, tiến hành viết use case, đặc tả, sơ đồ hoạt động và liên kết các cơ sở dữ liệu

4 Sản phẩm: Website Eatclean bao gồm hai hệ thống con là hệ thống quản trị và hệ thống khách hàng

TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên: Cao Nhật Khang MSSV: 19119098

Ngành: Công nghệ kỹ thuật Máy tính Lớp: 19119CL3A

Tên đề tài: Thiết kế hệ thống Eatclean sử dụng công nghệ ReactJS và Laravel

Họ và tên Giáo viên hướng dẫn: Ths Trương Quang Phúc NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

6 Điểm:……….(Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2023

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Cao Nhật Khang MSSV: 19119098

Ngành: Công nghệ kỹ thuật Máy tính Lớp: 19119CL3A

Tên đề tài: Thiết kết hệ thống Eatclean sử dụng công nghệ ReactJS và Laravel Họ và tên Giáo viên phản biện:

NHẬN XÉT 7 Về nội dung đề tài & khối lượng thực hiện:

8 Ưu điểm:

9 Khuyết điểm:

12 Điểm:……….(Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2023

Giáo viên phản biện

(Ký & ghi rõ họ tên)

LỜI CAM ĐOAN

Em xin cam đoan đây là hệ thống nghiên cứu dựa trên kiến thức tích lũy của riêng em, các số liệu và kết quả nghiên cứu trình bày trong báo cáo là trung thực và chưa từng được công bố trong bất kì một hệ thống nào khác

Tp Hồ Chí Minh, tháng 06 năm 2023

Sinh viên thực hiện

Cao Nhật Khang

i

LỜI CẢM ƠN

Lời nói đầu tiên, em xin gửi lời cảm ơn đến gia đình, người thân và bạn bè đã ở bên cạnh động viên, đưa ra những lời khuyên cũng như cung cấp những thông tin, tài liệu bổ ích cho em trong quá trình thực hiện đồ án

Em xin phép gửi lời cảm ơn chân thành nhất đến toàn bộ quý thầy cô của Trường Đại học Sư Phạm Kỹ Thuật TP HCM và đặc biệt là các thầy cô thuộc khoa Đào Tạo Chất Lượng Cao Nhờ vào sự giảng dạy tận tâm của các quý thầy cô mà sau quá trình học tập tại trường em đã tích lũy được rất nhiều kiến thức bổ ích và phát triển bản thân tốt hơn rất nhiều so với trước kia Và cũng nhờ những kiến thức nền tảng bổ ích đó mà em mới có đủ khả năng và có được sự tự tin để tham gia thực hiện đồ án tốt nghiệp này

Em cũng xin trân trọng gửi đến thầy Trương Quang Phúc lời cảm chân thành và sâu sắc nhất Cảm ơn thầy vì trong khoảng thời gian thực hiện đồ án tốt nghiệp thầy đã ở bên cạnh định hướng, giúp đỡ, tận tình chỉ bảo và chỉ ra những sai sót mà em mắc phải, để nhờ đó em có thể nhanh chóng sửa sai kịp thời và thực hiện được một đồ án hoàn chỉnh hơn Mặc dù mục tiêu của em là cố gắng hết sức mình để hoàn thành đồ án hoàn chỉnh nhất Tuy nhiên, vì năng lực vẫn có giới hạn nên vẫn không tránh được những sai sót, rất mong các thầy cô thông cảm và đưa ra những lời góp ý để em có thể ngày càng hoàn thiện tốt hơn

Em xin chân thành cảm ơn!

ii

TÓM TẮT

Hiện nay, thế giới đang trong thời kì công nghệ phát triển song song với đó là những rủi ro tiềm ẩn về sức khỏe Trong đó, Việt Nam là một trong những quốc gia mắc các bệnh liên quan đến béo phì và thiếu hụt chất dinh dưỡng Chế độ dinh dưỡng là một yếu tố vô cùng quan trọng quyết định sức khỏe của con người Đa số người dân hiện nay chỉ lo tập trung làm nhiều việc mà ăn uống qua loa, không lành mạnh sẽ sớm đối mặt với các nguy cơ về bệnh tật sau này

Đề tài “Thiết kế hệ thống Eatclean sử dụng công nghệ ReactJS và Laravel” được thực hiện nhằm xây dựng một hệ thống thương mại điện tử mang đến thông điệp về thực phẩm sạch, những nhận thức, thông tin về vấn đề chăm sóc sức khỏe toàn diện từ sâu bên trong cụ thể là lựa chọn chế độ ăn uống phù hợp với bản thân và tiện lợi

Ở đề tài này, hệ thống Eatclean sẽ được phân thành ba quyền chính là Admin, User và Customer User bao gồm các chức năng về quản lý như quản lý combo, quản lý món ăn trong combo, quản lý đơn hàng, thu thập và phân tích dữ liệu Admin có các chức năng tương tự User nhưng có quyền quản lý User như thêm mới, chỉnh sửa, tìm kiếm hoặc khóa tài khoản của User Về phía Customer có các chức năng như tính toán chỉ số TDEE để xác định lượng calories cần nạp hàng ngày dựa trên chỉ số cơ thể Từ đó chọn ra các combo phù hợp với mục tiêu của bản thân

Về quy trình đặt hàng bao gồm việc sử dụng công cụ TDEE để tính toán lượng calories cần nạp mỗi ngày Từ đó hệ thống sẽ gợi ý các combo phù hợp hoặc Customer có thể chọn combo từ thực đơn Ở mỗi combo sẽ có các món khác nhau, Customer tùy chọn món của combo miễn là đủ số lượng món combo quy định Sau khi chọn món xong thì hệ thống sẽ hiển thị hóa đơn tạm thời và Customer chọn khu vực giao hàng để hệ thống tính toán Cuối cùng đến bước thanh toán sẽ gồm hai phương thức là thanh toán bằng VNPAY hoặc COD Khi thanh toán thành công hệ thống sẽ gửi hóa đơn đến mail của Customer, nếu Customer là thành viên thì sẽ có một trang lịch sử đơn hàng để có thể theo dõi đơn hàng hiện tại hoặc các đơn hàng đã đặt

1.1 Giới thiệu đề tài 1

1.2 Mục tiêu nghiên cứu 2

1.3 Ý nghĩa đề tài 2

1.4 Phạm vi nghiên cứu 2

1.5 Phương pháp nghiên cứu 3

1.6 Yêu cầu chức năng 3

1.7 Yêu cầu phi chức năng 4

3.2.2.1 Use case quản lý combo món ăn 22

3.2.2.2 Use case quản lý món ăn trong combo 25

3.2.2.3 Use case quản lý đơn đặt hàng 28

3.2.2.4 Use case thống kê, phân tích doanh thu và đơn hàng 30

3.3.2.1 Chức năng quản lý combo món ăn 38

3.3.2.2 Chức năng quản lý món ăn trong combo 39

3.3.2.3 Chức năng quản lý đơn đặt hàng 40

3.3.2.4 Chức năng thống kê, phân tích doanh thu và đơn hàng 41

v

DANH MỤC CÁC TỪ VIẾT TẮT

COD: Cash On Delivery

CRUD: Create – Read – Update – Delete HTML: HyperText Markup Language API: Application Programming Interface MVC: Model – View – Controller

ORM: Object-Relational Mapping SPA: Single Page Application ORM: Object-Relational Mapping PROPS: Properties

DOM: Document Object Model UI: User Interface

JSON: JavaScript Object Notation TDEE: Total Daily Energy Expenditure

vi

DANH MỤC SƠ ĐỒ

Sơ đồ 3.1 Use case chức năng quản lý tài khoản 19

Sơ đồ 3.2 Use case chức năng quản lý combo món ăn 22

Sơ đồ 3.3 Use case chức năng quản lý món ăn trong combo 25

Sơ đồ 3.4 Use case chức năng quản lý đơn đặt hàng 28

Sơ đồ 3.5 Use case chức năng thống kê, phân tích doanh thu và đơn hàng 30

Sơ đồ 3.6 Use case chức năng tính toán chỉ số TDEE 32

Sơ đồ 3.7 Use case chức năng đặt hàng 33

Sơ đồ 3.8 Use case chức năng thành viên 35

Sơ đồ 3.9 Sơ đồ hoạt động quản lý tài khoản 37

Sơ đồ 3.10 Sơ đồ hoạt động quản lý combo 38

Sơ đồ 3.11 Sơ đồ hoạt động quản lý món ăn 39

Sơ đồ 3.12 Sơ đồ hoạt động quản lý đơn đặt hàng 40

Sơ đồ 3.13 Sơ đồ hoạt động chức năng thống kê phân tích doanh thu đơn hàng 41

Sơ đồ 3.14 Sơ đồ hoạt động chức năng tính toán chỉ số TDEE 42

Sơ đồ 3.15 Sơ đồ hoạt động chức năng đặt hàng 43

Sơ đồ 3.16 Sơ đồ hoạt động chức năng thành viên 44

Sơ đồ 3.17 Mô hình thực thể kết hợp 45

vii

DANH MỤC BẢNG

Bảng 3.1 Đặc tả use case chức năng quản lý tài khoản 21

Bảng 3.2 Đặc tả use case chức năng quản lý combo 24

Bảng 3.3 Đặc tả use case chức năng quản lý món ăn 27

Bảng 3.4 Đặc tả use case chức năng quản lý đơn đặt hàng 29

Bảng 3.5 Đặc tả use case chức năng thống kê, phân tích doanh thu và đơn hàng 31

Bảng 3.6 Đặc tả use case chức năng tính toán chỉ số TDEE 33

Bảng 3.7 Đặc tả use case chức năng đặt hàng 34

Bảng 3.8 Đặc tả use case chức năng thành viên 37

Hình 4.1 Giao diện trang quản lý tài khoản 46

Hình 4.2 Giao diện modal thêm tài khoản 47

Hình 4.3 Thông báo tài khoản tạo mới thành công 47

Hình 4.4 Giao diện modal chỉnh sửa thông tin tài khoản 48

Hình 4.5 Thông báo chỉnh sửa tài khoản thành công 48

Hình 4.6 Kết quả tìm kiếm tài khoản 49

Hình 4.7 Nhắc nhở xác nhận khóa tài khoản 49

Hình 4.8 Thông báo khóa tài khoản thành công 50

Hình 4.9 Giao diện trang quản lý combo 50

Hình 4.10 Giao diện modal thêm combo 51

Hình 4.11 Thông báo thêm combo thành công 51

Hình 4.12 Giao diện modal chỉnh sửa combo 52

Hình 4.13 Giao diện modal chỉnh sửa combo 52

Hình 4.14 Thông báo xác nhận xóa combo 53

Hình 4.15 Thông báo xóa combo thành công 53

Hình 4.16 Giao diện trang quản lý món ăn 54

Hình 4.17 Giao diện thêm món ăn vào trong combo 54

Hình 4.18 Thông báo thêm món ăn thành công 55

Hình 4.19 Biểu mẫu dữ liệu import món ăn 55

Hình 4.20 Giao diện các món ăn sau khi import thành công 56

Hình 4.21 Giao diện quản lý đơn đặt hàng 56

Hình 4.22 Giao diện cập nhật đơn đặt hàng 57

Hình 4.23 Giao diện thống kê và phân tích dữ liệu 58

Hình 4.24 Giao diện biểu đồ doanh thu 58

Hình 4.25 Giao diện biểu đồ tổng đơn hàng 59

Hình 4.26 Giao diện tính toán chỉ số Calories 59

Hình 4.27 Giao diện kết quả tính toán lượng Calories 60

Hình 4.28 Giao diện các combo có trong hệ thống 61

Hình 4.29 Giao diện chi tiết combo 61

Hình 4.30 Giao diện chọn món 62

Hình 4.31 Giao diện chọn khư vực giao hàng 62

ix

Hình 4.32 Giao diện thanh toán 63

Hình 4.33 Giao diện thanh toán thành công (COD) 63

Hình 4.34 Giao diện cổng thanh toán điện tử VNPAY 64

Hình 4.35 Giao diện nhập mã OTP để thanh toán 64

Hình 4.36 Giao diện thanh toán VNPAY thành công 65

Hình 4.37 Thông tin email đơn đặt hàng 65

Hình 4.38 Giao diện thông tin cá nhân 66

Hình 4.39 Giao diện lịch sử đơn đặt hàng 66

Hình 4.40 Giao diện thông báo xác nhận hủy đơn hàng 67

Hình 4.41 Giao diện đơn hàng đã hủy thành công 67

1

CHƯƠNG 1: TỔNG QUAN 1.1 Giới thiệu đề tài

Trong xã hội ngày nay, tình trạng sức khỏe của con người luôn được xem là một vấn đề cốt lõi mà chúng ta cần quan tâm và coi trọng hàng đầu Với tốc độ phát triển không ngừng nghỉ của công nghệ và kỹ thuật, cuộc sống hiện đại đã mang lại nhiều tiện nghi và tiện ích cho mỗi người chúng ta Tuy nhiên, điều này cũng đi kèm với những tác động xấu đến sức khỏe Chúng ta thường xem nhẹ tầm quan trọng của sức khỏe cho đến khi có những vấn về cơ thể Áp lực từ công việc, cuộc sống bận rộn và những yêu cầu ngày càng cao đã khiến cho đại đa số chúng ta bỏ qua việc chăm sóc sức khỏe và không quan tâm đến chế độ dinh dưỡng Số lượng người mắc những căn bệnh liên quan đến việc ăn uống thiếu khoa học như suy dinh dưỡng, thừa cân béo phì, suy nhược cơ thể ngày một tăng Có nhiều bệnh lý không chỉ ảnh hưởng trực tiếp đến sức khỏe của một người, mà còn có thể ảnh hưởng đến các thế hệ sau này

Với mục tiêu nâng cao chất lượng cuộc sống, giữ gìn sức khỏe và rèn luyện ngoại hình tốt từ bên trong, việc chăm sóc bản thân và cung cấp đầy đủ dinh dưỡng từ mỗi bữa ăn trở thành yếu tố quan trọng hàng đầu Nhận thức về nhu cầu thiết yếu này của đa số người tiêu dùng ngày nay, website Eatclean ra đời như một hệ thống chuyên cung cấp dịch vụ thực phẩm sạch và lành mạnh, giúp mọi người tiếp cận các món ăn đa dạng được chuẩn bị sẵn Các món ăn này không chỉ vừa ngon miệng, mà còn đươc thiết kế để đảm bảo cung cấp đầy đủ chất dinh dưỡng giúp cho người dùng không cần mất nhiều thời gian để nấu nướng

Eatclean không chỉ đơn thuần là một trang web, mà còn là một nền tảng phát triển dựa trên nhu cầu sức khỏe của khách hàng Eatclean tận dụng các hệ thống công nghệ hiện đại để mang lại trải nghiệm tốt nhất cho khách hàng Với một giao diện thân thiện và dễ sử dụng, Eatclean tạo điều kiện cho người dùng dễ dàng tìm hiểu và tham gia vào việc xây dựng một chế độ ăn lành mạnh phù hợp với nhu cầu cá nhân của mỗi người Bằng cách cung cấp cho người dùng công cụ tính toán TDEE TDEE là tổng năng lượng mà cơ thể tiêu thụ trong một ngày, bao gồm năng lượng cần thiết để duy trì các hoạt động hàng ngày, quá trình trao đổi chất và vận động từ đó giúp cho người dùng có thể điều chỉnh chế độ ăn một cách phù hợp Ngoài ra, Eatlean còn cung cấp một loạt các tùy chọn thực đơn và gói ăn phù hợp Các món ăn được lựa chọn, tính toán kỹ càng và đáp ứng độ tươi ngon, đảm bảo rằng chúng cung cấp đủ lượng đạm, tinh bột, chất béo, vitamin và khoáng chất cần thiết để duy trì sức khỏe một cách an toàn và khoa học

2

Hệ thống Eatclean tận dụng các công nghệ phổ biến như ReactJS và Laravel để đảm bảo hiệu suất cao và trải nghiệm người dùng được tốt nhất Với việc sử dụng một thư viện Front-end là ReactJS, hệ thống đem lại khả năng tương tác cao, giúp trang web phản hồi nhanh chóng Bên cạnh đó, việc sử dụng thêm framework Back-end Laravel giúp hệ thống có khả năng xử lý dữ liệu từ đơn giản đến phức tạp, quản lý tài nguyên và an toàn về bảo mật cũng như khả năng xử lý lỗi

1.2 Mục tiêu nghiên cứu

Khảo sát nhu cầu và ý tưởng của nhà kinh doanh về thực các món ăn sạch để tiếp cận khách hàng thông qua các phương tiện truyền thông đại chúng Tập trung vào việc hiểu rõ nhu cầu và mong muốn của nhà kinh doanh bao gồm việc tìm hiểu các yếu tố quan trọng mà khách hàng đang tìm kiếm trong dịch vụ thực phẩm sạch

Chọn ra các thao tác có thể chuyển đổi thành các tính năng trên hệ thống website để giúp cho công việc quản lý và vận hành trở nên đơn giản và tối ưu hơn

Nghiên cứu, tìm hiểu và chọn ra các kiến trúc và công nghệ phù hợp để xây dựng nên hệ thống ứng dụng

Xây dựng hoàn tất một hệ thống thương mại điện tử về thực phẩm sạch hỗ trợ người kinh doanh và khách hàng sử dụng hiệu quả

1.3 Ý nghĩa đề tài

Xây dựng và phát triển hệ thống Eatclean mang ý nghĩa vô cùng quan trọng và hữu ích cho nhà kinh doanh Đầu tiên, nó giúp tối ưu hóa hoạt động mua bán, tạo điều kiện thuận lợi và tiện lợi cho việc giao dịch và giao hàng đối với khách hàng Việc áp dụng công nghệ thông tin vào hoạt động kinh doanh giúp tiết kiệm thời gian và công sức, từ đó gia tăng hiệu quả và lợi nhuận

Một ý nghĩa quan trọng khác của dự án này là tích hợp và phân tích dữ liệu khách hàng Hệ thống sẽ thu thập thông tin về hành vi tiêu dùng của khách hàng, từ đó giúp nhà kinh doanh hiểu rõ hơn về nhu cầu và sở thích của khách hàng Phân tích dữ liệu này sẽ cung cấp những giá trị, giúp người kinh doanh đưa ra chiến lược kinh doanh phù hợp và tối ưu hóa các quyết định về sản phẩm, tiếp thị và phân phối Bên cạnh đó, việc xây dựng hệ thống Eatclean cũng hỗ trợ phủ sóng thông điệp "Ăn sạch - Ăn khoẻ" của người kinh doanh tới khách hàng Nhờ sự tiện lợi và dễ dàng tiếp cận thông qua website, người kinh doanh có thể tăng cường thông điệp về lợi ích của việc ăn uống lành mạnh và chất lượng cao Điều này góp phần thúc đẩy ý thức về sức khỏe và tạo ra sự lan tỏa của phong cách sống Eatclean trong cộng đồng

1.4 Phạm vi nghiên cứu

3

Ở đề tài này, sẽ triển khai xây dựng hoàn tất một hệ thống website sử dụng công nghệ ReactJS, nằm tạo ra trải nghiệm tốt nhất cho người dùng của hệ thống Eatclean Để xử lý thao tác quản lý và vận hành hệ thống Eatclean, sẽ sử dụng các quy trình đã được khảo sát và xây dựng API server, cung cấp các xử lý cho người dùng trên website bằng công nghệ Laravel

Hệ thống sẽ giải quyết các vấn đề trong việc quản lý và vận hành một nhà hàng như quản lý các combo, món ăn Qua đó, Eatclean dễ dàng cập nhật và đưa ra những món ăn, combo hấp dẫn và phù hợp đến với khách hàng

Ngoài việc quản lý menu, hệ thống cũng sẽ giải quyết các vấn đề về đặt hàng, cập nhật đơn đặt hàng Một yếu tố quan trọng của hệ thống Eatclean là khả năng thống kê và phân tích các dữ liệu từ đó nhìn nhận được xu hướng tiêu dùng và nắm bắt sở thích của khách hàng từ đó định hình được chiến lược kinh doanh

Ngoài ra, Eatclean còn mang lại lợi ích cho khách hàng bằng cách cung cấp một giao diện thân thiện và dễ sử dụng Khách hàng có thể chọn ra được những combo phù hợp với cơ thể một cách nhanh chóng và dễ dàng giúp tiết kiện một khoảng thời

gian

1.5 Phương pháp nghiên cứu

Dùng phương pháp nghiên cứu thông qua việc khảo sát từ người kinh doanh và khách hàng để kết hợp tạo nên hệ thống website dễ dàng tiếp cận và tạo hiệu quả tối đa khi sử dụng

Hành vi tiêu dùng thực tế của khách hàng sẽ thể hiện qua việc tìm kiếm, hành vi mua các sản phẩm bằng các trang mạng xã hội hay thương mại, đây là một nguồn dữ liệu lớn để người kinh doanh có thể đặt ra định hưởng xây dựng và phát triển website để tiếp cận đến khách hàng một cách tối ưu

Nghiên cứu các kiến trúc và công nghệ phù hợp để áp dụng Thiết kế, xây dựng ứng dụng, triển khai và cài đặt ứng dụng hệ thống API server

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

Trong hệ thống website này sẽ chủ yếu bao gồm bao gồm 3 đối tượng Admin, User và Customer cùng với các tính năng:

User:

- Thống kê và phân tích dữ liệu + Doanh thu

+ Đơn hàng

+ Thành viên mới đăng ký

+ Biểu đồ phân tích doanh thu và số lượng đơn hàng trong 12 tháng

- Quản lý combo

4 + Tạo combo món ăn

+ Chỉnh sửa thông tin combo + Tìm kiếm thông tin combo + Xóa combo

- Quản lý món ăn trong combo + Thêm món ăn vào trong combo + Nhập file Excel

+ Chỉnh sửa thông tin món ăn + Tìm kiếm món ăn

+ Xóa món ăn

- Quản lý đơn đặt hàng

+ Xem chi tiết đơn đặt hàng

+ Cập nhật trạng thái đơn đặt hàng

Admin: tương tự như User và có thêm chức năng quản lý User:

- Tạo tài khoản User

- Chỉnh sửa thông tin tài khoản User - Tìm kiếm User

- Khóa và mở khóa tài khoản User

Customer:

- Đăng ký và đăng nhập thành viên

- Tính toán chỉ số TDEE

- Đặt hàng chọn món ăn và chọn khu vực giao hàng

- Thanh toán bằng tiền mặt hoặc qua cổng thanh toán trực tuyến VNPAY

- Gửi email đơn hàng sau khi đã đặt hàng và thanh toán thành công

- Thành viên (xem và chỉnh sửa một số thông tin cá nhân, xem lịch sử đơn đặt hàng và hủy đơn hàng khi đơn hàng ở trạng thái đơn hàng mới)

1.7 Yêu cầu phi chức năng

Giao diện người dùng cần phải hài hòa, các thành phần, màu sắc và hình ảnh được sử dụng hợp lý nhằm thu hút người dùng sử dụng trang web.

Hệ thống ổn định và tối ưu giúp người dùng có một trải nghiệm mượt mà, không gặp sự cố nào đó khi sử dụng Đồng thời phải tối ưu hiệu suất để trang web có thể tải trang nhanh.

5

Trang web cần được thiết kế và phát triển để có khả năng mở rộng trong tương lai Nhu cầu con người ngày càng tăng vì vậy điều này giúp cho trang web có thể tích hợp tính năng một cách dễ dàng.

Dễ sử dụng và trải nghiệm người dùng tốt Giao diện người dùng phải thiết kế rõ ràng, dễ hiểu và sắp xếp logic một cách đơn giản và hợp lý Đồng thời, đảm bảo được trang web có thể tương thích tốt trên các thiết bị và trình duyệt khác nhau.

Cuối cùng là về tính bảo mật và an ninh thông tin cho người dùng Các biện pháp bảo mật giúp cho người dùng tránh được việc bị đánh cắp dữ liệu, các mối đe dọa bên ngoài Bao gồm việc sử dụng mã hóa dữ liệu, xác thực người dùng, …

1.8 Cấu trúc đồ án

Chương 1: Giới thiệu tổng quan

- Giới thiệu đề tài - Mục tiêu nghiên cứu - Ý nghĩa nghiên cứu - Phạm vi nghiên cứu - Yêu cầu chức năng - Yêu cầu phi chức năng

Chương 2: Tìm hiểu cơ sở lý thuyết

- Tìm hiểu về các kiến trúc hệ thống

- Tìm hiểu về các công nghệ phù hợp để sử dụng trong việc xây dựng ứng dụng

Chương 3: Thiết kế hệ thống

- Phân tích hệ thống và đưa ra đặc tả cho ứng dụng

- Đưa ra sự đồ hoạt động của từng chức năng

Chương 4: Triển khai ứng dụng

- Hướng dẫn sử dụng ứng dụng - Đánh giá hệ thống

Chương 5: Đưa ra kết luận và hướng phát triển của hệ thống

6

CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT 2.1 Kiến trúc hệ thống 2.1.1 Giới thiệu

Kiến trúc hệ thống là một phần quan trọng không thể thiếu trong thiết kế phần mềm Nó cung cấp một cái nhìn tổng quan về việc phát triển và quản lý một dự án phần mềm Kiến trúc hệ thống bao gồm các thành phần chính sau:

- Các thành phần cấu tạo hệ thống: Bao gồm ngôn ngữ lập trình, framework và thư viện được sử dụng trong quá trình phát triển hệ thống

- Luồng dữ liệu và quy trình: Xác định cách dữ liệu được xử lý, lưu trữ và truyền tải trong hệ thống Điều này bao gồm phân tích quy trình làm việc hiện tại và thiết kế quy trình mới để đạt được mục tiêu kinh doanh

- Ước tính số lượng người dùng, chi phí phát triển và duy trì hệ thống: Đánh giá và ước tính số lượng người dùng dự kiến sử dụng hệ thống, đồng thời xác định chi phí phát triển và duy trì hệ thống trong quá trình vận hành

2.1.2 Kiến trúc Front-Back

Kiến trúc Front-Back [3] (còn được gọi là kiến trúc Client-Server) là một kiểu kiến trúc quan trọng và phổ biến trong thiết kế hệ thống website Theo kiến trúc này, ứng dụng được chia thành hai phần độc lập bao gồm:

- Front-end: Đây là phần giao diện người dùng, được sử dụng để hiển thị nội dung và tương tác với người dùng Front-end thường được xây dựng bằng các ngôn ngữ và công nghệ HTML, CSS, JavaScript, thư viện ReactJS và các framework như VueJS, Angular Front-end cung cấp giao diện người dùng tương tác và có khả năng đáp ứng trên các thiết bị di động với kích thước màn hình khác nhau, giúp cung cấp trải nghiệm tốt cho người dùng

- Back-end: Đây là phần xử lý logic, truy xuất và lưu trữ dữ liệu cho end Back-end thường được xây dựng bằng các ngôn ngữ và framework như PHP, Laravel, Nodejs, Python, Ruby, và sử dụng một số cơ sở dữ liệu để lưu trữ thông tin dữ liệu Ngoài ra, phần Back-end cũng có trách nhiệm bảo mật dữ liệu và đảm bảo an toàn cho hệ thống khỏi các cuộc tấn công từ bên ngoài

Ví dụ trong một trang web bán hàng, nó có thể có các module như sản phẩm, khách hàng, đơn hàng Và mỗi module này có thể được tách thành một dự án riêng biệt, được gọi là microservice Các microservice trong kiến trúc microservice là độc lập với nhau, có thể sử dụng kiến trúc và công nghệ khác nhau, thậm chí có thể sử dụng cơ sở dữ liệu riêng biệt

Các microservice trong kiến trúc microservice liên kết với nhau thông qua một thành phần gọi là API gateway hoặc message queue

API gateway là một điểm cuối (endpoint) đơn nhất mà các client có thể giao tiếp để truy cập vào các microservice Nó đảm bảo sự liên lạc giữa các microservice và cung cấp một giao diện đơn giản cho client giao tiếp với toàn bộ hệ thống

Message queue là một hệ thống phân phối thông điệp cho phép các microservice gửi và nhận thông điệp qua một hàng đợi, đảm bảo tính đồng bộ và truyền thông hiệu quả giữa các microservice

Laravel là một web Back-end framework [4] được viết bằng ngôn ngữ PHP Cung cấp các tính năng phát triển như quản lý định tuyến, quản lý cơ sở dữ liệu, xác

8

thực người dùng So với các ngôn ngữ Back-end khác, Laravel có cấu trúc an toàn, dễ sử dụng, dễ bảo trì và hiệu suất cao

Hình 2.1 Logo Laravel

Một số đặc điểm của Laravel:

- Routing: Laravel có hệ thống routing mạnh mẽ, hỗ trợ các loại HTTP request như GET, POST, PUT, DELETE, …

- Hệ thống middleware: giúp cho các người phát triển hệ thống xử lý các yêu cầu trước khi qua xử lý bởi ứng dụng Đồng thời xử lý dữ liệu, xác thực người dùng và kiểm tra quyền truy cập.

- Sử dụng mô hình MVC (Model-View-Controller): phân chia ứng dụng thành các phần độc lập để dễ bảo trì và phát triển.

- Hỗ trợ unit test: kiểm thử các đoạn code từ đó dễ dàng phát hiện lỗi trước khi đưa ra thị trường sử dụng.

Để hiểu hơn về cách thức hoạt động của Laravel Các tính năng của Laravel được mô tả như sau:

Ở mỗi Migration sẽ bao gồm hai phương thức chính là up và down Trong phương thức up, người dùng có thể thêm bảng, cột và các thay đổi cấu trúc cơ sở dữ liệu Ngược lại, phương thức down được sử dụng để thực hiện rollback, tức là hoàn tác các thay đổi được thực hiện bởi phương thức up

Trước khi sử dụng Migration, người dùng cần cấu hình thông tin kết nối cơ sở dữ liệu trong file env sử dụng khi đang phát triển trên localhost và file /config/database.php (sử dụng khi triển khai trên môi trường sản phẩm)

Migration giúp cho việc quản lý cơ sở dữ liệu trở nên dễ dàng và linh hoạt hơn Người dùng có thể theo dõi và kiểm soát các thay đổi cấu trúc cơ sở dữ liệu theo

2.2.1.2 Seeding và Factory

Seeding và Factory là hai công cụ quan trọng trong Laravel được người dùng sử dụng để tạo dữ liệu mẫu và dữ liệu giả trong quá trình phát triển và kiểm thử hệ thống website Chúng giúp đảm bảo tính chính xác và hiệu suất của hệ thống, đồng thời tiết kiệm thời gian so với việc tạo dữ liệu bằm thủ công

Seeding cho phép người dùng tạo dữ liệu mẫu trong cơ sở dữ liệu Để tạo một file seeding, người dùng có thể sử dụng câu lệnh sau:

php artisan make:seeder SeederName

Trong đó, “SeederName” là tên của file seeding mà người dùng muốn tạo Sau khi thực hiện câu lệnh, Laravel sẽ tạo một file seeding mới trong thư mục database/seeders của dự án

File gốc của seeding là DatabaseSeeder.php, người dùng có thể tạo nhiều file seeding khác nhau nhưng phải gọi chúng trong hàm run() của file DatabaseSeeder.php

Để tiến hành chạy tất cả các file được gọi trong DatabaseSeeder.php và tạo dữ liệu, người dùng sử dụng câu lệnh:

php artisan db:seed

Trong những trường hợp cần tạo một lượng lớn dữ liệu giả, seeding trở nên không hiệu quả Thay vào đó, Laravel cung cấp Factory để người dùng có thể tạo số lượng lớn dữ liệu giả một cách dễ dàng

Để tạo một file Factory, người dùng có thể sử dụng câu lệnh:

php artisan make:factory FactoryName

Trong đó, “FactoryName” là tên của file factory mà người dùng muốn tạo Sau khi thực hiện câu lệnh, Laravel sẽ tạo mộ file factory mới trong thư mục database/factories của dự án

Laravel còn cung cấp các hàm như fake() giúp người dùng tạo dữ liệu giả với các định dạng phổ biến như số điện thoại, công ty, màu sắc, số ngẫu nhiên, email, tên người dùng, mật khẩu, địa chỉ, Sau khi tạo file Factory, người dùng có thể gọi nó trong hàm run() của file seeding để chạy

Sử dụng Seeding hay Factory trong Laravel đều giúp người dùng dễ dàng tạo dữ liệu mẫu và dữ liệu giả, đồng thời giúp kiểm thử và phát triển ứng dụng một cách

10

hiệu quả Tùy thuộc vào nhu cầu và mục tiêu mà người dùng chọn loại tạo dữ liệu giả phù hợp Các công cụ này không chỉ đảm bảo tính chính xác của ứng dụng mà còn giúp tiết kiệm thời gian và công sức trong quá trình phát triển

2.2.1.3 Mô hình MVC (Model-View-Controller)

Mô hình MVC là mô hình phổ biến được sử dụng trong Laravel để tổ chức và quản lý mã nguồn của ứng dụng Cách thức mà mô hình này hoạt động là người dùng gửi Request đến hệ thống và Routing sẽ định tuyến đến các Controller để xử lý Controller sẽ tương tác với Model để cập nhật dữ liệu và sau đó truyền dữ liệu và lệnh tới View hiển thị giao diện

a Routing

Routing trong Laravel giúp định tuyến các tuyến đường dựa trên tên thay vì đường dẫn Điều này làm cho việc hiểu và tiếp cận Routing trở nên dễ dàng Các file Routing được đặt trong folder routes

Laravel hỗ trợ hai dạng Routing chính là WEB và API (Application Programming Interface) Routing API trong Laravel thường được sử dụng để xử lý các yêu cầu từ phía Front-end và giao tiếp với phía Back-end thông qua việc truyền và nhận dữ liệu API routing cho phép xác định các endpoint và các phương thức HTTP tương ứng để xử lý các yêu cầu từ hệ thống ứng dụng

Các phương thức thường được sử dụng trong Routing để thực hiện các hoạt động với tài nguyên trên máy chủ như:

- GET: có thể truy vấn, lấy dữ liệu từ cơ sở dữ liệu và các tài nguyên khác trên server Thông thường GET được dùng để hiển thị chi tiết các tài nguyên

- POST: thường được dùng để gửi dữ liệu từ phía client lên server và tạo mới dữ liệu tài nguyên

- PUT, PATCH: với PUT sẽ cập nhật tài nguyên dựa trên dữ liệu mới Điểm khác biệt giữa hai phương thức này là ở PATCH chỉ cần gửi các dữ liệu được thay đổi, còn các trường dữ liệu không gửi thì sẽ không được cập nhật

- DELETE: được sử dụng để xóa tài nguyên trên server từ cơ sở dữ liệu Và cuối cùng là các cách sử dụng với từng phương thức Routing như sau: Route::get(), Route::post(), Route::put(), Route::patch() và Route:delete()

b Model

Model là một lớp dữ liệu, đại diện cho một bảng trong cơ sở dữ liệu có nhiệm vụ xử lý dữ liệu vào và ra từ cơ sở dữ liệu Để tạo một model, người dùng có thể sử dụng câu lệnh sau:

php artisan make:model ModelName

11

Trong đó, “ModelName” là tên của model muốn tạo Laravel sẽ tạo một file

model mới trong thư mục `app/Models` của dự án Ngoài ra, người dùng cần chú ý đến các khai báo sau khi sử dụng model:

- Khai báo bảng: protected $table = 'TableName' (trong đó “TableName” là tên bảng trong cơ sở dữ liệu)

- Các cột dữ liệu trong bảng (protected $fillable = ['column1', 'column2', ]) - Ngoài ra người dùng có thể định nghĩa mối quan hệ giữa các model (Relationship) bằng cách sử dụng Eloquent ORM (Object-Relational Mapping) ORM cho phép người dùng làm việc với cơ sở dữ liệu một cách dễ dàng bằng cách cung cấp một lớp trừ tượng hóa giữa cơ sở dữ liệu và ngôn ngữ lập trình Các mối quan hệ cơ bản có trong Laravel bao gồm:

- One-to-One: mối quan hệ này xảy ra khi mỗi bản ghi trong model thứ nhất chỉ có một bản ghi tương ứng trong model thứ hai và ngược lại Ví dụ một người dùng chỉ có một thông tin cá nhân và mỗi thông tin cá nhân chỉ thuộc về một người dùng

- One-to-Many: mối quan hệ này xảy ra khi mỗi bản ghi trong model thứ nhất có thể có nhiều bản ghi tương ứng trong model thứ hai, nhưng mỗi bản ghi trong model thứ hai chỉ thuộc về một bản ghi trong model thứ nhất Ví dụ như một người dùng có nhiều đơn hàng, nhưng mỗi đơn hàng chỉ thuộc về một người dùng

- Many-to-Many: mốn quan hệ này xảy ra khi mỗi bản ghi trong model thứ nhất có thể có nhiều bản ghi tương ứng trong model thứ hai và ngược lại Ví dụ như một người dùng có nhiều quyền thì một quyền cũng có thể có nhiều người dùng

c View

View là một phần quan trọng trong model MVC View có thể hiểu là phần giao diện người dùng của ứng dụng, có thể tương tác và hiển thị dữ liệu View là các file có đuôi `.blade.php` và thường được đặt trong thư mục `resources/views` Blade cho phép người dùng viết mã HTML và sử dụng các biến, các câu lệnh điều kiện và vòng lặp để tạo các template

View được sử dụng để hiển thị các giao diện đã được xử lý trước đó hoặc dữ liệu đã được truy vấn từ Model

Những đặc điểm quan trọng của View có thể kể đến như:

- Truyền dữ liệu vào với các phương thức như “with”, “compact”, “view”, … Dữ liệu có nhiều dạng, có thể là mảng hoặc là một đối tượng

- Laravel hỗ trợ khái niệm layout và partial Người dùng có thể định nghĩa các layout có thể sử dụng chung như header hoặc footer Giúp tác sử dụng hiệu quả HTML và tránh lặp lại code

12

d Controller

Controller là một phần quan trọng không thể thiếu của dự án, đây là nơi xử lý các logic phức tạp của ứng dụng Đầu tiên, Controller nhận Request từ người dùng và gửi lệnh đến Model để cập nhật dữ liệu, sau đó truyền dữ liệu và lệnh tới View để hiển thị giao diện cho người dùng

Để tạo một Controller, người dùng có thể sử dụng câu lệnh sau:

php artisan make:controller NameController

Trong đó, “NameController” là tên của Controller muốn tạo Laravel sẽ tạo một file Controller mới trong thư mục `app/Http/Controllers` của dự án

Để sử dụng Controller, người dùng chỉ cần gọi trong các Route để định tuyến đến các phương thức xử lý tương ứng Tùy thuộc vào mục đích và nhu cầu mà có thể gọi trong Route Web hoặc Api

Một số đặc điểm quan trọng trong Controller:

- Dữ liệu trả về View hoặc dữ liệu JSON Controller có thể trả về View để hiển thị lên giao diện người dùng hoặc trả về dạng JSON với các phương thức như ‘response()’ hoặc “json()”

- Có thể gắn Middleware vào Controller để thực hiện xử lý các hành động trước hoặc sau Middleware cho phép người dùng thực hện các xử lý trung gian Bằng cách này, người dùng có thể áp dụng các bước xác thực, kiểm tra quyền truy cập, xử lý ghi log hoặc các tác vụ khác trước khi đến Controller

- Khi tương tác với cơ sở dữ liệu, Controller có thể lấy, tạo mới, cập nhật hoặc xóa dữ liệu từ cơ sở dữ liệu thông qua Model Laravel cung cấp các phương thức thuận tiện trong Model để thực hiện các hoạt động này một cách dễ dàng

Tóm lại mô hình MVC trong Laravel là một mô hình quan trọng và mạnh mẽ Giúp tổ chức mã nguồn ứng dụng một cách rõ ràng và dễ quản lý Nó tạo ra sự phân tách giữa logic xử lý dữ liệu, giao diện hiển thị và định tuyến Điều này giúp người dùng xây dựng và duy trì ứng dụng một cách dễ dàng và có thể mở rộng hơn

2.2.1.4 Design Pattern

Design Pattern [6] [7] là phương pháp thiết kế dự án giải quyết vấn đề lặp lại mã nguồn Giúp cho việc phát triển dự án mạnh mẽ hơn, tăng tính mở rộng và lưu trữ mã nguồn hợp lý Ở dự án này sử dụng một trong những design pattern phổ biến nhất hiện nay là mô hình Repository

Repository là phương pháp sử dụng lớp trung gian để truy cập từ cơ sở dữ liệu hay nói cách khác Repository đóng vai trò là một “cầu nối” giữa Controller và Model Các xử lý liên quan đến Model sẽ do Repository đảm nhiệm Controller chỉ việc sử dụng các phương thức của Repository thay vì trực tiếp tương tác với Model

13

Những lợi ích mà Repository mang đến như:

- Tái sử dụng mã nguồn, có thể sử dụng các phương thức Repository trong các Controller khác nhau hoặc các phần khác của ứng dụng

- Kiểm thử dễ dàng, tạo các bộ kiểm thử độc lập với các phương thức Repository mà không cần tạo kết nối thực tế với cơ sở dữ liệu

- Xử lý các logic phức tạp để gọi vào Controller - Giảm sự phụ thuộc vào cơ sở dữ liệu của Controller

Ngoài các lợi ích mang lại thì Repository cũng có một số nhược điểm cần lưu ý:

- Việc tạo ra các lớp Repository có thể làm tăng độ phức tạp của mã nguồn, yêu cầu sự hiểu biết về cấu trúc và các quy tắc của Repository Pattern

- Khó khăn trong việc quản lý các mối quan hệ giữa các đối tượng Có thể dẫn đến việc phát triển nhiều phương thức tùy chỉnh và logic phức tạp để xử lý các truy vấn

- Repository cung cấp phương thức tiêu chuẩn để thực hiện các hoạt động cơ bản trên cơ sở dữ liệu Tuy nhiên, khi yêu cầu truy vấn tùy chỉnh thì trở nên phức tạp hơn

- Sessions: Laravel hỗ trợ việc quản lý phiên làm việc (sessions), cho phép bạn lưu trữ thông tin người dùng và duy trì trạng thái đăng nhập Điều này rất hữu ích để xác định người dùng trong các yêu cầu và giữ cho phiên làm việc của họ liên tục trên các trang khác nhau

- Email: Laravel cung cấp tích hợp sẵn cho các tính năng liên quan đến email Bạn có thể dễ dàng gửi email từ ứng dụng của mình và thực hiện các tác vụ như gửi xác minh email, thông báo cho người dùng về các hoạt động quan trọng, hoặc gửi các tệp đính kèm

- Middleware: Middleware là một tính năng mạnh mẽ trong Laravel cho phép bạn xử lý các yêu cầu trước khi chúng đến được các tác vụ xử lý chính Middleware giúp kiểm soát quyền truy cập, xác thực người dùng và thực hiện các xử lý chung trước khi yêu cầu được xử lý Ví dụ, bạn có thể sử dụng middleware kiểm tra xem

Hình 2.2 Logo React

ReactJS được xây dựng bởi các component Component là một phần của giao diện người dùng, hiển thị UI và xử lý sự kiện Điều này giúp cho người dùng có thể dễ dàng quản lý từng thành phần đơn lẻ và đặc biệt có thể tái sử dụng lại Để dễ hình

dung hơn, sau đây là những đặc điểm và tính năng mạnh mẽ của ReactJS

2.2.2.1 Component

Như đã đề cập ở trên, ReactJS được xây dựng bởi các component Mỗi component đại diện cho một phần nhỏ của giao diện và có các trạng thái riêng (state) Các component có thể tương tác với nhau, dữ liệu sẽ được truyền từ component cha sang component con thông qua props

Ở phần này có đề cập đến 2 khái niệm là “props” và “state”, vậy hai thành phần đó là gì và hoạt động như thế nào

- Props (properties) là các đối tượng chứa thông tin được truyền từ component cha đến component con Giúp cho việc truyền dữ liệu giữa các thành phần trở nên linh hoạt và có thể tái sử dụng Để sử dụng props, các component ReactJS sẽ nhận đối số props trong hàm render của mình

- State được hiểu là trạng thái của một component có thể thay đổi trong quá trình ứng dụng thực thi, chỉ được sử dụng và quản lý bởi một component nhất định Khi state thay đổi, ReactJS sẽ tự động render lại giao diện

2.2.2.2 Virtual DOM

Để hiểu về Virtual DOM thì đầu tiên cần phải hiểu về DOM DOM (Document Object Model) là một cấu trúc cây được tạo ra từ các phần tử HTML/XML của trang web, DOM thể hiện cấu trúc và tương tác giữa các phần tử Khi có sự thay đổi trọng state của web, trình duyệt cập nhật DOM tương ứng để hiển thị thay đổi điều này cũng có thể làm giảm hiệu suất của web Sau mỗi lần DOM cập nhật, trình duyệt phải tìm kiếm và tính toán và cập nhật giao diện

15

Vì vậy, ReactJS sử dụng cơ chế Virtual DOM để tăng hiệu suất cũng như là tương tác người dùng Virtual Dom là một bản sao của DOM Khi có sự thay đổi về state, ReactJS so sánh Virtual DOM với DOM và chỉ cập nhật những phần tử thay đổi duy nhất Điều này tốt cho việc tối ưu hiệu suất của ứng dụng web

2.2.2.3 One-Way Binding

One-Way Binding là một mô hình ràng buộc dữ liệu trong ReactJS, dữ liệu chỉ được truyền từ component cha đến component con thông qua props Component con không thể thay đổi dữ liệu component cha trực tiếp mà chỉ có thể sử dụng và hiển thị Điều này giúp cho ReactJS có tính nhất quán, dữ liệu chỉ đi theo một hướng duy nhất Khi dữ liệu thay đổi ReactJS chỉ cập nhật lại các component tương ứng, không cập nhật toàn bộ giao diện vì vậy làm cho hiệu suất chương trình tốt

Ngoài ra, mô hình này còn giúp cho việc kiểm thử trở nên dễ dàng hơn Vì dữ liệu chỉ di chuyển theo một hướng từ component cha đến component con, việc xác định nguồn gốc dữ liệu và theo dõi quá trình truyền dữ liệu

2.2.2.4 React Hook

React Hook là một tính năng quan trọng trong ReactJS, cho phép sử dụng state, lifecycle, context và các tính năng khác mà không cần sử dụng các Class Components Với những người mới bắt đầu học React, Hook là một lựa chọn tốt Hook giúp giảm sự phức tạp mà Class Components mang lại và mang đến một số lợi ích như sau:

- Mã nguồn ngắn gọn, dễ hiểu và dễ kiểm tra: Hook giúp viết mã nguồn trở nên ngắn gọn và dễ hiểu hơn, giúp tăng tính khả thi của việc kiểm tra và bảo trì mã nguồn

- Quản lý state dễ dàng với useState: Hook cung cấp useState để quản lý trạng thái của thành phần Bằng cách sử dụng useState, người dùng có thể dễ dàng khởi tạo và cập nhật state trong một thành phần hàm

- Lifecycle với useEffect: Hook cung cấp useEffect để thực hiện các tác vụ liên quan đến lifecycle của thành phần Với useEffect có thể khởi tạo, cập nhật và huỷ bỏ các tác vụ như gọi API, đăng ký sự kiện, và quản lý bộ nhớ trong thành phần

Ngoài ra, còn có một số Hook khác được sử dụng phổ biến trong React: - useContext: Hook này cho phép truy cập và sử dụng context trong thành phần hàm, giúp chia sẻ dữ liệu giữa các thành phần con một cách dễ dàng

- useRef: Hook useRef cho phép lưu trữ và truy cập vào các giá trị thay đổi trong suốt vòng đời của thành phần Nó hữu ích khi bạn cần lưu trữ một giá trị mà không muốn gây ra việc render lại lại khi giá trị thay đổi

16

Việc sử dụng React Hook giúp viết mã ngắn gọn, dễ hiểu và dễ kiểm tra Nó cung cấp các phương pháp tiện lợi để quản lý trạng thái và lifecycle của thành phần, đồng thời cho phép truy cập vào các tính năng quan trọng khác của ReactJS

2.2.2.5 Tương tác với API

Trong ReactJS, Axios và Fetch là hai thư viện phổ biến được sử dụng để tương tác với API, gửi các yêu cầu HTTP và nhận dữ liệu từ server

Axios là một thư viện HTTP client linh hoạt và dễ sử dụng Nó cung cấp các phương thức như get(), post(), put(), delete() để gửi các yêu cầu HTTP đến server Với Axios có thể dễ dàng truyền các thông số như url, dữ liệu và các cấu hình khác Khi gửi yêu cầu có thể sử dụng các phương thức then() và catch() để nhận dữ liệu trả về từ server và xử lý các lỗi xảy ra trong quá trình gửi yêu cầu

Với Fetch, đây là một API chuẩn của trình duyệt nên không cần phải cài đặt thư viện bổ sung như Axios Cú pháp của Fetch cũng khá đơn giản, bạn chỉ cần gọi fetch() và truyền url vào Fetch trả về một Promise, giúp xử lý dữ liệu trả về từ server Có thể sử dụng phương thức then() để nhận dữ liệu và xử lý nó

Nhìn chung, cả Axios và Fetch đều hỗ trợ các phương thức HTTP như GET, POST, PUT và DELETE, cho phép gửi các yêu cầu đến server Cả hai cũng hỗ trợ việc truyền tham số như url, dữ liệu và cấu hình yêu cầu Tuy nhiên, Axios cung cấp một cú pháp dễ sử dụng hơn với các phương thức get(), post(), put(), delete(), trong khi Fetch yêu cầu bạn gọi phương thức fetch() và xử lý dữ liệu trả về thông qua Promise

2.2.2.6 Redux

Redux là một thư viện quản lý trạng thái của ReactJS và các framework Javascript khác, giúp cho việc chia sẻ dữ liệu giữa các component với nhau dễ dàng và hiệu quả

Redux hoạt động dựa trên các nguyên tắc:

- State is Read-Only: trạng thái không được thay đổi trực tiếp Redux khuyến khích việc sử dụng pure functions là reducers để xử lý các thay đổi của trạng thái

- Single Source of Truth: trạng thái của toàn bộ component được lữu trữ trong một cây trạng thái duy nhất “store” Điều này có nghĩa là mọi component trong ứng dụng đều truy cập vào trạng thái thông qua store Giúp cho ứng dụng được đồng bộ

- Data Flow is Unidirectional: dữ liệu trong Redux sẽ được chảy một chiều từ component cha đến các component con Khi có sự thay đổi trạng thái, Redux sẽ cập nhật store và thông báo cho các component liên quan

17

2.2.3 MySQL

MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở với tốc độ cao, dễ sử dụng và hoạt động trên nhiều nền tảng khác nhau MySQL là sản phẩm công nghệ của tập đoàn Oracle và được sử dụng rộng rãi đến hiện nay

Hình 2.3 Logo MySQL

Một số tính năng của MySQL:

- Truy xuất cơ sở dữ liệu bằng ngôn ngữ SQL [5] và hỗ trợ các câu lệnh chức năng của SQL Người dùng có thể sử dụng các câu lệnh SQL để tạo, truy vấn, cập nhật và xóa dữ liệu trong MySQL

- Độ tin cậy cao, MySQL cung cấp các công cụ sao lưu, phục hồi dữ liệu và kiểm soát truy cập từ đó giúp bảo mật được tốt hơn Ngoài ra, MySQL cũng hỗ trợ kiểm soát truy cập, giúp người quản trị có thể quản lý quyền truy cập của người dùng và đảm bảo tính bảo mật của dữ liệu

- MySQL cho phép lưu trữ dữ liệu với nhiều định dạng khác nhau như text, number, date và binary Giúp cho người dùng lưu trữ và xử lý các loại dữ liệu khác nhau

- MySQL hoạt động đa nền tảng như windows, linux, macOs và rất nhiều nền tảng khác Điều này giúp cho việc triển khai cơ sở dữ liệu hiệu quả hơn

- Hiệu suất tốt tối ưu hóa xử lý trong các môi trường big data, MySQL sử dụng các thuật toán hiệu quả để mang lại hiệu suất cao nhất cho người dùng Và những ưu điểm MySQL như:

- MySQL có giao diện thân thiện, giúp cho người mới dễ dàng sử dụng và triển khai

- Hỗ trợ đa ngôn ngữ như PHP, Python, Java, …

- Phát triển hệ thống web tốt, phù hợp với các hệ thống web thương mại điện tử, mạng xã hội, hoặc các trang quản lý dữ liệu, …

18

CHƯƠNG 3:

PHÂN TÍCH VÀ THIẾT KẾ 3.1 Quy trình hoạt động

Hệ thống website Eatclean cung cấp một tài khoản Admin cho nhà kinh doanh, giúp họ quản lý các tài khoản User Với tài khoản Admin, nhà kinh doanh có quyền tạo mới, chỉnh sửa và khóa tài khoản và thực hiện các chức năng tương tự User

Các tài khoản User có thể đăng nhập vào hệ thống để sử dụng các dịch vụ liên quan đến quản lý combo, quản lý món ăn trong combo, quản lý đơn hàng và xem các thống kê liên quan và phân tích Các chức năng User bao gồm quản lý combo, quản lý món ăn trong combo, quản lý đơn đặt hàng, các thống kê liên quan đến đơn hàng như số lượng đơn hàng, doanh thu, phân tích doanh thu và đơn hàng theo mỗi tháng Sau khi hệ thống đã có một quy trình quản lý chặt chẽ, website sẽ được đưa đến tay Customer Customer có thể sử dụng tính năng tính TDEE để tính toán lượng calories in để biết cơ thể cần nạp những chất dinh dưỡng như thế nào, từ đó dễ dàng đạt được mục tiêu của mình, bất kể là tăng cân, giữ cân hoặc giảm cân

Sau khi có thông tin về các chỉ số của mình, Customer có thể xem và lựa chọn các combo phù hợp với nhu cầu cá nhân Quá trình đặt hàng và thanh toán được thực hiện dễ dàng qua ba bước:

Bước 1: Chọn món ăn trong combo

- Customer lựa chọn số lượng các món ăn quy định trong combo Mỗi combo thường có nhiều món, Eatclean đã tính toán và cân đối chúng để tạo ra một combo hoàn hảo nhất có thể, đảm bảo lượng calories phù hợp

Bước 2: Chọn khu vực giao hàng

- Customer chọn khu vực muốn nhận hàng để tính toán giá trị tổng đơn hàng Các khu vực khác nhau có thể có mức phí giao hàng khác nhau Bước 3: Nhập thông tin giao hàng và thanh toán

- Customer cung cấp thông tin giao hàng và lựa chọn phương thức thanh toán Eatclean cung cấp hai phương thức thanh toán là COD (thanh toán khi nhận hàng) và VNPAY (thanh toán trực tuyến)

Sau khi thanh toán hoàn tất, hệ thống sẽ gửi email xác nhận thông tin về đơn đặt hàng đến Customer

Đối với những Customer đã là thành viên, họ có thêm tính năng quản lý đơn hàng Thành viên có thể xem lịch sử các đơn hàng đã đặt, các đơn hàng hiện tại và có thể hủy đơn hàng với điều điện đơn hàng phải là đơn hàng mới

19

Qua quy trình trên, có thể thấy hệ thống Eatclean cung cấp một trải nghiệm thuận tiện và dễ dàng cho Admin, User và Customer, giúp họ quản lý combo, món ăn, đơn hàng và đạt được mục tiêu dinh dưỡng của mình một cách hiệu quả

3.2 Mô hình use case và đặc tả 3.2.1 Admin

Use case quản lý tài khoản người dùng

Sơ đồ 3.1 Use case chức năng quản lý tài khoản

20

Basic Course of Events

1 Admin đăng nhập vào hệ thống trang quản trị

2 Hệ thống xác thực thông tin đăng nhập và hiển thị trang quản trị bao gồm những tính năng mà actor có thể sử dụng

3 Admin chọn chức năng quản lý người dùng để thực hiện các tác vụ liên quan đến quản lý tài khoản người dùng

4 Hệ thống hiển thị trang quản lý người dùng bao gồm danh sách tài khoản, các tính năng về CRUD và tìm kiếm thông tin tài khoản 5 Admin chọn chức năng

thêm tài khoản người dùng mới

6 Hệ thống hiển thị popup thêm tài khoản và thực hiện thêm tài khoản theo yêu cầu người dùng 7 Admin chọn chức năng

khóa hoặc mở khóa tài khoản người dùng cụ thể

8 Hệ thống hiển thị thông báo xác nhận khóa hoặc mở khóa người dùng trước khi thực hiện và sau đó thực hiện yêu cầu

9 Admin chọn chức năng chỉnh sửa thông tin của một tài khoản cụ thể

21

10 Hệ thống hiển thị popup chỉnh sửa thông tin tài khoản và thực hiện theo yêu cầu người dùng 11 Admin nhập các từ khóa

để tìm kiếm thông tin tài khoản theo tên và email

12 Hệ thống hiển thị những kết quả tìm được theo từ khóa mà người dùng nhập

Post conditions Các thông tin của tài khoản đã được lưu vào cơ sở dữ liệu

Bảng 3.1 Đặc tả use case chức năng quản lý tài khoản

Ngoài những chức năng quản lý trên, Admin còn có thể thực hiện các chức năng quản lý tương tự User như quản lý combo, quản lý món ăn trong combo, quản lý đơn đặt hàng, xem được trang thống kê và phân tích các dữ liệu Tóm lại, Admin có quyền hạn cao hơn User và bao quát User

22

3.2.2 User

3.2.2.1 Use case quản lý combo món ăn

Sơ đồ 3.2 Use case chức năng quản lý combo món ăn

Basic Course of Events

1 User đăng nhập vào hệ thống trang quản trị

2 Hệ thống xác thực thông tin đăng nhập và hiển thị trang quản

23

trị bao gồm những tính năng mà actor có thể sử dụng

3 User chọn chức năng quản lý combo trong trang quản trị

4 Hệ thống hiển thị trang quản lý combo cho phép User tạo mới, chỉnh sửa, tìm kiếm các thông tin và xóa combo

5 User chọn chức năng tạo mới combo món ăn

6 Hệ thống hiển thị popup tạo combo món ăn và thực hiện theo yêu cầu người dùng

7 User nhập thông tin combo món ăn như: tên, mô tả, giá, hình ảnh, số món trong combo, chỉ số calories và lưu ý (không được trùng với combo có sẵn)

8 Hệ thống kiểm tra, lưu thông tin combo vào cơ sở dữ liệu và hiển thị thông báo tạo thành công

9 User chọn một combo cụ thể cần chỉnh sửa từ danh sách các combo có trong hệ thống

10 Hệ thống hiển thị pop chỉnh sửa các thông tin combo

11 User có thể chỉnh sửa một số thông tin combo về mô tả,

24 giá, số món, chỉ số calories và các thông tin chi tiết

12 Hệ thống lưu thông tin combo chỉnh sửa vào trong cơ sở dữ liệu và hiển thị thông báo thành công

13 User nhập từ khóa tìm kiếm theo tên của combo và nhấn nút nhấn tìm kiếm

14 Hệ thống tìm kiếm trong cơ sở dữ liệu các combo theo từ khóa mà người dùng đã nhập và hiển thị kết quả lên màn hình 15 User chọn một combo cụ

thể cần xóa từ danh sách

16 Hệ thống hiển thị thông báo xác nhận xóa và xóa combo theo yêu cầu khỏi hệ thống

Post conditions Các thông tin của combo món ăn đã được lưu vào cơ sở dữ liệu

Bảng 3.2 Đặc tả use case chức năng quản lý combo

25

3.2.2.2 Use case quản lý món ăn trong combo

Sơ đồ 3.3 Use case chức năng quản lý món ăn trong combo

Basic Course of Events

1 User đăng nhập vào hệ thống trang quản trị