Xây dựng website bán sách trên nền tảng mern stack

Thực hành: - Áp dụng kiến thức từ lý thuyết xây dựng một hệ thống web bán sách online.- Hệ thống gồm các chức năng sau:o Phía quản trị: Quản lý sách, quản lý user, quản lý đơn hàng và

TỔNG QUAN

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

Sách là nguồn tri thức quý giá của nhân loại, và sự phát triển của thương mại điện tử đã làm cho việc tìm kiếm và mua sản phẩm trở nên dễ dàng hơn bao giờ hết Chỉ cần một smartphone kết nối wifi, người tiêu dùng có thể đặt hàng và nhận sản phẩm tại nhà Nhóm chúng em muốn kết hợp việc bán sách với thương mại điện tử nhằm khuyến khích thói quen đọc sách và giúp sách trở nên dễ tiếp cận hơn với mọi người Vì vậy, chúng em quyết định thử sức với đề tài này.

1.2 Mục đích của đề tài Đề tài “XÂY DỰNG WEBSITE BÁN SÁCH TRÊN NỀN TẢNG MERN STACK” đặt ra 2 vấn đề trọng tâm về mục tiêu mà sinh viên nghiên cứu cần thực hiện được bao gồm:

Để thành công trong việc sử dụng mô hình MERN Stack, sinh viên cần nắm vững các thành phần chính và khả năng ứng dụng của chúng MERN bao gồm NodeJS cho việc xây dựng server, ReactJS cho giao diện người dùng, MongoDB làm cơ sở dữ liệu, và ExpressJS như middleware hỗ trợ server Ngoài ra, sinh viên cũng nên tìm hiểu thêm về các thư viện và mã nguồn module hữu ích để phát triển ứng dụng web thực tế, từ đó nâng cao kỹ năng và hiểu biết chuyên môn.

Mô hình MERN Stack được ứng dụng để xây dựng một sản phẩm cụ thể là "Website bán sách" Sản phẩm này cần hoàn thiện với đầy đủ các thành phần của mô hình MERN Stack, đồng thời đáp ứng các yêu cầu như cho phép người dùng mua và lựa chọn sách yêu thích, theo dõi quá trình vận chuyển sản phẩm, cùng với một số tính năng thực tế khác Bên cạnh đó, website cũng phải có khả năng nâng cấp và phát triển thêm tính năng trong tương lai.

1.3 Đối tượng và phạm vi nghiên cứu Đề tài được thực hiện nghiên cứu xoay quanh hai nhóm đối tượng trọng tâm bao gồm: nhóm đối tượng về kiến thức công nghệ và nhóm đối tượng có nhu cầu mua, sử dụng các tựa sách mà họ yêu thích

Nhóm đối tượng nghiên cứu về kiến thức công nghệ bao gồm bốn thành phần chính: Mã nguồn mở NodeJS, framework ReactJS, cơ sở dữ liệu MongoDB và thư viện ExpressJS Ngoài ra, cần nghiên cứu thêm một số thư viện Javascript hữu ích như JWT (Json Web Token) và các thư viện biểu đồ, nhằm phục vụ cho các ứng dụng liên quan đến doanh thu và mức độ ưa thích của sản phẩm.

Nhóm đối tượng tìm kiếm sách yêu thích thường quan tâm đến thông tin về tên sách, thể loại, và series sách, cùng với các đánh giá từ trải nghiệm người dùng trên trang web bán sách cụ thể.

Phạm vi nghiên cứu được xác định một cách tổng quát, giúp người thực hiện nắm vững kiến thức chung và áp dụng hiệu quả vào sản phẩm thực tế, tránh xa các lý thuyết phức tạp không có tính ứng dụng.

1.4 Kết quả dự kiến đạt được

- Hiểu được các kiến thức về MERN Stack, Restful API

- Xây dựng hoàn thành một website bán sách online với những kiến thức đã tìm hiểu.

K ẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

- Hiểu được các kiến thức về MERN Stack, Restful API

- Xây dựng hoàn thành một website bán sách online với những kiến thức đã tìm hiểu.

CƠ SỞ LÝ THUYẾT

Tổng quan về MERN Stack [1][2][3]

2.1.1 Khái niệm về MERN Stack

MERN được viết tắt cho MongoDB, Express, React, Node, và bốn từ khóa công nghệ đó tạo nên Stack

• Express: Node.js website framework

• React: a client-side javascript framwork

MERN Stack được dùng để xây dựng React Universal App

2.1.2 Các thành phần trong MERN stack

MERN đại điện cho MongoDB (M), ExpressJS (E), React (R) và NodeJS(N)

React, hay còn gọi là React.js hoặc ReactJS, là một thư viện mã nguồn mở bằng JavaScript, chuyên dụng cho phát triển front-end, giúp xây dựng giao diện người dùng dựa trên các thành phần.

React là một thư viện UI được phát triển và duy trì bởi Meta (trước đây là Facebook), cùng với sự hỗ trợ từ cộng đồng các nhà phát triển và các công ty Nó có thể được sử dụng làm nền tảng cho việc phát triển các ứng dụng đơn trang, ứng dụng di động, hoặc các ứng dụng server-rendered kết hợp với các framework như Next.js.

MongoDB là một cơ sở dữ liệu NoSQL, nổi bật với tính năng không ràng buộc quan hệ, khả năng phân tán và mã nguồn mở Nó có khả năng lưu trữ và xử lý từ lượng dữ liệu nhỏ đến rất lớn Trong mô hình MERN stack, MongoDB giữ vai trò là cơ sở dữ liệu cho website, cho phép kết nối dễ dàng với NodeJS và ExpressJS.

NodeJS là môi trường chạy JavaScript trên server mà không cần trình duyệt, tiếp nhận Request từ React ở phía client và gửi Response Nó đảm nhận xử lý logic, bảo mật như xác thực và phân quyền, cũng như thao tác với tập tin và giao tiếp với cơ sở dữ liệu MongoDB trong mô hình MERN stack.

Chương 2: Cơ sở lý thuyết 4

ExpressJS là một framework mạnh mẽ cho NodeJS, cung cấp các chức năng hữu ích giúp đơn giản hóa quá trình phát triển Nó hỗ trợ xử lý các yêu cầu từ người dùng đến nhiều địa chỉ khác nhau một cách dễ dàng Nhờ đó, ExpressJS giúp tăng tốc độ và hiệu quả trong công việc xử lý backend.

2.1.3 Cách thức MERN stack hoạt động

Hình 2 1 Sơ đồ hoạt động Mern Stack

Tại mỗi client, React thực hiện xử lý và tạo ra giao diện người dùng, React cũng thực thi single-page-application trên mỗi client

Tại server, NodeJS và ExpressJS có nhiệm vụ xử lý logic, nghiệp vụ và xác thực MongoDB ở server có nhiệm vụ tổ chức và lưu trữ dữ liệu

Client và server giao tiếp thông qua các yêu cầu (Request) và phản hồi (Response), sử dụng công nghệ AJAX để người dùng không cần phải tải lại trang web Dữ liệu trong các yêu cầu và phản hồi này được định dạng dưới dạng JSON, một dạng dữ liệu ngắn gọn và dễ hiểu.

2.1.4 Lợi thế của MERN stack

MERN stack sử dụng JavaScript làm ngôn ngữ chung cho cả client-side và server-side, điều này giúp quá trình phát triển website trở nên dễ dàng và thân thiện hơn.

NodeJS là một nền tảng đa năng, hoạt động trên các hệ điều hành như Linux, Windows và OS X, không bị giới hạn bởi nền tảng Với cơ chế non-blocking I/O, NodeJS cho phép server xử lý hàng ngàn kết nối đồng thời một cách hiệu quả.

MERN stack sử dụng JSON làm định dạng dữ liệu trao đổi giữa các thành phần, giúp loại bỏ nhu cầu sử dụng thư viện bổ sung để chuyển đổi dữ liệu trong quá trình tương tác giữa client và server.

MongoDB có khả năng xử lý khối lượng dữ liệu lớn một cách hiệu quả, cho phép thêm thuộc tính mới vào các bảng mà không cần phải cập nhật lại toàn bộ bảng.

Công nghệ trong MERN stack hoàn toàn là mã nguồn mở và miễn phí, giúp người dùng dễ dàng tiếp cận Với một cộng đồng đông đảo, việc học hỏi kinh nghiệm và giải đáp thắc mắc trở nên thuận lợi hơn bao giờ hết.

NodeJS

NodeJS là nền tảng phát triển độc lập, được xây dựng trên V8 Javascript Engine, cho phép tạo ra các ứng dụng web và di động đa dạng một cách nhanh chóng và dễ dàng.

• Một số khái niệm tiêu biểu trong NodeJS [5]

- Event: mỗi một thao tác, yêu cầu (request) đến server đều được NodeJS xem là một sự kiện (event)

An event queue is a mechanism where all incoming events are processed in a First In, First Out (FIFO) order This means that events reaching the server first are handled before those that arrive later, ensuring efficient management of tasks in Node.js.

Callbacks là các hàm hoặc thao tác được thực hiện sau khi một hàm định nghĩa callback hoàn thành Việc sử dụng callback giúp lập trình viên quản lý hiệu quả các vấn đề liên quan đến xử lý bất đồng bộ trong lập trình.

- Message: nội dung thông báo tương ứng với từng callback

Blocking I/O là cơ chế phổ biến trong các ngôn ngữ server-side, quản lý các yêu cầu đến server theo thứ tự, khiến các yêu cầu sau phải chờ đợi nếu yêu cầu trước chưa hoàn thành Điều này dẫn đến thời gian chờ lâu nếu các yêu cầu xử lý mất nhiều thời gian Để khắc phục vấn đề này, NodeJS sử dụng cơ chế Non-Blocking I/O, cho phép xử lý nhiều yêu cầu đồng thời mà không làm chậm trễ các yêu cầu tiếp theo.

Thread Pool là một chương trình viết bằng C++ được tích hợp trong NodeJS, cho phép xử lý đa luồng Đây là môi trường chính để xử lý tất cả các tác vụ của server NodeJS, với các tác vụ này được phân chia và xử lý trên các luồng khác nhau.

- Event Loop: là một vòng lặp vô tận, nó chuyển các yêu cầu đã nhận sang Thread

Khi một yêu cầu được gửi đến Pool, nó sẽ tự động đăng ký một Callback tương ứng Sau khi yêu cầu được xử lý xong, hàm Callback sẽ được thực thi, đảm bảo quá trình xử lý được hoàn thành một cách hiệu quả và tự động.

Nguyên tắc hoạt động quan trọng nhất của NodeJS là xử lý Non-Blocking, cho phép nhận và xử lý nhiều tác vụ đồng thời qua một luồng xử lý duy nhất Thay vì tạo nhiều luồng xử lý như các ngôn ngữ Server truyền thống, NodeJS cho phép các tác vụ không cần thực hiện tuần tự, nghĩa là các công việc có thể truy cập tài nguyên song song mà không bị khóa lại Điều này giúp tối ưu hóa hiệu suất và tăng tốc độ xử lý của NodeJS, cho phép các tác vụ diễn ra một cách độc lập và hiệu quả hơn.

Chương 2: Cơ sở lý thuyết 7 có thể xử lý song song độc lập với nhau, rút ngắn lượng lớn thời gian xử lý cho server NodeJS

NodeJS sử dụng quá trình xử lý Non-Blocking kết hợp với Callbacks và Event Loop để quản lý các tác vụ Khi một tác vụ Non-Blocking hoàn thành, nó sẽ gửi một Callback để thông báo rằng tác vụ đã hoàn tất Các Callback này được đưa vào Event Table khi tác vụ được định nghĩa, chờ các sự kiện cho phép thực thi Khi sự kiện xảy ra, các message trong Event Table sẽ được chuyển sang Event Queue theo nguyên tắc FIFO (đến trước thực hiện trước) Đồng thời, Event Loop thực hiện một vòng lặp liên tục để kiểm tra xem có message nào đang chờ trong Event Queue và xem Thread Pool có đang xử lý tác vụ nào không Nếu có message đang chờ và Thread Pool sẵn sàng, Event Loop sẽ đưa phần tử đầu tiên của Queue vào Thread Pool để xử lý và gửi Callback khi tất cả các message đã hoàn thành Nếu không còn message nào trong Event Queue, vòng lặp Event Loop vẫn tiếp tục chạy để kiểm tra và xử lý các tác vụ mới khi có.

NodeJS là một server xử lý bất đồng bộ nhờ vào sự kết hợp giữa Non-Blocking I/O, Callbacks và Event Loop Khi nhận yêu cầu, server sẽ thực hiện các tác vụ đồng bộ và trả về kết quả ngay khi hoàn thành thông qua callback Quá trình này được điều phối bởi vòng lặp vô tận Event Loop, nơi từng message callback được xử lý với tài nguyên hệ thống và phản hồi khi tất cả các message tương ứng đã hoàn tất.

Hình 2 2.Sơ đồ hoạt động NodeJs

ExpressJS

ExpressJS là một server-side framework, chạy bên trong Node server ExpressJS tự xưng là một framework nhanh, tối giản dành cho NodeJS, và nó thật sự đúng

Express được phát triển nhằm đơn giản hóa việc cấu hình định tuyến và giao tiếp giữa client và server cho lập trình viên Hiện nay, framework này đã tích hợp nhiều gói trung gian (middleware packages) như body-parser, cors, và timeout, giúp tối ưu hóa quy trình làm việc của lập trình viên.

Express đang là một trong những framework phổ biến nhất trong lập trình các ứng dụng server-side và được áp dụng trong nhiều framework sử dụng Javascript khác

Cấu hình và lập trình xử lý các yêu cầu HTTP cho mọi URL khác nhau, đồng thời kết hợp với các công cụ kết xuất giao diện để phản hồi dữ liệu bằng cách chèn thông tin vào các mẫu.

Cấu hình chung toàn bộ ứng dụng website như một cổng (port) kết nối và quy định các thông tin phản hồi (response) tương ứng

Trong quá trình xử lý request, bạn có thể thêm thông tin bổ sung vào request và response thông qua các trung gian (middleware) khi request vẫn đang trong giai đoạn xử lý.

By making XML HTTP requests or using GET and POST methods from ReactJS on the front end, it is possible to connect with ExpressJS to create a powerful application.

React

2.4.1 Tổng quan về React [7] Đầu tiên React không phat là Javascript Framework mà nó là một thư viện javascript được phát triển bởi Jordan Walke, nó giúp tạo ra giao diện người dùng React được dùng lần đầu tiên trên Facebook’s Newsfeed vào năm 2011 và sau đó là trên Instagram, Whatsapp vào năm 2012, sau đó phát hành vào năm 2013

Trong React, mọi thứ được tổ chức dưới dạng thành phần, mỗi thành phần đảm nhận việc xuất ra một đoạn mã HTML nhỏ và có thể tái sử dụng Việc sử dụng thành phần giúp xây dựng các khối mã tái sử dụng hiệu quả, đồng thời giảm thiểu quá trình render của DOM.

Hiện nay, có nhiều framework JavaScript như Angular, Node và jQuery Tuy nhiên, React đã nổi bật nhờ những khả năng vượt trội, trở thành lựa chọn hàng đầu cho các nhà phát triển giao diện Hãy cùng khám phá một số tính năng nổi bật của React.

JSX, viết tắt của Javascript XML, là cú pháp tương tự như XML/HTML được sử dụng trong React Nó mang lại hiệu suất nhanh hơn so với Javascript thông thường nhờ vào quá trình tối ưu hóa khi biên dịch sang Javascript.

Virtual DOM: React chỉ yêu cầu trình duyệt thực hiện quá trình render một lần, và chỉ khi có sự thay đổi, React mới yêu cầu render lại Phương pháp này giúp tối ưu hóa quá trình render, từ đó tăng tốc độ và hiệu suất của ứng dụng.

Dữ liệu một chiều là phương pháp trong đó dòng dữ liệu chỉ đi theo một hướng, nghĩa là giao diện (view) sẽ không tự động cập nhật khi dữ liệu của mô hình (model) thay đổi Tính năng này giúp người phát triển dễ dàng kiểm soát ứng dụng hơn.

Hình 2 4 One-way Data Binding

React Native là phiên bản gốc của React, mang đến những ưu điểm vượt trội cho việc phát triển ứng dụng di động Với React Native, bạn có thể xây dựng ứng dụng đồng thời cho cả iOS và Android, giúp tiết kiệm thời gian và công sức.

MongoDB

MongoDB hệ quản trị cơ sở dữ liệu mã nguồn mở (open-source) thuộc họ cơ sở dữ liệu phi quan hệ (NoSQL)

MongoDB là một cơ sở dữ liệu hướng đối tượng, cho phép lưu trữ dữ liệu linh hoạt mà không có các ràng buộc toàn vẹn dữ liệu như trong các cơ sở dữ liệu quan hệ Điều này có nghĩa là nhiều loại dữ liệu khác nhau có thể được lưu trữ trong cùng một Collection, tương đương với Table trong SQL Nhờ vào đặc thù này, MongoDB có khả năng lưu trữ các dữ liệu đa dạng và phức tạp mà không bị hạn chế khi cấu trúc lưu trữ thay đổi.

MongoDB là một cơ sở dữ liệu phân tán, mang lại nhiều đặc điểm nổi bật như tính sẵn sàng cao và khả năng mở rộng theo chiều ngang.

Dữ liệu JSON được tạo ra từ ReactJS sau đó được gữi đến ExpressJS để xử lý và sau đó có thể lưu trữ trực tiếp đến MongoDB

MongoDB là cơ sở dữ liệu No-SQL loại Document Database với nhiều yếu tố được bổ sung để nâng cao hiệu suất sử dụng như Index, Schema,

MongoDB được lập trình bằng ngôn ngữ C++ và hỗ trợ tốt với các Javascript Framework

• Các khái niệm tiêu biểu khi sử dụng MongoDB [8]

Tài liệu (document) là đơn vị cơ bản của dữ liệu trong MongoDB, tương đương với một dòng trong bảng của SQL Mỗi tài liệu đều có cấu trúc là một đoạn chuỗi JSON độc lập.

Collection là một tập hợp các tài liệu có thuộc tính tương tự, tương đương với bảng (Table) trong SQL Sự khác biệt lớn nhất là bảng trong SQL có cấu trúc cố định mà dữ liệu phải tuân theo, trong khi Collection cho phép nhập liệu tự do với các tài liệu có thuộc tính khác nhau mà không gặp lỗi.

Cơ sở dữ liệu (Database) trong MongoDB bao gồm nhiều Collection độc lập và các cài đặt cùng quyền truy cập liên quan Mỗi Database có thể chứa một hoặc nhiều Collection, tạo thành cấu trúc dữ liệu linh hoạt và dễ quản lý.

Khóa _id là một định danh đặc biệt được tự động tạo ra bởi MongoDB khi thêm một Document vào Collection Mỗi Document trong Collection đều có một _id duy nhất, đảm bảo tính độc nhất cho từng Document.

Chỉ mục (Index) là cấu trúc dữ liệu quan trọng trong MongoDB, giúp thu thập thông tin về các trường trong Document của Collection, từ đó tăng tốc độ truy vấn đáng kể Tuy nhiên, việc tạo thêm chỉ mục cũng dẫn đến việc tiêu tốn nhiều dung lượng bộ nhớ trong cơ sở dữ liệu Trường _id là chỉ mục mặc định được MongoDB tự động khởi tạo khi thêm mới một Document.

MongoDB hỗ trợ truy vấn dữ liệu tương tự như các cơ sở dữ liệu khác, với nhiều câu lệnh bổ trợ giúp đơn giản hóa quá trình truy vấn Điều này mang lại hiệu suất truy vấn nhanh hơn so với các ngôn ngữ truy vấn truyền thống.

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

K HẢO SÁT HIỆN TRẠNG

Sự phát triển mạnh mẽ của thương mại điện tử đã dẫn đến sự cạnh tranh ngày càng tăng giữa các website bán sách trực tuyến Để thu hút và giữ chân người dùng, các website này phải liên tục cải thiện và bổ sung chức năng cũng như giao diện người dùng, giúp trải nghiệm mua sắm trở nên dễ dàng và tiện lợi hơn.

Khảo sát một số trang web bán sách nổi tiếng: http://www.amazon.com

Chương 3: Khảo sát hiện trạng và xác định yêu cầu 15

Hình 3 1 Trang web bán sách Amazon

- Thanh menu đầy đủ yêu cầu, dễ dàng tìm kiếm theo nhiều từ khóa

- Trang giỏ hàng đầy đủ tính năng, cho người dùng có thể biết đầy đủ thông tin sản phẩm

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

- Bố cục rõ ràng, thể hiện đầy đủ các sản phẩm

- Cho khách hàng đọc thử sách và highlight những đoạn nổi tiếng có trong sách

- Giao diện quá nhiều chữ gây rối mắt

- Thanh menu dọc chưa có nhiều thông tin như event, một số loại sách tiêu biểu, …

Chương 3: Khảo sát hiện trạng và xác định yêu cầu 16 https://tiki.vn/nha-sach-tiki

Hình 3 2 Trang web bán sách Tiki

- Giao diện đẹp, thân thiện với người dùng

- Màu sắc được phối rất hài hòa, bắt mắt người dùng

- Thanh menu tìm kiếm có thể tìm kiếm bất kỳ từ khóa nào

- Thanh menu danh mục đầy đủ giúp người dùng có thể tìm ra sản phẩm mà họ cần nhanh chóng

- Thiết kế nhiều event cho người dùng

- Trang chủ quá nhiều nội dung nên rút ngắn lại

- Không có chế độ đọc thử sách cho người dùng www.vinabook.com

Hình 3 3 Trang web bán sách Vinabook

- Giao diện dễ sử dụng, đẹp, màu sắc hài hòa

- Thanh menu đơn giản, đầy đủ

- Bố cục khi tìm kiếm sách không hợp lý

- Trang web không có responsive

- Giỏ hàng chưa hoàn thiện lắm

- Tìm kiếm sách chưa được hoàn thiện

Trong website bán sách sử dụng MERN Stack, tính năng quay số trúng mã giảm giá và các phần thưởng giá trị đã được thêm vào, nhằm mang lại trải nghiệm mới mẻ cho người dùng Ngoài ra, các khuyến mãi diễn ra liên tục hàng ngày để thu hút người dùng quay lại với website thường xuyên hơn.

Các website hiện nay không chỉ hỗ trợ hình thức thanh toán bằng tiền mặt mà còn tích hợp phương thức thanh toán qua Paypal, giúp sản phẩm tiếp cận người dùng dễ dàng hơn.

- Website sẽ giúp người dùng có thể tiếp cận qui trình mua sách online một cách thuận tiện và dễ dàng nhất

- Website sẽ cung cấp các chức năng cần thiết của một website thương mại điện tử như: đăng nhập, đăng kí, xem thông tin, giỏ hàng, mua hàng,…

+ Đăng nhập, đăng ký + Xem danh sách các thể loại sách + Xem chi tiết cuốn sách

Thêm sản phẩm vào giỏ hàng, xem và chỉnh sửa thông tin khách hàng, tìm kiếm và lọc sách theo thể loại, cùng với việc cập nhật thông tin giỏ hàng là những bước quan trọng giúp tối ưu hóa trải nghiệm mua sắm trực tuyến.

+ Xác nhận thông tin nhận hàng

+ Xem hoặc cập nhật thông tin admin + Thay đổi mật khẩu

Quản lý thông tin sách cho phép thêm, sửa, và xóa sách dễ dàng Hệ thống cũng hỗ trợ quản lý thông tin người dùng với các chức năng thêm, sửa, và xóa người dùng hiệu quả Ngoài ra, việc quản lý thông tin hóa đơn bao gồm cập nhật trạng thái hóa đơn, đảm bảo quy trình thanh toán diễn ra suôn sẻ.

3.3.1 Bảng requirement dành cho use case

1 Search book by name and author

1.1 Search book by name and author filter by type

1.2 Search book by name and author filter by author

1.3 Search book by name and author and filter by price range

2 Filter book Guest, Admin, Register Client

2.1 Filter book by type Guest, Admin, Register Client

2.2 Filter book by author Guest, Admin, Register Client

2.3 Filter book by price range Guest, Admin, Register Client

2.4 Sort by latest, best sellers, best sales, price (min to max and max to min)

3 View book Guest, Admin, Register Client

3.1 View book detail Guest, Admin, Register Client

4 Manager book cart Guest, Register Client

4.1 View book cart Guest, Register Client

4.3 Add book cart Guest, Register Client

4.3 Update book cart Guest, Register Client

4.4 Delete book cart Guest, Register Client

6.1 Login with user email Guest

7 Logout an account User, Admin

8 View account Register_Client, Admin

8.1 View account information Register_Client, Admin

8.2 Update account information Register_Client, Admin

8.3 Change account password Register_Client, Admin

9.1 View order detail Register_Client

Bảng 3 1 Bảng Requirement dành cho use case

- Registered_Client (Guest sau khi đăng nhập)

3.3.3.1 Use case tìm kiếm sách “Search book”

Hình 3 4 Use case tìm kiếm sách “Search book”

3.3.3.1 Usecase tìm sách theo tên sách

Tìm kiếm sách trực tuyến dễ dàng bằng cách nhập tên sách và tên tác giả Hệ thống sẽ trả về kết quả theo mức độ khớp với tên sách và tên tác giả, giúp người dùng nhanh chóng tìm được tài liệu mong muốn.

Actor Guest, admin, Register_Client

Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên sidebar

2 Actor nhập tên sách cần tìm kiếm

3 Nhấn biểu tượng ‘Tìm Kiếm”

4 Hiển thị trang chứa danh sách các sách được tìm kiếm Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 2 Use case tìm sách theo tên sách và tên tác giả

3.3.3.1.1 Use case tìm sách theo thể loại

Name Search book and filter by type

Description Tìm sách trên web và lọc theo thể loại

Pre-condition Đã thực hiện tìm kiếm sách (id usecase 1.1)

Basic Flow 1 Actor nhấn vào thể loại muốn ở bộ lọc bên trái

2 Hiển thị trang chứa danh sách các sách theo thể loại được tìm kiếm Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 3 Use case tìm sách và lọc theo thể loại

3.3.3.1.2 Use case tìm sách theo tên tác giả

Name Search book and filter by author

Description Tìm sách trên theo tên tác giả

Basic Flow 1 Actor nhấn vào tên tác giả muốn ở bộ lọc bên trái

2 Hiển thị trang chứa danh sách các sách theo tên tác giả được tìm kiếm

Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 4 Use case tìm sách và lọc theo tên tác giả

Name Search book and filter by price range

Basic Flow 1 Actor nhấn vào khoảng giá đã được liệt kê ở bộ lọc bên trái hoặc nhập khoảng giá mà actor muốn và sumit

Bảng 3 5 Use case tìm sách và lọc trong khoảng giá

3.3.3.2 Use case chọn lọc sách “Filter book”

Hình 3 5 Use case chọn lọc sách “Filter book”

3.3.3.2.1 Use case chọn lọc sách theo tên thể loại

Name Filter book by type

Description Chọn lọc sách trên web theo tên thể loại

Basic Flow 1 Trỏ chuột đến “Thể Loại” trên thanh menu để hiển thị danh sách thể loại

2 Actor nhấn chọn một tên thể loại

3 Hiển thị trang chứa danh sách theo tên thể loại tương ứng Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 6 Use case chọn lọc sách theo tên thể loại

3.3.3.2.2 Use case chọn lọc sách theo tên tác giả

Name Filter book by author

Description Chọn lọc sách trên web theo tên tác giả

Basic Flow 1 Trỏ chuột đến “Tác Giả” trên thanh menu để hiển thị danh sách tác giả đang được mua nhiều nhất

2 Actor nhấn chọn một tên tác giả

Bảng 3 7 Use case chọn lọc sách theo tên tác giả

3.3.3.2.3 Use case chọn lọc sách theo khoản giá

Name Filter book by price

Description Chọn lọc sách trên web theo khoảng giá

Trigger Vào trang bookSearch bằng thao tác tìm kiếm

Basic Flow 1 Trỏ chuột đến “Giá” trên thanh menu để hiển thị danh sách các khoản giá

2 Actor nhấn chọn một khoản giá

3 Hiển thị trang chứa danh sách theo khoản giá tương ứng Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 8 Use case chọn lọc sách theo giá tiền

3.3.3.2.4 Use case sắp xếp sách

Name Sort book by latest, best sellers, best sales, price min max

Description Sắp xếp sách trên web theo thứ tự như mới nhất, bán chạy nhất, giảm giá nhiều nhất, giá giảm dần và tang dần

Basic Flow 1 Actor chọn mục sắp xếp sách ở trên màn hình hiển thị sách

2 Hiển thị trang chứa sách được sắp xếp như đã chọn

Bảng 3 9 Use case chọn lọc sách theo số sao đánh giá

3.3.3.3 Use case xem thông tin sách “View book detail”

Hình 3 6 Use case xem thông tin sách “View book detail”

3.3.3.3.1 Use case xem thông tin chi tiết sách

Description Xem thông tin chi tiết sách

Basic Flow 1 Click vào biểu tượng chi tiết sách đang được trưng bày trên web

Khi đó website chuyển hướng sang trang bookdetail và hiện thông tin chi tiết sách vừa được nhấn

Alternative flow Thao tác thất bại chuyển đến trang Eror404

Bảng 3 10 Use case xem chi tiết sách

3.3.3.4 Use case quản lý giỏ hàng “Manager book cart”

Hình 3 7 Use case quản lý giỏ hàng “Manager book cart”

3.3.3.4.1 Use case xem sách trong giỏ hàng

Description Xem sách đã đưa vào giỏ hàng

Để truy cập giỏ hàng, hãy nhấn vào biểu tượng giỏ hàng ở góc trên bên phải của trang web Sau đó, trang web sẽ chuyển hướng đến trang giỏ hàng, nơi hiển thị danh sách các sách bạn đã thêm vào, bao gồm tên, hình ảnh, giá cả và số lượng.

Khi nhấn nút "Giỏ Hàng", website sẽ chuyển hướng sang trang giỏ hàng và hiển thị danh sách sách đã được thêm vào, bao gồm tên sách, hình ảnh, giá cả và số lượng Trong trường hợp thao tác thất bại, hệ thống sẽ chuyển hướng đến trang lỗi 404.

Bảng 3 11 Use case xem sách trong giỏ hàng

3.3.3.4.2 Use case thêm sách vào giỏ hàng

Name Add book to cart

Description Thêm sách vào giỏ hàng

Để mua sách, bạn chỉ cần nhấn “Chọn Mua” trên bất kỳ cuốn sách nào trong cửa hàng Khi đó, sách sẽ được thêm vào giỏ hàng với số lượng 1 và tổng tiền mua sách sẽ tự động cập nhật.

Basic Flow 2 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trong bookDetail

3 Khi đó sách được thêm vào giỏ hàng với số lượng n (tùy vào số nhập) và tổng tiền mua sách đó bị thay đổi

Thao tác thất bại chuyển đến trang Eror404

Kiểm tra quy tắc kinh doanh yêu cầu số lượng mỗi sách trong giỏ hàng không được vượt quá 10 và không được ít hơn 1 Đồng thời, cần xác minh rằng người dùng không được nhập chữ cái hoặc ký tự đặc biệt vào ô nhập liệu.

Bảng 3 12 Use case thêm sách trong giỏ hàng

3.3.3.4.3 Use case cập nhật giỏ hàng

Description Cập nhật giỏ hàng

Khi bạn nhấn “Chọn Mua” cho một quyển sách trong cửa hàng, sách đó sẽ được thêm vào giỏ hàng với số lượng n Lúc này, số lượng của quyển sách trong giỏ hàng sẽ tăng thêm 1 và tổng tiền mua sách sẽ được cập nhật tương ứng.

Basic Flow 2 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trang bookDetail và sách đó đã tồn tại trong giỏ hàng với số lượng n

3 Khi đó số lượng của quyển sách đó trong giỏ hàng tăng thêm n (tùy vào số nhập) và tổng tiền mua sách đó bị thay đổi

Basic Flow 3 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trang bookCart

Quy tắc kinh doanh yêu cầu kiểm tra số lượng mỗi sách trong giỏ hàng không được vượt quá 10 và không được ít hơn 1 Đồng thời, cần xác minh rằng đầu vào không được chứa chữ cái và ký tự đặc biệt.

Bảng 3 13 Use case cập nhật giỏ hàng

3.3.3.4.4 Use case xóa sách trong giỏ hàng

Description Xóa sách trong giỏ hàng

Trigger Thao tác đến trang bookCart

Basic Flow 1 1 Nhấn icon Remove ở trang cartBook của 1 quyển sách Khi đó sách xe được xoá khỏi giỏ hàng và cập nhật lại giá trị tổng tiền

Basic Flow 2 1 Click giảm số lượng của sách về 0 Khi đó sách sẽ được xóa khỏi giỏ hàng và cập nhật lại giá trị tổng tiền

Để đảm bảo quy tắc kinh doanh, cần xác minh số lượng sách trong giỏ hàng không được vượt quá 10 và không được ít hơn 1 Đồng thời, cũng cần kiểm tra rằng đầu vào không được phép nhập chữ cái và ký tự đặc biệt.

Bảng 3 14 Use case xóa sản phẩm khỏi giỏ hàng 3.3.3.5 Use case đăng ký tài khoản “Register an account”

Hình 3 8 Use case đăng ký tài khoản

Description Chức năng Đăng ký tài khoản để tạo một tài khoản trên hệ thống

Basic Flow 1 Nhấn nút (Đăng nhập/Đăng ký) ở trang chủ để đi đến trang loginPage

2 Nhập Tên người dùng, Email, Mật khẩu vào thẻ input

4 Kiểm tra Email của Guest nhập có tồn tại hay chưa?

+ Email tồn tại: thông báo Email đã tồn tại

+ Email không tồn tại: Tới bước 5

5 Tạo tài khoản mới với thông tin đã nhập, hiện thông báo:

‘Đăng ký thành công, giờ bạn có thể Đăng Nhập vào hệ thống’ sau đó chuyển trang về trang đăng nhập

Alternative flow + Nếu thực hiện không thành công chuyển đến trang báo lỗi

Bussiness rule + Email phải đúng định dạng Nếu không đúng định dạng email sẽ thông báo: ‘Hãy nhập địa chỉ email!’

+ Password phải có ít nhất 6 kí tự + Các thẻ input để trống

Hệ thống kiểm tra các thẻ input và sẽ thông báo "Không được để trống!!!" nếu có thẻ nào bị bỏ trống Đồng thời, mật khẩu nhập vào phải trùng khớp với mật khẩu nhập lại.

Bảng 3 15 Use case đăng ký

3.3.3.6 Use case đăng nhập vào tài khoản “Login an account”

Hình 3 9 Use case đăng nhập

3.3.3.6.1 Use case đăng nhập bằng tài khoản đăng ký

Name Login with user email

Description Đăng nhập bằng tài khoản đăng ký

Basic Flow 1 Guest nhấn nút Đăng nhập ở trang chủ để mở form đăng nhập

2 Nhập Email vào thẻ input ‘Email đăng nhập’

3 Nhập Password vào thẻ input ‘Mật khẩu’

5 Kiểm tra các thông tin trên có chính xác hay không?

+ Chính xác: Tới bước 7 + Không chính xác: Tới bước 6 + User không tồn tại: Tới bước 6

6 Thông báo “Đăng nhập thất bại!” Reload lại page Trang chủ

7 Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng ở header

+ Chọn ‘Hủy’ Đóng form Đăng Nhập Nếu thực hiện không thành công chuyển đến trang báo lỗi

Bussiness rule + Password or Email để trống

Hệ thống kiểm tra các thẻ input, nếu có thẻ input nào bị trống thì hệ thống sẽ hiển thị thông báo "Không được để trống!!!"

+ Email phải đúng định dạng Nếu không đúng định dạng email sẽ thông báo: ‘Hãy nhập địa chỉ email!’

+ Password phải có ít nhất 6 kí tự

Bảng 3 16 Use case đăng nhập bằng tài khoản đăng ký

3.3.3.7 Use case đăng xuất “Logout an account”

Hình 3 10 Use case đăng xuất “Logout an account”

Description Chức năng đăng xuất tài khoản

Basic Flow 1 Nhấn nút (Đăng xuất) để đăng xuất khỏi cửa sổ làm việc và về trang chủ Alternative flow Không có

Bảng 3 17 Use case đăng xuất “Logout an account”

3.3.3.8 Use case quản lý thông tin tài khoản “View account”

Hình 3 11 Use case quản lý thông tin tài khoản “View account”

3.3.3.8.1 Use case xem thông tin cá nhân

Description Xem thông tin cá nhân

Pre-condition Actor chọn “Thông tin tài khoản”

Trigger - Actor có quyền admin, Register_Client

Basic Flow Nhấn chuột vào nút “Thông tin tài khoản” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang accountProfile

1 Nếu Actor muốn dừng việc xem thông tin cá nhân:

1.1 Actor nhấn vào “Quay trở lại”

1.2 Actor sẽ trở lại trạng thái trước đó Bussiness rule Không có

Bảng 3 18 Use case xem thông tin cá nhân

3.3.3.8.2 Use case sửa đổi thông tin cá nhân

Description Sửa đổi thông tin cá nhân

Pre-condition Actor chọn “Sửa đổi thông tin”

Basic Flow 1 Nhấn chuột vào nút “Sửa đổi thông tin” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang accountProfileEdit

2 Sửa đổi thông tin trừ email

3 Nhấn “Lưu thông tin” để xác nhận việc sửa đổi Nếu thành công trở về màn hình trước, ngược lại nếu thất bại show ra màn hình lỗi

1 Nếu Actor muốn hủy việc sửa đổi thông tin cá nhân:

1.1 Actor nhấn vào “Quay lại”

Bảng 3 19 Use case chỉnh sửa thông tin cá nhân

3.3.3.8.3 Use case đổi mật khẩu

Description Đổi mật khẩu tài khoản

Pre-condition Actor chọn “Đổi mật khẩu”

Trigger - Actor có quyền Admin, Register_Client

Basic Flow 1 Nhấn chuột vào nút “Đổi mật khẩu” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang changePassword

2 Nhập mật khẩu hiện tại, mật khẩu mới và mật khẩu xác nhận

3 Nhấn “Lưu thông tin” để xác nhận việc sửa đổi mật khẩu Nếu thành công trở về màn hình trước, ngược lại nếu thất bại show ra màn hình lỗi

1.1 Actor nhấn vào “Quay lại” 1.2 Actor sẽ trở lại trạng thái trước đó Bussiness rule Không có

Bảng 3 20 Use case đổi mật khẩu

3.3.3.9 Use case quản lý lịch sử đơn hàng “View order”

Hình 3 12 Use case quản lý lịch sử đơn hàng “View order”

3.3.3.9.1 Use case xem thông tin chi tiết đơn hàng

Description Xem thông tin chi tiết đơn hàng

Pre-condition Actor chọn “Đơn hàng chờ xác nhận”

Trigger - Actor có quyền Register_Client

Basic Flow 1 Nhấn chuột vào hóa đơn trong “Đơn hàng chờ xác nhận” ở trang orderHistory

2 Hệ thống gọi Api paypal và hiển thị thông tin xác nhận

3 Hiển thị thông tin chi tiết đơn hàng

Bảng 3 21 Use case xem thông tin chi tiết đơn hàng

3.3.3.9.2 Use case yêu cầu huỷ đơn hàng

Description Yêu cầu đơn hàng

Pre-condition Actor chọn “Lịch Sử Mua Hàng”

- Có kết nối Internet Basic Flow 1 Nhấn “Lịch Sử Mua Hàng”

2 Chuyển hướng đến trang orderHistory

3 Nhấn vào “Yêu cầu huỷ đơn” của một đơn hàng bất kì khi đơn hàng còn trong tình trạng chưa xác nhận

4 Xóa đơn hàng ra khỏi danh sách, hiển thị thông báo thành công và trả về trang orderHistory

Bảng 3 22 Use case xóa đơn hàng

3.3.3.10 Use case quản lý sách “Manager book”

Hình 3 13 Use case quản lý sách “Manager book”

Pre-condition Actor chọn “Thêm sách”

Trigger - Actor có quyền Admin

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Thêm sách”

1 Hệ thống sẽ yêu cầu nhập thông tin sách

2 Actor sẽ nhập thông tin sách và nhấn “Lưu”

3 Hệ thống xác nhận thông tin sách được thêm

4 Actor trở lại trạng thái trước đó

5 Use case kết thúc phiên làm việc

1 Nếu Actor muốn dừng việc thêm sách:

Bảng 3 23 Use case thêm sách

3.3.3.10.2 Use case sửa đổi thông tin sách

Description Sửa đổi thông tin sách

Pre-condition Actor chọn “Cập nhật thông tin sách”

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Cập nhật sách”

1 Hệ thống sẽ hiện ra thông tin sách và cấp quyền sửa đổi cho Actor

2 Actor sẽ cập nhật thông tin sách và nhấn “Lưu”

3 Hệ thống xác nhận thông tin sách được cập nhật

1 Nếu Actor muốn dừng việc cập nhật sách:

Bảng 3 24 Use case sửa đổi thông tin sách

Description Xóa thông tin sách

Pre-condition Actor chọn “Xóa sách”

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Xóa sách”

1 Hệ thống sẽ hiện ra thông tin sách và cấp quyền xóa sách cho Actor

2 Actor nhấn Xóa và xác nhận

3 Hệ thống xác nhận thông tin sách bị xóa

1 Nếu Actor muốn dừng việc xóa sách:

1.2 Actor sẽ trở lại trạng thái trước đó

Bảng 3 25 Use case xóa sách

3.3.3.10.4 Use case xem chi tiết sách

Description Xem thông tin sách

Pre-condition Actor chọn sách cần xem thông tin

- Có kết nối Internet Basic Flow Sau khi Actor chọn sách cần xem thông tin:

1 Hệ thống sẽ hiện ra thông tin sách

Bảng 3 26 Use case xem sách

Đ ẶC TẢ CHỨC NĂNG

3.3.1 Bảng requirement dành cho use case

1 Search book by name and author

1.1 Search book by name and author filter by type

1.2 Search book by name and author filter by author

1.3 Search book by name and author and filter by price range

2 Filter book Guest, Admin, Register Client

2.1 Filter book by type Guest, Admin, Register Client

2.2 Filter book by author Guest, Admin, Register Client

2.3 Filter book by price range Guest, Admin, Register Client

2.4 Sort by latest, best sellers, best sales, price (min to max and max to min)

3 View book Guest, Admin, Register Client

3.1 View book detail Guest, Admin, Register Client

4 Manager book cart Guest, Register Client

4.1 View book cart Guest, Register Client

4.3 Add book cart Guest, Register Client

4.3 Update book cart Guest, Register Client

4.4 Delete book cart Guest, Register Client

6.1 Login with user email Guest

7 Logout an account User, Admin

8 View account Register_Client, Admin

8.1 View account information Register_Client, Admin

8.2 Update account information Register_Client, Admin

8.3 Change account password Register_Client, Admin

9.1 View order detail Register_Client

Bảng 3 1 Bảng Requirement dành cho use case

- Registered_Client (Guest sau khi đăng nhập)

3.3.3.1 Use case tìm kiếm sách “Search book”

Hình 3 4 Use case tìm kiếm sách “Search book”

3.3.3.1 Usecase tìm sách theo tên sách

Tìm kiếm sách trực tuyến bằng cách nhập tên sách và tên tác giả Kết quả sẽ được hiển thị theo mức độ khớp với các thuộc tính tên sách và tên tác giả.

Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên sidebar

2 Actor nhập tên sách cần tìm kiếm

3 Nhấn biểu tượng ‘Tìm Kiếm”

4 Hiển thị trang chứa danh sách các sách được tìm kiếm Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 2 Use case tìm sách theo tên sách và tên tác giả

3.3.3.1.1 Use case tìm sách theo thể loại

Name Search book and filter by type

Description Tìm sách trên web và lọc theo thể loại

Basic Flow 1 Actor nhấn vào thể loại muốn ở bộ lọc bên trái

2 Hiển thị trang chứa danh sách các sách theo thể loại được tìm kiếm Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 3 Use case tìm sách và lọc theo thể loại

Name Search book and filter by author

Basic Flow 1 Actor nhấn vào tên tác giả muốn ở bộ lọc bên trái

Bảng 3 4 Use case tìm sách và lọc theo tên tác giả

Name Search book and filter by price range

Basic Flow 1 Actor nhấn vào khoảng giá đã được liệt kê ở bộ lọc bên trái hoặc nhập khoảng giá mà actor muốn và sumit

Bảng 3 5 Use case tìm sách và lọc trong khoảng giá

3.3.3.2 Use case chọn lọc sách “Filter book”

Hình 3 5 Use case chọn lọc sách “Filter book”

3.3.3.2.1 Use case chọn lọc sách theo tên thể loại

Name Filter book by type

Description Chọn lọc sách trên web theo tên thể loại

Basic Flow 1 Trỏ chuột đến “Thể Loại” trên thanh menu để hiển thị danh sách thể loại

2 Actor nhấn chọn một tên thể loại

Bảng 3 6 Use case chọn lọc sách theo tên thể loại

3.3.3.2.2 Use case chọn lọc sách theo tên tác giả

Name Filter book by author

Description Chọn lọc sách trên web theo tên tác giả

Basic Flow 1 Trỏ chuột đến “Tác Giả” trên thanh menu để hiển thị danh sách tác giả đang được mua nhiều nhất

2 Actor nhấn chọn một tên tác giả

Bảng 3 7 Use case chọn lọc sách theo tên tác giả

3.3.3.2.3 Use case chọn lọc sách theo khoản giá

Name Filter book by price

Description Chọn lọc sách trên web theo khoảng giá

Basic Flow 1 Trỏ chuột đến “Giá” trên thanh menu để hiển thị danh sách các khoản giá

2 Actor nhấn chọn một khoản giá

3 Hiển thị trang chứa danh sách theo khoản giá tương ứng Alternative flow Hiển thị thông báo không có kết quả tìm kiếm

Bảng 3 8 Use case chọn lọc sách theo giá tiền

3.3.3.2.4 Use case sắp xếp sách

Name Sort book by latest, best sellers, best sales, price min max

Description Sắp xếp sách trên web theo thứ tự như mới nhất, bán chạy nhất, giảm giá nhiều nhất, giá giảm dần và tang dần

Basic Flow 1 Actor chọn mục sắp xếp sách ở trên màn hình hiển thị sách

2 Hiển thị trang chứa sách được sắp xếp như đã chọn

Bảng 3 9 Use case chọn lọc sách theo số sao đánh giá

3.3.3.3 Use case xem thông tin sách “View book detail”

Hình 3 6 Use case xem thông tin sách “View book detail”

3.3.3.3.1 Use case xem thông tin chi tiết sách

Description Xem thông tin chi tiết sách

Basic Flow 1 Click vào biểu tượng chi tiết sách đang được trưng bày trên web

Khi đó website chuyển hướng sang trang bookdetail và hiện thông tin chi tiết sách vừa được nhấn

Alternative flow Thao tác thất bại chuyển đến trang Eror404

Bảng 3 10 Use case xem chi tiết sách

3.3.3.4 Use case quản lý giỏ hàng “Manager book cart”

Hình 3 7 Use case quản lý giỏ hàng “Manager book cart”

3.3.3.4.1 Use case xem sách trong giỏ hàng

Description Xem sách đã đưa vào giỏ hàng

Để truy cập giỏ hàng, hãy nhấn vào biểu tượng giỏ mua sắm ở góc trên bên phải của trang web Ngay lập tức, bạn sẽ được chuyển đến trang giỏ hàng, nơi hiển thị danh sách các sách đã thêm, bao gồm tên, hình ảnh, giá cả và số lượng.

Để thực hiện quy trình cơ bản, người dùng cần nhấn nút “Giỏ Hàng”, sau đó website sẽ chuyển hướng đến trang giỏ hàng, nơi hiển thị danh sách các sách đã thêm vào giỏ, bao gồm tên, hình ảnh, giá cả và số lượng Trong trường hợp thao tác thất bại, người dùng sẽ được chuyển đến trang lỗi Eror404.

Bảng 3 11 Use case xem sách trong giỏ hàng

3.3.3.4.2 Use case thêm sách vào giỏ hàng

Name Add book to cart

Description Thêm sách vào giỏ hàng

Để mua sách trong cửa hàng, bạn chỉ cần nhấn “Chọn Mua” cho bất kỳ cuốn sách nào Hành động này sẽ thêm sách vào giỏ hàng với số lượng 1 và cập nhật tổng tiền mua sách.

Basic Flow 2 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trong bookDetail

3 Khi đó sách được thêm vào giỏ hàng với số lượng n (tùy vào số nhập) và tổng tiền mua sách đó bị thay đổi

Kiểm tra quy tắc kinh doanh yêu cầu số lượng mỗi sách trong giỏ hàng không được vượt quá 10 và không được ít hơn 1 Đồng thời, cần xác minh rằng đầu vào không được phép nhập chữ cái hoặc ký tự đặc biệt.

Bảng 3 12 Use case thêm sách trong giỏ hàng

3.3.3.4.3 Use case cập nhật giỏ hàng

Description Cập nhật giỏ hàng

Khi bạn nhấn “Chọn Mua” cho một quyển sách trong cửa hàng, sách đó sẽ được thêm vào giỏ hàng với số lượng n Lúc này, số lượng quyển sách trong giỏ hàng sẽ tăng thêm 1, và tổng tiền mua sách sẽ được cập nhật tương ứng.

Basic Flow 2 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trang bookDetail và sách đó đã tồn tại trong giỏ hàng với số lượng n

Basic Flow 3 1 Click tăng giảm số lượng hoặc nhập vào số lượng sách muốn mua ở trang bookCart

Trong quy tắc kinh doanh, cần xác minh rằng số lượng mỗi sách trong giỏ hàng không được vượt quá 10 và không được ít hơn 1 Đồng thời, cũng phải kiểm tra rằng đầu vào không được phép nhập chữ cái hoặc ký tự đặc biệt.

Bảng 3 13 Use case cập nhật giỏ hàng

3.3.3.4.4 Use case xóa sách trong giỏ hàng

Description Xóa sách trong giỏ hàng

Trigger Thao tác đến trang bookCart

Basic Flow 1 1 Nhấn icon Remove ở trang cartBook của 1 quyển sách Khi đó sách xe được xoá khỏi giỏ hàng và cập nhật lại giá trị tổng tiền

Basic Flow 2 1 Click giảm số lượng của sách về 0 Khi đó sách sẽ được xóa khỏi giỏ hàng và cập nhật lại giá trị tổng tiền

Để đảm bảo tính hợp lệ trong quy trình mua sắm, quy tắc kinh doanh yêu cầu kiểm tra số lượng mỗi sách trong giỏ hàng không được vượt quá 10 và không được dưới 1 Đồng thời, cần xác minh rằng người dùng không được phép nhập chữ cái hoặc ký tự đặc biệt vào ô nhập liệu.

Bảng 3 14 Use case xóa sản phẩm khỏi giỏ hàng 3.3.3.5 Use case đăng ký tài khoản “Register an account”

Hình 3 8 Use case đăng ký tài khoản

Description Chức năng Đăng ký tài khoản để tạo một tài khoản trên hệ thống

Basic Flow 1 Nhấn nút (Đăng nhập/Đăng ký) ở trang chủ để đi đến trang loginPage

2 Nhập Tên người dùng, Email, Mật khẩu vào thẻ input

4 Kiểm tra Email của Guest nhập có tồn tại hay chưa?

+ Email tồn tại: thông báo Email đã tồn tại

+ Email không tồn tại: Tới bước 5

5 Tạo tài khoản mới với thông tin đã nhập, hiện thông báo:

‘Đăng ký thành công, giờ bạn có thể Đăng Nhập vào hệ thống’ sau đó chuyển trang về trang đăng nhập

Alternative flow + Nếu thực hiện không thành công chuyển đến trang báo lỗi

Bussiness rule + Email phải đúng định dạng Nếu không đúng định dạng email sẽ thông báo: ‘Hãy nhập địa chỉ email!’

+ Password phải có ít nhất 6 kí tự + Các thẻ input để trống

Hệ thống kiểm tra các thẻ input và thông báo "Không được để trống!!!" nếu có thẻ nào bị trống Ngoài ra, mật khẩu nhập vào phải trùng khớp với mật khẩu nhập lại.

Bảng 3 15 Use case đăng ký

3.3.3.6 Use case đăng nhập vào tài khoản “Login an account”

Hình 3 9 Use case đăng nhập

3.3.3.6.1 Use case đăng nhập bằng tài khoản đăng ký

Name Login with user email

Description Đăng nhập bằng tài khoản đăng ký

Basic Flow 1 Guest nhấn nút Đăng nhập ở trang chủ để mở form đăng nhập

2 Nhập Email vào thẻ input ‘Email đăng nhập’

3 Nhập Password vào thẻ input ‘Mật khẩu’

5 Kiểm tra các thông tin trên có chính xác hay không?

+ Chính xác: Tới bước 7 + Không chính xác: Tới bước 6 + User không tồn tại: Tới bước 6

6 Thông báo “Đăng nhập thất bại!” Reload lại page Trang chủ

7 Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng ở header

+ Chọn ‘Hủy’ Đóng form Đăng Nhập Nếu thực hiện không thành công chuyển đến trang báo lỗi

Bussiness rule + Password or Email để trống

Hệ thống kiểm tra các thẻ input, nếu có thẻ input nào bị trống thì hệ thống sẽ hiển thị thông báo "Không được để trống!!!"

+ Email phải đúng định dạng Nếu không đúng định dạng email sẽ thông báo: ‘Hãy nhập địa chỉ email!’

+ Password phải có ít nhất 6 kí tự

Bảng 3 16 Use case đăng nhập bằng tài khoản đăng ký

3.3.3.7 Use case đăng xuất “Logout an account”

Hình 3 10 Use case đăng xuất “Logout an account”

Description Chức năng đăng xuất tài khoản

Basic Flow 1 Nhấn nút (Đăng xuất) để đăng xuất khỏi cửa sổ làm việc và về trang chủ Alternative flow Không có

Bảng 3 17 Use case đăng xuất “Logout an account”

3.3.3.8 Use case quản lý thông tin tài khoản “View account”

Hình 3 11 Use case quản lý thông tin tài khoản “View account”

3.3.3.8.1 Use case xem thông tin cá nhân

Description Xem thông tin cá nhân

Pre-condition Actor chọn “Thông tin tài khoản”

Basic Flow Nhấn chuột vào nút “Thông tin tài khoản” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang accountProfile

1 Nếu Actor muốn dừng việc xem thông tin cá nhân:

1.1 Actor nhấn vào “Quay trở lại”

Bảng 3 18 Use case xem thông tin cá nhân

3.3.3.8.2 Use case sửa đổi thông tin cá nhân

Description Sửa đổi thông tin cá nhân

Pre-condition Actor chọn “Sửa đổi thông tin”

Basic Flow 1 Nhấn chuột vào nút “Sửa đổi thông tin” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang accountProfileEdit

2 Sửa đổi thông tin trừ email

3 Nhấn “Lưu thông tin” để xác nhận việc sửa đổi Nếu thành công trở về màn hình trước, ngược lại nếu thất bại show ra màn hình lỗi

1.1 Actor nhấn vào “Quay lại”

Bảng 3 19 Use case chỉnh sửa thông tin cá nhân

3.3.3.8.3 Use case đổi mật khẩu

Description Đổi mật khẩu tài khoản

Pre-condition Actor chọn “Đổi mật khẩu”

Trigger - Actor có quyền Admin, Register_Client

Basic Flow 1 Nhấn chuột vào nút “Đổi mật khẩu” ở tài khoản đối với

Register_Client cũng như Admin Khi đó chuyển qua trang changePassword

2 Nhập mật khẩu hiện tại, mật khẩu mới và mật khẩu xác nhận

3 Nhấn “Lưu thông tin” để xác nhận việc sửa đổi mật khẩu Nếu thành công trở về màn hình trước, ngược lại nếu thất bại show ra màn hình lỗi

1.1 Actor nhấn vào “Quay lại” 1.2 Actor sẽ trở lại trạng thái trước đó Bussiness rule Không có

Bảng 3 20 Use case đổi mật khẩu

3.3.3.9 Use case quản lý lịch sử đơn hàng “View order”

Hình 3 12 Use case quản lý lịch sử đơn hàng “View order”

3.3.3.9.1 Use case xem thông tin chi tiết đơn hàng

Description Xem thông tin chi tiết đơn hàng

Pre-condition Actor chọn “Đơn hàng chờ xác nhận”

Basic Flow 1 Nhấn chuột vào hóa đơn trong “Đơn hàng chờ xác nhận” ở trang orderHistory

2 Hệ thống gọi Api paypal và hiển thị thông tin xác nhận

3 Hiển thị thông tin chi tiết đơn hàng

Bảng 3 21 Use case xem thông tin chi tiết đơn hàng

3.3.3.9.2 Use case yêu cầu huỷ đơn hàng

Description Yêu cầu đơn hàng

Pre-condition Actor chọn “Lịch Sử Mua Hàng”

- Có kết nối Internet Basic Flow 1 Nhấn “Lịch Sử Mua Hàng”

2 Chuyển hướng đến trang orderHistory

3 Nhấn vào “Yêu cầu huỷ đơn” của một đơn hàng bất kì khi đơn hàng còn trong tình trạng chưa xác nhận

4 Xóa đơn hàng ra khỏi danh sách, hiển thị thông báo thành công và trả về trang orderHistory

Bảng 3 22 Use case xóa đơn hàng

3.3.3.10 Use case quản lý sách “Manager book”

Hình 3 13 Use case quản lý sách “Manager book”

Pre-condition Actor chọn “Thêm sách”

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Thêm sách”

1 Hệ thống sẽ yêu cầu nhập thông tin sách

2 Actor sẽ nhập thông tin sách và nhấn “Lưu”

3 Hệ thống xác nhận thông tin sách được thêm

1 Nếu Actor muốn dừng việc thêm sách:

Bảng 3 23 Use case thêm sách

3.3.3.10.2 Use case sửa đổi thông tin sách

Description Sửa đổi thông tin sách

Pre-condition Actor chọn “Cập nhật thông tin sách”

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Cập nhật sách”

1 Hệ thống sẽ hiện ra thông tin sách và cấp quyền sửa đổi cho Actor

2 Actor sẽ cập nhật thông tin sách và nhấn “Lưu”

3 Hệ thống xác nhận thông tin sách được cập nhật

1 Nếu Actor muốn dừng việc cập nhật sách:

Bảng 3 24 Use case sửa đổi thông tin sách

Description Xóa thông tin sách

Pre-condition Actor chọn “Xóa sách”

- Có kết nối Internet Basic Flow Sau khi Actor truy cập vào tính năng “Xóa sách”

1 Hệ thống sẽ hiện ra thông tin sách và cấp quyền xóa sách cho Actor

2 Actor nhấn Xóa và xác nhận

3 Hệ thống xác nhận thông tin sách bị xóa

1 Nếu Actor muốn dừng việc xóa sách:

1.2 Actor sẽ trở lại trạng thái trước đó

Bảng 3 25 Use case xóa sách

3.3.3.10.4 Use case xem chi tiết sách

Description Xem thông tin sách

Pre-condition Actor chọn sách cần xem thông tin

- Có kết nối Internet Basic Flow Sau khi Actor chọn sách cần xem thông tin:

1 Hệ thống sẽ hiện ra thông tin sách

Bảng 3 26 Use case xem sách

THIẾT KẾ ỨNG DỤNG

T HIẾT KẾ DỮ LIỆU

4.1.1 Sơ đồ thiết kế dữ liệu

Hình 4 1 Sơ đồ thiết kế dữ liệu

Chương 4: Thiết kế ứng dụng 46

4.1.2 Mô tả sơ đồ thiết kế dữ liệu

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

1 _id ObjectId Giá trị ID được tạo tự động

3 author String Tên tác giả

4 publishinghouse String Nhà xuất bản

5 status String Tình trạng của sách

6 Price Number Giá của sách

7 salePrice Number Giá sách sau khi giảm giá

8 Discount Number Phần trăm giảm giá

9 Amount Number Số sách có trong kho

10 bookInformation String Nội dung của sách

11 Manufacturer String Nhà sản xuất

12 Type String Thể loại sách

13 Image Array Đường dẫn hình ảnh của sách

14 addDate Timestamp Ngày thêm sách

Bảng 4 1 Mô tả dữ liệu BookModel

2 typeName1 String Tên loại sách

3 typeName2 String Tên loại sách không dấu

Bảng 4 2 Mô tả dữ liệu typeModel

2 authorName1 String Tên tác giả

3 authorName2 String Tên tác giả không dấu

Bảng 4 3 Mô tả dữ liệu authorModel

1 _id String Giá trị ID được tạo tự động

2 bookID String ID của sách

3 bookName String Tên của sách

4 amount Number Số lượng sách

5 orderID String ID của đơn hàng tổng

6 discount Number Phần trăm giảm giá

7 unitPrice Number Đơn giá của sách

Bảng 4 4 Mô tả dữ liệu orderDetail

2 CustomerName String Tên khách hàng

3 CustomerID String ID của khách hàng

4 Status String Trạng thái của đơn hàng

5 ShippingAddress String Địa chỉ giao hàng

6 phoneNumber String Số điện thoại giao hàng

7 totalPrice Number Tổng giá của đơn hàng

8 discountPrice Number Tổng giá của đơn hàng sau khi giảm giá

Bảng 4 5 Mô tả dữ liệu Collection: OrderModel

2 Name String Tên của user

3 Password String Mật khẩu đăng nhập

4 Role String Vai trò của user

5 Gender String Giới tính user

6 Status String Trạng thái tài khoản

7 Dob Datetime Ngày sinh của user

8 Phonenumber String Số điện thoại của user

9 Email String Địa chỉ email của user

Bảng 4 6 Mô tả dữ liệu Collection: Customer

2 idUser String Id của user

3 Name String Tên người nhận hàng

4 Address String Địa chỉ giao hàng

5 Phonenumber String Số điện thoại người nhận hàng

Bảng 4 7 Mô tả dữ liệu Collection: userAddress

2 DiscountCode String Mã giảm giá

3 DiscountValue Number Phần trăm giảm giá

4 Amount Number Số lượng sử dụng

5 UserID String UserID dành cho user có thể sử dụng mã

Bảng 4 8 Mô tả dữ liệu Collection: Discount_code

S Ơ ĐỒ TUẦN TỰ (S EQUENCE D IAGRAM )

4.2.1 Sequence tìm kiếm sách “Search book”

4.2.1.1 Sequence tìm sách theo tên sách và tên tác giả

Hình 4 2 Sequence tìm sách theo tên sách và tên tác giả

4.2.1.2 Sequence tìm sách và lọc theo thể loại

Hình 4 3 Sequence tìm sách và lọc theo thể loại

4.2.1.3 Sequence tìm sách và lọc theo tên tác giả

Hình 4 4 Sequence tìm sách theo tên tác giả

4.2.1.4 Sequence tìm sách và lọc theo khoảng giá

Hình 4 5 Sequence tìm sách và lọc theo khoảng giá

4.2.2 Sequence chọn lọc sách “Filter book”

4.2.2.1 Sequence chọn lọc sách theo tên thể loại

Hình 4 6 Sequence chọn lọc sách theo tên thể loại

4.2.2.2 Sequence chọn lọc sách theo tên tác giả

Hình 4 7 Sequence chọn lọc sách theo tên tác giả 4.2.2.3 Sequence chọn lọc sách theo giá tiền

Hình 4 8 Sequence chọn lọc sách theo giá tiền

4.2.2.4 Sequence sắp xếp sách phần tram giảm giá nhiều nhất và giảm dần

Hình 4 9 Sequence sắp xếp sách phần trăm giảm giá nhiều nhất và giảm dần 4.2.3 Sequence xem thông tin sách “View book detail”

Hình 4 10 Sequence xem thông tin chi tiết sách

4.2.4 Sequence quản lý giỏ hàng “Manager book cart”

4.2.4.1 Sequence xem sách trong giỏ hàng

Hình 4 11 Sequence xem sách trong giỏ hàng 4.2.4.2 Sequence thêm sách vào giỏ hàng

Hình 4 12 Sequence thêm sách vào giỏ hàng

4.2.4.3 Sequence xóa sách trong giỏ hàng

Hình 4 13 Sequence xóa sách trong giỏ hàng

4.2.5 Sequence đăng ký tài khoản “Register an account”

Hình 4 14 Sequence đăng ký tài khoản “Register an account”

4.2.6 Sequence đăng nhập vào tài khoản “Login an account”

Hình 4 15 Sequence đăng nhập vào tài khoản “Login an account”

4.2.7 Sequence quản lý thông tin tài khoản “View account”

4.2.7.1 Sequence xem thông tin cá nhân

Hình 4 16 Sequence xem thông tin cá nhân 4.2.7.2 Sequence sửa đổi thông tin cá nhân

Hình 4 17.Sequence sửa đổi thông tin cá nhân

Hình 4 18 Sequence đổi mật khẩu

4.2.8 Sequence quản lý lịch sử đơn hàng “View order”

4.2.8.1 Sequence xem thông tin đơn hàng

Hình 4 19 Sequence xem thông tin đơn hàng

4.2.8.2 Sequence xem thông tin chi tiết đơn hàng

Hình 4 20 Sequence xem thông tin chi tiết đơn hàng 4.2.8.3 Sequence yêu cầu hủy đơn hàng

Hình 4 21 Sequence yêu cầu xóa đơn hàng

4.2.9 Sequence quản lý sách “Manager book”

4.2.9.2 Sequence sửa đổi thông tin sách

Hình 4 23.Sequence sửa đổi thông tin sách

T HIẾT KẾ GIAO DIỆN

4.3.1 Screen flow cho web phía khách hàng

Hình 4 26.Screen Flow cho trang web dành cho khách hàng khi chưa login

Hình 4 27.Screen Flow cho trang web dành cho khách hàng sau khi login

SCP001 Home Screen Màn hình trang chủ trước khi login vào hệ thống để làm việc SCP002 Login and Register Screen Màn hình đăng nhập

SCP003 BookCategory Screen Màn hình thể loại và show các sách thuộc thể loại đó SCP004 BookDetail Screen Màn hình chi tiết sách

Màn hình viết đánh giá cho sách cũng như xem các đánh giá về cuốn sách

SCP005 CartBook Screen Màn hình giỏ hàng

SCP006 Shipping Screen Màn hình xác nhận thông tin địa chỉ nhận hàng của khách hàng

SCP006a Shipping Screen – Insert Location

Màn hình thêm thông tin địa chỉ nhận hàng

SCP006b Shipping Screen – Update Location

Màn hình sửa thông tin địa chỉ nhận hàng

SCP007 Payment Screen Màn hình hiển thị ra các phương thức thanh toán dành cho khách hàng

SCP008 Account Screen Màn hình hiển thị các menu liên quan đến profile của người dùng, lịch sử mua hàng, danh sách các cuốn sách yêu thích,

SCP009 Profile Screen Màn hình hiển thị thông tin cơ bản của user như email, username, …

SCP0010 OrderHistory Screen Màn hình hiển thị các hóa đơn đã mua của khách hàng cũng như xem được tình trạng của đơn hàng

SCP0011 DiscountCode Screen Màn hình show các thông tin về mã khuyến mãi SCP0012 Favorite Screen Màn hình hiển thị các sách yêu thích

SCPM01 Modal Buy Book Successful Screen Màn hình hiển thị thông báo mua hàng thành công cùng số lượng sách đã mua

Bảng 4 9 Mô tả màn hình khách hàng 4.3.1.1 SCP001 Home Screen

No Name Required Type Reference Note

1 Logo trang web trên header

7 Số lượng sách trong giỏ hàng

8 Tên thể loại Label Data từ API

9 Chuyển tiếp đến sách theo thể loại tưng ứng

10 Hình ảnh sách Image Data từ API

11 Tên sách Label Data từ API

12 Giá Label Data từ API

Bảng 4 10.Mô tả SCP001 Home Screen

1 Email đăng nhập True Text

2 Mật khẩu True Input Hiển thị dưới dạng

3 Đăng nhập Button Khi click sẽ xác nhận người dùng, đồng thời vào trang web dành cho khách hàng hoặc admin

4 Quên mật khẩu Button Khi click, chuyển đến màn hình lostPassword

5 Chuyển tiếp đến trang đăng ký

Button Khi click, chuyển đến màn hình đăng ký

Bảng 4 11.Mô tả SCP002 Login Screen

1 Tìm sách True Input Tìm sách theo từ khoá

2 Lựa chọn cách sắp xếp True Select-

3 Loại sách Button Data từ API Khi click sẽ show sách theo loại sách đã chọn

Bảng 4 12.Mô tả SCP003 BookCategory Screen

1 Ảnh sách chính Image Data từ API

2 Ảnh sách phụ Image Data từ API

4 Thể loại Label Data từ API

5 Tác giả Label Data từ API

6 Giá sau khi khuyến mãi

7 Giá gốc Label Data từ API

8 Khuyến mãi Label Data từ API

9 Thêm vào giỏ hàng Button Khi click, chuyển đến màn hình giỏ hàng

Bảng 4 13.Mô tả SCP004 BookDetail Screen

1 Ảnh sách Image Data từ API

4 Giảm số lượng sách mua

Button Khi click, số lượng sách trong giỏ hàng giảm 1

5 Số lượng sách cần mua

6 Tăng số lượng sách mua

Button Khi click, số lượng sách trong giỏ hàng tăng 1

7 Tổng tiền từng sách ứng với số lượng

8 Xóa sách ra khỏi giỏ hàng

Button Khi click, sách cùng với số lượng bị xóa khỏi giỏ hàng

9 Tổng tiền cuối cùng khách hàng phải trả

10 Tiếp tục mua sắm Button Khi click, trở về màn hình shop

11 Xoá giỏ hàng Button Khi click, xoá tất cả sản phẩm trong giỏ hàng

12 Tiếp tục để đặt hàng Button Khi click, chuyển hướng sang trang đặt hàng

Bảng 4 14.Mô tả SCP005 CartBook Screen

3 Mật khẩu True Input Hiển thị dưới dạng

4 Đăng ký Button Khi click sẽ xử lý tạo người dùng với email và password được nhập, nếu thành công thông báo đăng ký

Chương 4: Thiết kế ứng dụng 76 thành công và chuyển về màn hình đăng nhập

5 Chuyển tiếp đến trang đăng nhập

Button Khi click, chuyển đến màn hình đăng nhập

Bảng 4 15.Mô tả SCP006 Signup Screen

5 Ghi chú Input Ghi chú đơn hàng

6 Tên sản phẩm có trong đơn hàng

7 Tổng số tiền phải trả cho món hàng tương ứng

8 Tống tiền khách phải trả cho đơn hàng

9 Đặt hàng Button Khi click nút này hệ thống sẽ tạo đơn hàng với thông tin khách hàng cung cấp

Bảng 4 16.Mô tả SCP007 Checkout Screen

4.3.2 Screen flow cho web phía Admin

Hình 4 35.Screen Flow cho trang web dành cho Admin

SAP001 Dashboard Screen Màn hình hiển thị tổng quan doanh thu SAP002 Manage Book Screen Màn hình hiển thị quản lý danh sách sản phẩm

SAP003 View Book Screen Màn hình hiển thị thông tin sản phẩm

Màn hình SAP004 cho phép người dùng cập nhật thông tin sản phẩm, trong khi màn hình SAP005 hỗ trợ việc thêm sản phẩm mới vào hệ thống Bên cạnh đó, màn hình SAP006 cung cấp chức năng quản lý các đơn đặt hàng, giúp theo dõi và điều phối quy trình đặt hàng hiệu quả.

SAP007 Admin Profile Screen Màn hình hiển thị thông tin Admin

SAP008 Update Profile Screen Màn hình cho phép Admin cập nhật thông tin SAP009 Change Password Screen Màn hình cho phép Admin đổi mật khẩu

SAP010 Manage User Screen Màn hình quản lý người dung

SAP011 View User Screen Màn hình xem thông tin người dùng

SAP012 Update User Screen Màn hình cho phép cập nhật quyền người dùng

Bảng 4 17.Mô tả màn hình Admin

Hình 4 36.SAP002 Manage Book Screen

1 Thêm sách Button Khi click sẽ chuyển đến trang thêm sách mới

3 Ảnh sách img Data từ API

4 Tác giả Label Data từ API

6 Chi tiết Button Khi click, chuyển đến màn hình chi tiết sách

7 Icon Edit Button Khi click, chuyển đến màn hình cập nhật thông tin sách

Bảng 4 18.Mô tả SAP002 Manage Book Screen

Hình 4 37.SAP003 View Book Screen

1 Hình sách Img Data từ API

3 Tên Tác giả Label Data từ API

4 Tên Thể loại Label Data từ API

5 Giá sách Label Data từ API

6 Tên nhà xuất bản Label Data từ API

7 Năm xuất bản Label Data từ API

8 Tên nhà cung cấp Label Data từ API

9 Trạng thái Label Data từ API

10 Trở Về Button Trở về trang trước

Bảng 4 19.Mô tả SAP003 View Book Screen

Hình 4 38 SAP004 Update Book Screen

1 nameBook True Input Data từ API

2 authorBook True Input Data từ API

3 imgBook True Input Data từ API

4 typeBook True Input Data từ API

5 priceBook True Input Data từ API

6 Nhà xuất bản True Input Data từ API

7 Năm xuất bản True Input Data từ API

8 Nhà cung cấp True Input Data từ API

9 statusBook True Input Data từ API

10 Thông tin sách Input Data từ API

11 Lưu Button Khi click sẽ cập nhật thông tin sách theo dữ liệu được nhập và chuyển hướng về trang quản lý sách

Bảng 4 20.Mô tả SAP004 Update Book Screen

Hình 4 39.SAP005 Insert Book Screen

5 Thông tin sách True Input

6 Nhà xuất bản True Input

7 Năm xuất bản True Input

11 Lưu Thông Tin Button Khi click, thực hiện tạo một sách mới

12 Trở Về Button Trở về trang trước

Bảng 4 21.Mô tả SAP005 Insert Book Screen

Hình 4 40.SAP006 Manage Order Screen

1 Tên khách hàng Label Data từ API

2 Số điện thoại Label Data từ API

3 Địa chỉ giao hàng Label Data từ API

4 Tổng tiền Label Data từ API

5 Cập nhật thông tin đơn hàng

Button Chuyển hướng đến trang cập nhật đơn hàng

7 Thêm đơn hàng mới Button Chuyển hướng đên trang thêm mới một đơn hàng

Bảng 4 22.Mô tả SAP006 Manage Order Screen

Hình 4 41.SAP010 Manage User Screen

1 userName Label Data từ API

2 emailUser Label Data từ API

3 roleUser Label Data từ API

4 genderUser Label Data từ API

5 Địa chỉ Label Data từ API

6 Icon Edit Button Khi click, chuyển đến màn hình cập nhật thông tin user

Bảng 4 23.Mô tả SAP010 Manage User Screen

Hình 4 42.SAP012 Update User Screen

1 Chỉnh sửa thông tin của “email”

2 password Input Data từ API

3 userName Input Data từ API

4 roleUser Input Data từ API

6 Địa chỉ Input Data từ API

7 Lưu Thông Tin Button Khi click, chuyển đến màn hình quản lý user

8 Trở Về Button Quay lại trang trước đó

Bảng 4 24.Mô tả SAP012 Update User Screen

Chương 5: Cài đặt và kiểm thử 90

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

K IỂM THỬ PHẦN MỀM

Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu

Description Test steps Expected Output Result

SignUp_001 Đăng ký tài khoản user

1 Nhập các thông tin yêu cầu trên màn hình: địa chỉ Email, Tên đầy đủ, Mật khẩu và xác nhận mật khẩu

2 Nhấn nút Đăng ký Đăng ký thành công chuyển sang màn hình login

SignUp_002 Kiểm tra bỏ trống những trường đánh dấu sao

1 Bỏ trống các trường đánh dấu sao và nhấn Đăng ký

Yêu cầu nhập lại thông tin đầy đủ tương ứng với từng trường

SignUp_003 Kiểm tra nhập email đã tồn tại trong hệ thống

1 Nhập các thông tin yêu cầu trên và nhập email đã tồn tại trong hệ thống

Hệ thống không cho tạo tài khoản vì email đã tồn tại và yêu cầu phải nhập lại

Bảng 5 1 Kiểm thử phần mềm chức năng đăng ký

Kiểm tra việc đăng nhập khi chưa có tài khoản

1 Nhập tên đăng nhập và mật khẩu chưa đăng kí trong hệ thống

Hiện ra thông báo “Tài khoản email hoặc mật khẩu không chính xác!”

SignIn _002 Đăng nhập bằng tài khoản user

1 Nhập email và password của tài khoản user

2 Nhấn nút Đăng nhập Đăng nhập thành công hệ thống chuyển sang trang HomePage Đăng nhập thất bại sẽ show lỗi ra màn hình và trang yêu cầu nhập lại

SignIn _003 Đăng nhập bằng tài khoản admin

1 Nhập email và password của tài khoản admin

In Đăng nhập thành công hệ thống chuyển sang trang quản lý của admin Đăng nhập thất bại reload trang yêu cầu nhập lại

Bảng 5 2.Kiểm thử phần mềm chức năng đăng nhập

5.2.3 Chức năng đổi mật khẩu

Kiểm tra việc đổi mật khẩu với việc nhập mật khẩu sai

2 Nhấn nút đổi mật khẩu

Hiện ra thông báo “Mật khẩu bạn nhập không chính xác”

Kiểm tra việc đổi mật khẩu với việc nhập mật khẩu đúng

1 Nhập mật khẩu hiện tại đúng

2 Nhấn nút Đổi mật khẩu

Hiện ra thông báo “Đổi mật khẩu thành công”

Bảng 5 3.Kiểm thử phần mềm chức năng đổi mật khẩu

5.2.4 Chức năng tìm kiếm sách

Tìm kiếm sách đã có trong hệ thống

1 Truy cập vào trang HomePage

2 Nhập tên sách đã tồn tại vào ô input

Xuất hiện sách tương ứng

Tìm kiếm sách theo tên tác giả

2 Nhập tên tác giả vào ô input

Xuất hiện sách có thuộc tính tác giả cần tìm

Kiểm tra việc không cho phép nhập ký tự đặc biệt vào ô input

“Không được chứa ký tự đặc biệt”

_004 Tìm kiếm sách với keywords trống

2 Nhấn vào nút tìm kiếm

Hiện ra trang tất cả sách sắp xếp theo bán chạy nhất

Bảng 5 4.Kiểm thử chức năng tìm kiếm sách

KẾT LUẬN

Ư U ĐIỂM VÀ NHƯỢC ĐIỂM

• Tích lũy kỹ năng làm việc nhóm, kỹ năng giao tiếp trong team, phân công công việc trong khi làm khóa luận

• Kỹ năng search tài liệu, kỹ năng tìm kiếm giải pháp trên mạng cho những khúc mắc trong quá trình xây dựng đồ án

Hiểu biết sâu về công nghệ, tôi đã xây dựng một server cung cấp REST API cho cả ứng dụng web và di động Tôi cũng có khả năng sử dụng cơ sở dữ liệu không quan hệ (No SQL) để thiết lập hệ thống database hiệu quả.

• Xây dựng được một trang web với công nghệ MERN Stack Có thể phục vụ cho người buôn bán cá nhân và doanh nghiệp nhỏ

Khi thực hiện khóa luận, việc sắp xếp thời gian hợp lý là rất quan trọng để hoàn thành công việc hiệu quả Ngoài ra, việc áp dụng branch trên GitHub giúp sao lưu dữ liệu và tránh tình trạng bất đồng bộ giữa các thành viên trong nhóm, đảm bảo tiến độ và chất lượng của dự án.

6.2 Ưu điểm và nhược điểm

- Website được thiết kế với giao diện hiện đại, dễ nhìn và dễ tiếp cận

- Thao tác sử dụng đơn giản

Chức năng tìm kiếm cho phép người dùng truy xuất dữ liệu dựa trên số điểm trùng khớp từ thuộc tính tên sách và tên tác giả Ngoài ra, người dùng cũng có thể lọc các thuộc tính sau khi thực hiện tìm kiếm, giúp quá trình tìm kiếm trở nên tiện lợi và hiệu quả hơn.

- Phần giao diện chưa hoàn thiện, còn thiếu sót và lỗi

- Vì còn thiếu kinh nghiệm và nghiệp vụ cho nên việc xử lý các chức năng chưa được tối ưu

- Chưa hoàn thành đủ những chức năng nhóm đề ra lúc đầu.

H ƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI

- Hoàn thiện các chức năng và phát triển ứng dụng di động

- Tích hợp thêm nhiều cổng thanh toán như Zalo Pay, MoMo, Internet Banking.

Tiêu đề	Xây Dựng Website Bán Sách Trên Nền Tảng MERN Stack
Tác giả	Nguyễn Hoàng Kim, Nguyễn Song Hoàng
Người hướng dẫn	ThS. Nguyễn Trần Thi Văn
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	115
Dung lượng	9,7 MB