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 Nó giúp giao tiếp và tiếp cận khách hàng hiệu quả, đồng thời nắm bắt nhu cầu và phản hồi từ 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 cường uy tín của 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 bền vững.
Hiện nay, có nhiều thư viện và framework hỗ trợ xây dựng và phát triển ứng dụng web nhanh chóng.
ReactJS hỗ trợ các lập trình viên xây dựng giao diện người dùng linh hoạt thông qua việc sử dụng các component, giúp dễ dàng tái sử dụng và bảo trì Bên cạnh đó, ReactJS còn áp dụng Virtual DOM để nâng cao hiệu suất của ứ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 các APIs dễ hiểu và linh hoạt Nó cho phép lập trình viên tùy chỉnh và mở rộng ứng dụng theo nhu cầu cụ thể, mang lại sự tiện lợi và hiệu quả trong việc xây dựng các giải pháp web.
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: o Quản lý thông tin sản phẩm o Quản lý giỏ hàng o Tìm kiếm sản phẩm theo nhu cầu
9 o Phân loại các sản phẩm o Đá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 sử dụng ReactJS để phát triển 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 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 chỉ cập nhật 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 thể hiện một phần hoặc tính năng cụ thể, có khả năng được tổng hợp và lồng ghép trong các phần khác nhau của ứ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à khái niệm quan trọng trong ReactJS, đóng vai trò là cơ chế tối ưu hóa khi làm việc với DOM (Document Object Model) trong ứng dụng web Để hiểu rõ về Virtual DOM, trước tiên chúng ta cần nắm bắt khái niệm về DOM.
DOM là cấu trúc biểu diễn của tài liệu HTML hoặc XML, cho phé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 ứ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 và chỉ cập nhật những phần thay đổi trên DOM thực tế, thay vì toàn bộ DOM Cách tiếp cận này giúp cải thiện hiệu suất và tối ưu hóa quá trình render của ứng dụng Hơn nữa, Virtual DOM cho phép React gom nhóm nhiều thay đổi vào một lần cập nhật, giảm thiểu số lần truy cập và cập nhật.
Hình 2.1.2.2.1 Mô tả Virtual DOM
Trong ReactJS, "props" (viết tắt của "properties") là phương thức dùng để truyền dữ liệu từ thành phần cha xuống các thành phần con, cho phép chuyển giao các giá trị tĩnh giữa các thành phần trong ứng dụng.
Khi một thành phần nhận giá trị "prop" từ thành phần cha, nó có thể sử dụng giá trị đó để 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, 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 để hiển thị dữ liệu mới.
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ủa Component, các phương thức sẽ được gọi theo từng giai đoạn khác nhau Hình ảnh minh họa dưới đây cho thấy vòng đời của Component và các phương thức tương ứng được kích hoạt trong các giai đoạn này.
Hình 2.1.2.4.1 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 định tuyến luồng dữ liệu trong ứng dụng một cách rõ ràng, cho phép bạn xác định mối liên hệ giữa URL và Route tương ứng cùng với 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à quá trình định nghĩa mối liên kết giữa một URL và một Component Khi người dùng truy cập 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ờ vào các thuộc tính bổ sung như activeClassName và activeStyle Hai thuộc tính này cho phép NavLink tự động áp dụng kiểu dáng khi đường dẫn khớp, giúp cải thiện trải nghiệm người dùng.
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 nhiều tranh cãi vì nhiều lập trình viên cho rằng nó phức tạp và dài dòng Mặc dù tôi không thấy quá khó khăn, nhưng việc tạo ra một store hoàn chỉnh đòi hỏi 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à thường cần cài đặt thêm các thư viện như middleware và selectors để hoàn thiện logic quản lý state.
Redux-toolkit là một gói phần mềm được phát triển bởi đội ngũ reduxjs, nhằm khắc phục nhiều vấn đề trong việc sử dụng 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à tuân theo các tiêu chuẩn nhất quán.
The store in Redux is responsible for maintaining the unique application state, allowing users to access, update, and manage listeners through helper methods.
Actions are events that facilitate the transmission of data from an application to the Redux store This data can originate from user interactions with the app, API calls, or form submissions.
Reducers are primitive functions that take the current state of an application, perform an action, and return a new state These states are stored as distinct entities.
18 objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.
Expressjs
Express.js là một framework mạnh mẽ được phát triển dựa trên nền tảng Node.js, giúp đơn giản hóa quá trình phát triển ứng dụng web và di động Nó hỗ trợ đầy đủ các phương thức HTTP và middleware, cho phép tạo ra các API hiệu quả và dễ sử dụng Những ưu điểm này làm cho Express.js trở thành lựa chọn hàng đầu cho các nhà phát triển.
• 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
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ạ dữ liệu tới các tài liệu trong MongoDB một cách hiệu quả.
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ệ giữa dữ liệu Thư viện này cung cấp xác nhận giản đồ và cho phép dịch chuyển giữa các đối tượng trong mã và biểu diễn chúng trong MongoDB.
JSON Web Token
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) contains information formatted in JSON The token consists of three parts: the header, the payload, and the signature, which are separated by periods (".").
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
A signature in JWT is generated by encoding the header and payload along with a secret key This process involves using base64url encoding for both the header and payload, resulting in a data string formatted as data = base64urlEncode(header) + "." + base64urlEncode(payload) The signature is then created by applying a hashing algorithm, such as HS256, to this data string combined with the secret key By combining the header, payload, and signature, a complete JWT string is formed.
Xác thực là một trong những ứng dụng phổ biến nhất của 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 tương ứng vớ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 thức hiệu quả để truyền tải thông tin an toàn giữa các bên, nhờ vào phần chữ ký (signature) của nó Người nhận có thể xác định danh tính người gửi thông qua chữ ký, được tạo ra từ sự kết hợp giữa phần header và payload Điều này cho phép xác minh tính toàn vẹn của chữ ký, giúp phát hiện việc giả mạo thông tin.
Phân tích và thiết kế hệ thống
Xây dựng hệ thống
Hình 3.1.1.1 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 sẽ xử lý các yêu cầu từ người dùng và lấy dữ liệu cho View thông qua RestfulAPI, trong khi thư viện Axios đảm nhận việc 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.1 Yêu cầu chức năng
Nhóm chức năng Chức năng Mô tả
Người dùng Đăng ký Đăng ký tài khoản mới cho người dùng
21 Đăng nhập Người dùng đăng nhập vào tài khoản
Người dùng có thể tìm kiếm sản phẩm theo nhu cầu bằng cách nhập thông tin, xem tin tức cập nhật từ trang tin tức, đánh giá các sản phẩm mà họ đã trải nghiệm và dễ dàng thêm sản phẩm vào giỏ hàng để tiến hành mua sắm.
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 quan trọng như xử lý tình trạng đơn hàng, thêm sản phẩm mới, sửa đổi 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 để cập nhật thông tin cho khách hàng.
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 thông tin dữ liệu người dùng là yếu tố quan trọng, nhằm ngăn chặn các cuộc tấn công từ bên ngoài và giảm thiểu tối đa rủi ro cũng như khả năng rò rỉ thông tin tài khoản.
• 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.1 Sơ đồ use-case
Hình 3.2.2.2 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.1 Danh sách use-case
STT Tên use-case Ý nghĩa
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
Bảng 3.4.1.1 Đặc tả use-case Đăng ký
Tên use-case Đăng ký
Mô tả Người dùng đăng ký tài khoản mới
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
Yêu cầu đặc biệt 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.1 Đặ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 đó
25 Đ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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 Đặ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
3 Người dùng nhấn gửi Luồng phụ Không có
Yêu cầu đặc biệt Không có Đ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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 Đặ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
Yêu cầu đặc biệt 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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 Đặ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ó
Yêu cầu đặc biệt 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
Bảng 3.4.10.1 Đặc tả use-case Thêm sản phẩm
Tên use-case Thêm sản phẩm
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
Yêu cầu đặc biệt 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.1 Đặ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
Yêu cầu đặc biệt 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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 Đặ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
Yêu cầu đặc biệt 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.1 Đặc tả use-case Sửa tin tức
Tên use-case Sửa tin tức
Mô tả Quản lý sửa tin tức mới
Luồng chính 1 Quản lý nhấn vào tin tức
2 Sửa tin tức được chọn
3 Nhập cái thông tin cần thiết để 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
Yêu cầu đặc biệt 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.1 Đặ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ó
Yêu cầu đặc biệt 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.1 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.1 Màn hình đăng ký
Người dùng nhập thông tin để tạo tài khoản mới
Hình 4.1.4.1 Màn hình tin tức
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.1 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.1 Màn hình đăng nhập
Quản trị viên phải đăng nhập để tiếp tục
Hình 4.2.2.1 Màn hình tổng quan
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 xử lý và 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 để xem danh sách chi tiết liên quan đến dữ liệu tương ứng.
4.2.3.Danh sách các hãng sản phẩm
Hình 4.2.3.1 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.1 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ó thể chỉnh sửa mô tả sản phẩm, cũng như quản lý các bình luận và đánh giá từ người dùng.
