Đồ án 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ài liệ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 sai só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ất mong 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ắc phụ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ản thâ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.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ẢNG

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 9 Đặc tả yêu cầu của chức năng “Xem lịch sử mua hàng” 35

DANH MỤC HÌNH ẢNH

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 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

XUANCAKE Giả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ệc quả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ất trong 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ậ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ông việ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ầ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ải quyết việ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, kho nguyê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ột website 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

• 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ống

15/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 figma

22/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ệc quả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ất trong 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ậ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ông việ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ầ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 Để 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 website quả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ính xá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à cung cấp giải pháp bán hàng online cho người dùng và khách vãng lai Website cung cấ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ân loại sản phẩm, thống kê doanh thu, quản lý đơn đặt hàng Về phía người dùng thì cung cấp các chức năng chính của mua hàng online như đặt hàng, mua hà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ản phẩ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 React làm V trong MVC React trừu tượng hóa DOM khỏi bạn, cung cấp mô hình lập trì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áy chủ bằng Node và nó có thể cung cấp năng lượng cho các ứng dụng gốc bằng React Native React triển khai luồng dữ liệu phản ứng một chiều, điều này giúp giả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ền thố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ệu suấ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ôn khổ 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 ứng dụ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 gian phá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ền tảng đám mây với hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chí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ác nề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ột chiế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 file hì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 template dùng để phát triển website chuẩn responsive Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắ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

o Dễ dàng thao tác

o Tùy chỉnh dễ dàng

o Chất lượng sản phẩm đầu ra hoàn hảo

o Độ tương thích cao 2.4 Tổng quan về MongoDB

Hình 4

- MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database

để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nê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ính sẵ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ứng nê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ột lợ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 Chrome vớ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 JavaScript khác nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiể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ượng khá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 truy cập cùng lúc, ‘cứu’ website của bạn khỏi nguy cơ bị ‘sập’ khi lượng truy 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í được xây dựng trên nền tảng Node.js ExpressJS được sử dụng để thiết kế và phát triển các ứng dụng web một cách nhanh chóng Để hiểu ExpressJS, người dùng chỉ 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ành thạ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ột ngô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ụng ExpressJS

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

Chỉnh sửa giỏ hàng

Người dùng có thể chỉnh sửa giỏ hàng của mì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ó trong giỏ, người dùng có thể cung cấp số điện thoại hoặc email để shop có thể liên lạc khi 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ủa khá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ình

luận ở trang sản phẩm Xem 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ống

Quản lý đơn hàng Quản lý có thể xóa, sửa hóa đơn mà khách hàng tạo lưu trong hệ thống Thố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 shop Thố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ười dù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ác tá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ảng trì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ó bao gồ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 ứng dụng Các view có trách nhiệm hiển thị dữ liệu từ model và hiển thị nó cho ngườ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:

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

4.1 Sơ đồ Use case

Hình 8

4.2 Sơ đồ Activity

4.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ý”

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

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

4.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”

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

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

4.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 đó

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”

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

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àm việc đó

Alternative flow

Exception flow

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

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

Đặc tả yêu cầu của chức năng “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

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ào giỏ hàng của mình

Alternative flow

Exception flow

4.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”

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

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ào giỏ 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

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

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

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

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

Exception flow