Tổng quan về đề tài
Lý do chọn đề tài
Trong thời đại công nghệ phát triển, website trở thành công cụ thiết yếu cho doanh nghiệp, giúp giao tiếp và tiếp cận khách hàng hiệu quả hơn Nó cho phép doanh nghiệp nắm bắt nhu cầu và phản hồi của khách hàng Một website chất lượng và chuyên nghiệp không chỉ nâng cao hình ảnh mà còn tăng uy tín cho doanh nghiệp Do đó, việc xây dựng và thiết kế website là bước quan trọng để doanh nghiệp phát triển mạnh mẽ.
Hiện nay, có nhiều thư viện và framework hỗ trợ việc xây dựng và phát triển ứng dụng web nhanh chóng và hiệu quả.
Reactjs giúp các nhà phát triển tạo ra giao diện người dùng linh hoạt với các component dễ tái sử dụng và bảo trì Bên cạnh đó, việc sử dụng Virtual DOM của Reactjs cũng nâng cao hiệu suất ứng dụng web và giảm tải cho trình duyệt.
Express.js là một framework mạnh mẽ giúp đơn giản hóa quá trình phát triển ứng dụng web phía server, nhờ vào việc cung cấp các APIs dễ hiểu và linh hoạt Điều này cho phép lập trình viên tùy chỉnh và mở rộng ứng dụng theo nhu cầu thực tế.
Mục tiêu
- Tìm hiểu và nghiên cứu cách thức hoạt động của ReactJS và Express.js.
- Sử dụng các nghiên cứu đó để xây dựng một hệ thống ứng dụng web.
Phạm vi nghiên cứu
Phạm vi môi trường: o Triển khai ứng dụng trên môi trường web.
Phạm vi chức năng của hệ thống bao gồm quản lý thông tin sản phẩm, quản lý giỏ hàng, tìm kiếm sản phẩm theo nhu cầu, phân loại các sản phẩm và đánh giá các sản phẩm.
Đối tượng sử dụng
Người dùng có tài khoản
Phương pháp thực hiện
- Tìm hiểu về Reactjs, Express.js và một số thư viện khác.
- Khảo sát các website bán hàng có trên thị trường để xác định các yêu cầu, tính năng của ứng dụng.
- Xây dựng hệ thống Backend kết nối với cơ sở dữ liệu.
- Thiết kế giao diện website cho người dùng và cho quản trị viên
Công nghệ
- Front-end: Reactjs với Redux.
Cơ sở lý thuyết
Reactjs
ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi
Facebook phát triển ReactJS để tạo giao diện người dùng (UI) động và tương tác cho các ứng dụng web ReactJS cho phép phân chia giao diện thành các component độc lập, giúp quản lý và tái sử dụng mã hiệu quả hơn.
ReactJS nổi bật với việc sử dụng Virtual DOM để tối ưu hóa hiệu suất Thay vì tương tác trực tiếp với DOM thực, ReactJS cập nhật chỉ những phần cần thiết thông qua DOM ảo, giúp giảm tải và tăng tốc độ hiển thị giao diện.
2.1.2.Các khái niệm cơ bản
Cách tiếp cận component-based trong ReactJS cho phép bạn cấu trúc ứng dụng bằng cách chia nhỏ thành các component độc lập và tái sử dụng Mỗi component đại diện cho một tính năng cụ thể và có thể được tổng hợp, lồng vào nhau, cũng như sử dụng lại ở nhiều phần khác nhau trong ứng dụng.
Dưới đây là các nguyên tắc chính của cách tiếp cận component-based trong ReactJS:
1 Khả năng tái sử dụng: Các component được thiết kế để có thể tái sử dụng, nghĩa là bạn có thể sử dụng cùng một component nhiều lần trong các phần khác nhau của ứng dụng Điều này giúp giảm trùng lặp mã và thúc đẩy cơ sở mã modular và có thể bảo trì.
2 Tách biệt: Mỗi component trong ReactJS tập trung vào một mối quan tâm hoặc chức năng cụ thể Bằng cách chia nhỏ ứng dụng của bạn thành các component nhỏ hơn, bạn có thể quản lý các phần khác nhau của ứng dụng một cách riêng biệt và dễ dàng thực hiện các thay đổi hoặc cập nhật mà không ảnh hưởng đến các phần khác.
3 Component: ReactJS cung cấp một cách để kết hợp các component lại với nhau để xây dựng các giao diện người dùng phức tạp hơn Bạn có thể lồng các component bên trong các component khác để tạo một hệ thống phân cấp các component đại diện cho cấu trúc ứng dụng của bạn.
4 Quản lý trạng thái: Các component trong ReactJS có thể có trạng thái riêng, cho phép chúng quản lý và kiểm soát dữ liệu của chính chúng Bằng cách đóng gói trạng thái bên trong các component , bạn có thể đảm bảo rằng mỗi component đều độc lập và độc lập.
Virtual DOM là một khái niệm quan trọng trong ReactJS, đóng vai trò là cơ chế tối ưu hóa trong việc tương tác với DOM (Document Object Model) trong ứng dụng web Để hiểu rõ hơn về Virtual DOM, trước tiên chúng ta cần nắm bắt khái niệm về DOM.
DOM là một cấu trúc biểu diễn tài liệu HTML hoặc XML, giúp trình duyệt web hiển thị nội dung và quản lý tương tác của người dùng với nội dung đó.
Khi một ứng dụng React được render, React tạo ra một bản sao ảo của DOM hiện tại, gọi là Virtual DOM Virtual DOM là biểu diễn của DOM trong bộ nhớ, giúp cập nhật và tái render các component của ứng dụng một cách hiệu quả hơn.
Khi trạng thái ứng dụng thay đổi, React so sánh Virtual DOM mới với Virtual DOM cũ để xác định sự khác biệt Thay vì cập nhật toàn bộ DOM, React chỉ cập nhật những phần thay đổi, giúp tăng hiệu suất và tối ưu hóa quá trình render Virtual DOM còn cho phép gom nhóm nhiều thay đổi trong một lần cập nhật, giảm số lần truy cập và cập nhật.
Hình 2.1.2.2.1 Mô tả Virtual DOM 2.1.2.3.Props và State
Trong ReactJS, "props" (viết tắt của "properties") là phương thức truyền dữ liệu từ thành phần cha đến các thành phần con Chúng được sử dụng để chuyển các giá trị tĩnh, giúp các thành phần con nhận thông tin cần thiết từ thành phần cha.
Khi một thành phần nhận giá trị "prop" từ thành phần cha, nó có thể sử dụng để hiển thị và tương tác với người dùng Việc sử dụng props mang lại lợi ích quan trọng là cho phép tái sử dụng các thành phần và tạo ra các thành phần động dựa trên dữ liệu đầu vào.
State là một đặc tính quan trọng của các component trong React, dùng để lưu trữ và quản lý dữ liệu có thể thay đổi Khi state thay đổi, React sẽ tự động cập nhật và render lại component, đảm bảo hiển thị dữ liệu mới một cách chính xác.
Vòng đời của Component bao gồm một loạt các thay đổi từ khi được tạo ra cho đến khi bị hủy Trong suốt quá trình tồn tại, các phương thức sẽ được gọi ở các giai đoạn khác nhau Dưới đây là hình ảnh minh họa cho vòng đời của Component và các phương thức tương ứng.
Hình 2.1.2.4.2 Vòng đời của component
Các phương thức trong React Component Lifecycle có thể chia ra làm 3 pha chính là:
Mounting: giai đoạn component được tạo ra và render lần đầu tiên trên cây DOM Các phương thức có thể sử dụng là contructor(), render(), componentDidMount()
React-Route
React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt React-
Router giúp bạn định tuyến luồng dữ liệu trong ứng dụng một cách rõ ràng, xác định rằng mỗi URL tương ứng với một Route nhất định và giao diện liên quan.
Bao gồm các thành phần cơ bản:
BrowserRouter: Được sử dụng phổ biến hơn, nó sử dụng History API có trong HTML5 để theo dõi lịch sử bộ định tuyến của bạn.
Route là ánh xạ giữa một URL và một Component, cho phép khi người dùng truy cập vào một URL trên trình duyệt, Component tương ứng sẽ được hiển thị trên giao diện.
Link: Trong HTML thì cặp thẻ để chuyển hướng đó là thẻ thì trong react chúng ta sẽ dử dụng cặp thẻ được import từ React- Router.
NavLink tương tự như Link trong cách sử dụng, nhưng ưu việt hơn nhờ hỗ trợ các thuộc tính như activeClassName và activeStyle Hai thuộc tính này cho phép đánh dấu và định dạng khi NavLink trùng khớp, giúp cải thiện trải nghiệm người dùng.
2.3.React Redux và Redux-toolkit
Redux là một công cụ quản lý state phổ biến trong hệ sinh thái React, nhưng cũng gây tranh cãi vì nhiều lập trình viên cho rằng nó dài dòng và khó sử dụng Mặc dù cá nhân tôi không thấy quá khó khăn, nhưng thừa nhận rằng quá trình tạo ra một store hoàn chỉnh yêu cầu nhiều bước và tạo ra nhiều file với mã lặp lại Hơn nữa, Redux không cung cấp quy chuẩn rõ ràng cho việc viết logic, và đôi khi cần cài đặt thêm thư viện như middleware và selectors để hoàn thiện logic quản lý state.
Redux Toolkit là một package được phát triển bởi đội ngũ reduxjs, nhằm giải quyết các vấn đề phổ biến khi làm việc với Redux Nó giúp lập trình viên viết mã Redux một cách nhanh chóng, gọn gàng và theo một quy chuẩn thống nhất.
The Store in Redux uniquely maintains the application state, allowing you to access, update, and manage listeners through various helper methods.
Actions are events that facilitate the transfer of data from an application to the Redux store This data can originate from user interactions, API calls, or various objects, and it defines how the state of an application changes in response to an action sent to the store.
Express.js là một framework mạnh mẽ được phát triển dựa trên nền tảng Node.js, cung cấp các tính năng linh hoạt cho việc xây dựng ứng dụng web và di động Với khả năng hỗ trợ các phương thức HTTP và middleware, Express.js giúp tạo ra các API hiệu quả và dễ sử dụng.
Rất dễ học: có thể sử dụng ngôn ngữ JavaScript dễ học, không cần học thêm ngôn ngữ mới.
Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụng Expressjs
Mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Node.JavaScript Do đó, mã sẽ được thực hiện một cách nhanh chóng và dễ dàng.
Expressjs rất đơn giản để tùy chỉnh và sử dụng theo nhu cầu.
Cung cấp một module phần mềm trung gian linh hoạt và rất hữu ích để thực hiện các tác vụ bổ sung theo phản hồi và yêu cầu.
Hỗ trợ phát triển ứng dụng theo mô hình MVC, đây là mô hình phổ biến cho việc lập trình web hiện nay.
Mongoose là một framework JavaScript phổ biến cho ứng dụng Node.js, tích hợp với cơ sở dữ liệu MongoDB Nó cho phép người dùng định nghĩa các đối tượng thông qua một schema rõ ràng, giúp ánh xạ hiệu quả tới các document trong MongoDB.
Mongoose là thư viện ODM (Object Data Model) dành cho MongoDB và Node.js, giúp quản lý mối quan hệ dữ liệu hiệu quả Thư viện này cung cấp khả năng xác nhận giản đồ và hỗ trợ việc chuyển đổi giữa các đối tượng trong mã và cách biểu diễn chúng trong MongoDB.
JWT là một phương tiện đại diện cho các yêu cầu chuyển giao giữa hai bên
In a client-server architecture, JWT (JSON Web Token) consists of information formatted in JSON, with the token divided into three parts: the header, the payload, and the signature, each separated by a period.
Cấu trúc của JSON Web Token:
Header: chứa kiểu dữ liệu và thuật toán sử dụng mã hóa
Payload: chứa các thông tin muốn đặt trong chuỗi
The signature is generated by encoding the header and payload along with a secret key For example, the data is created by combining the base64url-encoded header and payload, resulting in a signature calculated as Hash(data, secret) The base64UrlEncoder is the algorithm used for encoding the header and payload.
Bằng cách sử dụng thuật toán HS256, hai chuỗi cùng với khóa bí mật sẽ tạo ra một chuỗi chữ ký (signature) Khi kết hợp ba chuỗi này, chúng ta sẽ nhận được một chuỗi JWT hoàn chỉnh.
Xác thực là trường hợp phổ biến nhất khi sử dụng JWT Sau khi người dùng đăng nhập, các yêu cầu tiếp theo sẽ bao gồm mã JWT, cho phép truy cập vào các URL, dịch vụ và tài nguyên được cấp quyền bởi mã Token Phương pháp này không bị ảnh hưởng bởi Cross-Origin Resource Sharing (CORS) vì không sử dụng cookie.
JSON Web Token (JWT) là một phương pháp hiệu quả để trao đổi thông tin an toàn giữa các thành viên, nhờ vào phần chữ ký (signature) của nó.
Phân tích và thiết kế hệ thống
Xây dựng hệ thống
Hình 3.1.1.3 Sơ đồ kiến trúc hệ thống
Bảng 3.1.2.1 Kiến trúc hệ thống
Sử dụng ReactJS để tạo giao diện người dùng, Controller xử lý yêu cầu từ View và lấy dữ liệu cho View thông qua RestfulAPI, trong khi thư viện Axios được sử dụng để kết nối giữa các thành phần này.
2 Backend Controller Nơi tiếp nhận các yêu cầu từ Frontend
Model Lưu trữ và truy xuất dữ liệu từ database
3 Database Nơi lưu trữ các thông tin của người dùng
Phân tích yêu cầu
Bảng 3.2.1.2 Yêu cầu chức năng
Nhóm chức năng Chức năng Mô tả
Người dùng có thể đăng ký tài khoản mới để bắt đầu trải nghiệm dịch vụ, sau đó đăng nhập vào tài khoản của mình Để tìm kiếm sản phẩm phù hợp với nhu cầu, người dùng chỉ cần nhập thông tin cần thiết.
Xem tin tức Trang tin tức cho người dùng Đánh giá sản phẩm Người dùng cho đánh giá sản phẩm Thêm sản phẩm vào giỏ hàng
Người dùng thêm sản phẩm mới vào giỏ hàng Sửa sản phẩm trong giỏ hàng
Người dùng sửa thông tin sản phẩm trong giỏ hangf Xóa sản phẩm trong giỏ hàng
Người dùng xóa sản phẩm có trong giỏ hàng
Quản lý đơn hàng bao gồm các chức năng như xử lý tình trạng đơn hàng, thêm sản phẩm mới, sửa sản phẩm đã chọn, xóa sản phẩm không cần thiết và thêm tin tức mới.
Sửa tin tức Quản lý sửa tin tức được chọn Xóa tin tức Quản lý xóa tin tức được chọn 3.2.2.Yêu cầu phi chức năng
Đảm bảo tính bảo mật là yếu tố quan trọng trong việc bảo vệ thông tin dữ liệu của người dùng, ngăn chặn các cuộc tấn công từ bên ngoài và giảm thiểu rủi ro, đồng thời ngăn chặn rò rỉ thông tin tài khoản người dùng.
Tính tiện dụng: Phần mềm thân thiện với người dùng, dễ sử dụng.
Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, nhanh chóng.
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ên nhiều hệ điều hành khác nhau.
Sơ đồ use-case
Hình 3.2.2.4 Sơ đồ use-case
Hình 3.2.2.5 Sơ đồ phân rã use-case
1 Người dùng Là người dùng sử dụng website
2 Quản trị viên Là quản trị viên quản lý website admin
Bảng 3.3.2.4 Danh sách use-case
1 Đăng ký Đăng ký tài khoản mới cho người dùng
2 Đăng nhập Người dùng đăng nhập vào tài khoản
3 Tìm kiếm Người dùng nhập thông tin để tìm kiếm sản phẩm theo nhu cầu
4 Xem tin tức Trang tin tức cho người dùng
5 Đánh giá sản phẩm Người dùng cho đánh giá sản phẩm
6 Thêm sản phẩm vào giỏ hàng Người dùng thêm sản phẩm mới vào giỏ hàng
7 Sửa sản phẩm trong giỏ hàng
Người dùng sửa thông tin sản phẩm trong giỏ hangf
8 Xóa sản phẩm trong giỏ hàng Người dùng xóa sản phẩm có trong giỏ hàng
9 Xử lý đơn hàng Quản lý tiến hành xử lý tình trạng đơn hàng
10 Thêm sản phẩm Quản lý thêm sản phẩm mới
11 Sửa sản phẩm Quản lý sửa sản phẩm được chọn
12 Xóa sản phẩm Quản lý xóa sản phẩm được chọn
13 Thêm tin tức Quản lý thêm tin tức mới
14 Sửa tin tức Quản lý sửa tin tức được chọn
15 Xóa tin tức Quản lý xóa tin tức được chọn
Sơ đồ use-case
Luồng chính 1 Người dùng nhấn vào nút đăng ký
2 Người dùng nhập thông tin để đăng ký tài khoản
3 Nhấn đăng ký để tiến hành đăng ký
4 Thông báo đăng ký thành công Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Không có Điều kiện sau Tạo một tài khoản mới cho người dùng
Bảng 3.4.2.6 Đặc tả use-case Đăng nhập
Tên use-case Đăng nhập
Mô tả Người dùng đăng nhập vào tài khoản
Luồng chính 1 Người dùng nhấn vào nút đăng nhập
2 Người dùng nhập thông tin để đăng nhập tài khoản
3 Nhấn đăng nhập để tiến hành đăng nhập
4 Thông báo đăng nhập thành công Luồng phụ 3.1 Thông báo lỗi khi người dùng nhập sai định dạng
3.2 Thông báo lỗi khi tên tài khoản hoặc mật khẩu sai Yêu cầu đặc biệt
Không có Điều kiện trước Người dùng đã có một tài khoản trước đó Điều kiện sau Tạo một tài khoản mới cho người dùng
Bảng 3.4.3.7 Đặc tả use-case Tìm kiếm
Tên use-case Tìm kiếm
Mô tả Người dùng tiến hành tìm kiếm sản phẩm
Luồng chính 1 Người dùng nhập tên sản phẩm vào ô tìm kiếm
2 Người dùng chọn các bộ lọc, tùy chính
3 Hiển thị danh sách các sản phẩm sau khi được lọc Luồng phụ Không có
Không có Điều kiện trước Không có Điều kiện sau Dang sách các sản phẩm sau khi được lọc
Bảng 3.4.4.8 Đặc tả use-case Xem tin tức
Tên use-case Xem tin tức
Mô tả Người dùng xem tin tức từ hệ thống
Luồng chính 1 Người dùng nhấn vào nút tin tức
2 Người dùng nhấn vào tin tức để xem chi tiết Luồng phụ Không có
Không có Điều kiện trước Không có Điều kiện sau Không có
Bảng 3.4.5.9 Đặc tả use-case Đánh giá sản phẩm
Tên use-case Đánh giá sản phẩm
Mô tả Người dùng đánh giá sản phẩm được chọn
Luồng chính 1 Người dùng nhấn vào sản phẩm
2 Người dùng nhập vào phần đánh giá sản phẩm Điều kiện trước Không có Điều kiện sau Không có
3.4.6.Thêm sản phẩm vào giỏ hàng
Bảng 3.4.6.10 Đặc tả use-case Thêm sản phẩm vào giỏ hàng
Tên use-case Thêm sản phẩm vào giỏ hàng
Mô tả Người dùng thêm sản phẩm vào giỏ hàng
Luồng chính 1 Người dùng nhấn vào sản phẩm
2 Người dùng nhấn vào nút thêm vào giỏ hàng
3 Nhấn thêm Luồng phụ Không có
Không có Điều kiện trước Người dùng đã đăng nhập trước đó Điều kiện sau Thêm sản phẩm đã chọn vào giỏ hàng
3.4.7.Sửa sản phẩm trong giỏ hàng
Bảng 3.4.7.11 Đặc tả use-case Sửa sản phẩm trong giỏ hàng
Tên use-case Sửa sản phẩm trong giỏ hàng
Mô tả Người dùng sửa sản phẩm trong giỏ hàng
Luồng chính 1 Người dùng nhấn vào sản phẩm trong giỏ hàng
2 Người dùng điều chỉnh các tùy chỉnh theo nhu cầu Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Người dùng đã đăng nhập trước đó Điều kiện sau Sửa một hồ sơ khám bệnh cho người dùng
3.4.8.Xóa sản phẩm trong giỏ hàng
Bảng 3.4.8.12 Đặc tả use-case Xóa sản phẩm trong giỏ hàng
Tên use-case Xóa sản phẩm trong giỏ hàng
Mô tả Người dùng xóa sản phẩm trong giỏ hàng
Luồng chính 1 Người dùng nhấn vào sản phẩm trong giỏ hàng
2 Người dùng nhấn vào nút xóa sản phẩm
3 Nhấn xác nhận Luồng phụ Không có
Không có Điều kiện trước Người dùng đã đăng nhập trước đó Điều kiện sau Xóa sản phẩm đã chọn khỏi giỏ hàng
Bảng 3.4.9.13 Đặc tả use-case Xử lý đơn hàng
Tên use-case Xử lý đơn hàng
Mô tả Quản lý xử lý đơn hàng
Luồng chính 1 Quản lý nhấn vào danh sách đơn hàng
2 Chọn đơn hàng để xử lý
3 Thông báo xử lý thành công Luồng phụ Không có
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Cập nhật đơn hàng ở hệ thống
Mô tả Quản lý thêm sản phẩm mới
Luồng chính 1 Quản lý nhấn vào thêm sản phẩm
2 Quản lý nhập những thông tin cần thiết
4 Thông báo thêm thành công Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm sản phẩm mới ở hệ thống
Bảng 3.4.11.15 Đặc tả use-case Sửa sản phẩm
Tên use-case Sửa sản phẩm
Mô tả Quản lý sửa sản phẩm được chọn
Luồng chính 1 Quản lý nhấn vào sản phẩm
2 Sửa thông tin sản phẩm được chọn
4 Thông báo sửa thành công Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa sản phẩm được chọn ở hệ thống
Bảng 3.4.12.16 Đặc tả use-case Xóa sản phẩm
Tên use-case Xóa sản phẩm
Mô tả Quản lý xóa sản phẩm
Luồng chính 1 Quản lý nhấn vào sản phẩm
2 Nhấn xóa sản phẩm được chọn
4 Thông báo xóa thành công Luồng phụ Không có
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa sản phẩm được ở hệ thống
Bảng 3.4.13.17 Đặc tả use-case Thêm tin tức
Tên use-case Thêm tin tức
Mô tả Quản lý thêm tin tức mới
Luồng chính 1 Quản lý nhấn vào tin tức
3 Nhập cái thông tin cần thiết để thêm tin tức
4 Thông báo thêm thành công Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Thêm tin tức mới ở hệ thống
Bảng 3.4.14.18 Đặc tả use-case Sửa tin tức
4 Thông báo sửa thành công Luồng phụ Thông báo lỗi khi người dùng nhập sai định dạng
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Sửa tin tức được chọn ở hệ thống
Bảng 3.4.15.19 Đặc tả use-case Xóa tin tức
Tên use-case Xóa dịch vụ
Mô tả Quản lý xóa dịch vụ được chọn
Luồng chính 1 Quản lý nhấn vào dịch vụ
2 Nhân xóa dịch vụ được chọn
4 Thông báo xóa thành công Luồng phụ Không có
Không có Điều kiện trước Quản lý đăng nhập vào tài khoản quản lý Điều kiện sau Xóa dịch vụ được chọn ở hệ thống
Xây dựng website
Giao diện bên phía người dùng
Trang chủ là nơi giới thiệu tổng quan cửa hàng và trưng bày một số sản phẩm nổi bật của cửa hàng.
Hình 4.1.2.7 Màn hình đăng nhập
Người dùng tiến hành đăng nhập để có thể tiến hành thanh toán
Hình 4.1.3.8 Màn hình đăng ký
Người dùng nhập thông tin để tạo tài khoản mới
Người dùng có thể truy cập và xem những tin tức mới nhất của cửa hàng
Hình 4.1.5.10 Màn hình giỏ hàng
Người dùng có thể quản lý giỏ hàng của mình
Giao diện bên phía người dùng
Hình 4.2.1.11 Màn hình đăng nhập
Quản trị viên phải đăng nhập để tiếp tục
Người quản trị hệ thống có khả năng theo dõi tổng quan các luồng dữ liệu trong hệ thống, bao gồm doanh số, yêu cầu cần xử lý và các biểu đồ liên quan đến doanh thu Mỗi số liệu và biểu đồ đều cho phép người dùng nhấp vào để hiển thị danh sách dữ liệu tương ứng, giúp quản lý thông tin một cách hiệu quả.
4.2.3.Danh sách các hãng sản phẩm
Hình 4.2.3.13 Màn hình các hãng sản phẩm
Giao diện hiển thị dạng danh sách, giúp người quản trị có thể dễ dàng thêm mới hoặc thay đổi thông tin những dữ liệu cần thiết.
Hình 4.2.4.14 Màn hình danh sách sản phẩm
Người quản trị hệ thống có khả năng quản lý sản phẩm bằng cách thêm, xóa hoặc sửa đổi các sản phẩm hiện có Họ cũng có thể chỉnh sửa mô tả sản phẩm và quản lý các bình luận cũng như đánh giá từ người dùng.