Xây dựng website bán quần áo thể thao

Phía người quản trị Cho phép người quản tr vào trang web để: - Trang chi tiết sản phẩm - Thêm sản phẩm vào giỏ hàng - Tìm kiếm sản phẩm Cho phép khách đã có tài khoản truy cập: - Tất

CƠ SỞ LÝ THUYẾT

Tổng quan về Java

Java là ngôn ngữ lập trình hướng đối tượng phổ biến, được sử dụng để phát triển phần mềm desktop, ứng dụng web, game và ứng dụng di động Với khả năng tạo ra các ứng dụng đa nền tảng, Java mang đến tiêu chí "Viết một lần, chạy mọi nơi".

2.1.1 Một số khái niệm trong Java

Java là ngôn ngữ lập trình hướng đối tượng, trong đó mọi thứ đều được coi là đối tượng Máy ảo Java (JVM) cung cấp môi trường thực thi cho các chương trình Java, cho phép ứng dụng Java chạy trên bất kỳ nền tảng nào có cài đặt JVM.

Java không phụ thuộc vào hệ điều hành, khi biên d ch Java sẽ biên d ch ra byte code, byte code sẽ được chạy trên JVM

JDK: là bộ công cụ giúp phát triển ứng dụng Java, JDK sẽ biên d ch code, sau đó chạy và xử lý trên JVM và JRE

JRE: là một gói công cụ được sử dụng để chạy code

Java là ngôn ngữ lập trình đa nền tảng, hướng đối tượng và cho phép lập trình đa luồng, độc lập nền tảng nên có thể chạy ở mọi nơi

Java là ngôn ngữ lập trình bậc cao, giúp cho việc viết code dễ dàng, có hiệu năng mạnh mẽ, tốc độ xử lý nhanh

Java quản lý bộ nhớ hiệu quả, có khả năng tự thu gom rác, xử lý ngoại lệ, có độ bảo mật cao

Java có khả năng phát triển nhiều loại ứng dụng khác nhau như web, desktop, thiết b di động

Java biên dịch ra byte code và chạy trên JVM thông qua JRE, dẫn đến tốc độ chậm hơn và tiêu tốn nhiều tài nguyên Mặc dù là ngôn ngữ cấp cao, mã Java thường dài và phức tạp Hơn nữa, việc phát triển ứng dụng desktop bằng Java có thể gặp khó khăn do nhiều trình tạo GUI có sẵn.

Tổng quan về Spring Boot

Spring Boot là một module của Spring Framework, được xây dựng nhằm phát triển các ứng dụng java nhanh hơn, đơn giản hơn Spring Boot giúp đơn giản hoá

Khoa ĐT CLC – ĐH SPKT TP.HCM | 12 trong việc cấu hình ứng dụng, giúp người lập trình tập trung vào việc phát triển business của ứng dụng.[2]

2.2.1 Một số khái niệm trong Spring Boot

Dependency Injection trong Spring là một mẫu thiết kế giúp loại bỏ các phụ thuộc, từ đó làm cho việc quản lý và kiểm thử ứng dụng trở nên dễ dàng hơn Mẫu thiết kế này giúp các đoạn mã ít phụ thuộc vào nhau, nâng cao tính linh hoạt và khả năng bảo trì của ứng dụng.

Lập trình Hướng Khía Cạnh (Aspect Oriented Programming) là một kỹ thuật lập trình tương tự như lập trình hướng đối tượng, cho phép phân tách chương trình thành các module độc lập và rõ ràng.

Spring Boot là một module của Spring Framework, kế thừa toàn bộ tính năng của nó Nó giúp đơn giản hóa cấu hình ứng dụng, cho phép chạy độc lập và dễ dàng triển khai nhờ vào việc nhúng trực tiếp các ứng dụng server vào trong ứng dụng.

Dễ dàng thêm các thư viện bên ngoài

Do việc tự cấu hình nên Spring Boot tạo ra nhiều phụ thuộc dẫn đến kích thước tệp lớn

2.2.4 Môi trường phát triển Spring Boot

Intellij IDEA Ultimate Editor: Là một công cụ lập trình Java, được phát triển bởi JetBrains, hỗ trợ trên nhiều nền tảng như Windows, MacOS, Linux

Intellij có bộ debug đi kèm cực kỳ mạnh mẽ, hỗ trợ lập trình nhiều loại ứng dụng khác nhau như : Spring Framework, Angular, React

IntelliJ cung cấp bộ phím tắt giúp phát triển ứng dụng dễ dàng hơn, với khả năng gợi ý mã thông minh và kho tiện ích phong phú.

Tổng quan về MongoDB

MongoDB là một cơ sở dữ liệu mã nguồn mở được phát triển bằng C++, thuộc loại NoSQL với hiệu suất cao và khả năng mở rộng linh hoạt Dữ liệu trong MongoDB được lưu trữ dưới dạng tài liệu với cấu trúc key-value.

2.3.1 Một số khái niệm trong MongoDB

_id: là trường dữ liệu bắt buộc trong mỗi document, trường _id đại diện cho

Khoa ĐT CLC – ĐH SPKT TP.HCM | 13 một giá tr duy nhất trong document

Collection: là một nhóm nhiều document trong MongoDB

Document: là một bảng ghi dữ liệu

- MongoDB có hiệu năng cao, dễ dàng sử dụng, khả năng mở rộng tốt

- Ít schema hơn các RDBMS, mô hình dữ liệu linh hoạt

- Có tốc độ truy cập dữ liệu nhanh

- MongoDB sử dụng nhiều bộ nhớ, b giới hạn data size

2.3.4 Môi trường phát triển MongoDB

MongoDB Atlas là một dịch vụ cơ sở dữ liệu đám mây, hoạt động trên nền tảng hạ tầng của AWS, Azure và Google Cloud Người dùng có thể dễ dàng truy cập MongoDB Atlas thông qua trang web chính thức và đăng nhập nhanh chóng bằng tài khoản Google.

Tổng quan về HTML

HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website.[6] Ưu điểm:

- Học HTML khá đơn giản

- Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

- Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

- Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

- Sử dụng mã nguồn mở, hoàn toàn miễn phí

- HTML là chuẩn web được vận hành bởi W3C

- Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js,…)

Khoa ĐT CLC – ĐH SPKT TP.HCM | 14

Chỉ áp dụng chủ yếu cho web tĩnh, việc tạo các tính năng động yêu cầu lập trình viên sử dụng thêm JavaScript hoặc ngôn ngữ backend của bên thứ ba, chẳng hạn như PHP.

- Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer

Việc kiểm soát cách trình duyệt đọc và hiển thị file HTML là một thách thức, đặc biệt là với các trình duyệt cũ không hỗ trợ các thẻ HTML mới Do đó, ngay cả khi tài liệu HTML sử dụng các thẻ này, trình duyệt vẫn không thể hiển thị chúng đúng cách.

- Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

Tổng quan về CSS

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm và định dạng các phần tử do ngôn ngữ đánh dấu HTML tạo ra Nói một cách đơn giản, CSS là công cụ tạo phong cách cho trang web.

CSS hoạt động bằng cách tìm kiếm các vùng chọn, bao gồm tên thẻ HTML, ID, class và nhiều kiểu khác Sau khi xác định được vùng chọn, CSS sẽ áp dụng các thuộc tính cần thiết để thay đổi chúng.

HTML và CSS có mối quan hệ chặt chẽ, trong đó HTML là ngôn ngữ đánh dấu cơ bản cho trang web, còn CSS định hình phong cách và giao diện của nó Hai yếu tố này không thể tách rời trong việc xây dựng một website hoàn chỉnh.

Tổng quan về Javascript

JavaScript là ngôn ngữ lập trình phổ biến cho website, được tích hợp vào HTML để làm cho trang web trở nên sống động Nó thực hiện các script từ phía người dùng và máy chủ (Node.js), giúp tạo ra các trang web động.

Tổng quan về React JS

React JS is a JavaScript library developed by Facebook for creating Single Page Applications It facilitates the development of highly interactive UI components that are stateful and reusable.

Về cơ bản, các tính năng của ReactJS thường xuất phát từ việc tập trung các

Khoa ĐT CLC – ĐH SPKT TP.HCM cung cấp 15 phần mềm riêng lẻ, cho phép các developer dễ dàng tùy chỉnh giao diện người dùng Điều này có nghĩa là việc render dữ liệu không chỉ diễn ra ở server mà còn ở client thông qua việc sử dụng ReactJS.

Môi trường phát triển React JS

NodeJS và NPM : NodeJS là nền tảng cần thiết cho sự phát triển ReactJS Kiểm tra thiết lập môi trường NodeJS

Sau khi cài đặt Node JS, ta bắt đầu cài đặt React sử dụng npm để cài đặt React JS

- Sử dụng create-react-app command.

Kiến trúc về React JS

Component là một khối mã độc lập và có thể tái sử dụng, giúp chia giao diện người dùng (UI) thành nhiều phần nhỏ Có thể hình dung các component giống như các khối LEGO, trong đó một cấu trúc lớn được tạo thành từ nhiều khối nhỏ Tương tự, một trang web hoặc giao diện người dùng được xây dựng từ nhiều component khác nhau.

React Native có 2 loại component: Functional (Stateless) và Class (Stateful)

Functional components, also known as stateless components, are limited in their ability to manage React State and lifecycle methods However, with the introduction of React Hooks in version 16.8, developers can now utilize state and other features within functional components.

Class Components phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data) [10]

Props là viết tắt của Properties Một điều mà bạn cần phải nhớ khi sử dụng props

Khoa ĐT CLC – ĐH SPKT TP.HCM nhấn mạnh rằng giá trị của props trong React là không thay đổi, tức là dữ liệu này là immutable Các component nhận props từ component cha và chỉ có thể đọc giá trị của props mà không được phép thay đổi Dữ liệu trong React di chuyển theo một chiều từ component cha đến các component con Việc sử dụng props cho phép trừu tượng hóa các component, giúp chúng có thể được sử dụng ở nhiều vị trí khác nhau trong ứng dụng.

State khác với props trong React, vì state là dữ liệu nội bộ của một Component, trong khi props là dữ liệu được truyền vào State có thể được thay đổi và được coi là kiểu dữ liệu mutable Tuy nhiên, cần lưu ý không thay đổi trực tiếp biến this.state; thay vào đó, hãy sử dụng hàm setState để cập nhật giá trị.

Chúng ta cần sử dụng hàm này để kích hoạt việc render lại component và tất cả các component con bên trong nó, trong khi việc thay đổi this.state thì không làm điều đó Một vấn đề quan trọng khác là setState hoạt động bất đồng bộ, vì vậy nếu bạn cố gắng đọc giá trị state ngay sau khi gọi setState, giá trị đó sẽ chưa được cập nhật ngay lập tức.

Hooks là các hàm cho phép bạn kết nối với trạng thái và các tính năng vòng đời của React từ các hàm components, giúp bạn sử dụng React mà không cần đến class.

The Effect Hook, known as useEffect, enables functional components to perform side effects It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but consolidates these functionalities into a single API.

ReactJS cho phép đ nh nghĩa các component như class hoặc function Component đ nh nghĩa như class cung cấp nhiều tính năng, để khai báo 1 React class

The Khoa ĐT CLC at the University of Science and Technology in Ho Chi Minh City emphasizes the importance of extending components in React A React Functional Component is defined as a JavaScript/ES6 function that must return a React element and can accept props as parameters when necessary.

Lifecycle thường được chia làm 3 phần chính:

Cài đặt môi trường cho React JS

Bước 1: Cài đặt React và React DOM

Bước 2: Cài đặt Webpack / Babel

Bước 3: Cài đặt trình biên d ch, server

Bước 4: Cài đặt Bundle để tạo gói

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

Khảo sát hiện trạng

3.1.1 Adidas:https://www.adidas.com.vn/ Ưu điểm:

- Giao diện đẹp, dễ tiếp cận và sử dụng

- Có thể đăng nhập bằng tài khoản bên thứ 3

Hình 3 2 Trang đăng nhập Adidas

- Có thể gia nhập CLB Adiclub

Hình 3 3 Trang đăng ký gia nhập AdiClub

- Có thể nhập mã khuyến mãi khi được tặng mã

Hình 3 4 Trang nhập mã khuyến mãi

- Có tính năng chat trực tiếp trên web

Hình 3 5 Trang chat trực tiếp

- Chưa có xác thực đăng nhập bên thứ ba

3.1.2 Sport1: https://sport1.vn/ Ưu điểm:

- Giao diện dễ tiếp cận và sử dụng

- Có thể nhập mã khuyến mãi khi được tặng mã

Hình 3 7 Trang nhập mã khuyến mãi

- Có tính năng chat, gọi điện hỗ trợ qua bên thứ 3

Hình 3 8 Trang chat, gọi điện qua bên thứ 3 Nhược điểm:

Xác đ nh yêu cầu

- Chưa có tính năng đăng nhập bằng bên thứ 3

- Chưa có tính năng chat trực tiếp trên web

Lược đồ usecase tổng quát

Hình 3 9 Lược đồ usecase tổng quát

Lược đồ usecase actor User

Hình 3 10 Lược đồ usecase actor User Lược đồ usecase actor Admin

Hình 3 11 Lược đồ usecase actor Admin

3.2.2 Bảng Requirement dành cho Usecase

Bảng 3 1 Bảng yêu cầu dành cho Usecase

No Name Usecase Usecase id Actor

3 Đăng ký tài khoản UC_03

4 Tìm kiếm sản phẩm UC_04

5 Xem danh mục sản phẩm UC_05

6 Xem chi tiết sản phẩm UC_06

7 Thêm vào giỏ hàng UC_07

10 Theo dõi đơn hàng UC_10

12 Chỉnh sửa thông tin UC_12

13 Thay đổi mật khẩu UC_13

14 Quản lý sản phẩm: Thêm sản phẩm

15 Quản lý sản phẩm: Xóa sản phẩm

16 Quản lý sản phẩm: Sữa sản phẩm

17 Quản lý khách hàng: Xem thông tin

18 Quản lý khách hàng: Chỉnh sửa thông tin

19 Quản lý khách hàng: Thay đổi trạng thái

20 Quản lý đơn hàng: Xem đơn hàng

21 Quản lý đơn hàng: Xử lý đơn hàng

22 Xem thống kê: Xem Doanh thu

Bảng 3 2 Đặc tả usecase đăng nhập

Use Case No UC_01 Use case version 1.0

Use case name Đăng nhập

● Admin, User đã có tài khoản trên hệ thống

● Use case này cho phép Admin, User đăng nhập vào hệ thống

● Admin, User dùng có thể đăng nhập và sử dụng các chức năng với quyền tương ứng

● Admin, User dùng nhấn nút “Đăng nhập”

● Admin, User dùng đã có tài khoản trong hệ thống

● Thành công: Admin, User dùng đăng nhập được vào hệ thống và sử dụng chức năng với quyền tương ứng

● Thất bại: Hệ thống hiển th lỗi

Step Actor Action System Response

1 Admin, User dùng mở trang web lên

Hệ thống hiển th màn hình trang chủ và nút “Đăng nhập” ở thanh header

2 Admin, User dùng nhấn vào nút

Hệ thống chuyển sang màn hình

“Đăng nhập” và yêu cầu người dùng nhập vào các thông tin cá nhân và chuyển qua nhập: Số điện thoại và mật khẩu (varchar)

3 Adin, User nhấn nút “Đăng nhập”

Hệ thống chuyển sang màn hình trang chủ

No Actor Action System Response

1 Lỗi API Không chuyển về trang chủ

2 Sai tài khoản, mật khẩu Hệ thống sẽ hiện thông báo (alert) và có warning dòng dữ liệu cho người dùng

● Số điện thoại: không được để trống

● Mật khẩu: không được để trống

Bảng 3 3 Đặc tả usecase đăng xuất

Use case name Đăng xuất

● Admin, User dùng đã có tài khoản trên hệ thống

● Use case này cho phép Admin, User dùng đăng xuất ra khỏi hệ thống

● Admin, User dùng đăng xuất khỏi hệ thống

● Admin, User dùng đăng nhập và click chọn Đăng Xuất tại thanh header

● Admin, User dùng đã đăng nhập được vào hệ thống

● Thành công: Admin, User dùng đăng xuất ra khỏi hệ thống

1 Admin, User dùng click Đăng

Hệ thống chuyển từ trang hiện tại sang trang đăng nhập

1 Lỗi API Không chuyển về trang đăng nhập

Bảng 3 4 Bảng đặc tả usecase đăng ký tài khoản

Use case name Đăng ký tài khoản

● User chưa có tài khoản trong hệ thống

● Use case này cho phép User dùng đăng ký tài khoản vào hệ thống

● User dùng đăng ký thành công tài khoản vào hệ thống

● User dùng click vào nút “Tạo Tài Khoản” và điền đầy đủ các trường thông tin trong trang Đăng ký và nhấn nút “Đăng Ký”

● User dùng chưa có tài khoản trong hệ thống

● Thành công: Đối với người dùng: màn hình chuyển về trang chủ

1 User dùng nhấn vào nút “ Tạo

Hệ thống chuyển từ trang hiện tại sang trang “Đăng ký”

2 User dùng nhập các thông tin tương ứng ở trang “Đăng ký” và nhấn nút “Đăng Ký”

Hệ thống sẽ thông báo thành công

1 Lỗi API Không chuyển về trang đăng ký, đăng ký thất bại

Bảng 3 5 Đặc tả Usecase quản lý bác sĩ

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

● Use case này cho phép người dùng tìm kiếm sản phẩm

● Hiển th kết quả tìm kiếm

● Người dùng click vào ổ tìm kiếm ở thanh header, và điểm thông tin cần tìm kiếm.

● Thành công: Hiển th các sản phẩm phù hợp

1 Người dùng truy cập vào trang chủ

Hệ thống hiển th trang chủ

2 Người dùng nhấn vào ô tìm kiếm ở thanh header, và nhập thông tin, sau đó nhấn enter

Hệ thống chuyển sang trang kết quả tìm kiếm

1 Lỗi API Không chuyển đến trang “Kết quả tìm kiếm”

Bảng 3 6 Đặc tả Usecase thêm thông tin bác sĩ

Use case name Xem danh mục sản phẩm

● Use case này cho phép người dùng xem danh mục sản phẩm

● Hiển th danh mục sản phẩm

● Người dùng nhấn vào “Danh mục sản phẩm"

● Thành công: Hiển th danh mục sản phẩm

1 Người dùng truy cập vào trang chủ

2 Người dùng chọn danh mục sản phẩm

Hệ thống hiển th danh mục sản phẩm

1 Lỗi API Không thêm được các thông tin khác cho bác sĩ

Bảng 3 7 Đặc tả usecase xem thông tin bác sĩ

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

● Use case này cho phép người dùng xem các thông tin chi tiết của sản phẩm

● Người dùng có thể xem được các thông tin của sản phẩm

● Người dùng nhấn vào sản phẩm muốn xem thông tin

● Thành công: Chuyển sang trang thông tin chỉ tiết

1 Người dùng truy cập vào website

2 Người dùng click vào sản phẩm cần xem thông tin

Hệ thống sẽ chuyển sang trang chứa thông tin của của sản phẩm đó

1 Lỗi API Chuyển trang thất bại

Bảng 3 8 Đặc tả usecase đăng ký l ch khám

Use case name Thêm vào giỏ hàng

● Use case này cho phép người thêm một sản phẩm vào giỏ hàng

● Người dùng thêm sản phẩm vào giỏ hàng thành công

● Người dùng chọn sản phẩm, nhấn vào nút “Thêm vào giỏ hàng”

● Người dùng chọn được sản phẩm cụ thể

● Thành công: Thêm được sản phẩm vào giỏ hàng thanh công

1 Người dùng truy cập vào website

2 Người dùng chọn sản phẩm Hệ thống hiển th sản phẩm được chọn

3 Người dùng chọn thêm vào giỏ hàng

Hệ thống cập nhật thông tin sản phẩm vào giỏ hàng

1 Lỗi API Thêm sản phẩm thất bại, hệ thống thông báo lỗi

● Người dùng đã có tài khoản sẽ tự động đổ dữ liệu vào các trường thông tin khi đăng ký l ch

● Khi người dùng đăng ký thì khung giờ đã chọn sẽ được khóa lại và không hiển th lên giao diện nữa

● Nếu người dùng hủy đơn trong quá trình đăng ký thì khung giờ đó sẽ được mở và hiển th lại trên giao diện

Bảng 3 9 Đặc tả usecase tạo đơn hàng

Use case name Tạo đơn hàng

● Use case này cho phép người dùng đặt hàng

● Người dùng có thể đặt các sản phẩm từ giỏ hàng

● Người dùng click vào lựa chọn “Đặt hàng”, nhập một số thông tin cần thiết

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

● Thành công: Người dùng có thể tạo đơn hàng

1 Người dùng truy cập vào trang giỏ hàng

Hệ thống hiển th trang giỏ hàng

2 Người dùng nhấn vào nút đặt hàng

Hệ thống yêu cầu nhập một số thông cần thiết

3 Người dùng nhập các thông tin Hệ thống cập nhật thông tin của đơn

Khoa ĐT CLC – ĐH SPKT TP.HCM | 40 cần thiết hàng, sau đó gửi mail xác nhận

1 Lỗi API Tạo đơn hàng lỗi

● Sau khi đặt hàng thành công, các sản phẩm sẽ b xóa khỏi giỏ hàng

Bảng 3 10 Đặc tả usecase thanh toán

Use case name Thanh toán

● Use case này cho phép người dùng thanh toán đơn hàng đã tạo

● Người dùng có thể thanh toán đơn hàng

● Người dùng click vào lựa chọn “Thanh toán” sau khi tạo đơn hàng

● Người dùng chọn cổng thanh toán mong muốn

● Người dùng đã tạo đơn hàng

● Thành công: Người dùng có thể thanh toán đơn hàng

1 Người dùng đã tạo đơn hàng, và nhân vào thanh toán

Hệ thống hiển th trang thanh toán

2 Người dùng chọn cổng thanh toán

Hệ thống chuyển sang trang thanh toán của cổng thanh toán

3 Người dùng nhập thông tin theo yêu cầu của công thanh toán

Công thanh toán xác nhận thanh toán, và phản hồi về hệ thống, người dùng được điều hướng về trang chủ

1 Lỗi API Thanh toán thất bại

● Nếu người dùng hủy thanh toán thì đơn hàng sẽ chuyển về trạng thái chờ thanh toán

Bảng 3 11 Đặc tả usecase theo dõi đơn hàng

Use case name Theo dõi đơn hàng

● Use case này cho phép User theo giỏ đơn hàng

● User có thể chuyển sang trang theo giỏ đơn hàng, và tiến độ xử lý đơn hàng

● User chọn chức năng “Theo Giỏ Đơn Hàng" ở thanh header

● User đã đăng nhập và hệ thống

● Thành công: Chuyển sang trang theo giỏ đơn hàng

1 User đăng nhập vào trang web Hệ thống hiển th trang chủ

2 User nhấn vào mục “Theo Giỏ Đơn Hàng”

Hệ thống chuyển sang trang “Theo Giỏ Đơn Hàng”

Bảng 3 12 Đặc tả usecase xem thông tin cá nhân

Use case name Xem thông tin cá nhân

● Use case này cho phép người dùng xem thông tin cá nhân

● User nhấn vào mục “Xem thông tin” ở thanh header

● Người dùng đã đăng nhập hệ thống dưới quyền User

● Thành công: Hệ thống chuyển sang trang thông tin cá nhân

● Thất bại: Hệ thống báo lỗi

1 User đăng nhập vào trang web Hệ thống hiển th trang chủ

2 User nhấn vào mục “Xem thông tin”

Hệ thống chuyển sang trang “Thông Tin Cá Nhân”

1 Lỗi API Hiển th thông tin thất bại

Bảng 3 13 Đặc tả usecase chỉnh sửa thông tin

Use case name Chỉnh sửa thông tin

● Use case này cho phép người dùng thay đổi thông tin cá nhân

● Người dùng có thể chuyển sang trang thông tin cá nhân và chỉnh sửa các thông tin có trong trang

● Người dùng nhấp vào một trong các chuyên khoa muốn xem

● Thành công: Người dùng có thể chỉnh sửa thông tin cá nhân

● Thất bại: Hệ thống thông báo lỗi

1 Người dùng truy cập vào trang thông tin cá nhân

Hệ thống hiển th trang “Thông tin cá nhân"

2 Người dùng chọn “Cập Nhập" Hệ thống hiển th các thông tin được phép chỉnh sửa

3 Người dùng thay đổi thông tin, và nhân cập nhập

Hệ thống cập nhân thông tin

1 Lỗi API Không thể cập nhân thông tin

● Nếu người dùng huỷ, thông tin sẽ được giữ nguyên

Bảng 3 14 Đặc tả usecase xem các bác sĩ có trong chuyên khoa

Use case name Thay đổi mật khẩu

● Use case này cho phép người dùng thay đổi mật khẩu đăng nhập

● Người dùng thay đổi được mật khẩu

● Người dùng nhấp vào một trong các bác sĩ

● Thành công: Hiển th thông báo thành công

1 Người dùng truy cập vào trang cá nhân

Hệ thống hiển th trang chủ cá nhân

2 Người dùng nhấn chọn “Thay Đổi Mật Khẩu”

Hệ thống chuyển sang trang thay đổi mật khẩu, và yêu cầu người dùng nhập các thông tin cần thiết

3 Người dùng chọn “Thay đổi

Hệ thống kiểm tra dữ liệu, cập nhân mật khẩu mới, và điểu hướng về trang cá nhân

Bảng 3 15 Đặc tả usecase thêm sản phẩm mới

Use case name Quản lý sản phẩm: Thêm sản phẩm

● Use case này cho phép Admin có thể thêm sản phẩm mới vào hệ thống

● Admin có thể thêm được các sản phẩm mới vào hệ thống

● Admin nhấn vào nút “Quản Lý Sản Phẩm”, và chọn “Thêm Sản Phẩm"

● Người dùng đã đăng nhập với quyền admin

● Thành công: Thêm được sản phẩm mới

1 Người dùng truy cập quản lý Hệ thống hiển th trang quản lý

2 Người dùng nhấn vào “Quản Lý

Hệ thống chuyển sang trang quản lý sản phẩm

3 Người dùng nhấn vào nút có chữ “Thêm Sản Phẩm”

Hệ thống hiển th trang thêm sản phẩm, và yêu cầu người dùng nhập các thông tin cần thiết

4 Người dùng nhấn nút “Thêm" Hệ thống lưu sản phẩm mới

1 Lỗi API Tạo sản phẩm mới thất bại

Bảng 3 16 Đặc tả usecase quản lý sản phẩm xóa sản phẩm

Use case name Quản lý sản phẩm: Xóa sản phẩm

● Use case này cho phép Admin thay đổi trạng thái của sản phẩm

● Admin có thể thay đổi trạng thái của sản phẩm

● Admin truy cập vào trang quản lý sản phẩm

● Admin đăng nhập vào hệ thống

● Thành công: Hiển th thông báo thay đổi thanh công

● Thất bại: Hiển th thất bại

1 Admin chọn sản phẩm cần xoá Hệ thống hiển th yêu cầu xác nhận

2 Admin xác nhận thay đổi Hệ thống cập nhập, và hiển th thành công

1 Lỗi API Thay đổi thất bại

● Không thể xóa hoàn toàn sản phẩm khỏi CSDL, chỉ thay đổi trạng thái của sản phẩm

Bảng 3 17 Đặc tả usecase quản lý sản phẩm - sữa sản phẩm

Use case name Quản lý sản phẩm: Sữa sản phẩm

● Use case này cho phép Admin chỉnh sửa sản phẩm

● Admin có thể chỉnh sửa sản phẩm

● Admin truy cập vào trang quản lý sản phẩm

● Admin đăng nhập vào hệ thống với tài khoản có quyền admin

● Thành công: Thay đổi thông tin sản phẩm thành công

1 Admin đăng nhập vào trang quản lý sản phẩm

Hệ thống hiển th trang quản lý sản phẩm

2 Admin chọn sản phẩm và chọn chức năng chỉnh sửa

Hệ thống hiển th trang chỉ sủa, admin chỉnh sửa các thông tin mong muốn

3 Admin nhấn nút “Xác nhận” Hệ thống hiển th thành công và cập nhân thông tin sản phẩm

1 Lỗi API Cập nhập thất bại thất bại

● Nếu người dùng huỷ việc cập nhân thông tin, thông tin sản phẩm sẽ được giữ nguyên

Bảng 3 18 Bảng đặc tả usecase quản lý khách hàng - xem thông tin

Use case name Quản lý khách hàng: Xem thông tin

● Use case này cho phép Admin thông tin của các User trong hệ thống

● Admin có thể xem đầy đủ các thông tin của User

● Admin truy cập vào trang quản lý

● Admin đăng nhập vào hệ thống với quyền admin

● Thành công: Hệ thống hiển th trang quản lý

1 Admin đăng nhập vào trang web quản lý người dùng

Hệ thống hiển th trang quản lý thông tin người dùng

2 Admin chọn một User và chọn xem thông tin

Hệ thống hiển th thông tin của User

1 Lỗi API Hiển th thông tin thất bại

Bảng 3 19 Đặc tả usecase quản lý khách hàng - chỉnh sửa thông tin

Use case name Quản lý khách hàng: Chỉnh sửa thông tin

● Use case này cho phép Admin chỉnh sửa thông tin cho tài khoản của User

● Admin có thể cập nhật thông tin cho tài khoản User

● Admin truy cập vào “Trang Quản Lý Khách Hàng"

● Admin đã đăng nhập vào hệ thống

● Thành công: Hệ thống cập nhập thông tin thành công

1 Admin đăng nhập vào trang web quản lý người dùng

Hệ thống hiển th trang quản lý thông tin người dùng

2 Admin chọn một User và chọn xem thông tin

Hệ thống hiển th thông tin của User

3 Admin chọn chỉnh sửa Hệ thống yêu cầu thay đổi các thông tin cần chỉnh sửa

4 Admin nhân “Lưu" Hệ thống hiển th yêu cầu xác nhận thay đổi

5 Admin xác nhận thay đổi Hệ thống lưu thông tin đã được chỉnh sửa, và điều hướng về trang

1 Lỗi API Chỉnh sửa thất bại

● Không chỉnh sửa được số điện thoại và mật khẩu

Bảng 3 20 Bảng đặc tả usecase quản lý khách hàng - thay đổi trạng thái

Use case name Quản lý khách hàng: Thay đổi trạng thái

● Use case này cho phép Admin thay đổi trạng thái tài khoản của người dùng

● Admin có thể thay đổi trạng thái của tài khoản được chọn

● Admin truy cập trang quản lý người dùng

● Thành công: Thay đổi trạng thái tài khoản đã chọn thành công

1 Admin chọn một tài khoản Hệ thống hover vào tài khoản

2 Admin nhấn nút “Trạng Thái” chọn thay đổi

Hệ thống hiển th trạng thái sẽ thay đổi

3 Admin chọn “Thay đổi” Hệ thống sẽ yêu cầu xác nhận

4 Admin xác nhận thay đổi Hệ thống thực hiện thay đổi trạng

Khoa ĐT CLC – ĐH SPKT TP.HCM | 56 thái của tài khoản

1 Lỗi API Thay đổi thất bại

Bảng 3 21 Đặc tả usecase quản lý đơn hàng - xem đơn hàng

Use case name Quản lý đơn hàng: Xem đơn hàng

● Usecase này cho phép Admin vào trang quản lý đơn hàng và xem đơn hàng

● Admin có thể xem chi tiết đơn hàng

● Admin truy cập trang quản lý đơn hàng

● Thành công: Hiển th chi tiết đơn hàng

1 Admin đăng nhập vào trang

Hệ thống hiển th trang quản lý đơn hàng

2 Admin chọn một đơn hàng và chọn “Xem Chi Tiết"

Hệ thống hiển th chi tiết đơn hàng

1 Lỗi API Không thi hiện thi thông tin của đơn hàng

Bảng 3 22 Đặc tả usecase cập nhật thông tin l ch khám chữa bệnh cho bác sĩ

Use case name Quản lý đơn hàng: Xử lý đơn hàng

● Use case này cho phép Admin xử lý đơn hàng

● Admin có thể tiến hành xử lý các quy trình xử lý đơn hàng

● Admin chọn một đơn hàng

● Admin đã đăng nhập vào hệ thống và truy cập vào trang “Quản Lý Đơn Hàng"

● Thành công: Lưu lại thay đổi của đơn hàng

1 Admin chọn một đơn hàng, và chọn “Xử Lý"

Hệ thống hiển th các tiến trình của xử lý, và yêu cầu Admin chọn tiến trình

2 Admin chọn “Lưu" Hệ thống hiển th yêu cầu xác nhận

3 Admin chọn “Xác Nhận" Hệ thống lưu các thay đổi

1 Lỗi API Không thể thay đổi đơn hàng

● Nếu huỷ tiến trình, thông tin sẽ được giữ nguyên

THIẾT KẾ ỨNG DỤNG

Sơ đồ Class Diagram

4.1.1 Sơ đồ thiết kế class diagram

4.1.2 Mô tả thiết kế class diagram

Bảng 4 1 Mô tả Class User

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

1 id int Id của tài khoản người dùng được sinh tự động khi tạo mới

2 phone String Số điện thoại của tài khoản dùng để đăng nhập vào hệ thống

3 email String Email của chủ tài khoản

4 passwork String Mật khẩu dùng để đăng nhập vào hệ thống

5 name String Tên của chủ tài khoản

6 birthday Date Ngày sinh của chủ tài khoản

7 gender String Giới tính của chủ tài khoản

8 address EmbeddedAddress Đ a chỉ của chủ tài khoản

9 avatar String Đường dẫn đến file hình ảnh đại diện

10 roles List Danh sách các quyền của tài khoản

11 createdOn Date Ngày khởi tạo tài khoản

12 updateOn Date Ngày cập nhập tài khoản gần nhất

13 enable boolean Trường thể hiện trạng thái của tài khoản

Bảng 4 2 Mô tả Class Product

1 id String Id mặc đ nh được sinh tự động khi tạo Document

2 title String Tên của sản phẩm

Chứa mô tả của sản phẩm

4 images List Danh sách đường dẫn hình ảnh của sản phẩm

Chứa các tuỳ chọn của sản phẩm

6 types List Danh sách các kiểu của sản phẩm

7 trademark String Tên nhãn hiệu của sản phẩm

8 origin String Nguồn gốc của sản phẩm

9 price EmbeddedPrice Giá của sản phẩm

10 discount float Phần trăm giảm giá của sản phẩm

11 quantity long Số lượng sản phẩm

Các danh mục sản phẩm

Các đánh giá về sản phẩm

14 createdOn Date Ngày tạo sản phẩm

15 updateOn Date Ngày cập nhập sản phẩm gần nhất

16 enable boolean Trạng thái của sản phẩm

Bảng 4 3 Mô tả Class Transaction

2 amount String Số tiền thanh toán

3 bankCode String Mã ngân hàng, do VNPay trả về

4 transactionNo String Mã giao d ch do VNPay trả về

5 cardtype String Loại thẻ ATM

6 payDate String Ngày thực hiện

7 responseCode String Mã phản hồi do VNPay trả về

8 tmnCode String Tham số cấu hình VNPay

9 transactionNo String Mã giao d ch do VNPay trả về

10 txnRef String Tham số cấu hình VNPay

11 secureHashType String Tham số cấu hình VNPay

12 secureHash String Tham số cấu hình VNPay

13 order Order Chứa Thông tin đơn hàng

14 createdOn Date Ngày khởi tạo thanh toán

15 updateOn Date Ngày cập nhập thanh toán gần nhất

16 enable boolean Trường thể hiện trạng thái của thanh toán

Bảng 4 4 Mô tả Class Order

2 user User Thông tin user, chủ của đơn hàng

Danh sách sản phẩm có trong đơn hàng

4 total EmbeddedPrice Tổng tiền của đơn hàng

5 address EmbeddedAddress Đ a chỉ nhận hàng

6 phone String Số điện thoại liên hệ khi nhận hàng

8 processing String Tiến trình xử lý đơn hàng

9 payment EmbeddedPayment Thông tin thanh toán

10 createdOn Date Ngày tạo đơn hàng

11 updateOn Date Ngày cập nhập đơn hàng gần nhất

12 enable boolean Trạng thái của đơn hàng

Bảng 4 5 Mô tả Class Category

2 title String Tên của danh mục

3 productsOfCategory List Danh sách sản phẩm thuộc danh mục

4 createdOn Date Ngày tạo danh mục

5 updateOn Date Ngày cập nhập danh mục gần nhất

6 enable boolean Trạng thái của danh mục

Bảng 4 6 Mô tả Class EmbeddedSize

1 size String Kích thước sản phẩm

2 quantity Int Số lượng ứng với kích thước

Bảng 4 7 Mô tả Class EmbeddedAddress

3 ward String Tên phường, xã

4 district String Tên quận, huyện

5 city String Tên thành phố

6 country String Tên quốc gia

Bảng 4 8 Mô tả Class EmbeddedCategory

1 id String Id của danh mục

2 title String Tên của danh mục

Bảng 4 9 Mô tả Class EmbeddedDescription

Bảng 4 10 Mô tả Class EmbeddedOption

Danh sách các size sản phẩm

2 color List Danh sách màu sắc của sản phẩm

3 Feature List Danh sách đặc tính cả sản phẩm

Bảng 4 11 Mô tả Class EmbeddedPayment

1 transactionID String Mã giao d ch

2 paymentID String Mã thanh toán

4 updateOn Date Ngày cập nhập gần nhất

Bảng 4 12 Mô tả Class EmbeddedPrice

1 currency String Loại tiền tệ

Bảng 4 13 Mô tả Class EmbeddedProductsInOrder

1 product Product Thông tin sản phẩm

2 quantity long Số lượng sản phẩm đã đặt hàng

3 option EmbeddedOption Các tùy chọn sản phẩm

4 price EmbeddedPrice Giá sản phẩm khi đặt hàng

5 discount float Phần trăm giảm giá

6 total float Tống tiền phải thanh toán

Bảng 4.14 Mô tả Class EmbeddedReviews

1 likes List Danh sách những người thích

2 comments List Danh sách những người đánh giá

3 likeTotal long Tổng lượt thích

4 commentTotal long Tổng lượt đánh giá

Bảng 4 14 Mô tả Class Like

1 user User Người sở hữu

2 like boolean Thích hoặc không thích

Bảng 4 15 Mô tả Class Comment

1 user User Thông tin người sở hữu

3 commentTotal long Số lượng đánh giá

Bảng 4 16 Mô tả Class EmbeddedComment

1 comment String Nội dung đánh giá

2 time Date Thời gian đánh giá

Sơ đồ tuần tự

Hình 4 2 Sequence diagram đăng nhập

Hình 4 3 Sequence diagram người dùng đăng ký tài khoản

Hình 4 4 Sequence diagram quên mật khẩu

Hình 4 5 Sequence diagram thêm sản phẩm vào giỏ hàng

Hình 4 6 Sequence diagram cập nhập giỏ hàng

Hình 4 7 Sequence Diagram chức năng đặt hàng

Hình 4 8 Sequence Diagram chức năng cập nhập thông tin cá nhân

Hình 4 9 Sequence Diagram xác nhận đơn hàng

Hình 4 10 Sequence Diagram hủy đơn hàng

Hình 4 11 Sequence Diagram thêm nhân viên

Hình 4 12 Sequence Diagram thêm sản phẩm

Hình 4 13 Sequence Diagram sửa sản phẩm

Thiết kế giao diện

4.4.1 SCP001 Giao diện trang đăng nhập

Hình 4 14 Giao diện trang đăng nhập

Bảng 4 17 Bảng mô tả màn hình đăng nhập

No Name Required Type Reference Note

1 Đăng nhập True Link Click vào sẽ chuyển sang trang Đăng nhập

True Text Số điện thoại đã đăng ký

True Text Mật khẩu đã đăng ký tương ứng

4 Đăng nhập True Button Click vào sẽ chuyển sang trang chủ nếu là người dùng và trang quản lí nếu là admin

True Link Click vào sẽ chuyển sang trang Quên mật khẩu

True Link Click vào sẽ chuyển sang trang Đăng ký

4.4.2 SCP002 Giao diện trang đăng ký

Hình 4 15 Giao diện trang đăng ký

Bảng 4 18 Bảng mô tả màn hình đăng ký

1 Đăng ký True Link Click vào để đến trang Đăng ký

True Email Phải là đ nh dạng email

3 Nhập tên của bạn True Text Tên của tài khoản

4 Nhập số điện thoại của bạn

True Number Phải là đ nh dạng số điện thoại và đây là số điện thoại để đăng nhập

5 Nhập mật khẩu True Text Mật khẩu

True Text Nhập lại mật khẩu

7 Đăng ký True Button Click vào để lưu thông tin đăng ký và xác nhận đăng ký thành công nếu tài khoản hợp lệ

8 Đăng nhập ở đây True Link Click vào sẽ chuyển sang trang Đăng nhập

4.4.3 SCP003 Giao diện trang chủ

Hình 4 16 Giao diện trang chủ

Bảng 4 19 Bảng mô tả màn hình trang chủ Web

1 Trang chủ True Link Click vào để đến trang chủ

2 Danh mục True Link Click vào để đến trang danh mục

3 Đơn hàng True Link Click vào để đến trang đơn hàng

4 Giỏ hàng True Button Click vào để đến trang giỏ hàng

5 Tìm kiếm True Text Nhập tên sản phẩm để tìm kiếm

True Chỉnh số lượng sản phẩm hiển th muốn xem và qua trang

4.4.4 SCP004 Giao diện trang hiển thị sản phẩm

Hình 4 17 Giao diện trang hiển th sản phẩm

Bảng 4 20 Bảng mô tả màn hình trang hiển th sản phẩm

1 Màu sắc True Button Click vào để chọn màu

2 Size True Button Click vào để chọn size

3 Số lượng True Button Nhập hoặc chỉnh nút tăng giảm để chọn số lượng mong muốn

4 Buy True Button Click vào để sản phẩm được thêm vào giỏ hàng

4.4.5 SCP005 Giao diện trang danh mục

Hình 4 18 Giao diện trang danh mục Bảng 4 21 Bảng mô tả màn hình danh mục

1 Danh mục True Link Click vào để đến trang danh mục

True Button Click vào để đến nội dung mà đang tìm

4.4.6 SCP006 Giao diện trang giỏ hàng

Hình 4 19 Giao diện trang giỏ hàng Bảng 4 22 Bảng mô tả màn hình giỏ hàng

1 Giỏ hàng True Button Click vào để đến trang giỏ hàng

2 Edit True Button Chỉnh sửa hoặc xóa sản phẩm

3 Đặt hàng True Button Click vào để đặt hàng

4.4.7 SCP007 Giao diện trang thanh toán

Hình 4 20 Giao diện trang thanh toán

4.4.8 SCP008 Giao diện trang đơn hàng

Hình 4 21 Giao diện trang đơn hàng

Bảng 4 23 Bảng mô tả màn hình trang đơn hàng

1 Đơn hàng True Link Click vào để đến trang đơn hàng

2 Chờ xác nhận True Button Click vào để xem những đơn hàng chờ xác nhận

3 Chờ lấy hàng True Lable Click vào để xem những đơn hàng chờ lấy hàng

True Button Click vào để xem những đơn hàng đang giao hàng

5 Đã giao True Label Click vào để xem những đơn hàng đã giao

4.4.9 SCP009 Giao diện trang Admin

Hình 4 22 Giao diện trang chủ Admin

Bảng 4 24 Bảng mô tả màn hình trang chủ Admin

1 Đăng nhập True Link Đăng nhập với tài khoản

2 Admin True Link Click vào Admin để dẫn tới trang admin

Hình 4 23 Giao diện trang Admin Bảng 4 25 Bảng mô tả màn hình trang Admin

True Link Click vào để chuyển tới trang quản lý

Khoa ĐT CLC – ĐH SPKT TP.HCM | 94 khách hàng

True Link Click vào để chuyển tới trang quản lý sản phẩm

True Link Click vào để chuyển tới trang quản lý đơn hàng

True Link Click vào để chuyển tới trang quản lý danh mục

5 Quản lý Admin True Link Click vào để chuyển tới trang quản lý Admin

4.4.10 SCP010 Giao diện trang quản lý khách hàng

Hình 4 24 Giao diện trang quản lý khách hàng Bảng 4 26 Bảng mô tả màn hình trang quản lý khách hàng

1 Tìm kiếm True Link Tìm kiếm người dùng bằng tên

2 Thêm khách hàng True Link Thêm người dùng mới

3 Next/Previous True Button Chỉnh số lượng người dùng hiển th và qua trang

4 Lock/Unlock True Button Mở hoặc khóa người dùng

Hình 4 25 Giao diện trang thêm khách hàng

4.4.11 SCP011 Giao diện trang quản lý sản phẩm

Hình 4 26 Giao diện trang quản lý sản phẩm Bảng 4 27 Bảng mô tả màn hình trang quản lý sản phẩm

1 Tìm kiếm True Link Tìm kiếm sản phẩm bằng tên sản phẩm

2 Thêm sản phẩm True Link Thêm sản phẩm mới

3 Next/Previous True Button Chỉnh số lượng sản

Khoa ĐT CLC – ĐH SPKT TP.HCM | 98 phẩm hiển th và qua trang

4 Edit True Button Chỉnh sửa sản phẩm

5 Lock/Unlock True Button Mở hoặc khóa sản phẩm

Hình 4 27 Giao diện thêm sản phẩm

Hình 4 28 Giao diện sửa sản phẩm

4.4.12 SCP012 Giao diện trang quản lý đơn hàng

Hình 4 29 Giao diện trang quản lý đơn hàng

4.4.13 SCP013 Giao diện trang quản lý danh mục

Hình 4 30 Giao diện trang quản lý danh mục Bảng 4 28 Bảng mô tả màn hình quản lý danh mục

1 Tìm kiếm True Link Tìm kiếm danh mục bằng tên

2 Thêm danh mục True Link Thêm danh mục mới

3 Xóa danh mục True Button Xóa danh mục

Hình 4 31 Giao diện trang thêm danh mục

4.4.14 SCP014 Giao diện trang quản lý Admin

Hình 4 32 Giao diện trang quản lý Admin

Hình 4 33 Giao diện trang thêm Admin

4.4.15 SCP015 Giao diện trang quản lý thông tin cá nhân

Hình 4 34 Giao diện trang quản lý thông tin cá nhân

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Cài đặt ứng dụng

Bước 1: Truy cập trang chủ của MongoDB Atlas theo đường dẫn bên dưới Link: https://www.mongodb.com/atlas/database

Sau khi chon Sign in:

Hình 5 1 MongoDB đăng nhập Bước 3: Chọn đăng nhập với tài khoản google hoặc github

Sau khi đăng nhập thành công:

Hình 5 2 MongoDB trang chủ Bước 4: Tao kết nối đến MongoDB Atlas

Từ giao diện ở bước 3, chúng ta nhấn vào Connect

Hình 5 3 MongoDB tạo kết nối Bước 5: Chọn Connect your application

Hình 5 4 MongoDB tạo kết nối (tt)

Bước 6: Chọn loại ngôn ngữ mà bạn đang sử dụng và version

Bước 7: Sau khi chọn, MongoDB sẽ sinh ra cho chúng ta một chuổi kết nối

Yêu cầu: Máy tính phải có Java 8 và Maven

Bước 1: Download source code từ https://github.com/NVD-

Bước 2: Cài đặt các package bằng Maven

Hình 5 5 Back-End cài đặt package Bước 3: Mở file application.yml để chỉnh sửa đường dẫn đến MongoDB

Hình 5 6 Back-End chỉnh sửa kết nôi MongoDB

Bước 4: Chạy ứng dụng bằng Maven

Hình 5 7 Back-End Chạy ứng dụng Ứng dụng sẽ được chạy ở localhost:8080

Hình 5 8 Back-End trang chủ

5.1.3 Cài đặt Front-End Để chạy được trang web cần cài đặt những thành phần sau:

- Cần cài đặt Visual Studio Code để chạy Front-end

Link github: https://github.com/Zoro1011/KLTN_FE.git

Các bước để tiến hành cài đặt:

Download source code từ: https://github.com/Zoro1011/KLTN_FE.git

Mở ứng dụng bằng Visual Studio Code

Hình 5 9 Cài đặt thư viện Front-end

Mở Terminal mới và nhấn “npm install” để tiến hành tải về các thư viện phụ thuộc trong node_modules

Sau khi hoàn tất cài đặt các thư viện cần thiết, bạn hãy sử dụng lệnh “npm run dev” để khởi chạy Front-end Khi quá trình khởi chạy hoàn tất, bạn có thể truy cập vào trang chủ tại địa chỉ http://localhost:3000/.

Hình 5 11 Chạy thành công Front-end

Kiểm thử phần mềm

Bảng 5 1 Bảng kiểm thử phần mềm

ID Test Case Description Expected Output Result

TC_01 Chức năng đăng ký Người dùng đăng ký được tài khoản thành công, các trường hợp thất bại đều báo lỗi

TC_02 Chức năng đăng nhập Người dùng, Admin đăng nhập với quyền tương ứng, các trường hợp thất bại đều báo lỗi

TC_03 Chức năng đăng xuất Người dùng Admin đăng xuất thành công, các trường hợp thất bại đều báo lỗi

TC_04 Chức năng tìm kiếm Người dùng tìm kiếm sản phẩm thành công, các trường hợp thất bại đều báo lỗi

TC_05 Xem danh sách sản phẩm Danh sách sản phẩm hiển th thành công, các trường hợp thất bại đều báo lỗi

TC_06 Xem danh sách danh mục Danh mục hiển th thành công các trường hợp thất bại đều báo lỗi

TC_07 Xem chi tiết sản phẩm Người dùng chọn và xem chi tiết sản phẩm thành công các trường hợp thất bại đều báo lỗi

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

Người dùng thêm sản phẩm vào giỏ hàng thành công, các trường hợp thất bại đều báo lỗi

TC_09 Đặt hàng Người dùng đặt hàng thành công, các trường hợp thất bại đều báo lỗi

Người dùng có thể quản lý tài khoản cá nhân của mình, bao gồm việc xem và chỉnh sửa thông tin cá nhân Mọi thay đổi thành công sẽ được xác nhận, trong khi các trường hợp thất bại sẽ hiển thị thông báo lỗi.

TC_11 Thống kê Admin có thể xem thống kê doanh thu, các trường hợp thất bại đều báo lỗi

TC_12 Quản lý tài khoản, thông tin người dùng

Admin có thể sửa / xóa tài khoản, thông tin người dùng thành công, các trường hợp thất bại đều báo lỗi

TC_13 Quản lý sản phẩm Admin có thể thêm/ xóa

/ sửa sản phẩm thành công, các trường hợp thất bại đều báo lỗi

TC_14 Quản lý đơn hàng Admin xem danh sách đơn hàng, xử lý đơn hàng thành công, các trường hợp thất bại đều báo lỗi

TC_15 Quản lý danh mục Admin có thể tạo danh mục mới hoặc xóa danh mục

Tiêu đề	Xây Dựng Website Bán Quần Áo Thể Thao
Tác giả	Nguyễn Văn Đạt, Hoàng Minh Thành
Người hướng dẫn	ThS. Nguyễn Minh Đạo
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	2022
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	127
Dung lượng	8,34 MB