Ứng dụng mern stack xây dựng wesite bán giày

Ứng dụng mern stack xây dựng wesite bán giày Ứng dụng mern stack xây dựng wesite bán giày Ứng dụng mern stack xây dựng wesite bán giày Ứng dụng mern stack xây dựng wesite bán giày Ứng dụng mern stack xây dựng wesite bán giày Ứng dụng mern stack xây dựng wesite bán giày

NỘI DUNG

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

2.1.1 Khái quát về Technical Stack

"Technical Stack", "Technology Stack", "Solution Stack" hay đơn giản là "Tech Stack" là những thuật ngữ chỉ tập hợp các nền tảng, phần mềm, cơ sở dữ liệu và công nghệ cần thiết cho việc phát triển phần mềm Một Technical Stack thường bao gồm nhiều bộ công nghệ phối hợp với nhau, với một số Technical Stack phổ biến như:

 LAMP Stack (Linux, Apache, mySQL, PHP)

 LAM Stack (AWS Lambda, Angular, MongoDB)

 MERN Stack (MongoDB, ExpressJS, ReacJS, NodeJS)

 WISA Stack (Window, IIS, SQL Server, ASP.NET) [1]

2.1.1.2 Các thành phần cơ bản của Technical Stack

Một Technical Stack thường bao gồm:

 Ngôn ngữ lập trình (hoặc là Framework) Front-end

 Ngôn ngữ lập trình (hoặc là Framework) Back-end

Lấy LAMP Stack làm ví dụ, ta có:

 PHP, python (ngôn ngữ lập trình)

2.1.2 Khái quát về MERN Stack

MERN STACK là một framework JavaScript toàn diện, dễ sử dụng, giúp phát triển các trang web và ứng dụng động Đây là một giải pháp mã nguồn mở và hoàn toàn miễn phí.

MERN là một công nghệ mạnh mẽ cho phép xây dựng ứng dụng Single Page Application (SPA) bằng JavaScript, mang lại hiệu quả và tính hiện đại trong phát triển web.

2.1.2.2 Các thành phần cơ bản của MERN Stack

MongoDB là một cơ sở dữ liệu NoSQL nổi bật với các đặc điểm không ràng buộc, phân tán và mã nguồn mở Nó cho phép khả năng mở rộng theo chiều ngang và có khả năng lưu trữ, xử lý dữ liệu lên đến hàng petabytes.

ExpressJS là một web application framework cho NodeJS, cung cấp các tính năng mạnh mẽ cho việc xây dựng một ứng dụng web đúng nghĩa

ReactJS là một thư viện JavaScript đang ngày càng phổ biến nhờ vào sự đơn giản và khả năng tích hợp dễ dàng với các thư viện JavaScript khác Thư viện này không chỉ hoạt động trên phía client mà còn hỗ trợ render trên server, cho phép kết nối linh hoạt giữa các thành phần.

 NodeJS - Web server (Back-end):

NodeJS nổi bật trong việc phát triển các ứng dụng web nhanh chóng và có khả năng mở rộng, đặc biệt là các ứng dụng thời gian thực Một trong những điểm mạnh nhất của Node.js là khả năng sử dụng JavaScript cho cả phần front-end và back-end.

2.2 GIỚI THIỆU VỀ HỆ QUẢN TRỊ CSDL MONGODB

Cơ sở dữ liệu NoSQL, được giới thiệu lần đầu vào năm 1998, đánh dấu sự phát triển của thế hệ cơ sở dữ liệu mới với đặc điểm phân tán và không ràng buộc.

NoSQL Database ra đời, giải quyết được những khuyết điểm của RDBMS:

 Dữ liệu được lưu dưới dạng document, object Truy vấn dễ dàng và nhanh hơn RDBMS nhiều

 NoSQL có thể làm việc hoàn toàn thuận tiện với dữ liệu dạng không có cấu trúc

 Việc đổi cấu trúc dữ liệu rất dễ dàng và nhanh gọn trong NoSQL

 Vì không đặt nặng tính ACID của transactions và tính nhất quán của dữ liệu, NoSQL DB có thể mở rộng, chạy trên nhiều máy một cách dễ dàng [4][5]

MongoDB là một cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được phát triển bằng ngôn ngữ C++ Nó lưu trữ dữ liệu theo định dạng tài liệu (document) với cấu trúc tương tự JSON, giúp tăng tốc độ truy vấn dữ liệu một cách đáng kể.

MongoDB mang lại nhiều lợi thế như ít yêu cầu về schema, cấu trúc đối tượng rõ ràng, không cần sử dụng các phép Join phức tạp và khả năng mở rộng vượt trội Điều này khiến MongoDB trở thành lựa chọn lý tưởng cho các ứng dụng thời gian thực.

Mongoose là một thư viện Object Data Modeling (ODM) được phát triển cho MongoDB, sử dụng NodeJS để mô hình hóa và đối tượng hóa dữ liệu, giúp lập trình viên dễ dàng làm việc với dữ liệu theo hướng đối tượng.

Hình 2.1: Mô hình họa động của Mongoose

Mongoose cung cấp các hàm hỗ trợ Express trong việc thực hiện các tác vụ cơ bản giữa máy chủ web và cơ sở dữ liệu, bao gồm kết nối cơ sở dữ liệu qua connection string, truy vấn dữ liệu, cũng như tạo mới, lưu trữ, xóa và cập nhật thông tin.

NodeJS is an open-source runtime environment that enables JavaScript to run on the server-side Built on the Google V8 JavaScript engine, NodeJS utilizes an event-driven, non-blocking I/O model to execute code efficiently.

 Nhanh: Được thực thi trên Google V8 engine, mã JavaScript được build thẳng ra mã

Assembly nên tốc độ xử lý của các ứng dụng NodeJS nhanh hơn Java, Python, PHP [10]

NodeJS là một môi trường thực thi cho JavaScript, vì vậy các lập trình viên Front-end đã quen thuộc với JavaScript có thể nhanh chóng học và sử dụng NodeJS.

 Hiệu năng cao: Nhờ vào cơ chế Single Thread và Event Loop, mà JavaScript tiết kiệm tài nguyên hơn cho hệ thống

Mutil thread trên hệ thống cũ:

Hình 2.2: Multi thread trên hệ thống cũ

Các hệ thống cũ thường gặp vấn đề khi mỗi lần server nhận một yêu cầu, nó sẽ tạo ra một Thread mới để xử lý, dẫn đến việc tiêu tốn tài nguyên và có nguy cơ quá tải server.

Single thread trên những hệ thống mới:

NodeJS hoạt động dựa trên cơ chế Single Thread, nhưng bên trong, các tác vụ được xử lý theo phương thức đa luồng bất đồng bộ (asynchronous).

CHƯƠNG 3: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU

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

+ Thông tin tài khoản khách hàng và quản trị viên

+ Thông tin danh mục sản phẩm, chi tiết sản phẩm

+ Thông tin về đơn hàng

+ Các chức năng cần thiết cho khách hàng: thông tin sản phẩm yêu thích, lịch sử truy cập sản phẩm

+ Các số liệu thống kê về sản phẩm

Khách hàng có thể dễ dàng tra cứu thông tin cá nhân, danh mục sản phẩm, chi tiết từng sản phẩm, cũng như bình luận về sản phẩm Bên cạnh đó, họ còn có thể xem danh sách sản phẩm yêu thích và lịch sử mua hàng của mình.

Quản trị viên có khả năng tra cứu thông tin chi tiết về người dùng, danh mục sản phẩm, sản phẩm cụ thể, đơn hàng, cũng như thống kê theo ngày hoặc theo khoảng thời gian đã được xác định trước.

+ Tính toán phí ship, tiền đơn hàng

+ Tính toán các số liệu thống kê

+ Thống kê số liệu từ Google Analytics

+ Sản phẩm bán chạy, không bán chạy

+ Sản phẩm được xem và đặt hàng nhiều nhất theo các mốc thời gian

+ Thống kê khách hàng mua hàng thường xuyên, truy cập website thường xuyên

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

+ Guest: Xem trang chủ, xem các thông tin về website, xem danh mục sản phẩm, thông tin sản phẩm; tìm kiếm sản phẩm

Khách hàng không chỉ có thể sử dụng các chức năng của Guest mà còn được phép quản lý tài khoản cá nhân, theo dõi sản phẩm yêu thích, xem lịch sử mua sắm, nhận tin nhắn, trò chuyện với quản trị viên, cũng như quản lý giỏ hàng và thực hiện thanh toán.

+ Admin: Quản lý người dùng, quản lý danh mục sản phẩm, quản lý sản phẩm, quản lý đơn hàng, Gửi tin nhắn, Chat, Xem các thống kê

3.1.2 Yêu cầu phi chức năng Đối với người dùng:

+ Giao diện thân thiện với người dùng, các đối tượng trên giao diện được bố trí hợp lý, màu sắc phải phù hợp, hài hòa, dễ dàng quan sát

+ Dễ dàng đăng ký, đăng nhập

+ Thao tác tìm kiếm đơn giản, hiệu quả

+ Quá trình mua hàng dễ dàng, thao tác dễ dàng, không phức tạp

+ Có thể liên hệ để hỗ trợ giải quyết khó khăn

+ Thông tin sản phẩm hiển thị đúng đắn

+ Giá cả, chi phí của đơn hàng tính toán phải hợp lý, chính xác

+ Xử lý các thao tác phải nhanh chóng

+ Thông báo lỗi cụ thể khi xảy ra lỗi

+ Về cơ bản, phải sử dụng được website trên máy tính và smartphone

Nâng cấp hệ thống dễ dàng và tích hợp nhiều chức năng nâng cao như trí tuệ nhân tạo hoặc mô hình tích lũy điểm sẽ giúp tăng cường hiệu quả và thu hút khách hàng Điều này đặc biệt có lợi cho lập trình viên trong việc phát triển ứng dụng.

Dễ bảo trì là một ưu điểm quan trọng, cho phép sửa chữa các lỗi liên quan đến giao diện và hệ thống dữ liệu một cách nhanh chóng và hiệu quả Điều này giúp giảm thiểu chi phí sửa chữa khi sự cố xảy ra, đảm bảo hoạt động liên tục và ổn định cho hệ thống.

Website thương mại điện tử ngày nay đang trở nên phổ biến và đáp ứng nhu cầu của nhiều doanh nghiệp và cá nhân Việc tái sử dụng các nền tảng để xây dựng website kinh doanh với nhiều loại mặt hàng khác nhau trở nên dễ dàng hơn bao giờ hết Ngoài ra, chúng ta có thể phát triển các website đa năng tương tự như Lazada, Tiki, hay Shopee.

3.1.3 Xác định và mô tả chức năng của các Actor

Có 3 hình thức đăng nhập: đăng nhập thông qua tài khoản Facebook, thông qua tài khoản Google hoặc đăng nhập bằng tài khoản đã được đăng ký trực tiếp trên website Ở 2 hình thức đầu chỉ cần chọn đúng chức năng được hiển thị trên giao diện và cấp quyền truy cập thì sẽ đăng nhập thành công Còn đối với đăng nhập qua tài khoản đã đăng ký trên website thì khách hàng nhập Email hoặc Số điện thoại và Password đúng như thông tin lúc đăng ký thì khách hàng sẽ đăng nhập thành công Khi đăng nhập thành công, từ trang đăng nhập sẽ chuyển hướng đến trang chủ

Người dùng phải nhập đầy đủ thông tin cần thiết như: Email, số điện thoại, mật khẩu, xác nhận mật khẩu, Họ tên, ngày tháng năm sinh

Khi người dùng nhập sai thông tin, hệ thống sẽ hiển thị thông báo lỗi cụ thể, chẳng hạn như mật khẩu không khớp, bỏ trống các trường bắt buộc, email không hợp lệ, hoặc mật khẩu không đủ số lượng ký tự yêu cầu.

Khi người dùng đăng ký tài khoản thành công, thông tin đăng ký sẽ được lưu trữ an toàn trong cơ sở dữ liệu, và mật khẩu sẽ được mã hóa nhằm bảo vệ tính bảo mật cho khách hàng.

3 Quên mật khẩu Lưu trữ

Khi khách hàng quên mật khẩu và sử dụng chức năng "quên mật khẩu", hệ thống sẽ yêu cầu nhập Email Sau đó, một email chứa mã xác nhận sẽ được gửi đến khách hàng Khách hàng cần đăng nhập vào tài khoản email và nhập mã xác nhận trên giao diện Nếu mã nhập đúng, hệ thống sẽ cho phép khách hàng xác nhận và thiết lập mật khẩu mới Sau khi cập nhật mật khẩu mới thành công, hệ thống sẽ chuyển hướng đến trang chủ của website.

4 Xem trang chủ Tra cứu

Để truy cập trang chủ của website và xem thông tin sản phẩm, khách hàng chỉ cần nhấn vào menu trang chủ hoặc click vào logo của website.

Website cung cấp thông tin cần thiết để khách hàng dễ dàng liên hệ khi có thắc mắc hoặc muốn trao đổi thông tin với cửa hàng Khách hàng chỉ cần chọn vào menu "Liên hệ" để xem đầy đủ thông tin, bao gồm vị trí cửa hàng trên bản đồ, địa chỉ, số điện thoại và email.

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

Trên menu chính của website, có ba loại hàng chính: giày nam, giày nữ và giày trẻ em Khách hàng chỉ cần nhấp chuột vào danh mục mong muốn để xem sản phẩm Các phân loại hàng nhỏ hơn được hiển thị trong menu phụ trên trang chủ.

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

Khi khách hàng nhấp vào một sản phẩm, thông tin chi tiết của sản phẩm đó sẽ được hiển thị Sản phẩm có thể xuất hiện trên trang chủ, trang tìm kiếm, trang danh mục và trang danh sách yêu thích.

8 Tìm kiếm sản phẩm Tra cứu

Nhập từ khóa vào ô tìm kiếm nằm trên menu chính của website, hệ thống sẽ tiến hành tìm kiếm và hiển thị danh sách sản phẩm liên quan đến từ khóa đó.

Bảng 3.1: Xác định và mô tả chức năng của Actor Guest

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

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

9 Xem thông tin cá nhân

CHƯƠNG 4: THIẾT KẾ PHẦN MỀM

4.1.1.1 Sequence Diagram cho use case Đăng nhập qua Facebook/Google

Hình 4.1: Sequence Diagram Đăng nhập qua Facebook/Google

4.1.1.2 Sequence Diagram cho use case Đăng nhập bằng Email/SĐT

Hình 4.2: Sequence Diagram Đăng nhập bằng Email/SĐT

4.1.1.3 Sequence Diagram cho use case Đăng ký

Hình 4.3: Sequence Diagram Đăng ký

4.1.1.4 Sequence Diagram cho use case Quên mật khẩu

Hình 4.4: Sequence Diagram Quên mật khẩu

4.1.1.5 Sequence Diagram cho use case Thay đổi thông tin

Hình 4.5: Sequence Diagram Thay đổi thông tin

4.1.1.6 Sequence Diagram cho use case Đổi mật khẩu

Hình 4.6: Sequence Diagram Đổi mật khẩu

4.1.1.7 Sequence Diagram cho use case Hủy đơn hàng

Hình 4.7: Sequence Diagram Hủy đơn hàng

4.1.1.8 Sequence Diagram cho use case Xác nhận đơn hàng và thanh toán

Hình 4.8: Sequence Diagram Xác nhận đơn hàng và thanh toán

4.1.1.9 Sequence Diagram cho use case Thêm user

Hình 4.9: Sequence Diagram Thêm user

4.1.1.10 Sequence Diagram cho use case Sửa user

Hình 4.10: Sequence Diagram Sửa user

4.1.1.11 Sequence Diagram cho use case Xóa user

Hình 4.11: Sequence Diagram Xóa user

4.1.1.12 Sequence Diagram cho use case Tìm kiếm user

Hình 4.12: Sequence Diagram Tìm kiếm user

4.1.1.13 Sequence Diagram cho use case Thêm Sự kiện sale

Hình 4.13: Sequence Diagram Thêm Sự kiện sale

4.2 THIẾT KẾ CỞ SỞ DỮ LIỆU

Hình 4.14: Lượt đồ Quan hệ

The article discusses the essential elements of an email collection system, which includes user information such as first name, last name, phone number, address, date of birth, and password It also highlights key features like favoritelist, historylist, and cart management, along with user roles and visit/order tracking Additionally, it covers product details including ID, name, quantity, costs, images, descriptions, sizes, ratings, comments, and categories The content emphasizes the importance of creation dates, views, orders, and product status, while also addressing sale events and the management of user-generated content through sender information and timestamps.

Bảng 4.1: Thuộc tính của các collection users, products, productcategories,messages

The article outlines essential data points for managing order information, including collection chats, user details such as email, full name, phone number, and address, as well as financial metrics like total product cost, shipping cost, and payment details It emphasizes the importance of tracking the status of orders, payment methods (including PayPal and Stripe), and timestamps for each interaction Additionally, it highlights the need for monitoring product views and order details to enhance customer experience and streamline operations.

Bảng 4.2: Thuộc tính của các collection orders, statistics,chats

STT Tên thuộc tính Mô tả Kiểu dữ liệu

1 id Mỗi user sẽ có một id riêng để phân biệt với user khác Id của user được sinh tự động ObjectId

2 firstname Họ của cá nhân đăng ký tài khoản String

3 lastname Tên của cá nhân đăng ký tài khoản String

4 email Email dùng để đăng ký tài khoản, được sử dụng để lấy lại tài khoản khi quên mật khẩu String

5 numberPhone Số điện thoại của cá nhân đăng ký tài khoản String

7 dob Ngày tháng năm sinh của cá nhân đăng ký tài khoản String

8 password Mật khẩu người dùng đặt để đăng nhập vào website, được lưu vào CSDL sau khi mã hóa String

9 favoritelist Danh sách sản phẩm yêu thích của khách hàng Array

10 historylist Danh sách các sản phẩm đã xem của khách hàng Array

11 cart Danh sách các sản phẩm mà khách hàng đã thêm vào giỏ hàng

12 role Phân quyền người dùng mang giá trị user hoặc admin String

13 qvisit Tổng số lần truy cập website Number

14 qorder Tổng số lần đặt hàng Number

Danh sách danh mục sản phẩm cùng với số lượng mà khách hàng đã đặt hàng các sản phẩm có trong danh mục đó

16 currentVoucher Danh sách voucher mà khách hàng đang sở hữu Array

17 isDeleted Mang giá trị true nghĩa là tài khoản đã được xóa hoặc false nghĩa là tài khoản đang được sử dụng Boolean

Bảng 4.3: Mô tả dữ liệu collection users

Mỗi danh mục sản phẩm sẽ có một id riêng biệt để phân biệt với các danh mục sản phẩm khác, id này được sinh tự động

2 name Tên của danh mục sản phẩm String

3 displayName Tên hiển thị của danh mục sản phẩm String

4 quanty Số lượng sản phẩm của danh mục Number

5 description Mô tả về danh mục sản phẩm String

6 listProduct Danh sách sản phẩm thuộc danh mục array

7 image Hình ảnh về danh mục sản phẩm String

Danh sách các sự kiện khuyến mãi được thêm bởi admin để giảm giá các sản phẩm thuộc Danh mục cụ thể

Trạng thái 'sale' nghĩa là danh mục đang trong thời gian khuyến mãi giảm giá, ngược lại danh mục mang trạng thái 'normal' (bình thường)

Bảng 4.4: Mô tả dữ liệu collection productcategories

1 id Mỗi sản phẩm sẽ có một id riêng biệt để phân biệt với các sản phẩm khác, id này được sinh tự động ObjectId

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

3 quanty Số lượng sản phẩm Number

4 costs Giá của sản phẩm Number

5 image Hình ảnh về sản phẩm object

6 desciption Mô tả về sản phẩm String

7 sizes Kích cỡ của sản phẩm array

8 ratings Thông tin số lượng đánh giá sản phẩm Array

Object comments Bình luận về sản phẩm Array

Object category Danh sách id các category mà sản phẩm đang thuộc

60 createat Thời gian sản phẩm được thêm, tính bằng đơn vị miliseconds Number views Số lượt xem của sản phẩm Number

9 orders Số lượt đặt hàng của sản phẩm Number

Mang giá trị 'sale1' khi sản phẩm đang được giảm 15%, 'sale2' khi sản phẩm đang được giảm 25%, ngược lại sản phẩm mang giá trị 'normal' (bình thường)

Mang giá trị true nghĩa là sản phẩm đã được xóa bởi admin, ngược lại sản phẩm đang được bán bình thường mang giá trị false

Bảng 4.5: Mô tả dữ liệu collection products

Mỗi đơn hàng sẽ có một id riêng biệt để phân biệt với các đơn hàng khác, id này được sinh tự động

2 email Email của người mua hàng String

3 time Thời gian đơn hàng được tạo String

4 timestamp Dấu thời gian Number

5 fullname Họ và tên của khách hàng String

6 phonenumber Số điện thoại liên hệ của khách hàng String

7 address Địa chỉ giao hàng mà khách hàng đã nhập String

8 sumproductcost Tổng giá tiền đơn hàng Number

9 sumshipcost Tổng phí ship của đơn hàng Number

10 listproduct Danh sách sản phẩm của đơn hàng array

11 status Trạng thái giao hàng của đơn hàng String

12 code Mã code xác nhận của đơn hàng Number

Mang giá trị true khi đơn hàng đã được thanh toán (online hoặc shipcode), ngược lại mang giá trị false

14 costVoucher Mang giá trị của voucher nếu sử dụng voucher giảm giá cho đơn hàng, ngược lại mang giá trị 0 Number

Khi chọn phương thức thanh toán khi nhận hàng, giá trị sẽ là 'cash' Ngược lại, nếu thanh toán trực tuyến, giá trị sẽ phụ thuộc vào cổng thanh toán và có thể là 'paypal', 'stripe', 'vnpay' hoặc 'zalopay'.

16 paypalSale Lưu id sale để phục vụ cho việc hoàn tiền khi thanh toán qua paypal String

17 stripeChargeId Lưu stripe charge id để phục vụ cho việc hoàn tiền khi thanh toán qua stripe String

Bảng 4.6: Mô tả dữ liệu collection orders

1 id Mỗi tin nhắn sẽ có một id riêng biệt để phân biệt với các tin nhắn khác, id này được sinh tự động ObjectId

2 index Tiêu đề của tin nhắn String

3 content Nội dung của tin nhắn String

4 datetime Thời gian tin nhắn được tạo String

5 sender Người gửi tin nhắn String

Bảng 4.7: Mô tả dữ liệu collection messages

STT Tên thuộc tính Mô tả Kiểu dữ liệu id id để phân biệt các ngày thống kê ObjectID

Chuỗi kết hợp ngày tháng năm theo định dạng

"ddMMyyyy" để phân biệt ngày này với ngày khác

2 viewproduct Mảng này lưu id sản phẩm và số lần xem sản phẩm tương ứng array

3 orderproduct Mảng này lưu id sản phẩm và số lượng sản phẩm khi khách hàng đã xác nhận mua sản phẩm array

Bảng 4.8: Mô tả dữ liệu collection statistics

1 id id để phân biệt giữa các tin nhắn với nhau ObjectID

2 sender Chứa thông tin người gửi mang giá trị của email hoặc số điện thoại String

3 receiver Mặc định là admin String

4 content Nội dung tin nhắn gửi đi String

5 timestamp Thời điểm gửi tin nhắn, đơn vị là miliseconds Number

Mang giá trị text nếu tin nhắn gửi đi là tin nhắn văn bản, mang giá trị emoji nếu tin nhắn gửi đi là icon

7 day Ngày giờ gửi tin nhắn String

8 seen Mang giá trị true khi tin nhắn đã được người nhận xem, ngược lại mang giá trị false Boolean

Bảng 4.9: Mô tả dữ liệu collection chats

- Thiết kế giao diện với tính đúng đắn:

Hình 4.15: Đối tượng trên màn hình Đăng nhập Ý nghĩa: Đăng nhập tài khoản, chuyển vai trò từ Guest thành User hoặc Admin Các đối tượng trong màn hình:

STT Tên đối tượng Kiểu Ghi chú

2 Nút đăng nhập với Facebook Button

3 Nút đăng nhập với Google Button

4 Input nhập Email/SDT Thẻ Input

5 Input nhập mật khẩu Thẻ Input

7 Link chuyển đến đăng ký Thẻ a

8 Link chuyển đến quên mật khẩu Thẻ a

Bảng 4.10: Bảng mô tả đối tượng màn hình Đăng nhập

Hình 4.16: Xử lý trên màn hình Đăng nhập

STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú

Khi bạn đăng nhập lần đầu với tài khoản Facebook hiện tại, Facebook sẽ yêu cầu bạn cấp quyền truy cập để thu thập thông tin và lưu vào cơ sở dữ liệu Nếu không, hệ thống sẽ sử dụng thông tin đã được lưu trong cơ sở dữ liệu để xác nhận quá trình đăng nhập.

Khi đăng nhập lần đầu với tài khoản Google, người dùng sẽ cần cấp quyền truy cập để Google thu thập thông tin và lưu vào cơ sở dữ liệu Nếu không, Google sẽ sử dụng thông tin đã có trong cơ sở dữ liệu để xác nhận quá trình đăng nhập.

3 Đăng nhập với Emai/SDT và Password

Nếu đúng tài khoản và mật khẩu thì sẽ đưa đến trang chủ tương ứng với quyền truy cập của tài khoản đó, ngược lại báo lỗi:

“Email/SDT hoặc mật khẩu không đúng”

Click vào link "Đăng ký" Đi đến trang đăng ký tài khoản

Click vào link "Quên mật khẩu" Đi đến trang quên mật khẩu để thực hiện các bước để lấy lại mật khẩu

Bảng 4.11: Bảng mô tả xử lý trên màn hình Đăng nhập

Hình 4.17: Đối tượng trên màn hình Đăng ký Ý nghĩa: Đăng ký tài khoản để đăng nhập vào hệ thống

Các đối tượng trong màn hình:

6, 7 Input nhập dữ liệu các trường Thẻ input

8 Tiêu đề ngày sinh Thẻ input

9, 10, 11 Combobox chọn ngày, tháng, năm sinh Thẻ select

Bảng 4.12: Bảng mô tả đối tượng màn hình Đăng ký

Hình 4.18: Xử lý trên màn hình Đăng ký

Click vào button "Đăng ký"

Nếu chưa nhập đầy đủ những trường thì hệ thống sẽ yêu cầu bạn hoàn thành

Nếu nhập mật khẩu không khớp thì hệ thống sẽ yêu cầu bạn nhập lại

Kiểm tra Email/SDT có tồn tại trong hệ thống không, nếu có thông báo

“Emai/SDT đã tồn tại”

Nếu kiểm tra hợp hệ thì hệ thống sẽ cập nhật tài khoản đăng ký vào CSDL và chuyển đến trang đăng nhập

Bảng 4.13: Bảng mô tả xử lý trên màn hình Đăng ký

4.3.3 Màn hình quên mật khẩu

Hình 4.19: Đối tượng trên màn hình Quên mật khẩu Ý nghĩa: Dùng để đổi mật khẩu mới khi quên mật khẩu đăng nhập

1 Input nhập Email Thẻ input

4, 5 Link đến Gmail, YahooMail Thẻ a

6 Link gửi lại mã Thẻ a

7 Input nhập mã xác nhận Thẻ input

9, 10 Input nhập mật khẩu, xác nhận mật khẩu Thẻ input

11 Nút cập nhật mật khẩu Button

Bảng 4.14: Bảng mô tả đối tượng màn hình Quên mật khẩu

Hình 4.20: Xử lý trên màn hình Quên mật khẩu

STT Tên xử lý Điều kiện gọi thực hiện

Hiển thị form nhập mã xác nhận

Click vào button "Tiếp tục"

Hệ thống sẽ xác thực địa chỉ email hoặc số điện thoại đã nhập và gửi mã code xác nhận đến email hoặc số điện thoại đó, sau đó chuyển đến form xác nhận.

2 Đi đến hộp thư Gmail

Click vào link "Đi đến Gmail"

Mở hộp thư Gmail trong một cửa sổ mới

3 Đi đến hộp thư Yahoomail

Click vào link "Đi đến YahooMail"

Mở hộp thư YahooMail trong một cửa số mới

Click vào link "Gửi lại mã"

Gửi lại một mã code vào email hoặc số điện thoại và yêu cầu xác nhận lại

Hiển thị form đổi mật khẩu mới

Click vào button "Tiếp tục"

Nếu mã code được nhập không đúng sẽ thông báo lỗi và yêu cầu nhập lại, ngược lại form đổi mật khẩu mới hiển thị

Click vào button "Cập nhật mật khẩu"

Nếu mật khẩu và xác nhận mật khẩu khớp thì hệ thống sẽ cập nhật mật khẩu mới đã mã hóa vào CSDL và đi đến trang đăng nhập

Bảng 4.15: Bảng mô tả xử lý trên màn hình Quên mật khẩu

Hình 4.21: Đối tượng trên màn hình Trang chủ Ý nghĩa: Hiển thị menu, các danh mục sản phẩm cùng với các sản phẩm đại diện cho những danh mục đó

4 Input tìm kiếm Thẻ Input

6 Icon link đến facebook Thẻ a, i

7 Danh sách menu chính Thẻ ul, li

10 Số lượng sản phẩm trong giỏ hàng Thẻ span

11 Icon danh mục sản phẩm Thẻ i

12 Tiêu đề danh mục Thẻ h2

13 Danh mục sản phẩm Thẻ a, i

15 Nút về đầu trang Thẻ a

16 Menu chức năng user Thẻ li, a

18 Tiêu đề mục sản phẩm Thẻ h2

19 Ảnh sản phẩm Thẻ img

20 Sao đánh giá sản phẩm Thẻ div, i

22 Giá sản phẩm Thẻ span

24 Các icon thông tin liên hệ Thẻ div, i

25 Thông tin liên hệ Thẻ p

27 Bản đồ vị trí kho hàng Thẻ div, iframe

Bảng 4.16: Bảng mô tả đối tượng màn hình Trang chủ Guest

Hình 4.22: Xử lý trên màn hình Trang chủ

1 Đi đến trang đăng nhập

Click vào link "Đăng nhập"

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

2 Đi đến trang đăng ký

Click vào link "Đăng ký"

Chuyển đến trang đăng ký tài khoản

Lưu cục bộ lại nội dung search và chuyển đến trang search

4 Đi đến facebook của website

Chuyển đến trang của cửa hàng trên facebook

Click vào giỏ hàng Chuyển đến trang thanh toán các sản phẩm có trong giỏ hàng

"Trang chủ" Chuyển đến trang chủ của Guest

Click vào các mục menu "Giày nam"

Chuyển đến danh mục các sản phẩm giày nam

Click vào các mục menu "Giày nữ"

Chuyển đến danh mục các sản phẩm giày nữ

Click vào các mục menu "Trẻ em"

Chuyển đến danh mục các sản phẩm trẻ em

10 Đi đến trang liên hệ

Click vào menu "Liên hệ"

Chuyển đến trang hiển thị thông tin liên hệ của cửa hàng

Click vào logo website Chuyển đến trang chủ

Chuyến đến danh mục hiển thị các sản phẩm khuyến mãi

Chuyến đến danh mục hiển thị các sản phẩm Adidas

Chuyến đến danh mục hiển thị các sản phẩm Nike

Clik vào nút có mũi tên hướng lên Trượt quay về đầu trang

Lấy danh sách sản phẩm

Lấy danh sách sản phẩm theo từng danh mục và hiển thị một vài sản phẩm làm đại diện

Click vào menu "Tin nhắn"

Chuyển đến trang hiển thị danh sách tin nhắn từ quản trị viên

18 Đến trang Lịch sử đơn hàng

Click vào menu "Đơn hàng"

Chuyển đến trang hiển thị danh sách đơn hàng đã đặt bởi user

19 Đến trang Sản phẩm yêu thích

Click vào menu "Yêu thích"

Chuyển đến trang quản lý danh sách sản phẩm yêu thích của user

20 Đến trang Quản lý tài khoản

Chuyển đến trang quản lý tài khoản user như về thông tin cá nhân, mật khẩu…

21 Đến trang Đổi mật khẩu

Click vào option "Đổi mật khẩu "

Chuyển trực tiếp đến trang đổi mật khẩu user

Thoát khỏi quyền user, chuyển hướng đến trang chủ Guest

Load sản phẩm ứng với danh mục

Lấy và tính toán dữ liệu của sản phẩm từ CSDL, sau đó hiển thị lên trang chủ

24 Đi đến trang chi tiết sản phẩm

Click vào tên hoặc hình ảnh sản phẩm

Lưu cục bộ lại id sản phẩm và đi đến trang chi tiết sản phẩm

Hiển thị giao diện chat để user có thể liên hệ với quản trị viên

Bảng 4.17: Bảng mô tả xử lý trên màn hình Trang chủ Guest

4.3.5 Màn hình Quản lý tài khoản

Hình 4.23: Đối tượng trên màn hình Quản lý tài khoản Ý nghĩa: Hiển thị các option quản lý cho user

3 Xem thông tin cá nhân Thẻ span

5 Đối mật khẩu Thẻ span

7 Lịch sử mua hàng Thẻ span

9 Danh sách sản phẩm yêu thích Thẻ span

Bảng 4.18: Bảng mô tả đối tượng màn hình Quản lý tài khoản

Hình 4.24: Xử lý trên màn hình Quản lý tài khoản

1 Đi đến trang thông tin cá nhân

"Xem thông tin cá nhân"

Chuyển đến trang hiển thị thông tin cá nhân

2 Đi đến trang đổi mật khẩu

Chuyển đến trang đổi mật khẩu

3 Đi đến trang lịch sử order

Chuyển đến trang hiển thị lịch sử đặt hàng các sản phẩm

4 Đi đến trang danh sách sản phẩm yêu thích

"Danh sách sản phẩm yêu thích"

Chuyển đến trang hiển thị và quản lý danh sách sản phẩm yêu thích

Bảng 4.19: Bảng mô tả xử lý trên màn hình Quản lý tài khoản

4.3.6 Màn hình thông tin cá nhân

Hình 4.25: Đối tượng trên màn hình Thông tin cá nhân Ý nghĩa: Hiển thị thông tin cá nhân của user

2, 3, 4, 5 Thông tin các trường Thẻ span

6 Nút thay đổi thông tin Button

7 Nút đổi mật khẩu Button

Bảng 4.20: Bảng mô tả đối tượng màn hình Thông tin cá nhân

Hình 4.26: Xử lý trên màn hình Thông tin cá nhân

Load trang thông tin user

Lấy thông tin user từ CSDL ứng với Email/SDT đã lưu trữ và hiển thị lên giao diện

2 Đến trang thay đổi thông tin

Chuyển đến trang thay đổi thông tin cá nhân

3 Đến trang đổi mật khẩu

Click vào button "Đổi mật khẩu" Chuyển đến trang đổi mật khẩu

Bảng 4.21: Bảng mô tả xử lý trên màn hình Thông tin cá nhân

4.3.7 Màn hình Thay đổi thông tin cá nhân

Hình 4.27: Đối tượng trên màn hình Thay đổi thông tin cá nhân Ý nghĩa: Thay đổi thông tin cá nhân của user

3, 5, 7, 9 Input nhập các trường Thẻ input

Combobox chọn ngày tháng năm sinh Thẻ select

14 Nút lưu thông tin Button

15 Nút hủy cập nhật thông tin Button

Bảng 4.22: Bảng mô tả đối tượng màn hình Thay đổi thông tin cá nhân

Hình 4.28: Xử lý trên màn hình Thay đổi thông tin cá nhân

"Thay đổi thông tin" từ trang thông tin user

Lấy thông tin user từ CSDL ứng với Email/SDT đã lưu trữ và hiển thị lên giao diện

Cập nhật thông tin cá nhân

Nếu bạn điền đầy đủ các trường thông tin, dữ liệu cá nhân của bạn sẽ được cập nhật vào cơ sở dữ liệu và hiển thị trên trang xem thông tin cá nhân với thông tin mới Ngược lại, hệ thống sẽ yêu cầu bạn hoàn thành các trường cần thiết.

Hủy lưu thông tin cá nhân

Click vào button "Đổi mật khẩu"

Quay về trang hiển thị thông tin cá nhân

Bảng 4.23: Bảng mô tả xử lý trên màn hình Thay đổi thông tin cá nhân

4.3.8 Màn hình Đổi mật khẩu

Hình 4.29: Đối tượng trên màn hình Đổi mật khẩu Ý nghĩa: Dùng để thay đổi mật khẩu đăng nhập của user

Input nhập mật khẩu, xác nhận mật khẩu Thẻ input

8 Nút lưu mật khẩu Button

Bảng 4.24: Bảng mô tả đối tượng màn hình Đổi mật khẩu

Hình 4.30: Xử lý trên màn hình Quên mật khẩu

Khi mật khẩu cũ không đúng hoặc mật khẩu mới và xác nhận mật khẩu mới không khớp thì hệ thống sẽ yêu cầu bạn nhập lại

Nếu mật khẩu cũ và mật khẩu mới được xác nhận chính xác, hệ thống sẽ mã hóa mật khẩu mới, cập nhật vào cơ sở dữ liệu và thông báo cho người dùng rằng việc đổi mật khẩu đã thành công.

Bảng 4.25: Bảng mô tả xử lý trên màn hình Đổi mật khẩu

4.3.9 Màn hình Quản lý danh sách sản phẩm yêu thích

Màn hình Quản lý danh sách sản phẩm yêu thích cho phép người dùng xem và xóa các sản phẩm trong danh sách yêu thích của mình.

2 Bảng danh sách sản phẩm yêu thích Thẻ table

3 Hình sản phẩm Thẻ img

4 Nút xóa sản phảm khỏi danh sách Button

5 Danh sách trang Thẻ ul, li, a

6 Nhãn hiển thị số sản phẩm Thẻ a

Bảng 4.26: Bảng mô tả đối tượng màn hình Quản lý danh sách sản phẩm yêu thích

Hình 4.32: Xử lý trên màn hình Quản lý danh sách sản phẩm yêu thích

Lấy danh sách sản phẩm yêu thích

Load trang sản phẩm yêu thích

Lấy và hiển thị danh sách sản phẩm yêu thích của user từ CSDL

Xóa sản phẩm khỏi danh sách yêu thích

Click vào nút "Xóa" hoặc nút "x"

Xóa sản phẩm được chọn khỏi danh sách các sản phẩm yêu thích của user

3 Đến trang chi tiết sản phẩm

Click vào hình hoặc tên của sản phẩm

Lưu id của sản phẩm ở local và chuyển đến trang chi tiết sản phẩm

Click vào số thứ tự trang

Lấy dữ liệu phân theo trang và hiển thị lên giao diện

Bảng 4.27: Bảng mô tả xử lý trên màn hình Quản lý danh sách sản phẩm yêu thích

4.3.10 Màn hình Lịch sử đơn hàng

Màn hình Lịch sử đơn hàng hiển thị danh sách các đơn hàng của người dùng, cho phép họ lọc theo ngày hoặc hủy đơn hàng khi cần thiết.

2, 3 Option lọc đơn hàng theo ngày Thẻ input radio

4 Input nhập ngày Thẻ Input

5 Thông tin đơn hàng Thẻ span

6 Trạng thái đơn hàng Thẻ span

7 Nút hủy đơn hàng Button

8 Nút thu nhỏ thông tin đơn hàng Button

9 Hình ảnh sản phẩm Thẻ img

12, 13 Thông tin về sản phẩm Thẻ span

14 Nút hủy sản phẩm khỏi đơn hàng Button

15, 16, 17 Thông tin về đơn hàng Thẻ span

Bảng 4.28: Bảng mô tả đối tượng màn hình Lịch sử đơn hàng

Hình 4.34: Xử lý trên màn hình Lịch sử đơn hàng

Lấy danh sách đơn hàng

Load trang đơn hàng hoặc tick vào radio

Lấy tất cả đơn hàng của user và hiển thị lên giao diện

Lấy danh sách đơn hàng theo ngày

Tick chọn radio "Ngày cụ thể" và chọn ngày cụ thể

Lấy danh sách đơn hàng theo ngày đã chọn và hiển thị lên giao diện

Nếu còn thời hạn hủy hệ thống sẽ hủy tất cả các sản phẩm trong đơn hàng, ngược lại thông báo hủy không thành công

Hủy sản phẩm trong đơn hàng

"Hủy" ngay sản phẩm muốn hủy

Cập nhật trạng thái "Canceled" tại sản phẩm đã chọn hủy trong đơn hàng, cập nhật lại tiền đơn hàng

Bảng 4.29: Bảng mô tả xử lý trên màn hình Lịch sử đơn hàng

4.3.11 Màn hình Danh mục sản phẩm

Màn hình Danh mục sản phẩm hiển thị tất cả các sản phẩm có sẵn, cho phép người dùng tùy chọn chế độ hiển thị và lọc sản phẩm theo nhiều tiêu chí khác nhau.

1 Tiêu đề lọc sản phẩm Thẻ h2

2 Tiêu đề điều kiện lọc Thẻ span

3 Tiêu đề lọc theo giá Thẻ span

4 Option giá sản phẩm Thẻ input radio

5 Hình danh mục sản phảm Thẻ img

6 Tên danh mục sản phẩm Thẻ h2

7 Số lượng sản phẩm của danh mục Thẻ span

8 Tiêu đề lọc theo giá Thẻ h2

9 Option size sản phẩm Thẻ input radio

10 Tiêu đề lọc theo màu sắc Thẻ h2

11 Option màu sắc sản phẩm Thẻ input radio

12 Combobox sắp xếp sản phẩm Thẻ select

13 Tiêu đề xem sản phẩm Thẻ span

Bảng 4.30: Bảng mô tả đối tượng màn hình Danh mục sản phẩm

Hình 4.36: Xử lý trên màn hình Danh mục sản phẩm

Hệ thống sẽ lọc lại CSDL của category hiện tại theo khoảng giá mà được lựa chọn và hiển thị trên giao diện

Hệ thống sẽ lọc lại CSDL của category hiện tại theo size mà người dùng lựa chọn và hiển thị trên giao diện

Hệ thống sẽ lọc lại CSDL của category hiện tại theo màu sắc mà người dùng lựa chọn và hiển thị trên giao diện

Thay đổi giá trị của combobox sắp xếp

Hệ thống sẽ sắp xếp lại CSDL theo thứ tự mà người dùng lựa chọn và hiển thị lại giao diện

Hiển thị sản phẩm ở dạng Gird

Click vào icon "Gird" Hiển thị các sản phẩm dạng Gird

Hiển thị sản phẩm ở dạng List

Click vào icon "List" Hiển thị các sản phẩm dạng List

Click vào hình ảnh hoặc tên sản phẩm

Lưu id sản phẩm tương ứng và chuyển đến trang chi tiết sản phẩm

Bảng 4.31: Bảng mô tả xử lý trên màn hình Danh mục sản phẩm

4.3.12 Màn hình Chi tiết sản phẩm

Hình 4.37 hiển thị chi tiết thông tin sản phẩm, cho phép người dùng xem, đánh giá và bình luận về sản phẩm Người dùng có thể dễ dàng đưa ra ý kiến và góp ý nếu muốn.

2 Nút phóng to hình sản phẩm Button

3 Hình sản phẩm thu nhỏ Thẻ img

5 Nút share sản phẩm lên Facebook Button

7 Tiêu đề mô tả sản phẩm Thẻ p

8 Mô tả sản phẩm Thẻ p

9 Số lượng sản phẩm có sẵn Thẻ p

10 Nút thêm/xóa sản phẩm khỏi danh sách yêu thích Button

11 Tiêu đề số lượng sản phẩm Thẻ p

12 Input số lượng sản phẩm Thẻ input

13 Nút tăng số lượng sản phẩm Button

14 Nút giảm số lượng sản phẩm Button

15 Tiêu để size sản phẩm Thẻ p

17 Tiêu đề màu sắc sản phẩm Thẻ p

18 Option chọn màu sắc Thẻ input radio

19 Nút thêm sản phẩm vào giỏ hàng Button

20 Tiêu đề sản phẩm đã xem Thẻ h2

21 Hình sản phẩm đã xem Thẻ img

22 Tiêu đề sản phẩm đã xem Thẻ a

23 Mô tả sản phẩm đã xem Thẻ p

24 Nhãn số sao Thẻ div

25 Thanh biểu diễn phần trăm sao Thẻ div

26 Số lượng sao Thẻ div

27 Sao đánh giá React Component

28 Nút đánh giá sao Button

29 Bình luận về sản phẩm Thẻ textarea

30 Nút thêm hình ảnh cho bình luận Button

32 Tiêu đề form Thẻ span

33 Thông tin về tài khoản và thời gian bình luận Thẻ span

34 Thông tin về bình luận Thẻ span

Bảng 4.32: Bảng mô tả đối tượng màn hình Chi tiết sản phẩm

Hình 4.38: Xử lý trên màn hình Chi tiết sản phẩm

1 Load thông tin chi tiết

Click vào hình, tên sản phẩm hoặc

Từ id sản phẩm đã lưu, lấy thông tin sản phẩm từ CSDL và hiển thị lên trang chi tiết sản phẩm

91 của sản phẩm click vào liên kết được share

Click vào icon kích lúp

Phóng to hình ảnh của sản phẩm

Thêm sản phẩm vào danh sách yêu thích

"Thêm vào danh sách yêu thích"

Thêm sản phẩm được hiển thị vào danh sách yêu thích

Giảm số lượng sản phẩm order

Giảm số lượng sản phẩm được hiển thị 1 đơn vị

Tăng số lượng sản phẩm order

Tăng số lượng sản phẩm được hiển thị 1 đơn vị

Thay đổi size sản phẩm

Thay đổi giá trị trong combobox size

Size mới sẽ được cập nhật, option màu sắc tương ứng với size được thay đổi theo

Thay đổi màu sản phẩm

Thay đổi màu sắc trong option color

Màu sắc sản phẩm sẽ được cập nhật

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

Thêm sản phẩm vào giỏ hàng với size, màu sắc được chọn từ user

Click vào hình ảnh/tên từ sản phẩm liên quan

Lưu lại id sản phẩm được chọn và load lại trang chi tiết sản phẩm

10 Đánh giá sao sản phảm

Click vào nút "Đánh giá"

Nhận số sao mà người dùng đã chọn mà lưu vào CSDL, sau đó cập nhật đánh giá của user lại trên giao diện

Click vào nút "Thêm hình ảnh" Hiển thị form thêm hình ảnh

Load trang chi tiết sản phẩm

Lấy tất cả bình luận và trả lời của sản phẩm và hiển thị trên giao diện

Click vào nút "Bình luận"

Lưu nội dung và hình ảnh mà user bình luận vào CSDL và hiển thị lại trên giao diện

Bảng 4.33: Bảng mô tả xử lý trên màn hình Chi tiết sản phẩm

Đối tượng trên màn hình liên hệ cung cấp thông tin chi tiết cho người dùng website, giúp họ dễ dàng kết nối với đội ngũ quản lý để giải quyết các vấn đề cần thiết.

1 Bản đồ kho hàng Thẻ iframe

Nhãn form gửi liên hệ

5, 6, 8 Input form gửi liên hệ Thẻ input

10 Texarea nhập nội dung liên hệ Thẻ textarea

11 Nút gửi nội dung liên hệ Thẻ button

12 Nhãn thông tin liên hệ Thẻ h3, b

Các icon vị trí, điện thoại, email

Thông tin vị trí, số điện thoại, địa chỉ email Thẻ p

Bảng 4.34: Bảng mô tả đối tượng màn hình Liên hệ

Hình 4.40: Xử lý trên màn hình Liên hệ

Gửi nội dung liên hệ

Nhấn vào nút Gửi trên form liên hệ

Lưu vào CSDL và thông báo đến quản trị viên

Bảng 4.35: Bảng mô tả xử lý trên màn hình Liên hệ

4.3.14 Màn hình Tìm kiếm sản phẩm

Màn hình Tìm kiếm sản phẩm hiển thị danh sách các sản phẩm phù hợp với từ khóa mà người dùng đã nhập, giúp người dùng dễ dàng tìm kiếm và lựa chọn sản phẩm mong muốn.

1 Tiêu đề tìm kiếm sản phẩm Thẻ h2

2 Trạng thái sản phẩm Thẻ a

Bảng 4.36: Bảng mô tả đối tượng màn hình Tìm kiếm sản phẩm

Hình 4.42: Xử lý trên màn hình Tìm kiếm sản phẩm

Lấy danh sách sản phẩm

Lấy danh sách sản phẩm khớp với từ khóa đã search từ CSDL và hiển thị lên giao diện

Click vào hình ảnh hoặc tên sản phẩm

Lưu id sản phẩm local và chuyển đến trang chi tiết sản phẩm

Bảng 4.37: Bảng mô tả xử lý trên màn hình Tìm kiếm sản phẩm

Hình 4.43: Đối tượng trên màn hình Tin nhắn Ý nghĩa: Hiển thị danh sách tin nhắn, xem chi tiết tin nhắn

1 Bảng tin nhắn Thẻ table

2 Nút xem chi tiết tin nhắn Button + Thẻ i

3 Thời gian tin nhắn Thẻ h3

4 Tiêu đề nội dung tin nhắn Thẻ label

5 Nội dung tin nhắn Thẻ textarea

Bảng 4.38: Bảng mô tả đối tượng màn hình Tin nhắn

Hình 4.44: Xử lý trên màn hình Tin nhắn

Lấy danh sách tin nhắn

Truy cập/load trang tin nhắn Lấy tin nhắn từ CSDL và hiển thị lên giao diện

Hiển thị chi tiết nội dung tin nhắn

Click vào button icon kính lúp

Hiển thị chi tiết nội dung tin nhắn được chọn

Bảng 4.39: Bảng mô tả xử lý trên màn hình Tin nhắn

Hình 4.45: Đối tượng trên màn hình Giỏ hàng

97 Ý nghĩa: Hiển thị danh sách sản phẩm đã được thêm vào giỏ hàng, tổng tiền sản phẩm Các đối tượng trong màn hình:

1 Tiêu đề form Thẻ img

2 Số lượng sản phẩm Thẻ a

4, 5, 6 Thông tin size, màu sắc sản phẩm Thẻ a

7 Nút xóa sản phẩm khỏi giỏ hàng Button

8 Tiêu đề tổng tiền sản phẩm Thẻ span

9 Tổng tiền sản phẩm Thẻ span

10 Link đến trang thanh toán Thẻ a

Bảng 4.40: Bảng mô tả đối tượng màn hình Giỏ hàng

Hình 4.46: Xử lý trên màn hình Giỏ hàng

STT Tên xử lý Điều kiện gọi thực hiện

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

Xóa sản phẩm khỏi giỏ hàng trong CSDL và cập nhật lại giỏ hàng trên giao diện

Chuyển đến trang thanh toán các sản phẩm có trong giỏ hàng

Bảng 4.41: Bảng mô tả xử lý trên màn hình Giỏ hàng

4.3.17 Màn hình Xác nhận đơn hàng và thanh toán

Hình 4.47: Đối tượng trên màn hình Xác nhận đơn hàng và thanh toán

101 Ý nghĩa: Hiển thị các bước để người dùng xác nhận hoặc có thể thanh toán hóa đơn Các đối tượng trong màn hình:

1 Các bước thanh toán (Timeline) Thẻ ul, li, span

2 Bảng danh sách sản phẩm trong giỏ hàng Thẻ table

4 Combobox chọn size sản phẩm Thẻ select

5 Input số lượng Thẻ input number

6 Nút xóa sản phẩm Thẻ a, i

7 Nút chọn mã giảm giá Button

8 Nút quay lại trang mua hàng Button

Nút tiếp tục thanh toán

10 Tiêu đề danh sách mã giảm giá Thẻ span

11 Bảng danh sách mã giảm giá Thẻ table

12 Nút áp dụng mã giảm giá Button

13 Nút đóng modal mã giảm giá Button

Tiêu để thông tin địa chỉ khách hàng

Input nhập thông tin địa chỉ khách hàng Thẻ input

18 Tổng tiền vận chuyển Thẻ td

19 Tiêu đề tổng tiền Thẻ td, span

20 Tổng số tiền sản phẩm Thẻ td, span

23 Thông tin tên, số điện thoại khách hàng Thẻ b

24 Tổng giá tiền đơn hàng Thẻ b

25 Thông tin địa chỉ khách hàng Thẻ b

26 Thông tin địa chỉ kho hàng Thẻ b

27 Khoảng cách vận chuyển Thẻ b

29 Tổng tiền bao gồm phí ship Thẻ b

30 Tiêu đề danh sách sản phẩm Thẻ h3, b

31 Bảng danh sách sản phẩm Thẻ table

32 Nút hủy mua hàng Button

34 Tiêu đề hình thức xác nhận đơn hàng Thẻ h4

35 Option xác nhận qua email Thẻ input radio

36 Option xác nhận qua SMS Thẻ input radio

38 Thông báo xác nhận qua email Thẻ p

39 Nút gửi lại email Button

40 Tiêu đề nhập số điện thoại Thẻ span

41 Input nhập số điện thoại Thẻ input

42 Nút tiếp tục xác nhận qua SMS Button

43 Thông báo xác nhận qua SMS Thẻ p

44 Input nhập mã xác nhận qua SMS Thẻ input

45 Nút xác nhận mã qua SMS Button

46 Nút gửi lại mã xác nhận qua SMS Button

47 Tiêu đề xác nhận đơn hàng thành công Thẻ h2

48 Tiêu để chọn cổng thanh toán online Thẻ span

49 Nút thanh toán qua PayPal Button

50 Nút thanh toán qua Stripe Button

51 Nút thanh toán qua VNPAY Button

52 Nút thanh toán qua ZaloPay Button

53, 56 Tiêu đề cảm ơn Thẻ p

54 Tiêu đề thanh toán online thành công Thẻ h2

55 Tiêu đề thông báo cổng thanh toán online Thẻ p

Bảng 4.42: Bảng mô tả đối tượng màn hình Xác nhận đơn hàng và thanh toán

Hình 4.48: Xử lý trên màn hình Xác nhận đơn hàng và đơn hàng

1 Load sản phẩm Chọn vào

Load các sản phẩm đã được add vào giỏ hàng bởi user và hiển thị lên giao diện

Thay đổi size sản phẩm

Thay đổi giá trị trong combobox size

Size mới sẽ được cập nhật, option màu sắc tương ứng với size được thay đổi theo

Thay đổi màu sản phẩm

Thay đổi màu sắc trong option color

Màu sắc sản phẩm sẽ được cập nhật

Thay đổi số lượng sản phẩm

Gõ số hoặc click mũi tên lên xuống

Số lượng thay đổi, tổng tiền từng sản phẩm và tổng tiền của tất cả sản phẩm sẽ được cập nhật lại

Click vào icon "Trash" Sản phẩm sẽ được xóa khỏi giỏ hàng

Hiển thị form chứa danh sách các voucher mà user đang sở hữu

Hiển thị form địa chỉ

Click vào button "Tiếp tục thanh toán"

Chuyển sang form nhập thông tin, địa chỉ giao hàng của user

Cập nhật voucher đã sử dụng, cập nhật lại tiền đơn hàng

"Đóng" hoặc nút "x" Đóng form voucher và hiển thị lại form tổng kết đơn hàng

Load thông tin giao hàng của user

Khi form Thông tin, địa chỉ hiển thị

Lấy thông tin user và địa chỉ (nếu có) hiển thị lên giao diện, user có thể điều chỉnh lại các thông tin này

User thay đổi địa chỉ tại trường địa chỉ

Sử dụng Google API cho phép hiển thị danh sách địa chỉ liên quan, giúp người dùng dễ dàng lựa chọn Sau khi người dùng chọn địa chỉ, bản đồ sẽ được cập nhật theo địa chỉ đã thay đổi.

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

Cập nhật thông tin, địa chỉ của user lại vào user và hiển thị form xác nhận thông tin đơn hàng

Lấy thông tin đơn hàng

Khi form xác nhận thông tin đơn hàng hiển thị

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

- Download và cài đặt NodeJs tại trang chủ của Nodejs: https://nodejs.org/en/download/

- Download và cài đặt MongoDB tại đây: https://www.mongodb.com/try/download/community?tck=docs_server

- Thiết lập các biến môi trường cho cả NodeJs và MongoDB

- Cài đặt Git (tùy chọn)

5.1.2.1 Import cơ sở dữ liệu

+ chats: chứa thông tin chat giữa user và admin

+ messages: chứa nội dung tin nhắn admin gửi thông báo đến các user

+ orders: chứa thông tin đơn hàng khi user mua hàng

+ productcategories: chứa thông tin danh mục sản phẩm

+ products: chứa thông tin chi tiết của các sản phẩm

+ statistics: chứa thông tin thống kê sản phẩm theo ngày

+ users: chứa thông tin cá nhân người dùng Để import cơ sở dữ liệu ta thực hiện:

 Dùng lệnh sau để import tất cả collection mongorestore -d ten_CSDL duong_dan_den_CSDL

Ví dụ: mongorestore -d shoelg D:\database

5.1.2.2 Chuẩn bị project và thiết lập trên IDE

- Project có thể lấy trong thư mục đính kèm hoặc clone hay download từ github

- Cách clone project từ github:

+ Đầu tiên, vào thư mục để chứa project sau khi clone về

+ Nhấn Shift + click chuột phải, sau đó chọn Open command window here thì cửa số cmd xuất hiện

+ Gõ lệnh có cú pháp như sau: git clone , cụ thể cú pháp cho proejct: git clone https://github.com/thanhgiau2604/TLCN

- Sau khi có sẵn project, chúng ta mở project trên IDE, IDE phổ biến thường dùng là Microsoft Visual Studio Code

To set up your project, open the command prompt in the project directory or use the Microsoft Visual Studio Code IDE by pressing Ctrl + ` to access the command line Then, type the command: npm install to install the necessary packages for your project, ensuring you have an active internet connection.

- Sau khi cài đặt các package xong, bước cuối cùng là ta chạy server, mở browser và truy cập website

- Tại command line, ta gõ lệnh npm start để chạy server

Sau khi server hoạt động thành công, bạn hãy mở một trong các trình duyệt như Chrome, Firefox hoặc Cốc Cốc và nhập địa chỉ URL: http://localhost:3000 để truy cập vào website.

5.2.1 Chiến lược và kế hoạch kiểm thử

Để xây dựng kế hoạch kiểm thử hoàn chỉnh, việc đề ra chiến lược kiểm thử là rất quan trọng nhằm đảm bảo sản phẩm đáp ứng đầy đủ yêu cầu thiết kế về giao diện và chức năng.

- Chiến lược kiểm thử sẽ bao gồm một số hoạt động như:

+ Xác định phạm vi kiểm thử của phần mềm

Để đảm bảo chất lượng sản phẩm phần mềm, việc nhận diện các rủi ro và yếu tố bất ngờ là rất quan trọng Đồng thời, cần xây dựng một lịch kiểm thử chi tiết dành cho từng thành viên trong nhóm, giúp tối ưu hóa quy trình kiểm thử và nâng cao hiệu quả làm việc.

+ Xác định được môi trường kiểm thử

Các test case sẽ được soạn thảo và phân loại theo từng kỹ thuật kiểm thử trong file Excel, từ đó giúp phân công công việc hiệu quả giữa các thành viên trong nhóm.

- Các thành viên tuân theo lịch kiểm thử đã thực hiện sẵn, tiến thành kiểm thử và thực hiện lập báo cáo về kết quả kiểm thử

Sau khi nhận được kết quả kiểm thử từ tất cả các thành viên, nhóm sẽ tiến hành lập lịch phân công sửa lỗi, ưu tiên các lỗi quan trọng trước Quá trình này sẽ được lặp lại cho đến khi nhóm đạt được mục tiêu kiểm thử đã đề ra.

5.2.2 Một số kỹ thuật kiểm thử dùng trong dự án Đối với mỗi chức năng, ta cần triển khai các kỹ thuật kiểm thử như:

1 Kiểm thử giao diện người dùng (UI Testing): Ở loại kiểm thử này, ta sẽ tập trung kiểm thử về sự đúng đắn của các đối tượng có trên giao diện như: button, checkbox, input, link, combobox, … về kích thước, vị trí, màu sắc, …

2 Kiểm thử chức năng (Functional Testing): Đối với việc kiểm thử chức năng ta sẽ kiểm thử với nhiều bộ dữ liệu do chúng ta tạo ra bằng việc sử dụng một số phương pháp kiểm thử như: Kiểm thử giá trị biên, lớp tương đương, bảng quyết định, …

4 Kiểm thử việc tương thích với trình duyệt (Browser compatibility Testing): sử dụng các loại trình duyệt phổ biến khác nhau như: IE, Chrome, Firefox, Cốc Cốc để xem và đánh giá

- Quy trình kiểm thử được thực hiện theo 8 bước:

1 Chuẩn bị chiến lược kiểm thử (Preparing the test strategy)

Trong giai đoạn tiếp cận ban đầu, việc xác định chiến lược kiểm thử là rất quan trọng Tùy thuộc vào yêu cầu của khách hàng, cần ưu tiên kiểm thử các nội dung theo thứ tự hợp lý Đặt câu hỏi về việc "Kiểm thử cái gì?" và "Kiểm thử như thế nào?" là cần thiết để định hướng cho quy trình kiểm thử hiệu quả.

2 Chuẩn bị kế hoạch kiểm thử (Preparing the test plan)

Bước tiếp theo trong quy trình kiểm thử là lập kế hoạch chi tiết, trong đó cần xác định và phân chia hợp lý thời gian, nhân sự cũng như các công cụ sẽ được sử dụng cho từng chức năng.

3 Chuẩn bị môi trường kiểm thử (Preparing the test environment) Ở bước này bạn cần phải chuẩn bị môi trường, nền tảng cho công việc kiểm thử phần mềm của mình gồm: Hệ điều hành (win 7, win 8, linux, IOS…), Trình duyệt (IE, Safari, Opera…), thiết bị (Moblie, tablet, deskop…)

4 Viết test cases (Write test cases)

Design test case lists based on functional and non-functional requirements, including UI, functional, field validation, browser compatibility, and performance, as outlined in the previously established testing plan.

5 Thực thi test cases (Executing the test cases)

Tiến hành thực thi các trường hợp trong testcase/test scripts để thực hiện kiểm thử, đồng thời có thể cập nhật thêm một số trường hợp cần thiết hoặc những trường hợp phát sinh mới.

6 Phân tích kết quả kiểm thử (Analyzing the results)

Phân tích kết quả đã kiểm thử để tìm hiểu nguyên nhân gây lỗi, đồng thời định hướng cách khắc phục và sau đó tiến hành sửa các lỗi

7 Thực hiện kiểm thử hồi quy (Doing regression testing)

Kiểm thử hồi quy các lỗi đã được sửa

8 Kết thúc kiểm thử (Test exiting)

Khi tất cả các testcase đều đã được thông qua hoặc chỉ còn lại những lỗi nhỏ không ảnh hưởng đáng kể đến yêu cầu đặc tả của phần mềm, quá trình kiểm thử sẽ được coi là hoàn tất.

5.2.4.1 Test case màn hình đăng nhập

Hình 5.2: Test case màn hình Đăng nhập

5.2.4.2 Test case màn hình quên mật khẩu

Hình 5.3: Test case màn hình Quên mật khẩu

5.2.4.3 Test case màn hình trang chủ user

Hình 5.4: Test case màn hình Trang chủ user

5.2.4.4 Test case màn hình chi tiết sản phẩm

Hình 5.5: Test case màn hình Chi tiết sản phẩm

5.2.4.5 Test case màn hình danh mục sản phẩm

Hình 5.6: Test case màn hình Danh mục sản phẩm

5.2.4.6 Test case màn hình lịch sử đơn hàng

Hình 5.7: Test case màn hình Lịch sử đơn hàng

5.2.4.7 Test case màn hình thanh toán

Hình 5.8: Test case màn hình Thanh toán

5.2.4.8 Test case màn hình thống kê

Hình 5.9: Test case màn hình Thống kê

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