Đồ án tìm hiểu reactjs và xây dựng website

Danh sách yêu cầu của hệ thống đối với Admin chú 2 Quản lý sản phẩm Admin sẽ thực hiện thêm, xóa và cập nhật sản phẩm 3 Quản lý đơn hàng Admin có thể xem và cập nhật trạng thái của đơn

GIỚI THIỆU CHUNG

Đề tài

- Tên đề tài: Tìm hiểu Reactjs và xây dựng website bán đồ gia dụng

- Cơ sở dữ liệu: MongoDB, Firebase

Lý do chọn đề tài

Trong thời kỳ công nghệ ngày càng phát triển, Internet ứng dụng rộng rãi đã thay đổi cách mọi người mua sắm trang thiết bị gia dụng Nhận thức được nhu cầu này, nhóm đã xây dựng một website thương mại điện tử chuyên về đồ gia dụng để giúp khách hàng dễ dàng tìm hiểu, lựa chọn và mua sắm các thiết bị gia đình Để đảm bảo giao diện website linh hoạt và thân thiện, nhóm đã nghiên cứu và chọn công nghệ Reactjs, một trong những công nghệ lập trình giao diện phổ biến và được đông đảo lập trình viên sử dụng để phát triển phần mềm hiện nay.

Tóm tắt đề tài

Website bán hàng gia dụng được xây dựng để đáp ứng như cầu tìm hiểu, lựa chọn và mua sắm của mọi gia đình.

Mục tiêu đề tài

Bạn có thể xây dựng một trang web bằng công nghệ ReactJS với các chức năng cơ bản đáp ứng nhu cầu của người dùng, đồng thời mở rộng kiến thức về lập trình website, API và Service Việc học hỏi các công nghệ mới giúp nâng cao kỹ năng lập trình và phát triển các dự án web hiệu quả hơn Sử dụng ReactJS giúp tạo ra giao diện người dùng linh hoạt, dễ bảo trì và tối ưu hiệu suất cho trang web của bạn Ngoài ra, nắm vững API và Service là chìa khóa để tích hợp dữ liệu và mở rộng chức năng cho ứng dụng web, mang lại trải nghiệm tốt nhất cho người dùng.

- Tìm hiểu được công nghệ thích hợp xây dựng ứng dụng

- Hoàn thành được báo cáo môn học.

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

- Nghiên cứu các Website có sẵn trên thị trường, nhận xét được ưu khuyết điểm của các Website đó

- Nghiên cứu các tài liệu đặc tả về các Website tương tự như Website https://www.dienmayxanh.com/, https://www.nguyenkim.com/, …

- Tìm hiểu các công nghệ mới trên thị trường, nhận xét và chọn ra những công nghệ thích hợp để xây dựng website

- Tiếp tục phát triển Website từ môn học Đồ án 1 và phát triển website cho quản trị viên.

Ý nghĩa và hướng của đề tài

- Sử dụng nguồn tài liệu tham khảo về Reactjs, NodeJs, MongoDB

- Có tài liệu đặc tả use-case, sơ đồ lớp, tuần tự, mô hình thiết kế giao diện

- Tạo ra website mua sắm với một số tính năng cơ bản

- Chức năng phù hợp với tình hình thực tế và dễ sử dụng.

CÔNG NGHỆ LIÊN QUAN

Reactjs

ReactJS là thư viện JavaScript mã nguồn mở chuyên về xây dựng giao diện người dùng tương tác cao cho ứng dụng web và di động Được phát triển dựa trên kiến trúc component, ReactJS giúp tạo ra các UI nhanh chóng và hiệu quả Nó tập trung vào tầng view của ứng dụng, mang lại trải nghiệm người dùng mượt mà và linh hoạt.

ReactJS là một framework phổ biến được các công ty lớn và startup tin dùng, như Netflix, Airbnb, Instagram và New York Times, nhờ vào những lợi ích vượt trội cho lập trình viên Nó mang lại hiệu quả cao, khả năng mở rộng linh hoạt và dễ dàng quản lý giao diện người dùng phức tạp, khiến ReactJS trở thành lựa chọn ưu việt so với các framework khác như Angular.

Trong kiến trúc Model View Controller (MVC), tầng View đảm nhận trách nhiệm chính về giao diện người dùng của ứng dụng ReactJS, một thư viện JavaScript phổ biến để xây dựng giao diện, được tạo ra bởi kỹ sư phần mềm Jordan Walke tại Facebook, nhằm tối ưu hóa khả năng xây dựng các ứng dụng web tương tác cao.

1.2 Tính năng nổi bật của ReactJs:

JSX, hay JavaScript Syntax Extension, là phần mở rộng cú pháp cho JavaScript dùng cùng ReactJS để mô tả giao diện người dùng một cách trực quan Nhờ JSX, lập trình viên có thể viết cấu trúc HTML trong cùng một tệp với mã JavaScript, giúp mã rõ ràng hơn và dễ dàng gỡ lỗi Điều này loại bỏ sự phức tạp của các cấu trúc DOM JavaScript truyền thống.

Virtual DOM là một định dạng dữ liệu nhẹ của JavaScript, được sử dụng để thể hiện nội dung của DOM – Document Object Model – tại một thời điểm nhất định Khi trạng thái của một đối tượng thay đổi, Virtual DOM chỉ cập nhật đối tượng đó trong DOM thực thay vì làm mới toàn bộ các đối tượng, giúp tăng hiệu suất và tối ưu hóa quá trình render của trang web.

- Performance: ReactJS sử dụng VDOM, giúp các ứng dụng web chạy nhanh hơn nhiều so với những ứng dụng được phát triển với các Framework front-end khác

- Redux: Redux là một phần cực kỳ quan trọng trong ReactJS Bản thân của

ReactJS không có các module chuyên dụng để xử lý dữ liệu, nên được triển khai độc lập và chia nhỏ thành các component riêng biệt Điều này giúp quản lý dễ dàng hơn và các thành phần trong ứng dụng liên kết chặt chẽ với nhau, tối ưu hóa hiệu suất phát triển giao diện người dùng.

ReactJS được xây dựng dựa trên nguyên lý component-based, giúp phát triển giao diện người dùng linh hoạt và tái sử dụng cao Khác với các framework khác chủ yếu sử dụng template, React tập trung vào việc tạo ra các thành phần độc lập, dễ quản lý Để xây dựng một component đầy đủ tính năng trong React, bạn chỉ cần sử dụng phương thức createClass, nhận vào một đối tượng mô tả các đặc tính của component đó Nhờ vậy, React giúp lập trình viên dễ dàng tổ chức mã nguồn và tối ưu hóa quá trình phát triển ứng dụng web.

ReactJS giúp dễ dàng tạo các ứng dụng web động nhờ vào khả năng giảm thiểu mã hóa và cung cấp nhiều chức năng tích hợp sẵn, giúp tiết kiệm thời gian và công sức phát triển so với các nền tảng khác.

JavaScript, nơi việc viết mã thường trở nên phức tạp rất nhanh

ReactJS cải thiện hiệu năng ứng dụng bằng cách xây dựng Virtual DOM và lưu trữ chúng trong bộ nhớ, giúp cập nhật nhanh chóng khi DOM thực tế thay đổi Việc cập nhật liên tục này giúp tránh gián đoạn trong quá trình vận hành, đem lại trải nghiệm mượt mà cho người dùng Website ổn định và liên tục sử dụng góp phần giữ chân khách hàng, nâng cao doanh thu và thúc đẩy tăng trưởng vượt bậc cho doanh nghiệp.

Các component có thể tái sử dụng:

• Các thành phần là các khối xây dựng của bất kỳ ứng dụng ReactJS nào và một ứng dụng đơn lẻ thường bao gồm nhiều thành phần

Các thành phần này có cấu trúc hợp lý và dễ kiểm soát, giúp dễ dàng tái sử dụng trong toàn bộ ứng dụng Nhờ đó, việc phát triển ứng dụng trở nên nhanh chóng và tiết kiệm thời gian hơn, nâng cao hiệu quả quy trình phát triển phần mềm.

NodeJs

NodeJs là một nền tảng phát triển độc lập dựa trên V8 JavaScript engine, cho phép tạo các ứng dụng web như video clip và diễn đàn một cách dễ dàng và mở rộng nhanh chóng NodeJS có khả năng hoạt động trên nhiều hệ điều hành khác nhau như Windows, Linux và OS X, mang lại lợi thế về khả năng linh hoạt đa nền tảng Ngoài ra, NodeJS cung cấp thư viện phong phú dưới dạng các mô-đun JavaScript, giúp đơn giản hóa quá trình lập trình và giảm thiểu thời gian triển khai dự án.

2.2 Tính năng nổi bật của NodeJs

NodeJS được sử dụng để thiết kế và xây dựng các ứng dụng mạng mở rộng dễ dàng hơn Khi muốn ứng dụng web hỗ trợ nhiều người dùng cùng lúc, cần bổ sung thêm nhiều máy chủ, điều này dẫn đến tăng chi phí máy chủ, lưu lượng dữ liệu và nhân công vận hành Thêm vào đó, việc sử dụng nhiều máy chủ đòi hỏi chia sẻ tài nguyên giữa các máy chủ, làm phức tạp quản lý và tối ưu hóa hệ thống.

NodeJS đã cải thiện phương thức kết nối với máy chủ bằng cách mỗi kết nối chỉ tạo ra một sự kiện chạy trong tiến trình của NodeJS, không tạo ra nhiều chuỗi hệ điều hành như trước, giúp việc mở rộng ứng dụng web trở nên dễ dàng và không gặp lỗi Để đạt được điều này, NodeJS sở hữu nhiều tính năng vượt trội, trong đó một trong những tính năng quan trọng nhất là khả năng xử lý bất đồng bộ hiệu quả.

• Không đồng bộ và hướng sự kiện: Tất cả các API của thư viện NodeJS đều không đồng bộ

• Rất nhanh: NodeJS được xây dựng trên JavaScript V8 của Google Chrome Vì thế, thư viện NodeJS thực thi mã với tốc độ cực nhanh

• Là nền tảng Single Threaded nhưng có khả năng mở rộng cao

• No Buffering: các ứng dụng của NodeJS không đệm bất kỳ dữ liệu nào bao giờ, chúng chỉ xuất dữ liệu trong khối

• License: NodeJS phát hành theo giấy phép của MIT

2.3 Lý do sử dụng NodeJs

Node.js nổi bật với tốc độ xử lý nhanh, là yếu tố quan trọng đối với các startup muốn phát triển sản phẩm lớn và mở rộng quy mô một cách hiệu quả Khả năng xử lý nhanh của Node.js giúp đảm bảo website của bạn có thể đáp ứng lượng lớn người dùng khi doanh nghiệp phát triển, mang lại trải nghiệm mượt mà và tối ưu.

- 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ển mạnh mẽ

- Cộng đồng hỗ trợ tích cực

- Cho phép stream các file có kích thước lớn

MongoDB

MongoDB là một dạng phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL

MongoDB là nền tảng quản lý dữ liệu đa nền tảng, được thiết kế để phục vụ đối tượng người dùng đa dạng Hệ thống hoạt động dựa trên các khái niệm chính là Collection và Document, giúp tổ chức và lưu trữ dữ liệu một cách dễ dàng và có cấu trúc Với hiệu suất cao, khả năng hoạt động liên tục và dễ mở rộng, MongoDB là giải pháp phù hợp cho các doanh nghiệp muốn tối ưu hóa quản lý dữ liệu trên nhiều nền tảng khác nhau.

Các Collection trong MongoDB có cấu trúc linh hoạt, cho phép dữ liệu không cần tuân theo một dạng cấu trúc cố định, phù hợp với các dữ liệu đa dạng và phức tạp Nhờ đó, MongoDB có khả năng lưu trữ dữ liệu có cấu trúc linh hoạt và phong phú, giúp tối ưu hóa khả năng quản lý dữ liệu mềm dẻo Dữ liệu trong MongoDB được lưu trữ theo định dạng JSON, tạo điều kiện thuận lợi cho việc xử lý và truy vấn dữ liệu dễ dàng và hiệu quả.

3.2 Tính năng nổi bật của MongoDB

Truy vấn ad hoc là một trong những tính năng nổi bật của MongoDB, giúp thực hiện các truy vấn phạm vi linh hoạt và kết hợp tìm kiếm biểu thức để trả về các tài liệu chính xác theo kích thước mong muốn Ngoài ra, các trường dữ liệu trong MongoDB còn được sử dụng để xây dựng các chỉ mục chính và phụ, tối ưu hóa hiệu suất truy vấn.

MongoDB cung cấp Replica Set cho phép nhân 2 hoặc nhiều bản sao của dữ liệu Đồng thời, mỗi bản sao lại đóng vai trò chính và phụ

- Khi nhân rộng, toàn bộ dữ liệu khi ghi và đọc được thực hiện trên bản sao chính

- Bản sao thứ cấp sẽ dùng bản sao tích hợp để có thể duy trì các bản sao dữ liệu

Trong trường hợp bản sao chính gặp sự cố, Replica set sẽ tự động chọn một bản sao thứ cấp để thay thế làm bản sao chính mới Quá trình nhân rộng cho phép các bản sao thứ cấp hoạt động linh hoạt, nhưng dữ liệu cuối cùng vẫn phải tuân theo nguyên tắc mặc định đảm bảo tính nhất quán.

MongoDB sử dụng Sharding để chia tỷ lệ theo chiều ngang và phân phối dữ liệu trong collection, giúp tối ưu hiệu suất và khả năng mở rộng hệ thống Người dùng có thể chọn một Shard key phù hợp để xác định cách dữ liệu được phân phối, từ đó nâng cao hiệu quả truy vấn và quản lý dữ liệu.

MongoDB cân bằng tải hiệu quả nhờ vào việc sử dụng Shard key để chia dữ liệu thành các phạm vi, phân phối đều trên nhiều máy chủ khác nhau Hệ thống có khả năng chạy trên các nút máy chủ riêng biệt và thực hiện chức năng sao chép dữ liệu, giúp cân bằng tải và duy trì hoạt động liên tục của hệ thống Điều này đảm bảo hiệu suất ổn định và khả năng xử lý lỗi phần cứng một cách nhanh chóng và hiệu quả.

Trong hệ quản trị cơ sở dữ liệu MongoDB, tính năng lưu trữ tệp gọi là GridFS giúp cân bằng tải và sao lưu dữ liệu trên nhiều máy tính GridFS chia nhỏ tệp thành nhiều phần và lưu trữ dưới dạng các tài liệu riêng biệt, giúp truy cập dễ dàng thông qua các công cụ như Mongofiles hoặc các plugin dành cho Nginx và Lighttpd.

Chức năng này cung cấp ba giải pháp chính để thực hiện tập hợp dữ liệu bao gồm Aggregation Pipeline, MapReduce và Single-purpose Aggregation Trong đó, Aggregation Pipeline nổi bật với hiệu suất vượt trội, giúp tối ưu hóa quá trình xử lý dữ liệu một cách hiệu quả nhất.

• Giới hạn kích thước collection

Các collection trong MongoDB thường có kích thước cố định, được gọi là collection giới hạn, giúp tối ưu hiệu suất hoạt động liên quan đến dữ liệu Khi dữ liệu vượt quá giới hạn, những tài liệu cũ hơn sẽ tự động bị xóa mà không cần thực hiện lệnh thủ công Việc thiết lập collection giới hạn kết hợp với thứ tự chèn dữ liệu đóng vai trò quan trọng trong việc quản lý dữ liệu hiệu quả.

Bắt đầu từ phiên bản 4.0 ra mắt vào tháng 6 năm 2018, MongoDB được bổ sung thêm tính năng hỗ trợ giao dịch ACID đa tài liệu

3.2 Lý do sử dụng MongoDB

Linh hoạt trong lưu trữ các kích cỡ dữ liệu khác nhau giúp bạn dễ dàng quản lý và tùy chỉnh thông tin Nhờ dữ liệu được lưu dưới dạng JSON, bạn có thể dễ dàng chèn và chỉnh sửa các thông tin theo nhu cầu sử dụng mà không gặp giới hạn nào Điều này mang lại sự linh hoạt, tiện lợi trong việc mở rộng và tối ưu hóa hệ thống dữ liệu của bạn.

MongoDB giúp tiết kiệm thời gian kiểm tra tính tương thích về cấu trúc khi thực hiện các thao tác thêm, xóa hoặc cập nhật dữ liệu, nhờ vào khả năng linh hoạt không có ràng buộc về khuôn khổ hay quy tắc cố định.

Bạn dễ dàng mở rộng hệ thống của mình bằng cách thêm các node vào cluster, giúp hệ thống linh hoạt và mở rộng quy mô dễ dàng hơn Các node này hoạt động như một thư viện chứa dữ liệu, liên kết và giao tiếp với nhau để đảm bảo hiệu suất hoạt động ổn định và liên tục.

MongoDB có tốc độ truy vấn nhanh hơn so với RDBMS nhờ vào khả năng ghi đệm toàn bộ dữ liệu lên bộ nhớ RAM Nhờ đó, các lượt truy vấn sau sẽ rút ngắn thời gian vì không cần phải đọc dữ liệu trực tiếp từ ổ cứng, giúp cải thiện hiệu suất và tốc độ phản hồi của hệ thống.

• Trường dữ liệu “_id” (đại diện cho giá trị duy nhất trong mỗi document) được tự động đánh chỉ mục nên hiệu suất luôn đạt mức cao nhất.

PHÂN TÍCH HỆ THỐNG

Danh sách yêu cầu hệ thống

Dựa trên khảo sát từ người dùng có nhu cầu và phân tích các ứng dụng cạnh tranh, nhóm đã xác định danh sách các nghiệp vụ cần thiết để nâng cao tính năng của ứng dụng Các chức năng này đều hướng đến việc tối ưu trải nghiệm người dùng, đáp ứng đầy đủ các yêu cầu về quản lý và giao dịch Việc xây dựng danh mục nghiệp vụ rõ ràng giúp đảm bảo ứng dụng phù hợp với nhu cầu thực tế, đồng thời dễ dàng mở rộng trong tương lai Các nghiệp vụ này đóng vai trò trọng yếu trong việc nâng cao hiệu quả hoạt động và sự tiện lợi cho người dùng cuối.

Bảng 3.1 Danh sách yêu cầu của hệ thống đối với Admin

STT Tên yêu cầu Ghi chú

1 Đăng nhập Để truy cập vào hệ thống quản lý

2 Quản lý sản phẩm Admin sẽ thực hiện thêm, xóa và cập nhật sản phẩm

3 Quản lý đơn hàng Admin có thể xem và cập nhật trạng thái của đơn hàng

4 Quản lý danh mục sản phẩm Admin sẽ thực hiện thêm, xóa và cập nhật danh mục sản phẩm

5 Quản lý tài khoản admin Admin có thể thêm tài khoản và phân quyền và xóa tài khoản cần xóa

6 Thống kê doanh thu Admin có thể xem thống kê doanh thu hàng tháng

7 Đặt hàng Khách hàng đăng nhập tài khoản để tiến hành thanh toán đơn hàng

Bảng 3.2: Danh sách yêu cầu của hệ thống đối với User

1 Đăng nhập, đăng ký Để thanh toán đơn hàng người dùng phải đăng ký hoặc đăng nhập tài khoản để tiến hành thanh toán đơn hàng

2 Xem sản phẩm Khách hàng sẽ truy cập vào trang web để xem sản phẩm

3 Xem danh mục sản phẩm Khách hàng sẽ truy cập vào trang web để xem danh mục sản phẩm

4 Thêm giỏ hàng Khách hàng sẽ thêm sản phẩm muốn mua vào giỏ hàng

5 Kiểm tra giỏ hàng Khách hàng có thể thêm, xóa và cập nhật sản phẩm

7 Đánh giá sản phẩm Khách hàng có thể đánh giá từng sản phẩm

Đặt tả Use-case

Hình 3.1: Sơ đồ Use-case Bảng 3.2: Danh sách các Actor

Tên Actor Ý nghĩa/Ghi chú

1 Admin Người quản trị trang web

2 Khách hàng Người truy cập sử dụng trang web

Bảng 3.3: Danh sách các Use-case

STT Tên Usecase Ý nghĩa / ghi chú

1 Đăng ký Tạo tài khoản cá nhân để mua hàng

2 Đăng nhập Đăng nhập để thanh toán đơn hàng học đăng nhập để quản trị website

3 Thêm sản phẩm Admin thêm sản phẩm

4 Sửa sản phẩm Admin cập nhật thông tin sản phẩm

5 Xóa sản phẩm Admin xóa sản phẩm

6 Thêm danh mục sản phẩm Admin thêm danh mục sản phẩm

7 Sửa danh mục sản phẩm Admin sửa (cập nhật) danh mục sản phẩm

8 Xóa danh mục sản phẩm Admin xóa danh mục sản phẩm

9 Thêm tài khoản Admin thêm tài khoản đăng nhập

10 Sửa tài khoản Admin sửa tài khoản đăng nhập

11 Xóa tài khoản Admin xoá tài khoản đăng nhập

12 Duyệt đơn hàng Admin duyệt đơn hàng của khách hàng

13 Thống kê báo cáo Admin thống kê báo cáo doanh số đơn hàng

14 Tìm kiếm sản phẩm Admin, khách hàng tìm kiếm sản phẩm trong danh sách

15 Xem thông tin sản phẩm Khách hàng xem thông tin sản phẩm trên website

16 Xem danh mục sản phẩm Khách hàng xem danh mục sản phẩm trên website

17 Thêm giỏ hàng Khách hàng thêm sản phẩm vào giỏ hàng

18 Kiểm tra giỏ hàng Khách hàng kiểm tra sản phẩm trong giỏ hàng

19 Xóa sản phẩm trong giỏ hàng Khách hàng xóa sản phẩm trong giỏ hàng

20 Cập nhật sản phẩm trong giỏ hàng

Khách hàng cập nhật sản phẩm trong giỏ hàng

21 Đặt hàng Khách hàng tiến hàng thanh toán sản phẩm

2.1.1 Đặc tả Use-case “Đăng nhập”

Bảng 3.1.1: Bảng đặc tả Use-case “Đăng nhập”

Mô tả Admin đăng nhập vào website

Hành vi của tác nhân Hành vi của hệ thống

3 - Website kiểm tra thông tin về tài khoản Admin trong hệ thống

4 - Nếu thông tin liên quan hợp lệ, chuyển tiếp vào trang chủ của website

Admin chọn hình thức đăng nhập tài khoản khác:

1 - Admin nhập thông tin về tài khoản và mật khẩu

2 - Nhấn vào nút Đăng nhập

3 - Website kiểm tra thông tin Admin có trong hệ thống

4 - Tiếp tục bước 4 ở dòng sự kiện chính Thông tin đăng nhập không hợp lệ:

1 - Website hiện thông báo lỗi

2 - Website đăng nhập lại bằng thông tin khác

3 - Tiếp tục thực hiện bước 3 ở dòng sự kiện phụ: đăng nhập bằng tài khoản Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau Không đổi

2.1.2 Đặc tả Use-case “Thêm sản phẩm”

Bảng 3.1.2: Bảng đặc tả Use-case “Thêm sản phẩm”

Mô tả Amin muốn thêm một sản phẩm mới

1 – Admin thực hiện đăng nhập vào website quản trị

2 - Admin truy cập vào trang thêm sản phẩm

3 – Nhập thông tin sản phẩm và hoàn thành

4 - Hệ thống hiển thị thông báo đã thêm sản phẩm thành công

Luồng thay thế Không Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau Cập nhật thông tin về sản phẩm lên CSDL

2.1.3 Đặc tả Use-case “Sửa sản phẩm”

Bảng 3.1.3: Bảng đặc tả Use-case “Sửa sản phẩm”

Mô tả Admin muốn cập nhật thông tin sản phẩm

1 – Admin thực hiện đăng nhập vào trang quản trị

2 – Admin chọn vào sản phẩm cần sửa

3 – Admin nhập thông tin cần sửa

5 – Website kiểm tra thông tin sản phẩm

7 - Nếu thông tin hợp lệ, website hiện thông báo cập nhật sản phẩm thành công

8 Nếu thông tin không hợp nệ, website hiện thông báo cập nhật sản phẩm không thành công và yêu cầu nhập lại thông tin

Thông tin thay đổi không hợp lệ:

1 – Website quay về trang cập nhật sản phẩm

2 – Admin nhập lại thông tin sản phẩm

3 – Lưu thông tin sản phẩm Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau Thông tin sản phẩm được cập nhật trên database

2.1.4 Đặc tả Use-case “Xóa sản phẩm”

Bảng 3.1.4: Bảng đặc tả Use-case “Xóa sản phẩm”

Mô tả Admin xóa sản phẩm

2 – Admin chọn vào sản phẩm cần xóa

3 – Admin click xóa sản phẩm

6 - Hệ thống thực hiện xóa Sản phẩm lên CSDL

7 - Màn hình hiển thị sự kiện xóa sản phẩm thành công

Luồng thay thế Không có Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau Hệ thống tạo xóa sản phẩm trong CSDL

2.1.5 Đặc tả Use-case “Thêm danh mục sản phẩm”

Bảng 3.1.5: Bảng đặc tả Use-case “Thêm danh mục sản phẩm”

Mô tả Admin muốn thêm một danh mục sản phẩm mới

2 - Admin truy cập vào trang thêm danh mục sản phẩm

3 – Nhập thông tin danh mục sản phẩm mới và hoàn thành

4 - Hệ thống hiển thị thông báo đã thêm danh mục sản phẩm thành công

Kết nối thành công với server Điều kiện sau Cập nhật thông tin về danh mục sản phẩm lên CSDL

2.1.6 Đặc tả Use-case “Sửa danh mục sản phẩm”

Bảng 3.1.6: Bảng đặc tả Use-case “Sửa danh mục sản phẩm”

Mô tả Admin muốn cập nhật thông tin danh mục sản phẩm

2 – Admin chọn vào danh mục sản phẩm cần sửa

3 – Admin nhập thông tin danh mục sản phẩm cần sửa

5 – Website kiểm tra thông tin danh mục sản phẩm

7 - Nếu thông tin hợp lệ, website hiện thông báo cập nhật danh mục sản phẩm thành công

8 Nếu thông tin không hợp nệ, website hiện thông báo cập nhật danh mục sản phẩm không thành công và yêu cầu nhập lại thông tin

1 – Website quay về trang cập nhật danh mục sản phẩm

2 – Admin nhập lại thông tin danh mục sản phẩm

3 – Lưu thông tin danh mục sản phẩm Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau Thông tin danh mục sản phẩm được cập nhật trên database

2.1.7 Đặc tả Use-case “Xóa danh mục sản phẩm”

Bảng 3.1.7: Bảng đặc tả Use-case “Xóa danh mục sản phẩm”

Mô tả Admin xóa danh mục sản phẩm

Luồng chính Hành vi của tác nhân Hành vi của hệ thống

2 – Admin chọn vào danh mục sản phẩm cần xóa

3 – Admin click xóa danh mục sản phẩm

6 - Hệ thống thực hiện xóa danh mục sản phẩm lên CSDL

7 - Màn hình hiển thị sự kiện xóa danh mục sản phẩm thành công

Kết nối thành công với server Điều kiện sau Hệ thống tạo xóa danh mục sản phẩm trong CSDL

2.1.8 Đặc tả Use-case “Thêm tài khoản đăng nhập”

Bảng 3.1.8: Bảng đặc tả Use-case “Thêm tài khoản đăng nhập”

Mô tả Admin thêm tài khoản đăng nhập

2 – Admin chọn vào thêm tài khoản khác

3 – Admin chọn/ nhập tài khoản muốn thêm

6 - Hệ thống thực hiện thêm tài khoản đăng nhập

7 - Màn hình hiển thị sự thêm tài khoản đăng nhập thành công

Kết nối thành công với server Điều kiện sau Hệ thống ghi nhận tài khoản đăng nhập đã thêm trong CSDL

2.1.9 Đặc tả Use-case “Sửa tài khoản đăng nhập”

Bảng 3.1.9: Bảng đặc tả Use-case “Sửa tài khoản đăng nhập”

Mô tả Admin sửa tài khoản đăng nhập

2 – Admin chọn vào danh mục sửa/ cập nhật tài khoản đăng nhập

3 – Admin click sửa tài khoản đăng nhập

4 – Admin thực hiện chỉnh sửa các thông tin liên quan về tài khoản đã chọn

6 - Hệ thống thực hiện cập nhật tài khoản đăng nhập lên CSDL

7 - Màn hình hiển thị cập nhật tài khoản đăng nhập thành công

Kết nối thành công với server Điều kiện sau Hệ thống cập nhật tài khoản đăng nhập trong CSDL

2.1.10 Đặc tả Use-case “Xóa tài khoản đăng nhập”

Bảng 3.1.10: Bảng đặc tả Use-case “Xóa tài khoản đăng nhập”

Mô tả Admin xóa tài khoản đăng nhập

2 – Admin chọn vào danh mục xóa tài khoản

3 – Admin click xóa tài khoản đã chọn

6 - Hệ thống thực hiện xóa tài khoản đã chọn lên CSDL

7 - Màn hình hiển thị sự kiện xóa tài khoản thành công

Kết nối thành công với server Điều kiện sau Hệ thống tạo xóa tài khoản đã được chọn trong CSDL

2.1.11 Đặc tả Use-case “Duyệt đơn hàng”

Bảng 3.1.11: Bảng đặc tả Use-case “Duyệt đơn hàng”

Mô tả Admin duyệt đơn hàng

2 – Admin chọn vào danh mục duyệt đơn hàng

3 – Admin click duyệt các đơn hàng hiện có

6 - Hệ thống thực hiện lưu thông tin đơn hàng đã được duyệt lên CSDL

7 - Màn hình hiển thị sự kiện duyệt đơn hàng thành công

Kết nối thành công với server Điều kiện sau Hệ thống ghi nhận đơn hàng đã được duyệt trong CSDL

2.1.12 Đặc tả Use-case “Thống kê báo cáo”

Bảng 3.1.12: Bảng đặc tả Use-case “Thống kê báo cáo”

Mô tả Admin thống kê báo cáo doanh thu đơn hàng

2 – Admin chọn vào danh mục thống kê báo cáo

3 – Admin click mục thống kê báo cáo đơn hàng

4 – Admin chọn thời gian cần xuất thống kê báo cáo

4 - Bấm nút Xuất thống kê

6 - Hệ thống thực hiện xuất thống kê, báo cáo doanh thu các đơn hàng từ CSDL

7 - Màn hình hiển thị nội dung thống kê báo cáo trong khoảng thời gian đã được chọn

Kết nối thành công với server Điều kiện sau Hệ thống xuất thống kê báo cáo doanh thu sản phẩm trong CSDL

2.2.1 Đặc tả Use-case “Đăng ký”

Bảng 3.2.1: Bảng đặc tả Use-case “Đăng ký”

Mô tả Tạo tài khoản cá nhân để mua hàng

1 - Người dùng truy cập website

2 - Chọn vào nút Đăng ký tài khoản

3 - Điền đầy đủ thông tin cá nhân được yêu cầu

4 - Nhấn vào nút Đăng ký

5 - Website kiểm tra thông tin tài khoản

6 - Nếu thông tin hợp lệ, hiện thông báo tạo tài khoản thành công, tự động đăng nhập vào website

Thông tin điền vào bị thiếu hoặc sai cú pháp:

1 - Website hiện thông báo lỗi thông tin

2 – Khách hàng nhập lại thông tin bị sai hoặc thiếu

3 - Tiếp tục thực hiện bước 4 ở dòng sự kiện chính

Số điện thoại/email sử dụng đã được đăng ký:

1 - Website báo Tài khoản đã được đăng ký

2 – Khách hàng nhập lại thông tin tài khoản khác

3 - Tiếp tục thực hiện bước 4 ở dòng sự kiện chính Điều kiện trước Thiết bị truy cập phải có kết nối mạng

Kết nối thành công với server Điều kiện sau

- Thông tin tài khoản khách hàng mới được lưu vào CSDL

- Lưu lại thông tin đăng nhập

CSDL không thay đổi cho lần đăng nhập kế tiếp

Mô tả Khách hàng đăng nhập vào website

Tác nhân Admin, Khách hàng

2 - Chọn cách thức đăng nhập (Đăng nhập tài khoản cũ, Đăng nhập tài khoản khác)

3 - Nếu hình thức đăng nhập là Tài khoản cũ, website kiểm tra thông tin về người dùng trong hệ thống

4 - Nếu thông tin hợp lệ, chuyển tiếp vào trang chủ của website

Người dùng chọn hình thức đăng nhập tài khoản khác:

1 - Người dùng nhập thông tin về tài khoản và mật khẩu

3 - Website kiểm tra thông tin người dùng có trong hệ thống

2.2.3 Đặc tả Use-case “Tìm kiểm sản phẩm”

Bảng 3.2.3: Bảng đặc tả Use-case “Tìm kiếm sản phẩm”

Mô tả Admin/ khách hàng muốn tìm kiếm sản phẩm

Tác nhân Admin/ khách hàng

1 - Người dùng thực hiện truy cập website

2 - Người dùng chọn vào tab tiềm kiếm

3 – Nhập thông tin sản phẩm cần tìm kiếm

4 - Bấm vào nút Tìm kiếm

7 – Hệ thống trả về thông tin sản phẩm được tìm kiếm nếu có

Kết nối thành công với server Điều kiện sau Không có

2.2.4 Đặc tả Use-case “Xem thông tin sản phẩm”

Bảng 3.2.4: Bảng đặc tả Use-case “Xem thông tin sản phẩm”

Mô tả Khách hàng muốn xem chi tiết thông tin sản phẩm

1 – Khách hàng thực hiện truy cập website

2 – Khách hàng truy cập trang sản phẩm

3 - Chọn vào sản phẩm muốn xem thông tin

4 – Hệ thống hiển thị thông tin về sản phẩm

2.2.5 Đặc tả Use-case “Xem danh mục sản phẩm”

Bảng 3.2.5: Bảng đặc tả Use-case “Xem danh mục sản phẩm”

Mô tả Khách hàng muốn xem danh mục sản phẩm

3 – Chọn vào danh mục cần xem sản phẩm

6 - Hệ thống thực hiện hiển thị danh sách sản phảm theo danh mục được chọn

2.2.6 Đặc tả Use-case “Thêm giỏ hàng”

Bảng 3.2.6: Bảng đặc tả Use-case “Thêm giỏ hàng”

Mô tả Khách hàng muốn thêm sản phẩm vào giỏ hàng

2 - Người dùng truy cập trang sản phẩm

3 – Chọn thêm sản phẩm vào giỏ hàng

4 – Truy cập vào Giỏ hàng để kiểm tra

5 – Hệ thống tiến hành thêm sản phẩm vào giỏ hàng

6 – Hệ thống trả về thông báo

“Thêm sản phẩm vào giỏ hàng thành công”

2.2.7 Đặc tả Use-case “Kiểm tra giỏ hàng”

Bảng 3.2.7: Bảng đặc tả Use-case “Kiểm tra giỏ hàng”

Mô tả Khách hàng muốn kiểm tra sản phẩm trong Giỏ hàng

2 – Khách hàng truy cập vào giỏ hàng để kiểm gia

3 – Khách hàng có thể cập nhật và xóa sản phẩm khỏi giỏ hàng

5 - Hệ thống truy cập trang giỏ hàng

2.2.8 Đặc tả Use-case “Xóa sản phẩm khỏi giỏ hàng”

Bảng 3.2.8: Bảng đặc tả Use-case “Xóa sản phẩm khỏi giỏ hàng”

Mô tả Khách hàng muốn xóa sản phẩm khỏi giỏ hàng

1 – Khách hàng thực hiện truy cập vào website

2 – Khách hàng truy cập vào Giỏ hàng

3 - Nhấn vào nút Xóa sản phẩm

6 – Hệ thống truy cập Giỏ hàng và hiển thị Sản phẩm đã được xóa khỏi giỏ hàng

2.2.9 Đặc tả Use-case “Cập nhật sản phẩm trong giỏ”

Bảng 3.2.9: Bảng đặc tả Use-case “Cập nhật sản phẩm trong giỏ”

Mô tả Khách hàng muốn cập nhật sản phẩm trong giỏ hàng

2 – Khách hàng truy cập vào giỏ hàng

3 – Tiến hành cập nhật số lượng sản phẩm

4 – Hệ thống truy cập vào trang Giỏ hàng

5 – Hệ thống cập nhật số lượng sản phẩm

Kết nối thành công với server Điều kiện sau Không

2.2.10 Đặc tả Use-case “Đặt hàng”

Bảng 3.2.10: Bảng đặc tả Use-case “Đặt hàng”

Mô tả Khách hàng tiến hành thanh toán sản phẩm cần mua

3 – Chọn sản phẩm muốn đặt hàng

5 – Đăng nhập và điền thông tin cần thiết để thanh toán sản phẩm

6 – Hệ thống tiến hành kiểm tra thông tin khách hàng

7 – Nếu thông tin hợp lệ, tiến thành cập nhật thông tin đặt hàng lên server và hiển thị thông báo đặt hàng thành công

8 – Nếu thông tin không hợp lệ, yêu cầu người dùng

Trong quá trình đặt hàng, nếu thông tin khách hàng không hợp lệ, khách hàng cần nhập lại thông tin chính xác để tiếp tục thanh toán Điều kiện tiên quyết để sử dụng hệ thống là thiết bị truy cập phải có kết nối mạng ổn định, đảm bảo quá trình giao dịch diễn ra suôn sẻ Nếu có sự cố về thông tin hoặc kết nối, khách hàng cần thực hiện lại bước nhập dữ liệu hoặc kiểm tra kết nối mạng để tiếp tục đặt hàng một cách thuận tiện.

Thành công: Cập nhật thông tin đơn hàng lên CSDL và thông báo về tài khoản Admin Thất bại: CSDL không đổi

2.2.11 Đặc tả Use-case “Đánh giá sản phẩm”

Bảng 3.2.11: Bảng đặc tả Use-case “Đánh giá sản phẩm”

Mô tả Khách hàng tiến hành đánh giá sản phẩm đã mua

2 – Khách hàng truy cập vào Đơn hàng đã hoàn thành

3 – Chọn sản phẩm muốn thực hiện đánh giá

4 – Chọn nút Đánh giá sản phẩm

5 – Điền nội dung đánh giá hoặc chọn các đánh giá đề xuất sẵn có từ hệ thống

6 – Chọn nút Gửi đánh giá

7 – Hệ thống tiến hành ghi nhận đánh giá sản phẩm từ khách hàng

8 – Hệ thống hiển thị các đánh giá của khách hàng về sản phẩm

Kết nối thành công với server Điều kiện sau Thành công: Đánh giá sản phẩm thành công

Sơ đồ dữ liệu

Hình 3.3.1: Sơ đồ dữ liệu

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/ghi chú

1 id int PK Mã của bảng User

2 user_name nvarchar NotNull Tên của người dùng

3 pass_word nvarchar NotNull Mật khẩu của người dùng

4 gender int NotNull Giới tính của người dùng

5 address nvarchar NotNull Địa chỉ của người dùng

6 phone_number varchar NotNull SĐT người dùng

7 email varchar NotNull Email dùng để đăng nhập của người dùng

8 bithday datetime NotNull Ngày sinh của người dùng

1 id int PK Mã của bảng Admin

2 name nvarchar NotNull Tên của admin

3 email varchar NotNull Email dùng để đăng nhập

4 pass_word varchar NotNull Mật khẩu để đăng nhập

5 product_id int NotNull Khóa ngoại trỏ đến bảng

Product, thể hiện thông tin sản phẩm

6 category_id int NotNull Khóa ngoại trỏ đến bảng

Category, thể hiện thông tin danh mục sản phẩm

7 discount int NotNull Khóa ngoại trỏ đến bảng

Discount, thể hiện thông tin khuyến mãi

1 id int PK Mã của bảng Product

2 product_name nvarchar NotNull Tên của sản phẩm

3 product_price varchar NotNull Giá sản phẩm

4 quantity int NotNull Số lượng sản phẩm

5 image varchar NotNull Hình ảnh sản phẩm

6 slug varchar NotNull Đường dẫn đến sản phẩm

7 detail_id int FK Khóa ngoại trỏ đến bảng

DetailProduct, thể hiện Chi tiết sản phẩm

8 category_id int FK Khóa ngoại trỏ đến bảng

Category, thể hiện danh mục sản phẩm

1 id int PK Mã của bảng DetailProduct

2 image_list varchar NotNull Danh sách hình ảnh của sản phẩm

3 descripton nvarchar NotNull Thông tin chi tiết sản phẩm

4 status int NotNull Trạng thái của sản phẩm

1 id int PK Mã của bảng Category

2 title nvarchar NotNull Tên danh mục

3 category_slug varchar NotNull Đường dẫn đến danh mục

1 id int PK Mã của bảng Discount

2 title nvarchar NotNull Tên của sự kiện giảm giá

3 image varchar NotNull Hình ảnh của sự kiện giảm giá

4 description nvarchar NotNull Mô tả về sự kiện giảm giá

5 discount_slug varchar NotNull Đường dẫn đến discount

1 id int PK Khóa ngoại trỏ đến bảng

USER, thể hiện thông tin người thực hiện theo dõi sự kiện

2 status int NotNull Khóa ngoại trỏ đến bảng

EVENT, thể hiện thông tin của sự kiện được theo dõi

3 amount int NotNull Thời gian thực hiện theo dõi

4 payment varchar NotNull Số tiền thanh toán

5 payment_infor nvarchar NotNull Phương thức thanh toán

7 product_id Int FK Khóa ngoại trỏ đến bảng

8 user_id int FK Khóa ngoại trỏ đến bảng

THIẾT KẾ GIAO DIỆN

Trang Home

* Mô tả chung và xử lý các sự kiện trên màn hình:

Khi người dung truy cập vào trang web màn hình Home sẽ hiện lên

Trang sản phẩm

Khi người dùng nhấn button “Sản phẩm” ở component Header, màn hình sẽ được điều hướng tới trang danh mục sản phẩm Tại đây, người dùng có thể thấy danh mục sản phẩm cùng danh sách các sản phẩm liên quan, giúp dễ dàng chọn lựa và khám phá các sản phẩm phù hợp Quá trình này tối ưu hóa trải nghiệm người dùng bằng cách hiển thị đầy đủ thông tin sản phẩm một cách trực quan và thuận tiện.

Trang khuyến mãi

Giao diện vẫn chưa hoàn thiện

Trang giỏ hàng

Màn hình được hiển thị sau khi người dùng thêm sản phẩm vào giỏ hàng học chọn

“Mua” và chọn button “Giỏ hàng”

- Button Đặt hàng, Tiếp tục mua hàng

- Button xóa sản phẩm khỏi giỏ hàng

Trang Liên hệ

Khi người dùng click chọn “Liên hệ” website sẽ điều hướng tới trang Liên hệ Các component:

Đăng nhập

2 Quản lý sản phẩm Admin sẽ thực hiện thêm, xóa và cập nhật sản phẩm

3 Quản lý đơn hàng Admin có thể xem và cập nhật trạng thái của đơn hàng

4 Quản lý danh mục sản phẩm Admin sẽ thực hiện thêm, xóa và cập nhật danh mục sản phẩm

Trong quá trình đặt hàng, nếu thông tin khách hàng không hợp lệ, hệ thống sẽ yêu cầu nhập lại thông tin chính xác để tiếp tục quá trình đặt hàng Để đảm bảo thành công, thiết bị truy cập phải có kết nối mạng ổn định, đáp ứng các điều kiện trước khi bắt đầu thao tác Điều này giúp hệ thống xác thực nhanh chóng và tránh gián đoạn trong quá trình đặt hàng của khách hàng.

CHƯƠNG V: THIẾT KẾ GIAO DIỆN

Khi người dùng nhấn vào nút “Sản phẩm” trên component Header, màn hình sẽ được điều hướng đến trang danh mục sản phẩm Sau đó, trang sẽ hiển thị danh sách các sản phẩm cùng với danh mục liên quan, giúp người dùng dễ dàng tìm kiếm và lựa chọn sản phẩm mong muốn Đảm bảo quá trình điều hướng diễn ra mượt mà để nâng cao trải nghiệm người dùng và tối ưu hóa SEO cho website.

Hình 5.6.1: Trang chi tiết sản phẩm

Màn hình được hiển thị sau khi người dùng click vào một sản phầm

- Form Chi tiết sản phẩm

- Danh sách sản phẩm đề xuất

Trang chủ

Quản lý danh mục sản phẩm

nhật danh mục sản phẩm

Để thay thế luồng, khách hàng cần nhập lại thông tin nếu dữ liệu không hợp lệ và tiếp tục quá trình đặt hàng Điều kiện tiên quyết là thiết bị truy cập phải có kết nối mạng ổn định để đảm bảo thao tác diễn ra suôn sẻ.

CHƯƠNG V: THIẾT KẾ GIAO DIỆN

Khi người dùng nhấn nút "Sản phẩm" trong component Header, màn hình sẽ được điều hướng để hiển thị danh mục sản phẩm cùng danh sách các sản phẩm liên quan Quá trình truy cập này giúp khách hàng dễ dàng tìm kiếm và chọn lựa sản phẩm mong muốn một cách thuận tiện và nhanh chóng Việc hiển thị rõ ràng các danh mục và danh sách sản phẩm không chỉ nâng cao trải nghiệm người dùng mà còn tối ưu hóa hiệu quả SEO của website.

Màn hình được hiển thị sau khi người dùng click vào một sản phầm

- Form Chi tiết sản phẩm

- Danh sách sản phẩm đề xuất

Hình 3.1: Quản lý sản phẩm

Hình 3.2: Tạo sản phẩm mới

Hình 3.3: Xem chi tiết sản phẩm

4 Quản lý danh mục sản phẩm

Hình 4.1: Quản lý danh mục sản phẩm

Hình 4.2: Thêm danh mục sản phẩm

Hình 4.3: Xem chi tiết danh mục

Quản lý đơn hàng

Hình 5.1: Quản lý đơn hàng

Quản lý tài khoản

Hình 6.1: Quản lý tài khoản

Hình 6.2: Tạo tài khoản mới

Quản lý đánh giá

Hình 7.1: Quản lý đánh giá sản phẩm

TỔNG KẾT

Tiêu đề	Tìm Hiểu ReactJS Và Xây Dựng Website Bán Đồ Gia Dụng
Tác giả	Lê Thanh Tuấn
Người hướng dẫn	ThS. Huỳnh Hồ Thị Mộng Trinh
Trường học	Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	Đồ án
Năm xuất bản	2022
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	73
Dung lượng	2,77 MB