Đồ Ánkhóa luận tốt nghiệp tên Đề tài thiết kế website Đặt Đồ Ăn online

Mục đích và ý nghĩa 2.1 Mục Đích - Người dùng có thể dễ dàng đặt món ăn yêu thích từ nhà hàng yêu thích chỉ với vài cú click chuột và tiết kiệm thời gian phải đến trực tiếp cửa hàng để l

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

ĐỒ ÁN/KHÓA LUẬN TỐT NGHIỆP

TÊN ĐỀ TÀI: THIẾT KẾ WEBSITE ĐẶT ĐỒ ĂN ONLINE

Giảng viên hướng dẫn: Ts Nông Thị Hoa Sinh viên thực hiện: Nguyễn Quang Sáng Ngày sinh: 11-11-2002

Lớp: DCCNTT11.10.6 Ngành: Công Nghệ Thông Tin Khoa: Công Nghệ Thông Tin Khóa: 11

Mã sinh viên: 20201531

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

LỜI CAM ĐOAN

Tôi xin cam đoan rằng đồ án/khoá luận tốt nghiệp với đề tài thiết kế website đặt đồ ăn online là nghiên cứu độc lập của tôi Đồng thời những số liệu được cung cấp từ báo cáo đều là kết quả nghiên cứu hoàn toàn trung thực, không sao chép từ bất kì một công trình nghiên cứu khác nào.

Bắc Ninh, ngày Tháng 06 năm 2024

Sinh viên

MỤC LỤC

LỜI MỞ ĐẦU 8

1 Lí do chọn đề tài 8

2 Mục đích và ý nghĩa 8

2.1 Mục Đích 8

2.2 Ý nghĩa 8

3 Đối tượng nghiên cứu 9

4 Phạm vi nghiên cứu 9

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 10

1.1 Phương pháp phân tích thiết kế 10

1.1.1 Phân tích theo hướng đối tượng 10

1.1.2 Các loại biểu đồ trong phân tích thiết kế hướng đối tượng 11

1.2 Các công cụ công nghệ để xây dựng chương trình 13

1.2.1 Công cụ lập trình Visual Code 13

1.2.2 Phần mềm Xampp 17

1.2.3 Ngôn ngữ PHP 19

1.2.4 Ngôn ngữ Javascrip 21

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

2.1 Khảo sát bài toán 24

2.1.1 Khảo sát 24

2.1.2 Mô tả bài toán 31

2.2 Phân tích và thiết kế hệ thống 33

2.2.1 Yêu cầu chức năng 33

2.2.2 Yêu cầu phi chức năng 33

2.3 Biểu đồ USE-CASE 35

2.3.1 Biểu đồ tổng quát 35

2.3.2 Biểu đồ use-case phân rã 37

2.3.2.1 Biểu đồ use-case"Đăng ký" 37

2.3.2.2 Biểu đồ use-case"Đăng nhập" 38

2.3.2.3 Biểu đồ use-case"Quản lý tài khoản" 40

2.3.2.4 Biểu đồ use-case"Quản lý danh mục" 41

2.3.2.5 Biểu đồ use-case"Quản lý thực đơn món ăn" 43

2.3.2.6 Biểu đồ use-case"Quản lý khách hàng" 45

2.3.2.8 Biểu đồ use-case"Tìm kiếm món ăn" 48

2.3.2.9 Biểu đồ use-case"Đặt đồ ăn" 50

2.3.2.10 Biểu đồ use-case"Theo dõi đơn hàng" 52

2.3.2.11 Biểu đồ use-case"Đánh giá món ăn" 54

2.3.2.12 Biểu đồ use-case"Thống Kê" 56

2.4 Biểu đồ tuần tự 58

2.4.1 Biểu đồ tuần tự "Đăng ký" 58

2.4.2 Biểu đồ tuần tự "Đăng nhập" 58

2.4.3 Biểu đồ tuần tự "Quản lý tài khoản" 59

2.4.4 Biểu đồ tuần tự "Quản lý danh mục" 60

2.4.5 Biểu đồ tuần tự "Quản lý thực đơn món ăn" 61

2.4.6 Biểu đồ tuần tự "Quản lý khách hàng" 62

2.4.7 Biểu đồ tuần tự "Quản lý đơn đặt hàng" 63

2.4.8 Biểu đồ tuần tự "Tìm kiếm món ăn" 64

2.4.9 Biểu đồ tuần tự "Đặt đồ ăn" 65

2.4.10 Biểu đồ tuần tự "Theo dõi đơn hàng" 66

2.4.11 Biểu đồ tuần tự "Đánh giá món ăn" 67

2.4.12 Biểu đồ tuần tự "Thống kê" 68

2.5 Biểu đồ hoạt động 69

2.5.1 Biểu đồ hoạt động "Đăng ký" 69

2.5.2 Biểu đồ hoạt động "Đăng nhập" 70

2.5.3 Biểu đồ hoạt động "Quản lý tài khoản" 71

2.5.4 Biểu đồ hoạt động "Quản lý danh mục" 72

2.5.5 Biểu đồ hoạt động "Quản lý thực đơn" 73

2.5.6 Biểu đồ hoạt động "Quản lý khách hàng" 74

2.5.7 Biểu đồ hoạt động "Quản lý đơn đặt hàng" 75

2.5.8 Biểu đồ hoạt động " Tìm kiếm món ăn " 76

2.5.9 Biểu đồ hoạt động "Đặt đồ ăn" 77

2.5.10 Biểu đồ hoạt động "Theo dõi đơn hàng" 78

2.5.11 Biểu đồ hoạt động "Đánh giá món ăn" 79

2.6 Thiết kế cơ sở dữ liệu 80

2.6.1 Biểu đồ lớp 80

3.1 MÔI TRƯỜNG TRIỂN KHAI 84

3.2 KẾT QUẢ THỰC NGHIỆM 84

3.2.1 Khách hàng 84

3.2.1.1 Giao diện "Đăng Ký" 84

3.2.1.2 Giao diện "Đăng Nhập" 84

3.2.1.3 Giao diện "Trang chủ" 85

3.2.1.4 Giao diện "Quản lý thông tin tài khoản" 86

3.2.1.5 Giao diện "Danh mục" 87

3.2.1.6 Giao diện "Thực Đơn" 89

3.2.1.5 Giao diện "Thông tin món ăn" 92

3.2.1.7 Giao diện "Đặt Hàng" 93

3.2.1.8 Giao diện "Thông tin đặt hàng" 94

3.2.1.9 Giao diện "Đánh giá món ăn" 95

3.2.2 Quản trị viên 96

3.2.2.1 Giao diện "Quản lý tài khoản" 96

3.2.2.3 Giao diện " Quản lý danh mục" 98

3.2.2.4 Giao diện " Quản lý thực Đơn" 99

3.2.2.5 Giao diện " Quản lý khách hàng " 101

3.2.2.6 Giao diện " Quản lý đơn hàng" 102

3.2.2.7 Giao diện " Thống kê cửa hàng" 103

3.2.2.8 Giao diện "Đăng Nhập" 103

CHƯƠNG 4: KẾT LUẬN 104

4.1 Những vấn đề đạt được 104

4.2 Những vấn đề chưa đạt được 104

4.3 Hướng phát triển 104

TÀI LIỆU THAM KHẢO 105

Danh sách các từ viết tắt trong báo cáo

DANH MỤC BẢNG BIỂU VÀ SƠ ĐỒ

2.3.2.3 Biểu đồ use-case Quản lý tài khoản 41 2.3.2.4 Biểu đồ use-case Quản lý danh mục 43 2.3.2.5 Biểu đồ use-case Quản lý thực đơn 45 2.3.2.6 Biểu đồ use-case Quản lý khách hàng 47 2.3.2.7 Biểu đồ use-case quản lý đơn đặt hàng 48 2.3.2.8 Biểu đồ use-case tìm kiếm món ăn 50

2.3.2.10 Biểu đồ use-case theo dõi đơn hàng 54 2.3.2.11 Biểu đồ use-case đánh giá món ăn 56 2.3.2.12 Biểu đồ use-case thống kê doanh số 58

2.4.2 Sơ đồ tuần tự chức năng đăng nhập 60 2.4.3 Sơ đồ tuần tự chức năng quản lý tài

12.4.12 Sơ đồ tuần tự thống kê danh số 70 2.5.1 Sơ đồ hoạt động chức năng “đăng ký” 71 2.5.2 Sơ đồ hoạt động chức năng “đăng nhập” 72 2.5.3 Sơ đồ hoạt động chức năng “quản lý tài

2.6.2 Sơ đồ E-R và các ràng buộc của database 83

LỜI MỞ ĐẦU

1 Lí do chọn đề tài

Xu hướng đặt đồ ăn trực tuyến đang ngày càng phổ biến do sự tiện lợi và tiết kiệm thời gian mà nó mang lại Người tiêu dùng ngày càng có mong muốn sử dụng dịch vụ đặt đồ ăn trực tuyến thay vì đến trực tiếp nhà hàng để thưởng thức, vì lẽ đó thị trường đặt đồ ăn trực tuyến không ngừng mở rộng với sự thamgia của nhiều doanh nghiệp từ nhỏ đến lớn Các nền tảng đặt đồ ăn trực tuyến như GrabFood, Now, Baemin, và ShopeeFood đang đạt doanh thu lớn, chứng

tỏ tiềm năng kinh doanh cao

Từ vốn kiến thức có được trong quá trình học tập và thông qua tham

khảo một số trang Web giới thiệu sản phẩm, quảng bá sản phẩm Em đã

thực hiện đề tài: “Xây dựng website order đồ ăn”

2 Mục đích và ý nghĩa

2.1 Mục Đích

- Người dùng có thể dễ dàng đặt món ăn yêu thích từ nhà hàng yêu thích chỉ với vài cú click chuột và tiết kiệm thời gian phải đến trực tiếp cửa hàng để lựa chọn món ăn

- Khách hàng có nhiều lựa chọn về món ăn, nhà hàng và dịch vụ giao hàng, giúp họ có trải nghiệm phong phú hơn.Và cũng giúp cho các doanh nghiệp, cửa hàng có thể quảng bá các món ăn một cách dễ dàng nhất

- Các cửa hàng có thể giảm nhiều công sức nhưng vẫn hiệu quả trong việc quản lý cửa hàng và quản lý nhân sự

- Thiết kế website đặt đồ ăn cho phép áp dụng nhiều công nghệ hiện đại như trí tuệ nhân tạo (AI), học máy (Machine Learning), và big data để tối ưu hóatrải nghiệm người dùng và hiệu quả kinh doanh Giúp các nhà hàng tăng doanh thu bằng cách mở rộng kênh bán hàng và tiếp cận nhiều khách hàng hơn

- Các hệ thống đặt đồ ăn trực tuyến giúp nhà hàng quản lý đơn hàng, khách

- Hỗ trợ các phương thức thanh toán trực tuyến an toàn và tiện lợi, nâng cao trải nghiệm người dùng.

3 Đối tượng nghiên cứu

 Mọi người tiêu dùng trên tồn quốc có nhu cầu đặt mua món ăn online

 Các công ty, doanh nghiệp có nhu cầu mua hệ thống website đặt món ăn

 Nghiên cứu các ngôn ngữ hỗ trợ quá trình xây dựng chương trình : Php , SQLI

 Nghiên cứu các phần mềm hỗ trợ quá trình xây dựng sản phẩm: Visual Studio , Javascript…

 Tìm hiểu các công cụ và website hỗ trợ phân tích thiết thiết kế hệ thống hướng đối tượng như UML, …

4 Phạm vi nghiên cứu

- Website đặt đồ ăn cho cửa hàng nhỏ

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 Phương pháp phân tích thiết kế

1.1.1 Phân tích theo hướng đối tượng

 Phân tích và thiết kế hướng đối tượng (OOAD) là một phương pháp phát triểnphần mềm khuyến khích sử dụng các nguyên tắc lập trình hướng đối tượng đểtạo điều kiện linh hoạt, khả năng mở rộng, khả năng tái sử dụng và khả năngbảo trì cao hơn Đó là quá trình phân tích và thiết kế một hệ thống dựa trên cácđối tượng và sự tương tác của chúng trong ranh giới hệ thống

 OOAD là một quy trình hướng mô hình bao gồm nhiều giai đoạn như phântích hướng đối tượng (OOA), thiết kế hướng đối tượng (OOD) và triển khaihướng đối tượng (OOI) Mục tiêu của phương pháp này là phát triển các giảipháp cho các vấn đề phần mềm dễ hiểu, bảo trì, kiểm tra và sửa đổi hơn Nóđặc biệt có lợi khi xử lý các hệ thống phức tạp, với các thành phần riêng biệtcần được kết hợp để hoạt động hiệu quả

 Phân tích hướng đối tượng bao gồm việc chia hệ thống thành các phần nhỏhơn và phân tích các phần riêng biệt Nó được sử dụng để giúp xác định cáclớp đối tượng và hành vi, mối quan hệ và thuộc tính liên quan của chúng OOAliên quan đến việc tạo ra một bức tranh hoàn chỉnh về hệ thống bằng cách phântích cách tất cả các đối tượng tương tác với nhau

 Thiết kế hướng đối tượng được xây dựng dựa trên phân tích được thực hiệntrong OOA để tạo ra các thiết kế cho hệ thống Sử dụng kết quả phân tích, kiếntrúc sư có thể tạo ra bố cục của hệ thống, chẳng hạn như sơ đồ lớp, sơ đồ đốitượng và sơ đồ ca sử dụng Quá trình này tập trung vào việc đảm bảo rằng thiết

kế của hệ thống có hiệu quả để đạt được các mục tiêu

 Triển khai hướng đối tượng là quá trình biến thiết kế của hệ thống thành mãthực thi được Điều này bao gồm việc tạo các lớp và đối tượng sẽ được sửdụng trong hệ thống, cũng như viết mã cho phép các đối tượng tương tác vớinhau và thực hiện các nhiệm vụ được chỉ định của chúng

 Phân tích và thiết kế hướng đối tượng làm cho việc phát triển phần mềm trở

chức, dễ bảo trì và chính xác hơn Khi việc phát triển phần mềm tiếp tục trởnên phức tạp hơn, OOAD cung cấp một cách tiếp cận hiệu quả để quản lý vàgiải quyết vấn đề

- Ưu điểm:

+ Gần gũi với thế giới thực

+ Tái sử dụng dễ dàng

+ Đóng gói che giấu thông tin làm cho hệ thống tin cậy hơn

+ Thừa kế làm giảm chi phí, hệ thống có tính mở cao hơn

+ Xâu dựng hệ thống phức tạp

- Nhược điểm:

+ Phương pháp này khá phức tạp, khó theo dõi được luồng dữ liệu do có nhiềuluồng dữ liệu ở đầu vào Hơn nữa giải thuật lại không phải là vấn đề trọng tâmcủa phương pháp này

1.1.2 Các loại biểu đồ trong phân tích thiết kế hướng đối tượng

1.1.2.1 Biểu đồ UseCase

 Use Case là một thuật ngữ được sử dụng trong lĩnh vực phát triển phần

mềm và quản lý dự án để mô tả một tình huống hoặc kịch bản cụ thể vềcách hệ thống sẽ được sử dụng Nó định nghĩa các chức năng, hoạtđộng và tương tác giữa hệ thống và người dùng hoặc các thành phầnkhác trong một tình huống cụ thể

 Một Use Case được sử dụng để hiểu rõ các yêu cầu và đặc điểm củamột hệ thống, xác định các hành vi và kịch bản sử dụng của ngườidùng, và xác định các yếu tố quan trọng trong việc phát triển phầnmềm Nó cung cấp một cách tiếp cận hợp lý để phân tích và mô tả cáctác động của hệ thống

 Use Case thường được biểu diễn dưới dạng các biểu đồ, ví dụ như biểu

đồ Use Case UML (Unified Modeling Language) Mỗi Use Case mô tảmột tình huống cụ thể, bao gồm các hành vi, tương tác và kết quả mong

1.1.2.2 Biểu đồ phân rã chức năng

 Sơ đồ phân rã chức năng (BFD) là công cụ biểu diễn việc phân rã  cóthứ bậc đơn giản các công việc cần thực hiện Mỗi công việc được chia

ra làm các công việc con, số mức chia ra phụ thuộc kích cỡ và độ phứctạp của hệ thống

 Sơ đồ này thể hiện sự phân rã của các chức năng chính trong biểu đồUseCase

1.1.2.3 Biểu đồ tuần tự

 Biểu đồ tuần tự (Sequence Diagram) là biểu đồ dùng để xác định cáctrình tự diễn ra sự kiện của một nhóm đối tượng nào đó Nó miêu tả chitiết các thông điệp được gửi và nhận giữa các đối tượng đồng thời cũngchú trọng đến việc trình tự về mặt thời gian gửi và nhận các thông điệpđó

1.1.2.4 Biểu đồ hoạt động

 Biểu đồ hoạt động là biểu đồ mô tả các bước thực hiện, các hành động,các nút quyết định và điều kiện rẽ nhánh để điều khiển luồng thực hiệncủa hệ thống Đối với những luồng thực thi có nhiều tiến trình chạysong song thì biểu đồ hoạt động là sự lựa chọn tối ưu cho việc thể hiện 1.1.2.5 Biểu đồ lớp

 Biểu đồ lớp hay Class Diagram là một trong những bản vẽ quan trọngnhất của thiết kế phần mềm, nó cho thấy cấu trúc và quan hệ giữa cácthành phần tạo nên phần mềm Trong quá trình xây dựng ClassDiagram chúng ta sẽ phải quyết định rất nhiều yếu tố về thiết kế nên nó

là bản vẽ khó xây dựng nhất Bản vẽ này sẽ cho thấy cấu trúc tĩnh củaphần mềm, tương tự như bản vẽ mặt bằng trong thiết kế của ngành xâydựng

1.2 Các công cụ công nghệ để xây dựng chương trình

1.2.1 Công cụ lập trình Visual Code

Visual Studio Code được biết đến là một trình biên tập lập trình code miễn phídành cho Windows, Linux và macOS Nó được phát triển bởi Microsoft là sự kết hợphoàn hảo giữa IDE và Code Editor

Trình biên tập này được hỗ trợ chức năng debug, đi kèm với Git, có syntaxhighlighting, tự hoàn thành mã thông minh, snippets, cùng đó là cải tiến mã nguồn.Ngoài ra, Visual Studio Code còn cho phép người dùng thay đổi theme, phím tắt, vàcác tùy chọn khác

Visual Studio Code được công bố, ra mắt phiên bản thử nghiệm vào ngày 29 tháng

4 năm 2015 bởi Microsoft tại hội nghị Build 2015 Vào ngày 18 tháng 11 năm 2015,Visual Studio Code được phát hành dưới giấy phép MIT và mã nguồn của nó đượcđưa lên GitHub Chức năng Extesion (tiện ích mở rộng) cũng được công bố Vàongày 14 tháng 4 năm 2016 Visual Studio Code hoàn tất thử nghiệm và được pháthành chính thức

Visual Studio Code là một trình biên tập mã Nó hỗ trợ nhiều ngôn ngữ và chứcnăng tùy vào ngôn ngữ sử dụng theo như trong bảng sau Nhiều chức năng của Visual Studio Code không hiển thị ra trong các menu tùy chọn hay giao diện ngườidùng Thay vào đó, chúng được gọi thông qua khung nhập lệnh hoặc qua một tậptin json (ví dụ như tập tin tùy chỉnh của người dùng) Khung nhập lệnh là một giaodiện theo dòng lệnh Tuy nhiên, nó biến mất khi người dùng nhấp bất cứ nơi nàokhác, hoặc nhấn tổ hợp phím để tương tác với một cái gì đó ở bên ngoài đó Tương tựnhư vậy với những dòng lệnh tốn nhiều thời gian để xử lý Khi thực hiện những điềutrên thì quá trình xử lý dòng lệnh đó sẽ bị hủy

- Quản lý phiên bản:

Quản lý phiên bản (version control) là một tính năng tích hợp sẵn nổi bật củaVisual Studio Code so với các trình biên tập khác Chức năng này có một tab

tại Để sử dụng tính năng này, người sử dụng phải liên kết Visual Studio Code vớibất kỳ hệ thống quản lý phiên bản được hỗ trợ nào (Git, SVN, ApacheSubversion, Perforce, v.v.) Điều này cho phép bạn tạo kho lưu trữ cũng như thựchiện các yêu cầu đẩy (push) và kéo (pull) trực tiếp từ chương trình Visual StudioCode.

Hình 1.2.1.1: Phần mền Visual Studio Code

 Những tính năng nổi bật của Visual studio Code

Hỗ trợ nhiều ngôn ngữ lập trình: Là trình biên tập lập trình code cho nên VisualStudio Code được hỗ trợ khá nhiều ngôn ngữ lập trình: C/C++, C#, F#, Visual Basic,HTML, CSS, JavaScript, … Cho nên khi sử dụng, nó dễ dàng phát hiện và đưa rathông báo nếu chương chương trình xảy ra lỗi

Visual Studio Code có thể được mở rộng qua plugin Điều này giúp bổ sung thêmchức năng cho trình biên tập và hỗ trợ thêm ngôn ngữ Một tính năng đáng chú ý làkhả năng tạo phần mở rộng để phân tích mã, như là các linter và công cụ phân tích, sửdụng Language Server Protocol

Visual Studio Code hỗ trợ đa nền tảng

Như trên về định nghĩa Visual Studio Code là gì thì chúng ta có thể dễ dàng nhận ratrình biên tập này có thể hỗ trợ tên đa nền tảng: Windows, Linux và macOS

 Cung cấp kho tiện ích mở rộng

Visual Studio Code còn cung cấp kho tiện ích mở rộng khá hữu ích đối với các lậptrình viên Khi họ muốn sử dụng một ngôn ngữ lập trình không nằm trong số các

ngôn ngữ Visual Studio hỗ trợ, họ có thể tải xuống tiện ích mở rộng mà không hề làmgiảm hiệu năng của phần mềm.

 Kho lưu trữ an toàn

Visual Studio Code được nhận xét là một kho lưu trữ vô cùng an toàn Người dùng

có thể hoàn toàn yên tâm vì nó dễ dàng kết nối với Git hoặc bất kỳ kho lưu trữ hiện cónào

Hình 1.2.1.2: Visual code được biết với nhiều tính năng nổi trội

- Hỗ trợ website

Visual Studio Code hỗ trợ nhiều ứng dụng website Ngoài ra, nó cũng có một trìnhsoạn thảo và thiết kế website không hề khó sử dụng

- Lưu trữ dữ liệu dạng phân cấp

Visual Studio Code cung cấp các thư mục cho một số tệp đặc biệt quan trọng Đặcbiệt, trình biên tập này còn có khả năng lưu trữ dữ liệu dạng phân cấp

- Hỗ trợ viết Code

Đây là một tính năng khá hay và hỗ trợ rất nhiều cho các lập trình viên Visual StudioCode sẽ đề xuất cho lập trình viên các tùy chọn thay thế nếu có sự thay đổi chút ít

Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng không cần tabchuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thao tác.

- Màn hình đa nhiệm

Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục không

có liên quan đến nhau

Hình 1.2.1.3: Tính năng nhắc mã Intellisense vô cùng chuyên nghiệp của Visual Studio Code

Đây là tính năng nhắc mã Intellisense vô cùng chuyên nghiệp của Visual StudioCode Nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ Thậm chí, nếu lậptrình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cúpháp còn thiếu

 Visual Studio Code (VS Code) là một trình biên tập mã nguồn mở phổ biếnđược phát triển bởi Microsoft Dưới đây là một số lý do mà nhiều người lậptrình viên và nhà phát triển chọn

 Visual Studio Code: Miễn phí và mã nguồn mở: VS Code là một ứng dụngmiễn phí và mã nguồn mở, điều này có nghĩa là bất kỳ ai cũng có thể sử dụng

và đóng góp vào phát triển của nó

- Hỗ trợ đa nền tảng: VS Code có sẵn cho Windows, macOS và Linux, cho phép bạnlàm việc trên nhiều hệ điều hành khác nhau

 Dễ sử dụng: Giao diện người dùng của VS Code làm cho việc chỉnh sửa và debug

mã trở nên dễ dàng và linh hoạt Nó cung cấp các tính năng như gợi ý mã, dấuđịnh vị, và hỗ trợ định dạng mã

 Mở rộng: VS Code có thể được mở rộng thông qua các extension, cho phép bạntùy chỉnh và mở rộng các tính năng của nó để phù hợp với nhu cầu cụ thể của bạn.Cộng đồng cũng phát triển nhiều extension hữu ích để giúp bạn làm việc hiệu quảhơn

- Hỗ trợ ngôn ngữ lập trình đa dạng: VS Code hỗ trợ nhiều ngôn ngữ lập trình và nềntảng khác nhau, bao gồm C++, C#, JavaScript, Python, HTML/CSS, và nhiều ngônngữ khác

- Cộng đồng mạnh mẽ: Có một cộng đồng lớn và năng động xung quanh VS Code,với hàng ngàn extension và tài liệu hữu ích được cung cấp bởi các nhà phát triển khácnhau trên toàn thế giới

- Tích hợp công cụ phát triển: VS Code tích hợp sẵn với nhiều công cụ phát triển nhưGit, Terminal và Debugging, giúp bạn làm việc hiệu quả hơn từ một giao diện duynhất Tóm lại, Visual Studio Code là một công cụ phát triển mã mạnh mẽ và linhhoạt, được ưa chuộng bởi sự dễ sử dụng, tính mở rộng và hỗ trợ đa nền tảng

1.2.2 Phần mềm Xampp

 Định nghĩa

XAMPP là một phần mềm cho phép giả lập môi trường server hosting ngay trên

mua hosting hay VPS Chính vì vậy, XAMPP hay được phục vụ cho hoạt động học

tập giảng dạy thực hành và phát triển web

Hình 1.2.2: Xampp

 XAMPP được viết tắt của X + Apache + MySQL + PHP + Perl vì nó được

tích hợp sẵn Apache, MySQL, PHP, FTP server, Mail Server Còn X thể hiệncho sự đa nền tảng của XAMPP vì nó có thể dùng được cho 4 hệ điều hành khácnhau: Windows, MacOS, Linux và Solaris

 Đặc điểm của XAMPP

- Tạo mã nguồn mở: Giao diện quản lý dễ dàng và tiện lợi giúp người dùng luôn chủđộng được trong chế độ khởi động lại hay bật/ tắt đối với máy chủ theo thời gian phùhợp nhất.

Nhược điểm

- Do cấu hình khá đơn giản cho nên Xampp hoàn toàn không nhận được sự hỗ trợ vềcấu hình Module, đồng thời cũng không có cả MySQL

- Dung lượng tương đối nặng (141Mb)

- Không có nhiều phiên bản cho từng thành phần của server như PHP, Apache màphải cài đặt riêng

1.2.3 Ngôn ngữ PHP

 Định nghĩa

Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay là HypertextPreprocessor) Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mã lệnh, phù hợp đểphát triển cho các ứng dụng nằm trên máy chủ

Khi viết phần mềm bằng ngôn ngữ PHP, chuỗi lệnh sẽ được xử lý trên server để từ đósinh ra mã HTML trên client Và dựa vào đó, các ứng dụng trên website của bạn sẽhoạt động một cách dễ dàng

PHP cũng là ngôn ngữ lập trình mã nguồn mở và miễn phí PHP tương thích vớinhiều nền tảng khác nhau như Windows, MacOS và Linux, v.v

Hình 1.2.3: Ngôn ngữ php

 Đa phần các trang website bạn đang sử dụng hàng ngày để học tập, làm việc vàgiải trí đều sử dụng ngôn ngữ lập trình PHP Chẳng hạn như Facebook,Pinterest, Wikipedia, WordPress, v.v

 Ngôn ngữ lập trình PHP được đánh giá là dễ đọc Do vậy, cũng dễ hiểu tại sao nólại trở thành ngôn ngữ được nhiều bạn trẻ ưu tiên lựa chọn học trước khi bắt đầuvào nghề

Ưu điểm

PHP là một trong những ngôn ngữ lập trình phổ biến nhất vì những lợi ích mà nó đemlại Về cơ bản, có 4 ưu điểm chính:

 Tính đơn giản và linh động: PHP sử dụng mã nguồn mở nên việc cài đặt và

sử dụng nó rất dễ dàng Ngôn ngữ này phù hợp với cả những người hoàn toànmới với nghề lập trình viên Bạn chỉ cần học chăm chỉ trong 3 đến 6 tháng đểthuần thục nó

 Cộng đồng hỗ trợ lớn: PHP là một ngôn ngữ phổ biến nên các diễn đàn, đội

nhóm chuyên sâu của PHP thuộc hàng ngũ đầu của ngành Bên cạnh đó, thịtrường tuyển dụng cho công việc này cũng chưa bao giờ giảm nhiệt

 Cơ sở dữ liệu đa dạng: PHP cho phép kết nối với hầu hết các loại cơ sở dữ

sẽ không bị giới hạn và có thể chọn cơ sở dữ liệu tối ưu nhất cho ứng dụng củamình.

 Thư viện phong phú: Nhiều sách hướng dẫn và các tài liệu tham khảo có sẵn,

cung cấp các kiến thức hữu ích cho các lập trình viên mới làm quen dần

Nhược Điểm

Mặc dù ngôn ngữ lập trình PHP hữu ích cho việc phát triển web, nhưng nó cũng cómột số nhược điểm nhất định Trong đó, hạn chế lớn nhất có thể kể đến chính là lỗibảo mật đến từ hai nguyên do chính:

 Bản chất mã nguồn PHP: Ngôn ngữ PHP có mã nguồn mở Điều này có

nghĩa là các lỗ hổng của mã nguồn sẽ bị công khai ngay sau khi chúng đượctìm thấy Do đó, trước khi kịp sửa chữa, các lỗ hổng có thể bị khai thác cho cácmục đích xấu

 Một số ứng dụng bằng ngôn ngữ PHP được thiết kế bởi người thiếu kinh nghiệm: Bởi PHP phù hợp với lập trình viên mới vào nghề Cho nên một số

trang web và ứng dụng được phát triển bởi những người còn thiếu kinhnghiệm cũng sẽ đem đến hiệu suất và bảo mật kém hơn

Hình 1.2.4: Ngôn ngữ javascrip

Khi so sánh với các đối thủ khác thì JavaScript có rất nhiều điểm mạnh có thể được

kể đến dưới đây

- Đối với lập trình viên: Đây là ngôn ngữ dễ học, dễ để phát hiện và sửa lỗi hơn.

Thông qua JavaScript thì lập trình viên cũng có thể kiểm tra dữ liệu đầu vào, nhằmgiảm bớt công việc kiểm tra thủ công JavaScript cũng khá linh hoạt, và nó có thểđược sử dụng ở nhiều nền tảng, trình duyệt, và không cần những công cụ quá phứctạp bởi chúng có thể được biên dịch bởi HTML từ trình duyệt web

- Đối với khách truy cập: Ta có thể truy cập và tương tác với website hiệu quả hơn.

Nhờ đặc tính gọn nhẹ mà chúng sẽ cho phép thực hiện các tác vụ trên trang webnhanh hơn

Tuy nhiên, công cụ nào cũng sẽ điểm mạnh và điểm yếu Dưới đây là một số điểm yếu mà bạn nên cân nhắc qua.

- Nó rất dễ bị khai thác, thế nên chúng thu hút rất nhiều hacker thực hiện tìm kiếm lỗibảo mật để lợi dụng, từ đó sẽ chèn cắm các mã độc vào máy tính của người sử dụng

- Việc linh hoạt hỗ trợ cho các thiết bị cũng có thể tạo ra trải nghiệm không đồng nhấttrên các thiết bị này, và đôi khi một số trình duyệt sẽ không hỗ trợ sử dụngJavaScript

Một số công cụ phát triển JavaScript

Hiện nay, với sự phát triển của các nền tảng đám mây thì các IDE hỗ trợ cho việc viếtlệnh bằng JavaScript cũng ngày một tăng Lợi thế của việc sử dụng các IDE đám mâykhi so sánh với các trình soạn thảo văn bản khác đó là khả năng chia sẻ các đoạn code(mã hiệu) cho đồng nghiệp một cách dễ dàng Dưới đây là một số công cụ phát triểnJavaScript mà bạn nên biết

- Google Cloud Shell

Google Cloud Shell sẽ là một nền tảng hoàn hảo dành cho người dùng cần một máy

ảo mạnh mẽ, có khả năng truy cập bất kỳ địa điểm và thời gian nào Đặc biệt, nếu bạn

sở hữu một chiếc Chromebook thì nó sẽ là một sự lựa chọn vô cùng hấp dẫn Hiệnnay, Google Cloud Shell đang cung cấp 5GB dung lượng lưu trữ miễn phí cho người

sử dụng

- Codetable

Đây là một IDE vô cùng đơn giản, và các đoạn code do bạn tạo ra trên đây sẽ đượcthực thi trên máy chủ của nền tảng lập trình HackerEarth Thông thường, đây là IDEthường được sử dụng cho các cuộc thi về lập trình do các công ty thực hiện Và mặc

dù chỉ có các tính năng cơ bản, nhưng chúng sẽ là một sự lựa chọn đủ dùng dành chonhững người mới bắt đầu

- JSFiddle

Là một trong những IDE được nhiều người sử dụng bởi khả năng kiểm tra mã theothời gian thực, và hỗ trợ đa ngôn ngữ Ngoài những tính năng cơ bản như các IDEkhác, nó còn có khả năng báo lỗi thông qua GitHub, hay là thêm mã vàoStackOverflow - trang hỏi đáp dành cho những lập trình viên chuyên nghiệp

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

2.1 Khảo sát bài toán

2.1.1 Khảo sát

Hiện tại cả thế giới đang ở trong giai đoạn phát triển của cuộc cách mạng 4.0 và làchiến lược bản lề cho các nước đang phát triển tiến đến để theo kịp với xu hướng thếgiới, mở ra bước ngoặt mới cho sự phát triển của con người Theo đó, Việt Nam cóthể đi thẳng vào nghiên cứu, ứng dụng công nghệ mới do các công nghệ này khôngphụ thuộc vào công nghệ cũ, từ đó có thể rút ngắn khoảng cách phát triển Việc kinhdoanh, buôn bán cũng như đặt hàng online đang rất là phổ biến trên thị trường vàkhông thể không nhắc đến tên các ông lớn như Grap food , shopee food , titi …

Em tiến hành khảo sát một số website bán hàng lớn để hiểu kĩ các chức năng và cáctương tác giữa người dùng với trang web Dưới đây là thông tin khảo sát được từtrang web bán đồ ăn online

Hình 2.1.1.1: Giao diện trang chủ shopee food

 Đối với shoppe food, website này lựa chọn cách thiết kế đơn giản, bố cục rõ ràng

 Các chức năng cần thiết gần như được thể hiện đầy đủ trên website

Hình 2.1.1.2: Danh mục của website shopee food

 Khác với những website bán hàng khác, danh mục của shopee food được thiết

kế ở trên đầu website gồm 7 danh mục là: Đồ ăn, thực phẩm, rượu bia, Hoa, Thuốc và thú cưng

Hình 2.1.1.2: Thực đơn của website shopee food

 Các món ăn trong thực đơn của shopee food rất đa dạng với nhiều đặc sản của các vùng miền khác nhau trên toàn quốc

Hình 2.1.1.3 Giao diện trang chủ của website GrabFood

 GrabFood này lựa chọn cách thiết kế phổ biến giống với hầu hết tất cả các website bán hàng đơn thuần đó là bố cục trang chủ chia làm 4 phần: phần banner quảng cáo, danh mục phổ biến, món ăn phổ biến và giới thiệu về website

Hình 2.1.1.4: Danh mục của website GrabFood

 Khác với website shopee food, danh mục của GrabFood được thiết kế ở giữa trang chủ và có thêm hình ảnh cho từng danh mục, điều này mang lại sự bắt mắt cũng như hiện đại cho website

 Đa dạng với gần 30 danh mục món ăn có thể mang lại cho khách hàng nhiều sựlựa chọn hấp dẫn

Hình 2.1.1.5: Danh mục của website GrabFood

 Các món ăn trong thực đơn của GrabFood rất đa dạng với nhiều đặc sản của các vùng miền khác nhau trên toàn quốc

 Đặc điểm của các website này là mang lại sự tiện lợi cho khách hàng, mua hàngtrực tiếp qua thiết bị và giúp cho các doanh nghiệp, cửa hàng kinh doanh quảng

bá các sản phẩm một cách dễ dàng

 Những website trên có cách hoạt động cụ thể, đa dạng các chức năng như đăng

kí tài khoản , đăng nhập , tìm kiếm sản phẩm, đánh giá sản phẩm, đặt hàng và quan trọng hơn là tích hợp thanh toán online, không những thế kho data khổng

lồ để lưu trữ dữ liệu là một cải tiến mới của cuộc cách mạng công nghệ Vì vậy,

nó mang lại cho người dùng một trải nghiệm tiện ích và tuyệt vời

Hình 2.1.1.6: Chức năng tìm kiếm của Shopee food

 Chức năng tìm kiếm của các website trên

Việc cần làm là ấn vào mục “Tìm kiếm hàng đầu”, theo dõi, tìm kiếm các sản phẩm đang bán chạy thuộc món ăn mà bạn muốn Giao diện sẽ hiển thị thông tin

cơ bản về tên sản phẩm, hình ảnh và số lượt bán Người xem có thể xem thông tin chi tiết bằng cách kích vào ô “Xem tất cả” Khi đó, cửa sổ điều hướng đến top 30 món ăn bán chạy nhất trong tháng, theo từng ngành hàng khác nhau (danh sách khoảng 20 ngành hàng được xếp hạng theo từng thời điểm

Hình 2.1.1.7: Chức năng quản lý và thay đổi thông tin cá nhân

- Để có thể thay đổi thông tin tài khoản, đương nhiên bạn cần đăng ký tạo tài khoản trước đó Sau khi đăng nhập thông tin cá nhân qua ứng dụng trên điện thoại hoặc qua website trên máy tính, bạn sẽ có thể quản lý cũng như thay dổi thông tin

cá nhân một cách dễ dàng

Hình 2.1.1.8: Hàng hóa đa dạng

Hình 2.1.1.9: Chức năng đặt hàng dễ dàng thao tác

- Chức năng đặt hàng trên ShopeeFood cung cấp nhiều tiện ích giúp người dùng

dễ dàng đặt và nhận đồ ăn từ nhiều nhà hàng và quán ăn khác nhau

Hình 2.1.1.10: Theo dõi đơn hàng

- Theo dõi trạng thái đơn hàng từ lúc đặt hàng cho đến khi nhận được thông qua mục "Đơn hàng của tôi" Nhận thông báo về tình trạng đơn hàng qua ứng dụng

Hình 2.1.1.11: Đánh giá và bình luận cho món ăn

- Sau khi nhận hàng, người dùng có thể đánh giá chất lượng món ăn và dịch vụ giao hàng Gửi phản hồi để giúp cải thiện chất lượng dịch vụ cho các đơn hàng

 Sau khi khảo sát và phân tích các website trên, em quyết định xây dựng một website đặt đồ ăn online để phục vụ cho nhu cầu mua sắm chung của mọi người

2.1.2 Mô tả bài toán

Bài toán đặt ra: Xây dựng website đặt đồ ăn online gồm bao gồm các chức năng của 1 website bán hàng đơn thuần

- Liệt kê và mô tả các chức năng chính dành cho từng nhóm người dùng

Đây là website đặt đồ ăn online cho cửa hàng nhỏ và giới thiệu các món ăn của nhiều vùng miền trên cả nước đến khách hàng với các thông tin chi tiết về các món

ăn, hình ảnh mô tả món ăn, giá cả, khuyến mãi, ưu đãi với người đặt món ăn

 Chức năng chính của trang web:

 Đối với khách hàng

 Đăng nhập và Đăng ký: Khách hàng có thể đăng nhập vào hệ thống bằng tài

khoản của họ hoặc đăng ký tài khoản mới nếu họ chưa có

 Tìm kiếm và Xem thực đơn: Khách hàng có thể tìm kiếm nhà hàng theo vị trí

địa lý hoặc tên nhà hàng Họ có thể xem thực đơn, giá cả, và thông tin chi tiết

về các món ăn

 Quản lý giỏ hàng: Khách hàng có thể xem và chỉnh sửa giỏ hàng trước khi

thanh toán Họ cũng có thể xem tổng số tiền và chi tiết về đơn hàng

 Đặt món ăn: Khách hàng dễ dàng đặt món ăn online mà không cần phải đến

trực tiếp cửa hàng

 Theo dõi đơn hàng: Khách hàng dễ dàng theo dõi trạng thái đơn hàng cũng

như tổng số tiền phải chi trả

 Phản hồi và Đánh giá: Khách hàng có thể đưa ra phản hồi và đánh giá về các

món ăn và dịch vụ của nhà hàng sau khi nhận hàng

 Đối với quản trị viên

 Quản lý hóa đơn đặt hàng: Hệ thống cần có chức năng quản lý đơn hàng,

bao gồm xác nhận đơn hàng, cập nhật trạng thái đơn hàng, và thông báo chongười dùng về tình trạng đơn hàng của họ

 Quản lý danh mục: Admin có thể xem thông tin danh mục đang có, ngoài ra

có thể update hay xóa danh mục món ăn của cửa hàng

 Quản lý thực đơn: Admin có thể xem thông tin thực đơn món ăn đang có,

ngoài ra có thể cập nhật các món ăn mới và xóa thực đơn món ăn của cửa hàng

 Quản lý khách hàng: Admin có thể xem thông tin khách hàng đang có khi

khách hàng tạo thông tin ngoài ra admin có thể xóa thông tin và tài khoảnnhững khách hàng spam

 Quản lý tài khoản: Admin có thể xem thông tin các quản trị viên được quyền

quản lý hệ thống, thêm các quản trị viên mới và xóa các tài khoản cũ

 Thống kê cửa hàng: Admin có thể thống kê các đơn hàng, doanh thu theo

ngày tháng năm

- Cho phép người dùng tìm kiếm món ăn theo tên

- Tìm kiếm món ăn theo từng danh mục

 Quản lý tài khoản

- Cho phép đổi thông tin khách hàng

- Đổi mật khẩu

 Quản lý người dùng

- Quản lý thông tin cá nhân

- Quản lý trạng thái hóa đơn, địa chỉ giao hàng và lịch sử đặt hàng

Cho phép người dùng đặt đồ ăn online

 Chức năng theo dõi đơn hàng

Cho phép người dùng theo dõi trạng thái món ăn đã đặt

 Đánh giá và phản hồi

Cho phép đánh giá và bình luận về món ăn và đánh giá về dịch vụ

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

 Giao diện người dùng

Giao diện đẹp, dễ sử dụng và thân thiện với người dùng

Responsive: Tương thích với tất cả màn hình thiết bị

 Trải nghiệm người dùng

Tốc độ tải trang: Tốc độ nhanh, mượt mà

Cấu trúc rõ ràng dễ điều hướng

 Bảo mật

Mã hóa thông tin cá nhân, xác thực người dùng và quản lý quyền truy cập

2.3 Biểu đồ USE-CASE

2.3.1 Biểu đồ tổng quát

 Actors and Use Cases Descriptions

o Dưới đây là sơ đồ Use Cases của 2 actor Admin và Customer

Hình 2.3.1.1: UseCase Admin

Hình 2.3.1.2: UseCase Customer

 Các table mô tả chức năng của từng actor

Actors Description

STT Actor Name Definition & Interests

1 ADMIN Người quản trị hệ thống với chức năng cấp cao

2.3.2 Biểu đồ use-case phân rã

2.3.2.1 Biểu đồ use-case"Đăng ký"

Hình 2.3.2.1: Biểu đồ use-case đăng ký

Giải thích Cho phép khách hàng chưa có tài khoản có thể đăng ký

vào hệ thống để tạo tài khoản

Tác nhân Khách hàng chưa có tài khoản

Kích hoạt Khi người dùng nhấn nút Đăng ký

Điều kiện trước Trạng thái chưa đăng nhập hệ thống

Kịch bản

1 Click Button chuyển qua trang Đăng ký

2 Hiển thị trang đăng ký

3 Nhập vào đầy đủ các thông tin trong form và kích nàonút “Đăng ký”

4 Hệ thống kiểm tra dữ liệu và nếu dữ liệu hợp lệ lưu vào trong cở sở dữ liệu