Đồ án tốt nghiệp web bán hàng linh kiện điện tử cho công ty hyt

MÔ TẢ ĐỀ TÀI

Khảo sát

Trong thời đại công nghệ phát triển mạnh mẽ hiện nay, việc không sở hữu một trang web bán hàng điện tử có thể khiến người bán gặp nhiều khó khăn và hạn chế trong kinh doanh.

Một trang web giúp mở rộng đối tượng khách hàng, cho phép người bán tiếp cận với người mua trên toàn cầu Ngược lại, nếu không có trang web, người bán chỉ có thể giới hạn tiếp cận đến khách hàng trong khu vực hoặc thành phố của mình.

Một trang web bán hàng điện tử giúp hạn chế thời gian kinh doanh, cho phép khách hàng mua sắm 24/7 Nếu không có trang web, người bán chỉ có thể hoạt động trong khung giờ cố định khi cửa hàng mở cửa.

Quảng cáo trực tuyến qua website, mạng xã hội và công cụ tìm kiếm mang lại hiệu quả cao và tiết kiệm chi phí cho người bán Thiếu website, người bán có thể phải chi trả nhiều hơn cho các hình thức quảng cáo truyền thống như truyền hình, radio, báo chí và phát tờ rơi.

Quản lý hàng hóa có thể gặp nhiều khó khăn nếu không có công cụ hỗ trợ Một trang web cung cấp các giải pháp quản lý kho, đơn hàng và thanh toán tự động giúp người bán theo dõi lượng hàng tồn kho, xử lý đơn hàng hiệu quả và quản lý thông tin thanh toán một cách dễ dàng.

Trong môi trường kinh doanh hiện đại, sự hiện diện trực tuyến là rất quan trọng Người tiêu dùng thường tìm kiếm và mua sắm qua các trang web Nếu không có trang web, các nhà bán lẻ sẽ đánh mất một kênh phân phối quan trọng, tạo điều kiện cho đối thủ cạnh tranh thu hút khách hàng tiềm năng dễ dàng hơn.

Còn đối với người mua:

Việc không có trang web sẽ hạn chế khả năng tìm kiếm sản phẩm của người mua, vì họ không thể sử dụng chức năng tìm kiếm theo từ khóa, danh mục hoặc bộ lọc Điều này có thể dẫn đến khó khăn trong việc tìm kiếm và lựa chọn sản phẩm mong muốn.

4 kiếm các sản phẩm mong muốn và phải dựa vào các phương tiện khác như mua hàng trực tiếp tại cửa hàng

Cửa hàng thường có hàng ngàn đến hàng triệu sản phẩm từ nhiều nhà cung cấp khác nhau, nhưng nếu không có trang web, người mua sẽ gặp phải giới hạn trong việc lựa chọn sản phẩm, chỉ có thể tiếp cận những mặt hàng trong phạm vi cửa hàng.

Việc so sánh giá và đánh giá sản phẩm trở nên khó khăn khi không có trang web hỗ trợ Các trang web cung cấp thông tin về giá cả, đánh giá và nhận xét của khách hàng, giúp người mua dễ dàng tìm hiểu về chất lượng và độ tin cậy của sản phẩm Thiếu thông tin trực tuyến, người tiêu dùng sẽ gặp nhiều trở ngại trong việc đưa ra quyết định mua sắm.

Mua sắm trực tiếp tại cửa hàng đòi hỏi người tiêu dùng phải dành nhiều thời gian và công sức để di chuyển, tìm kiếm sản phẩm và thực hiện giao dịch Điều này có thể trở nên tốn kém và không thuận tiện, đặc biệt cho những ai có lịch trình bận rộn hoặc ít thời gian rảnh.

Khách hàng không thể thực hiện giao dịch mua hàng từ xa, đặc biệt là khi họ muốn mua sản phẩm từ những khu vực xa xôi hoặc không có cửa hàng trực tiếp gần bên.

Mục tiêu đề tài

- Dễ dàng tiếp cận với người mua

- Người bán thuận tiện trong việc quản bá cửa hàng và quản lý kho

Mô tả nghiệp vụ

Người dùng có thể dễ dàng tìm kiếm và mua sắm các sản phẩm mong muốn trên trang web Để thực hiện giao dịch, họ cần đăng nhập hoặc đăng ký tài khoản qua Gmail hoặc Facebook Sau khi đăng ký thành công, người dùng cần cập nhật địa chỉ giao hàng Sau khi thanh toán, họ sẽ nhận được email xác nhận hoặc hóa đơn để tiện cho việc phản hồi sau này nếu có vấn đề phát sinh Bên cạnh đó, người mua còn có thể xem lại lịch sử hoạt động và đọc bình luận về các sản phẩm để lựa chọn món hàng yêu thích một cách dễ dàng hơn.

Người bán có hai trang chính: trang admin và trang web cửa hàng Tại trang admin, người bán có khả năng chỉnh sửa thông tin theo danh mục để quản lý hiệu quả hơn.

5 theo sản phẩm, tin tức, chạy quang cáo, chạy thông báo và chỉnh sửa tài khoản của nhân viên trong phần admin.

Các chức năng

 Khách hàng có chức năng:

- Lọc sản phẩm theo danh mục hoạt theo giá

- Tăng giảm số lượng muốn mua của sản phẩm

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

- Chọn hình thức thanh toán và thanh toán

- Xem lịch sử hoạt động

- Cập nhật thông tin của người bán

- Thêm và xóa địa chỉ và thông tin giao hàng

- Xem tin tức, thông báo

- Xem thông tin chi tiết và trạng thái của đơn hàng

 Người bán có chức năng:

- Thêm, sửa, xóa tài khoản cho nhân viên

- Thêm, sửa, xóa thông báo

- Thêm, sửa, xóa tin tức

- Cập nhật thông tin trang web như tên công ty, thông tin liên lạc,

- Thêm, sửa, xóa danh mục chính của hàng

- Thêm, sửa, xóa sản phẩm

- Thêm, sửa, xóa sản phẩm nào nằm trong danh mục nào

- Cập nhật trạng thái đơn hàng của khách hàng

 Đối tượng, phạm vi nghiên cứu:

- Đối tượng: các cửa hàng bán linh kiện điện tử đang kiếm một trang web đẹp mắt và tiện lợi

 Xây dựng các chức năng cơ bản cho quản trị viên

 Tìm hiểu về các trang web phát triển và nâng cấp về hệ thống, quản lý hệ thống

 Xây dựng các chức năng cho người bán lẫn người mua

 Tìm hiểu về ngôn ngữ java, Spring và các công cụ cần thiết để thiết kế hệ thống

CÔNG NGHỆ SỬ DỤNG

Spring là gì?

Spring là một framework phát triển ứng dụng Java phổ biến, được hàng triệu lập trình viên tin dùng Nó hỗ trợ tạo ra các ứng dụng hiệu suất cao, dễ dàng kiểm thử và tái sử dụng mã nguồn.

- Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB; trong suốt: hoạt động một cách trong suốt với lập trình viên)

- Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn

- Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming

Spring cung cấp các tính năng cốt lõi hỗ trợ phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quy trình phát triển các ứng dụng J2EE thông qua việc sử dụng mô hình POJO (Plain Old Java Objects).

- Kiến trúc, các module của Spring Framework

- Spring được chia làm nhiều module khác nhau, tùy theo mục đích phát triển ứng dụng mà ta dùng 1 trong các module đó

- Tầng này cung cấp khả năng hỗ trợ kiểm thử với JUnit và TestNG

- Bao gồm các module spring core, beans, context và expression languate (EL)

- Spring core, bean cung cấp tính năng IOC và Dependency Injection

- Spring Context hỗ trợ đa ngôn ngữ (internationalization), các tính năng Java EE như EJB, JMX

- Expression Language được mở rộng từ Expresion Language trong JSP

Nó cung cấp hỗ trợ việc setting/getting giá trị, các method cải tiến cho phép truy cập collections, index, các toán tử logic…

- Những module này hỗ trợ cài đặt lập trình hướng khía cạnh (Aspect Oriented Programming), hỗ trợ tích hợp với AspectJ

Hình 1 Dưới đây là kiến trúc tổng thể của Spring Framework

- Nhóm này bao gồm JDBC, ORM, OXM, JMS và module Transaction Những module này cung cấp khả năng giao tiếp với database

- Hay còn gọi là Spring MVC Nhóm này gồm Web, WebServlet… hỗ trợ việc tạo ứng dụng web Thymeleaf là gì:

 Thymeleaf là một Java template engine dùng để xử lý và tạo HTML, XML, Javascript, CSS và text

 Mục tiêu chính của thymeleaf là mang lại các template tự nhiên, đồng nhất, đơn giản (nature templates) cho công việc phát triển.

Java IDE

Môi trường phát triển tích hợp (IDE) là phần mềm hỗ trợ lập trình viên phát triển mã một cách hiệu quả, giúp tăng năng suất bằng cách kết hợp các tính năng như chỉnh sửa, xây dựng, kiểm thử và đóng gói phần mềm trong một ứng dụng dễ sử dụng Tương tự như nhà văn sử dụng phần mềm soạn thảo và kế toán sử dụng bảng tính, IDE giúp lập trình viên làm việc dễ dàng hơn.

MySQL

MySQL is an open-source relational database management system (RDBMS) that operates on a client-server model It serves as software or a service for creating and managing databases, focusing on the management of relationships between data.

MySQL là một trong những phần mềm quản lý cơ sở dữ liệu quan hệ (RDBMS) phổ biến nhất, thường được nhầm lẫn với RDBMS do sự nổi bật của nó Nhiều ứng dụng web lớn như Facebook, Twitter, YouTube, Google, và Yahoo! sử dụng MySQL để lưu trữ dữ liệu Mặc dù ban đầu MySQL chỉ được sử dụng hạn chế, nhưng hiện nay nó đã tương thích với nhiều hệ điều hành quan trọng như Linux, macOS, Microsoft Windows, và Ubuntu.

jQuery và bootstrap

Query là một yêu cầu truy vấn thông tin từ cơ sở dữ liệu, cho phép thực hiện các thao tác như thêm, xóa và thay đổi dữ liệu.

Để thực hiện truy vấn, bạn cần tuân thủ một cấu trúc code đã được định sẵn mà cơ sở dữ liệu có thể nhận diện Cấu trúc này được coi là ngôn ngữ truy vấn (query language).

Bootstrap facilitates a faster and easier website design process by providing essential components such as typography, forms, buttons, tables, grids, navigation, and image carousels.

Accessibility, Availability, Security, Performance, Scalability

HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, sử dụng các thẻ để xác định các loại nội dung khác nhau và phục vụ mục đích cho trang web.

CSS (Cascading Style Sheets) là ngôn ngữ định dạng dùng để mô tả cách trình bày trên các trang web, bao gồm màu sắc, bố cục và phông chữ, giúp nội dung thể hiện phong cách riêng cho toàn bộ website.

JavaScript được sử dụng để chuyển đổi các website tĩnh thành những trang động hấp dẫn, tạo ra sự tương tác và cải thiện hiệu suất máy chủ, từ đó nâng cao trải nghiệm người dùng.

- Nhưng để thực hiện tốt những hoạt động trên, JavaScript phải cần đến sự hỗ trợ của HTML và CSS

NGHIỆP VỤ

Usecase tổng quát

Phân rã usecase

Phân rã use case “Quản lý mật khẩu”

Hình 8 Phân rã use case “Quản lý mật khẩu”

Phân rã use case “Quản lý địa chỉ”

Hình 9 Phân rã use case “Quản lý địa chỉ”

Phân rã use case “Quản lý báo cáo bán hàng”

Hình 10 Phân rã use case “Quản lý báo cáo bán hàng”

Phân rã use case “Quản lý tin tức”

Hình 11 Phân rã use case “Quản lý tin tức”

Phân rã use case “Quản lý thông báo”

Hình 12 Phân rã use case “Quản lý thông báo”

Phân rã use case “Quản lý ảnh quảng cáo”

Hình 13 Phân rã use case “Quản lý ảnh quảng cáo”

Phân rã use case “Quản lý sản phẩm”

Hình 14 Phân rã use case “Quản lý sản phẩm”

Phân rã use case “Quản lý thương hiệu”

Hình 15 Phân rã use case “Quản lý thương hiệu”

Phân rã use case “Quản lý khu vực giao hàng”

Hình 16 Phân rã use case “Quản lý khu vực giao hàng”

Phân rã use case “Quản lý khách hàng”

Hình 17 Phân rã use case “Quản lý khách hàng”

Phân rã use case “Quản lý đơn hàng”

Hình 18 Phân rã use case “Quản lý đơn hàng”

Phân rã use case “Quản lý danh mục sản phẩm”

Hình 19 Phân rã use case “Quản lý danh mục sản phẩm”

Phân rã use case “Quản lý nhân viên”

Hình 20 Phân rã use case “Quản lý nhân viên”

Đặc tả usecase

Đặc tả use case “Đăng ký”

Tên use case Đăng ký

Mô tả Người dùng thực hiện đăng ký tài khoản

Tác nhân Khách vãng lai

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

Hậu điều kiện Người dùng đăng ký tài khoản thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Đăng ký

2 Hệ thống hiển thị giao diện trang Đăng ký

3 Người dùng nhập thông tin và nhấn nút Đăng ký

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu đã nhập Nếu hợp lệ, hệ thống thực hiện lưu vào cơ sở dữ liệu và hiển thị thông báo đăng ký thành công

Ngoại lệ 3.1 Người dùng nhập thiếu thông tin

3.1.1 Hệ thống hiển thị thông báo lỗi nhập thiếu thông tin và yêu cầu nhập lại

3.2 Người dùng nhập thông tin không hợp lệ 3.2.1 Hệ thống hiển thị thông báo lỗi nhập thông tin không hợp lệ và yêu cầu nhập lại

Tên use case Đăng ký

Mô tả Người dùng thực hiện đăng ký tài khoản

Tác nhân Khách vãng lai

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

Hậu điều kiện Người dùng đăng ký tài khoản thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Đăng ký

2 Hệ thống hiển thị giao diện trang Đăng ký

3 Người dùng nhập thông tin và nhấn nút Đăng ký

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu đã nhập Nếu hợp lệ, hệ thống thực hiện lưu vào cơ sở dữ liệu và hiển thị thông báo đăng ký thành công

Ngoại lệ 3.1 Người dùng nhập thiếu thông tin

3.1.1 Hệ thống hiển thị thông báo lỗi nhập thiếu thông tin và yêu cầu nhập lại

3.2 Người dùng nhập thông tin không hợp lệ 3.2.1 Hệ thống hiển thị thông báo lỗi nhập thông tin không hợp lệ và yêu cầu nhập lại

20 Đặc tả use case “Đăng nhập”

Tên use case Đăng nhập

Mô tả Người dùng thực hiện đăng nhập vào hệ thống

Tiền điều kiện Người dùng đã có tài khoản

Hậu điều kiện Người dùng đăng nhập vào hệ thống thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Đăng nhập

2 Hệ thống hiển thị giao diện trang Đăng nhập

3 Người dùng nhập thông tin và nhấn nút Đăng nhập

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu đã nhập Nếu hợp lệ, hệ thống hiển thị trang chủ tương ứng với tài khoản đã đăng nhập

Ngoại lệ 3.1 Người dùng nhập thiếu thông tin

3.1.1 Hệ thống hiển thị thông báo lỗi nhập thiếu thông tin và yêu cầu nhập lại

3.2 Người dùng nhập thông tin không hợp lệ 3.2.1 Hệ thống hiển thị thông báo lỗi nhập thông tin không hợp lệ và yêu cầu nhập lại Đặc tả use case “Thêm sản phẩm vào giỏ hàng”

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

Mô tả Người dùng thực hiện thêm sản phẩm vào giỏ hàng

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

Hậu điều kiện Người dùng thêm sản phẩm vào giỏ hàng thành công

1 Từ giao diện trang Xem thông tin chi tiết sản phẩm, người dùng nhấn nút Thêm vào giỏ hàng

2 Hệ thống kiểm tra tính hợp lệ của dữ liệu Nếu hợp lệ, hệ thống lưu vào cơ sở dữ liệu và hiển thị thông báo thêm sản phẩm vào giỏ hàng thành công

Ngoại lệ 1.1 Người dùng thêm sản phẩm không tồn tại vào giỏ hàng

1.1.1 Hệ thống hiển thị thông báo sản phẩm không tồn tại và yêu cầu thêm lại

21 Đặc tả use case “Thanh toán đơn hàng”

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

Mô tả Người dùng thực hiện thanh toán đơn hàng

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

Hậu điều kiện Người dùng thanh toán đơn hàng thành công

1 Từ giao diện trang Giỏ hàng, người dùng nhấn nút Thanh toán

2 Hệ thống hiển thị trang Thanh toán

3 Người dùng chọn phương thức thanh toán và nhấn nút Đặt hàng

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu Nếu hợp lệ, hệ thống lưu vào cơ sở dữ liệu và hiển thị thông báo đặt hàng thành công

Ngoại lệ 3.1 Người dùng có thông tin đặt hàng không hợp lệ

3.1.1 Hệ thống hiển thị thông báo thông tin đặt hàng không hợp lệ và yêu cầu đặt hàng lại Đặc tả use case “Xem danh sách đơn hàng”

Tên use case Xem danh sách đơn hàng

Mô tả Người dùng thực hiện xem danh sách đơn hàng

Tác nhân Nhân viên bán hàng và quản trị viên

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

Hậu điều kiện Người dùng xem danh sách đơn hàng thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Quản lý đơn hàng

2 Hệ thống lấy danh sách đơn hàng trong cơ sở dữ liệu và hiển thị lên cho người dùng

Ngoại lệ 2.1 Không có đơn hàng nào trong cơ sở dữ liệu

2.1.1 Hệ thống hiển thị thông báo “Không có đơn hàng nào” Đặc tả use case “Tìm kiếm đơn hàng”

Tên use case Tìm kiếm đơn hàng

Mô tả Người dùng thực hiện tìm kiếm đơn hàng

Tác nhân Nhân viên bán hàng và quản trị viên

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

Hậu điều kiện Người dùng tìm kiếm đơn hàng thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Quản lý đơn hàng

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

3 Người dùng nhập từ khóa và nhấn nút Tìm kiếm

4 Hệ thống tìm kiếm đơn hàng theo từ khóa và hiển thị danh sách đơn hàng tìm thấy

Ngoại lệ 2.1 Không có đơn hàng nào trong cơ sở dữ liệu

2.1.1 Hệ thống hiển thị thông báo “Không có đơn hàng nào”

3.1 Người dùng nhập từ khóa không tồn tại trong cơ sở dữ liệu 3.1.1 Hệ thống hiển thị thông báo “Không tìm thấy đơn hàng nào” Đặc tả use case “Chỉnh sửa đơn hàng”

Tên use case Chỉnh sửa đơn hàng

Mô tả Người dùng thực hiện chỉnh sửa đơn hàng

Tác nhân Nhân viên bán hàng và quản trị viên

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

Hậu điều kiện Người dùng chỉnh sửa đơn hàng thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Quản lý đơn hàng

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

3 Người dùng nhấn nút Chỉnh sửa tại dòng chứa đơn hàng cần chỉnh sửa

4 Hệ thống lấy thông tin chi tiết của đơn hàng và hiển thị lên cho người dùng

5 Người dùng nhập thông tin và nhấn nút Lưu

6 Hệ thống kiểm tra tính hợp lệ của dữ liệu Nếu hợp lệ, hệ thống lưu vào cơ sở dữ liệu và hiển thị thông báo chỉnh sửa đơn hàng thành công

Ngoại lệ 2.1 Không có đơn hàng nào trong cơ sở dữ liệu

2.1.1 Hệ thống hiển thị thông báo “Không có đơn hàng nào”

3.1 Người dùng nhấn chọn sản phẩm không tồn tại 3.1.1 Hệ thống hiển thị thông báo lỗi sản phẩm không tồn tại và yêu cầu chọn lại

5.1 Người dùng nhập thiếu thông tin 5.1.1 Hệ thống hiển thị thông báo lỗi nhập thiếu thông tin và yêu cầu nhập lại

5.2 Người dùng nhập thông tin không hợp lệ 5.2.1 Hệ thống hiển thị thông báo lỗi nhập thông tin không hợp lệ và yêu cầu nhập lại Đặc tả use case “Xóa đơn hàng”

Tên use case Xóa đơn hàng

Mô tả Người dùng thực hiện xóa đơn hàng

Tác nhân Nhân viên bán hàng và quản trị viên

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

Hậu điều kiện Người dùng xóa đơn hàng thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Quản lý đơn hàng

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

3 Người dùng nhấn nút Xóa tại dòng chứa đơn hàng cần xóa

4 Hệ thống kiểm tra tính hợp lệ của dữ liệu Nếu hợp lệ, hệ thống xóa trong cơ sở dữ liệu và hiển thị thông báo xóa đơn hàng thành công

Ngoại lệ 2.1 Không có đơn hàng nào trong cơ sở dữ liệu

2.1.1 Hệ thống hiển thị thông báo “Không có đơn hàng nào”

3.1 Người dùng nhấn chọn sản phẩm không tồn tại 3.1.1 Hệ thống hiển thị thông báo lỗi sản phẩm không tồn tại và yêu cầu chọn lại Đặc tả use case “Thêm trạng thái đơn hàng”

Tên use case Thêm trạng thái đơn hàng

Mô tả Người dùng thực hiện thêm trạng thái đơn hàng

Tác nhân Nhân viên bán hàng và quản trị viên

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

Hậu điều kiện Người dùng thêm trạng thái đơn hàng thành công

1 Từ giao diện trang Chỉnh sửa đơn hàng, người dùng chọn tab Trạng thái

2 Hệ thống hiển thị tab Trạng thái

3 Người dùng nhấn nút Thêm trạng thái

4 Hệ thống hiển thị panel Thêm trạng thái

5 Người dùng nhập thông tin và nhấn nút Lưu

6 Hệ thống kiểm tra tính hợp lệ của dữ liệu Nếu hợp lệ, hệ thống lưu vào cơ sở dữ liệu và hiển thị thông báo thêm trạng thái đơn hàng thành công

Ngoại lệ 5.1 Người dùng nhập thiếu thông tin

5.1.1 Hệ thống hiển thị thông báo lỗi nhập thiếu thông tin và yêu cầu nhập lại

5.2 Người dùng nhập thông tin không hợp lệ 5.2.1 Hệ thống hiển thị thông báo lỗi nhập thông tin không hợp lệ và yêu cầu nhập lại Đặc tả use case “Thống kê doanh thu”

Tên use case Thống kê doanh thu

Mô tả Người dùng thực hiện thống kê doanh thu

Tác nhân Nhân viên bán hàng, nhân viên hỗ trợ, nhân viên chỉnh sửa thông tin và quản trị viên

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

Hậu điều kiện Người dùng thống kê doanh thu thành công

1 Từ giao diện trang chủ, người dùng chọn chức năng Thống kê

2 Hệ thống hiển thị trang Thống kê

3 Người dùng chọn thời gian cần thống kê

4 Hệ thống xử lý dữ liệu trong cơ sở dữ liệu và hiển thị lên cho người dùng

Ngoại lệ 3.1 Người dùng chọn thời gian mà không có dữ liệu

3.1.1 Hệ thống hiển thị thông báo “Không có dữ liệu”

Sơ đồ hoạt động

Sơ đồ hoạt động “Đăng ký”

Sơ đồ hoạt động “Đăng nhập”

Sơ đồ hoạt động “Thêm sản phẩm vào giỏ hàng”

Sơ đồ hoạt động “Thanh toán đơn hàng”

Sơ đồ hoạt động “Xem danh sách đơn hàng”

Sơ đồ hoạt động “Tìm kiếm đơn hàng”

Sơ đồ hoạt động “Chỉnh sửa đơn hàng”

Sơ đồ hoạt động “Xóa đơn hàng”

Sơ đồ hoạt động “Thêm trạng thái đơn hàng”

Sơ đồ hoạt động “Thống kê doanh thu”

MÔ HÌNH DỮ LIỆU

Mô hình quan hệ dữ liệu

Dựa trên chỉ tiêu và yêu cầu cần thiết thì database được thiết kế theo mối liên hệ mật thiết dựa vào ER Diagram sau đây:

Hình 21 Mô hình quan hệ dữ liệu

Danh sách các bảng

Currencies (id, name, symbol, code)

Backup (id, count_download, path_file, time_create)

States (id, name, country_id)

Client_info (id, browser_name, browser_version, device_infor, ip_address, mac_address)

The user data includes various attributes such as user ID, address, place of birth, date of birth, date range, email, account status, full name, identity verification details, issuing authority, log date, password, phone number, photos, creation time, update time, work user status, degrees, marital status, and gender.

User_roles (user_id, role_id)

The customer database includes essential information such as ID, email, password, first and last names, phone number, and address details including line 1, line 2, city, state, country ID, and postal code Additionally, it tracks timestamps for creation and updates, the customer's enabled status, verification code, authentication type, reset password status, and whether the user is a work-related account.

Customer_activity (id, activity, log_in, log_out, time_ativity, customer_id, url_log) Brands (id, name, logo)

Brands_categories (brand_id, category_id)

Categories (id, alias, enabled, image, name, parent_id, all_parent_ids)

This article outlines the essential attributes of products, including identifiers such as ID and name, along with key details like short and full descriptions, main images, and timestamps for creation and updates It also covers product availability through flags for enabled status and stock levels, as well as pricing information, including cost, price, and discount percentages Additionally, the article highlights product dimensions (length, width, height, weight), brand and category associations, and features such as size, color, fabric, and user-generated content Other important metrics include view counts, related products, quantity available, product type, and product codes, all of which contribute to a comprehensive understanding of product offerings.

Product_images (id, name, product_id)

Product_details (id, name, value, product_id)

Cart_items (id, customer_id, product_id, quantity)

The orders table includes essential details such as the order ID, customer information (first and last name, phone number), and address components (address line 1, address line 2, city, state, postal code, and country) It also records the order time, payment method, and delivery specifics including delivery date and days Financial details encompass product cost, shipping cost, subtotal, tax, and total amount, along with the customer ID and order status.

Order_track (id, notes, status, updated_time, work_user, order_id)

Order_details (id, product_cost, quantity, shipping_cost, subtotal, unit_price, oder_id, product_id)

Shipping_rates (id, cod_supported, days, rate, state, country_id, created_time, updated_time, work_user)

Comments (id, created_time, updated_time, work_user, content, customer_id, product_id)

Comment_replies (id, created_time, updated_time, work_user, content, comment_id, customer_id, product_id)

Board (id, board_cate, board_no, created_time, enabled, end_date, full_description, kind_content, main_image, start_date, title, updated_time, work_user, number_views)

Notice (id, created_time, enabled, end_date, full_desciption, number_views, short_description, start_date, updated_time, work_user, popup)

Slider (id, created_time, updated_time, work_user, enabled, end_date, image_url, start_date)

Addresses (id, customer_id, country_id, first_name, last_name, phone_number, address_line_1, address_line_2, city, state, postal_code, default_address)

Thiết kế chi tiết CSDL

Hình 22 bảng thiết kế database của setting

Hình 23 bảng thiết kế database của currencies

Hình 24 bảng thiết kế database của Backup

Hình 25 bảng thiết kế database của Countries

Hình 26 bảng thiết kế database của states

Hình 27.bảng thiết kế database của client_info

Hình 28 bảng thiết kế database của Users

Hình 29.bảng thiết kế database của users_roles

Hình 30 bảng thiết kế database của Roles

Hình 31 bảng thiết kế database của Customers

Hình 32.bảng thiết kế database của customer_activity

Hình 33 bảng thiết kế database của Brands

Hình 34 bảng thiết kế database của brands_categories

Hình 35 bảng thiết kế database của Categories

Hình 36 bảng thiết kế database của Products

Hình 37 bảng thiết kế database của product_images

Hình 38 bảng thiết kế database của product_details

Hình 39 bảng thiết kế database của cart_items

Hình 40 bảng thiết kế database của orders

Hình 41 bảng thiết kế database của order_track

Hình 42 bảng thiết kế database của order_details

Hình 43 bảng thiết kế database của shipping_rates

Hình 44 bảng thiết kế database của comments

Hình 45 bảng thiết kế database của comment_replies

Hình 46 bảng thiết kế database của board

Hình 48 bảng thiết kế database của Slider Hình 47 bảng thiết kế database của Notice

Hình 49 bảng thiết kế database của Addresses

CHỨC NĂNG VÀ QUÁ TRÌNH HÌNH THÀNH

Cấu hình

- MySQL Community Server (MySQL workbench)

- Spring data JPA, Spring Security, Thymeleaf, Bootstrap (4.3.1), hibernate, query (3.4.1), Unit test, Super CSV, Oppen Pdf, Oauth2, Mail, jquery Number, jsBarcode, tinymce, jquery richtext, …

Hình 50 Cấu trúc tổ chức Source theo cây Thể hiện bởi sơ đồ sau đây

Khởi tạo

Common chứa các Entity, Enum và Exception, giúp tiết kiệm tài nguyên và vận hành hiệu quả Các lớp được khai báo trong Common có thể được Admin và Client sử dụng khi cần thiết Các Entity không chỉ khởi tạo và kết nối dữ liệu mà còn xử lý dữ liệu một cách hiệu quả.

 TimeWorkBasedEntity Đây là một Abstract Entity, nhằm mục đích tối ưu các trường cần có trong một bảng

Thực hiện tính toán các trường dữ liệu để hiển thị ra màn hình một cách hiệu quả

AbstractAddress là một thực thể trừu tượng được thiết kế để tối ưu hóa các trường thông tin cần thiết trong bảng dữ liệu Nó cung cấp các trường liên quan đến địa chỉ, số điện thoại và tên khách hàng, giúp cải thiện quản lý thông tin khách hàng một cách hiệu quả.

Cung cấp thông tin về các loại tài khoản mà người dung dung để đăng nhập hoặc đăng kí Được thể hiện ở bảng Customer.

Xác định kiểu dữ liệu: GENERAL, MAIL_SERVER, MAIL_TEMPLATES, CURRENCY, PAYMENT

Màn hình cài đặt cung cấp không gian để lưu trữ thông tin quan trọng về cửa hàng hoặc doanh nghiệp, bao gồm các định dạng tiền tệ và địa chỉ email để gửi thông báo tới khách hàng.

Khi khởi tạo các kiểu dữ liệu trên có thể Insert thằng vào bảng Setting bằng câu lệnh sql hoặc dùng DataJPA Test để thêm vào

Xác định các thông tin về đơn hàng, từ đó Order Track có thể dễ dàng sử dụng và tái sử dụng

Xác định kiểu hình thanh toán khi người dùng đặt hàng

Xác định lỗi khi chương trình trong lúc biên dịch đã gây ra một lỗi không mong muốn

5.2.2 Cấu hình Source Admin (BackEnd)

 Cấu hình folder save file Đăng kí tên folder cho các file cần lưu trữ

Cấu hình lưu trữ file và xóa file

File xuất khẩu được cấu hình qua AbstractExporter, với các file exporter cho Category, Product và User Những bộ phận này sử dụng AbstractExporter, trong khi nhiều bộ phận khác có tính năng xuất khẩu nhưng không áp dụng AbstractExporter, mà thay vào đó sử dụng thư viện có sẵn.

“jquery datatables” nguồn: https://datatables.net/

Category Export file CSV Category Export file Excel User Export file PDF

Customer Export file csv, excel, pdf, print

Cấu hình bảo mật sử dụng Spring security Lấy thông tin người dung từ token thông qua UserDetails Lấy Email đã đăng kí tài khoản thông qua UserDetailsService

5.2.3 Cấu hình Source Client (FrontEnd)

 Cấu hình folder save file

Cấu hình bảo mật chung

Lấy thông tin người dùng

Tìm thông tin người dung từ Database

Người dùng đăng nhập tài khoản thông qua tài khoản đã đăng kí

Kiểm tra thông tin tài khoản đăng nhập

Lấy thông tin người dùng từ OAuth2User

Xử lý thông tin người dùng từ OAuth2User

Dùng trong xác định từ tác vụ browser của người dùng đã thực hiện ẩn popup thông báo hay chưa

Dữ liệu có thể hoạt động ở mọi điểm mà không cần thông qua một controller cố định, cho phép hiển thị trên tất cả các trang mà không cần gọi lại nhiều lần.

Utility được phát triển với mục đích tái sử dụng mã nguồn, giúp tối ưu hóa quy trình gửi mail, thu thập thông tin đăng nhập của người dùng và định dạng tiền tệ cho hệ thống.

 Cấu hình thông tin người dùng và thiết bị

Thông tin thiết bị Thông tin Browser

5.2.4 Cấu hình Pagination, tìm kiếm, sort

Lấy các tham số về danh sách và đường dẫn được gọi tới

Nhận các giá trị tham số và giải quyết giá trị tham số

Xử lý phân trang và sắp xếp

Gọi đến bảng được chỉ định.

Thực hiện hóa chức năng và phi chức năng

5.3.1 Các chức năng chính và phổ biến

- Chức năng chính thường được sử dụng trong Source bao gồm: Thêm, sửa, xóa, tìm kiếm, phân trang, xem chi tiết, cập nhật trạng thái, sắp xếp dữ liệu

Các chức năng này hỗ trợ quản lý sản phẩm, nhân viên, thương hiệu, danh mục, khách hàng (không bao gồm thêm), thông báo, tin tức, quảng cáo và khu vực.

- Thực hiện cho quản lý nhân viên và các phần tương tự

Tại đây người quản trị viên cần nhập đầy đủ thông tin của người dùng

Sau đó dữ liệu từ form được chuyển đến Controller để xử lý: Hình 51 Tạo quản trị viên trong phần admin

Hình ảnh sẽ được lưu vào folder đăng kí trước đó và thông tin Nhân viên sẽ được chuyển đến Service để thực hiện lưu

Tại Service, chúng tôi tiến hành kiểm tra tài khoản bằng ID; nếu ID đã tồn tại, chỉ cập nhật thông tin đã thay đổi, còn nếu ID chưa tồn tại, hệ thống sẽ tạo nhân viên mới Quá trình cập nhật thông tin được thực hiện bởi người dùng đang đăng nhập vào trường “workUser ”, đồng thời ghi nhận thời gian cập nhật và thời gian khởi tạo cho từng trường hợp.

Sau khi dữ liệu được kiểm tra hoàn tất sẽ thực hiện lưu vào bảng thông qua Spring Data JPA

Mọi thứ thành công sẽ thông báo trạng thái “Thêm tài khoản thành công”

Tại giao diện người dùng click vào icon sửa

Tại đây lấy Id của nhân viên và thực hiện truy xuất các thông tin của nhân viên đó

Controller sẽ xử lý id nhân viên có được và trả về trang chỉnh sửa nếu như hoàn tất

Dữ liệu được chuyển đến Service và thực hiện tìm kiếm nhân viên với Id đó

Hình 52 Tất cả nhân viên đã được có

Nếu tìm thấy sẽ trả về Controller và tiếp tục thực hiện, nếu không thì thông báo lỗi được trả về Controller xử lý

Dữ liệu được tìm thông qua Spring Data JPA

Nếu Id nhân viên được tìm thấy trong cơ sở dữ liệu, thông tin nhân viên sẽ được hiển thị trên biểu mẫu, cùng với biểu mẫu để thêm mới nhân viên, và quy trình này sẽ được thực hiện tương tự cho việc thêm mới nhân viên.

Giao diện trả về khi click vào icon sửa:

Tại giao diện nhân viên click vào button xóa trên màn hình:

Hình 53 Khi click vào icon sửa sẽ trả lại giao diện giống như mới tạo admin mới

Hình 54 Bấm vào nút xóa nhân viên nếu muốn xóa nhân viên nào đó

Tại đây lấy id của nhân viên cần xóa và trả về Controller xử lý

Dữ liệu sẽ được xử lý dựa trên Id nhân viên đã lấy được, sau đó gọi đến Service Tại đây, Id nhân viên sẽ được sử dụng để tìm kiếm qua Repository và tiến hành kiểm tra trước khi thực hiện xóa.

Gọi tới Repository để tìm kiếm tất cả các khóa chính có Id tương ứng.

Sau khi hoàn tất tìm kiếm, nếu tìm thấy dữ liệu với ID tương ứng, hệ thống sẽ tiến hành xóa tài khoản tại Service và hiển thị thông báo “Đã xóa tài khoản ID:” Ngược lại, nếu không tìm thấy, hệ thống sẽ thông báo “Không tìm thấy ID người dùng:”.

 Chức năng cập nhật trạng thái

Tại giao điện nhân viên click vào icon trạng thái:

Tại đây lấy Id của nhân viên gửi tới Controller để xử lý Tại Controller gọi tới Service để xử lý dữ liệu

Trong Service gọi tới Repository để cập nhật trạng thái

Sau khi hoàn tất quá trình cập nhật trả về thông báo “Tài khoản (ID: 32) đã được cập nhật trạng thái ẩn”

Tại giao diện quản lý nhân nhiên lick vào xuất file csv/excel/pdf: Hình 55 Giao diện quản lý nhân viên

Hình 56 Giao diện xuất file

Sau khi click vào một trong 3 nút trên dữ liệu được xử lý tại Controller

Tại Controller xử lý các yêu cầu theo file cấu hình Export trước đó được kế thừa từ AbstractExporter

Lấy danh sách cần xuất file csv Lấy danh sách xuất PDF

Lấy danh sách xuất file Excel

5.3.2 Các chức năng riêng biệt

Phân loại thống kê: ngày tháng, danh mục, sản phẩm

Tùy thuộc vào giá trị yêu cầu từ người dùng mà trả về các giá trị được xử lý tương ứng, được thể hiện ở Controller

Dữ liệu được xử lý với các hàm khác nhau để phục vụ nhu cầu truy xuất thông tin Hàm getReportDataByDatePeriod được sử dụng cho tất cả các tab với giá trị mặc định là 7 ngày qua, trong khi đó, hàm getReportDataByDatePeriod cũng hỗ trợ lọc dữ liệu theo ngày tháng năm trong khoảng nhất định Đối với việc duyệt thông tin theo Danh mục hoặc sản phẩm, hàm getReportDataByCategoryOrProductDateRange cho phép nhóm dữ liệu theo thời gian chỉ định, còn hàm getReportDataByCategoryOrProduct sử dụng giá trị thời gian mặc định cho đối tượng này.

Dữ liệu được xử lý qua hai đối tượng chính của Service: theo ngày tháng năm và theo danh mục hoặc sản phẩm Cả hai đối tượng này đều kế thừa từ đối tượng cha AbstractReportService.

MasterOrderReportService xử lý duyệt theo ngày tháng

OrderDetailReportService xử lý cho đối tượng Danh mục hoặc Sản phẩm

Thống kê được thể hiện theo ngày tháng:

Thống kê được thể hiện theo danh mục: Hình 57 Thống kê được thể hiện theo ngày tháng

Hình 58 Thống kê được thể hiện theo danh mục

Thống kê được thể hiện theo sản phẩm:

Backup data được thực hiện theo 2 thành phần chính: Backup theo click và Tự động Backup mỗi ngày

Backup theo click vào button

Tại giao diện Setting click vào button “Sao lưu dữ liệu”:

Yêu cầu được gửi tới Controller

Xử lý yêu cầu sao lưu dữ liệu bằng cách sử dụng thời gian thực để đặt tên file backup, tạo file SQL và lưu trữ vào thư mục backup data Thực hiện kiểm tra quá trình sao lưu; nếu không thành công, xuất thông báo lỗi Ngược lại, lưu đường dẫn file backup vào trường PathFile của bảng Backup cùng với các thông tin cần thiết cho dữ liệu.

Backup tự động mỗi ngày

Hình 59 Thống kê theo sản phẩm

Hình 60 Giao diện nút sao lưu

Xác định backup dựa vào giá trị BACKUP_YN của bảng setting Với Y sẽ tự động sao lưu mỗi ngày và ngượclại:

Tại màn hình Setting người dùng chọn option Có hoặc Không:

Code được thực hiện dựa trên Schedule của Spring cung cấp Cho phép thực hiện các lịch đã lên sẵn với thời gian cố định

Từ đó thực thiện kiểm tra lịch đã được lên sẵn và thực hiện kiểm tra dữ liệu của BACKUP YN để xách định các tác vụ

Tại đây giá trị BACKUP_YN với Y sẽ thực hiện Backup và ngược lại backupTime xác định thời gian sẽ backup (23 giờ 19 phút) Sau đó thực hiện Backup

Tại màn hình danh sách các file đã backup người dùng bấm vào nút tải xuống file muốn tải

Sau khi hoàn tất quá trình tải xuống, dữ liệu sẽ được xử lý tại Controller Tại đây, hệ thống thực hiện nhiệm vụ tải file từ đường dẫn được gửi từ màn hình Khi việc tải xuống thành công, giá trị tải xuống sẽ được cập nhật tăng thêm 1.

Hình 61 Giao diện option sao lưu dữ liệu

Hình 62 Giao diện download dữ liệu đã lưu lại trong mySQL

Tại màn hình đăng kí, người dùng nhập đầy đủ các thông tin cần thiết:

Hình 63 Giao diện cập đăng ký thông tin tài khoản

Sau khi nhấn nút đăng ký, Controller sẽ xử lý yêu cầu và gửi email đến tài khoản đã đăng ký Email này sẽ chứa mã Token gửi tới Gmail để yêu cầu xác thực.

Sau đó trả về trang xác nhận tài khoản đã đăng kí

Tại gmail mở hộp thư yêu cầu xác thực:

Sau khi click Verify chuyển qua đường dẫn tới trang

Tại gmail xác định Verify với mã Token được cấp trước đó ở bảng Customer

Nếu thành công trả về trang đăng kí thành công và ngược lại Hình 64 Hoàn tất cập đăng ký tin tài khoản

Hình 65 Đã gửi mail xác nhận để kích hoạt

Kết quả trả về sau khi Verify

Sau khi bấm vào nút quên mật khẩu, form nhập thông tin tài khoản đã đăng kí được hiện ra

Người dung nhập Gmail đã đăng kí, Dữ liệu sau đó được xử lý tại Controller

Tạo một token mới và lưu trữ vào bảng Customer Sử dụng mã token này để gửi email yêu cầu thay đổi mật khẩu đến địa chỉ email đã đăng ký.

Hình 66.Giao diện khi đã đăng ký tài khoản thành công

Hình 68 Giao diện quên mật khẩu Hình 67 Giao diện quên mật khẩu

Sau đó tại Gmail của khách hàng, mở hộp thư yêu cầu thay đổi mật khẩu

Tại đây bấm vào “Thay đổi mật khẩu” Mở ra đường dẫn mới về form nhập mật khẩu mới

Nhập mật khẩu mới cần nhập vào và thực hiện bấm nút lưu

Sau khi bấm lưu dữ liệu được chuyển đến Controller và thực hiện thay đổi mật khẩu

 Thêm Hình 69 Sau đó tại Gmail của khách hàng, mở hộp thư yêu cầu thay đổi mật khẩu

Hình 70 Giao diện nhập mật khẩu muốn đổi

Từ giao diện chi tiết sản phẩm bấm vào nút thêm vào giỏ cùng với số lượng mong muốn

Sau khi bấm vào nút, dữ liệu được gửi tới Controller

Tại Controller thực hiện kiểm tra đăng nhập, cũng như kiểm tra số lượng thêm vào giỏ

Dữ liệu sẽ được gửi đến Service để thêm sản phẩm và số lượng tương ứng vào giỏ hàng Hệ thống sẽ kiểm tra ID sản phẩm và số lượng cho phép trước khi cập nhật vào bảng Cart Sau khi hoàn tất việc thêm sản phẩm vào giỏ, một thông báo modal sẽ được trả về cho người dùng.

Hình 71 Giao diện của sản phẩm

Hình 72.Đã thêm sản phẩm vào giỏ hàng thành công

Tại giao diện giỏ hàng bấm vào nút tang số lượng hoặc giảm số lượng

Sau khi bấm vào nút tăng/giảm số lượng sản phẩm dữ liệu được trả về Controller để xử lý

Tại đây cập nhật số lượng vào bảng Cart thông qua Service Cập nhật lại số lượng, giá tiền, tổng tiền

Địa chỉ của người dùng được xác định dựa trên địa chỉ gốc, được thiết lập khi đăng ký tài khoản, và thông tin này được lấy từ Bảng Customer.

Thiết lập thêm địa chỉ giao hàng, địa chỉ này sẽ được lưu vào bảng Address

Quản lý địa chỉ người dùng bao gồm các chức năng thêm, sửa, xóa tương tự như các chức năng khác, nhưng có sự khác biệt trong việc thiết lập địa chỉ gốc để giao hàng Điều này giúp phân biệt giữa địa chỉ của tài khoản và địa chỉ giao hàng, đảm bảo quy trình giao nhận diễn ra thuận lợi.

Sau khi đã thêm địa chỉ giao hàng mới Người dùng bấm vào nút đặt làm địa chỉ mặc định để giao hàng

Sau khi bâm vào nút đặt làm địa chỉ mặc định Dữ liệu yêu cầu được gửi tới Controller

Hình 73 Giao diện giỏ hàng

Tại đây thực hiện kiểm tra tài khoản, sau đó thực hiện đặt làm địa chỉ mặc định thông qua Service

Kiểm tra xem địa chỉ đã được thiết lập làm địa chỉ mặc định hay chưa; nếu chưa, hãy đặt nó làm địa chỉ mặc định Sau đó, gán tất cả các địa chỉ mặc định hiện tại về trạng thái không còn là địa chỉ mặc định.

Giao diện sau khi địa chỉ mặc định khác được gán:

Chức năng đặt hàng được cho phép thực hiện khi đầy đủ các yếu tố sau:

- Địa chỉ nhận hang phải cùng khu vực giao hàng mà hệ thống đang hỗ trợ

- Giỏ hàng không được rỗng

Hình 74 Giao diện chọn địa chỉ giao hàng

Hình 75.Giao diện đặt địa chỉ giao hàng mặc định

Tại giao diện Giỏ hàng Người dùng bấm vào “Thanh Toán”