Đồ án xây dựng website bán balo sử dụng asp net core và reactjs

Tính cấp thiết của đề tài

Trong bối cảnh hiện nay, với sự phát triển của công nghệ và thông tin nhanh chóng và luôn đổi mới hằng ngày Và sự ảnh hưởng của dịch Covid trong những năm vừa qua Thì internet đang trở thành xu hướng mới trong việc mua bán hàng hóa và trao đổi thông tin Và trong bối cảnh đó, nhu cầu mua sắm của khách hàng trở nên cao hơn và tiêu chuẩn mua sắm cũng phải phù hợp với yêu cầu của người dùng Đó là những vấn đề nan giải của các doanh nghiệp kinh doanh.

Với ý tưởng của nhóm, thì việc xây dụng một trang web cung cấp thông tin và mua bán sản phẩm và ở đây là cung cấp và bán balo là cần thiết đối với một doanh nghiệp hay một cửa hàng buôn bán balo Với việc khách hàng có thể nhanh chóng lựa chọn sản phẩm phù hợp với nhu cầu, với giá tiền thì một trang web bán balo có thể nhanh chóng giải quyết điều đó Người dùng có thể thoải mái lựa chọn, mua sắm của mình mọi lúc và mọi nơi Cũng như về phía cung cấp có thể lựa chọn trang web là nơi quảng bá các sản phẩm Và hơn thế nữa việc quản lý các đơn hàng và chi phí doanh thu cũng trở nên dễ dàng hơn.

Việc có một ứng dụng web bán hàng sẽ tiết kiệm thời gian và nguồn lực rất nhiều đối với cả khách hàng và doanh nghiệp.

Mục tiêu của đề tài

Đề tài “Xây dụng website bán balo” sẽ bao gồm các mục tiêu sau:

 Xây dụng một website cho phép người dùng có thể tìm kiếm, xem thông tin và đặt mua các sản phẩm balo trong thời gian trực tuyến ở bắt kỳ thời điểm và thời gian nào Và sau đó người dùng có thể theo dõi và để lại bình luận đánh giá với các sản phẩm đã mua

 Website có giao diện thân thiện với người dùng và có tốc độ xử lý nhanh chóng cũng như bảo mật thông tin cho người dùng

 Xây dụng hệ thống quản lý ở phía doanh nghiệp hay cửa hàng.

Phân công

- Thiết kế cơ sở dữ liệu

- Xây dựng Back – End Phạm Văn Thắng - Vẽ Diagram

- Xây dựng Front – End Nguyễn Đức Mạnh - Vẽ Diagram

CƠ SỞ LÝ THUYẾT

ReactJS

ReacJS là một thư viện JavaScript được ra mắt vào năm 2013 ReacJS được phát triển bởi Facebook và nó được sử dụng để phát triển ứng dụng web và các ứng dụng trên nền tảng di động [1] Điểm mạnh của ReacJS là cho phép lập trình viên viết HTML trực tiếp lên JavaScript thông qua cú pháp JSX Vậy nên lập trình viên có thể lập trình và kiểm tra kết quả thông qua việc đưa đoạn HTML vào JavaScript ReacJS cho phép người lập trình viên tạo ra các Component và có thể lồng nhiều Component vào nhau thông qua lệnh return của phương thức render Điều này có thể giúp chúng ta tổ chức code trở nên dễ dàng hơn và chúng ta có thể tái sử dụng code giảm thiểu thời gian code không cần thiết [1]

ReacJS cho phép việc thực hiện viết các đoạn code Javacript trở nên đễ dàng hơn nhờ sử dụng một cú pháp đặc biệt đó là JSX Người dùng có thể thực hiện nhúng các đoạn HTML và JavaScript thông qua JSX [1]

ReacJS cho phép phá vỡ những cấu trúc, cấu tạo UI phức tạp thành những Component độc lập và có thể tái sử dụng chúng ở nhiều nơi [1]

ReacJS hỗ trợ công cụ giúp việc debug code trở nên đơn giản, dễ dàng hơn

ASP.NET Core

ASP.NET Core là một framework mã nguồn mở được phát triển bởi Microsoft cho phát triển ứng dụng web Nó là phiên bản tiếp theo của ASP.NET Framework và được thiết kế để chạy trên nền tảng NET Core ASP.NET Core cung cấp một nền tảng linh hoạt và hiệu quả cho việc xây dựng các ứng dụng web hiện đại và tương thích với nhiều hệ điều hành.

ASP.NET Core hỗ trợ phát triển và triển khai trên nhiều nền tảng, bao gồm Windows, macOS và Linux Điều này cho phép xây dựng ứng dụng web đa nền tảng mà không bị ràng buộc bởi hệ điều hành.

ASP.NET Core được tối ưu hóa để đạt hiệu suất tốt, đáp ứng tải lớn và có thời gian phản hồi nhanh Nó sử dụng mô hình xử lý không đồng bộ và sử dụng tài nguyên hiệu quả, giúp tăng cường khả năng mở rộng và đáp ứng nhanh chóng. ASP.NET Core cho phép lựa chọn các thành phần cần thiết cho ứng dụng thông qua mô hình module Bạn chỉ cần chọn những thành phần cần sử dụng, giúp giảm kích thước ứng dụng và tối ưu hóa việc sử dụng tài nguyên.

ASP.NET Core tích hợp sẵn cơ chế Dependency Injection, giúp quản lý phụ thuộc và tạo mã dễ dàng kiểm thử và tái sử dụng DI giúp giảm sự phụ thuộc giữa các thành phần của ứng dụng, làm cho mã dễ bảo trì, mở rộng và tái sử dụng.ASP.NET Core hỗ trợ phát triển cả các API và ứng dụng web Bạn có thể sử dụng nó để xây dựng các dịch vụ web RESTful và ứng dụng web đa chức năng với giao diện người dùng tương tác.

PostgreSQL

PostgreSQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở và mạnh mẽ Được phát triển từ năm 1986, PostgreSQL đã trở thành một trong những hệ quản trị cơ sở dữ liệu phổ biến và được sử dụng rộng rãi trên toàn thế giới.

PostgreSQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, điều này cho phép mọi người xem, sửa đổi và phát triển mã nguồn theo nhu cầu của họ Điều này mang lại sự linh hoạt và khả năng tùy chỉnh cao cho các dự án.

PostgreSQL tuân thủ nghiêm ngặt các tiêu chuẩn SQL, bao gồm SQL-92, SQL-

99 và SQL:2016 Điều này đảm bảo tính di động và tương thích của PostgreSQL với các ứng dụng và công nghệ khác trong môi trường phát triển.

PostgreSQL có khả năng xử lý tải cao và mở rộng dễ dàng Nó hỗ trợ các cơ chế như phân vùng, replica (đa bản sao) và cluster (nhóm), cho phép bạn tăng cường hiệu suất và mở rộng hệ thống cơ sở dữ liệu của mình khi cần thiết.

PostgreSQL cung cấp một loạt các tính năng phong phú, bao gồm truy vấn phức tạp, khóa ngoại (foreign key), truy vấn địa lý (spatial query), truy vấn văn bản đầy đủ (full-text search) và nhiều hơn nữa Nó cũng hỗ trợ các ngôn ngữ lập trình phổ biến như C, C++, Java, Python, PHP và Ruby.

Json Web Token

JSON Web Token (JWT) là một tiêu chuẩn mở ( RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào “chữ ký” của nó Phần chữ ký của JWT sẽ được mã hóa lại bằng HMAC hoặc RSA JSON Web Token bao gồm

3 phần, được ngăn cách nhau bởi dấu chấm: header, payload, signature [5]

Trong việc Authentication, sau khi người dùng đăng nhập thành công thì mã thông báo web JSON sẽ được gửi lại về phía người dùng và mã truy cập này là bảo mật Bất cứ khi nào người dùng muốn truy cập vào tài nguyên nào thì người dùng cũng phải cung cấp JWT cho phía máy chủ Máy chủ chịu trách nhiệm kiểm tra thông tin JWT có hợp lệ hay không và trả lại dữ liệu cho người dùng nếu hợp lệ [5]

Trong JWT thường chứa các dữ liệu cần thiết cho việc Authorization và vì thông tin JWT khá nhỏ (khoảng 8KB) nên khi cấu hình JWT chúng ta nên ngăn chặn không để chúng quá lớn giúp cho việc xử lý trở nên nhanh chóng [5]

Vì JSON it dài dòng hơn XML và kích thước sau khi mã hóa cũng vậy cho nên việc sử dụng JWT trở thành một lựa chọn tốt trong thời điểm hiện nay.

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

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

 Giao diện hiển thị sản phẩm theo từng danh mục.

 Tìm kiếm sản phảm theo tên.

 Đặt hàng, giỏ hàng, thanh toán sản phẩm

 Xem thông tin tài khoản.

 Xem lịch sử mua hàng.

 Thanh toán bằng nhiều phương thức

 Giao diện đơn giản, trực quan, người mới dễ dàng sử dụng.

 Không có chức năng chat trực tiếp với cửa hàng.

 Trong giỏ hàng không có chức năng xóa sản phẩm.

 Không có chức năng lọc sản phẩm theo yêu cầu (giá, phân loại, )

 Đặt hàng, giỏ hàng, thanh toán sản phẩm.

 Lọc sản phẩm theo yêu cầu: thương hiệu, chất liệu, …

 Không có chức năng thanh toán online.

 Không tạo tài khoản và lưu thông tin tài khoản.

 Không có chức năng chat trực tiếp với cửa hàng.

 Đặt hàng, giỏ hàng, thanh toán sản phẩm.

 Có thể thanh toán bằng nhiều cách.

 Lọc sản phẩm theo yêu cầu: thương hiệu, mức giá, …

 Có thể chat trực tiếp với của hàng.

Kết luận khảo sát

Qua quá trình khảo sát 3 website bán túi xách và balo được nhiều người biết đến hiện nay, nhóm chúng em đã thống nhất lại được yêu cầu chức năng của “Website bán balo” bao gồm:

- Website phải tập trung vào các chức năng chính như các thông tin chi tiết về sản phẩm, lọc sản phẩm, tìm kiếm sản phẩm, quy trình đặt hàng, thanh toán.

- Xây dựng các tính năng thường có như quản lý sản phẩm, thương hiệu, phân loại, người dùng, xem thống kê doanh thu cho quản trị viên.

- Xây dựng các tính năng thanh toán, đặt hàng, xem thông tin chi tiết sản phẩm, tự quản lý tài khoản của mình cho người dùng.

- Website nên có nhiều hình thức thanh toán như: thanh toán khi nhận hàng, thanh toán online qua ngân hàng, ví điện tử, …

Kiến trúc chung của hệ thống

Hình 4 Kiến trúc chung của hệ thống

Xác định yêu cầu

2.4.1 Các tác nhân của hệ thống

Sau quá trình nghiên cứu các hệ thống có sẵn và thu thập thông tin về nhu cầu của khách hàng Nhóm của em đã quyết định thực hiện phát triển website để phục vụ các tác nhân chính sau đây:

- Khách vãng lai (Guest): là những người dùng truy cập sử dụng website nhưng chưa thực hiện đăng nhập vào hệ thống hoặc chưa có tài khoản trong hệ thống

- Người dùng (User): là những người dùng đã có tài khoản và đã đăng nhập vào hệ thống

- Nhân viên (Staff): là những người có trách nhiệm trong việc quản lý các sản phẩm của hệ thống, các đơn đặt hàng, tương tác với khách hàng theo yêu cầu của người quản trị viên

- Quản trị viên (Admin): là người có quyền hành cao nhất trong hệ thống Quản trị viên sẽ chịu trách nhiệm quản lý hệ thống.

- Khách vãng lai (Guest): o Xem thông tin các sản phẩm. o Tìm kiếm và lọc sản phẩm. o Đăng ký tài khoản. o Đọc tin tức của cửa hàng.

- Người dùng (User): người dùng sẽ có các chức năng như khách vãng lai và có thêm các chức năng sau: o Đăng nhập, đăng xuất, đổi mật khẩu, quên mật khẩu. o Xem thông tin tài khoản: chỉnh sửa thông tin các nhân, xem danh sách các đơn hàng mình đã đặt (có thể hủy đơn hàng chưa giao và đánh giá sản phẩm đã mua), xem danh sách các địa chỉ của mình (thêm, sửa, xóa). o Thêm sản phẩm vào giỏ hàng và một số chức năng trong giỏ hàng (thêm, sửa, xóa), đặt hàng và thanh toán.

- Nhân viên (Staff): o Đăng nhập, đăng xuất, đổi mật khẩu, quên mật khẩu. o Xem và chỉnh sửa thông tin các nhân. o Quản lý sản phẩm( xem, thêm, sửa, xóa, chỉnh sửa). o Đăng tin tức mới. o Chấp nhận và hủy đơn hàng.

- Quản trị viên (Admin): có các chức năng tương tự như nhân viên và có thêm các chức năng sau o Quản lý tài khoản(xem, thêm, xóa) o Quản lý danh mục( xem, thêm, sửa, xóa, chỉnh sửa) o Quản lý loại sản phẩm(( xem, thêm, sửa, xóa, chỉnh sửa) o Xem thống kê doanh thu

2.4.3 Yêu cầu phi chức năng

- Giao diện đơn giản, thân thiện với người dùng

- Tốc độ và khả năng xử lý của trang web được tối ưu mang lại trải nghiệm tốt cho người dùng

- Bảo mật an toàn thông tin của hệ thống và của người dùng

- Trang web dễ dàng bảo trì và cải tiến

Mô hình hóa yêu cầu

2.5.1.1 Phía người dùng( khách hàng)

Hình 5 Sơ đồ use case phía khách hàng

2.5.1.2 Phía quản trị viên( admin)

Hình 6 Sơ đồ use case phía quản trị viên

Mô tả Người dùng đăng nhập vào hệ thống Đối tượng Người dùng

Tiền điều kiện Người dùng đã được tạo tài khoản trong hệ thống

Nếu đăng nhập thành công: Người dùng được chuyển đến trang chủ

Hậu điều kiện với giao diện đã đăng nhập.

Nếu đăng nhập thất bai: Người dùng được yêu cầu đăng nhập lại. Usecase được thực hiện khi người dùng truy cập vào trang đăng nhập

Luồng cơ bản Hệ thống yêu cầu điền số điện thoại và mật khẩu.

Người dùng thực hiện điền thông tin đăng nhập và bấm nút Đăng nhập.

(Thành công) Hệ thống sẽ xác thực vai trò của người dùng.

Hệ thống chuyển về giao diện ứng với từng vai trò của người dùng.

Luồng thay thế Không có.

Luồng ngoại lệ Nếu người dùng đăng nhập không chính xác Hệ thống sẽ thực hiện

Hiển thị thông báo nhập thông tin sai.

Hệ thống yêu cầu đăng nhập lại.

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

Mô tả Người dùng đăng ký vào hệ thống Đối tượng Người dùng

Tiền điều kiện Người dùng chưa có tài khoản trong hệ thống

Nếu đăng ký thành công: Người dùng được chuyển đến form đăng

Nếu đăng nhập thất bai: Người dùng được yêu cầu đăng ký lại.

Usecase được thực hiện khi người dùng truy cập vào trang đăng nhập

Hệ thống yêu cầu điền số điện thoại, mật khẩu, họ và tên, email, xác

Luồng cơ bản nhận lại mật khẩu.

Người dùng thực hiện điền đầy đủ thông tin đăng ký và bấm nút

Hệ thống sẽ kiểm tra sự tồn tại của email và số điện thoại.

Hệ thống chuyển về giao diện đăng nhập.

Luồng ngoại lệ Nếu người dùng đăng ký trùng thông tin Hệ thống sẽ thực hiện

Hiển thị thông báo số điện thoại hoặc email đã được sử dụng.

(Thất bại) Hệ thống yêu cầu đăng nhập lại.

Bảng 2 Đặc tả usecase đăng ký

Tên Chỉnh sửa thông tin cá nhân

Mô tả Người dùng chọn thông tin cá nhân Đối tượng Người dùng

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống.

Nếu đăng ký thành công: Thông tin sẽ được lưu và hiển thị lên cho

Hậu điều kiện người dùng.

Nếu đăng nhập thất bai: Người dùng được yêu cầu chỉnh sửa lại.

Usecase được thực hiện khi người dùng truy cập vào trang thông tin cá nhân và chọn tài khoản

Luồng cơ bản Hệ thống yêu cầu nhập thông tin chi tiết: Họ và tên, số điện thoại, email, địa chỉ.

(Thành công) Người dùng thực hiện điền đầy đủ thông tin và bấm nút Lưu.

Hệ thống sẽ kiểm tra sự tồn tại của email và số điện thoại.

Hệ thống sẽ hiển thị lại lên cho người dùng.

Luồng ngoại lệ Nếu người dùng đăng ký trùng thông tin Hệ thống sẽ thực hiện

Hiển thị thông báo số điện thoại hoặc email đã được sử dụng.

(Thất bại) Hệ thống yêu cầu đăng nhập lại.

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

Tên Xem thông tin chi tiết balo

Mô tả Người dùng xem tất cả thông tin của 1 balo. Đối tượng Người dùng.

Tiền điều kiện Người dùng chọn 1 sản phẩm bất kỳ.

Hậu điều kiện Không có

Luồng cơ bản Usecase được thực hiện khi người dùng chọn vào một sản phẩm bất

(Thành công) kỳ, hệ thống hiển thị toàn bộ thông tin của sản phẩm đó.

Luồng ngoại lệ Không có.

Bảng 4 Đặc tả usecase xem thông tin chi tiết balo

Tên Tra cứu thông tin balo

Mô tả Người dùng tra cứu balo trong cửa hàng. Đối tượng Người dùng.

Tiền điều kiện Người dùng nhập vào ô tìm kiếm balo cần tìm.

Usecase được thực hiện khi người dùng nhập vào ô tìm kiếm balo

Luồng cơ bản bất kì.

(Thành công) Hệ thống kiểm tra sản phẩm có tồn tại không.

Hiển thị sản phẩm lên giao diện.

Luồng ngoại lệ Nếu sản phẩm không tồn tại, hệ thống hiện ra trang lỗi không tìm

(Thất bại) thấy sản phẩm.

Bảng 5 Đặc tả usecase tra cứu thông tin balo

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

Mô tả Người dùng thêm một sản phẩm cần mua vào giỏ hàng. Đối tượng Người dùng.

Tiền điều kiện Người dùng bấm nút thêm vào giỏ.

Hậu điều kiện Không có.

Luồng cơ bản Usecase được thực hiện khi người dùng bấm nút thêm sản phẩm vào giỏ, hệ thống sẽ cập nhật lại số lượng và tên sản phẩm vào giỏ

Bảng 6 Đặc tả usecase thêm sản phẩm vào giỏ hàng

Tên Xóa sản phẩm khỏi giỏ hàng

Mô tả Người dùng xóa 1 sản phẩm khỏi giỏ hàng. Đối tượng Người dùng.

Tiền điều kiện Người dùng chọn nút xóa sản phẩm.

Luồng cơ bản Usecase được thực hiện khi người bấm nút xóa sản phẩm bất kì

Hệ thống xóa sản phẩm người dùng chọn.

(Thành công) Cập nhật lại giao diện và hiển thị lên cho người dùng

Bảng 7 Đặc tả usecase xóa sản phẩm khỏi giỏ hàng

Tên Thanh toán đơn hàng

Mô tả Người dùng thực hiện chức năng thanh toán. Đối tượng Người dùng.

Tiền điều kiện Người dùng chọn nút Thanh toán trong trang đơn hàng.

Usecase được thực hiện khi người dùng bấm nút Thanh toán đơn hàng.

Luồng cơ bản Hệ thống hiển thị trang thanh toán.

(Thành công) Sau đó tiến hành qua các bước điền thông tin địa chỉ, chọn phương thức vận chuyển, phương thức thanh toán và yêu cầu người dùng xác nhận lại thông tin đơn hàng đó.

Bảng 8 Đặc tả usecase thanh toán đơn hàng

Tên Thêm/ cập nhật/ xóa sản phẩm

Mô tả Quản trị viên tương tác lên sản phẩm như thêm sản phẩm mới, cập nhật lại thông tin hay xóa sản phẩm khỏi cửa hàng. Đối tượng Quản trị viên.

Tiền điều kiện Quản trị viên bấm vào nút Thêm/ Sửa/ Xóa thông tin của sản phẩm

Usecase được thực hiện khi quản trị viên tương tác lên sản phẩm

Luồng cơ bản Nếu chọn Thêm/ Cập nhật, hệ thống sẽ hiển thị form Thêm/ Cập nhật sản phẩm mới và yêu cầu nhập tất cả thông tin về sản phẩm Nếu

(Thành công) chọn Xóa, hệ thống sẽ loại bỏ sản phẩm và hiện lại giao diện cho quản trị viên.

Quản trị viên nhập xong sẽ bấm lưu và thông tin sẽ được cập nhật lại trên hệ thống.

Luồng ngoại lệ Nếu Thêm/ Sửa tên sản phẩm đã tồn tại, hệ thống sẽ thông báo và

(Thất bại) yêu cầu quản trị viên nhập lại.

Bảng 9 Đặc tả usecase thêm/ cập nhật/ xóa sản phẩm

Mô tả Quản trị viên xem thống kê của toàn bộ hệ thống Đối tượng Quản trị viên.

Tiền điều kiện Quản trị viên bấm mục Bảng điều khiển.

Hậu điều kiện Không có.

Luồng cơ bản Usecase được thực hiện khi quản trị viên chọn mục Bảng điều khiển trên thanh sidebar, hệ thống hiển thị toàn bộ thông tin như số lượng

(Thành công) khách hàng, đơn hàng, sản phẩm, doanh thu lên cho quản trị viên.

Bảng 10 Đặc tả usecase thống kê

Tên Thêm/ cập nhật/ xóa tin tức

Mô tả Nhân viên tương tác lên tin tức như thêm tin tức mới, cập nhật lại thông tin hay xóa tin tức khỏi cửa hàng. Đối tượng Nhân viên.

Tiền điều kiện Nhân viên bấm vào nút Thêm/ Sửa/ Xóa tin tức

Usecase được thực hiện khi nhân viên tương tác lên tin tức.

Nếu chọn Thêm/ Cập nhật, hệ thống sẽ hiển thị form Thêm/ Cập nhật

Luồng cơ bản tin tức mới và yêu cầu nhập tất cả thông tin về tin tức Nếu chọn Xóa,

(Thành công) hệ thống sẽ loại bỏ tin tức và hiện lại giao diện cho nhân viên.

Nhân viên nhập xong sẽ bấm lưu và thông tin sẽ được cập nhật lại trên hệ thống.

Bảng 11 Đặc tả usecase / cập nhật/ xóa tin tức

PHÂN TÍCH VÀ THIẾT KẾ

Lược đồ lớp

Hình 7 Sơ đồ lớp của baloshop

Lược đồ tuần tự

a) Lược đồ tuẩn tự Đăng nhập

Hình 8 Sơ đồ tuần tự Đăng nhập b) Lược đồ tuần tự đăng ký

Hình 9 Sơ đồ tuần tự Đăng ký c) Lược đồ tuần tự Cập nhật thông tin cá nhân

Hình 10 Sơ đồ tuần tự Cập nhật thông tin cá nhân d) Lược đồ tuần tự Xem thông tin sản phẩm

Hình 11 Sơ đồ tuần tự Xem thông tin chi tiết sản phẩm e) Lược đồ tuần tự Tìm kiếm sản phẩm

Hình 12 Sơ đồ tuần tự tìm kiếm sản phẩm f) Lược đồ tuần tự Lọc sản phẩm

Hình 13 Sơ đồ tuần tự Lọc sản phẩm g) Lược đồ tuần tự Thêm sản phẩm vào giỏ hàng

Hình 14 Sơ đồ tuần tự Thêm sản phẩm vào giỏ hàng h) Lược đồ tuần tự Xóa sản phẩm khỏi giỏ hàng

Hình 15 Sơ đồ tuần tự Xóa sản phẩm khỏi giỏ hàng i) Lược đồ tuần tự Đặt hàng

Hình 16 Sơ đồ tuần tự Đặt hàng j) Lược đồ tuần tự Thống kê doanh thu

Hình 17 Sơ đồ tuần tự Thống kê doanh thu k) Lược đồ tuần tự Thêm sản phẩm vào hệ thống

Hình 18 Sơ đồ tuần tự Thêm sản phẩm l) Lược đồ tuần tự Cập nhật sản phẩm

Hình 19 Sơ đồ tuần tự Cập nhật sản phẩm m) Lược đồ tuần tự Xóa sản phẩm

Hình 20 Sơ đồ tuẩn tự Xóa sản phẩm n) Lược đồ tuần tự Thêm phân loại

Hình 21 Sơ đồ tuần tự Thêm phân loại o) Lược đồ tuần tự Cập nhật phân loại

Hình 22 Sơ đồ tuần tự Cập nhật phân loại p) Lược đồ tuần tự Xóa phân loại

Hình 23 Sơ đồ tuần tự Xóa phân loại q) Lược đồ tuần tự Thêm thương hiệu

Hình 24 Sơ đồ tuần tự Thêm thương hiệu r) Lược đồ tuần tự Cập nhật thương hiệu

Hình 25 Sơ đồ tuần tự Cập nhật thương hiệu s) Lược đồ tuần tự Xóa thương hiệu

Hình 26 Sơ đồ tuần tự Xóa thương hiệu t) Lược đồ tuần tự Thêm nhân viên

Hình 27 Sơ đồ tuần tự Thêm nhân viên u) Lược đồ tuần tự Cập nhật trạng thái hoạt động cho nhân viên

Hình 28 Sơ đồ tuần tự Cập nhật trang thái hoạt động cho nhân viên v) Lược đồ tuần tự Cập nhật trạng thái hoạt động cho khách hàng

Hình 29 Sơ đồ tuần tự Cập nhật trạng thái hoạt động cho khách hàng w) Lược đồ tuần tự Thêm tin tức

Hình 30 Sơ đồ tuần tự Thêm tin tức mới x) Lược đồ tuần tự cập nhật tin tức

Hình 31 Sơ đồ tuần tự cập nhật tin tức y) Lược đồ tuần tự xóa tin tức

Hình 32 Sơ đồ tuần tự xóa tin tức

Thiết kế cơ sở dữ liệu

3.3.1 Lược đồ thực thể kết hợp (ERD)

Hình 33 Sơ đồ usecase phía quản trị viên

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

STT Thuộc tính Kiểu Ý nghĩa Khóa

1 Id Text Mã sản phẩm PK

2 Name Text Tên sản phẩm

3 Description Text Mô tả sản phẩm

4 Price Numeric Giá bán sản phẩm

5 StandCost Numeric Giá nhập sản phẩm

6 Quantity Numeric Số lượng sản phẩm

7 Material Text Chất liệu sản phẩm

8 CompartmentNumber Numeric Số ngăn sản phẩm

9 Color Text Màu sắc sản phẩm

10 Weight Text Trọng lượng sản phẩm

11 Size Text Kích thước sản phẩm

12 Capacity Text Thể tích sản phẩm

13 WarrantyPeriod Text Thời hạn bảo hành

14 LaptopSize Text Đựng vừa laptop kích thước

15 WaterResistance Text Khả năng chống nước FK

16 CategoryId Text Mã loại sản phẩm FK

17 BranchId Text Mã thương hiệu FK

Bảng 12 Chi tiết bảng Product

1 Id Text Mã tài khoản PK

2 AccountId Text Tài khoản người dùng FK

3 CustomerUrl Text Link dẫn hình ảnh người dùng

6 Type Numeric Loại người dùng

Bảng 13 Chi tiết bảng User

1 Id Text Mã người dùng PK

2 Fullname Text Tên người dùng

3 Email Text Email người dùng

4 PhoneNumber Text Số điện thoại người

5 Password Text Mật khẩu người dùng

6 Salt Text Muối hash mật khẩu

7 IsDefaultOtp Boolean Có phải otp mặc định

8 IsChangePassword Boolean Đã thay đổi mật khẩu chưa

9 IsActive Boolean Đã kích hoạt chưa

10 IsVerify Boolean Đã xác thực chưa

11 FirstLoggedAt Datetime Đăng nhập lần đầu vào

12 LastLoggedAt Datetime Đăng nhập lần cuối vào

13 CurrentDevices Integer Thiết bị đăng nhập

14 Role Integer Vai trò người dùng

16 Avatar Text Ảnh đại diện người dùng

Bảng 14 Chi tiết bảng Account

1 Id Text Mã hóa đơn PK

2 PaymentMethod Integer Phương thức thanh toán

3 Total Numeric Tổng giá tiền

4 AccountId Text ID tài khoản người dùng FK

5 ShippingFee Double Phí vận chuyển

6 IsPayment Boolean Trạng thái thanh toán

7 PhoneNumber Text Số điện thoại người nhận

8 Fullname Text Tên người nhận

9 Status Integer Trạng thái đơn hàng

10 Address Text Địa chỉ người nhận

Bảng 15 Chi tiết bảng Invoice

1 Id Text Mã chi tiết hóa đơn PK

2 InvoiceId Text Mã hóa đơn FK

3 ProductId Text Mã sản phẩm FK

4 Quantity Bigint Số lượng từng sản phẩm

Bảng 16 Chi tiết bảng Invoice Detail

1 Id Text Mã hình ảnh PK

2 ProductId Text ID sản phẩm FK

3 FileUploadId Text ID File ảnh sản phẩm FK

Bảng 17 Chi tiết bảng Image Product

1 Id Text ID đánh giá PK

3 InvoiceId Text ID hóa đơn FK

4 Rate Double Số sao đánh giá

5 Content Text Nội dung đánh giá

6 Reactions Bigint Số lượng tương tác

Bảng 18 Chi tiết bảng Product Review

1 Id Text ID tương tác đánh giá PK

2 ProductReviewId Text ID đánh giá FK

3 IsActive Boolean Có kích hoạt không

4 ReactionType Integer Kiểu tương tác

Bảng 19 Chi tiết bảng Product Review Reaction

1 Id Text ID hình ảnh đánh giá sản phẩm PK

3 FileUploadId Text ID File ảnh đánh giá FK

Bảng 20 Chi tiết bảng Product Review Image

1 Id Text ID file upload PK

2 FileName Text Tên file FK

3 Key Text File Key FK

4 Uri Text Đường dẫn tới file

6 Content Text Nội dung file

Bảng 21 Chi tiết bảng File Upload

1 Id Text Mã loai sản phẩm PK

2 Description Text Mô tả loại sản phẩm

3 Name Text Tên loại sản phẩm

4 FileUploadId Text ID File Upload ảnh FK

Bảng 22 Chi tiết bảng Category

1 Id Text Mã chi tiết giỏ hàng PK

2 InvoiceId Text Mã hóa đơn FK

3 SoldPrice Numeric Giá bán sản phẩm

4 ProductId Text Mã sản phẩm FK

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

Bảng 23 Chi tiết bảng Invoice Detail

1 Id Text Mã giỏ hàng PK

2 Quantity Text Số lượng từng sản phẩm

3 ProductId Bigint ID sản phẩm FK

Bảng 24 Chi tiết bảng Cart

1 Id Text Mã thương hiệu PK

2 Name Text Tên thương hiệu

4 FileUploadID Text ID File Upload ảnh FK

Bảng 25 Chi tiết bảng Brand

1 Id Text ID bài viết PK

2 Title Text Tiêu đề bài viết FK

3 Content Text Nội dung bài viết

4 Stastus Integer Trạng thái bài viết

Bảng 26 Chi tiết bảng Post

1 Id Text ID hình ảnh bài viết PK

2 PostId Text ID bài viết FK

3 FileUploadId Text ID File ảnh đánh giá FK

Bảng 27 Chi tiết bảng Post Image

1 Id Text Mã địa chỉ PK

2 AddressString Text Số nhà, tên đường

3 DistrictId Integer Mã tỉnh/thành phố

4 ProvinceId Integer Mã quận/huyện

5 WardId Integer Mã phường/xã

6 DistrictName Text Tên tỉnh/thành phố

7 ProvinceName Text Tên quận/huyện

8 WardName Text Tên phường/xã

9 UserId Text Id người dùng FK

10 PhoneNumber Text Số điện thoại người dùng

111 Fullname Text Tên người dùng

Bảng 28 Chi tiết bảng Address

1 Id Text Mã token PK

4 TokenExpiryAt Datetime Thời gian AccessToken hết hạn

6 Ip Text Ip thiết bị

7 Device Text Thiết bị đăng nhập

9 AccountId Text ID tài khoản FK

Bảng 29 Chi tiết bảng Token

1 Id Text ID Mail PK

3 Username Text Tài khoản mail

4 Password Text Mật khảu mail đã được hash

5 Salt Text Muối hash mật khẩu mail

6 Port Integer Port mail service

7 SmtpHost Text Smtp host mail service

8 EnableSsl Boolean Có ssl không

9 Limit Integer Giới hạn mail gửi

10 Uses Integer Mail đã được sử dụng hay chưa

11 LastUsedAt Datetime Lần cuối sử dụng

Bảng 30 Chi tiết bảng Mail

1 Id Text ID mail log PK

2 From Text Từ địa chỉ

3 To Text Tới địa chỉ

4 Subject Text Tiêu đề mail

Bảng 31 Chi tiết bảng MailLog

Thiết kế giao diện

STT Tên Định dạng Mô tả

1 Số điện thoại Text Cho phép người dùng nhập số điện thoại.

2 Email Text Cho phép người dùng nhập email.

3 Mật khẩu Text Cho phép người dùng nhập mật khẩu.

4 Xác nhận mật khẩu Text Cho phép người dùng nhập lại mật khẩu.

5 Họ và tên Text Cho phép người dùng nhập họ và tên.

6 Điều khoản Checkbox Cho phép người dùng click vào đây để đồng ý

7 Đăng nhập Button Khi nhấp vào, chuyển sang trang đăng nhập.

Bảng 32 Mô tả giao diện Trang đăng ký

1 Số điện thoại Text Cho phép người dùng nhập số điện thoại.

2 Mật khẩu Text Cho phép người dùng nhập mật khẩu.

3 Ghi nhớ mật khẩu Checkbox Cho phép người dùng click vào đây để ghi nhớ.

4 Đăng nhập Button Khi nhấp vào, sẽ đăng nhập và chuyển đến trang chủ

5 Quên mật khẩu Button Khi nhấp vào, sẽ chuyển đến trang quên mật khẩu

6 Đăng ký Button Khi nhấp vào, chuyển sang trang đăng ký.

Bảng 33 Mô tả giao diện Trang đăng nhập

1 Trang chủ Link Khi nhấp vào đây, chuyển đến trang chủ.

Khi nhấp vào đây, chuyển đến trang sản

2 Loại balo Dropdown phẩm Còn khi di chuột vào, hiện ra danh sách loại sản phẩm.

Khi nhấp vào đây, chuyển đến trang sản

3 Thương hiệu Dropdown phẩm Còn khi di chuột vào, hiện ra danh sách thương hiệu sản phẩm.

4 Tin tức Link Khi nhấp vào đây, chuyển đến trang tin tức.

5 Liên hệ Link Khi nhấp vào đây, chuyển đến trang liên hệ.

6 Tìm kiếm Text Cho phép người dùng nhập thông tin tìm kiếm.

7 Giỏ hàng Button Khi nhấp vào đây, người dùng chuyển đến trang giỏ hàng.

8 Thông tin tài khoản Dropdown Khi di chuột vào đây, hiện ra 2 lựa chọn:

Xem thông tin tài khoản và đăng xuất

Bảng 34 Mô tả giao diện Trang chủ 3.4.1.4 Trang chi tiết sản phẩm

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

1 Giảm số lượng Text Dùng để giảm số lượng sản phẩm khi cho vào giỏ hàng.

2 Tăng số lượng Text Dùng để tăng số lượng sản phẩm khi cho vào giỏ hàng.

3 Thêm vào giỏ hàng Button Khi nhấp vào, sản phẩm sẽ được thêm vào giỏ.

Bảng 35 Mô tả chi tiết Trang chi tiết sản phẩm

3.4.1.5 Trang thông tin cá nhân

Hình 38 Trang thông tin tài khoản

1 Họ và tên Text Cho phép người dùng nhập họ tên.

2 Ngày sinh Text Cho phép người dùng ngày sinh.

3 Giới tính Checkbox Cho phép người dùng chọn giới tính.

Bảng 36 Mô tả giao diện Đổi thông tin tài khoản

1 Phân loại Checkbox Cho phép người dùng chọn 1 hay nhiều loại sản phẩm.

2 Thương hiệu Checkbox Cho phép người dùng chọn 1 hay nhiều thương hiệu.

3 Màu sắc Checkbox Cho phép người dùng chọn 1 hay nhiều màu sắc

4 Khoảng giá Text Cho phép người dùng nhập khoảng giá.

5 Áp dụng Button Khi nhấp vào, khoảng giá sẽ được áp dụng.

Bảng 37 Mô tả giao diện Bộ lọc

1 Chỉnh sửa Button Khi nhấp vào, hiện form chỉnh sửa địa chỉ.

2 Xóa Button Khi nhấp vào, xóa địa chỉ đó.

3 Thêm mới Button Khi nhấp vào, hiện form thêm mới địa chỉ.

Bảng 38 Mô tả chi tiết Trang địa chỉ

1 Địa chỉ Text Hiển thị thông tin địa chỉ.

2 Liên lạc Text Hiển thị số điện thoại liên lạc.

3 Gửi thư điện tử Text Hiển thị thông tin email.

4 Bản đồ Image Hiển thị thông tin địa chỉ dưới dạng bản đồ.

Bảng 39 Mô tả chi tiết Trang liên hệ

3.4.1.9 Trang chọn địa chỉ nhận hàng

Hình 42 Trang chọn địa chỉ nhận hàng

1 Địa chỉ Checkbox Chọn 1 địa chỉ hiện có để nhận hàng.

Khi nhấp vào, thông tin sẽ được lưu và

2 Giao đến địa chỉ đã chọn Button chuyển đến trang chọn phương thức thanh toán.

3 Họ và tên Text Cho phép người dùng nhập họ tên người nhận hàng.

4 Điện thoại Text Cho phép người dùng nhập điện thoại người nhận hàng.

5 Thành phố / Tỉnh Text Cho phép người chọn thành phố hoặc tỉnh nơi nhận hàng.

6 Quận / Huyện Text Cho phép người chọn quận hoặc huyện nơi nhận hàng.

7 Xã / Phường Text Cho phép người chọn xã hoặc phường nơi nhận hàng.

8 Số nhà, tên đường Text Cho phép người nhập số nhà và tên đường nơi nhận hàng.

Khi nhấp vào, thông tin sẽ được lưu và

9 Xác nhận giao Button chuyển đến trang chọn phương thức thanh toán.

Bảng 40 Mô tả chi tiết Trang chọn địa chỉ nhận hàng

1 Số lượng Text Nhập hoặc chỉnh số lượng sản phẩm, tổng tiền sẽ thay đổi theo.

2 Xóa sản phẩm Button Khi nhấp vào, sản phẩm đó sẽ bị xóa khỏi giỏ hảng.

3 Tiếp tục mua hàng Button Khi nhấp vào, sẽ được chuyển đến trang sản phẩm.

4 Tiến hành thanh toán Button Khi nhấp vào, sẽ được chuyển đến trang thanh toán.

Bảng 41 Mô tả chi tiết trang giỏ hàng

1 Chọn phương thức Checkbox Người dùng bắt buộc phải chọn 1 trong 2 vận chuyển phương thức.

2 Chọn phương thức Checkbox Người dùng bắt buộc phải chọn 1 trong 2 thanh toán phương thức.

Khi nhấp vào, nếu người dùng chọn phương thức thanh toán 1, thông tin sẽ được lưu vào

3 Đặt hàng Button và được coi là đã đặt hàng thành công Nếu người dùng chọn phương thức thanh toán 2, người dùng sẽ được chuyển đến trang thanh toán bằng Momo.

Bảng 42 Mô tả chi tiết Trang chọn phương thức vận chuyển và phương thức thanh toán

1 Xem chi tiết Button Người dùng sẽ được chuyển đến bài viết đó

2 Bài viết nổi bật Link

Bảng 43 Mô tả chi tiết Trang tin tức

1 Bảng điều khiển Link Khi nhấp vào, chuyển đến trang điều khiển.

2 Khách hàng Link Khi nhấp vào, chuyển đến trang quản lý khách hàng.

3 Nhân viên Link Khi nhấp vào, chuyển đến trang quản lý nhân viên.

4 Sản phẩm Link Khi nhấp vào, chuyển đến trang quản lý sản phẩm.

5 Thương hiệu Link Khi nhấp vào, chuyển đến trang quản lý thương hiệu.

6 Phân loại Link Khi nhấp vào, chuyển đến trang quản lý phân loại.

7 Đơn hàng Link Khi nhấp vào, chuyển đến trang quản lý đơn hàng.

8 Doanh thu Link Khi nhấp vào, chuyển đến trang doanh thu.

9 Đăng xuất Link Khi nhấp vào, chuyển đến trang đăng nhập.

10 Tổng khách hàng Text Hiển thị tổng số khách hàng của hệ thống.

11 Tổng đơn hàng Text Hiển thị tổng số nhân viên của hệ thống.

12 Tổng doanh thu Text Hiển thị tổng số doanh thu của hệ thống.

13 Tổng sản phẩm Text Hiển thị tổng số sản phẩm của hệ thống.

Bảng 44 Mô tả chi tiết Trang chủ quản trị viên

3.4.2.2 Trang quản lý nhân viên

Hình 47 Trang quản lý nhân viên

STT Tên Định đạng Mô tả

1 Trạng thái hoạt động Button Khi nhấp vào, chuyển trạng thái hoạt động.

2 Thêm nhân viên Button Khi nhấp vào chuyển đến form thêm mới nhân viên.

Bảng 45 Mô tả chi tiết Trang quản lý nhân viên

3.4.2.3 Trang quản lý đơn hàng

Hình 48 Trang quản lý đơn hàng

1 Xem chi tiết đơn hàng Button Khi nhấp vào, hiển thị chi tiết của đơn hàng đó.

2 Xác nhận đơn hàng Button Khi nhấp vào chuyển trạng thái của đơn hàng.

Bảng 46 Mô tả chi tiết Trang quản lý đơn hàng

3.4.2.4 Trang quản lý sản phẩm

Hình 49 Trang quản lý sản phẩm

1 Xem chi tiết sản phẩm Button Khi nhấp vào, hiển thị chi tiết của sản phẩm đó Có thể chỉnh sửa tại đây.

2 Xóa sản phẩm Button Khi nhấp vào, sản phẩm đó sẽ bị xóa.

3 Thêm mới sản phẩm Button Khi nhấp vào, form thêm mới sản phẩm sẽ hiện ra.

Bảng 47 Mô tả chi tiết Trang quản lý sản phẩm

3.4.2.5 Trang thêm mới sản phẩm

Hình 50 Trang thêm sản phẩm

1 Thông tin đầy đủ Text Cho phép người dùng nhập thông tin về về sản phẩm sản phẩm.

2 Màu sắc Checkbox Cho phép người dùng chọn màu sắc.

3 Hình ảnh sản phẩm File Cho phép người dùng chọn hình ảnh liên quan đến sản phẩm.

4 Lưu Button Khi nhấp vào, các thông tin ở trên được lưu vào hệ thống.

5 Trở về Button Khi nhấp vào, quay lại trang sản phẩm.

Bảng 48 Mô tả chi tiết Form thêm sản phẩm mới

3.4.2.6 Trang thống kê doanh thu

Hình 51 Trang thống kê doanh thu

1 Tổng khách hàng Text Hiển thị tổng số khách hàng của hệ thống.

2 Tổng đơn hàng Text Hiển thị tổng số nhân viên của hệ thống.

3 Tổng doanh thu Text Hiển thị tổng số doanh thu của hệ thống.

4 Tổng sản phẩm Text Hiển thị tổng số sản phẩm của hệ thống.

Bảng 49 Mô tả chi tiết Trang Thống kê doanh thu

CÀI ĐẶT PHẦN MỀM VÀ KIỂM THỬ

Cài đặt phần mềm

4.1.1 Yêu cầu hệ thống Để có thể chạy được ứng dụng, máy tính phải có các yêu cầu sau:

 Cài đặt Visual Studio Code.

Bước 1: Clone hoặc download project từ link github:

 Back-End: https:/github.com/nguyenmanh1311/BaloShopBE.git

 Front-End (User): https://github.com/nguyenmanh1311/ClientFE.git

 Front-End (Admin): https://github.com/nguyenmanh1311/AdminFE.git

Bước 2: Khởi chạy Back-End :

 Sau khi clone hoặc download Back-End về, ta tiến hành mở command prompt trong đường dẫn của project.

 Sau đó, ta cần chỉnh sửa lại thông tin username và password của hệ quản trị cơ sở dữ liệu trong file application.properties trong folder resources cho đúng với thông tin username và password của máy.

 Tiếp theo, chúng ta tiến hành chạy lệnh “mvn spring-boot:run” trong command prompt để tiến hành khởi chạy Back-end.

Bước 3: Khởi chạy Front-End (admin và user)

 Sau khi clone hoặc download Front-End về máy, chuột phải vào thư mục tải về và chọn “Open in Windows Terminal”.

 Sau khi Windows Terminal hiện ra, chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project hoạt động.

 Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy Front-End.

Kiểm thử

4.2.1 Kiểm thử chức năng đăng nhập

Hình 52 Test case chức năng kiểm thử

4.2.2 Kiểm thử chức năng đăng ký

Hình 53 Test case chức năng đăng ký

4.2.3 Kiểm thử giao diện trang chủ

Hình 54 Test case giao diện trang chủ

4.2.4 Kiểm thử chức năng mua hàng khi chưa đăng nhập

Hình 55 Test case chức năng mua hàng khi chưa đăng nhập

4.2.5 Kiểm thử chức năng mua hàng khi đã đăng nhập

Hình 56 Kiểm thử chức năng mua hàng khi đã đăng nhập

4.2.6 Kiểm thử chức năng xóa sản phẩm trong giỏ hàng

Hình 57 Test case chức năng xóa sản phẩm trong giỏ hàng

4.2.7 Kiểm thử chức năng tăng / giảm số lượng sản phẩm trong giỏ hàng

Hình 58 Test case chức năng tăng / giảm số lượng sản phẩm trong giỏ hàng

4.2.8 Kiểm thử chức năng mua hàng nhưng không nhập địa chỉ

Hình 59 Test case chức năng mua hàng nhưng không nhập địa chỉ

4.2.9 Kiểm thử chức năng thanh toán đơn hàng bằng phương thức Momo

Hình 60 Test case chức năng thanh toán đơn hàng bằng phương thức Momo

4.2.10 Kiểm thử chức năng xem lịch sử đơn hàng

Hình 61 Test case chức năng xem lịch sử đơn hàng

4.2.11 Kiểm thử chức năng xem chi tiết sản phẩm

Hình 62 Test case chức năng xem chi tiết sản phẩm

4.2.12 Kiểm thử chức năng lọc dữ liệu sản phẩm

Hình 63 Test case chức năng lọc dữ liệu sản phẩm

4.2.13 Kiểm thử giao diện trang thống kê

Hình 64 Test case giao diện trang thống kê

4.2.14 Kiểm thử giao diện trang đơn hàng

Hình 65 Test case giao diện trang đơn hàng

4.2.15 Kiểm thử giao diện trang quản lý khách hàng

Hình 66 Test case giao diện trang đơn hàng

4.2.16 Kiểm thử giao diện trang Nhân viên

Hình 67 Test case giao diện trang Nhân viên

4.2.17 Kiểm thử giao diện trang quản lý sản phẩm

Hình 68 Test case giao diện trang quản lý sản phẩm

4.2.18 Kiểm thử giao diện trang quản lý thương hiệu

Hình 69 Test case giao diện trang quản lý thương hiệu

4.2.19 Kiểm thử giao diện trang quản lý phân loại sản phẩm

Hình 70 Test case giao diện trang quản lý phân loại sản phẩm

4.2.19 Kiểm thử chức năng xác nhận đơn hàng

Hình 71 Kiểm thử chức năng xác nhận đơn hàng

Ưu điểm

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

Tp Hồ Chí Minh, ngày tháng năm 2023

(Ký và ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP

CỘNG HÒA 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ÁO VIÊN PHẢN BIỆN

Họ và tên sinh viên 1: Phạm Văn Thắng MSSV 1: 19110463

Họ và tên sinh viên 2: Nguyễn Đức Mạnh MSSV 2: 19110396

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

Tên đề tài: Xây dựng website bán balo sử dụng ASP.NET Core và ReactJS

Họ và tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng

1 Về nội dung đề tài và 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 2023

(Ký và ghi rõ họ tên)

Lời mở đầu, nhóm em xin phép gửi lời cảm ơn chân thành đến Khoa Công Nghệ Thông Tin - Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được học tập tại một môi trường tốt để trau dồi kiến thức, phát triển tư duy và nền móng vững chắc để thực hiện đề tài này một cách tốt nhất.

Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thành và sâu sắc nhất đến thầy Lê Văn Vinh Thầy luôn tận tâm giúp đỡ và đưa ra những góp ý quý giá cho nhóm chúng em phát triển tốt nhất từ lúc đăng ký đề tài cũng như lúc kết thúc tiểu luận.

Nhờ những kiến thức chuyên ngành từ thầy cô cũng như những kinh nghiệm từ thực tế ngoài xã hội thông qua thời gian học tập tại trường và thực tập ở các công ty Tất cả những điều đó đã cung cấp cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành cũng như công việc trong tương lai Đây là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộc sống mới.

Chúng em đã cố gắng hoàn thành đề tài một cách tốt nhất, tuy nhiên vẫn còn nhiều thiếu sót khó tránh khỏi Chúng em hy vọng nhận được lời đóng góp từ quý thầy cô để qua đó chúng em có thể rút ra được bài học kinh nghiệm và tiếp tục hoàn thiện sản phẩm của mình một cách chỉn chu và hoàn hơn tốt nhất.

Phạm Văn Thắng - 19110463Nguyễn Đức Mạnh - 19110396

1 Tính cấp thiết của đề tài 13

2 Mục tiêu của đề tài 13

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

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

2.3 Kiến trúc chung của hệ thống 21

2.5 Mô hình hóa yêu cầu 23

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ 33

3.3 Thiết kế cơ sở dữ liệu 57

CHƯƠNG 4: CÀI ĐẶT PHẦN MỀM VÀ KIỂM THỬ 84

1.3 Về các thành viên trong nhóm 100

Hình 4 Kiến trúc chung của hệ thống 21

Hình 5 Sơ đồ use case phía khách hàng 23

Hình 6 Sơ đồ use case phía quản trị viên 24

Hình 7 Sơ đồ lớp của baloshop 33

Hình 8 Sơ đồ tuần tự Đăng nhập 34

Hình 9 Sơ đồ tuần tự Đăng ký 35

Hình 10 Sơ đồ tuần tự Cập nhật thông tin cá nhân 36

Hình 11 Sơ đồ tuần tự Xem thông tin chi tiết sản phẩm 37

Hình 12 Sơ đồ tuần tự tìm kiếm sản phẩm 38

Hình 13 Sơ đồ tuần tự Lọc sản phẩm 38

Hình 14 Sơ đồ tuần tự Thêm sản phẩm vào giỏ hàng 39

Hình 15 Sơ đồ tuần tự Xóa sản phẩm khỏi giỏ hàng 39

Hình 16 Sơ đồ tuần tự Đặt hàng 40

Hình 17 Sơ đồ tuần tự Thống kê doanh thu 41

Hình 18 Sơ đồ tuần tự Thêm sản phẩm 42

Hình 19 Sơ đồ tuần tự Cập nhật sản phẩm 43

Hình 20 Sơ đồ tuẩn tự Xóa sản phẩm 44

Hình 21 Sơ đồ tuần tự Thêm phân loại 45

Hình 22 Sơ đồ tuần tự Cập nhật phân loại 46

Hình 23 Sơ đồ tuần tự Xóa phân loại 47

Hình 24 Sơ đồ tuần tự Thêm thương hiệu 48

Hình 25 Sơ đồ tuần tự Cập nhật thương hiệu 49

Hình 26 Sơ đồ tuần tự Xóa thương hiệu 50

Hình 27 Sơ đồ tuần tự Thêm nhân viên 51

Hình 28 Sơ đồ tuần tự Cập nhật trang thái hoạt động cho nhân viên 52

Hình 29 Sơ đồ tuần tự Cập nhật trạng thái hoạt động cho khách hàng 53

Hình 30 Sơ đồ tuần tự Thêm tin tức mới 54

Hình 31 Sơ đồ tuần tự cập nhật tin tức 55

Hình 32 Sơ đồ tuần tự xóa tin tức 56

Hình 33 Sơ đồ usecase phía quản trị viên 57

Hình 37 Trang chi tiết sản phẩm 68

Hình 38 Trang thông tin tài khoản 69

Hình 42 Trang chọn địa chỉ nhận hàng 73

Hình 47 Trang quản lý nhân viên 79

Hình 48 Trang quản lý đơn hàng 80

Hình 49 Trang quản lý sản phẩm 81

Hình 50 Trang thêm sản phẩm 82

Hình 51 Trang thống kê doanh thu 83

Hình 52 Test case chức năng kiểm thử 85

Hình 53 Test case chức năng đăng ký 86

Hình 54 Test case giao diện trang chủ 86

Hình 55 Test case chức năng mua hàng khi chưa đăng nhập 87

Hình 56 Kiểm thử chức năng mua hàng khi đã đăng nhập 88

Hình 57 Test case chức năng xóa sản phẩm trong giỏ hàng 88

Hình 58 Test case chức năng tăng / giảm số lượng sản phẩm trong giỏ hàng 89

Hình 59 Test case chức năng mua hàng nhưng không nhập địa chỉ 90

Hình 60 Test case chức năng thanh toán đơn hàng bằng phương thức Momo 91

Hình 61 Test case chức năng xem lịch sử đơn hàng 92

Hình 62 Test case chức năng xem chi tiết sản phẩm 92

Hình 63 Test case chức năng lọc dữ liệu sản phẩm 93

Hình 64 Test case giao diện trang thống kê 94

Hình 65 Test case giao diện trang đơn hàng 94

Hình 66 Test case giao diện trang đơn hàng 95

Hình 67 Test case giao diện trang Nhân viên 95

Hình 68 Test case giao diện trang quản lý sản phẩm 96

Hình 69 Test case giao diện trang quản lý thương hiệu 97

Hình 70 Test case giao diện trang quản lý phân loại sản phẩm 98

Hình 71 Kiểm thử chức năng xác nhận đơn hàng 99

Bảng 1 Đặc tả usecase đăng nhập 25

Bảng 2 Đặc tả usecase đăng ký 26

Bảng 3 Đặc tả usecase chỉnh sửa thông tin cá nhân 27

Bảng 4 Đặc tả usecase xem thông tin chi tiết balo 28

Bảng 5 Đặc tả usecase tra cứu thông tin balo 28

Bảng 6 Đặc tả usecase thêm sản phẩm vào giỏ hàng 29

Bảng 7 Đặc tả usecase xóa sản phẩm khỏi giỏ hàng 29

Bảng 8 Đặc tả usecase thanh toán đơn hàng 30

Bảng 9 Đặc tả usecase thêm/ cập nhật/ xóa sản phẩm 31

Bảng 10 Đặc tả usecase thống kê 31

Bảng 11 Đặc tả usecase / cập nhật/ xóa tin tức 32

Bảng 12 Chi tiết bảng Product 58

Bảng 13 Chi tiết bảng User 58

Bảng 14 Chi tiết bảng Account 59

Bảng 15 Chi tiết bảng Invoice 59

Bảng 16 Chi tiết bảng Invoice Detail 60

Bảng 17 Chi tiết bảng Image Product 60

Bảng 18 Chi tiết bảng Product Review 60

Bảng 19 Chi tiết bảng Product Review Reaction 60

Bảng 20 Chi tiết bảng Product Review Image 61

Bảng 21 Chi tiết bảng File Upload 61

Bảng 22 Chi tiết bảng Category 61

Bảng 23 Chi tiết bảng Invoice Detail 61

Bảng 24 Chi tiết bảng Cart 62

Bảng 25 Chi tiết bảng Brand 62

Bảng 26 Chi tiết bảng Post 62

Bảng 27 Chi tiết bảng Post Image 62

Bảng 28 Chi tiết bảng Address 63

Bảng 29 Chi tiết bảng Token 63

Bảng 30 Chi tiết bảng Mail 64

Bảng 31 Chi tiết bảng MailLog 64

Bảng 32 Mô tả giao diện Trang đăng ký 65

Bảng 33 Mô tả giao diện Trang đăng nhập 66

Bảng 34 Mô tả giao diện Trang chủ 68

Bảng 35 Mô tả chi tiết Trang chi tiết sản phẩm 68

Bảng 36 Mô tả giao diện Đổi thông tin tài khoản 69

Bảng 37 Mô tả giao diện Bộ lọc 70

Bảng 38 Mô tả chi tiết Trang địa chỉ 71

Bảng 39 Mô tả chi tiết Trang liên hệ 72

Bảng 40 Mô tả chi tiết Trang chọn địa chỉ nhận hàng 73

Bảng 41 Mô tả chi tiết trang giỏ hàng 74

Bảng 42 Mô tả chi tiết Trang chọn phương thức vận chuyển và phương thức thanh toán 75 Bảng 43 Mô tả chi tiết Trang tin tức 76

Bảng 44 Mô tả chi tiết Trang chủ quản trị viên 78

Bảng 45 Mô tả chi tiết Trang quản lý nhân viên 79

Bảng 46 Mô tả chi tiết Trang quản lý đơn hàng 80

Bảng 47 Mô tả chi tiết Trang quản lý sản phẩm 81

Bảng 48 Mô tả chi tiết Form thêm sản phẩm mới 82

Bảng 49 Mô tả chi tiết Trang Thống kê doanh thu 83

STT Thời gian Công việc

1 Tuần 3 - Thiết kế usecase và mô hình hóa yêu cầu.

- Thiết kế cơ sở dữ liệu.

- Tìm hiểu về thư viện React của Javacript

2 Tuần 4, 5, 6, 7 - Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API của hệ thống.

- Tiến hành phát triển API dựa trên các kiến thức

3 Tuần 8, 9, 10, 11 đã tìm hiểu được.

- Tiến hành xây dựng giao diện người dùng, quản trị viên cho hệ thống.

- Kết hợp các phần đã xây dựng lại với nhau : Giao

4 Tuần 12, 13, 14, 15 diện, API, cơ sở dữ liệu

- Sửa lỗi, hoàn thiện hệ thống

5 Tuần 16, 17 Kiểm thử chương trình và sửa lỗi.

6 Tuần 18, 19, 20 Viết và hoàn thiện báo cáo.

1 Tính cấp thiết của đề tài

Trong bối cảnh hiện nay, với sự phát triển của công nghệ và thông tin nhanh chóng và luôn đổi mới hằng ngày Và sự ảnh hưởng của dịch Covid trong những năm vừa qua Thì internet đang trở thành xu hướng mới trong việc mua bán hàng hóa và trao đổi thông tin Và trong bối cảnh đó, nhu cầu mua sắm của khách hàng trở nên cao hơn và tiêu chuẩn mua sắm cũng phải phù hợp với yêu cầu của người dùng Đó là những vấn đề nan giải của các doanh nghiệp kinh doanh.

Với ý tưởng của nhóm, thì việc xây dụng một trang web cung cấp thông tin và mua bán sản phẩm và ở đây là cung cấp và bán balo là cần thiết đối với một doanh nghiệp hay một cửa hàng buôn bán balo Với việc khách hàng có thể nhanh chóng lựa chọn sản phẩm phù hợp với nhu cầu, với giá tiền thì một trang web bán balo có thể nhanh chóng giải quyết điều đó Người dùng có thể thoải mái lựa chọn, mua sắm của mình mọi lúc và mọi nơi Cũng như về phía cung cấp có thể lựa chọn trang web là nơi quảng bá các sản phẩm Và hơn thế nữa việc quản lý các đơn hàng và chi phí doanh thu cũng trở nên dễ dàng hơn.

Việc có một ứng dụng web bán hàng sẽ tiết kiệm thời gian và nguồn lực rất nhiều đối với cả khách hàng và doanh nghiệp.

2 Mục tiêu của đề tài Đề tài “Xây dụng website bán balo” sẽ bao gồm các mục tiêu sau:

 Xây dụng một website cho phép người dùng có thể tìm kiếm, xem thông tin và đặt mua các sản phẩm balo trong thời gian trực tuyến ở bắt kỳ thời điểm và thời gian nào Và sau đó người dùng có thể theo dõi và để lại bình luận đánh giá với các sản phẩm đã mua

 Website có giao diện thân thiện với người dùng và có tốc độ xử lý nhanh chóng cũng như bảo mật thông tin cho người dùng

 Xây dụng hệ thống quản lý ở phía doanh nghiệp hay cửa hàng.

3 Đối tượng nghiên cứu Đề tài này có mục tiêu chính đó là nghiên cứu về kiến thức quản lý thực tiễn và vận hành hệ thống kinh doanh các sản phẩm balo và các công nghệ được áp dụng để thực hiện sản phẩm đó.

Trong đó với đối tượng nghiên cứu công nghệ ứng dụng nhóm sẽ nghiên cứ về RESTful API, Spring Boot, MySQL và JWT để xây dựng hệ thống các API để thực hiện thao tác truy xuất dữ liệu một cách an toàn, chính xác, bảo mật cũng như nhánh chóng nhất Cũng như nghiên cứu về ReacJS và các thư viện hỗ trợ thiết kế giao diện để thiết kế một giao diện đẹp mắt và thân thiện với người dùng

4 Phạm vi nghiên cứu Đối với phạm vi nghiên cứu, nhóm quyết định nghiên cứu đề tài để phát triển trang web với một số tác vụ cơ bản của website bán hàng như là: xem danh sách và chi tiết các sản phẩm, tìm kiếm và lọc sản phẩm, thêm sản phẩm vào giỏ hàng, quản lý giỏ hàng, đặt hàng và thanh toán, …

- Thiết kế cơ sở dữ liệu

- Xây dựng Back – End Phạm Văn Thắng - Vẽ Diagram

- Xây dựng Front – End Nguyễn Đức Mạnh - Vẽ Diagram

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

ReacJS là một thư viện JavaScript được ra mắt vào năm 2013 ReacJS được phát triển bởi Facebook và nó được sử dụng để phát triển ứng dụng web và các ứng dụng trên nền tảng di động [1] Điểm mạnh của ReacJS là cho phép lập trình viên viết HTML trực tiếp lên JavaScript thông qua cú pháp JSX Vậy nên lập trình viên có thể lập trình và kiểm tra kết quả thông qua việc đưa đoạn HTML vào JavaScript ReacJS cho phép người lập trình viên tạo ra các Component và có thể lồng nhiều Component vào nhau thông qua lệnh return của phương thức render Điều này có thể giúp chúng ta tổ chức code trở nên dễ dàng hơn và chúng ta có thể tái sử dụng code giảm thiểu thời gian code không cần thiết [1]

ReacJS cho phép việc thực hiện viết các đoạn code Javacript trở nên đễ dàng hơn nhờ sử dụng một cú pháp đặc biệt đó là JSX Người dùng có thể thực hiện nhúng các đoạn HTML và JavaScript thông qua JSX [1]

ReacJS cho phép phá vỡ những cấu trúc, cấu tạo UI phức tạp thành những Component độc lập và có thể tái sử dụng chúng ở nhiều nơi [1]

ReacJS hỗ trợ công cụ giúp việc debug code trở nên đơn giản, dễ dàng hơn

ASP.NET Core là một framework mã nguồn mở được phát triển bởi Microsoft cho phát triển ứng dụng web Nó là phiên bản tiếp theo của ASP.NET Framework và được thiết kế để chạy trên nền tảng NET Core ASP.NET Core cung cấp một nền tảng linh hoạt và hiệu quả cho việc xây dựng các ứng dụng web hiện đại và tương thích với nhiều hệ điều hành.

ASP.NET Core hỗ trợ phát triển và triển khai trên nhiều nền tảng, bao gồm Windows, macOS và Linux Điều này cho phép xây dựng ứng dụng web đa nền tảng mà không bị ràng buộc bởi hệ điều hành.

ASP.NET Core được tối ưu hóa để đạt hiệu suất tốt, đáp ứng tải lớn và có thời gian phản hồi nhanh Nó sử dụng mô hình xử lý không đồng bộ và sử dụng tài nguyên hiệu quả, giúp tăng cường khả năng mở rộng và đáp ứng nhanh chóng. ASP.NET Core cho phép lựa chọn các thành phần cần thiết cho ứng dụng thông qua mô hình module Bạn chỉ cần chọn những thành phần cần sử dụng, giúp giảm kích thước ứng dụng và tối ưu hóa việc sử dụng tài nguyên.

Nhược điểm

 Chưa hỗ trợ trên nền tảng di động.

 Chưa hỗ trợ chức năng gợi ý sản phẩm.

 Mở rộng thêm chức năng: Xem video về sản phẩm có âm thanh.

 Phát triển trên thêm nền tảng mobile, đảm bảo đồng bộ giữ các nền tảng.

 Hỗ trợ chức năng gợi ý sản phẩm.

Định dạng
Số trang	103
Dung lượng	21,03 MB