Xây dựng website quản lý tiệm bánh xuancake

 Một số ưu điểm khi sử dụng website quản lý tiệm bánh - Dễ dàng quản lý giảm thiểu nhầm lẫn trong việc giao sản phẩm cho khách,lãng phí nguồn nguyên vật liệu, giảm doanh thu cửa hàng -

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

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

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2 XÂY DỰNG WEBSITE QUẢN LÝ TIỆM BÁNH

XUANCAKE

Giảng viên hướng dẫn:

ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

Nông Ngọc Xuân Hoàng – 19521541

TP Hồ Chính Minh, 2023

NHẬN XÉT

LỜI CẢM ƠN

Lời đầu tiên em xin chân thành cảm ơn sự hướng dẫn tận tình của cô Trần Thị Hồng Yến

đã hỗ trợ những thông tin cần thiết và giải đáp những thắc mắc cho em trong suốt quátrình thực hiện đề tài

Em cũng muốn dành lời cảm ơn chân thành đến các bạn vì đã giúp đỡ, góp ý, những tàiliệu liên quan để tham khảo là một lợi thế đáng kể đối với em

Vì kiến thức và kinh nghiệm của em vẫn còn hạn chế nên không thể tránh khỏi những saisót trong quá trình thực hiện đồ án Vì lẽ đó, em luôn mang một thái độ cầu thị và rấtmong muốn nhận những góp ý, phản hồi quý báu từ cô Từ đó tự rút kinh nghiệm, khắcphục những hạn chế, đồng thời ngày càng phát triển, hoàn thiện sản phẩm cũng như bảnthân một cách nghiêm túc và tự giác Một lần nữa, nhóm em xin chân thành cảm ơn cô

Nhóm thực hiện

Trường Đại học Công nghệ Thông tin, tháng 6 năm 2023

MỤC LỤC

ĐỀ CƯƠNG CHI TIẾT 10

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

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

1.2 Điểm nổi bật của đề tài 13

1.3 Mô tả đề tài 13

1.4 Công nghệ sử dụng 13

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

2.1 Tổng quan về ReactJS 15

2.2 Tổng quan về Firebase 16

2.3 Tổng quan về Bootstrap 17

2.4 Tổng quan về MongoDB 17

2.5 Tổng quan về NodeJS 18

2.6 Tổng quan về ExpressJS 19

CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21

3.1 Phân tích yêu cầu hệ thống 21

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

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

3.2 Kiến trúc hệ thống 22

Mô tả kiến trúc Front-End 22

Mô tả kiến trúc Back-End 23

CHƯƠNG 4: HIỆN THỰC HỆ THỐNG 24

4.1 Sơ đồ Use case 24

4.2 Sơ đồ Activity 25

4.2.1 Đăng ký 25

4.2.2 Đăng nhập 27

4.2.3 Reset mật khẩu 29

4.2.4 Xem chi tiết sản phẩm 32

4.2.5 Quản lí giỏ hàng 34

4.2.6 Quản lý hóa đơn (Khách hàng) 35

4.2.6.1 Xem lịch sử mua hàng 35

4.2.6.2 Hủy hóa đơn 37

4.2.6.3 Tạo hóa đơn 38

4.2.7 Comment sản phẩm 39

4.2.8 Quản lý hóa đơn (Quản lý) 41

4.2.8.1 Sửa hóa đơn 41

4.2.8.2 Tìm kiếm hóa đơn 43

4.2.9 Quản lý sản phẩm 45

4.2.10 Thống kê doanh thu 47

4.3 Sơ đồ Class 48

4.3.1 Quản lý sản phẩm 48

4.3.2 Quản lý hóa đơn 48

4.3.3 Authentication 49

4.4 Thiết kế dữ liệu 49

4.4.1 Danh sách đối tượng trong hệ thống 50

4.4.2 Dữ liệu về người dùng 50

4.4.3 Dữ liệu về bánh 50

4.4.4 Dữ liệu về hóa đơn 51

4.5 Thiết kế giao diện 52

4.5.1 Màn hình đăng nhập 52

4.5.2 Màn hình đăng kí 53

4.5.3 Màn hình Reset Password 53

4.5.4 Màn hình Landing Page 55

4.5.5 Màn hình About 59

4.5.6 Màn hình Cake 60

4.5.7 Màn hình Cake Detail 61

4.5.8 Màn hình Cart 63

4.5.9 Màn hình Order 64

4.5.10 Màn hình Order history 65

4.5.11 Màn hình Management 65

4.5.12 Màn hình Cake Management 66

4.5.13 Màn hình Statistic Management 68

4.5.14 Màn hình Order management 69

KẾT LUẬN 71

Kết quả đạt được 71

Ưu điểm 71

Nhược điểm và giải pháp 71

TÀI LIỆU THAM KHẢO 72

DANH MỤC BẢN

Bảng 1 Yêu cầu chức năng 21

Bảng 3 Đặc tả yêu cầu của chức năng “Đăng Ký” 26 Bảng 4 Đặc tả yêu cầu của chức năng “Đăng Nhập” 28 Bảng 5 Đặc tả yêu cầu của chức năng “Reset mật khẩu” 30 Bảng 6 Đặc tả yêu cầu của chức năng “Đăng xuất” 32 Bảng 7 Đặc tả yêu cầu của chức năng “Xem chi tiết sản phẩm” 33 Bảng 8 Đặc tả yêu cầu của chức năng “Chỉnh sửa giỏ hàng” 34 Bảng 9 Đặc tả yêu cầu của chức năng “Xem lịch sử mua hàng” 35 Bảng 10 Đặc tả yêu cầu của chức năng “Hủy hóa đơn” 37 Bảng 11 Đặc tả yêu cầu của chức năng “Tạo hóa đơn” 38 Bảng 12 Đặc tả yêu cầu của chức năng “Comment sản phẩm” 40 Bảng 13 Đặc tả yêu cầu của chức năng “Sửa hóa đơn” 41 Bảng 14 Đặc tả yêu cầu của chức năng “Xóa hóa đơn” 42 Bảng 15 Đặc tả yêu cầu của chức năng “Tìm kiếm hóa đơn” 44 Bảng 16 Đặc tả yêu cầu của chức năng “Quản lý sản phẩm” 46 Bảng 17 Đặc tả yêu cầu của chức năng “Thống kê doanh thu” 47 Bảng 18 Danh sách đối tượng trong hệ thống 50

Bảng 28 Mô tả thành phần Thông tin shop 58

Bảng 36 Mô tả edit form Cake Management 67 Bảng 37 Mô tả màn hình Order Management 69 Bảng 38 Mô tả màn hình Order Management 70

DANH MỤC HÌNH ẢN

Hình 1 15

Hình 2 16

Hình 3 17

Hình 4 17

Hình 5 18

Hình 6 19

Hình 7 23

Hình 8 24

Hình 9 25

Hình 10 27

Hình 11 29

Hình 12 31

Hình 13 32

Hình 14 34

Hình 15 35

Hình 16 37

Hình 17 38

Hình 18 39

Hình 19 41

Hình 20 42

Hình 21 43

Hình 22 45

Hình 23 47

Hình 24 48

Hình 25 48

Hình 26 49

Hình 27 49

Hình 28 52

Hình 29 53

Hình 30 53

Hình 31 54

Hình 32 54

Hình 33 54

Hình 34 55

Hình 35 56

Hình 36 57

Hình 37 58

Hình 38 58

Hình 39 59

Hình 40 60

Hình 41 60

Hình 42 61

Hình 43 62

Hình 44 62

Hình 45 63

Hình 46 63

Hình 47 64

Hình 48 65

Hình 49 65

Hình 50 66

Hình 51 66

Hình 52 67

Hình 53 67

Hình 54 68

Hình 55 68

Hình 56 69

Hình 57 69

Hình 58 70

Hình 59 70

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:

XÂY DỰNG WEBSITE QUẢN LÝ TIỆM BÁNH

XUANCAKEGiảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện:

Sinh viên thực hiện:

Nông Ngọc Xuân Hoàng – 19521541

Nội dung đề tài:

1 Giới thiệu:

 Hiện nay các chủ cửa hàng tiệm bánh gặp phải rất nhiều khó khăn trong việcquản lý định lượng nguyên vật liệu để làm bánh, số lượng bánh cần sản xuấttrong ngày, quản lý tiền mặt, phiên làm việc của nhân viên và báo cáo lợi nhuậnhàng ngày, hàng tháng cũng như quản lý đơn hàng Nếu tiến hành công việc nàymột cách thủ công sẽ gặp rất nhiều khó khăn và sẽ gặp nguy cơ nhầm lẫn trongviệc giao sản phẩm cho khách, lãng phí nguồn nguyên vật liệu Để giải quyếtviệc đó chúng ta chỉ cần một website quản lý tiệm bánh cho chủ tiệm

 Một số ưu điểm khi sử dụng website quản lý tiệm bánh

- Dễ dàng quản lý giảm thiểu nhầm lẫn trong việc giao sản phẩm cho khách,lãng phí nguồn nguyên vật liệu, giảm doanh thu cửa hàng

- Giúp chủ cửa hàng có cái nhìn tổng quan về doanh thu từng loại bánh, khonguyên vật liệu, lợi nhuận

- Tiếp cận với nhiều người hơn: nhờ website mà chủ cửa hàng có thể quảng bátiệm của mình dễ dàng hơn với mọi người

Nắm bắt được nhu cầu đó, em đã chọn đề tài này với mong muốn xây dựng mộtwebsite giúp quản lý tiệm bánh giúp cho chủ tiệm dễ dàng quản lý

2 Mục tiêu:

-Xây dựng được 1 website quản lý tiệm bánh đáp ứng được:

 Có giao diện dễ nhìn, dễ sử dụng

 Tính năng cơ bản cần có của một website quản lý tiệm bánh

 Có thể phát triển thêm trong tương lai

3 Đối tượng: Các chủ tiệm bánh có nhu cầu quản lý tiệm bánh

4 Phạm vi:

 Phạm vi môi trường: Triển khai đề tài trên môi trường web

 Phạm vi chức năng:

o Quản lý tài khoản, thông tin của tài khoản nhân viên

o Quản lý, tra cứu lịch sử đơn hàng mà khách hàng đã đặt

o Thống kê doanh thu, loại bánh được ưa thích nhất

o Chăm sóc khách hàng (chatbot)

o Quản lý chi tiết thành phần của các loại bánh (giá, thành phần,…)

o Tìm kiếm và đặt hàng các loại bánh…

5 Phương pháp thực hiện:

-Tham khảo quy trình tạo lập một website quản lý cửa hàng

-Lập kế hoạch, định hướng của sản phẩm

-Front-end: HTML, CSS, Bootstrap, Reatjs…

-Back-end: Firebase storage, firebase, Nodejs, ExpressJS

7 Kết quả mong đợi

-Xây dựng được website quản lý tiệm bánh với các chức năng cơ bản

-Giao diện hiện đại, thân thiện người dùng

-Có kiến thức về quy trình phát triển một website quản lý cửa hàng bán bánh.-Qúa trình thực hiện đạt đúng tiến độ môn học

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

Nông Ngọc Xuân Hoàng

BẢNG KẾ HOẠCH THỰC HIỆN

1/3 – 15/3 Tìm hiểu đề tài, phân tích yêu cầu và liệt kê chức năng cần

có của hệ thống15/3 – 22/3 Tìm hiểu ngôn ngữ cần sử dụng cho web và thiết kế giao

diện web trên figma22/3 – 1/4 Thực hiện thiết kế trang chủ của website ( các màn hình

thông tin của shop,…)1/4 – 28/4 Thiết kế các chức năng của web (login, đặt hàng, phân

quyền của shop, xem lịch sử đặt hàng…)28/4 – 20/5 Thiết kế backend bao gồm các tính năng quản lý sản phẩm,

quản lý, đơn đặt hàng, thống kê doanh thu…

20/5 – 30/5 Sửa lỗi và hoàn thiện báo cáo đồ án

30/5 – 1/7 Kiểm tra, sửa lỗi

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

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

- Hiện nay các chủ cửa hàng tiệm bánh gặp phải rất nhiều khó khăn trong việcquản lý định lượng nguyên vật liệu để làm bánh, số lượng bánh cần sản xuấttrong ngày, quản lý tiền mặt, phiên làm việc của nhân viên và báo cáo lợinhuận hàng ngày, hàng tháng cũng như quản lý đơn hàng Nếu tiến hành côngviệc này một cách thủ công sẽ gặp rất nhiều khó khăn và sẽ gặp nguy cơ nhầmlẫn trong việc giao sản phẩm cho khách, lãng phí nguồn nguyên vật liệu Để tối

ưu việc quản lý chúng ta cần một website quản lý thực sự tiện lợi

- Nắm bắt được nhu cầu đó, em quyết định chọn đề tài này để phát triển websitequản lý tiệm bánh giúp cho việc quản lý trở nên tiện lợi, nhanh chóng và chínhxác hơn giúp cho việc điều hành tiệm bánh trở nên chuyên nghiệp hơn

1.2 Điểm nổi bật của đề tài

- Việc tiện dụng trong vấn đề đặt hàng online mà không cần phải đăng nhập dành cho khách hàng vãng lai chính là điểm nổi bật của đề tài

- Ngoài ra về phía quản lý cửa hàng, website cho phép người quản lý dễ dàng thực hiện các thao tác quản lý như sản phẩm, đơn đặt hàng, thống kê doanh một cách dễ dàng và nhanh chóng cải thiện quy trình quản lý cửa hàng

1.3 Mô tả đề tài

- XuanCake là tên của đề tài Là một website hỗ trợ quản lý tiệm bánh và cungcấp giải pháp bán hàng online cho người dùng và khách vãng lai Website cungcấp các loại bánh đa dạng như bánh kem, bánh bông lan, bánh mặn…

- Website cung cấp chức năng cho 2 phía người dùng: quản lý cửa hàng vàkhách hàng Phần quản lý, website cung cấp chức năng quản lý sản phẩm, phânloại sản phẩm, thống kê doanh thu, quản lý đơn đặt hàng Về phía người dùngthì cung cấp các chức năng chính của mua hàng online như đặt hàng, muahàng, xem chi tiết sản phẩm, quản lý giỏ hàng, đặt hàng vãng lai, bình luận sảnphẩm nếu họ có tài khoản và đăng nhập vào hệ thống

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

2.1 Tổng quan về ReactJS

Hình 1

- React là một thư viện để xây dựng giao diện người dùng có thể kết hợp Nókhuyến khích việc tạo ra các thành phần giao diện người dùng có thể tái sửdụng, hiển thị dữ liệu thay đổi theo thời gian Rất nhiều người sử dụng Reactlàm V trong MVC React trừu tượng hóa DOM khỏi bạn, cung cấp mô hình lậptrình đơn giản hơn và hiệu suất tốt hơn React cũng có thể hiển thị trên máychủ bằng Node và nó có thể cung cấp năng lượng cho các ứng dụng gốc bằngReact Native React triển khai luồng dữ liệu phản ứng một chiều, điều này giúpgiảm bớt phần soạn sẵn và dễ lý luận hơn so với ràng buộc dữ liệu truyềnthống

- Ưu điểm nổi bật:

• Sử dụng DOM ảo là một đối tượng JavaScript Điều này sẽ cải thiện hiệusuất ứng dụng, vì DOM ảo JavaScript nhanh hơn DOM thông thường

• Có thể được sử dụng trên máy khách và máy chủ cũng như với các khuônkhổ khác

• Các mẫu thành phần và dữ liệu cải thiện khả năng đọc, giúp duy trì cácứng dụng lớn hơn

2.2 Tổng quan về Firebase

Hình 2

- Firebase là một nền tảng sở hữu bởi google giúp chúng ta phát triển các ứngdụng di động và web Họ cung cấp rất nhiều công cụ và dịch vụ tiện ích đểphát triển ứng dụng nên một ứng dụng chất lượng Điều đó rút ngắn thời gianphát triển và giúp ứng dụng sớm ra mắt với người dùng

- Firebase cung cấp cho người dùng các dịch vụ cơ sở dữ liệu hoạt động trên nềntảng đám mây với hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năngchính của firebase là giúp người dùng lập trình ứng dụng, phần mềm trên cácnền tảng web, di động bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

- Firebase Cloud Storage là một không gian lưu trữ dữ liệu, nó giống như mộtchiếc ổ cứng Bạn có thể upload và download các loại file bạn muốn Đó có thể

là một file ảnh, hay file văn bản, zip, …

- Còn với Firebase cloud storage, chúng là nơi lưu trữ những file, đó có thể lànhững hình ảnh về một mặt hàng chẳng hạn Bạn có thể lưu trữ link tới filehình ảnh trong database, còn file ảnh đặt trong cloud storage Vậy là client cóthể dễ dàng truy vấn và sử dụng

- Ưu điểm nổi bật

o Sử dụng miễn phí và thuận tiện

o Dễ sử dụng và tích hợp

o Đáp ứng nhu cầu của người dùng

o Cập nhật liên tục và đa nền tảng

2.3 Tổng quan về Bootstrap

Hình 3

- Bootstrap là một framework bao gồm các HTML, CSS và JavaScript templatedùng để phát triển website chuẩn responsive Bootstrap là một bộ sưu tập miễnphí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoànchỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màusắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻnhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quátrình thiết kế giao diện website

- Ưu điểm nổi bật

- MongoDB là một database hướng tài liệu (document), một dạng NoSQLdatabase Vì thế, MongoDB sẽ tránh cấu trúc table-based của relationaldatabase để thích ứng với các tài liệu như JSON có một schema rất linh hoạtgọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSONnên mỗi một collection sẽ các các kích cỡ và các document khác nhau Các dữliệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.

- Ưu điểm nổi bật:

o Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tínhsẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ

o Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứngnên tốc độ đọc và ghi cao

2.5 Tổng quan về NodeJS

Hình 5

- NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaSript,được xây dựng trên V8 JavaScript engine của Chrome - V8 thực thi mãJavaScript bên ngoài trình duyệt Nó được tạo ra vào năm 2009 đi kèm với mộtlợi thế chính - NodeJS cho phép thực hiện lập trình bất đồng bộ

- NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chromevới mục đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộngđược một cách dễ dàng hơn NodeJS sử dụng mô hình I/O lập trình theo sựkiện, non-blocking, do đó nodeJS khá gọn nhẹ và hiệu quả - công cụ hoàn hảo

cho các ứng dụng chuyên sâu về dữ liệu theo thời gian thực chạy trên các thiết

bị phân tán

- NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng đểphát triển các ứng dụng mạng và ứng dụng server-side Các ứng dụng NodeJSđược viết bằng JavaScript và có thể chạy trong NodeJS runtime trên OS X,Microsoft Windows và Linux

- NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScriptkhác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảmthiểu tình trạng sử dụng quá nhiều Node.js

- Ưu điểm nổi bật:

o Cộng đồng Nodejs khá lớn và được cung cấp miễn phí cho người dùng

o Ứng dụng NodeJS có khả năng chạy đa nền tảng, thiết bị, đồng thời đápứng được yêu cầu về thời gian thực

o Node.js có tốc độ cực kỳ nhanh, xử lý được nhu cầu sử dụng của lượngkhách truy cập ‘khổng lồ’ trong thời gian cực ngắn

o Ứng dụng phát triển bởi Node.js có khả năng xử lý nhiều yêu cầu truycập cùng lúc, ‘cứu’ website của bạn khỏi nguy cơ bị ‘sập’ khi lượngtruy cập quá nhiều

2.6 Tổng quan về ExpressJS

Hình 6

- ExpressJS là một framework ứng dụng web có mã nguồn mở và miễn phí đượcxây dựng trên nền tảng Node.js ExpressJS được sử dụng để thiết kế và pháttriển các ứng dụng web một cách nhanh chóng Để hiểu ExpressJS, người dùngchỉ cần phải biết JavaScript, do đó nên việc xây dựng các ứng dụng web và

API trở nên đơn giản hơn đối với các lập trình viên và nhà phát triển đã thànhthạo JavaScript trước đó.

- Ưu điểm nổi bật:

o Rất dễ học, chỉ cần bạn biết JavaScript, bạn sẽ không cần phải học mộtngôn ngữ mới để học ExpressJS

o Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụngExpressJS

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

3.1 Phân tích yêu cầu hệ thống

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

Website quản lý tiệm bánh tạo ra để đáp ứng được các yêu cầu chính như sau:

Bảng 1 Yêu cầu chức năng

Quên mật khẩu

Người dùng có thể lấy lại mật khẩu bịquên bằng cách gửi yêu cầu reset và khi hệthống đã tiếp nhận yêu cầu người dùng cóthể đặt mật khẩu mới

Đăng nhập Người dùng có thể sử dụng email đã đăng

ký và đăng nhập vào hệ thống

Đặt hàng Người dùng có thể chọn các sản phẩm tùyý, chọn số lượng và đặt hàng Hệ thống sẽ

tiếp nhận yêu cầu đặt hàng

Chỉnh sửa giỏ hàng Người dùng có thể chỉnh sửa giỏ hàng củamình như thêm số lượng, xóa sản phẩm

hiện có trước khi tạo hóa đơn

Tạo hóa đơn

Sau khi xác nhận mua sản phẩm có tronggiỏ, người dùng có thể cung cấp số điệnthoại hoặc email để shop có thể liên lạckhi hoàn thành sản phẩm Hệ thống sẽ tạođơn bao gồm các trường thông tin củakhách hàng

Xem lịch sử mua hàng Bằng cách đăng nhập, người dùng có thểxem lịch sử mua hàng của email đó.Bình luận sản phẩm Người dùng có thể sử dụng email để bìnhluận ở trang sản phẩmXem chi tiết sản phẩm Người dùng có thể xem chi tiết của sản

phẩm

Quản lý Quản lý sản phẩm Quản lý có thể thêm, xóa, sửa sản phẩm

hiện có trong hệ thốngQuản lý đơn hàng Quản lý có thể xóa, sửa hóa đơn mà kháchhàng tạo lưu trong hệ thốngThống kê số sản phẩm Hệ thống sẽ tự thống kê số sản phẩm hiện

có của shopThống kê doanh thu Hệ thống sẽ tự thống kê doanh thu tháng/năm của shop

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

- Tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặn các rủi ro đến

từ bên ngoài, rò rỉ thông tin, đặc biệt liên quan đến các chức năng xác thực ngườidùng (đăng nhập, đăng ký, quên mật khẩu)

- Tính tiện dụng: Ứng dụng dễ sử dụng, tiện lợi trong việc quản lý và theo dõi cáctác vụ

- Tính hiệu quả: Đảm bảo được tốc độ xử lý, có thể thực hiện đối với một lượng lớn

dữ liệu, tránh xảy ra những lỗi liên quan đến ngoại lệ

- Tính tương thích: Ứng dụng có thể chạy ổn định và tương thích với nhiều nền tảngtrình duyệt khác nhau

3.2 Kiến trúc hệ thống

Mô tả kiến trúc Front-End

- Front-End được xây dựng theo mô hình MVC

o Model: Đại diện cho dữ liệu và logic kinh doanh của trang web Nó baogồm bất kỳ mô hình dữ liệu hoặc lớp nào xử lý thao tác và lưu trữ dữ liệu

o View: Đại diện cho giao diện người dùng (UI) hoặc lớp trình bày của ứngdụng Các view có trách nhiệm hiển thị dữ liệu từ model và hiển thị nó chongười dùng

o Controller: Đóng vai trò như một trung gian giữa model và view Nó xử lýđầu vào của người dùng, xử lý yêu cầu và quản lý luồng dữ liệu giữa model

và view

- Cấu trúc thư mục:

Hình 7

Mô tả kiến trúc Back-End

Phía Back-End cũng được xây dựng theo mô hình MVC bao gồm:

Bảng 2 Kiến trúc Back-end

Model

Là thành phần dùng để cung cấp dữ liệu, thực hiện kết nối, truy vấn

dữ liệu và thao tác với dữ liệu trong database, tương tác với dữ liệuhay hệ quản trị cơ sở dữ liệu Ở đây đại diện cho bánh và hóa đơnRoute

Đây là nơi chứa các file route Mỗi file route xác định các đường dẫn(endpoints) và phương thức HTTP tương ứng với các xử lýcontroller

Controller Đây là nơi chứa các file controller Mỗi file controller chịu trách

nhiệm xử lý các yêu cầu từ người dùng và gọi các phương thức thích

hợp trong các model tương ứng

CHƯƠNG 4: HIỆN THỰC HỆ THỐNG

2.1 Sơ đồ Use case

Hình 8

2.2 Sơ đồ Activity

2.2.1 Đăng ký

Hình 9

Bảng 3 Đặc tả yêu cầu của chức năng “Đăng Ký”

Đặc tả yêu cầu của chức năng “Đăng Ký”

Description Dùng để đăng ký tài khoản mới để đăng nhập vào hệ thống

Pre-condition Người dùng phải có email để đăng ký tài khoản mới

Post-condition Sau khi đăng ký thành công người dùng có thể sử dụng tài

khoản đó để đăng nhập vào hệ thống

Basic flow 1 Người dùng sau khi truy cập vào trang chính, nhấn vào

nút login ở trên navbar

2 Hệ thống chuyển sang trang login

3 Người dùng nhấn nút Register

4 Người dùng nhập email và mật khẩu

5 Hệ thống kiểm tra thông tin vừa nhập

6 Hệ thống lưu thông tin tài khoản mới vào database và thông báo đăng ký thành công

Alternative flow 4a Hệ thống thông báo lỗi nếu thông tin nhập sai

Use case tiếp tục ở bước 4

5a Hệ thống kiểm tra thông tin tài khoản đã tồn tại trong database không và thông báo lỗi nếu tồn tại

Use case tiếp tục ở bước 4

Exception flow

2.2.2 Đăng nhập

Hình 10

Bảng 4 Đặc tả yêu cầu của chức năng “Đăng Nhập”

Đặc tả yêu cầu của chức năng “Đăng Nhập”

Description Dùng tài khoản đã đăng ký để đăng nhập vào hệ thống

Pre-condition Người dùng phải có tài khoản tồn tại trong hệ thống

Post-condition Sau khi đăng nhập thành công người dùng có thể sử dụng các

chức năng của người dùng trong hệ thống

Basic flow 1 Người dùng sau khi truy cập vào trang chính, nhấn vào

nút login ở trên navbar

2 Hệ thống chuyển sang trang login

3 Người dùng chọn nút Switch to Login

4 Người dùng nhập email và mật khẩu

5 Hệ thống kiểm tra thông tin vừa nhập

6 Hệ thống tự điều hướng về trang chủ nếu tài khoản và mật khẩu vừa nhập đúng

Alternative flow 4a Hệ thống thông báo lỗi nếu thông tin nhập sai

Use case tiếp tục ở bước 4

5a Hệ thống kiểm tra thông tin tài khoản nếu không tồn tại trong database hoặc sai mật khẩu và thông báo lỗi

Use case tiếp tục ở bước 4

Exception flow

2.2.3 Reset mật khẩu

Hình 11

Bảng 5 Đặc tả yêu cầu của chức năng “Reset mật khẩu”

Đặc tả yêu cầu của chức năng “Reset mật khẩu”

Description Người dùng có thể lấy lại mật khẩu và đặt lại mật khẩu của

mình

Pre-condition Người dùng phải có tài khoản tồn tại trong hệ thống và email

phải tồn tại

Post-condition Sau khi nhập email để reset mật khẩu, người dùng có thể reset

mật khẩu thông qua email đó

Basic flow 1 Người dùng sau khi truy cập vào trang chính, nhấn vào

nút login ở trên navbar

2 Hệ thống chuyển sang trang login

3 Người dùng chọn nút Forgot password

4 Người dùng nhập email để nhận reset email

5 Hệ thống gửi email reset

6 Sau khi nhận được mail, người dùng nhấn vào link reset mật khẩu

7 Hệ thống điều hướng tới trang reset mật khẩu

8 Người dùng nhập mật khẩu mới

9 Hệ thống cập nhật lại mật khẩu mới trong database

Alternative flow 8a Hệ thống thông báo lỗi nếu nhập mật khẩu không hợp lệ

Use case tiếp tục ở bước 8

Exception flow

Hình 12

Bảng 6 Đặc tả yêu cầu của chức năng “Đăng xuất”

Đặc tả yêu cầu của chức năng “Đăng xuất”

Description Người dùng đăng xuất khỏi hệ thống

Pre-condition Người dùng phải đăng nhập vào hệ thống trước đó

Post-condition Sau khi đăng xuất dữ liệu người dùng ở phiên làm việc đó như

cart sẽ bị xóa

Basic flow 1 Người dùng sau khi đăng nhập thành công và truy cập

vào trang chính, nhấn vào nút logout ở navbar

2 Hệ thống sẽ đăng xuất người dùng

3 Thông tin về cart của người dùng ấy sẽ xóa tại phiên làmviệc đó

Đặc tả yêu cầu của chức năng “Xem chi tiết sản phẩm”

Description Người dùng có thể xem chi tiết sản phẩm

Pre-condition

Post-condition Người dùng có thể xem mô tả chi tiết và có thể thêm sản phẩm

đang xem vào giỏ hàng

Basic flow 1 Người dùng chọn See detail ở mỗi sản phẩm

2 Hệ thống điều hướng tới trang sản phẩm đó

3 Người dùng có thể xem chi tiết và thêm sản phẩm đó vàogiỏ hàng của mình

Alternative flow

Exception flow

2.2.5 Quản lí giỏ hàng

Hình 14

Bảng 8 Đặc tả yêu cầu của chức năng “Chỉnh sửa giỏ hàng”

Đặc tả yêu cầu của chức năng “Chỉnh sửa giỏ hàng”

Description Người dùng có thể xem chi tiết sản phẩm

Pre-condition

Post-condition Người dùng có thể xem mô tả chi tiết và có thể thêm sản phẩm

đang xem vào giỏ hàng

Basic flow 1 Người dùng chọn See detail ở mỗi sản phẩm

2 Hệ thống điều hướng tới trang sản phẩm đó3.1 Người dùng có thể xem chi tiết và thêm sản phẩm đó vàogiỏ hàng của mình

3.2 Người dùng nhấn Add to cart ở trang tất cả sản phẩm

4 Hệ thống sẽ tự động thêm sản phẩm đó vào giỏ hàng của khách

5 Người dùng nhấn chọn Cart và hệ thống điều hướng tới trang giỏ hàng

6 Hệ thống hiển thị chi tiết giỏ hàng của khách

7 Người dùng có thể:

- Xóa sản phẩm

- Thêm số lượng sản phẩm

- Xác nhận tạo hóa đơn

- Xem tổng mặt hàng và tổng giá tiền

Alternative flow

Exception flow

2.2.6 Quản lý hóa đơn (Khách hàng)

2.2.6.1 Xem lịch sử mua hàng

Hình 15

Bảng 9 Đặc tả yêu cầu của chức năng “Xem lịch sử mua hàng”

Đặc tả yêu cầu của chức năng “Xem lịch sử mua hàng”

Description Người dùng có thể xem lịch sử hóa đơn của mình

Pre-condition Người dùng phải đăng nhập mới sử dụng được chức năng này

Post-condition Người dùng có thể xem chi tiết lịch sử mua hàng của mình

Basic flow 1 Người dùng chọn Order history

2 Hệ thống điều hướng tới trang lịch sử mua hàng

3 Hệ thống lấy dữ liệu lịch sử hóa đơn của khách và hiển thị lên trang

4 Người dùng có thể xem chi tiết lịch sử mua hàng và

có thể hủy đơn hàng

Alternative flow 3a Nếu khách chưa đăng nhập thì thông báo lỗi