đồ án 2 xây dựng website bán giày

Thấu hiểu rõ những điều trên, nhóm em thực hiện đềtài “Xây dựng website bán giày” với định hướng đáp ứng đầy đủ các nhu cầu hiệntại của người dùng.2.Mục tiêu: - Xây dựng được một website

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Trong quá trình làm đồ án và bước đầu tiếp cận các công nghệ mới, nhóm cònnhiều thiếu sót về mặt kiến thức cũng như kinh nghiệm thực tiễn nên khó tránh khỏinhững sai sót Những nhận xét, góp ý chân tình của cô chính là cơ sở để nhóm có thể cảitiến và hoàn thiện đề tài này một cách tốt nhất

Chúng em xin trân trọng cảm ơn!

TP Hồ Chí Minh, ngày 30 tháng 12 năm 2023 Nhóm sinh viên thực hiện

Lê Thị Phương Quyên – Dương Hoàng Mai

ĐỀ CƯƠNG CHI TIẾTTÊN ĐỀ TÀI: Xây dựng website bán giày

1.Lý do chọn đề tài: 

Với sự phát triển mạnh mẽ của công nghệ số, đã sinh ra nhiều loại hình dịch vụ đểphục vụ nhu cầu của con người về cuộc sống hằng ngày Phổ biến nhất phải kểđến việc kinh doanh qua mạng Thị trường tiêu dùng online là một thị trườngnhiều tiềm năng Chính điều này đã thúc đẩy thương mại điện tử phát triển mộtcách nhanh chóng, Việc mua sắm online nói chung và mua sắm giày nói riêng trởnên dễ dàng hơn rất nhiều Thấu hiểu rõ những điều trên, nhóm em thực hiện đềtài “Xây dựng website bán giày” với định hướng đáp ứng đầy đủ các nhu cầu hiệntại của người dùng.

2.Mục tiêu:

- Xây dựng được một website bán giày thân thiện với người dùng với giao diện

hiện đại, bố cục rõ ràng và đáp ứng đủ các chức năng cơ bản của người dùng.

- Thông qua việc thực hiện đề tài, có thể hiểu sâu hơn về một số công nghệ web

phổ biến hiện nay.

- Quản lý tài khoản: quản trị viên, khách hàng.

- Thống kê doanh thu theo ngày, theo tháng, theo quý, theo năm.

Tính năng nâng cao:

- Tích hợp hệ thống gợi ý, khuyến nghị sản phẩm.- Hỗ trợ tư vấn bằng chatbox.

- Tính năng thanh toán bằng ví điện tử.

- Áp dụng các công nghệ để hoàn thành sản phẩm đề tài.- Xây dựng website hoàn chỉnh đáp ứng yêu cầu người dùng.Kế hoạch thực hiện:

Thời gian Công việc

11/09 – 17/09 ● Tìm hiểu công nghệ liên quan.

18/09 – 24/09 ● Xác định yêu cầu và các chức năng của đề tài.

25/09 – 08/10

● Phân tích chi tiết các yêu cầu nghiệp vụ và chức năng của đề tài.

● Viết tài liệu mô tả hệ thống website.

09/10 – 25/10

● Xây dựng bản vẽ các sơ đồ.

● Thiết kế giao diện website.

26/10 – 25/11

● Xây dựng giao diện của website.

● Xây dựng các tính năng cơ bản của website.

26 /11 – 15/12

● Hoàn thiện giao diện và các chức năng của website.

● Chỉnh sửa các tài liệu liên quan.

16/12 – 24/12

● Kiểm thử, sửa lỗi và hoàn thiện các chức năng của sản phẩm.

● Hoàn thiện các tài liệu báo cáo.

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

Trần Thị Hồng Yến

Sinh viên 1

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

Lê Thị Phương Quyên

Sinh viên 2

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

Dương Hoàng Mai

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Trần Thị Hồng YếnMỤC LỤC

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

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

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

3.1 Phân tích yêu cầu 16

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

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

3.2.1 Danh sách Actor 18

3.2.2 Sơ đồ use case tổng quát 19

3.2.3 Danh sách use case 20

4.2.22 Màn hình “Quản lý yêu cầu” 74

CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 75

Hình 3.1 Sơ đồ Use case tổng quát 19

Hình 3.2 Sơ đồ Thiết kế Cơ sở dữ liệu 40

Bảng 3.6 Đặc tả usecase Đăng xuất 24

Bảng 3.7 Đặc tả usecase Quản lý thông tin tài khoản 25

Bảng 3.8 Đặc tả usecase Xem danh sách sản phẩm 26

Bảng 3.9 Đặc tả usecase Xem chi tiết sản phẩm 26

Bảng 3.10 Đặc tả usecase tạo tài khoản 27

Bảng 3.11 Đặc tả usecase Đặt hàng 28

Bảng 3.12 Đặc tả usecase Xem tình trạng đơn hàng 29

Bảng 3.13 Đặc tả usecase Thanh toán đơn hàng 30

Bảng 3.14 Đặc tả usecase Xem lịch sử đặt hàng 31

Bảng 3.15 Đặc tả usecase Quản lý giỏ hàng 32

Bảng 3.16 Đặc tả usecase Quản lý loại sản phẩm 33

Bảng 3.17 Đặc tả usecase Quản lý kho sản phẩm 34

Bảng 3.18 Đặc tả usecase Xem báo cáo doanh thu 35

Bảng 3.19 Đặc tả usecase Xuất báo cáo doanh thu 35

Bảng 3.20 Đặc tả usecase Xem danh sách đơn đặt hàng 36

Bảng 3.21 Đặc tả usecase Xem chi tiết đơn đặt hàng 37

Bảng 3.26 Chi tiết bảng “ProductType” 43

Bảng 3.27 Chi tiết bảng “Brand” 43

Bảng 3.28 Chi tiết bảng “Sale” 44

Bảng 3.29 Chi tiết bảng “Feedback” 45

Bảng 3.30 Chi tiết bảng “Order” 45

Bảng 3.31 Chi tiết bảng “Delivery” 46

Bảng 3.32 Chi tiết bảng “Payment” 47

Bảng 3.33 Chi tiết bảng “User” 47

Bảng 3.34 Chi tiết bảng “Cart” 48

Bảng 3.35 Chi tiết bảng “Address” 48

Bảng 3.36 Chi tiết bảng “UserGroup” 49

Bảng 3.37 Chi tiết bảng “Permission” 49

Bảng 4.1 Danh sách các bảng dữ liệu 50

TÓM TẮT ĐỒ ÁN

Đồ án “Xây dựng website bán giày” sau khi hoàn thành việc nghiên cứu phạmvi và phương pháp đã tiến hành xây dựng website tập trung vào chức năng mua hàng,xem thông tin sản phẩm, quản lý giỏ hàng,…

Đề tài được bắt đầu từ việc tìm hiểu thực trạng, xác định phạm vi, mục tiêu củađề tài Từ đó đưa ra các chức năng cần có và các công nghệ cần sử dụng cho website Với các chức năng chính yêu cầu qui trình phát triển website logic và mang tính chấttuần tự Qui trình phát triển được ghi nhận bằng công cụ Github project Ở giai đoạnthực hiện, client và server được phát triển song song sử dụng thư viện ReactJS choclient và NodeJS cho server, sử dụng Visual Studio Code làm IDE chính.

Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên cuốn báo cáo,đưa ra kết luận và hướng phát triển cho ứng dụng trong tương lai Nội dung đồ án đượctrình bày trong 5 chương như sau:

● CHƯƠNG 1 MỞ ĐẦU: Xác định lí do, mục tiêu đề tài, đối tượng, phạm vi vàphương pháp nghiên cứu.

● CHƯƠNG 2 CƠ SỞ LÍ THUYẾT: Giới thiệu các công nghệ và ngôn ngữ đã sửdụng gồm ngôn ngữ Javascript, công nghệ ReactJS, Redux Toolkit, NodeJS,MongoDB, Bootstrap.

● CHƯƠNG 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG: Phân tích yêu cầu, sơ đồuse case và thiết kế dữ liệu cho website bán giày.

● CHƯƠNG 4 XÂY DỰNG ỨNG DỤNG: Xây dựng website bán giày Sneakifyđược mô tả thông qua danh sách và chi tiết các màn hình.

● CHƯƠNG 5 KẾT LUẬN: Trình bày kết quả đạt được, ưu, nhược điểm của đồán và hướng phát triển trong tương lai của đồ án.

CHƯƠNG 1.MỞ ĐẦU

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

Hiện nay, Internet đã trở thành một phần không thể thiếu trong cuộc sống củacon người Internet hiện hữu ở mọi mặt trong xã hội, ảnh hưởng hoàn toàn đến cáchsống của con người, đặc biệt là trong việc mua sắm Trong thời đại số hóa và phát triểncủa thương mại điện tử, việc xây dựng một trang web bán hàng trực tuyến là một ướcmơ không chỉ của các doanh nghiệp mà còn của những người học và sáng tạo tronglĩnh vực công nghệ thông tin.

Trong vô số thị trường của thương mại điện tử, thị trường giày đang phát triểnmạnh mẽ, và việc kinh doanh giày qua một trang web có tiềm năng mang lại lợi nhuậnlớn Điều này đặc biệt đúng trong bối cảnh mua sắm trực tuyến đang trở nên phổ biếnvà thuận tiện hơn bao giờ hết Giày không chỉ đơn thuần là một vật dụng thiết yếu, màcòn đóng vai trò quan trọng trong thế giới thời trang và phong cách cá nhân Đa dạngvề loại giày, từ thể thao đến thời trang, từ giày nam đến giày nữ, từ giày trẻ em đếnngười lớn, tạo ra một thị trường đầy thú vị và tiềm năng.

Song song đó, việc xây dựng và quản lý một trang web bán giày không chỉ đòihỏi kiến thức về công nghệ, mà còn đòi hỏi hiểu biết về thị trường, quảng cáo trựctuyến, và quản lý kinh doanh Điều này tạo ra một thách thức đầy hấp dẫn và đồng thờimang lại sự tiện lợi cho khách hàng, giúp họ dễ dàng tìm kiếm và mua sắm các sảnphẩm giày một cách thuận tiện từ bất kỳ đâu

Thấu hiểu rõ những điều trên, nhóm đã quyết định lên ý tưởng và xây dựng mộtwebsite mua bán giày với định hướng đáp ứng đầy đủ các nhu cầu hiện tại của ngườidùng Đồ án này là một cơ hội tuyệt vời để áp dụng và phát triển kỹ năng về phát triểnweb, quản lý cơ sở dữ liệu, thiết kế giao diện người dùng, và tích hợp công nghệ mớinhư trí tuệ nhân tạo vào quá trình tối ưu hóa trải nghiệm mua sắm trực tuyến.

1.2 Mục tiêu đề tài

Việc nghiên cứu và xây dựng website được dựa trên hai mục tiêu chính sau:

- Thứ nhất, nghiên cứu và áp dụng các công nghệ lập trình web phổ biến hiện naynhư ReactJS, NodeJS…

- Thứ hai, có thể xây dựng được một website bán giày với giao diện hiện đại, thânthiện với người dùng, có tính thực tiễn cao, có khả năng triển khai và áp dụngvào thực tế, đáp ứng được nhu cầu của người dùng mua giày trực tuyến.

1.3 Đối tượng nghiên cứu và phục vụ

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

- Công cụ thiết kế UI/UX: Figma.- Front-end: ReactJs.

- Back-end: NodeJs.- Database: MongoDB● Đối tượng phục vụ:

- Những người dùng có nhu cầu mua sắm giày trực tuyến.

- Quản lý sản phẩm: danh sách sản phẩm, danh mục sản phẩm, tìm kiếm sảnphẩm, thống kê, đánh giá sản phẩm, hàng tồn kho…

- Chức năng giỏ hàng, mua hàng, đơn hàng.- Quản lý khách hàng.

- Quản lý tài khoản: quản trị viên, khách hàng.

- Thống kê doanh thu theo ngày, theo tháng, theo quý, theo năm.

Tính năng nâng cao:

- Tích hợp hệ thống gợi ý, khuyến nghị sản phẩm.- Hỗ trợ tư vấn bằng chatbox.

- Tính năng thanh toán bằng ví điện tử.

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

- Nghiên cứu các website liên quan hiện đang có trên thị trường, quan sát và từ đórút ra những ưu, nhược điểm của các website đó (Vascara, Juno, )

- Tìm hiểu các công nghệ liên quan, thử trải nghiệm từng loại công nghệ và chọnra một số công nghệ phù hợp nhất.

- Tham khảo ý kiến của giảng viên hướng dẫn để đạt được kết quả tốt nhất.

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

2.1 Ngôn ngữ Javascript

Hình 2.1 Logo Javascript

Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay Javascriptđược tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống độnghơn Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Client-side Script từ người dùng tương tự máy chủ (NodeJS) để tạo ra những website động.[7]

Cách hoạt động của Javascript:

- Thông thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặc chúngđược tham chiếu qua file js hoặc JavaScript

- Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download về máyclient khi truy cập

- Tại đây, chúng sẽ được hệ thống xử ý Vì vậy, bạn không cần phải tải về máyserver rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đến client.Ưu điểm:

- Chương trình rất dễ học.

- Những lỗi Javascript rất dễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanhchóng hơn

- Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đếnmột compiler.

- Javascript có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khácnhau.

- Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơnnhiều so với các ngôn ngữ lập trình khác

- Javascript còn có thể được gắn trên một số các element hoặc những events củacác trang web

- Những website có sử dụng Javascript thì chúng sẽ giúp cho trang web đó có sựtương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

- Người dùng cũng có thể tận dụng Javascript với mục đích là để kiểm tra nhữnginput thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database - Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,

Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tínhnăng)

Nhược điểm:

- Javascript dễ bị các hacker và scammer khai thác hơn

- Javascript cũng không có khả năng đa luồng hoặc đa dạng xử lý

- Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng - Những thiết bị khác nhau có thể sẽ thực hiện Javascript khác nhau, từ đó dẫn

đến sự không đồng nhất

- Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phépđọc hoặc ghi các file

2.2 ReactJS

Hình 2.2 Logo ReactJS

ReactJS là một thư viện JavaScript dùng để xây dựng giao diện người dùng.Tính đến thời điểm hiện tại, đã có khoảng 1300 developer và hơn 94000 trang webđang sử dụng ReactJS được hiểu nôm na là một thư viện, có chứa nhiều JavaScript mãnguồn và “cha đẻ” chính là Facebook Mục đích chính đó là mỗi website sử dụngReactJS thì phải chạy thật mượt hoặc thật nhanh, có khả năng mở rộng cao và đơn giảnthực hiện [8]

Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung cácphần mềm riêng lẻ, cho phép các developer có chức năng phá vỡ giao diện của ngườidùng từ một cách phức tạp và biến nó trở thành các phần mềm đơn giản Hiểu đơn giảnthì các render dữ liệu không chỉ được thực hiện ở vị trí server mà còn ở vị trí client khisử dụng ReactJS [8]

Ưu điểm:

- ReactJS cực kì hiệu quả: ReactJS tạo ra cho chính nó DOM ảo – nơi mà cáccomponent thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rất nhiều.ReactJS cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉ thực

hiện chúng Điều này giúp ReactJS tránh những thao tác cần trên DOM mànhiều chi phí.

- ReactJS giúp việc viết các đoạn code Javascript dễ dàng hơn: Nó dung cú phápđặc biệt là JSX (Javascript mở rộng) cho phép trộn giữa code HTML vàJavascript Người dùng có thể thêm vào các đoạn HTML vào trong hàm rendermà không cần phải nối chuỗi Đây là đặc tính thú vị của ReactJS Nó sẽ chuyểnđổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổiJSX.

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang là tốiưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trang đềuthực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo và hiểnthị lên Điều này thực tế là chậm ReactJS là một thư viện component, nó có thểvừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng cácchuỗi HTML mà server trả về.

- Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diệnvì virtual DOM được cài đặt hoàn toàn bằng Javascript.

- Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng chobảo trì và sửa lỗi.

Nhược điểm:

- ReactJS chỉ phục vụ cho tầng View React chỉ là View Library nó không phải làmột MVC framework như những framework khác Đây chỉ là thư viện củaFacebook giúp render ra phần view Vì thế React sẽ không có phần Model vàController, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax.

- React khá nặng nếu so với các framework khác React có kích thước tươngtương với Angular (Khoảng 35KB so với 39KB của Angular) Trong khi đóAngular là một framework hoàn chỉnh.

2.3 NodeJS

Hình 2.3 Logo NodeJS

NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồnmở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nềntảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháphoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện(event-driven) không đồng bộ [9]

Các đặc tính của NodeJS:

- Lập trình hướng sự kiện và không đồng bộ: Toàn bộ API trong thư viện NodeJSđều không đồng bộ, hay không bị chặn Về cơ bản điều này có nghĩa là mộtserver sử dụng NodeJS sẽ không bao giờ chờ một API trả về dữ liệu Server sẽchuyển sang API kế tiếp sau khi gọi API đó và cơ chế thông báo của Eventstrong NodeJS giúp server nhận được phản hồi từ lần gọi API trước.

- Cực kỳ nhanh chóng: Được xây dựng trên Công cụ JavaScript V8 của GoogleChrome, thư viện NodeJS có khả năng xử lý mã vô cùng nhanh.

- Đơn luồng/Single thread nhưng có khả năng mở rộng cao: NodeJS sử dụng mộtmô hình luồng đơn với vòng lặp sự kiện/event Cơ chế event cho phép máy chủphản hồi non-blocking và cũng cho phép khả năng mở rộng cao hơn so với các

server truyền thống hỗ trợ giới hạn các thread để xử lý yêu cầu NodeJS sử dụngmột chương trình đơn luồng, cùng một chương trình có thể cung cấp dịch vụcho một số lượng yêu cầu lớn hơn so với các máy chủ truyền thống như ApacheHTTP Server.

- Không có buffer: Các ứng dụng NodeJS không có vùng nhớ tạm thời (buffer)cho bất kỳ dữ liệu nào Các ứng dụng này chỉ đơn giản xuất dữ liệu theo khối.- License: NodeJS được phát hành theo giấy phép MIT.

Ưu điểm:

- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.- Sử dụng Javascript – một ngôn ngữ lập trình dễ học.

- Chia sẻ cùng code ở cả phía client và server.

- NPM (Node Package Manager) và module Node đang ngày càng phát triểnmạnh mẽ.

- Giống như hầu hết các công nghệ mới, việc triển khai NodeJS trên host khôngphải là điều dễ dàng.

- Thiếu sự kiểm duyệt chất lượng các module NodeJS.

2.4 Redux Toolkit

Hình 2.4 Logo Redux Toolkit

Gói Redux Toolkit là cách chuẩn để viết logic Redux Ban đầu nó được tạo ra đểgiúp giải quyết ba mối quan tâm phổ biến về Redux:

- "Định cấu hình Redux Store quá phức tạp".

- "Dev phải thêm rất nhiều packages để Redux có thể làm bất cứ điều gì hữu ích.- "Redux yêu cầu quá nhiều mã code sẵn".

Redux Toolkit có thể không giải quyết mọi trường hợp sử dụng, nhưng với tinhthần của create-react-app, Redux Toolkit có thể cố gắng cung cấp một số công cụ tómtắt quá trình thiết lập và xử lý các trường hợp sử dụng phổ biến nhất, cũng như baogồm một số tiện ích hữu ích sẽ cho phép người dùng đơn giản hóa mã ứng dụng củahọ [10]

Bộ công cụ Redux Toollkit cũng bao gồm khả năng tìm nạp và lưu trữ dữ liệu mạnhmẽ tên là "Truy vấn RTK" Nó được bao gồm trong gói như một tập hợp các điểm đầuvào riêng biệt Nó là tùy chọn, nhưng có thể loại bỏ nhu cầu tự viết tay logic tìm nạpdữ liệu [10]

Những công cụ này sẽ mang lại lợi ích cho tất cả người dùng Redux Cho dù ngườidùng Redux hoàn toàn mới đang thiết lập dự án đầu tiên của mình hay là người dùng

có kinh nghiệm muốn đơn giản hóa ứng dụng hiện có, bộ công cụ Redux có thể giúplàm cho mã Redux của mình tốt hơn [10]

2.5 MongoDB

Hình 2.5 Logo MongoDB

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kếhướng theo đối tượng và hỗ trợ trên đa nền tảng Các bảng MongoDB có cấu trúc linhhoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào [11]

MongoDB hoạt động trên collection, hướng tài liệu kiểu JSON thay cho bảng đểtăng tốc độ truy vấn MongoDB có chức năng định hướng tài liệu cung cấp, hiệu suấtcao, tính sẵn sàng cao và khả năng mở rộng dễ dàng.

Collection trong MongoDB về bản chất thì có thể hiểu là nhóm các document,một collection sẽ chứa các tập document.

Ở MongoDB, các collection không theo bản chất cũ vì các document khôngtuân theo cấu trúc, nghĩa là các document trong một collection không có cấu trúc cốđịnh như nhau (không cần chia ra các cột để lưu trữ), vậy thì không cần phải định nghĩathành phần các cột trong một collection như trong cơ sở dữ liệu quan hệ.

Ưu điểm:

- MongoDB là một cơ sở dữ liệu hướng tài liệu, sử dụng bộ nhờ nội tại, truy cậpdễ dàng nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi truy vấn nhanh.Theo đánh giá thì tốc độ MongoDB có thể nhanh hơn 100 lần so với cơ sở dữliệu quan hệ.

- Sự linh hoạt của cơ sở dữ liệu: MongoDB sử dụng lưu trữ dữ liệu dưới dạngDocument JSON nên mỗi collection sẽ có kích cỡ khác nhau và các documentcũng khác nhau Do sử dụng cơ sở dữ liệu không có lược đồ nên điều này manglại sử linh hoạt và tự do lưu trữ dữ liệu thuộc nhiều loại khác nhau.

- Khả năng mở rộng: Lợi thế về cơ sở dữ liệu theo chiều ngang, vì vậy, khi xử lýmột dữ liệu lớn thì chúng ta có thể phân phối cho nhiều máy.

- Đội ngũ hỗ trợ chuyên nghiệp: Khi gặp phải bất kỳ sự cố nào chúng ta có thểliên hệ trực tiếp đến hệ thống hỗ trợ để xử lý kịp thời.

- Tính khả dụng cao: MongoDB không chỉ có các tính năng về sao chép mà cóthể sử dụng gridFS (có thể lưu trữ và truy xuất các tệp vượt quá kích thước16MB) Các tính năng giúp tăng tính khả dụng và đạt hiệu suất cao.

- Không có chức năng Joins nên sẽ có sự dư thừa dữ liệu, điều này là dung lượngbộ nhớ tăng không cần thiết.

2.6 Bootstrap

Hình 2.6 Logo Bootstrap

Bootstrap là một front-end framework mã nguồn mở miễn phí giúp quá trìnhphát triển web được nhanh và dễ dàng hơn Bootstrap bao gồm các mẫu thiết kế dựatrên HTML và CSS như typography, forms, buttons, tables, navigation, modals, imagecarousels… cũng như các plugin JavaScript tùy chọn Người dùng có thể tạo các giaodiện responsive design cho các thiết bị khác nhau với Bootstrap [12]

Ưu điểm của Bootstrap

- Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầusử dụng Bootstrap.

- Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrapđiều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn.

- Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phầncủa core framework.

- Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trìnhduyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).Các tính năng chính của Bootstrap:

- Hỗ trợ jQuery: Bootstrap 5 sẽ không sử dụng thư viện jQuery nữa, thay vào đólà thư viện JavaScript đã được cải thiện Việc kết thúc hỗ trợ jQuery giúp giảmkích thước tệp nguồn và cải thiện thời gian tải, giúp V5 sẵn sàng hơn trongtương lai Các nhà phát triển sẽ không còn phải tải xuống toàn bộ thư việnkhổng lồ để thực hiện mọi việc trong JS Đây là chìa khóa quan trọng vì thờigian tải trang là một trong những yếu tố Google đánh giá thứ hạng cho các trangweb trên thiết bị di động.

- Thuộc tính tùy chỉnh CSS: Thuộc tính tùy chỉnh CSS giúp CSS linh hoạt hơn vàcó thể lập trình được Các biến CSS được thêm tiền tố -bs để tránh xung đột vớiCSS của bên thứ ba.

- Cải tiến biểu mẫu: Một tính năng mới khác trong Bootstrap 5 là hệ thống điềukhiển biểu mẫu được cải tiến Trong V5, các biểu mẫu hoàn toàn tùy chỉnh, vìvậy các nhà phát triển có thể cung cấp giao diện giống nhau trên tất cả các trìnhduyệt Nhờ vậy các biểu mẫu dễ làm việc hơn và nhất quán hơn trên các trìnhduyệt khác nhau.

- Hỗ trợ RTL: Bootstrap 5 hỗ trợ RTL cho các ngôn ngữ đọc từ phải sang trái Hỗtrợ RTL là một cải tiến lớn về khả năng truy cập trong Bootstrap 5 giúp loại bỏcác khó khăn mà các developer gặp phải khi cần RTL trên trang web.

- Các tùy chọn tùy chỉnh được cải thiện: Giờ đây, việc tạo theme, tùy chỉnh và mởrộng Bootstrap trở nên dễ dàng hơn bao giờ hết Bootstrap 5 đã thêm phần tùychỉnh vào tài liệu để làm cho mọi thứ rõ ràng hơn.

- Thành phần offcanvas mới: Trong số các tính năng mới của Bootstrap 5 còn cóthành phần offcanvas mới bao gồm backdrop có thể định cấu hình, cuộn nộidung và vị trí Phần tử mới bao gồm các biểu tượng chữ V trong Bootstrap đểhiển thị khả năng nhấp và trạng thái Các nhà phát triển có thể đặt loại thànhphần này ở trên cùng, dưới cùng, bên trái hoặc bên phải của chế độ xem.

Chương 3 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

3.1 Phân tích yêu cầu

3.1.1.Yêu cầu chức năng3.1.1.1.Đăng ký

Người dùng đăng ký tài khoản bằng cách sử dụng Email và Password Sau khihoàn thành form điền Email và Password, người dùng đăng ký tài khoản mới thànhcông và sử dụng tài khoản này để đăng nhập vào website.

3.1.1.2.Đăng nhập

Để sử dụng các chức năng như: Đánh giá sản phẩm, người dùng phải tiếnhành đăng nhập vào website Người dùng đăng nhập bằng tài khoản đã đăng ký trướcđó.

3.1.1.4.Xem thông tin sản phẩm

Chức năng này cho phép người dùng xem thông tin một sản phẩm bất kì và xemlại danh sách các sản phẩm đã xem trước đó.

3.1.1.5.Tìm kiếm

Chức năng này hỗ trợ người dùng tìm kiếm sản phẩm theo tên sản phẩm, màusắc, kiểu dáng trên thanh tìm kiếm.

3.1.1.6.Thêm vào giỏ hàng

Người dùng có thể thêm sản phẩm vào giỏ hàng để tiến hành thanh toán ngayhoặc thêm nhiều sản phẩm vào giỏ hàng và thanh toán cùng một lúc.

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

- Yêu cầu về giao diện: Giao diện thân thiện, bố cục hợp lý, màu sắc phù hợp, cânđối, trực quan, dễ dàng thao tác.

- Yêu cầu về tính bảo mật: Phải đảm bảo an toàn dữ liệu người dùng, ngăn chặncác tấn công từ bên ngoài, kiểm soát vận hành hệ thống, giảm thiểu tối đa mứcđộ rủi ro, rò rỉ thông tin như 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).

- Yêu cầu về tính tiện dụng: Website dễ sử dụng, tiện lợi trong việc tìm kiếm vàchia sẻ.

- Yêu cầu về tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu một lượnglớn dữ liệu, tránh xảy ra lỗi ngoại lệ.

- Yêu cầu về tính tương thích: Website có thể chạy ổn định và tương thích vớinhiều nền tảng trình duyệt khác nhau.

3.2 Sơ đồ use case

3.2.1.Danh sách Actor

Bảng 3.1 Bảng danh sách Actor

1 Khách hàng Khách hàng đăng nhập vào website cóthể sử dụng tất cả các chức năng củawebsite như: Xem thông tin sản phẩm,Thêm sản phẩm vào giỏ hàng, Đặt hàng,…

2 Quản trị viên Quản trị viên có thể sử dụng các chứcnăng quản lí sản phẩm, đơn hàng,account,…

3.2.2.Sơ đồ use case tổng quát

Hình 3.7 Sơ đồ Use case tổng quát

3.2.3.Danh sách use case

Bảng 3.2 Danh sách Usecase chung

1 Đăng nhập Người dùng có tài khoản (khách hàng hoặc nhân viên) có thể đăng nhập vào tài khoản và thực hiện các thao tác trên website

2 Đăng xuất Người dùng có thể đăng xuất tài khoản hiện tạikhỏi website.

3 Quản lý thông tin tàikhoản

Người dùng chọn yêu thích một bài hát để thêmbài hát đó vào thư viện.

4 Xem danh sách sản phẩm Người dùng có thể xem danh sách sản phẩm,xem chi tiết sản phẩm, hình ảnh sản phẩm, thêmsản phẩm vào giỏ hàng.

5 Xem chi tiết sản phẩm Người dùng có thể xem chi tiết sản phẩm baogồm các thông tin chi tiết như miêu tả, hình ảnh,

kích cỡ.

Bảng 3.3 Danh sách Usecase khách hàng

1 Tạo tài khoản Khách hàng có thể tạo tài khoản trên website đểđặt hàng và cập nhật thông tin về sản phẩm vàdịch vụ.

2 Đặt hàng Khách hàng có thể đặt các sản phẩm, tùy chọnnhu cầu giao nhận hàng và phương thức thanhtoán

3 Theo dõi trạng thái đơnhàng

Khách hàng có thể theo dõi trạng thái đơn hàngđã đặt.

4 Thanh toán đơn hàng Khách hàng có thể thanh toán đơn hàng thôngqua trang website bằng các hình thức thanh toán.5 Xem lịch sử đặt hàng Khách hàng có thể xem lịch sử đặt hàng của

mình bao gồm các thông tin chi tiết như ngày đặthàng, các sản phẩm trong đơn hàng đã đặt vàhình thức thanh toán.

6 Phản hồi và góp ý sảnphẩm

Khách hàng có thể cung cấp phản hồi về trảinghiệm của mình, bao gồm xếp hạng, đánh giá,gửi khiếu nại hoặc đề xuất và liên hệ vớiwebsite.

7 Hủy đặt hàng Khách hàng có thể hủy đơn hàng đã đặt.8 Quản lý giỏ hàng Khách hàng có thể thêm, xóa sản phẩm khỏi

giỏ hàng và tùy chỉnh số lượng mỗi sản phẩm trong giỏ hàng tùy ý.

Bảng 3.4 Danh sách Usecase quản trị viên

1 Quản lý sản phẩm Quản trị viên có thể thêm, xóa, sửa các danh mụcsắp xếp sản phẩm.

2 Quản lý kho sản phẩm Quản trị viên có thể thêm, xóa, sửa các sản phẩmkhỏi hàng tồn kho của tiệm bánh và cập nhậttrạng thái và giá cả của các sản phẩm.

3 Xuất báo cáo Quản trị viên có thể xuất báo cáo về tình trạngbán hàng, mức tồn kho và các số liệu kinh doanhkhác để hiểu rõ hơn về hiệu suất của cửa hàng vàđưa ra các quyết định kinh doanh dựa trên dữliệu.

4 Xem báo cáo doanh thu Quản trị viên có thể xem các báo cáo bán hàngtheo ngày, theo thàng, theo năm.

5 Xuất báo cáo doanh thu Cho phép quản trị viên xuất báo cáo doanh thudưới dạng pdf, excel.

6 Quản lý khuyến mãi Cho phép quản trị viên tạo và quản lý các ưu đãiquảng cáo, giảm giá, phiếu giảm giá và chươngtrình khách hàng thân thiết để khuyến khíchkhách hàng, tăng doanh số.

7 Xem danh sách đơn đặthàng

Quản trị viên có thể xem danh sách các đơn hànghiện có mà khách hàng đặt.

8 Xem chi tiết đơn đặthàng

Quản trị viên có thể xem chi tiết đơn hàng để cóthể biết các thông tin về đơn hàng như số lượngsản phẩm, ghi chú, thông tin khách hàng trongđơn đặt hàng.

9 Cập nhật tình trạng đơnhàng

Quản trị viên có thể cập nhật tình trạng đơn hàngkhi có thay đổi như: đã xác nhận, đã hoàn thành,

đợi giao hàng, giao hàng thành công hoặc đãhủy.

10 Quản lý tài khoản Quản trị viên có thể thêm, xóa, sửa tài khoảnhoặc xem thông tin tài khoản.

3.2.4.Đặc tả use case

3.2.4.1. Đặc tả use case Đăng nhập

Bảng 3.5 Đặc tả usecase Đăng nhập

Tên use case Đăng nhập

Đối tượng tham gia Người dùng có tài khoản

Mô tả Người dùng của hệ thống tiến hành đăng nhập vào trang web.

Luồng sự kiện 1 Người dùng điều hướng đến trang đăng nhập của trangweb

2 Người dùng nhập email và mật khẩu của họ vào biểu mẫuđăng nhập

3 Hệ thống xác minh thông tin đăng nhập của người dùng + Nếu hệ thống không nhận ra thông tin đăng nhập của

người dùng, thông báo lỗi sẽ được hiển thị và ngườidùng được nhắc nhập thông tin đăng nhập của họ.+ Nếu người dùng chưa xác minh địa chỉ email của họ,

thông báo lỗi sẽ được hiển thị và người dùng đượcnhắc xác minh địa chỉ email của họ trước khi đăngnhập

4 Hệ thống đăng nhập người dùng vào tài khoản của họ vàchuyển chúng đến trang Bảng điều khiển.

Sự kiện kích hoạt Chỉ người dùng đã đăng ký có thông tin đăng nhập hợp lệ mớicó thể đăng nhập vào tài khoản của họ

Mục tiêu Người dùng đăng nhập thành công vào tài khoản của họ.