xây dựng website bán hàng linh kiện điện tử sử dụng spring boot và react js

ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng, tham khảo, xem thông tin của các linh kiện điện tử tạo ra một website hỗ trợ người dùng tìm hiểu

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời kỳ công nghệ 4.0 hiện nay, với việc phát triển nhanh chóng vượt bật của công nghệ giúp đời sống được nâng cao Do đó nhu cầu mua bán sản phẩm trực tuyến rất được ưa chuộng Trong đó nhu cầu sử dụng đồ điện tử của con người ngày càng nhiều cho công việc hằng ngày Việc nắm bắt thông tin sản phẩm linh kiện một cách nhanh chóng là rất cần thiết vì công nghệ ngày càng phát triển nên sẽ sinh ra những sản phẩm mặt hàng mới mà ta không biết để ta có thể dễ dàng mua sắm và dễ dàng sử dụng những linh kiện đó Khi sử dụng nhiều và lâu dài rất dễ bị hư hỏng vì vậy việc kiểm tra, sửa chữa và thay thế các linh kiện điện tử là rất cần thiết

Từ nhu cầu thực tiễn đó, với mong muốn cung cấp người dùng một trang web có thể cung cấp cho người dùng về thông tin các linh kiện điện tử cũng như đặt hàng mua trực tuyến Website bán linh kiện điện là một lựa chọn tốt cho nhu cầu đặt hàng và mua linh kiện với giá cả phải chăng.

MỤC ĐÍCH CỦA ĐỀ TÀI

Đề tài “Xây dựng website bán hàng linh kiện điện tử sử dụng Spring boot và React JS” có mục tiêu cần đạt được là:

- Áp dụng được kiến thức về Spring Boot, MongoDB, ReactJS vào trong đồ án

- Xây dựng một website có giao diện, màu sắc thân thiện với người dùng để người dùng có nhiều lựa chọn sản phẩm

- Cung cấp cho người dùng một phương thức thanh toán và tiện lợi chỉ qua một vài cái nhấp trên điện thoại là có thể truy cập được những tin được cập nhật, làm mới hàng ngày

- Hệ thống quản lý và thống kê doanh thu của website

- Bảo mật thông tin cho khách hàng trong việc đặt hàng mua trực tuyến.

PHƯƠNG PHÁP NGHIÊN CỨU

Nghiên cứu trên cơ sở tài liệu hiện có và tổng hợp trên mạng những kiến thức lý thuyết về các công nghệ phần mềm và cách thức xây dựng của trang web

Phương pháp nghiên cứu thực nghiệm:

Tìm hiểu quy trình xây dựng và quản lý website thực tiễn

Lên ý tưởng thiết kế website

Tiến hành xây dưng ứng dụng

Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích cũng như có được chút ít kinh nghiệm, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay Đồng thời, nâng cao tinh thần nghiên cứu và sáng tạo trong thời kỳ công nghệ phát triển vũ bão như hiện nay Khi đề tài nhóm chúng em được áp dụng vào thực tế, việc mua bán, tìm kiếm thông tin trở nên dễ dàng hơn và giúp tiết kiệm được thời gian cho người dùng

PHẦN NỘI DUNG CHƯƠNG 1:CƠ SỞ LÝ THUYẾT

React là một thư viện javascript giúp tạo ra giao diện người dùng Giao diện được xây dựng từ các thành phần nhỏ, chúng được kết hợp nhầm mục đích tái sử dụng, có thể lồng lại với nhau tạo ra thành phần mới

1.1.2.Tổng quan giao diện trong React

Component là một hàm javascipt giúp định nghĩa thành phần giao diện bằng ngôn ngữ đánh dấu (markup) Do component có thể lồng nhau, vì thế một trang cũng là một component cho đến nhỏ hơn là các nút bấm

1.1.2.2.Ngôn ngữ đánh dấu JSX

Như đã đề cập ở mục react component, các hàm sẽ định nghĩa giao diện thông qua ngôn ngữ đánh dấu Để react component có thể hiểu và hiện thị giao diện được, react sử dụng cú pháp mở rộng được gọi là JavaScript XML (JSX) Cú pháp này trong tương tự HTML, nhưng có thêm vài nguyên tắc chặc chẽ hơn cũng như có thể hiển thị được dữ liệu động [7]

Ví dụ dưới đây thể hiện tính nghiêm ngặc của JSX Các thành phần (tag/component) không thể cùng cấp cha lớn nhất (root của một component), để khắc phục ta ôm một thẻ trống bao bọc các thành phần đó [7]

Hình 1.1: Ví dụ về tính nghiêm ngặc của JSX, code sai cú pháp [7]

Hình 1.2: Ví dụ về tính nghiêm ngặc của JSX, code đã chỉnh sửa [7]

1.1.2.3.Truyền giá trị vào component

Các giá trị được truyền thông qua props, giúp truyền giá trị từ compent cho vào compnonent con Một số prop có sẵn bao gồm các thuộc tính của HTML [7]

Khác với HTML, thuộc tính trong HTML chỉ có thể truyền chuỗi thì trong props có thể truyền dữ liệu kiễu object, array, function

Props có kiểu là một object, xem ví dụ bên dưới để biết cách lấy dữ liệu từ props

Hình 1.3: Ví dụ component lấy dự liệu từ props [7]

1.1.2.4.Dấu ngoặc nhọn trong JSX

Cú pháp JSX cho phép lồng logic thông qua dấu “{}” nội dung render có thể là chuỗi, biến hoặc hàm Tuy nhiên chỉ có giá trị là truthy mới có thể hiển thị cho người dùng thấy được, còn falsy thì không [7]

Hình 1.4: Dấu ngoặc nhọn trong JSX [7]

1.1.2.5.List và key Để hiển thị nhiều thành phần tương tự nhau, từ một tập hợp các dữ liệu

Ta có thể sử dụng các hàm của javascript để chuyển các thành phần thành một tập hợp của mảng

Các hàm thường dùng để chuyển về mảng: filter(), map()

Thành phần cha cho mỗi item phải có thuộc tính key và giá trị mỗi key phải là duy nhất, thư viện Reactjs sẽ tối ưu tốt hơn cho việc render Nếu một trong item đó được cập nhật, thay vì phải rerender lại tất cả item thì chỉ cập nhật lại trạng thái của đúng item đó [7]

1.1.3.Tương tác của các thành phần

Trong React, dữ liệu thay đổi theo thời gian được gọi là trạng thái (state)

Có thể thêm state vào bất kỳ component nào và thay đổi chúng nếu muốn

React cho phép thêm xử lý sự kiện (event handler) Event handler nhận function, các function được gọi mỗi khi sự kiện xảy ra như click, hover, focus Tên của sự kiện là tên của thuộc tính event HTML thay vì là onclick (đối với HTML) sẽ là onClick (đối với JSX) [8]

1.1.3.2.Trạng thái dưới dạng snapshot

Không giống như các biến thông thường của javascript Trạng thái sẽ không thay đổi ngay giá trị sẵn có, việc thay đổi sẽ được kích hoạt khi re- render lại, điều này giúp tránh một số lỗi nhỏ [9]

Hình 1.7: Trạng thái sẽ không thay đổi cho đến khi re-render [9]

Spring Boot nằm trong hệ sinh thái hay còn gọi là con của Spring Framework Spring Boot cung cấp nền tảng cho các nhà phát triển để đơn giản hóa việc lập trình ứng dụng bằng Spring, tập trung phát triển ứng dụng nhanh chóng không tốn thời gian cấu hình Spring Boot bao gồm nhiều thư viện và công cụ hỗ trợ lập trình

Hình 1.8: Spring Framework đến Spring Boot [4]

Tạo ứng dụng Spring có tính độc lập

Nhúng trực tiếp Tomcat, Jetty hoặc Undertow mà không cần phải triển khai tệp WAR

Starter dependency giúp cấu hình Maven dễ dàng hơn

Tự động cấu hình Spring khi cần thiết

Không tạo code cấu hình, không yêu cầu phải cấu hình bằng XML

MongoDB là một loại phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL Nó có thể hỗ trợ nhiều nền tảng khác nhau và được thiết kế dành cho đối tượng MongoDB hoạt động với các khái niệm về Collection và Document Đồng thời, nó có hiệu suất cao và tính khả dụng tốt, đồng thời dễ dàng mở rộng Bộ sưu tập MongoDB

Các Collection có cấu trúc rất linh hoạt Điều này cho phép dữ liệu không khớp với bất kỳ cấu trúc nào Do đó, MongoDB có thể lưu trữ dữ liệu có cấu trúc đa dạng và phức tạp Dữ liệu MongoDB được lưu trữ ở định dạng kiểu JSON

Có tác dụng giúp trường tìm kiếm phạm vi kết hợp với tìm kiếm biểu thức để trả về kết quả tài liệu có kích thước cố định Ngoài ra, các trường MongoDB cũng được sử dụng để lập chỉ mục chính và phụ

CƠ SỞ LÝ THUYẾT

REACT

Như đã đề cập ở mục react component, các hàm sẽ định nghĩa giao diện thông qua ngôn ngữ đánh dấu Để react component có thể hiểu và hiện thị giao diện được, react sử dụng cú pháp mở rộng được gọi là JavaScript XML (JSX) Cú pháp này trong tương tự HTML, nhưng có thêm vài nguyên tắc chặc chẽ hơn cũng như có thể hiển thị được dữ liệu động [7]

Ví dụ dưới đây thể hiện tính nghiêm ngặc của JSX Các thành phần (tag/component) không thể cùng cấp cha lớn nhất (root của một component), để khắc phục ta ôm một thẻ trống bao bọc các thành phần đó [7]

Hình 1.1: Ví dụ về tính nghiêm ngặc của JSX, code sai cú pháp [7]

Hình 1.2: Ví dụ về tính nghiêm ngặc của JSX, code đã chỉnh sửa [7]

1.1.2.3.Truyền giá trị vào component

Các giá trị được truyền thông qua props, giúp truyền giá trị từ compent cho vào compnonent con Một số prop có sẵn bao gồm các thuộc tính của HTML [7]

Khác với HTML, thuộc tính trong HTML chỉ có thể truyền chuỗi thì trong props có thể truyền dữ liệu kiễu object, array, function

Props có kiểu là một object, xem ví dụ bên dưới để biết cách lấy dữ liệu từ props

Hình 1.3: Ví dụ component lấy dự liệu từ props [7]

1.1.2.4.Dấu ngoặc nhọn trong JSX

Cú pháp JSX cho phép lồng logic thông qua dấu “{}” nội dung render có thể là chuỗi, biến hoặc hàm Tuy nhiên chỉ có giá trị là truthy mới có thể hiển thị cho người dùng thấy được, còn falsy thì không [7]

Hình 1.4: Dấu ngoặc nhọn trong JSX [7]

1.1.2.5.List và key Để hiển thị nhiều thành phần tương tự nhau, từ một tập hợp các dữ liệu

Ta có thể sử dụng các hàm của javascript để chuyển các thành phần thành một tập hợp của mảng

Các hàm thường dùng để chuyển về mảng: filter(), map()

Thành phần cha cho mỗi item phải có thuộc tính key và giá trị mỗi key phải là duy nhất, thư viện Reactjs sẽ tối ưu tốt hơn cho việc render Nếu một trong item đó được cập nhật, thay vì phải rerender lại tất cả item thì chỉ cập nhật lại trạng thái của đúng item đó [7]

1.1.3.Tương tác của các thành phần

Trong React, dữ liệu thay đổi theo thời gian được gọi là trạng thái (state)

Có thể thêm state vào bất kỳ component nào và thay đổi chúng nếu muốn

React cho phép thêm xử lý sự kiện (event handler) Event handler nhận function, các function được gọi mỗi khi sự kiện xảy ra như click, hover, focus Tên của sự kiện là tên của thuộc tính event HTML thay vì là onclick (đối với HTML) sẽ là onClick (đối với JSX) [8]

1.1.3.2.Trạng thái dưới dạng snapshot

Không giống như các biến thông thường của javascript Trạng thái sẽ không thay đổi ngay giá trị sẵn có, việc thay đổi sẽ được kích hoạt khi re- render lại, điều này giúp tránh một số lỗi nhỏ [9]

Hình 1.7: Trạng thái sẽ không thay đổi cho đến khi re-render [9]

SPRING BOOT

Spring Boot nằm trong hệ sinh thái hay còn gọi là con của Spring Framework Spring Boot cung cấp nền tảng cho các nhà phát triển để đơn giản hóa việc lập trình ứng dụng bằng Spring, tập trung phát triển ứng dụng nhanh chóng không tốn thời gian cấu hình Spring Boot bao gồm nhiều thư viện và công cụ hỗ trợ lập trình

Hình 1.8: Spring Framework đến Spring Boot [4]

Tạo ứng dụng Spring có tính độc lập

Nhúng trực tiếp Tomcat, Jetty hoặc Undertow mà không cần phải triển khai tệp WAR

Starter dependency giúp cấu hình Maven dễ dàng hơn

Tự động cấu hình Spring khi cần thiết

Không tạo code cấu hình, không yêu cầu phải cấu hình bằng XML.

MONGODB

MongoDB là một loại phần mềm cơ sở dữ liệu sử dụng mã nguồn mở NoSQL Nó có thể hỗ trợ nhiều nền tảng khác nhau và được thiết kế dành cho đối tượng MongoDB hoạt động với các khái niệm về Collection và Document Đồng thời, nó có hiệu suất cao và tính khả dụng tốt, đồng thời dễ dàng mở rộng Bộ sưu tập MongoDB

Các Collection có cấu trúc rất linh hoạt Điều này cho phép dữ liệu không khớp với bất kỳ cấu trúc nào Do đó, MongoDB có thể lưu trữ dữ liệu có cấu trúc đa dạng và phức tạp Dữ liệu MongoDB được lưu trữ ở định dạng kiểu JSON

Có tác dụng giúp trường tìm kiếm phạm vi kết hợp với tìm kiếm biểu thức để trả về kết quả tài liệu có kích thước cố định Ngoài ra, các trường MongoDB cũng được sử dụng để lập chỉ mục chính và phụ

Cho phép nhân bản hai hoặc nhiều bản sao của dữ liệu Nếu một bản sao nào bị lỗi thì Replica set sẽ chọn một bản sao phụ thay thế nó làm bản sao chọn các hành động nhưng giá trị mặc định vẫn được áp dụng cho dữ liệu cuối cùng

MongoDB dựa vào Shard key để phân vùng dữ liệu thành các phạm vi và phân phối dữ liệu đồng đều Chúng có thể chạy trên nhiều máy chủ và thực hiện sao chép dữ liệu hoặc cân bằng tải để giữ hệ thống hoạt động trong trường hợp xảy ra lỗi về phần cứng

Khi tìm hiểu về hệ thống cơ sở dữ liệu MongoDB, bộ lưu trữ tệp được sử dụng như một hệ thống tệp (GridFS) hoạt động như một bộ cân bằng tải, sao chép dữ liệu trên nhiều máy tính Cụ thể, GridFS chia tệp thành nhiều phần và lưu trữ chúng dưới dạng các tài liệu riêng biệt Sau đó, người dùng có thể dễ dàng truy cập GridFS thông qua Mongofiles hay các plugin sử dụng cho Nginx và Lighttpd

Chức năng này là một chương trình cung cấp ba giải pháp để thực hiện tập hợp gồm Aggregation Pipeline, Mapreduce và Single-purpose Aggregation Aggregation Pipeline được đánh giá là có hiệu suất tốt nhất Giới hạn kích thước collection

Có kích thước cố định, thường được gọi là collection giới hạn Kích thước cố định cùng việc theo sau thứ tự chèn giúp tăng hiệu suất của các hoạt động liên quan đến dữ liệu Và nếu dữ liệu vượt quá giới hạn, các tài liệu cũ hơn sẽ tự động bị xóa mà không cần thực hiện các dòng lệnh nào Giao dịch

Từ phiên bản 4.0 MongoDB bổ sung thêm tính năng hỗ trợ giao dịch ACID đa tài liệu [3]

JSON WEB TOKEN

JSON Web Token (JWT) là một chuỗi mã hóa dùng để truyền thông tin tin dạng JSON là một chuỗi ký tự lộn xộn rất phức tạp và khó hiểu Tất cả JWT đều là mã thông báo, nhưng không phải tất cả mã thông báo cũng là JWT [6]

KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

Website chotroihn là website thuộc công ty TNHH THƯƠNG MẠI 3M

TECHCO cung cấp các loại linh kiện điện tử với mức giá phải chăng chất lượng tốt

Hình 2.1: Trang chủ website Chotroihn

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

- Xem các sản phẩm linh kiện theo từng mục danh mục

- Đặt mua hàng (thanh toán bằng COD)

- Gọi trực tuyến cửa hàng Ưu điểm:

- Giao diện dễ nhìn, làm nổi bật sản phẩm

- Tương đối đủ chức năng nhu cầu người sử dụng

- Đặt hàng không cần đăng nhập

- Chưa có bộ lọc sản phẩm

- Không thanh toán bằng nhiều phương thức

2.1.2.Thegioiic (https://www.thegioiic.com)

Website thegioiic.com thuộc công ty cùng tên là Thegioiic cung cấp sản phẩm trong lĩnh vực điện tử gồm thiết kế phần cứng, phát triển phần mềm và hệ thống nhúng Hiện nay là nhà phân phối các và cung cấp linh kiện điện tử, giúp khách hàng tiết kiệm thời gian và tiền bạc trong kinh doanh linh kiện điển tử

Hình 2.2: Trang chủ website Thegioiic

- Đăng nhập, đăng ký, chỉnh sửa thông tin cá nhân

- Lọc sản phẩm (danh mục) Đặt mua hàng (thanh toán bằng nhiều phương thức ATM, VNPAY,

- Chat hoặc liên hệ trực tuyến nhân viên cửa hàng Ưu điểm:

- Có thể chuyển đổi 2 ngôn ngữ (tiếng Việt, tiếng Anh) khi dùng

- Đăng nhập, đăng ký bằng nhiều phương thức khác nhau dù chưa có tài khoản

- Có nhiều phương thức thanh toán

- Có đủ các chức năng sử dụng

- Chưa có thể lọc được nhiều tiêu chí

Website linhkienviet.vn thuộc công ty SMD electronics Cung cấp linh kiện, module kit

Hình 2.3: Trang chủ website Linhkienviet

- Lọc sản phẩm theo các tiêu chí (giá, chữ cái, thời gian, …)

- Đặt mua hàng (thanh toán bằng ATM hoặc COD) Ưu điểm:

- Giao diện, màu sắc dễ nhìn

- Chưa hỗ trợ nhiều phương thức đăng nhập

- Không thanh toán bằng nhiều phương thức

Hình 2.4: Trang chủ website Nshopvn

- Tìm kiếm sản phẩm (có thể tìm kiếm theo danh mục)

- Lọc sản phẩm theo các tiêu chí (giá, nổi bật, danh mục, thời gian, …)

- Đặt mua hàng (thanh toán bằng nhiều phương thức ATM, VNPAY,

Hshop.vn là cửa hàng chuyên về các sản phẩm phần cứng: Mạch lập trình,

Module chức năng, Cảm biến, Mạch điều khiển và Linh kiện chế tạo Robot

Hình 2.5: Trang chủ website Hshop

- Đặt mua hàng (thanh toán bằng ATM hoặc COD) Ưu điểm:

- Không thanh toán bằng nhiều phương thức.

XÁC ĐỊNH YÊU CẦU

2.2.1.Yêu cầu chức năng nghiệp vụ

Bảng 2.1: Bảng yêu cầu chức năng nghiệp vụ phía khách hàng

STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú

1 Tìm kiếm sản phẩm theo tên hoặc mô tả

2 Xem danh sách sản phẩm Tra cứu (tìm kiếm)

3 Xem chi tiết sản phẩm Tra cứu (tìm kiếm)

4 Xem danh sách đơn hàng đã đặt Tra cứu (tìm kiếm)

5 Thêm, chỉnh sửa thông tin sản phẩm trong giỏ hàng

7 Thêm đánh giá sản phẩm Lưu trữ

8 Chỉnh sửa thông tin tài khoản Lưu trữ

9 Tính tổng giá trị đơn hàng dựa trên giá hiện tại của sản phẩm

Bảng 2.2: Bảng yêu cầu chức năng nghiệp vụ phía quản trị viên

STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú

1 Thêm, chỉnh sửa thông tin sản phẩm mới

2 Thêm thông tin tài khoản mới Lưu trữ

3 Thêm, chỉnh sửa thông tin danh mục mới

4 Xác nhận, hủy đơn hàng Lưu trữ

5 Xem, lọc danh sách sản phẩm Tra cứu (tìm kiếm)

6 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm)

7 Xem, lọc danh sách danh mục Tra cứu (tìm kiếm)

8 Xem, lọc danh sách đơn hàng Tra cứu (tìm kiếm) ngày, tháng, năm

10 Thống kê số lượng sản phẩm theo trạng thái

2.2.2.Yêu cầu chức năng hệ thống

Bảng 2.3: Bảng yêu cầu chức năng hệ thống

STT Yêu cầu hệ thống Mô tả, ràng buộc Ghi chú

1 Cung cấp chức năng phân quyền

Phân quyền cho phía quản trị gồm: quản trị viên và nhân viên Phía khách hàng gồm: khách hàng đã xác thực và khách vãng lai

2 Cung cấp chức năng đăng nhập qua bên thứ 3 Đăng nhập bằng các bên bao gồm: Google, Facebook

3 Cung cấp chức năng khôi phục mật khẩu

Khôi phục mật khẩu bằng cách gửi mã xác thực về email

4 Cung cấp chức năng thanh toán trực tuyến

Thanh toán trực tuyến bằng các hình thức: PayPal, VNPAY

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

Bảng 2.4: Bảng yêu cầu phi chức năng

STT Yêu cầu chất lượng Loại yêu cầu Ghi chú

1 Giao diện bắt mắt và thân thiện với người dùng

2 Tốc độ xử lý và tìm kiếm nhanh chóng, chính xác

3 Có độ tin cậy cao Tính hiệu quả

4 Các thông tin cá nhân của người dùng phải được bảo mật và mã hóa

5 Có thể dễ dàng mở rộng quy mô hệ thống

MÔ HÌNH HOÁ YÊU CẦU

Hình 2.6: Sơ đồ Use case phía khách hàng

Hình 2.7: Sơ đồ Use case phía quản trị viên

Bảng 2.5: Use Case “Đăng nhập”

Người dùng đăng nhập vào hệ thống bằng tài khoản

Actors Khách đã có tài khoản

Pre-Conditions Tài khoản đã có trong hệ thống và đã xác thực

Post Conditions Người dùng sẽ được chuyển tới Trang chủ

Main Flow 1 Người dùng nhấn vào chỗ “đăng nhập” trên thanh header

2 Hệ thống sẽ điều hướng người dùng đến trang đăng nhập

3 Người dùng điền đầy đủ các thông tin tài khoản ở trang đăng nhập sau đó nhấn nút “Đăng nhập”

4 Hệ thống kiểm tra thông tin tài khoản đăng nhập của người dùng [Exception 1]

5 Hệ thống sẽ chuyển người dùng tới trang chủ

Exception Flow [Exception 1]: Nếu tài khoản không đúng hoặc email của tài khoản chưa được xác thực thì hệ thống sẽ báo lỗi

Bảng 2.6: Use Case “Đăng ký”

Khách đăng ký tài khoản vào hệ thống để trở thành người dùng của hệ thống

Pre-Conditions Tài khoản chưa có trong hệ thống

Post Conditions Thông báo đăng ký thành công và tài khoản sẽ được hệ thống lưu lại

Main Flow 1 Nhấn vào “Đăng ký” trên chỗ header

2 Hệ thống sẽ điều hướng người dùng đến trang đăng ký

3 Người dùng điền đầy đủ các thông tin sau đó nhấn nút “Đăng ký” [Exception 1]

4 Hệ thống sẽ lưu lại tài khoản, gửi mã xác thực và trang xác thực tài khoản tới email

5 Người dùng vào trang xác thực tài khoản bằng đường liên kết được gửi ở email

6 Nhập mã xác thực và nhấn nút “Xác nhận OTP”

7 Hệ thống kiểm tra mã xác thực và hiển thị thông báo xác thực thành công [Exception 2]

Exception Flow [Exception 1]: Nếu người dùng nhập thiếu thông tin hoặc không đúng định dạnh thì hệ thống sẽ báo lỗi

[Exception 2]: Nếu mã xác thực không đúng thì hệ thống sẽ thông báo lỗi

2.3.2.3 Use Case “Chỉnh sửa thông tin cá nhân ”

Bảng 2.7: Use Case “Chỉnh sửa thông tin cá nhân”

Use case Chỉnh sửa thông tin cá nhân

Người dùng chỉnh sửa thông tin và ảnh của mình

Pre-Conditions Người dùng đã đăng nhập vào hệ thống

Post Conditions Thông tin hoặc ảnh được chỉnh sửa và được lưu lại trên hệ thống

Main Flow 1 Người dùng nhấn vào “Thông tin tài khoản” ở Header

2 Hệ thống sẽ điều hướng người dùng đến trang thông tin tài khoản

3 Người dùng nhập các thông tin muốn chỉnh sửa và nhấn

“Lưu thay đổi” [Alternative 1] [Exception 1]

4 Hệ thống sẽ lưu các thông tin đã được chỉnh sửa lại

1 Người dùng có thể chỉ chọn thay đổi ảnh đại diện bằng cách nhấn vào “Thay đổi ảnh đại diện” sau đó chọn ảnh và nhấn nút

2 Hệ thống sẽ lưu lại ảnh mới

Exception Flow [Exception 1]: Nếu thông tin chỉnh sửa bị rỗng hệ thống sẽ thông báo lỗi

2.3.2.4 Use Case “Đổi mật khẩu”

Bảng 2.8: Use Case “Đổi mật khẩu”

Use case Đổi mật khẩu

Người dùng đổi mật khẩu cho tài khoản của mình

Pre-Conditions Người dùng đã đăng nhập vào hệ thống

Post Conditions Mật khẩu mới của tài khoản người dùng sẽ được lưu lại thành công trên hệ thống và chuyển người dùng về trang thông tin cá nhân

Main Flow 1 Người dùng nhấn vào chỗ “Thông tin tài khoản” trên thanh header

2 Hệ thống sẽ chuyển người dùng đến trang thông tin cá nhân

3 Người dùng nhấn vào “Thay đổi mật khẩu”

4 Hệ thống chuyển người dùng đến trang thay đổi mật khẩu

5 Người dùng nhập mật khẩu cũ và mật khẩu mới và nhấn

6 Hệ thống kiểm tra mật khẩu cũ của tài khoản sau đó lưu lại mật khẩu mới [Exception 1]

Exception Flow [Exception 1]: Hệ thống kiểm tra mật khẩu cũ của tài khoản không đúng thì hệ thống sẽ báo lỗi

2.3.2.5 Use Case “Đánh giá sản phẩm”

Bảng 2.9: Use Case “Đánh giá sản phẩm”

Use case Đánh giá sản phẩm

Người dùng thêm vào đánh giá sản phẩm

Pre-Conditions Người dùng đã đăng nhập vào hệ thống và đang ở trang chi tiết sản phẩm

Post Conditions Đánh giá của người dùng sẽ được hệ thống lưu lại và hiển thị đánh giá đó ở mục đánh giá của trang chi tiết sản phẩm

Main Flow 1 Người dùng nhấn vào “Đánh giá sản phẩm”

2 Hệ thống sẽ chuyển người dùng xuống mục đánh giá

3 Người dùng nhập nội dung đánh giá, chọn số sao và nhấn

“Thêm Đánh giá sản phẩm” [Exception 1]

4 Hệ thống sẽ lưu thông tin đánh giá lại và hiển thị đánh giá đó [Exception 2]

Exception Flow [Exception 1]: Nếu nội dung đánh giá bị rỗng hoặc số sao chưa chọn thì hệ thống sẽ thông báo lỗi

[Exception 2]: Nếu đã đánh giá rồi thì sẽ thông báo không cho đánh giá nữa

2.3.2.6.Use Case “Đặt lại mật khẩu”

Bảng 2.10: Use Case “Đặt lại mật khẩu”

Use case Đặt lại mật khẩu

Người dùng đặt lại mật khẩu mới cho tài khoản của mình khi quên mất mật khẩu tài khoản

Pre-Conditions Tài khoản đã có trong hệ thống, đã xác thực và người dùng đang ở trang đăng nhập

Mật khẩu mới của tài khoản người dùng sẽ được lưu lại thành công trên hệ thống và chuyển người dùng về trang đăng nhập

Main Flow 1 Người dùng nhấn vào “Quên mật khẩu”

2 Hệ thống sẽ điều hướng người dùng đến trang nhập email để gửi mã xác thực

3 Người dùng nhập vào email và nhấn nút “Gửi OTP”

4 Hệ thống sẽ gửi mã xác thực đến email và điều hướng người dùng đến trang nhập OTP [Exception 2]

5 Người dùng nhập mã xác thực được gửi ở email và nhấn “Xác nhận OTP”

6 Hệ thống kiểm tra mã xác thực của tài khoản sau đó chuyển người dùng đến trang nhập mật khẩu mới [Exception 3]

7 Người dùng nhập mật khẩu mới và nhấn “Lấy lại mật khẩu”

8 Hệ thống sẽ lưu lại mật khẩu mới của người dùng

Flow [Exception 1]: Hệ thống kiểm tra định dạng email của người dùng nhập vào nếu email không đúng định dạng sẽ báo lỗi

[Exception 2]: Hệ thống kiểm tra email của người dùng không có trong hệ thống thì sẽ báo lỗi email không tồn tại

[Exception 3]: Hệ thống kiểm tra mã xác thực của người dùng không đúng thì sẽ thông báo mã OTP không đúng

2.3.2.7.Use Case “Chỉnh sửa đánh giá sản phẩm”

Bảng 2.11: Use Case “Chỉnh sửa đánh giá sản phẩm”

Use case Chỉnh sửa đánh giá sản phẩm

Người dùng chỉnh sửa nội dung đánh giá

Pre-Conditions Người dùng đã đăng nhập vào hệ thống, đang ở trang chi tiết sản phẩm và đã đánh giá sản phẩm

Post Conditions Nội dung chỉnh sửa đánh giá của người dùng sẽ được hệ thống lưu lại và hiển thị lại nội dung đánh giá

Main Flow 1 Người dùng nhấn vào “Chỉnh sửa” ở đánh giá của mình

2 Hệ thống sẽ hiển thị mục chỉnh sửa đánh giá

3 Người dùng nhập nội dung chỉnh sửa hoặc chọn lại số sao sau đó nhấn “Chỉnh sửa” [Exception 1]

4 Hệ thống sẽ lưu thông tin đánh giá lại và hiển thị đánh giá đó

Exception Flow [Exception 1]: Nếu nội dung đánh giá bị bỏ trống thì hệ thống sẽ thông báo lỗi

2.3.2.8.Use Case “Xoá đánh giá sản phẩm”

Bảng 2.12: Use Case “Xoá đánh giá sản phẩm”

Use case Xóa đánh giá sản phẩm

Người dùng xóa nội dung đánh giá sản phẩm

Pre-Conditions Người dùng đã đăng nhập vào hệ thống, đang ở trang chi tiết sản phẩm và đã đánh giá sản phẩm

Post Conditions Nội dung đánh giá của người dùng sẽ được hệ thống xóa đi

Main Flow 1 Người dùng nhấn vào “Xóa” ở đánh giá của mình

2 Hệ thống sẽ hiển thị thông báo xác nhận xóa đánh giá

3 Người dùng bấm “Xác nhận”

4 Hệ thống sẽ xóa đánh giá của người dùng

2.3.2.9.Use Case “Huỷ đơn hàng”

Bảng 2.13: Use Case “Huỷ đơn hàng”

Use case Hủy đơn hàng

Người dùng hủy đơn hàng khi đơn hàng đang trong quá trình xử lý

Pre-Conditions Người dùng đã đăng nhập vào hệ thống, đang ở trang theo dõi đơn hàng

Post Conditions Hệ thống đưa ra thông báo hủy đơn hàng thành công và cập nhập lại trạng thái của đơn hàng

Main Flow 1 Người dùng nhấn vào mã đơn hàng có trạng thái “Đang xử lý”

2 Hệ thống sẽ chuyển người dùng đến trang chi tiết đơn hàng

3 Người dùng bấm “Hủy đơn hàng”

4 Hệ thống sẽ đưa ra thông báo xác nhận hủy

6 Hệ thống sẽ đưa ra thông báo và cập nhập lại trạng thái đơn hàng thành “Hủy đơn hàng” [Exception 1]

Exception Flow [Exception 1]: Hệ thống sẽ báo lỗi nếu đơn hàng ở trạng thái

2.3.2.10.Use Case “Thêm danh mục sản phẩm”

Bảng 2.14: Use Case “Thêm danh mục sản phẩm”

Use case Thêm danh mục sản phẩm

Quản trị thêm viên thêm mới danh mục sản phẩm

Pre-Conditions Người dùng đã đăng nhập vào trang quản trị của hệ thống

Post Conditions Hệ thống sẽ đưa ra thông báo và danh mục mới sẽ được thêm vào

Main Flow 1 Người dùng nhấn vào “Danh sách mục sản phẩm” ở bên trái

2 Hệ thống hiển thị danh sách các danh mục

3 Người dùng nhấn vào “Thêm danh mục sản phẩm”

4 Hệ thống sẽ chuyển người dùng đến trang thêm danh mục

5 Người dùng nhập tên danh mục, chọn ảnh cho danh mục và nhấn “Thêm danh mục”

6 Hệ thống sẽ thông báo và tạo mới danh mục [Exception 1]

Exception Flow [Exception 1]: Hệ thống sẽ báo lỗi nếu tên danh mục đã có từ trước trong hệ thống

2.3.2.11.Use Case “Chỉnh sửa danh mục sản phẩm”

Bảng 2.15: Use Case “Chỉnh sửa danh mục sản phẩm”

Use case Chỉnh sửa danh mục sản phẩm

Quản trị thêm viên chỉnh sửa thông tin danh mục sản phẩm

Post Conditions Hệ thống sẽ đưa ra thông báo và thông tin chỉnh sửa danh mục sẽ đươc lưu lại

3 Người dùng nhấn vào cây bút màu xanh của danh mục muốn chỉnh sửa

4 Hệ thống sẽ chuyển người dùng đến trang chỉnh sửa danh mục

5 Người dùng nhập tên danh mục hoặc chọn ảnh cho danh mục và nhấn “Chỉnh sửa danh mục”

6 Hệ thống thông báo thành công và thông tin chỉnh sửa sẽ được lưu lại [Exception 1]

Exception Flow [Exception 1]: Hệ thống sẽ báo lỗi nếu tên danh mục để trống

2.3.2.12.Use Case “Chỉnh sửa trạng thái danh mục sản phẩm”

Bảng 2.16: Use Case “Chỉnh sửa trạng thái danh mục sản phẩm”

Use case Chỉnh sửa trạng thái danh mục sản phẩm

Quản trị thêm viên chỉnh sửa trạng thái danh mục sản phẩm

Post Conditions Hệ thống sẽ đưa ra thông báo và trạng thái của danh mục sẽ được cập nhập lại

3 Người dùng nhấn vào biểu tượng dấu v màu xanh nước của danh mục muốn chỉnh sửa

4 Hệ thống sẽ hiển thị một modal chọn trạng thái cho danh mục

5 Người dùng chọn trạng thái và nhấn nút “Xác nhận”

6 Hệ thống thông báo thành công và cập nhập lại trạng thái danh mục

2.3.2.13.Use Case “Chỉnh sửa trạng thái người dùng”

Bảng 2.17: Use Case “Chỉnh sửa trạng thái người dùng”

Use case Chỉnh sửa trạng thái người dùng

Quản trị viên chỉnh sửa trạng thái người dùng

Post Conditions Hệ thống sẽ đưa ra thông báo và trạng thái của người dùng sẽ được cập nhập lại

Main Flow 1 Người dùng nhấn vào “Danh sách người dùng” ở bên trái

2 Hệ thống hiển thị danh sách người dùng

3 Người dùng nhấn vào biểu tượng ổ khóa của người dùng muốn chỉnh sửa

4 Hệ thống thông báo thành công và cập nhập lại trạng thái người dùng

2.3.2.14.Use Case “Xác nhận giao hàng”

Bảng 2.18: Use Case “Xác nhận giao hàng”

Use case Xác nhận giao hàng

Quản trị viên chỉnh sửa trạng thái đơn hàng thành đang giao hàng

Post Conditions Hệ thống sẽ đưa ra thông báo và trạng thái của đơn hàng sẽ được cập nhập thành “Đang giao hàng”

Main Flow 1 Người dùng nhấn vào “Danh sách đơn hàng” ở bên trái

2 Hệ thống hiển thị danh sách đơn hàng

3 Người dùng nhấn vào biểu tượng con mắt của đơn hàng có trạng thái “Đang xử lý”

4 Hệ thống chuyển người dùng đến trang chi tiết hóa đơn

5 Người dùng nhấn nút “Xác nhận đơn hàng”

6 Hệ thống sẽ hiển thị modal yêu cầu xác nhận

8 Hệ thống sẽ thông báo và cập nhập lại trạng thái đơn hàng thành “Đang giao hàng”

2.3.2.15.Use Case “Xác nhận nhận hàng thành công”

Bảng 2.19: Use Case “Xác nhận nhận hàng thành công”

Use case Xác nhận nhận hàng thành công

Quản trị viên chỉnh sửa trạng thái đơn hàng thành hủy đơn hàng

Post Conditions Hệ thống sẽ đưa ra thông báo và trạng thái của đơn hàng sẽ được cập nhập thành “Giao hàng thành công”

3 Người dùng nhấn vào biểu tượng con mắt của đơn hàng có trạng thái “Đang giao hàng”

5 Người dùng nhấn nút “Đã nhận được hàng”

8 Hệ thống sẽ thông báo và cập nhập lại trạng thái đơn hàng thành “Giao hàng thành công”

2.3.2.16.Use Case “Huỷ đơn hàng”

Bảng 2.20: Use Case “Huỷ đơn hàng”

Use case Hủy đơn hàng

Quản trị viên chỉnh sửa trạng thái đơn hàng thành hủy đơn hàng

Post Conditions Hệ thống sẽ đưa ra thông báo và trạng thái của đơn hàng sẽ được cập nhập thành “Huỷ đơn hàng”

3 Người dùng nhấn vào biểu tượng con mắt của đơn hàng muốn hủy

5 Người dùng nhấn nút “Hủy đơn hàng”

8 Hệ thống sẽ thông báo và cập nhập lại trạng thái đơn hàng thành “Hủy đơn hàng”

2.3.2.17.Use Case “Xem nội dung đánh giá”

Bảng 2.21: Use Case “Xem nội dung đánh giá”

Use case Xem nội dung đánh giá

Quản trị viên xem chi tiết đánh giá sản phẩm của người dùng

Post Conditions Hệ thống sẽ hiển thị modal chứa đầy đủ nội dung của đánh giá

Main Flow 1 Người dùng nhấn vào “Danh sách đánh giá sản phẩm” ở bên trái

2 Hệ thống hiển thị danh sách đánh giá

3 Người dùng nhấn vào biểu tượng con mắt của đánh giá muốn xem

4 Hệ thống sẽ hiển thị đầy đủ nội dung của đánh giá

2.3.2.18.Use Case “Chỉnh sửa trạng thái đánh giá”

Bảng 2.22: Use Case “Chỉnh sửa trạng thái đánh giá”

Use case Chỉnh sửa trạng thái đánh giá

Quản trị viên chỉnh sửa trạng thái đánh giá sản phẩm của người dùng

Post Conditions Hệ thống sẽ đưa ra thông báo và cập nhập lại trạng thái đánh giá của người dùng

Main Flow 1 Người dùng nhấn vào “Danh sách đánh giá sản phẩm” ở bên trái

2 Hệ thống hiển thị danh sách đánh giá

3 Người dùng nhấn vào biểu tượng ổ khóa của đánh giá

4 Hệ thống sẽ thông báo và cập nhập lại trạng thái của đánh giá đó

2.3.2.19.Use Case “Tìm kiếm sản phẩm”

Bảng 2.23: Use Case “Tìm kiếm sản phẩm”

Use case Tìm kiếm sản phẩm

Khách hàng tìm kiếm sản phẩm

Actors Khách vãng lai, khách đã có tài khoản

Post Conditions Hiển thị danh sách sản phẩm tìm kiếm

Main Flow 1 Người dùng nhập thông tin muốn tìm ở ô “Tìm kiếm” và nhâns nút tìm kiếm [Exception 1]

2 Hệ thống tìm sản phẩm dựa vào thông tin nhập và trả ra danh sách sản phẩm [Exception 2]

Exception Flow [Exception 1]: Thông báo lỗi khi người dùng không nhập gì

[Exception 2]: Thông báo “không tìm thấy sản phẩm” khi không tìm thấy sản phẩm nào tương ứng với từ khoá

2.3.2.20.Use Case “Xem chi tiết sản phẩm”

Bảng 2.24: Use Case “Xem chi tiết sản phẩm”

Use case Xem chi tiết sản phẩm

Khách hàng xem chi tiết sản phẩm

Actors Khách hàng vãng lai, khách đã có tài khoản

Pre-Conditions Khách hàng đã truy cập trang danh sách sản phẩm

Post Conditions Trang thông tin chi tiết sản phẩm được hiển thị

Main Flow 1 Người dùng chọn sản phẩm muốn xem

2 Hệ thống sẽ tìm kiếm thông tin chi tiết sản phẩm đó và trả ra cho khách hàng

2.3.2.21.Use Case “Thêm sản phẩm vào giỏ hàng”

Bảng 2.25: Use Case “Thêm sản phẩm vào giỏ hàng”

Use case Thêm sản phẩm vào giỏ hàng

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

Pre-Conditions Khách hàng đã đăng nhập và truy cập vào trang chi tiết sản phẩm

Post Conditions Sản phẩm được thêm vào giỏ hàng và hiển thị thông báo thêm thành công

Main Flow 1 Người dùng điều chỉnh số lượng, sau đó nhấn nút “Thêm vào giỏ hàng”

2 Hệ thống kiểm tra số lượng sản phẩm [Exception 1]

3 Hệ thống thêm sản phảm vào giỏ hàng và thông báo thêm thành công[Alternative 1]

Nếu sản phẩm đã có trong giỏ hàng thì hệ thống sẽ cập nhật số lượng

Nếu chưa có giỏ hàng nào thì tiến hành tạo giỏ hàng và thêm sản phẩm vào giỏ hàng

Exception Flow [Exception 1]: Thông báo lỗi nếu sản phẩm không đủ hoặc vượt quá số lượng tồn kho

Bảng 2.26: Use Case “Đặt hàng”

Khách hàng đặt hàng với các sản phẩm và số lượng sản phẩm trong giỏ hàng

Khách hàng đã đăng nhập vào hệ thống và truy cập vào trang giỏ hàng (giỏ hàng có sản phẩm)

Hệ thống lưu thông tin đơn hàng, chuyển trạng thái đơn hàng và hiển thị thông báo đặt hàng thành công

Main Flow 1 Nhấn nút “Đặt hàng”

2 Hệ thống chuyển sang trang thông tin giao hàng

3 Nhập thông tin giao hàng, chọn phương thức thanh toán và chọn “Đặt hàng” [Exception 1]

4 Hệ thống cập nhật lại số lượng, trạng thái đơn hàng và thông báo đặt hàng thành công[Exception 2] [Alternative 1]

Nếu phương thức thanh toán là của bên thứ 3 (PayPal) thì thực hiện tiếp các bước sau:

1 Hệ thống điều hướng người dùng sang trang thanh toán của bên thứ 3

2 Người dùng thực hiện việc thanh toán thành công Sau đó bên thứ 3 sẽ gửi thông tin về hệ thống

3 Hệ thống lưu thông tin thanh toán và cập nhật trạng thái đơn hàng

Flow [Exception 1]: Hiển thị thông báo lỗi khi nhập không đủ thông tin

[Exception 2]: Hiện thị thông báo lỗi khi vượt quá số lượng sản phẩm tồn kho

2.3.2.23.Use Case “Chỉnh sửa số lượng sản phẩm trong giỏ hàng”

Bảng 2.27: Use Case “Chỉnh sửa số lượng sản phẩm trong giỏ hàng”

Use case Chỉnh sửa số lượng sản phẩm trong giỏ hàng

Thay đổi số lượng sản phẩm trong giỏ hàng

Pre-Conditions Khách hàng đã đăng nhập vào hệ thống và truy cập vào trang giỏ hàng (giỏ hàng có sản phẩm)

Post Conditions Hệ thống cập nhật sản phẩm

Main Flow 1 Nhập số lượng cần đổi[Alternative 1]

2 Hệ thống sẽ cập nhật số lượng sản phẩm trong giỏ hàng [Exception 1]

Alternate Flow [Alternative 1]: Có thể chọn nút “+” hoặc “-” để thay đổi số lượng

Exception Flow [Exception 1]: Thông báo lỗi khi vượt quá số lượng tồn kho

2.3.2.24.Use Case “Xem danh sách đơn hàng”

Bảng 2.28: Use Case “Xem danh sách đơn hàng”

Use case Xem danh sách đơn hàng

Xem danh sách đơn hàng đã hoặc đang đặt của chính mình

Pre-Conditions Khách hàng đăng nhập vào hệ thống

Post Conditions Hiển thị danh sách đơn hàng

Main Flow 1 Nhấn chọn “Theo dỏi đơn hàng”

2 Hệ thống lấy thông tin các đơn hàng của khách hàng và hiện danh sách đơn hàng [Exception 1]

Exception Flow [Exception 1]: Nếu không có đơn nào thì hiển thị thông báo không có đơn hàng

2.3.2.25.Use Case “Thêm sản phẩm”

Bảng 2.29: Use Case “Thêm sản phẩm”

Use case Thêm sản phẩm

Pre-Conditions Quản trị viên đã đăng nhập vào hệ thống

Post Conditions Lưu sản phẩm mới vào hệ thống

Main Flow 1 Nhấn nút “Thêm sản phẩm”

2 Hiển thị trang thêm sản phẩm

3 Nhập thông tin sản phẩm và nhấn “Thêm sản phẩm” [Exception 1]

4 Hệ thống lưu thông tin sản phẩm mới

Exception Flow [Exception 1]: Thông báo lỗi nếu thông tin sản phẩm không nhập đủ hoặc trùng sản phẩm

2.3.2.26.Use Case “Chỉnh sửa sản phẩm”

Bảng 2.30: Use Case “Chỉnh sửa sản phẩm”

Use case Chỉnh sửa sản phẩm

Người quản lý chỉnh sửa sản phẩm

Pre-Conditions Quản trị viên đã đăng nhập vào hệ thống và truy cập trang danh sách sản phẩm

Post Conditions Hệ thống cập nhật thông tin chỉnh sửa

Main Flow 1 Nhấn nút biểu tượng cập nhật sản phẩm

2 Hiển thị trang chỉnh sửa sản phẩm

3 Nhập thông tin sản phẩm muốn thay đổi và nhấn “Chỉnh sửa sản phẩm” [Exception 1]

4 Hệ thống cập nhật thông tin sản phẩm

Exception Flow [Exception 1]: Thông báo lỗi nếu thông tin sản phẩm không nhập đủ hoặc trùng sản phẩm

2.3.2.27.Use Case “Chỉnh sửa trạng thái sản phẩm”

Bảng 2.31: Use Case “Chỉnh sửa trạng thái sản phẩm”

Use case Chỉnh sửa trạng thái sản phẩm

Chỉnh sửa trạng thái (ẩn) sản phẩm

Pre-Conditions Quản trị viên đã đăng nhập vào hệ thống và truy cập trang danh sách sản phẩm

Post Conditions Sản phẩm được cập nhật trạng thái

Main Flow 1 Nhấn nút biểu tượng x bên phải sản phẩm

2 Hiển thị thông báo chuyển trạng thái

3 Chọn trạng thái sản phẩm và nhấn “Lưu”

4 Hệ thống cập nhật trạng thái sản phẩm

2.3.2.28.Use Case “Xem thống kê”

Bảng 2.32: Use Case “Xem thống kê”

Use case Xem thống kê

Người quản lý xem thống kê

Pre-Conditions Quản trị viên đã đăng nhập vào hệ thống

Post Conditions Hiển thị thống kê website

Main Flow 1 Người quản lý chọn “Thống kê”

2 Hệ thống hiển thị các thống kê tài khoản, sản phẩm, đơn hàng, doanh thu, danh mục

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

LƯỢC ĐỒ LỚP

LƯỢC ĐỒ TUẦN TỰ

Hình 3.2: Lược đồ tuần tự “Đăng ký”

Hình 3.3: Lược đồ tuần tự “Đăng nhập”

Hình 3.4: Lược đồ tuần tự “Đổi mật khẩu”

Hình 3.5: Lược đồ tuần tự “Đặt lại mật khẩu”

3.2.5.Chỉnh sửa thông tin cá nhân

Hình 3.6: Lược đồ tuần tự “Chỉnh sửa thông tin cá nhân”

3.2.6.Thêm đánh giá sản phẩm

Hình 3.7: Lược đồ tuần tự “Thêm đánh giá sản phẩm”

3.2.7.Chỉnh sửa đánh giá sản phẩm

Hình 3.8: Lược đồ tuần tự “Chỉnh sửa đánh giá sản phẩm”

3.2.8.Xoá đánh giá sản phẩm

Hình 3.9: Lược đồ tuần tự “Xoá đánh giá sản phẩm”

Hình 3.10: Lược đồ tuần tự “Huỷ đơn hàng”

3.2.10.Thêm danh mục sản phẩm

Hình 3.11: Lược đồ tuần tự “Thêm danh mục sản phẩm”

3.2.11.Chỉnh sửa danh mục sản phẩm

Hình 3.12: Lược đồ tuần tự “Chỉnh sửa danh mục sản phẩm”

3.2.12.Chỉnh sửa trạng thái danh mục sản phẩm

Hình 3.13: Lược đồ tuần tự “Chỉnh sửa trạng thái danh mục sản phẩm”

3.2.13.Chỉnh sửa trạng thái người dùng

Hình 3.15: Lược đồ tuần tự “Xác nhận giao hàng”

3.2.15.Xác nhận nhận hàng thành công

Hình 3.16: Lược đồ tuần tự “Xác nhận nhận hàng thành công”

Hình 3.17: Lược đồ tuần tự “Huỷ đơn hàng”

3.2.17.Xem nội dung đánh giá sản phẩm

3.2.18.Chỉnh sửa trạng thái đánh giá

Hình 3.19: Lược đồ tuần tự “Chỉnh sửa trạng thái đánh giá”

Hình 3.20: Lược đồ tuần tự “Tìm kiếm sản phẩm”

3.2.20.Xem chi tiết sản phẩm

Hình 3.21: Lược đồ tuần tự “Xem chi tiết sản phẩm”

3.2.21.Thêm sản phẩm vào giỏ hàng

Hình 3.22: Lược đồ tuần tự “Thêm sản phẩm vào giỏ hàng”

Hình 3.23: Lược đồ tuần tự “Đặt hàng”

3.2.23.Chỉnh sửa số lượng sản phẩm trong giỏ hàng

Hình 3.24: Lược đồ tuần tự “Chỉnh sửa số lượng sản phẩm trong giỏ hàng”

3.2.24.Xem danh sách đơn hàng

Hình 3.25: Lược đồ tuần tự “Xem danh sách đơn hàng”

Hình 3.26: Lược đồ tuần tự “Thêm sản phẩm”

Hình 3.27: Lược đồ tuần tự “Chỉnh sửa sản phẩm”

3.2.27.Chỉnh sửa trạng thái sản phẩm

Hình 3.28: Lược đồ tuần tự “Chỉnh sửa trạng thái sản phẩm”

Hình 3.29: Lược đồ tuần tự “Thống kê”

CƠ SỞ DỮ LIỆU

3.3.1.Lược đồ cơ sở dữ liệu

Hình 3.30: Lược đồ cơ sở dữ liệu

3.3.2.Chi tiết bảng dữ liệu

Tên thuộc tính Kiểu Mô tả Ghi chú

_id ObjectId Mã người dùng được sinh tự động name String Tên của người dùng email String Email đăng nhập password String Mật khẩu phone String Số điện thoại người dùng role String Vai trò avatar String Đường dẫn đến ảnh đại diện state String Trạng thái tài khoản flag ESocial Hình thức đăng ký

_id ObjectId Mã danh mục được sinh tự động name String Tên danh mục state String Trạng thái danh mục

_id ObjectId Mã sản phẩm được sinh tự động name String Tên sản phẩm description String Mô tả sản phẩm price Decimal128 Giá sản phẩm sale Int32 Phần trăm giảm giá category

Mã danh mục quantity Int32 Số lượng sản phẩm rate Double Số điểm đánh giá của sản phẩm Tối đa là 5 sold Double Số lượng sản phẩm đã bán discound double Giá sản phẩm đã giảm giá state String Trạng thái sản phẩm images Array(Object) Danh sách hình ảnh sản phẩm images.imageId String Mã hình ảnh Thuộc tính con của “images” images.url String Đường dẫn đến hình ảnh

Thuộc tính con của “images” createdDate Date Thời gian tạo

_id ObjectId Mã đơn hàng được sinh tự động user ObjectId,

Mã người dùng delivery Object Chi tiết thông tin giao hàng delivery shipName String Tên người nhận Thuộc tính con của “delivery” delivery shipPhone String Số điện thoại người nhận

Thuộc tính con của “delivery” delivery shipProvince String Mã tỉnh thành người của người nhận

Thuộc tính con của “delivery” delivery shipDistrict String Mã quận huyện người nhận

Thuộc tính con của “delivery” delivery shipWard String Mã phường xã người nhận

Thuộc tính con của “delivery” delivery shipAddress String Địa chỉ chi tiết người nhận

Thuộc tính con của “delivery” paymentDetail Object Chi tiết thông tin thanh toán paymentDetail paymentId String Mã thanh toán

“paymentDetail” paymentDetail paymentType String Loại thanh toán

Token trả về khi thanh toán của bên thứ 3

“paymentDetail” paymentInfo thanh toán của

“paymentDetail” createdDate Date Thời gian tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

Mã sản phẩm trong đơn hàng được sinh tự động item ObjectId,

Mã phiên bản sản phẩm quantity Int64 Số lượng sản phẩm order

_id ObjectId Mã đánh giá được sinh tự động content String Nội dung đánh giá rate Double Số điểm đánh giá user ObjectId,

Mã người dùng đánh giá product ObjectId,

Mã sản phẩm được đánh giá state String Trạng thái đánh giá createdDate Date Thời gian tạo lastModifiedDate Date Thời gian chỉnh sửa cuối cùng

THIẾT KẾ GIAO DIỆN

3.4.1.Giao diện phía khách hàng

Bảng 3.7: Bảng danh sách giao diện phía khách hàng

Mã Tên màn hình Mô tả

IG01 Trang chủ Hiển thị các danh sách sản phẩm theo danh mục, mới nhất, phổ biến

IG02 Trang chi tiết sản phẩm

• Hiển thị thông tin chi tiết sản phẩm

• Thêm giỏ hàng tại trang chi tiết sản phẩm và số lượng tương ứng

• Danh sách sản phẩm đã xem

IG03 Trang tìm kiếm sản phẩm

Danh sách sản phẩm dựa vào từ khóa, sắp xếp, lọc giá

Gồm các trường nhập như email, mật khẩu

Nút quên mật khẩu, nút đăng ký Đăng nhập bằng Google

IG05 Trang đăng ký Trang đăng ký bao gồm các trường: họ và tên, email, mật khẩu, nhập lại mật khẩu

IG06 Trang gửi otp Gửi otp thông qua email

IG07 Trang xác nhận otp

Xác nhận otp sau khi đăng ký để kích hoạt tài khoản

IG08 Trang xác nhận otp (đặt lại mật khẩu) Xác nhận otp trước khi đặt lại mật khẩu

Hình 3.31: Trang chủ Bảng 3.8: Bảng chi tiết trang chủ

# Tên Định dạng Tham chiếu Sự kiện

1 Tên danh mục Link Trang tìm kiếm Nhấn vào sẽ chuyển đến trang tìm kiếm

2 Thẻ sản phẩm Card Hiển thị tên, giá sản phẩm, nút mua ngay

3 Tên sản phẩm Link Trang chi tiết sản phẩm

Nhấn vào sẽ chuyển đến trang chi tiết sản phẩm

4 Nút mua ngay Button Trang giỏ hàng

Nhấn vào để thêm 1 sản phẩm vào giỏ, chuyển đến trang giỏ hàng

3.4.1.2.IG02Trang chi tiết sản phẩm

Hình 3.32: Thông tin sản phẩm

Hình 3.33: Đánh giá sản phẩm

Hình 3.34: Sản phẩm đã xem

Bảng 3.9: Bảng chi tiết sản phẩm

1 Nút tăng giảm số lựng Button Nhấn để tăng hoặc giảm số lượng

2 Nút mua ngay Button Trang giỏ hàng Nhấn vào để thêm 1 sản phẩm vào giỏ, chuyển đến trang giỏ hàng

3 Nút cho vào giỏ hàng Button Nhấn vào để thêm sản phẩm vào giỏ

4 Nút chuyển ảnh Button Nhấn xem ảnh

5 Chỉnh sửa đánh giá Button

Nhấn vào chuyển sang chế độ chỉnh sửa đánh giá

6 Xóa đánh giá Button Nhấn vào để xóa đánh giá

7 Thẻ sản phẩm Card Hiển thị tên, giá sản phẩm, nút mua ngay

Nhấn vào sẽ chuyển đến trang chi tiết sản phẩm

3.4.1.3.IG03Trang tìm kiếm sản phẩm

Hình 3.35: Trang tìm kiếm Bảng 3.10: Bảng chi tiết sản phẩm

2 Nút sắp xếp Button Nhấn vào để sắp xếp

4 Danh mục Nav Nhấn để tìm kiếm sản phẩm theo danh mục

Hình 3.36: Trang đăng nhập Bảng 3.11: Bảng chi tiết đăng nhập

3 Đăng nhập Button Nhấn vào để đăng nhập

4 Quên mật khẩu Link Trang gửi otp Nhấn vào sẽ đến trang gửi otp

5 Tạo tài khoản Link Trang đăng ký Nhấn vào sẽ đến trang đăng ký

Google Button Nhấn vào để đăng nhập bằng tài khoản Google

Hình 3.37: Trang đăng ký Bảng 3.12: Bảng chi tiết đăng ký

4 Nhập lại mật khẩu Input

5 Đăng ký Button Nhấn vào để đăng ký

6 Đăng nhập tài khoản đã có Link Trang đăng nhập Nhấn vào sẽ đến trang đăng nhập

Hình 3.38: Trang gửi otp Bảng 3.13: Bảng chi tiết gửi otp

2 Gửi otp Button Nhấn vào để gửi otp tương với email đã nhập

3.4.1.7.IG07Trang xác nhận otp (đăng ký)

Hình 3.39: Trang xác nhận otp (đăng ký) Bảng 3.14: Bảng chi tiết xác nhận (đăng ký)

3 Gửi lại otp Button Nhấn vào để gửi otp tương với email đã nhập

4 Xác nhận otp Button Nhấn vào để xác nhận đúng mã otp

3.4.1.8.IG08Trang xác nhận otp (đặt lại mật khẩu)

Hình 3.40: Trang xác nhận otp (đặt lại mật khẩu) Bảng 3.15: Bảng chi tiết xác nhận (đặt lại mật khẩu)

2 Xác nhận otp Button Nhấn vào để xác nhận đúng mã otp

3.4.2.Giao diện phía ngời dùng

Bảng 3.16: Bảng danh sách giao diện phía người dùng

IU01 Trang thông tin người dùng Hiển thị các thông tin đến người dùng

IU02 Trang thay đổi mật khẩu Thay đổi mật khẩu sau khi đăng nhập

IU03 Trang giỏ hàng Các sản phẩm trong giỏ hàng sẽ được đặt mua IU04 Trang đặt mua hàng Kiểm tra và đặt đơn hàng

IU05 Trang theo dõi đơn hàng Hiển thị các đơn hàng đã được tạo, sắp xếp theo ngày mới nhất

IU06 Trang chi tiết đơn hàng

Hiển thị thông tin như địa chỉ, phương thức, tình trạng thanh toán, các sản phẩm trong đơn hàng

3.4.2.1.IU01Trang thông tin người dùng

Hình 3.41: Trang thông tin người dùng Bảng 3.17:Bảng chi tiết trang thông tin người dùng

4 Lưu thông tin cơ bản Button Nhấn vào để thông tin người dùng

5 Avatar Input file Nhấn vào để chọn ảnh

6 Lưu ảnh đại diện Button Nhấn để lưu ảnh

3.4.2.2.IU02Trang thay đổi mật khẩu

Hình 3.42: Trang thay đổi mật khẩu Bảng 3.18: Bảng chi tiết trang đổi mật khẩu

3 Thay đổi mật khẩu Button Nhấn vào thay đổi mật khẩu

Hình 3.43: Trang giỏ hàng Bảng 3.19: Bảng chi tiết giỏ hàng

1 Nút tăng giảm số lựng Button Nhấn để tăng hoặc giảm số lượng

Nhấn vào đi đến trang chi tiết sản phẩm

3 Xóa khỏi đơn hàng Button Nhấn vào để xóa sản phẩm khỏi đơn hàng

4 Thanh toán Link Trang đặt đơn mua hàng

Nhấn vào đi đến trang đặt mua hàng

5 Về trang chủ Link Trang chủ Nhấn vào đi đến trang chủ

3.4.2.4.IU04Trang đặt mua hàng

Hình 3.44: Trang đặt hàng Bảng 3.20: Bảng chi tiết đặt hàng

3 Tỉnh Select Từ API GHN

4 Quận, huyện Select Từ API GHN

5 Xã Select Từ API GHN

7 Phương thức thanh toán Radio

8 Trở về giỏ hàng Link Trang giỏ hàng Nhấn vào đến trang giỏ hàng

9 Đặt mua Button Nhấn vào để đặt mua hàng

3.4.2.5.IU05Trang theo dõi đơn hàng

Hình 3.45: Trang theo dõi đơn hàng Bảng 3.21: Bảng chi tiết theo dõi đơn hàng

1 Mục lựa chọn Tab Nhấn vào để lọc trạng thái đơn hàng

2 Xem chi tiết Link Trang chi tiết đơn hàng Nhấn để chuyển đến chi tiết đơn hàng

3.4.2.6.IU06Trang chi tiết đơn hàng

Hình 3.46: Trang chi tiết đơn hàng Bảng 3.22: Bảng chi tiết đơn hàng

1 Hủy đơn hàng Button Nhấn để hủy đơn hàng

3.4.3.Giao diện phía quản trị viên

Bảng 3.23: Bảng danh sách giao diện phía quản trị viên

IA01 Trang đăng nhập Xác thực người dùng tiếp tục thực hiện các chức năng của quản trị

IA02 Trang thống kê Xem các thống kê như số lượng bán theo danh mục, danh thu theo tháng

IA03 Trang danh sách sản phẩm Hiển thị các sản phẩm theo ngày mới nhất

IA04 Trang thêm sản phẩm Thêm các thông tin, hình ảnh cho sản phẩm

IA05 Trang danh sách danh mục Hiển thị danh sách danh mục

IA06 Quản lý đơn hàng Trang thực hiện các chức năng quản lý đơn hàng

IA07 Trang chi tiết đơn hàng

Thông tin chi tiết đơn hàng, tình trạng, sản phẩm trong đơn hàng

IA08 Quản lý người dùng Trang thực hiện các chức năng quản lý người dùng IA09 Quản lý đánh giá sản phẩm Trang thực hiện các chức năng quản lý đánh giá

Hình 3.47: Trang đăng nhập Bảng 3.24: Bảng chi tiết đăng nhập

3 Đăng nhập Button Nhấn vào để đăng nhập

Hình 3.48: Thống kê số lượng bán

Hình 3.49: Thống kê doanh thu Bảng 3.25: Bảng chi tiết trang danh sách sản phẩm

1 Sắp xếp Select Chọn giá trị muốn sắp xếp

2 Thời gian bắt đầu Datetime picker Chọn ngày bắt đầu

Datetime picker Chọn ngày kết thúc

3.4.3.3.IA03 Trang danh sách sản phẩm

Hình 3.50: Trang danh sách sản phẩm Bảng 3.26: Bảng chi tiết trang danh sách sản phẩm

1 Thêm sản phẩm Link Trang biểu mẫu sản phẩm Nhấn vào để vào trang thêm sản phẩm

2 Nút áp dụng Button Nhấn vào để nhận giá trị lọc giá tiền

5 Sắp xếp Select Nhấn vào để chọn cách sắp xếp

6 Nút trạng thái Button Nhấn vào để lọc theo trạng thái

7 Nút chỉnh sửa sản phẩm Link Trang biểu mẫu sản phẩm Nhấn vào để vào trang sửa sản phẩm

8 Nút ẩn sẩn phẩm Button Nhấn vào nút để ẩn sản phẩm

3.4.3.4.IA04 Trang thêm sản phẩm

Hình 3.51: Trang thêm sản phẩm Bảng 3.27: Bảng chi tiết trang thêm sản phẩm

1 Về trang đanh sách sản phẩm Link Trang danh sách sản phẩm Nhấn vào để vào trang danh sách sản phẩm

4 Tỉ lệ giảm giá Input

5 Số lượng sản phẩm Input

Gọi api lấy danh sách danh mục

Button Nhấn nút để thêm sản

3.4.3.5.IA05 Trang danh sách danh mục

Hình 3.52: Trang danh sách danh mục Bảng 3.28: Bảng chi tiết trang danh sách danh mục

1 Thêm danh mục sản phẩm Link Trang biểu mẫu danh mục Nhấn vào để chuyển đến trang thêm danh mục

2 Thay đổi trạng thái danh mục Button Nhấn vào để thay đổi trạng thái danh mục

3.4.3.6.IA06 Quản lý đơn hàng

Hình 3.53: Trang quản lý đơn hàng Bảng 3.29: Bảng chi tiết Quản lý đơn hàng

5 Xem chi tiết đơn hàng Link Trang chi tiết đơn hàng Nhấn vào chuyển trang chi tiết đơn hàng

3.4.3.7.IA07 Trang chi tiết đơn hàng

Hình 3.54: Trang chi tiết đơn hàng Bảng 3.30: Bảng chi tiết danh sách đơn hàng

1 Về Quản lý đơn hàng Link Quản lý đơn hàng

Nhấn vào chuyển Quản lý đơn hàng

2 Hủy đơn hàng Button Nhấn vào để hủy đơn hàng

3 Xác nhận đơn hàng Button Nhấn vào để xác nhận đơn hàng được giao

3.4.3.8.IA08 Quản lý người dùng

Hình 3.55: Trang Quản lý người dùng Bảng 3.31: Bảng chi tiết Quản lý người dùng

Thay đổi trạng thái người dùng

Button Nhấn vào để thay đổi trạng thái

3.4.3.9.IA09 Quản lý đánh giá sản phẩm

Hình 3.56: Trang Quản lý đánh giá sản phẩm Bảng 3.32: Bảng chi tiết trang Quản lý đánh giá sản phẩm

3 Thay đổi trạng thái đánh giá Button Nhấn vào để thay đổi trạng thái

CÀI ĐẶT VÀ KIỂM THỬ

KIỂM THỬ

4.2.1.Kế hoạch kiểm thử o Xác nhận được mục đích và phạm vi cần test o Tạo danh sách chức năng cần test o Kiểm tra và vận dụng phương pháp test

Nhóm đã sử dụng phương pháp kiểm thử hộp đen để kiểm thử cho các chức năng của dự án website này Vì phương pháp này dễ thực hiện và nhanh chóng tìm ra lỗi để kịp khắc phục trong thời gian ngắn

4.2.2.1.Kiểm thử phía người dùng

Bảng 4.1: Bảng kiểm thử phía người dùng

STT Mô tả Các bước tiến hành

1 Chức năng đăng ký tài khoản

−Nhấn tạo tài khoản ở đăng nhập

−Điền thông tin cần thiết

−Nhập mã xác thực Đăng ký thành công

Như kết quả đạt được Đạt

−Nhấn nút “Đăng nhập” tại trang chủ

−Nhập tài khoản, mật khẩu

−Nhẩn nút “Đăng nhập” Đăng nhập thành công

3 Chỉnh sửa −Vào trang thông Thông tin cá Như kết quả cá nhân thông tin cần sửa

−Nhấp nút “Lưu” chỉnh sửa

4 Chức năng thêm sản phẩm vào giỏ hàng

−Vào chi tiết một sản phẩm

−Điều chỉnh số lượng cần mua

−Chọn “Thêm vào giỏ hàng”

Sản phẩm đã được thêm vào giỏ hàng

−Nhấn nút đặt hàng tại giỏ hàng

−Điền đầy đủ thông tin và chọn phương thức đặt hàng và chọn “Đặt hàng” Đặt hàng thành công

6 Chức năng đánh giá sản phẩm

−Vào trang chi tiết sản phẩm

−Nhấn nút đánh giá, chọn điểm và nhập đánh giá và nhấn “Gửi” Đánh giá thành công

7 Chức năng tìm kiếm sản phẩm

−Tại trang chủ nhập từ khoá tìm kiếm trên thanh tìm kiếm và nhấn

8 Chức năng xem đơn hàng đã đặt

−Vào trang quản lý đơn hàng và xem các đơn hàng đã đặt

Xem được các đơn hàng đã đặt

4.2.2.2.Kiểm thử phía quản trị viên

Bảng 4.2: Bảng kiểm thử phía quản trị viên

STT Mô tả Các bước tiến hành

1 Chức năng chỉnh sửa trạng thái người dùng

−Vào trang danh sách người dùng

−Chọn biểu tượng khoá để chỉnh trạng thái người dùng

Trạng thái người dùng đã được chỉnh sửa

2 Chức năng thêm sản phẩm

−Nhấn nút thêm sản phẩm

−Nhập các thông tin cần thiết của sản phẩm

Sản phẩm đã được thêm

3 Chức năng chỉnh sửa sản phẩm

−Nhấn biểu tượng bút chì tại sản phẩm cần chỉnh sửa ở trang danh sách sản phẩm

−Nhập các thông tin cần chỉnh sửa và nhấn “Lưu”

Sản phẩm đã được chỉnh sửa

4 Chức năng thêm danh mục

−Nhấn nút thêm danh mục

Danh mục đã được thêm

Như kết quả đạt được Đạt tin cần thiết của danh mục

5 Chức năng xem thống kê

−Vào trang chủ quản trị viên hoặc nhấn vào trang thống kê

Bảng thống kê đã được hiện trên màn hình

6 Chức năng tìm kiếm sản phẩm

−Vào trang danh sách sản phẩm

−Nhập từ khoá sản phẩm cần tìm và chọn các yếu tố cần lọc và nhấn

Danh sách sản phẩm cần tìm kiến hiện lên màn hình

ƯU ĐIỂM

4 Đề nghị cho bảo vệ hay không?

TP HỒ CHÍ MINH, ngày tháng năm 2024

Giảng viên hướng dẫn (Ký, ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên Sinh viên: Trần Minh Sang Mã số sinh viên: 19110278

Họ và tên Sinh viên: Nguyễn Hoàng Chí Vĩ Mã số sinh viên: 19110021

Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website bán hàng linh kiện điện tử sử dụng Spring boot và React

Họ và tên Giảng viên phản biện: ThS Lê Thị Minh Châu

1 Về nội dung đề tài & khối lượng thực hiện:

4 Đề nghị cho bảo vệ hay không?

TP HỒ CHÍ MINH, ngày tháng năm 2024

Giảng viên phản biện (Ký, ghi rõ họ tên)

Lời đầu tiên, nhóm xin gửi lời cảm ơn chân thành nhất Khoa Đào tạo Chất lượng cao đã tạo điều kiện cho nhóm được học tập, thực hiện xây dựng và phát triển đề tài này giúp nắm vững nền tảng kiến thức cơ bản nhất của ngành Công Nghệ Thông Tin

Nhóm cũng xin chân thành cảm ơn và sâu sắc nhất đến thầy – TS Lê Văn Vinh Trong suốt quá trình học tập và làm đề tài thầy đã hướng dẫn tận tình và tâm huyết đưa ra những góp ý quý báu giúp cho nhóm thực hiện tốt đề tài này Thầy đã giúp chúng tích lũy thêm vô vàn kiến thức, giúp có cái nhìn sâu sắc hơn về vấn đề và có thể hoàn thiện bản thân hơn trong học tập cũng như cuộc sống Từ những kiến thức quý báu đó, đã đúc kết được và hoàn thiện bài báo cáo tiểu luận này

Nhưng kiến thức là vô hạn mà sự tiếp thu kiến thức của bản thân mỗi người luôn tồn tại những nhược điểm, hạn chết nhất định Do đó, trong quá trình thực hiện và hoàn thành sản phẩm cũng như viết báo cáo sẽ không tránh khỏi những thiếu sót Chính vì vậy nhóm rất mong nhận được sự thông cảm và nhận được những góp ý từ thầy, qua đó nhóm có thể hoàn thiện hơn nữa sản phẩm và củng cố kiến thức cũng như rút ra được kinh nghiệm cho bản thân để có thể thực hiện các đồ án khác trong tương lai

Cuối lời, kính chúc thầy luôn dồi dào sức khỏe, hạnh phúc và thành công trên con đường lái đò đưa sinh viên của mình đến đỉnh vinh quang

Trần Minh Sang – 19110278 Nguyễn Hoàng Chí Vĩ – 19110021

DANH MỤC TỪ VIẾT TẮT 4

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 9

4 MỤC ĐÍCH CỦA ĐỀ TÀI 10

6 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 10

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 12

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ YÊU CẦU 21

2.3 MÔ HÌNH HOÁ YÊU CẦU 28

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 58

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 115

CSDL: Cơ sở dữ liệu

COD: Cash on delivery (Thanh toán khi nhận hàng)

IG: Màn hình phía khách hàng

IU: Màn hình phía người dùng

IA: Màn hình phía quản trị

Hình 1.1: Ví dụ về tính nghiêm ngặc của JSX, code sai cú pháp [7] 13

Hình 1.2: Ví dụ về tính nghiêm ngặc của JSX, code đã chỉnh sửa [7] 13

Hình 1.3: Ví dụ component lấy dự liệu từ props [7] 14

Hình 1.4: Dấu ngoặc nhọn trong JSX [7] 15

Hình 1.6: Ví dụ event handler [8] 16

Hình 1.7: Trạng thái sẽ không thay đổi cho đến khi re-render [9] 17

Hình 1.8: Spring Framework đến Spring Boot [4] 17

Hình 2.1: Trang chủ website Chotroihn 21

Hình 2.2: Trang chủ website Thegioiic 22

Hình 2.3: Trang chủ website Linhkienviet 23

Hình 2.4: Trang chủ website Nshopvn 24

Hình 2.5: Trang chủ website Hshop 25

Hình 2.6: Sơ đồ Use case phía khách hàng 28

Hình 2.7: Sơ đồ Use case phía quản trị viên 29

Hình 3.2: Lược đồ tuần tự “Đăng ký” 59

Hình 3.3: Lược đồ tuần tự “Đăng nhập” 60

Hình 3.4: Lược đồ tuần tự “Đổi mật khẩu” 61

Hình 3.5: Lược đồ tuần tự “Đặt lại mật khẩu” 62

Hình 3.6: Lược đồ tuần tự “Chỉnh sửa thông tin cá nhân” 63

Hình 3.7: Lược đồ tuần tự “Thêm đánh giá sản phẩm” 64

Hình 3.8: Lược đồ tuần tự “Chỉnh sửa đánh giá sản phẩm” 65

Hình 3.9: Lược đồ tuần tự “Xoá đánh giá sản phẩm” 66

Hình 3.10: Lược đồ tuần tự “Huỷ đơn hàng” 67

Hình 3.11: Lược đồ tuần tự “Thêm danh mục sản phẩm” 68

Hình 3.12: Lược đồ tuần tự “Chỉnh sửa danh mục sản phẩm” 69

Hình 3.13: Lược đồ tuần tự “Chỉnh sửa trạng thái danh mục sản phẩm” 70

Hình 3.14: Lược đồ tuần tự “Chỉnh sửa trạng thái người dùng” 70

Hình 3.15: Lược đồ tuần tự “Xác nhận giao hàng” 71

Hình 3.16: Lược đồ tuần tự “Xác nhận nhận hàng thành công” 72

Hình 3.17: Lược đồ tuần tự “Huỷ đơn hàng” 73

Hình 3.18: Lược đồ tuần tự “Xem nội dung đánh giá sản phẩm” 73

Hình 3.19: Lược đồ tuần tự “Chỉnh sửa trạng thái đánh giá” 74

Hình 3.20: Lược đồ tuần tự “Tìm kiếm sản phẩm” 75

Hình 3.21: Lược đồ tuần tự “Xem chi tiết sản phẩm” 76

Hình 3.22: Lược đồ tuần tự “Thêm sản phẩm vào giỏ hàng” 77

Hình 3.23: Lược đồ tuần tự “Đặt hàng” 78

Hình 3.24: Lược đồ tuần tự “Chỉnh sửa số lượng sản phẩm trong giỏ hàng” 79

Hình 3.25: Lược đồ tuần tự “Xem danh sách đơn hàng” 80

Hình 3.26: Lược đồ tuần tự “Thêm sản phẩm” 81

Hình 3.28: Lược đồ tuần tự “Chỉnh sửa trạng thái sản phẩm” 83

Hình 3.29: Lược đồ tuần tự “Thống kê” 84

Hình 3.30: Lược đồ cơ sở dữ liệu 85

Hình 3.32: Thông tin sản phẩm 93

Hình 3.33: Đánh giá sản phẩm 93

Hình 3.34: Sản phẩm đã xem 93

Hình 3.39: Trang xác nhận otp (đăng ký) 98

Hình 3.40: Trang xác nhận otp (đặt lại mật khẩu) 99

Hình 3.41: Trang thông tin người dùng 100

Hình 3.42: Trang thay đổi mật khẩu 101

Hình 3.45: Trang theo dõi đơn hàng 104

Hình 3.46: Trang chi tiết đơn hàng 104

Hình 3.48: Thống kê số lượng bán 107

Hình 3.49: Thống kê doanh thu 107

Hình 3.50: Trang danh sách sản phẩm 108

Hình 3.51: Trang thêm sản phẩm 109

Hình 3.52: Trang danh sách danh mục 110

Hình 3.53: Trang quản lý đơn hàng 111

Hình 3.54: Trang chi tiết đơn hàng 112

Hình 3.55: Trang Quản lý người dùng 113

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

Bảng 2.1: Bảng yêu cầu chức năng nghiệp vụ phía khách hàng 26

Bảng 2.2: Bảng yêu cầu chức năng nghiệp vụ phía quản trị viên 26

Bảng 2.3: Bảng yêu cầu chức năng hệ thống 27

Bảng 2.4: Bảng yêu cầu phi chức năng 27

Bảng 2.5: Use Case “Đăng nhập” 30

Bảng 2.6: Use Case “Đăng ký” 31

Bảng 2.7: Use Case “Chỉnh sửa thông tin cá nhân” 32

Bảng 2.8: Use Case “Đổi mật khẩu” 33

Bảng 2.9: Use Case “Đánh giá sản phẩm” 34

Bảng 2.10: Use Case “Đặt lại mật khẩu” 35

Bảng 2.11: Use Case “Chỉnh sửa đánh giá sản phẩm” 36

Bảng 2.12: Use Case “Xoá đánh giá sản phẩm” 37

Bảng 2.13: Use Case “Huỷ đơn hàng” 38

Bảng 2.14: Use Case “Thêm danh mục sản phẩm” 39

Bảng 2.15: Use Case “Chỉnh sửa danh mục sản phẩm” 40

Bảng 2.16: Use Case “Chỉnh sửa trạng thái danh mục sản phẩm” 41

Bảng 2.17: Use Case “Chỉnh sửa trạng thái người dùng” 42

Bảng 2.18: Use Case “Xác nhận giao hàng” 43

Bảng 2.19: Use Case “Xác nhận nhận hàng thành công” 44

Bảng 2.20: Use Case “Huỷ đơn hàng” 45

Bảng 2.21: Use Case “Xem nội dung đánh giá” 46

Bảng 2.22: Use Case “Chỉnh sửa trạng thái đánh giá” 47

Bảng 2.23: Use Case “Tìm kiếm sản phẩm” 48

Bảng 2.24: Use Case “Xem chi tiết sản phẩm” 49

Bảng 2.25: Use Case “Thêm sản phẩm vào giỏ hàng” 50

Bảng 2.26: Use Case “Đặt hàng” 51

Bảng 2.27: Use Case “Chỉnh sửa số lượng sản phẩm trong giỏ hàng” 52

Bảng 2.28: Use Case “Xem danh sách đơn hàng” 53

Bảng 2.29: Use Case “Thêm sản phẩm” 54

Bảng 2.30: Use Case “Chỉnh sửa sản phẩm” 55

Bảng 2.31: Use Case “Chỉnh sửa trạng thái sản phẩm” 56

Bảng 2.32: Use Case “Xem thống kê” 57

Bảng 3.7: Bảng danh sách giao diện phía khách hàng 91

Bảng 3.8: Bảng chi tiết trang chủ 92

Bảng 3.9: Bảng chi tiết sản phẩm 94

Bảng 3.10: Bảng chi tiết sản phẩm 95

Bảng 3.13: Bảng chi tiết gửi otp 98

Bảng 3.14: Bảng chi tiết xác nhận (đăng ký) 98

Bảng 3.15: Bảng chi tiết xác nhận (đặt lại mật khẩu) 99

Bảng 3.16: Bảng danh sách giao diện phía người dùng 99

Bảng 3.17:Bảng chi tiết trang thông tin người dùng 100

Bảng 3.18: Bảng chi tiết trang đổi mật khẩu 101

Bảng 3.19: Bảng chi tiết giỏ hàng 102

Bảng 3.20: Bảng chi tiết đặt hàng 103

Bảng 3.21: Bảng chi tiết theo dõi đơn hàng 104

Bảng 3.22: Bảng chi tiết đơn hàng 104

Bảng 3.23: Bảng danh sách giao diện phía quản trị viên 105

Bảng 3.24: Bảng chi tiết đăng nhập 106

Bảng 3.25: Bảng chi tiết trang danh sách sản phẩm 107

Bảng 3.26: Bảng chi tiết trang danh sách sản phẩm 108

Bảng 3.27: Bảng chi tiết trang thêm sản phẩm 109

Bảng 3.28: Bảng chi tiết trang danh sách danh mục 110

Bảng 3.29: Bảng chi tiết Quản lý đơn hàng 111

Bảng 3.30: Bảng chi tiết danh sách đơn hàng 112

Bảng 3.31: Bảng chi tiết Quản lý người dùng 113

Bảng 3.32: Bảng chi tiết trang Quản lý đánh giá sản phẩm 114

Bảng 4.1: Bảng kiểm thử phía người dùng 116

Bảng 4.2: Bảng kiểm thử phía quản trị viên 119

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời kỳ công nghệ 4.0 hiện nay, với việc phát triển nhanh chóng vượt bật của công nghệ giúp đời sống được nâng cao Do đó nhu cầu mua bán sản phẩm trực tuyến rất được ưa chuộng Trong đó nhu cầu sử dụng đồ điện tử của con người ngày càng nhiều cho công việc hằng ngày Việc nắm bắt thông tin sản phẩm linh kiện một cách nhanh chóng là rất cần thiết vì công nghệ ngày càng phát triển nên sẽ sinh ra những sản phẩm mặt hàng mới mà ta không biết để ta có thể dễ dàng mua sắm và dễ dàng sử dụng những linh kiện đó Khi sử dụng nhiều và lâu dài rất dễ bị hư hỏng vì vậy việc kiểm tra, sửa chữa và thay thế các linh kiện điện tử là rất cần thiết

Từ nhu cầu thực tiễn đó, với mong muốn cung cấp người dùng một trang web có thể cung cấp cho người dùng về thông tin các linh kiện điện tử cũng như đặt hàng mua trực tuyến Website bán linh kiện điện là một lựa chọn tốt cho nhu cầu đặt hàng và mua linh kiện với giá cả phải chăng

2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu sử dụng, tham khảo, xem thông tin của các linh kiện điện tử tạo ra một website hỗ trợ người dùng tìm hiểu được thông tin của các linh kiện điện tử cũng như đặt hàng trực tuyến Bên cạnh đó là sự dụng các công nghệ để hiện thực hoá sản phẩm, cụ thể như sau:

- Nghiên cứu Spring Boot và các nền tảng hỗ trợ việc xây dựng để triển khai các APIs truy xuất, thao tác với dữ liệu cho website bán linh kiện điện tử

- Sử dụng cơ sở dữ liệu NoSQL là MongoDB để lưu trữ dữ liệu

- Về phần hiển thị thì tiến hành nghiên cứu Framework ReactJS, Redux và một số thư viện được hỗ trợ cho ReactJS để xây dựng và xử lý giao diện và cho người dùng sử dụng trên website bảo mật cho hệ thống, tất cả các luồng dữ liệu ra vào đều phải thông qua Token

Website được xây dựng tập trung vào các nghiệp vụ định hướng giúp việc lựa chọn và mua sắm các linh kiện điện tử của khách hàng trở nên dễ dàng, nhanh chóng như: xem danh sách sản phẩm theo các danh mục, thêm sản phẩm vào giỏ hàng, đặt hàng, đánh giá sản phẩm, … Về phần xử lý, xây dụng các APIs phục vụ truy xuất dữ liệu cuối cùng

4 MỤC ĐÍCH CỦA ĐỀ TÀI Đề tài “Xây dựng website bán hàng linh kiện điện tử sử dụng Spring boot và React JS” có mục tiêu cần đạt được là:

- Áp dụng được kiến thức về Spring Boot, MongoDB, ReactJS vào trong đồ án

- Xây dựng một website có giao diện, màu sắc thân thiện với người dùng để người dùng có nhiều lựa chọn sản phẩm

- Cung cấp cho người dùng một phương thức thanh toán và tiện lợi chỉ qua một vài cái nhấp trên điện thoại là có thể truy cập được những tin được cập nhật, làm mới hàng ngày

- Hệ thống quản lý và thống kê doanh thu của website

- Bảo mật thông tin cho khách hàng trong việc đặt hàng mua trực tuyến

Nghiên cứu trên cơ sở tài liệu hiện có và tổng hợp trên mạng những kiến thức lý thuyết về các công nghệ phần mềm và cách thức xây dựng của trang web

Phương pháp nghiên cứu thực nghiệm:

Tìm hiểu quy trình xây dựng và quản lý website thực tiễn

Lên ý tưởng thiết kế website

Tiến hành xây dưng ứng dụng

Sau khi hoàn thiện đề tài, nhóm chúng em đã rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích cũng như có được chút ít kinh nghiệm, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay Đồng thời, nâng cao tinh thần nghiên cứu và sáng tạo trong thời kỳ công nghệ phát triển vũ bão như hiện nay Khi đề tài nhóm chúng em được áp dụng vào thực tế, việc mua bán, tìm kiếm thông tin trở nên dễ dàng hơn và giúp tiết kiệm được thời gian cho người dùng

PHẦN NỘI DUNG CHƯƠNG 1:CƠ SỞ LÝ THUYẾT

NHƯỢC ĐIỂM

- Chưa hỗ trợ trên nền tảng di động

- Chưa hỗ trợ nhắn tin trực tiếp với quản trị viên

HƯỚNG PHÁT TRIỂN

- Cải thiện hiệu suất và nâng cao bảo mật của hệ thống

- Phát triển tìm kiếm sản phẩm thông qua hình ảnh, giọng nói

- Xây dựng trên nền tảng di động.

Tiêu đề	Xây dựng website bán hàng linh kiện điện tử sử dụng Spring Boot và React JS
Tác giả	Trần Minh Sang, Nguyễn Hoàng Chí Vĩ
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	129
Dung lượng	8,72 MB

Tài liệu tham khảo	Loại	Chi tiết
[1] Spring Boot Document: https://docs.spring.io/spring- boot/docs/current/reference/htmlsingle/	Link
[2] Tìm hiểu về Spring Framework: https://viblo.asia/p/tong-quan-ve-spring-framework-YWOZryEyKQ0	Link
[3] The MongoDB: https://hostingviet.vn/mongodb-la-gi	Link
[4] Tìm hiểu Spring Boot: https://viblo.asia/p/hoc-spring-boot-bat-dau-tu-dau-6J3ZgN7WKmB	Link
[5] Spring Boot Paypal integration: https://bitshifted.co/blog/spring-boot-paypal-integration/	Link
[6] Json Web Token: https://itnavi.com.vn/blog/jwt-la-gi-nhung-vai-tro-va-thanh-phan-chinh-cua-jwt	Link
[7] Mô tả giao diện: https://react.dev/learn/describing-the-ui	Link
[8] Tương tác các thành phần: https://react.dev/learn/adding-interactivity [9] create-react-app: https://create-react-app.dev/docs/getting-started	Link