Thiết kế và xây dựng website bán sách trực tuyến

PHẦN MỞ ĐẦU

TỔNG QUAN ĐỀ TÀI

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

Hiện nay, việc tích hợp nền tảng website vào các ứng dụng ecommerce để quản lý sản phẩm đang trở nên phổ biến Điều này mang lại cho người dùng giao diện rộng rãi hơn cùng với tính năng bảo mật nâng cao nhờ vào các nền tảng và phần mềm chuyên dụng.

Hiện nay, nhu cầu mua sắm trực tuyến đang gia tăng mạnh mẽ, khi chỉ cần một chiếc điện thoại kết nối mạng, người tiêu dùng có thể thoải mái mua sắm chỉ với một cú nhấp chuột Do đó, các sàn thương mại điện tử trở thành một phần thiết yếu trong cuộc sống hiện đại.

3 Ý nghĩa khoa học và thực tiễn

Hệ thống quản lý sản phẩm, doanh thu và đơn hàng giúp các nhà bán hàng theo dõi hoạt động hiệu quả, từ đó hiểu rõ hơn tâm lý khách hàng Điều này cho phép họ cung cấp những sản phẩm thiết thực và thu hút sự chú ý của người tiêu dùng.

Xây dựng ứng dụng bán sách tích hợp với website quản trị giúp người dùng dễ dàng quản lý sản phẩm và đơn đặt hàng Ứng dụng này cung cấp thống kê chi tiết, mang lại trải nghiệm tốt nhất cho cả nhà bán hàng và người dùng.

Nghiên cứu và phát triển ứng dụng bán sách trên nền tảng website kết hợp với trang quản trị, nhằm tạo ra một sản phẩm có hiệu suất cao và dễ sử dụng cho người dùng.

6 Phạm vi nghiên cứu Đề tài được thực hiện với quy mô 1 ứng dụng bán sách mô phỏng thực tế

6.2 Front-End (Website bán sách)

Trong bài khóa luận này, tôi áp dụng các phương pháp phân tích, mô phỏng và nghiên cứu thực tiễn để làm rõ quy trình đặt hàng, quản lý và thanh toán qua Paypal Mục tiêu là xây dựng một ứng dụng bán sách trực tuyến hiệu quả.

KHẢO SÁT THỰC TRẠNG

Tiki là một trong những trang thương mại điện tử hàng đầu tại Việt Nam, nổi bật với hàng triệu sản phẩm từ các thương hiệu lớn, bao gồm điện tử, thiết bị gia dụng và đặc biệt là sách Ban đầu, Tiki chỉ kinh doanh sách, nhưng sau đó đã mở rộng quy mô với đa dạng mặt hàng và hàng nghìn danh mục sản phẩm Những chương trình đặc biệt như Tiki Now 2h và Tiki Fresship đã góp phần tạo nên sự phát triển mạnh mẽ, giúp Tiki khẳng định vị thế là một kênh thương mại điện tử lớn tại Việt Nam.

Giao diện của Tiki nổi bật với các tấm poster và chương trình Flash Sale, thu hút người dùng khi truy cập vào hệ thống Đặc biệt, giao diện của Tiki còn được thay đổi theo mùa và các sự kiện, mang lại trải nghiệm mới mẻ cho khách hàng.

Tiki cung cấp tính năng thanh toán trực tuyến và ngoại tuyến, giúp người dùng dễ dàng thực hiện giao dịch Người dùng có thể áp dụng các voucher cho đơn hàng của mình, mang lại nhiều ưu đãi hấp dẫn Mặc dù phải xử lý lượng lớn dữ liệu, nhưng Tiki vẫn duy trì tốc độ truyền tải nhanh chóng, đảm bảo trải nghiệm mượt mà cho khách hàng.

Giao diện phức tạp và quá nhiều tính năng của sản phẩm khiến người dùng khó khăn trong việc tìm kiếm thông tin cần thiết Bên cạnh đó, sản phẩm không hoàn toàn đảm bảo tính chính hãng như Tiki đã giới thiệu.

- Giá sản phẩm của Tiki cao hơn so với các kênh thương mại điện tử như:

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

2 Shopee (https://www.shopee.vn/)

- Giao diện: Đa dạng, nhiều màu sắc bắt mắt người dùng Nhiều Poster, hình ảnh giúp cho người dùng dễ nhận biết sản phẩm Tính Responsive của

Shopee hầu như thỏa hết các thiết bị điện tử

Shopee là một nền tảng thương mại điện tử đầy đủ tính năng, cung cấp nhiều chương trình khuyến mãi hấp dẫn để thu hút khách hàng Nền tảng này thường xuyên tổ chức các minigame và các chương trình ưu đãi, đồng thời triển khai nhiều chương trình giảm giá theo khung giờ, theo nhà bán hàng và theo sản phẩm, giúp người tiêu dùng có cơ hội mua sắm tiết kiệm hơn.

Giao diện phong phú của Shopee có thể làm giảm tốc độ tải trang, bên cạnh đó, vẫn tồn tại lỗi responsive, chẳng hạn như trên trang Địa chỉ nhận hàng, form chọn tỉnh thành bị tràn ra ngoài, gây khó khăn cho người dùng Người dùng vãng lai thường cảm thấy phiền phức với nhiều thông báo mới từ Shopee và thường phải tắt thông báo Ngoài ra, một số khách hàng cũng phàn nàn về chất lượng sản phẩm do quy trình kiểm tra hàng hóa của Shopee.

3 Sendo ( https://www.sendo.vn/ )

Giao diện của Sendo được thiết kế đồng nhất và ưa nhìn, với ít hiệu ứng và chuyển động, giúp giảm thiểu sự rối mắt Điều này tạo ra một trải nghiệm thân thiện hơn cho người dùng Việt, làm cho việc sử dụng trở nên dễ dàng và thuận tiện hơn.

Sendo cung cấp đầy đủ các tính năng giống như các trang thương mại điện tử khác, cho phép người dùng dễ dàng thêm sản phẩm vào giỏ hàng và thực hiện đặt hàng chỉ với vài bước đơn giản.

Khóa luận tốt nghiệp 25 | T r a n g hiện

- Hạn chế: Sản phẩm không đa dạng như các trang thương mại điện tử khác:

Shopee và Tiki đang gặp khó khăn trong việc thu hút người dùng do thiếu các sự kiện nổi bật Những tính năng nổi trội của các nền tảng thương mại điện tử khác như Lắc xu của Shopee hay dịch vụ giao hàng trong 2 giờ của Tiki chưa được phát triển đầy đủ.

4 Kết luận sau khi khảo sát

Qua khảo sát và phân tích dữ liệu về quy trình thanh toán online và đặt hàng, chúng ta có cái nhìn tổng quan về mô hình mua bán trên trang thương mại điện tử Tuy nhiên, khi triển khai thực tế, nhiều vấn đề phát sinh, chẳng hạn như việc giao hàng cho đơn hàng nhiều sản phẩm, có thể dẫn đến việc giao nhiều lần thay vì một lần, tùy thuộc vào loại sản phẩm như dễ vỡ, nhẹ, nặng, điện tử, hay hàng sắp có.

CHỨC NĂNG HỆ THỐNG

Chức năng

Phía Người Dùng: (Website bán sách)

+ Đăng nhập, đăng ký, quên mật khẩu, Google Login, đăng ký nhà bán hàng

+ Quản lí tài khoản, Xem thông tin chi tiết, sửa thông tin cá nhân, Thay đổi mật khẩu

Truy cập trang chủ để khám phá các nhà bán hàng, chi tiết sản phẩm và các sản phẩm tương tự Bạn có thể dễ dàng lọc sản phẩm theo danh mục, nhà bán hàng, tác giả và giá cả để tìm kiếm những món hàng phù hợp nhất.

+ Tìm kiếm theo tên sản phẩm, danh mục sản phẩm, tác giả, nhà bán hàng

+ Xem giỏ hàng, thêm sản phẩm vào giò hàng, xóa sản phẩm khỏi giỏ hàng, công số lượng mua

+ Trang chi tiết thanh toán đơn hàng

+ Thanh toán: Thanh toán khi nhận hàng, thanh toán bằng Paypal

+ Xem thông tin nhận hàng, thêm thông tin nhận hàng, chỉnh sửa thông tin nhận hàng, xóa thông tin nhận hàng, chọn thông tin nhận hàng mặc định

+ Xem danh sách đơn hàng, đơn hàng chờ xét duyệt, đơn hàng đã được xét duyệt, đơn đang giao, đơn hàng đã hoàn tất, đơn hàng đã hủy

+ Chức năng đánh giá sản phẩm sau khi mua hàng

+ Quản lý danh mục sản phẩm: thêm, sửa danh mục

+ Quản lý tài khoản người dùng: chặn người dùng

Phía Nhà Bán Hàng: (Admin Website)

+ Đăng nhập, quên mật khẩu, google login

+ Quản lý sản phẩm: thêm sửa xóa sản phẩm, tìm kiếm sản phẩm theo tên, danh mục sản phẩm

+ Quản lý đơn hàng: xử lý đơn hàng, hủy đơn hàng

+ Thống kê đơn hàng đã hoàn thành, doanh thu

Phía Người Giao Hàng: (Admin Website)

+ Quản lý đơn hàng: xử lý đơn hàng, hủy đơn hàng, hủy đơn hàng khi bị khách hàng không nhận hàng.

Các chức năng của hệ thống

Bảng 2.1: Đặc tả các trang được thiết kế trên website bán sách

STT TÊN CHỨC NĂNG MÔ TẢ

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

2 Đăng ký Người dùng đăng ký tài khoản

3 Đăng ký nhà bán hàng Người dùng đăng ký trở thành nhà bán hàng của website

4 Quên mật khẩu Người dùng lấy lại mật khẩu

5 Google Login Người dùng đăng nhập bằng Google

6 Quản lí tài khoản Người dùng quản lí tài khoản

7 Xem thông tin chi tiết Người dùng xem thông tin cá nhân

8 Sửa thông tin cá nhân Người dùng sửa thông tin cá nhân

9 Thay đổi mật khẩu Người dùng thay đổi mật khẩu

10 Xem trang chủ Người dùng xem trang chủ

11 Tìm kiếm Người dùng tìm kiếm

12 Tìm kiếm theo tên sản phẩm

Người dùng tìm kiếm sản phẩm

13 Tìm kiếm theo tên danh mục

Người dùng tìm kiếm danh mục sản phẩm

14 Tìm kiếm theo tên nhà bán hàng

Người dùng tìm kiếm sản phẩm theo tên nhà bán hàng

15 Tìm kiếm theo tên tác giả Người dùng tìm kiếm sản phẩm theo tên tác giả

Bảng 2.2: Đặc tả các trang được thiết kế trên Admin Website

16 Xem giỏ hàng Người dùng xem giỏ hàng

17 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

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

Người dùng xóa sản phẩm khỏi giỏ hàng

19 Xem thông tin nhận hàng Người dùng xem thông tin nhận hàng

20 Thêm thông tin nhận hàng Người dùng thêm thông tin nhận hàng

21 Chình sửa thông tin nhận hàng

Người dùng chỉnh sửa thông tin nhận hàng

22 Xóa thông tin nhận hàng Người dùng xóa thông tin nhận hàng

23 Chọn thông tin nhận hàng mặc định

Người dùng chọn thông tin nhận hàng mặc định

24 Xem danh sách đơn hàng Người dùng xem danh sách đơn hàng

25 Xem danh sách đơn hàng chờ xét duyệt

Người dùng xem danh sách đơn hàng chờ xét duyệt

26 Xem danh sách đơn hàng đã xét duyệt

Người dùng xem danh sách đơn hàng đã xét duyệt

27 Xem danh sách đơn hàng đang giao

Người dùng xem danh sách đơn hàng đang giao

28 Xem danh sách đã hoàn tất Người dùng xem danh sách đã hoàn tất

29 Xem danh sách đơn hàng đã hủy

Người dùng xem danh sách đơn hàng đã hủy

30 Đánh giá sản phẩm Người dùng đánh giá sản phẩm sau khi mua hàng

STT TÊN CHỨC NĂNG MÔ TẢ

1 Xem danh sách sản phẩm

Nhà bán hàng xem danh sách sản phẩm của họ

2 Đăng nhập Actor đăng nhập vào hệ thống Website

3 Đăng xuất Actor đăng xuất tài khoản khỏi hệ thống Website

4 Đăng ký seller Người dùng tạo tài khoản thông qua mã token được tạo ra khi đăng ký seller trên ứng dụng bán sách

5 Thêm sản phẩm Nhà bán hàng có thể thêm sản phẩm trực tiếp trên giao diện website

6 Xóa sản phẩm Nhà bán hàng có thể xóa những sản phẩm chưa được đặt hàng trực tiếp trên giao diện xem tất cả sản phẩm

7 Sửa sản phẩm Nhà bán hàng có thể sửa sản phẩm chi tiết và sửa nhanh sản phẩm trực tiếp trên giao diện xem tất cả sản phẩm

8 Xem danh sách đơn hàng

Nhà bán hàng và người giao hàng có thể xem danh sách đơn hàng của họ

9 Cập nhật trạng thái đơn hàng

Nhà bán hàng và người giao hàng có thể cập nhật tình trạng đơn hàng (ordered, packed, shipped, deliveried)

10 Hủy đơn hàng Nhà bán hàng và người giao hàng có thể hủy đơn hàng, nếu nhận thấy những người đặt hàng không đáng tin cậy

12 Bom hàng Người giao hàng cập nhật trạng thái Bom hàng khi khách hàng không nhận hàng khi sản phẩm đã được giao đến người dùng

11 Quản lý tài khoản Admin có thể quản lý các tài khoản có trong hệ thống,

Chặn người dùng và ép người dùng đăng nhập lại khi phát hiện người dùng có các hoạt động đáng nghi

12 Thống kê đơn hàng đã thành công

Nhà bán hàng có thể xem các đơn hàng thành công, và tổng doanh thu

Vai trò người dùng

3.1 Đối với khách hàng (Website bán sách)

- Khách hàng có thể xem các sản phẩm, thông tin chi tiết của những cuốn sách

- Khách hàng có thể đăng ký tài khoản để trở thành thành viên của hệ thống để có thể mua sách và thao tác thanh toán

- Khách hàng có thể đăng nhập và đăng xuất tài khoản của mình

- Khách hàng dễ dàng xem thông tin các cuốn sách mình yêu thích, lựa chọn các cuốn sách phù hợp

- Lịch sử thanh toán được ghi lại trên hệ thống để đối soát

- Khách hàng có thể đánh giá sản phẩm khi mua hàng thành công

- Khách hàng có thể theo dõi tình trạng đơn hàng

- Khách hàng có thể quản lí thông tin cá nhân, chỉnh sửa thông tin, thay đổi ảnh đại diện

- Khác hàng có thể cập nhật thông tin nhận hàng, xóa thông tin nhận hàng, lưu thông tin nhận hàng mặc định

- Khách hàng có thể xem chi tiết đơn hàng thực hiện thanh toán

- Xem được các lý do đơn hàng khi bị hủy

3.2 Đối với quản trị viên (Admin Website)

- Quản lý và khóa tài khoản của các user đang có trong hệ thống

- Quản lý danh mục sản phẩm: thêm, sửa

- Ép tài khoản đăng xuất khi thấy tài khoản khả nghi

- Quản lý sản phẩm: thêm, sửa, xóa sản phẩm, tìm kiếm theo tên sản phẩm và danh mục sản phẩm của chính seller đó

- Quản lý đơn hàng: cập nhật tình trạng đơn hàng, hủy đơn hàng của chính nhà bán hàng đó

- Xem danh sách các đơn hàng hoàn tất, xem tổng doanh thu

Quản lý đơn hàng hiệu quả bao gồm việc cập nhật tình trạng đơn hàng, hủy đơn hàng của chính mình và theo dõi trạng thái bom hàng khi khách hàng không nhận hàng từ người vận chuyển.

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

Use-case chung

Hình 3.1: Lược đồ Use Case

Đặc tả chi tiết từng Use case App bán sách

Bảng 3.1: Đặc tả Use case Đăng nhập

Pre-Conditions: Người dùng đã có tài khoản trong hệ thống

Post-Conditions: Đăng nhập thành công: Người dùng được xác thực, vào trang chủ và nội dung trang chủ được trình bày

(1) Người dùng truy cập vào ứng dụng

(2) Người dùng chọn trang đăng nhập

(3) Ứng dụng hiển thị trang đăng nhập

(4) Người dùng điền tên tài khoản, mật khẩu [*]

(5) Người dùng nhấn “Đăng nhập”

(6) Ứng dụng kiểm tra email và password đã hợp lệ chưa

(6b) Nếu chưa, báo lỗi “Tài khoản hoặc mật khẩu không đúng” Quay lại bước 4

(7) Hệ thống xác thực thông tin đăng nhập [**]

(8) Hệ thống xác định vai trò của người dùng

(9) Hệ thống trả về trang chủ của người dùng và mở các phân quyền được phép truy cập của người dùng

[*] Hệ thống có thể chuyển sang trang đăng ký tài khoản và sau khi đăng ký thành công sẽ quay lại bước (3)

[**]Hệ thống xác nhận không thành công, hiển thị thông báo mô tả lý do xác thực sai và quay lại bước (3)

Exception Flow(s): Đăng nhập không thành công: Hiển thị thông báo đăng nhập không thành công

Hình 3.2: Sequence diagram Đăng nhập website bán hàng

Bảng 3.2: Đặc tả Use case Đăng ký

Short Description: Người dùng tạo tài khoản để đăng nhập vào ứng dụng và sử dụng các phân quyền của user

Post-Conditions: Người dùng tạo tài khoản thành công

Tài khoản đăng ký không thành công sẽ nhận thông báo lỗi, đăng ký lại

(2) Người dùng vào trang tạo tài khoản

(3) Người dùng điền email, họ, tên, mật khẩu, nhập lại mật khẩu và xác nhận tạo tài khoản

(4) Hệ thống kiểm tra email đã tồn tại trên cơ sở dữ liệu chưa

(4a) Nếu email đã tồn tại trên cơ sở dữ liệu thì báo lỗi Và quay lại lại bước

(5) Link kích hoạt tài khoản được hệ thống gửi đến email Người dùng nhập click vào đường dẫn để thực hiện kích hoạt tài khoản

Exception Flow(s): Hệ thống xác nhận đăng ký không thành công vì email hoặc tên tài khoản đã tồn tại, hiển thị thông báo và đăng kí lại

Hình 3.3: Sequence diagram Đăng ký

Bảng 3.3: Đặc tả Use case Xem trang chủ

Use Case Xem trang chủ

Short Description: Người dùng xem những nội dung trên trang chủ

Post-Conditions: Hiển thị trang chủ

(2) Hệ thống trả về dữ liệu để hiện thị

Exception Flow(s): Người dùng không sử dụng kết nối trực tuyến, hệ thống báo lỗi

Hình 3.4: Sequence diagram Xem trang chủ

Bảng 3.4: Đặc tả Use case Quên mật khẩu

Use Case Quên mật khẩu

Người dùng quên mật khẩu và muốn lấy lại mật khẩu

Post-Conditions: Người dùng đổi thành công mật khẩu

(1) Người dùng vào giao diện login (*)

(2) Người dùng nhấn vào “Forgot Password”, trang “Forgot Password” hiển thị

(3) Người dùng nhập email tài khoản và nhấn “Send”

(4) Hệ thống kiểm tra email có tồn tại trên cơ sở dữ liệu không

(4a) Nếu không tồn tại, hệ thống thông báo “Email not exists” Quay lại bước 3

(4b) Nếu tồn tại, hệ thống sẽ gửi link reset password đến email của người dùng

(5) Người dùng click đường dẫn để được dẫn tới trang reset password

(6) Người dùng nhập “Password” và “Confirm Password” sau đó bấm

“Reset Password” để thực hiện việc đổi mật khẩu

(7) Hệ thống thực hiện việc xác thức token và kiểm tra token đã hết hạn hay chưa

(7a) Nếu toke không hợp lệ và hết hạn, thông báo “Token invalid” Quay lại bước 2

(7b) Nếu thỏa mãn, hệ thống thực hiển đổi mật khẩu và chuyển người dùng về giao diện Login

[*] Người dùng thoát khỏi Usecase, quá trình đổi mật khẩu không thành công

- (7b) Hệ thống báo lỗi không thay đổi được mật khẩu

Hình 3.5: Sequence diagram Quên mật khẩu

Bảng 3.5: Đặc tả Google Login

Short Description: Người dùng truy cập giao diện đăng nhập

Pre-Conditions: Người dùng có tài khoản google

Post-Conditions: Đăng nhập thành công: Người dùng được xác thực, được chuyển đến giao diện trang chủ theo đúng phân quyền của người dùng

(1) Người dùng truy cập vào trang đăng nhập của Admin website

(2) Người dùng chọn “Continue with Google Login”

(3) Website chuyển hướng người dùng đến giao diện đăng nhập của google

(4) Người dùng nhập thông tin đăng nhập

(5) Đăng nhập thành công, người dùng được chuyển đến giao diện trang chủ

Exception Flow(s): Đăng nhập không thành công: Người dùng không được chuyển về giao diện đăng nhập

2.6 Usecase Quản lí tài khoản

Bảng 3.6: Quản lí tài khoản

Use Case Quản lí tài khoản

Short Description: Hiển thị thông tin cá nhân của người dùng

Pre-Conditions: Người dùng đã đăng nhập thành công

Post-Conditions: Hiển thị thông tin cá nhân người dùng

(1) Người dùng vào ứng dụng

(2) Người dùng vào trang thông tin cá nhân tài khoản [*]

(3) Trang cá nhân hiển thị

2.7 Usecase Xem thông tin chi tiết

Bảng 3.7: Đặc tả Use case Xem thông tin chi tiết

Use Case Xem thông tin chi tiết

Short Description: Xem thông tin chi tiết của người dùng

Post-Conditions: Hiển thị thông tin chi tiết cá nhân người dùng

(4) Người dùng nhấn vào ảnh đại diện

(5) Trang thông tin người dùng hiển thị

[*] Người dùng thoát ra khỏi trang cập nhật không tiếp tục cập nhật thông tin nữa

Khi người dùng nhập thông tin không phù hợp với quy tắc đồng bộ dữ liệu, hệ thống sẽ thông báo lý do và yêu cầu người dùng nhập lại thông tin chính xác.

Hình 3.7: Sequence diagram Xem thông tin chi tiết

2.8 Usecase Sửa thông tin cá nhân

Bảng 3.8: Đặc tả Use case Sửa đổi thông tin cá nhân

Use Case Sửa thông tin cá nhân

Short Description: Sửa thông tin cá nhân của người dùng

Post-Conditions: Thông tin cá nhân thay đổi

(4) Người dùng nhấn vào ảnh đại diện

(5) Trang thông tin người dùng hiển thị

(6) Người dùng chỉnh sửa thông tin

(7) Kiểm tra thông tin người dùng chỉnh sửa có hợp lệ không

(7b) Nếu không, quay về bước 6

(8) Người dùng nhấn “Lưu thay đổi”

(9) Thông tin được gửi đến hệ thống, ảnh đại diện gửi đến server lưu trữ tệp tin Kiểm tra công việc thành công không

(9a) Nếu thành công, quay về cá nhân

(9b) Nếu thất bại, quay về trang cá nhân

[*] Người dùng thoát ra khỏi trang cập nhật không tiếp tục cập nhật thông tin nữa

Hình 3.8: Sequence diagram Sửa thông tin cá nhân

2.9 Usecase Thay đổi mật khẩu

Bảng 3.9: Đặc tả Use case Thay đổi mật khẩu

Use Case Thay đổi mật khẩu

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

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

Post-Conditions: Người dùng thay đổi mật khẩu thành công

(2) Người dùng nhấn vào trang cá nhân

(4) Người dùng nhấn vào “Đổi mật khẩu”

(5) Trang đổi mật khẩu hiển thị

(6) Người dùng nhập Mật khẩu cũ, mật khẩu mới, nhập lại mật khẩu mới

(7) Ứng dụng kiểm tra mật khẩu đã hợp lệ chưa,

(7b) Nếu không, hiển thị lỗi, quay lại bước (6) [*]

(8) Gửi thông tin đến hệ thống để thay đổi mật khẩu Chờ kết quả

(8a) Nếu thành công, thông báo đổi mật khẩu thành công

(8b) Nếu thất bại, thông báo “Mật khẩu cũ không đúng” Quay lại bước (6)

(9) Quay về trang cá nhân

Hình 3.9: Sequence diagram Thay đổi mật khẩu

Bảng 3.10: Đặc tả Use case Tìm kiếm

Post-Conditions: Hiển thị các nội dung phù hợp với nội dung người dùng tìm kiếm

(2) Người dùng nhấn vào thanh tìm kiếm

(3) Người dùng nhập nội dung vào thanh tìm kiếm

(4) Hệ thống trả về nội dung phù hợp với nội dung người dùng nhập

(5) Người dùng nhấn vào một trong những nội dung hoăc người dùng bấm

“Tiếp tục” thì chuyển đến trang chi tiết tìm kiếm

Hình 3.10: Sequence diagram Tìm kiếm

2.11 Usecase Tìm kiếm theo tên sản phẩm

Bảng 3.11: Đặc tả Use case Tìm kiếm theo tên sản phẩm

Use Case Tìm kiếm theo tên sản phẩm

Hình 3.11: Sequence diagram Tìm kiếm theo tên sản phẩm

2.12 Usecase Tìm kiếm theo tên danh mục

Bảng 3.12: Đặc tả Use case Tìm kiếm theo tên sản phẩm

Use Case Tìm kiếm theo tên sản phẩm

Hình 3.12: Sequence diagram Tìm kiếm theo tên danh mục

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

Bảng 3.13: Đặc tả 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

Short Description: Thêm sản phẩm vào giỏ hàng

Pre-Conditions: Người dùng đã đăng nhập với quyền User

Post-Conditions: Sản phẩm được thêm vào giỏ hàng hàng thành công

(1) Người dùng đang ở trang sản phẩm

(2) Người dùng nhấn thêm vào giỏ hàng

(3) Hệ thống ghi nhận thêm sản phẩm vào giỏ hàng của người dùng Kiểm tra kết quả

(3a) Nếu thành công, thông báo thành công

(3b) Nếu thất bại, thông báo thất bại

Hình 3.13: Sequence diagram Thêm sản phẩm vào giỏ hàng

Bảng 3.14: Đặc tả Use case Xem giỏ hàng

Use Case Xem giỏ hàng

Short Description: Xem các sản phẩm trong giỏ hàng

Pre-Conditions: Người dùng đã đăng nhập

Post-Conditions: Hiển thị giỏ hàng của người dùng

(1) Người dùng đã vào ứng dụng

(2) Người dùng nhấn vào biểu tượng giỏ hàng

(3) Chuyển người dùng đến trang giỏ hàng [*]

(4) Hệ thống lấy dữ liệu giỏ hàng

(5) Hiển thị nội dung trang giỏ hàng

Alternate Flow(s): [*] Người dùng quay về, nội dung trang giỏ hàng chưa được hiển thị

Hình 3.14: Sequence diagram Xem giỏ hàng

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

Bảng 3.15: Đặc tả Use case Xóa sản phẩm khỏi giỏ hàng

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

Short Description: Xóa sản phẩm khỏi giỏ hàng

Post-Conditions: Sản phẩm trong giỏ hàng của người dùng được xóa

(2) Chuyển người dùng đến trang giỏ hàng

(4) Hiển thị nội dung trang giỏ hàng [*]

(5) Vuốt sản phẩm muốn xóa sang phải, nhấn vào “Xóa”

(6) Hệ thống xóa sản phẩm khỏi giỏ hàng

Alternate Flow(s): [*] Người dùng quay về, sản phẩm trong giỏ hàng chưa được xóa

Hình 3.15: Sequence diagram Xóa sản phẩm khỏi giỏ hàng

Bảng 3.16: Đặc tả Use case Mua sản phẩm

Use Case Mua sản phẩm

Khi tạo đơn hàng từ các sản phẩm đã chọn, người dùng sẽ lựa chọn các thông tin cần thiết do hệ thống cung cấp, bao gồm địa chỉ nhận hàng, số điện thoại và phương thức thanh toán.

Post-Conditions: Người dùng chuyển đến trang mua sản phẩm với

Khóa luận tốt nghiệp 52 | T r a n g những sản phẩm người dùng đã chọn

(5) Người dùng nhấn chọn những sản phẩm muốn tạo đơn hàng

(7) Kiểm tra người dùng đã chọn ít nhất một sản phẩm chưa

(7b) Nếu không, thông báo “Người dùng chưa chọn sản phẩm) Quay về bước (5)

(8) Trang tạo đơn hàng hiển thị [**]

Alternate Flow(s): [*] [**] Người dùng thoát ra khỏi Usecase, trang tạo đơn hàng không hiển thị

Hình 3.16: Sequence diagram Mua sản phẩm

Bảng 3.17: Đặc tả Use case Thanh toán

Short Description: Lựa chọn phương thức thanh toán đơn hàng

Pre-Conditions: Người dùng đã đăng nhập, người dùng đang ở trang tạo đơn hàng

Post-Conditions: Đơn hàng được đặt thành công

(5) Người dùng nhấn chọn những sản phẩm muốn tạo đơn hàng

(7) Kiểm tra người dùng đã chọn ít nhất một sản phẩm chưa

(7b) Nếu không, thông báo “Người dùng chưa chọn sản phẩm” Quay về bước (5)

(8) Người dùng điển đầy đủ các thông tin mà ứng dụng yêu cầu “địa chỉ nhận hàng, phương thức thanh toán”

(9) Người dùng nhấn “Đặt hàng”

(10)Ứng dụng kiếm tra người dùng đã nhập đầy đủ thông tin chưa

(10b) Nếu không, thông báo người dùng nhập thiếu Quay lại bước (8)

(11) Kiểm tra người dùng chọn thanh toán khi nhận hàng đúng không?

(11a) Nếu có, hệ thống ghi nhận tạo đơn đặt hàng

(11b) Nếu không, hệ thống tạo đơn đặt hàng để thanh toán bằng paypal

(11b2) Chuyển đến trang web Paypal mà hệ thống gửi đến

(11b3) Người dùng thanh toán hóa đơn trên trang web Paypal[*]

(11b4) Người dùng thanh toán xong, quay về lại ứng dụng

(11b5) Hệ thống kiểm tra hóa đơn đã được thanh toán thành công chưa

(11b5a) Nếu có, thông báo “Thanh toán Paypal thành công” Chuyển đến trang Tạo đơn hàng thành công Kết thúc Usecase

(11b5b) Nếu không, báo lỗi “Thanh toán Paypal chưa thành công”

(12)Hệ thống kiểm tra đơn hàng đã tạo đơn hàng thành công chưa

(12a) Nếu có, thông báo tạo đơn thành công Quay về trang Tạo đơn hàng thành công

(12b) Nếu không, thông báo lỗi hệ thống

Alternate Flow(s): [*] Người dùng quay về khi chưa thanh toán, ứng dụng báo đơn hàng thanh toán không thành công

2.18 Usecase Xem thông tin nhận hàng

Bảng 3.18: Đặc tả Use case Xem thông tin nhận hàng

Use Case Xem thông tin nhận hàng

Short Description: Xem thông tin nhận hàng bao gồm địa chỉ, số điện thoại người nhận

Post-Conditions: Trang thông tin nhận hàng hiển thị

(1) Người dùng đã mở ứng dụng

(2) Người dùng nhấn trang cá nhận

(4) Người dùng nhấn vào trang địa chỉ

(5) Trang địa chỉ hiện thị

(6) Hệ thống lấy dữ liệu từ cơ sở dữ liệu, hiển thị địa chỉ lên màn hình

Hình 3.17: Sequence diagram Xem thông tin nhận hàng

2.19 Usecase thêm thông tin nhận hàng

Bảng 3.19: Đặc tả Use case Thêm thông tin nhận hàng

Use Case Thêm thông tin nhận hàng

Short Description: Người dùng thêm thông tin nhận hàng của mình

Post-Conditions: Hệ thống thêm thành công địa chỉ mới của người dùng

(1) Người dùng đang ở trang địa chỉ

(2) Người dùng nhấn vào “Thêm địa chỉ”

(3) Ứng dụng kiểm tra người dùng lưu ít hơn 3 địa chỉ không

(3b) Nếu không, thông báo người dùng “Một tài khoản chỉ lưu trữ được tối đa 3 địa chỉ”

(4) Chuyển đến trang Thêm địa chỉ

(5) Người dùng nhập đủ và hợp lệ các thông tin [*]

(6) Kiểm tra người nhập đủ và hợp lệ các thông tin chưa

(6a) Nếu có, nút “Thêm địa chỉ” hiện sáng Tiếp tục

(6b) Nếu không, nút “Thêm địa chỉ” hiện tối đi Quay về bước (5)

(7) Người dùng nhấn vào nút “Thêm địa chỉ”

(8) Hệ thống lưu địa chỉ người dùng vừa mới thêm

(9) Chuyển đến trang Xem thông tin nhận hàng

(10) Hệ thống lấy dữ liệu mới của các địa chỉ nhận hàng của người dùng

(1) Hiển thị các địa chỉ nhận hàng của người dùng, bao gồm địa chỉ người dùng mới thêm

Alternate Flow(s): [*] Người dùng quay về, địa chỉ mới không được thêm vào

Hình 3.18: Sequence diagram Thêm thông tin nhận hàng

2.20 Usecase Chỉnh sửa thông tin nhận hàng

Bảng 3.20: Đặc tả Use case Chỉnh sửa thông tin nhận hàng

Use Case Chỉnh sửa thông tin nhận hàng

Short Description: Người dùng chỉnh sửa thông tin nhận hàng của mình

Post-Conditions: Hệ thống chỉnh sửa thành công địa chỉ mới của người dùng

(1) Người dùng đang ở trang thanh toán

(2) Người dùng nhấn vào “icon địa chỉ”

(3) Ứng dụng kiểm tra người dùng lưu ít hơn 3 địa chỉ không

(3b) Nếu không, thông báo người dùng “Một tài khoản chỉ lưu trữ được tối đa 3 địa chỉ”

(4) Nhấn “Add address” để thêm địa chỉ mới

(5) Người dùng nhập đủ và hợp lệ các thông tin [*]

(6) Kiểm tra người nhập đủ và hợp lệ các thông tin chưa

(6a) Nếu có, click nút “Save” để thực hiện thêm địa chỉ mới Tiếp tục

(6b) Nếu không, thông báo lỗi đến người dùng Quay về bước (5)

(7) Hiển thị các địa chỉ nhận hàng của người dùng, bao gồm địa chỉ người dùng mới thêm

Alternate Flow(s): [*] Người dùng quay về, địa chỉ mới không được thêm vào

2.21 Usecase Chọn thông tin mặc định

Bảng 3.21: Đặc tả Use case Chọn thông tin mặc định

Use Case Chọn thông tin mặc định

Short Description: Người dùng chỉnh sửa thông tin nhận hàng của mình

Post-Conditions: Hệ thống chỉnh sửa thành công địa chỉ mới của người dùng

(1) Người dùng đang ở trang thanh toán

(2) Người dùng nhấn vào “iCon địa chỉ”

(3) Ứng dụng show danh sách địa chỉ đã được thêm

(3a) Nếu không có địa chỉ nào thực hiện việc thêm địa chỉ mới

(3b) Nếu có địa chỉ, click “set default” để thực hiện chọn địa chỉ mặc định

(4) Ứng dụng sẽ lấy địa chị mặc định vừa chọn, làm địa chỉ nhận hàng mặc định

Alternate Flow(s): [*] Địa chỉ không được tự động chọn ở trang thanh toán

Hình 3.19: Sequence diagram Chọn thông tin mặc định

Bảng 3.22: Đặc tả Use case Xem trang seller

Use Case Xem trang seller

Short Description: Người dùng xem thông tin và các sản phẩm của Seller

Post-Conditions: Hiển thị trang Seller

(1) Người dùng đang ở trang có hiển thị sản phẩm

(2) Người dùng nhấn vào sản phẩm

(3) Chuyển đến trang chi tiết của sản phẩm

(4) Người dùng nhấn vào ảnh đại diện hoặc thông tin của Seller

(6) Hệ thống lấy thông tin của Seller

(7) Hiển thị thông tin của Seller

Alternate Flow(s): [*] Người dùng quay về, địa chỉ không bị thay đổi

Hình 3.20: Sequence diagram Xem trang seller

2.23 Usecase Quản lí đơn hàng

Bảng 3.23: Đặc tả Use case Quản lí đơn hàng

Use Case Quản lý đơn hàng

Short Description: Hiển thị trang Quản lí đơn hàng, giúp người dùng dễ dàng theo dõi đơn hàng

Post-Conditions: Trang quản lí đơn hàng hiển thị

(1) Người đã mở ứng dụng

(3) Ứng dụng chuyển đến trang cá nhân

(4) Người dùng nhấn vào trang Đơn hàng

(5) Người dùng chuyển đến trang Đơn hàng

(6) Hệ thống lấy dữ liệu các đơn hàng

(7) Hiển thị nội dung các đơn hàng

2.24 Usecase Xem danh sách đơn hàng đã đặt

Bảng 0.24: Đặc tả Use case Xem danh sách đơn hàng đã đặt

Use Case Xem danh sách đơn hàng đã đặt

Short Description: Hiển thị trang các đơn hàng đã đặt

Post-Conditions: Hiển thị các đơn hàng đã đặt

(8) Hiển thị các đơn hàng đã đặt

Hình 3.21: Sequence diagram Xem danh sách đơn hàng

2.25 Usecase Xem danh sách đơn hàng đã hủy

Bảng 3.25: Đặc tả Use case Xem danh sách đơn hàng đã hủy

Use Case Xem danh sách đơn hàng đã hủy

Short Description: Hiển thị trang các đơn hàng đã hủy

Post-Conditions: Hiển thị các đơn hàng đã hủy

(8) Người dùng nhấn vào “Đã hủy”

(9) Hiển thị các đơn hàng đã hủy

Hình 3.22: Sequence diagram Xem danh sách đơn hàng bị hủy

2.26 Usecase Xem đơn hàng đang giao

Bảng 3.26: Đặc tả Use case Xem danh sách đơn hàng đang giao

Use Case Xem danh sách đơn hàng đang giao

Short Description: Hiển thị trang các đơn hàng đang giao

Post-Conditions: Hiển thị các đơn hàng đang giao

(8) Người dùng nhấn vào “Đang giao”

(9) Hiển thị các đơn hàng đang giao

2.27 Usecase Xem đơn hàng hoàn tất

Bảng 3.27: Đặc tả Use case Xem danh sách đơn hàng hoàn tất

Use Case Xem danh sách đơn hàng hoàn tất

Short Description: Hiển thị trang các đơn hàng hoàn tất

Post-Conditions: Hiển thị các đơn hàng hoàn tất

(8) Người dùng nhấn vào “Đã giao”

(9) Hiển thị các đơn hàng đã giao

2.28 Usecase Xem đơn hàng chờ xét duyệt

Bảng 3.28: Đặc tả Use case Xem danh sách đơn hàng chờ xét duyệt

Use Case Xem danh sách đơn hàng chờ xét duyệt

Short Description: Hiển thị các đơn hàng chờ xét duyệt

Post-Conditions: Hiển thị các đơn hàng chờ xét duyệt

(8) Người dùng nhấn vào “Chờ xác nhận”

(9) Hiển thị các đơn hàng chờ xác nhận

2.29 Usecase Xem đơn hàng đã xác nhận

Bảng 3.29: Đặc tả Use case Xem danh sách đơn hàng đã xác nhận

Use Case Xem danh sách đơn hàng đã xác nhận

Short Description: Hiển thị các đơn hàng chờ xét duyệt

Post-Conditions: Hiển thị các đơn hàng chờ xét duyệt

(8) Người dùng nhấn vào “Chờ xác nhận”

(9) Hiển thị các đơn hàng chờ xác nhận

Đặc tả chi tiết từng Use case Admin Website

Bảng 3.30: Đặc tả Use case Đăng nhập

Short Description: Người dùng đăng nhập vào Admin Website

Post-Conditions: Đăng nhập thành công: Người dùng được xác thực, vào trang chủ và nội dung trang chủ được trình bày

(1) Người dùng truy cập vào Admin Website

(2) Người dùng chọn trang đăng nhập

(3) Website hiển thị trang web đăng nhập

(4) Người dùng điền tên tài khoản, mật khẩu theo đúng format có ít nhất 8 ký tự, có ít nhất một ký tự đặc biệt[*]

(5) Hệ thống xác thực thông tin đăng nhập [**]

(6) Hệ thống xác định vai trò của người dùng

(7) Hệ thống trả về trang chủ của người dùng và mở các phân quyền được phép truy cập của người dùng

[*] Hệ thống có thể chuyển sang trang đăng ký tài khoản và sau khi đăng ký thành công sẽ quay lại bước (3)

[**]Hệ thống xác nhận không thành công, hiển thị thông báo mô tả lý do xác thực sai và quay lại bước (3)

Exception Flow(s): Đăng nhập không thành công: Người dùng không thể truy cập vào giao diện trang quản lý

Hình 3.23: Sequence diagram đăng nhập

Use case Đăng nhập

3.2 Use case quên mật khẩu

Bảng 3.31 Đặc tả Use case Quên mật khẩu

Use Case Quên mật khẩu

Short Description: Người dùng quên mật khẩu cần đổi lại mật khẩu mới để thực hiện đăng nhập

Post-Conditions: Thay đổi mật khẩu thành công, người dùng nhận được thông báo và đăng nhập lại thành công

(1) Người dùng chọn Forgot password trên giao diện đăng nhập

(2) Người dùng được chuyển đến giao diện xác nhận Email để điền tài khoản Email

(3) Hệ thống xác thực Email đã nhập, mã OTP được gửi về Email của người dùng

(4) Người dùng được chuyển đến giao diện Security Code để nhập mã OTP xác thực

(5) Mã OTP chính xác người dùng được chuyển đến trang Reset password để thực hiện việc đổi mật khẩu [*]

(6) Người dùng nhập mật khẩu mới [**]

(7) Thay đổi mật khẩu thành công người dùng được chuyển về trang đăng nhập

Hệ thống sử dụng máy chủ bên ngoài để gửi email theo sự kiện, giúp người dùng không phải chờ đợi cho đến khi email được gửi thành công.

[*] Người dùng không nhận được mã OTP, Mã OTP hết hạn, người dùng có thể yêu cầu gửi lại mã OTP ngay trên giao diện Security Code

[**] Người dùng không nhập đúng định dạng mật khẩu, hệ thống xác thực yêu cầu người dùng nhập lại mật khẩu

Exception Flow(s): Người dùng thoát khỏi giao diện nhập OTP, người dùng thoát khỏi trang reset password

Hình 3.24: Sequence diagram Quên mật khẩu

Bảng 3.32: Đặc tả Use case Đăng ký seller Admin website

Short Description: Người dùng đăng ký tài khoản seller thông qua link được gửi vào hộp thư email của người dùng

Pre-Conditions: Người dùng đã xác nhân đăng ký tài khoản seller ở App bán sách

Post-Conditions: Người dùng đăng ký tài khoản seller thành công, và có thể sử dụng được trang admin website với phân quyền seller

Người dùng cần đăng ký tài khoản seller trên ứng dụng bán sách, sau đó hệ thống sẽ gửi liên kết xác nhận tài khoản qua email của họ.

(2) Người dùng truy cập link đăng ký seller và được chuyển đến giao diện đăng ký seller trên admin website

(3) Người dùng thực hiện điền các thông tin theo đúng format của ứng dụng đã yêu cầu [*]

(4) Người dùng bấm nút đăng ký để thực hiện đăng ks

(5) Đăng ký thành công người dùng được chuyển về giao diện đăng nhập

[*] Người dùng nhập sai định dạng hệ thống yêu cầu người dùng nhập lại

Exception Flow(s): Người dùng thoát khỏi giao diện đăng ký seller, mã token bị hết hạn sau 24h

Hình 3.25: Sequence diagram Đăng ký seller

Bảng 3.33: Đặc tả Use case Đăng xuất

Short Description: Người dùng đăng xuất tài khoản khỏi hệ thống

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

Post-Conditions: Người dùng đăng xuất thành công, giao diện được chuyển về trang login

(1) Người dùng chọn Logout trên header của giao diện web

(2) Người dùng đăng xuất thành công, giao diện được chuyển về trang login [*]

[*] Người dùng không được chuyển về trang login mà được chuyển về trang logout của hệ thống

Hình 3.26: Sequence diagram Đăng xuất

Bảng 3.34: Đặc tả Use case Google login

Short Description: Người dùng đăng nhập vào Admin Website

Pre-Conditions: Người dùng có tài khoản google

Post-Conditions: Đăng nhập thành công: Người dùng được xác thực, được chuyển đến giao diện trang chủ theo đúng phân quyền của người dùng

(1) Người dùng truy cập vào trang đăng nhập của Admin website

(2) Người dùng chọn “Continue with Google Login”

(3) Website chuyển hướng người dùng đến giao diện đăng nhập của google

(4) Người dùng nhập thông tin đăng nhập

(5) Đăng nhập thành công, người dùng được chuyển đến giao diện trang chủ

Exception Flow(s): Đăng nhập không thành công: Người dùng không được chuyển về giao diện đăng nhập

Hình 3.27: Sequence diagram Google login

3.6 Use case Xem danh sách sản phẩm

Bảng 3.35: Đặc tả Use case Xem danh sách sản phẩm

Use Case Xem danh sách sản phẩm

Short Description: Seller có thể xem tất cả các sản phẩm đang đăng bán trên App bán sách

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền seller

Post-Conditions: Người dùng có thể xem tất cả sản phẩm đã và đăng đăng bán trên App bán sách

(1) Người dùng truy cập vào trang quản lý sản phẩm (Products)

Nếu người dùng chưa đăng bán sản phẩm nào, bảng danh sách sản phẩm sẽ hiển thị thông báo "data empty".

Hình 3.28: Sequence diagram Xem danh sách sản phẩm

3.7 Use case Thêm sản phẩm

Bảng 3.36: Đặc tả Use case Thêm sản phẩm

Use Case Thêm sản phẩm

Short Description: Seller thực hiện thêm sản phẩm

Post-Conditions: Người dùng thêm sản phẩm thành công, người dùng được chuyển đến trang quản lý sản phẩm để xem sản phẩm vừa được thêm

(1) Người dùng truy cập vào trang thêm sản phẩm (Add product)

(2) Người dùng thực hiện nhập thông tin sản phẩm theo đúng yêu cầu của hệ thống [*]

Alternate Flow(s): [*] người dùng nhập sai, hệ thống sẽ không cho người dùng thêm sản phẩm

Hình 3.29: Sequence diagram Thêm sản phẩm

3.8 Use case Sửa sản phẩm

Bảng 3.37: Đặc tả Use case Sửa sản phẩm

Use Case Sửa sản phẩm

Short Description: Seller thực hiện sửa chi tiết một sản phẩm

Sản phẩm sẽ được cập nhật chính xác theo các trường mà người dùng đã chỉnh sửa, và hệ thống sẽ tự động chuyển đến trang quản lý sản phẩm để người dùng có thể xem thông tin vừa được cập nhật.

(1) Người dùng truy cập vào trang xem sản phẩm chọn chức năng “Edit” trên sản phẩm muốn sửa

(2) Giao diện chỉnh sửa sản phẩm được hiện lên với các thuộc tính cũ của sản phẩm

(3) Người dùng thực hiên sửa những trường mong muốn

(4) Bấm nút “Save” để thực hiện lưu thông tin chỉnh sửa

Exception Flow(s): người dùng refresh trang trong lúc chỉnh sửa khiến hệ thống không lưu lại được các trường vừa thay đổi

Hình 3.30: Sequence diagram Sửa sản phẩm

3.9 Use case Xóa sản phẩm

Bảng 3.38: Đặc tả Use case Xóa sản phẩm

Use Case Xóa sản phẩm

Short Description: Seller thực hiện xóa sản phẩm trực tiếp trên giao diện quản lý sản phẩm

Post-Conditions: Người dùng xóa sản phẩm thành công, sản phẩm không được hiện ở trang quản lý sản phẩm, hệ thống thông báo xóa sản phẩm thành công

(1) Người dùng truy cập vào trang xem danh sách sản phẩm (Products)

(2) Người dùng chọn chức năng “Delete”, hệ thống xuất hiện giao diện confirm xóa

(3) Người dùng chọn “ok” để thực hiện xóa sản phẩm [*]

(4) Sản phẩm sẽ không được hiển thị trên giao diện xem danh sách sản phẩm

Note: Người dùng chỉ có thể xóa những sản phẩm chưa có người nào đặt hàng, hoặc sản phẩm chưa có bất kỳ lượt mua nào

Khi sản phẩm đã có đơn đặt hàng hoặc đã được bán ra trước đó, hệ thống sẽ không cho phép người dùng xóa sản phẩm Thay vào đó, một thông báo sẽ được hiển thị để thông báo cho người dùng về tình trạng này.

Hình 3.31: Sequence diagram Xóa sản phẩm

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

Bảng 3.39: Đặc tả Use case Xem danh sách đơn hàng

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

Short Description: Seller hoặc shipper xem tất cả các đơn hàng đã được đặt hàng từ những người mua hàng

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền seller hoặc shipper

Post-Conditions: Hệ thống hiển thị đúng các đơn đặt hàng của người dùng

(1) Người dùng truy cập vào trang xem danh sách đơn hàng (Orders)

(2) Hệ thống sẽ hiển thị “data empty” nếu người dùng không có đơn hàng nào

Hình 3.32: Sequence diagram Xem danh sách đơn hàng

3.11 Use case Hủy đơn hàng bởi nhà bán hàng

Bảng 3.40: Đặc tả Use case hủy đơn hàng bởi nhà bán hàng

Use Case Hủy đơn hàng

Short Description: Seller hoặc shipper có thể hủy đơn hàng, khi đơn hàng đang chờ xác nhận từ seller hoặc shipper

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền seller hoặc shipper

Post-Conditions: Đơn hàng hủy thành công hệ thống thông báo cho người dùng

(1) Người dùng truy cập vào trang xem danh sách đơn hàng (Orders)

(2) Chọn chức năng “cancel” để thực hiện hủy đơn hàng [*]

(3) Hệ thống thông báo cho người dùng

Alternate Flow(s): [*] sản phẩm đã được xác nhận lên đơn từ người dùng sẽ không được xóa, hệ thống sẽ xuất hiện cảnh báo cho người dùng

Hình 3.33: Sequence diagram Hủy đơn hàng

3.12 Xem danh sách tài khoản

Bảng 3.41: Đặc tả Use case Xem danh sách tài khoản

Use Case Xem danh sách tài khoản

Short Description: Admin xem danh sách tài khoản đang có trong hệ thống

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền admin

Post-Conditions: Danh sách tài khoản được hiển thị

(1) Người dùng truy cập vào trang xem danh sách tài khoản (Users)

(2) Hệ thống sẽ xuất hiện “data empty” nếu trang web chưa có người dùng nào

Hình 3.34: Sequence diagram Xem danh sách sản phẩm

Bảng 3.42: Đặc tả Use case Chặn tài khoản

Use Case Chặn tài khoản

Short Description: Admin chặn tài khoản người dùng, khi phát hiện tài khoản đáng nghi

Post-Conditions: Tài khoản bị chặn người dùng không thể đăng nhập được nữa, cần liên hệ admin để mở khóa

(1) Người dùng truy cập vào trang xem danh sách tài khoản (Users)

(2) Chọn chức năng “block” trên tài khoản đáng nghi

(3) Hệ thống cập nhật trạng thái cho tài khoản bị chặn

Hình 3.35: Sequence diagram Chặn tài khoản

3.14 Xem danh mục sản phẩm

Bảng 3.43: Đặc tả Use case Chặn tài khoản

Use Case Xem danh mục sản phẩm

Short Description: Admin đến trang quản lý danh mục sản phẩm

Post-Conditions: Admin có thể xem được hết tất cả các danh mục sản phẩm hiện có trên trang web

(1) Người dùng truy cập vào trang xem danh mục sản phẩm (Categories)

3.15 Thêm danh mục sản phẩm

Bảng 3.44: Đặc tả Use case thêm danh mục sản phẩm

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

Post-Conditions: Admin có thể thêm danh mục sản phẩm trưc tiếp trên trang quản lí sản phẩm

(3) Điền danh mục muốn thêm

(4) Bấm nút “save” để lưu danh mục

3.16 Sửa danh mục sản phẩm

Bảng 3.45: Đặc tả Use case sửa danh mục sản phẩm

Use Case Sửa danh mục sản phẩm

Post-Conditions: Admin có thể sửa tên danh mục trực tiếp trên giao diện quản lý danh mục

(2) Bấm nút “Edit” trên danh mục cần sửa đổi

(3) Điền danh mục muốn thêm

(4) Bấm nút “save” để cập nhật danh mục mới

3.17 Hủy đơn hàng bời người giao hàng

Bảng 3.46: Đặc tả Use case hủy đơn hàng bởi người giao hàng

Use Case Hủy đơn hàng bởi người giao hàng

Short Description: Shipper đến trang quản lý đơn hàng (Orders)

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền shipper

Post-Conditions: Shipper có thể hủy đơn hàng vì một số lý do nào đó

(1) Shipper truy cập vào trang xem danh mục đơn hàng

(2) Bấm nút “Cancel” vào đơn hàng cần hủy

(3) Điền lý do hủy đơn hàng

(4) Bấm nút “OK” để thực hiện hủy đơn hàng

Bảng 3.47: Đặc tả Use case bom hàng

Short Description: Shipper đến trang quản lý đơn hàng (Orders)

Pre-Conditions: Người dùng đã đăng nhập vào hệ thống với phân quyền shipper

Post-Conditions: Shipper có thể báo trạng thái bom hàng khi khách hàng không nhận hàng

(1) Shipper truy cập vào trang xem danh mục đơn hàng

(2) Bấm nút “Client Reject” vào đơn hàng cần hủy

(3) Điền lý do hủy đơn hàng

(4) Bấm nút “OK” để thực hiện hủy đơn hàng

Thiết kế giao diện Website bán sách

Hình 3.37: Giao diện đăng nhập

Description Giao diện form đăng nhập

Screen Access Người dùng truy cập vào ứng dụng

Người dùng điền tên email để đăng nhập

Email đúng định dạng Email

Người dùng điền mật khẩu để đăng nhập

Mật khẩu có ít nhất 8 ký tự, bao gồm 1 ký tự chữ, 1 ký tự đặc biệt, 1 ký tự số

Khi người dùng nhập đầy đủ thông tin, bấm “Login” để hoàn tất quá trình đăng nhập

Button Chuyển đến trang quên mật khẩu

Button Để thực hiện đăng nhập bằng tài khoản google

Sign up Button Chuyển đến trang Đăng ký

Action Name Description Success Failure Đăng nhập Bấm “Login” để đăng nhập và bắt đầu sử dụng hệ thống

Người dùng nhập đúng tên và mật khẩu thì sẽ vào được hệ thống

- Khi người dùng chưa nhập đầy đủ thông tin tài khoản thì hệ thống đưa ra thông báo:

“Tài khoản hoặc mật khẩu không hợp lệ” ở bên dưới Textbox tài khoản

- Khi người dùng nhập sai tên đăng nhập hoặc mật khẩu thì hệ thống đưa ra thông báo: “Tài khoản mật khẩu không đúng.” ở bên dưới Textbox mật khẩu

Hình 3.368: Giao diện đăng ký tài khoản user

Description Giao diện form đăng ký

Screen Access Người dùng truy cập ứng dụng

Người dùng điền tên email

Người dùng điền mật khẩu để đăng ký

String “Nhập lại mật khẩu” khớp với “Mật khẩu”

Name String Người dùng điền tên

Gender Select Người dùng chọn giới tính

Birth Date DatePicker Người dùng chọn ngày thánh năm sinh

I agree with the policy Checkbox Người dùng nhấn vào checkbox để đồng ý với điều khoản

Khi người dùng nhập đầy đủ thông tin, bấm “Sign up” để tiếp tục quá trình đăng ký

Action Name Description Success Failure

Sign Up Bấm “Sign Up” để tiếp tục quá trình Đăng ký tài khoản

- Người dùng nhập email chưa tồn tại (đăng ký) trên hệ thống thì sẽ chuyển đến bước tiếp theo

- Người dùng được chuyển về trang Home để thực hiện Login

- Hệ thống gửi email kích hoạt tài khoản

- Khi người dùng chưa nhập đầy đủ thông tin tài khoản thì hệ thống đưa ra thông báo

- Khi người dùng nhập email đã tồn tại trên hệ thống, ứng dụng sẽ đưa ra thông báo: “Email đã được đăng ký”

Hình 3.39: Trang quên mật khẩu - Nhập email - Bước 1

Screen Trang quên mật khẩu – Nhập Email – Bước 1

Description Người dùng nhập email để hệ thống gửi mã OTP đến email

Người dùng truy cập ứng dụng, người dùng đến trang đăng nhập Người dùng nhấn vào quên mật khẩu

Người dùng nhập email của tài khoản người dùng đã quên mật khẩu Yêu dữ liệu nhập vào đúng định dạng là email

Khi người dùng nhấn nút "Gửi", hệ thống sẽ xác minh xem địa chỉ email có tồn tại trong cơ sở dữ liệu hay không Nếu địa chỉ email hợp lệ, hệ thống sẽ gửi một liên kết để đặt lại mật khẩu đến email đó.

Khóa luận tốt nghiệp 93 | T r a n g đó Nếu không, ứng dụng sẽ báo “Email không tồn tại”

Send Bấm “Send” để tiếp tục quá trình quên mật khẩu

Khi người dùng nhập email đã được đăng ký trên hệ thống, hệ thống sẽ gửi một liên kết để đặt lại mật khẩu đến địa chỉ email mà người dùng đã cung cấp.

- Tiếp theo chuyển đến trang Reset Password để thực hiện đổi mật khẩu

- Thông báo “Email không tồn tại”

Hình 3.40: Trang quên mật khẩu – Reset Password - Bước 2

Screen Trang quên mật khẩu –Reset Password – Bước 3

Description Người dùng đổi mật khẩu

Sau khi người dùng nhập địa chỉ email hợp lệ trên trang Quên mật khẩu, họ sẽ nhận được một liên kết trong email từ hệ thống Khi nhấp vào đường dẫn này, người dùng sẽ được chuyển đến trang Đặt lại Mật khẩu để thực hiện việc đổi mật khẩu mới.

Người dùng điền mật khẩu để đăng nhập

Confirm String “Confirm password” phải trùng với

Khóa luận tốt nghiệp 95 | T r a n g passoword “Password”

Reset Password Bấm “Reset Password” hoàn tất quá trình Quên mật khẩu

- Hệ thống kiểm tra mật khẩu mới có hợp lệ không

Nếu có, hệ thống ghi nhận mật khẩu người dùng được thay đổi

- Quay về giao diện trang chủ

- Hệ thống kiểm tra mật khẩu mới, nếu không hợp lệ Hệ thống sẽ trả lỗi về

- Ứng dụng sẽ hiển thị lỗi

4.4 Trang chủ tìm kiếm gợi ý

Hình 3.41: Chức năng tìm kiếm gợi ý

Description Người dùng muốn tìm kiếm sản phẩm theo nhà bán hàng, danh mục, tên sản phẩm, tác giả

Screen Access Người dùng đang ở trang chủ và truy cập đến thanh tìm kiếm Người dùng nhấn vào thanh tìm kiếm

Search TextField Người dùng nhập nội dung mong muốn tìm kiếm Screen Actions

Sau khi người dùng ngừng nhập liệu, hệ thống sẽ trả về nội dung tìm kiếm liên quang

Hệ thống tìm kiếm những nội dung liên quan đến nội dung người dùng nhập và trả về kết quả

- Ứng dụng không thực hiện

4.5 Trang chủ danh mục sản phẩm

Hình 3.42: Danh mục sản phẩm

Description Người dùng muốn tìm kiếm sản phẩm theo danh mục sản phẩm

Screen Access Người dùng đang ở trang chủ và truy cập đến danh mục sản phẩm

Người dùng hover đến từng mục để truy cập action tương ứng Screen Actions

Header danh mục sản phẩm giúp người dùng tìm kiếm nhanh theo chủng loại sản phẩm và truy cập một số trang nổi bật của website

Khi người dùng hover đến đâu có kết quả tương ứng tới đó, khi người dùng click chuyển người dùng đến các action tương ứng

- Ứng dụng không thực hiện

- Khi click người dùng không được chuyển đến trang tương ứng

4.6 Trang chủ slider sản phẩm bán chạy

Hình 3.45: Slider sản phẩm bán chạy

Screen Trang chủ sản phẩm bán chạy

Description Người dùng được hiển thị những sản phẩm bán chạy nhất của website Screen Access Người dùng đang ở trang chủ

Danh sách sản phẩm bán chạy

Hiển thị danh sách sản phẩm bán chạy nhất hiện tại, mặc định 10 sản phẩm Screen Actions

Website hiển thị 10 sản phẩm bán chạy nhất theo dạng slide show

- Hệ thống hiện thị được sản phẩm

- Người dùng click slide chuyển tiếp các sản phẩm tiếp theo

- Chức năng không thực hiện

- Bấm nút chuyển tiếp slide không hiển thị sản phẩm tiếp theo

Chức năng thên sản phẩm vào giỏ hàng, người dùng chọn loại sản phẩm để thêm vào giỏ hàng

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

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

Add to wishlist Thêm sản phẩm vào danh mục sản phẩm yêu thích

- Sản phẩm được thêm vào danh mục wishlist

- Sản phẩm không được thêm vào wishlist

4.7 Trang chủ sản phẩm mới ra mắt

Hình 3.46: Sản phẩm mới ra mắt

Screen Trang chủ sản phẩm mới ra mắt

Description Người dùng được hiển thị sản phẩm mới ra mắt đến từ các nhà bán hàng

Screen Access Người dùng đang ở trang home

Top 3 sản sản phẩm mới nhất của website

Click tiêu đề sản phẩm

Chuyển đến trang chi tiết của sản phẩm đó

Chuyển đến trang chi tiết sản phẩm

- Không có gì xảy ra

Chuyển đến trang tổng hợp các sản phẩm của nhà bán hàng đó

- Được chuyển đến trang sản phẩm của seller đó

Người dùng được chuyển đến các sản phẩm của tác giả đó

- Người dùng được chuyển đến trang các sản phẩm của tác giả đó

- Người dùng không được chuyển trang

- Các sản phẩm hiển thị khác với tác giả đã được chọn

Screen Tất cả các trang

Phần chân trang của website hiển thị ba nhà bán hàng hàng đầu với số lượng sách bán chạy nhất, đồng thời cung cấp thông tin liên quan đến trang web, các chính sách và quyền sở hữu trí tuệ của nó.

Screen Access Người dùng thấy footer ở mọi trang

Hiển thị top 3 nhà bán hàng có số lượng sách bán nhiều nhất

Click vào nhà bán hàng

Người dùng sẽ được chuyển đến trang sản phẩm của nhà bán hàng đó

Người dùng được chuyển đến trang nhà bán hàng đã chọn

- Sản phẩm hiển thị không phải của nhà bán hàng được chọn

Hình 3.48: Trang quản lý thông tin cá nhân

Description Hiển thị thông tin cơ bản của người dùng và các lựa chọn

Screen Access Người dùng đang ở trang Home Người dùng nhấn vào biểu tưởng thông tin cá nhân, và chọn vào profile

Upload photo TextFile Upload avatar

Date of birth TextField Nhập ngày tháng năm sinh

Gender Radio Chọn giới tính

Email address TextField Hiển thị email

Submit Button Người dùng cập nhật thông tin mới

Clear Button Người dùng trở về giao diện Home

Submit Cập nhật thông tin mới của người dùng

Thông tin được thay đổi theo dữ liệu vừa nhập

- Dữ liệu không được cập nhật

Clear Người dùng được chuyển về trang Home

Người dùng được chuyển về trang Home

4.10 Trang hiển thị các nhà bán hàng

Hình 3.49: Trang hiển thị các nhà bán hàng

Screen Trang hiển thị các nhà bán hàng

Description Trang hiển thị các nhà bán hàng của website

Screen Access Người dùng chọn click vào sellers trên header của trang website

Click vào nhà bán hàng

Người dùng được chuyển đến trang các sản phẩm của nhà bán hàng đó

Hệ thống chuyển đến trang các sản phẩm của nhà bán hàng được chọn

- Sản phẩm hiện sai so với nhà bán hàng được chọn

4.11 Trang hiện thị tất cả các sản phẩm

Hình 3.50: Trang hiển thị tất cả các sản phẩm

Screen Trang hiện thị tất cả sản phẩm

Description Người dùng thấy được các sản phẩm của các nhà bán hàng khác nhau Screen Access Khi dùng click vào best selling trên header website

Người dùng search sản phẩm theo tên và tác giả

Price Pop-up Hiện thị form tìm kiếm sản phẩm theo giá

Sort Select Sắp xếp sản phẩm theo thời gian đăng bán

Show Select Phân trang sản phẩm

Click vào danh mục sản phẩm

Danh sách sản phẩm hiện thị theo danh mục được chọn

Danh sách sản phẩm hiện thị đúng với danh mục được chọn

- Sản phẩm hiện thị sai danh mục

Click vào các nhà bán hàng

Danh sách sản phẩm hiện thị theo các nhà bán hàng được chọn

Danh sách sản phẩm hiện thị đúng với nhà bán hàng được chọn

- Sản phẩm hiện thị sai so với nhà bán hàng được chọn

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

Hình 3.51: Trang chi tiết sản phẩm – 1

Hình 3.52: Mô tả sản phẩm – đánh giá – thông tin nhà bán hàng

Hình 3.53: Sản phẩm tương tự

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

Description Người dùng xem các thông tin chi tiết của sản phẩm

Screen Access Người dùng click vào tiêu đề của sản phẩm để xem thông tin chi tiết về sản phẩm

Add to Basket Thêm sản phẩm vào giỏ hàng

Thêm sản phẩm thành công, có thông báo từ hệ thống, giỏ hàng được công thêm sản phẩm

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

Hình 3.54: Giao diện giỏ hàng – 1

Hình 3.55: Giao diện giỏ hàng – 2

Screen Giao diện giỏ hàng

Description Người dùng quản lí các hành động thêm sửa xóa tăng số lượng mua trực tiếp trên giỏ hàng

Screen Access Người dùng click vào biểu tượng giỏ hàng

CheckBox CheckBox Chọn sản phẩm để tiến hành đặt hàng

Quantity TextField Người dùng tăng giảm số lượng sản phẩm muốn mua

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

Clear your cart Button Người dùng xóa toàn bộ sản phẩm có trong giỏ hàng

Checkout Button Tiến hành đặt hàng

CheckOut Thực hiện thanh toán các đơn hàng được chọn

Chuyển đến trang thanh toán, các sản phẩm được chọn hiện thị đúng sản phẩm, số lượng và giá

- Sản phẩm hiện thị bị sai thông tin, giá

- Người dùng không được chuyển đến trang thanh toán

Hình 3.56: Trang thanh toán – thông tin sản phẩm – 1

Screen Trang thanh toán – thông tin sản phẩm - 1

Description Người dùng thực hiện đặt hàng và thanh toán cho sản phẩm

Screen Access Khi người dùng chọn sản phẩm và bấm checkout ở giao diện giỏ hàng

Quantity TextField Người dùng tăng giảm số lượng sản phẩm muốn đặt hàng

Icon thùng rác Button Xóa sản phẩm khỏi đơn đặt hàng

Hình 3.57: Trang thanh toán – chọn phương thức thanh toán – 2

Screen Trang thanh toán – chọn phương thức thanh toán – 2

Description Người dùng chọn phương thức thanh toán và địa chỉ nhận hàng

Chọn phương thức thanh toá Chọn phương thức thanh toán

Phương thức được chọn được to đậm

- Phương thức được chọn không được tô đậm

Hình 3.58: Trang thanh toán – chọn địa chỉ nhận hàng - 3

Screen Trang thanh toán – chọn địa chỉ nhận hàng – 3

Description Người dùng chọn địa chỉ nhận hàng để thực hiện thanh toán

Chỉnh sửa địa chỉ Chỉnh sửa địa chỉ nhận hàng

Form chỉnh sửa xuất hiện, thông tin địa chỉ được điền vào các ô

- Các ô nhập liệu không được điền theo đúng địa chỉ được chọn

Chọn địa chỉ mặc định Chọn địa chỉ mặc định Địa chỉ hiện thị luôn được chọn khi vào trang thanh toán

- Địa chỉ được chọn không được làm địa chỉ mặc định

Xóa địa chỉ Xóa địa chỉ Địa chỉ được xóa ra khỏi danh sách địa chỉ

- Địa chỉ không được xóa ra khỏi danh sách địa chỉ

Hình 3.59: Trang thanh toán – form chỉnh sửa địa chỉ giao hàng – 4

Screen Trang thanh toán –form chỉnh sửa địa chỉ giao hàng – 4

Description Người dùng chỉnh sửa địa chỉ nhận hàng

Screen Access Khi người dùng chọn địa chỉ cần chỉnh sửa

Name TextField Name người nhận hàng

TextField Số điện thoại người nhận hàng

Address TextField Địa chỉ nhận hàng

Zip Code TextField Mã zipcode

Save Button Lưu địa chỉ

Cancel Button Hủy thao tác

4.15 Trang lịch sử đơn hàng

Hình 3.60: Trang lịch sử đơn hàng – đơn hàng mới đặt – 1

Hình 3.61: Trang lịch sử đơn hàng – đơn hàng đóng gói và vận chuyển – 2

Hình 3.62: Trang lịch sử đơn hàng – đơn hàng bị hủy – 3

Hình 3.63: Trang lịch sử đơn hàng – đơn hàng đã giao - 4

Screen Trang lịch sử đơn hàng

Description Người dùng theo dõi đơn hàng khi đặt hàng

Screen Access Người dùng truy cập danh mục đanh sách lịch sử đơn hàng cạnh giỏ hàng Screen actions

Người dùng hủy đơn hàng khi nhà bán hàng chưa xác nhận đơn hàng

Người dùng hủy đơn hàng thành công

- Không hủy được đơn hàng Đánh giá sản phẩm

Người dùng có thể đánh giá sản phẩm khi đơn hàng được giao thành công

Người đung đánh giá được sản phẩm

- Không đánh giá được khi đơn hàng đã giao thành công

Thiết kế giao diện Administrator Website

Hình 3.64: Giao diện Đăng nhập

Description Giao diện form đăng nhập

Screen Access Người dùng truy cập trang web

- Người dùng điền tên email để đăng nhập

- Email đúng định dạng Email

- Người dùng điền mật khẩu để đăng nhập

- Mật khẩu có ít nhất 8 ký tự, bao gồm 1 ký tự chữ, 1 ký tự đặc biệt, 1 ký tự số

- Khi người dùng nhập đầy đủ thông tin, bấm “login” để hoàn tất quá trình đăng nhập

Forgot password Button - Chuyển đến trang quên mật khẩu

Button - Để thực hiện đăng nhập bằng tài khoản google Screen Actions

Action Name Description Success Failure Đăng nhập Bấm “Login” để đăng nhập và bắt đầu sử dụng hệ thống

Người dùng nhập đúng tên và mật khẩu thì sẽ vào được hệ thống

Khi người dùng chưa cung cấp đầy đủ thông tin tài khoản, hệ thống sẽ hiển thị thông báo lỗi dưới ô nhập liệu, với nội dung: “Email là bắt buộc hoặc Email không hợp lệ.”

- Khi người dùng nhập sai tên đăng nhập hoặc mật khẩu thì hệ thống đưa ra thông báo: “Email or password is wrong.” ở bên dưới Textbox mật khẩu

Hình 3.65: Giao diện Quên mật khẩu

Description Giao diện form đăng ký seller

Screen Access Người dùng truy cập trang web thông qua link đăng ký seller ở Email của người dùng Screen Content

- Người dùng điền tên shop

- Trường không được để trống

- Người dùng nhập số điện thoại

- Phone không được để trống

- Phone không chứa ký tự chữ

- Người dùng nhập slogan của Shop

- Trường không được để trống

- Nhập các link mạng xã hội của Seller

Logo Input - File - Để thực hiện việc upload logo của shop

- Người dùng không upload logo hệ thống tự động thiết lập ảnh mặc định cho Shop

- Để thực hiện việc upload những bằng chứng để admin có thể phê duyệt shop là gian hàng chính hãng, để nhận được các tín nhiệm từ người dùng

Terms of User Link - Để xem một số chính sách của seller

Privacy Policy Link - Chính sách ứng dụng

Sign Up Seller Button - Thực hiện đăng ký seller

- Thành công tài khoản được chuyển về giao diện Login

Here link - Trở về giao diện login khi người dùng tạm thời không muốn đăng ký tài khoản seller nữa

Action Name Description Success Failure Đăng ký

Bấm “Sign Up Seller” để hoàn thành việc đăng ký tài khoản seller

Người dùng nhập đúng thông tin các trường trong form đăng ký, theo đúng các rules của trang web

- Khi người dùng chưa nhập đầy đủ thông tin đăng ký seller: hệ thống thông báo lỗi ngay ở bên dưới trường đó

Khi người dùng áp dụng các thủ thuật để vượt qua kiểm tra giao diện, các trường dữ liệu sẽ được gửi đến máy chủ Tại đây, máy chủ sẽ tiến hành kiểm tra lại các trường này và gửi thông báo lỗi trở lại giao diện người dùng qua pop-up.

Hình 3.66: Giao diện Quên mật khẩu

Description Giao diện form nhập xác nhận email

Screen Access Người dùng click vào button forgot password trên giao diện Login để được chuyển đến trang confirm email Screen Content

- Người dùng điền tên email để nhận mã OTP gửi từ hệ thống

- Email đúng định danh email

- Người dùng thực hiện gửi yêu cầu reset password

Back Link - Chuyển người dùng về trang Login

Action Name Description Success Failure Đăng ký

Bấm “Send” để hoàn thành việc xác thực tài khoản, để hệ thống cho phép thay đổi mật khẩu

Người dùng được chuyển đến giao diện nhập mã OTP xác thực tài khoản

-Người dùng được chuyển đến giao diện OTP những mã OTP không được gửi về email của người dùng

Description Giao diện cập nhật mật khẩu mới

Screen Access Người dùng nhập đúng mã OTP xác thực hệ thống chuyển người dùng đến giao diện reset password Screen Content

- Người dùng nhập mật khẩu mới

- Mật khẩu ít nhất 8 ký tự, bao gồm 1 ký tự chữ, 1 ký tự số, 1 ký tự đặc biệt

- Người dùng nhập xác nhận mật khẩu

- Confirm password phải trùng với password

Reset password Button - Thực hiện reset password

Nhập đủ password và confirm password hệ thống thực hiện reset password cho người dùng

Người dùng nhận thông báo từ hệ thống, người dùng được chuyển đến giao diện Login để thực hiện Login vào hê thống

- Token reset password hết hạn sau 24h, hệ thống thông báo lỗi, yêu cầu người dùng thực hiện lại quá trình quên mật khẩu

- Người dùng thay đổi mật khẩu thành công, nhưng mật khẩu mới không đăng nhập được vào hệ thống

5.5 Xem danh sách sản phẩm (Products Page)

Hình 3.68: Giao diện Xem danh sách sản phẩm (Products Page)

Screen Xem danh sách sản phẩm

Description Giao diện quản lý sản phầm của seller

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền seller, truy cập vào Shop chọn Products để vào page Screen Content

- Người dùng thực hiện chức năng chỉnh sửa chi tiết cho một sản phẩm

- Giao diện sẽ được chuyển đến trang Edit Details

Delete Button - Thực hiện xóa một sản phẩm

Xem danh sách sản phẩm

Chọn button products để thực hiện xem danh sách sản phẩm

Sản phẩm được hiển thị đúng với seller, nếu người dùng chưa tạo sản phẩm nào, giao diện sẽ hiển thị “Data

- Sản phẩm hiển không phải của seller đó

5.6 Thêm sản phẩm (Add Product)

Hình 3.69: Giao diện Thêm sản phẩm – thông tin cơ bản - 1

Hình 3.70: Giao diện thêm sản phẩm – thông tin chi tiết - 2

Description Giao diện thêm một sản phẩm mới cho seller

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền seller, truy cập vào Add Product để thực hiện thêm một sản phẩm Screen Content

- Người dùng nhập tên sản phẩm

- Name không được để trống

- Người dùng nhập tác giả sách

- Author không được để trống

Publisher Textbox - - Người dùng nhập nhà xuất bản

String - Publisher không được để trống

- Max 32 ký tự Print length

- Người dùng nhập độ dài sách

Select - Chọn ngày xuất bản của sách

- Publication không được để trống

Select - Chọn ngôn ngữ sách

- Ngôn ngữ không được để trống

- Price có định dạng số

- Price không được để trống

Type Select - Chọn loại sản phẩm : E-Book,

Select - Chọn danh mục sách

- Category không được để trống Discount

- Nhập giảm giá sản phẩm

- Nhập số lượng sản phẩm

- Quantity không được để trống

- Người dùng nhập mô tả chi tiết cho sản phẩm

- Trường không bắt buộc mặc định là ảnh default của hệ thống

- Người dùng có thể upload nhiều hình ảnh cùng một lúc

- City không được để trống

- Max 32 ký tự Screen Actions

Chọn button “save” để thực hiện thêm sản phẩm

Hệ thống chuyển người dùng đến giao diện quản lý sản phẩm và thông báo cho người dùng thêm tài khoản thành công

- Sản phẩm không được thêm khi hệ thống thông báo đã thêm thành công

- Thêm thành công giao diện không chuyển về trang quản lý tài khoản

5.7 Sửa sản phẩm (Edit Product)

Hình 3.71: Giao diện Sửa sản phẩm

Description Giao diện sửa sản phẩm hiện ra, vẫn lấy ra các thông tin cũ của sản phẩm

Người dùng đã đăng nhập vào hệ thống với quyền seller có thể truy cập danh sách sản phẩm và chọn sản phẩm cần chỉnh sửa.

Sửa sản phẩm Chọn button “save” để thực hiện sữa sản phẩm

Hệ thống cập nhật thông tin mới trong khi giữ nguyên các thông tin không thay đổi, đồng thời chuyển người dùng về giao diện xem danh sách sản phẩm và thông báo cho họ.

- Sản phẩm không được cập nhật khi hệ thống thông báo đã sửa thành công

- Sửa thành công nhưng giao diện không chuyển về trang quản lý tài khoản

5.8 Xem danh sách đơn hàng (Orders Page)

Hình 3.72: Giao diện Xem danh sách trạng thái đơn hàng

Screen Xem danh sách trạng thái đơn hàng

Description Cung cấp giao diện quản lý các đơn đặt hàng của seller

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền seller, truy cập vào xem danh sách đơn hàng Screen Content

String - Tên sản phẩm đặt hàng

String - Số lượng đặt hàng

Text - Hiển thị người đặt hạng

Meta Text - Hiện thị thông tin mua hàng và cancel của người đặt hàng Address

Text - Địa chỉ nhận hàng

Amount Paid Text - Tổng số tiền phải trả cho đơn hàng

Payment Type Text - Loại thanh toán (Cod, Paypal)

Inventory Text - Số lượng hàng còn lại trong kho

Ordered at Text - Thời điểm đặt hàng

Text - Trạng thái đơn hàng

- Ordered: Đã đặt hàng thành công (được xác nhận và chưa được xác nhận từ seller)

- Packed: Đã đóng gói (đóng xong or chưa)

- Shipped: Nhận giao hàng (chờ xác nhận từ shipper)

- Delivered: Đang giao hàng (đã giao xong or chưa)

- Mỗi trang thái sẽ có isCompleted để xác định trạng thái đã hoàn thành hay chưa

Details Button - Button chuyển người dùng đến thông tin chi tiết của đơn hàng

Button - Xác nhận trạng thái đơn hàng hiện tại

- Vd: Ordered là trạng thái đặt hàng thành công, nhưng chưa có sự chấp nhận từ seller Screen Actions

Xem danh sách đơn hàng

Chọn Orders để xem danh sách sản phẩm

Hệ thống hiển thị tất cả đơn hàng của seller đó

- Đơn hàng hiển thị nhầm seller

5.9 Cập nhật trạng thái đơn hàng (Orders Page)

Hình 3.73: Giao diện cập nhật trạng thái đơn hàng

Hình 3.74: Hủy đơn hàng bởi nhà bán hàng

Screen Cập nhật trạng thái đơn hàng

Description Người dùng cập nhật tình trạng đơn hàng ngay trên giao diện quản lý đơn hàng

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền seller, truy cập vào xem danh sách đơn hàng Screen Content

Product Textbox - Tên sản phẩm đặt hàng

Quantity Textbox - Số lượng đặt hàng

Name Text - Hiển thị người đặt hạng

Meta Text - Hiện thị thông tin mua hàng và cancel của người đặt hàng

Address Text - Địa chỉ nhận hàng

Amount Paid Text - Tổng số tiền phải trả cho đơn hàng

Payment Type Text - Loại thanh toán (Cod, Paypal)

Inventory Text - Số lượng hàng còn lại trong kho

- Packed: Đã đóng gói (đóng xong or chưa)

Cập nhật trạng thái đơn hàng

Chọn “Confirm” để xác định bạn chắc chắn muôn cập nhật trạng thái, sau đó bấm OK để thực hiện cập nhật, cancel để huy thao tác cập nhật

Hệ thống chuyển status lên một trạng thái, thông báo người dùng, cập nhật đơn hàng thành công

- Đơn hàng không được thay đổi trạng thái đặt hàng

5.10 Thống kê đơn hàng hoàn tất (Orders Page)

Hình 3.75: Giao diện thống kê đơn hàng hoàn tất

Screen Thống kê đơn hàng và doanh thu

Description Nhà bán hàng xem lại các đơn đã giao hàng thành công và doanh thu hiện tại

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền seller, truy cập vào seller dashboard

5.11 Xem danh sách đơn hàng - shipper (Orders Page)

Hình 3.76: Giao diện xem danh sách đơn hàng của Shipper

Hình 3.77: Giao diện các hành động khi Shipper chấp nhận đơn hàng

Screen Xem danh sách đơn hàng của shipper

Description Người dùng xem tất cả các đơn giao hàng trên giao diện

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền shipper, truy cập vào xem danh sách đơn hàng Screen Content

Product Textbox - Tên sản phẩm đặt hàng

Quantity Textbox - Số lượng đặt hàng

Total pay Text - Hiển thị số tiền cần phải thu hộ

Address Text - Địa chỉ nhận hàng

- Packed: Đã đóng gói (đóng xong or

Khóa luận tốt nghiệp 135 | T r a n g chưa)

Bấm confirm để xác nhận chuyển tiếp hành động tiếp theo

Hệ thống hiện thị trạng thái tiếp theo của đơn hàng

- Đơn hàng hiển thị nhầm shipper

- Sản phẩm nhầm trạng thái

Hủy đơn hàng Người vận chuyển hủy đơn hàng

Hủy đơn hàng thành công, đơn hàng xóa khỏi danh sách đơn hàng của người vận chuyển

Bom hàng Người nhận hàng không nhận hàng

Báo bom hàng, và xóa đơn hàng ra khỏi danh sách đơn hàng của người vận chuyển

5.12 Quản lý người dùng (Admin)

Hình 3.78: Giao diện quản lý tài khoản

Screen Giao diện quản lý tài khoản

Description Người quản trị có thể xem tất cả các tài khoản đang có trong hệ thống

Screen Access Người dùng đã đăng nhập vào hệ thống với phân quyền admin, truy cập vào trang quản lý Users

Block tài khoản và ép tất cả các tài khoản của user này logut

Tài khoản bị block và không có tài khoản nào còn login

Hình 3.79: Giao diện quản lý categories

Hình 3.80: Giao diện thêm một danh mục mới

Screen Giao diện thêm một danh mục mới

Description Người quản trị có thể xem tất cả các danh mục sản phẩm đang có trong hệ thống

Người dùng đã đăng nhập vào hệ thống với phân quyền admin, truy cập vào trang quản lý categories

Pop-up thêm danh mục hiện ra, người quản trị chỉ cần điền danh mục cần thêm

Danh mục được thêm mới vào bảng

- Danh mục thêm thất bại

Edit Người quản trị chỉnh sửa tên danh mục

Chỉnh sửa thành công, tên danh mục được chuyển đổi về tên mới

- Tên danh mục không được thay đổi

Class Diagram

Bảng 3.48 Đặc tả Class Diagram

STT Tên Collection Ý nghĩa Quan hệ

1 Users Collection quản lý các thông tin và quyền của một user có trong hệ thống

2 Sellers Collection quản lý các thông tin của một Seller

3 Categories Collection về các danh mục của các sản phẩm có trong hệ thống

4 Products Collection quản lý các thông tin về product của các seller trong hệ thống

Reference Users Reference Sellers Reference Categories

5 Carts Collection quản lý thông tin về giỏ hàng của người dùng

7 Tokens Collection quản lý thông tin về token của hệ thống, mặc định

8 Orders Collection quản lý thông tin order của người mua hàng trong hệ thống

9 DeliveryInfo Collection quản lý các địa chỉ nhận hàng của người dùng

10 Inventories Collection quản lý tồn kho của các sản phẩm

11 Shipping Collection quản lý thông tin vận chuyển, địa điểm vận chuyển, người vận chuyển (shipper), công ty vận chuyển

Collection quản lí công ty vận chuyển, các công ty giao hàng đã liên kết với App bán sách

Collection lưu tất cả các thanh toán thông qua paypal, nhằm mục đích truy vấn và xử lý các trạng thái đơn hàng của người dùng

CÀI ĐẶT CHƯƠNG TRÌNH

Công nghệ sử dụng

Phần mềm được phát triển theo mô hình MVC, sử dụng công nghệ Java JSP và Servlet, kết hợp với cơ sở dữ liệu PostgreSQL Ứng dụng được triển khai trên Heroku và sử dụng template Bootstrap để xây dựng giao diện, với IDE lập trình là NetBeans.

MVC, viết tắt của Model – View – Controller, là một mô hình thiết kế phổ biến trong kỹ thuật phần mềm Mô hình này chia source code thành ba phần riêng biệt, mỗi phần tương ứng với một hoạt động cụ thể: Model quản lý dữ liệu, View hiển thị giao diện người dùng, và Controller xử lý logic và tương tác giữa Model và View.

Hình 4.1: Mô hình kiến trúc MVC

• View sẽ hiển thị ra phần nhập form tiêu đề và nội dung

• Controller lấy dữ liệu từ 2 trường và gửi tới Model

• Model lúc này sẽ nhận dữ liệu từ Controller để lưu trữ trong cơ sở dữ liệu

4.1.2 ReactJS Đối với việc thiết kế Frontend nhóm đã sử dụng Frameword ReactJS cùng với sự hỗ trợ của Ant design một template cung cấp các component hổ trợ việc thiết kế website trở nên linh hoạt và tiết kiệm thời gian hơn

ReactJS là thư viện UI do Facebook phát triển, giúp xây dựng các thành phần giao diện người dùng tương tác cao và dễ dàng tái sử dụng.

ReactJS thu hút người dùng bởi khả năng hoạt động không chỉ trên client mà còn trên server, cho phép việc render dễ dàng và kết nối linh hoạt giữa hai phía.

ReactJS sử dụng cơ chế so sánh sự thay đổi giữa các giá trị của các lần render hiện tại với các lần render trước đó, từ đó cập nhật những thay đổi tối thiểu trên DOM.

Virtual DOM là công nghệ giúp tối ưu hóa hiệu suất ứng dụng bằng cách chỉ thay đổi node gốc khi có sự thay đổi, từ đó tái cấu trúc toàn bộ DOM tree mà không làm chậm tốc độ xử lý ReactJS áp dụng Virtual DOM, một đối tượng JavaScript chứa thông tin cần thiết để tạo ra DOM Khi dữ liệu thay đổi, Virtual DOM sẽ tính toán sự khác biệt giữa đối tượng và DOM tree thật, giúp tối ưu hóa quá trình re-render.

- Thư viện mã nguồn mở, tiện lợi cho việc phát triển và tiết kiệm chi phí

- Có tài liệu hướng dẫn đầy đủ

- Tốc độ xử lý cao, dễ bảo trì và mở rộng ứng dụng vì phân chi các giao diện theo dạng component có thể tái sử dụng tốt

- Quá trình xử lý việc re-render trong react khó xử lý

- Vì cơ chế của react sử dụng là client-side rendering nên không thân thiện với SEO

Express là một web application framework cho nodejs, cung cấp cho Nodejs nhiều tính năng mạnh mẽ để phát triển web

Express là một framework mạnh mẽ cho việc phát triển ứng dụng nhanh trên nền tảng NodeJS, hỗ trợ đầy đủ các phương thức HTTP và middleware, giúp tạo ra API dễ dàng và hiệu quả.

Cho phép thiết lập các lớp trung gian để xử lý các yêu cầu HTTP Định nghĩa routing có thể được áp dụng cho các hành động khác nhau tùy thuộc vào phương thức HTTP và URL.

Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template

NodeJS là mã nguồn mở hoạt động trên môi trường V8 Javascript runtime, cho phép phát triển ứng dụng web nhanh chóng và dễ dàng mở rộng Với khả năng xử lý nhanh trên trình duyệt Chrome, NodeJS giúp các nhà phát triển tạo ra các ứng dụng web hiệu quả.

API của NodeJS hoạt động theo cơ chế không đồng bộ (non-blocking), cho phép chờ đợi phản hồi từ máy chủ mà không làm gián đoạn các tác vụ khác Điều này giúp tăng cường hiệu suất khi di chuyển giữa các API, cho phép máy chủ nhận được phản ứng từ các cuộc gọi API trước đó theo thời gian thực (Realtime).

- Chạy nhanh: NodeJS được xây dựng dựa vào nền tảng V8 Javascript Engine

Khóa luận tốt nghiệp 145 | T r a n g nên việc thực thi chương trình rất nhanh

- Đơn luồng nhưng có khả năng xử lý đơn luồng nhờ cơ chế event loop và thread pool trong NodeJS

- Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu

- Vì Node sử dụng Javascript là một ngôn ngữ cấp cao, nên quy trình code của Node không thiên hướng đối tượng như các ngôn ngữ khác JAVA, C#

- NodeJS xử lý nhanh còn phù thuộc nhiều vào kinh nghiệm thực tế

MongoDB là một cơ sở dữ liệu NoSQL theo hướng tài liệu, không sử dụng cấu trúc bảng như các cơ sở dữ liệu quan hệ truyền thống.

MongoDB lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích cỡ và cấu trúc document khác nhau, với kích thước tối đa của một document là 16MB Ưu điểm nổi bật của MongoDB bao gồm tính linh hoạt trong việc quản lý dữ liệu và khả năng mở rộng dễ dàng.

MongoDB lưu trữ dữ liệu dưới dạng JSON, cho phép mỗi collection có kích thước, số lượng và kiểu document khác nhau Điều này giúp việc lưu trữ dữ liệu trở nên dễ dàng và linh hoạt, đồng thời hỗ trợ khả năng mở rộng mà không gặp phải những ràng buộc nghiêm ngặt như trong SQL.

Dữ liệu trong MongoDB thuộc loại NoSQL, khác với SQL, và không có ràng buộc lẫn nhau Do đó, việc thêm, xóa, hay sửa dữ liệu không cần kiểm tra các điều kiện ràng buộc.

- MongoDB tự thêm index cho document (khi bật chế độ auto index), nên việc truy cập dữ liệu đạt hiệu suất cao nhất

- Không phải tham chiếu quá nhiều bảng như SQL, điều đó giúp cho việc truy vấn vấn dữ liệu nhanh.

Xây dựng backend

- Tiêu tốn bộ nhớ nhiều do lưu trữ dữ liệu dạng key-value và các collection có thể lặp lại key

- Thay vì ràng buộc ở Database thì ta phải tạo ràng buộc ở mã lập trình, nên ta phải hết sức cẩn thận khi sử dụng MongoDB

Chứa các xử lý ở tầng trung gian như authentication, validator các trường dữ liệu

1 Jwt.middleware Chứa các function liên quan đến việc verify token, kiểm tra quyền user

2 Validation.middlerware Chứa các thao tác validation các trường dữ liệu nhận từ phía client trước khi gửi đến controller xử lý

Bảng 4.1: File chứa trong thư mục middlewares

4.2.2 Services Đây là phần làm việc trực tiếp với csdl, chức năng của nó là truy vấn csdl, việc giao tiếp csdl chỉ duy nhất xuất hiện ở thư mục services, các lớp khác muốn làm việc với csdl phải thông qua nó

TT Services Các phương thức

1 auth.service - Lấy thông tin chi tiết user, seller

- Mã hóa mật khẩu trước khi lưu user

- Tạo otp xác thực register

- Tạo token xác thực reset password

2 profile.service - Lấy thông tin chi tiết user, seller

- Update thông tin, đổi password

3 product.service - Lấy danh sách sản phẩm

- Search sản phẩm bằng name, category

- Lấy sản phẩm theo category

- Kiểm tra sản phẩm tồn tại

- Xử lý phân trang, filter

4 cart.service - Lấy danh sách tất cả cart

- Thêm sản phẩm vào cart

- Thêm nhiều sảm phẩm vào cart

Bảng 4.2: File trong thư mục services

Bài viết này đề cập đến việc tối ưu hóa các trường dữ liệu bằng cách loại bỏ ký tự đặc biệt và thực hiện xử lý dữ liệu đầu vào Đồng thời, nó cũng nhấn mạnh tầm quan trọng của việc bảo mật, đặc biệt là trong việc ngăn chặn các lỗi XSS Injection và HTML Injection liên quan đến các trường dữ liệu.

1 userLogin Đăng nhập bằng email, password

2 googleLogin Đăng nhập bằng tài khoản google

3 resetPassword Thay đổi mật khẩu bằng mã otp gửi về email người dùng

4 refreshToken Cấp lại access token mới và tạo refreshToken mới

5 Logout Xóa refreshToken trong redis và cookie

6 addToCart Thêm 1 sản phẩm vào giỏ hàng

7 removeCart Xóa 1 sản phẩm khỏi giỏ hàng

8 getCartItems Lấy thông tin chi tiết của giỏ hàng

9 addMultipleItem Thêm nhiều sản phẩm vào giỏ hàng

10 addProduct Thêm 1 sản phẩm bởi seller

11 removeProduct Xóa 1 sản phẩm bởi seller

12 getDetailsProduct Lấy thông tin chi tiết của sản phẩm

13 getProducts Lấy danh sách sản phẩm của seller, có filter, phân trang

14 searchProduct Tìm kiếm sản phẩm theo name, category

15 addDeliveryInfo Thêm thông tin địa chỉ nhận hàng

16 getUserDeliveryInfo Lấy thông tin chi tiết địa chỉ nhận hàng của seller

17 deleteDeliveryInfo Xóa thông tin địa chỉ nhận hàng

18 updateDeliveryInfo Cập nhật địa chỉ nhận hàng

19 setDefaultDeliveryInfo Cập nhật địa chỉ nhận hàng mặc định

20 addOrder Thêm đơn đặt hàng

21 getDetailOrder Lấy thông tin chi tiết của một đơn hàng

22 getOrderList Lấy danh sách đơn đặt hàng

23 getAllOrdered Lấy tất cả đơn hàng đã order thành công và đăng chờ xác nhận đơn hàng từ seller

24 getAllOrdersCancelUser Lấy tất cả đơn hàng bị hủy của user

25 getAllOrdersPackedUser Lấy tất cả đơn hàng đã đóng gói và đang chờ vận chuyển của user

26 getAllOrdersShippingUser Lấy tất cả đơn hàng đang được vận chuyển của user

27 getAllOrdersCompletedUser Lấy tất cả đơn hàng đã hoàn thành của user

28 cancelOrderItem Hủy một sản phẩm trong một đơn đặt hàng

29 cancelOrder Hủy một đơn hàng

30 getOrdersNotDoneOfSeller Lấy toàn bộ đơn hàng chưa hoàn thành của seller

31 updateStatusOrderBySeller Cập nhật tình trạng đơn hàng cho seller

32 updateStatusOrderByShipper Cập nhật tình trạng đơn hàng cho shipper

32 paypalPaymentSuccess Xử lý thanh toán paypal thành công

32 paypalPaymentCancel Xử lý thanh toán paypal bị hủy

33 paypalPaymentStatus Lấy tình trạng thanh toán paypal hiện tại

34 getProfile Lấy thông tin chi tiết user

35 changePassword Thay đổi mật khẩu dựa vào mật khẩu cũ

36 updateProfie Cập nhật thông tin user

37 getDetailsSeller Lấy thông tin chi tiết của seller

38 getSellerCategories Lấy tất cả danh mục sản phẩm của seller

39 getProductsBySellerCategory Lấy danh sách sản phẩm theo danh mục sản phẩm của seller

40 activeAccount Active tài khoản vừa đăng ký

41 emailResetPassword Xác nhận email người dùng

42 addCategory Thêm danh mục sản phẩm

43 getCategories Lấy danh sách danh mục sản phẩm

44 getNewReleaseProduct Lấy danh sách sản phẩm mới đăng bán

45 getTop3Seller Lấy top seller có nhiều sản phẩm nhất

46 getRelatedProduct Lấy danh sách các sản phẩm liên quan

47 clientRejectOrder Người dùng không nhận hàng

48 getAllCompleted Lấy danh sách đơn hàng giao hàng thành công

49 addReview Thêm đánh giá sản phẩm

50 cancelOrderByShipper Shipper hủy đơn hàng

Bảng 4.3: Chức năng của controller

Server hỗ trợ send mail, upload hình ảnh cho main server

- SendMail: dùng nodemailer và google api để thực hiện việc send mail

Để xây dựng một server upload hiệu quả, người dùng chưa đăng nhập sẽ có ảnh được lưu vào thư mục tạm thời Sau khi nhấn nút submit, những bức ảnh này sẽ được chuyển từ thư mục tạm thời sang thư mục chính của server bên ngoài.

4.2.5 Một số kỹ thuật tối ưu backend đã sử dụng

1 Promise all trong việc tối ưu thời gian truy vấn

Hình 4.2: Tối ưu hiệu suất bằng Promise all

Tối ưu hóa quy trình cập nhật số lượng sản phẩm khi đặt hàng thành công giúp nâng cao trải nghiệm người dùng, mang lại sự nhanh gọn và phản hồi kịp thời từ server.

2 Dùng hàm lean() trong việc truy vấn MongoDB

Hình 4.3: Hàm lean() trong việc tối ưu tốc độ truy vấn MongoDB

Mặc định, kiểu trả về trong MongoDB là DocumentType, cho phép thực hiện các truy vấn lồng nhau trên dữ liệu Để tối ưu hóa thời gian trả về của một câu truy vấn, MongoDB cung cấp hàm lean(), giúp trả về dữ liệu dưới dạng object Kỹ thuật này rất quan trọng và không thể thiếu đối với những ai làm việc với MongoDB, tùy thuộc vào mục đích sử dụng.

3 Kỹ thuật Cluster tăng hiệu suất backend

Hình 4.4: Cluster trong việc tối ưu hóa hiệu suất backend

Việc so sánh hiệu suất giữa một server và hai server là điều dễ dàng nhận thấy, do đó, nhóm đã áp dụng kỹ thuật cluster kết hợp với thư viện quản lý các instance trên pm2 nhằm tối ưu hóa hiệu suất backend.

4 Kỹ thuật thread Pool trong NodeJS

Kỹ thuật thread pool trong NodeJS là một phương pháp quan trọng trong phát triển backend, giúp tối ưu hóa hiệu suất trang web bằng cách tận dụng tất cả các luồng của máy chủ Mặc định, NodeJS sử dụng 2 core tương đương với 4 luồng, nhưng chúng ta có thể tăng số lượng luồng tùy thuộc vào cấu hình máy chủ Điều này tương tự như một cửa hàng có 4 nhân viên sẽ phục vụ nhiều khách hàng hơn so với một cửa hàng chỉ có một nhân viên.

4.2.6 Security Đây là một vấn đề rất nhức nhối trong vấn đề xây dựng hệ thống backend, với những hiểu biệt khá hạn hẹp về lĩnh vực này nhóm chỉ tập trung vào một số lỗi security thông thường

1 Xác thực tất cả các trường được gửi về Server

Hình 4.6: Xác thực các trường gửi về bằng class-validator

Nhóm xây dựng một middleware để xác thực các trường dữ liệu từ client, đảm bảo rằng chúng tuân thủ đúng định dạng yêu cầu của trang web Việc xác thực chỉ ở phía client không đủ, vì người dùng có thể dễ dàng vượt qua lớp xác thực này Do đó, việc thực hiện xác thực ở phía backend là rất cần thiết trong quá trình xây dựng hệ thống backend.

2 Xss filter lọc các ký tự xấu trước khi lưu xuống database

Hình 4.7: Xss filter loại bỏ một số ký tự gây hại cho hệ thống

Các phương thức tấn công như XSS, HTML injection và SQL injection thường được hacker sử dụng để truyền mã độc qua các trường dữ liệu trong hệ thống Để ngăn chặn các cuộc tấn công này, nhóm đã sử dụng thư viện xssFilter nhằm loại bỏ các ký tự độc hại trước khi lưu trữ thông tin vào cơ sở dữ liệu.

3 Rate limit – giới hạn số lượng request trong một thời điểm của user

Hình 4.8: Rate limit – giới hạn số lượng request trong một thời điểm

Kỹ thuật này giúp hạn chế các cuộc tấn công như DoS attack, khi hacker gửi yêu cầu liên tục khiến server bị quá tải và người dùng không thể truy cập dữ liệu Bằng cách giới hạn số lượng yêu cầu từ một địa chỉ IP trong một khoảng thời gian cụ thể mà chúng ta cấu hình, kỹ thuật này mang lại hiệu quả bảo vệ đáng kể cho hệ thống.

Tiêu đề	Thiết Kế Và Xây Dựng Website Bán Sách Trực Tuyến
Tác giả	Trần Đình Bảo
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	khóa luận tốt nghiệp
Năm xuất bản	2023
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	161
Dung lượng	11,82 MB