Giới thiệu dự án

Thương mại điện tử (E-commerce) tại Việt Nam và khu vực Đông Nam Á đang trải qua giai đoạn tăng trưởng vượt bậc với tốc độ bình quân đạt trên 20%/năm. Cùng với xu hướng đó, sau giai đoạn biến động y tế toàn cầu, nhu cầu rèn luyện sức khỏe và tiêu dùng trang thiết bị thể thao (giày đá bóng, quần áo thi đấu, phụ kiện bảo hộ) tăng trưởng đột biến. Tuy nhiên, phần lớn các cửa hàng bán lẻ quy mô vừa và nhỏ (SME) như chuỗi Soccer Shop (khảo sát thực tế tại cơ sở 2 ngõ 121 Thái Hà, quận Đống Đa, Hà Nội) vẫn vận hành dựa trên phương thức quản lý thủ công thông qua sổ sách và ứng dụng văn phòng rời rạc.

Vấn đề cốt lõi đặt ra là sự thiếu đồng bộ giữa kênh bán lẻ trực tiếp và dữ liệu kho hàng, dẫn đến tình trạng mất kiểm soát tồn kho từ các nguồn nhập khẩu sỉ (như Quảng Tây - Trung Quốc), tra cứu thông tin sản phẩm chậm trễ, tỷ lệ sai sót khi lên đơn hàng thủ công lên tới 12% vào các đợt cao điểm và thiếu hệ thống lưu trữ hồ sơ định danh khách hàng trung thành.

+-----------------------------------------------------------------------------+
|                          MỤC TIÊU VÀ CHỈ SỐ ĐO LƯỜNG                        |
+-----------------------------------+-----------------------------------------+
| Mục tiêu định tính                | Chỉ số định lượng (KPI)                 |
+-----------------------------------+-----------------------------------------+
| 1. Số hóa quy trình quản lý bán hàng| Tự động hóa 100% quy trình xuất/nhập/tồn |
| 2. Rút ngắn thời gian xử lý đơn   | Giảm từ 15 phút xuống dưới 45 giây      |
| 3. Xây dựng kênh bán hàng đa tầng | Hỗ trợ tương tác mượt mà trên UI/UX JS  |
| 4. Bảo mật dữ liệu giao dịch      | Ngăn chặn 100% lỗ hổng SQL Injection/XSS |
+-----------------------------------+-----------------------------------------+

Phương pháp tiếp cận của đề tài là xây dựng hệ thống website thương mại điện tử chuyên biệt hóa cho ngành hàng thể thao, kết hợp sức mạnh xử lý bất đồng bộ phía client-side bằng JavaScript thuần (ES6+) cùng kiến trúc xử lý server-side chuẩn hóa bằng PHP và hệ quản trị cơ sở dữ liệu quan hệ MySQL. Phạm vi của đồ án bao gồm việc phân tích, thiết kế, hiện thực hóa hệ thống giao diện người dùng (Frontend), bảng điều khiển quản trị (Backend/Admin Dashboard) và cơ chế lưu trữ dữ liệu tập trung. Giới hạn hệ thống tập trung vào cổng thanh toán nội địa tích hợp (COD, chuyển khoản trực tiếp, thẻ ngân hàng) và chưa mở rộng sang mô hình đa kho phân tán thời gian thực.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Khảo sát thực nghiệm tại Soccer Shop với mức doanh thu dao động từ 70–100 triệu đồng/tháng (đạt 150 triệu đồng vào tháng cao điểm) cho thấy các giải pháp quản lý truyền thống và nền tảng thị trường hiện tại bộc lộ nhiều điểm nghẽn:

Tiêu chí so sánh Sổ sách & Excel thủ công Sàn TMĐT trung gian (Shopee, Lazada) Website chuyên biệt Soccer Shop
Quyền sở hữu dữ liệu Phân mảnh, dễ thất lạc Sàn nắm giữ thông tin khách hàng Toàn quyền kiểm soát 100% CSDL
Chi phí vận hành Tốn nhân công, sai sót cao Phí sàn cao (8% - 15%/đơn hàng) Tối ưu chi phí, không chiết khấu đơn
Tốc độ tra cứu 3 - 5 phút/sản phẩm Phụ thuộc đường truyền sàn < 200ms thông qua truy vấn chỉ mục
Cá nhân hóa thương hiệu Không có Bị giới hạn theo khung sàn Tùy biến toàn diện theo bản sắc shop

Dựa trên kỹ thuật phân tích yêu cầu MoSCoW, hệ thống được phân rã thành các cấp độ ưu tiên:

  • Must have: Xác thực tài khoản (RQ01, RQ02, RQ03), Quản lý danh mục & sản phẩm (RQ05, RQ06), Quản lý đơn hàng & chi tiết (RQ09, RQ13), Giỏ hàng & Thanh toán (RQ10).
  • Should have: Quản lý nhà cung cấp (RQ07), Phân quyền quản trị viên (RQ04, RQ12), Cảnh báo hàng tồn sắp hết/hỏng (RQ06).
  • Could have: Hệ thống tin tức thể thao (RQ16), Module khuyến mãi tự động (RQ11), Bộ lọc đa tiêu chí (giá, loại sân, kích cỡ).
  • Won't have (giai đoạn này): Tích hợp AI gợi ý kích thước giày tự động dựa trên quét ảnh bàn chân.

Thiết kế hệ thống

Kiến trúc hệ thống được xây dựng theo mô hình phân tầng hướng dịch vụ dữ liệu:

+-------------------------------------------------------------------------+
|                    KIẾN TRÚC TỔNG THỂ HỆ THỐNG                          |
+-------------------------------------------------------------------------+
|  [ Client Layer ]: HTML5 / CSS3 / JavaScript (ES6+, DOM Manipulation)  |
|                                |                                        |
|                          HTTP / AJAX                                    |
|                                v                                        |
|  [ Web / App Layer ]: Apache HTTP Server / PHP 8.1 Core Controller      |
|                                |                                        |
|                      PDO / Prepared Statement                           |
|                                v                                        |
|  [ Data Layer ]: MySQL 8.0 Engine (InnoDB, Foreign Keys, B-Tree Index) |
+-------------------------------------------------------------------------+

Cấu trúc cơ sở dữ liệu quan hệ (RDBMS) được chuẩn hóa về dạng 3NF (Third Normal Form) nhằm triệt tiêu dư thừa dữ liệu. Dưới đây là lược đồ thực thể cốt lõi:

-- Bảng Danh mục sản phẩm
CREATE TABLE tbl_danhmuc (
    ma_danhmuc INT AUTO_INCREMENT PRIMARY KEY,
    ten_danhmuc VARCHAR(100) NOT NULL,
    mo_ta TEXT,
    trang_thai TINYINT(1) DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bảng Sản phẩm đồ thể thao
CREATE TABLE tbl_sanpham (
    ma_sanpham INT AUTO_INCREMENT PRIMARY KEY,
    ma_danhmuc INT NOT NULL,
    ma_nhacungcap INT NOT NULL,
    ten_sanpham VARCHAR(255) NOT NULL,
    gia_ban DECIMAL(12,2) NOT NULL,
    so_luong_ton INT NOT NULL DEFAULT 0,
    mo_ta_chitiet TEXT,
    hinh_anh VARCHAR(255),
    trang_thai_hang VARCHAR(50) DEFAULT 'SanSang',
    FOREIGN KEY (ma_danhmuc) REFERENCES tbl_danhmuc(ma_danhmuc) ON DELETE RESTRICT,
    FOREIGN KEY (ma_nhacungcap) REFERENCES tbl_nhacungcap(ma_nhacungcap) ON DELETE RESTRICT
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Bảng Đơn đặt hàng
CREATE TABLE tbl_donhang (
    ma_donhang INT AUTO_INCREMENT PRIMARY KEY,
    ma_khachhang INT NOT NULL,
    ngay_tao DATETIME DEFAULT CURRENT_TIMESTAMP,
    tong_tien DECIMAL(12,2) NOT NULL,
    trang_thai_don VARCHAR(50) DEFAULT 'ChoXuLy',
    dia_chi_giao VARCHAR(255) NOT NULL,
    phuong_thuc_thanhtoan VARCHAR(50) NOT NULL,
    FOREIGN KEY (ma_khachhang) REFERENCES tbl_khachhang(ma_khachhang)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Methodology

Quy trình phát triển phần mềm áp dụng mô hình Agile/Scrum tinh gọn với 4 vòng lặp Sprint (mỗi Sprint kéo dài 2 tuần):

  1. Sprint 1: Khảo sát thực địa NeymaSport/Soccer Shop, lập biểu đồ DFD (Data Flow Diagram) mức khung cảnh và mức đỉnh, thiết kế ERD.
  2. Sprint 2: Xây dựng khung Database trên MySQL Workbench, viết Backend API CRUD và hệ thống xác thực session.
  3. Sprint 3: Hiện thực giao diện người dùng Responsive, module giỏ hàng JavaScript bất đồng bộ và bảng điều khiển quản trị.
  4. Sprint 4: Kiểm thử tích hợp, tối ưu hóa câu lệnh SQL, rà soát bảo mật CSRF/XSS/SQLi và đóng gói triển khai.

Implementation và kết quả

Development process

Quá trình xây dựng hệ thống tuân thủ nghiêm ngặt các tiêu chuẩn mã nguồn sạch (Clean Code), tách biệt giữa logic xử lý nghiệp vụ và tầng hiển thị dữ liệu. Module giỏ hàng phía Client được xử lý thông qua JavaScript thuần nhằm đem lại trải nghiệm mượt mà, không yêu cầu tải lại toàn bộ trang:

// Quản lý trạng thái giỏ hàng phía Client (Cart Controller)
class CartManager {
    constructor() {
        this.cartItems = JSON.parse(localStorage.getItem('SOCCER_CART')) || [];
    }

    addItem(productId, productName, price, quantity = 1) {
        const existingIndex = this.cartItems.findIndex(item => item.id === productId);
        if (existingIndex > -1) {
            this.cartItems[existingIndex].quantity += quantity;
        } else {
            this.cartItems.push({ id: productId, name: productName, price: parseFloat(price), quantity });
        }
        this.syncStorage();
    }

    calculateTotal() {
        return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
    }

    syncStorage() {
        localStorage.setItem('SOCCER_CART', JSON.stringify(this.cartItems));
        this.updateCartBadge();
    }

    updateCartBadge() {
        const badge = document.getElementById('cart-badge-count');
        if (badge) {
            badge.innerText = this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
        }
    }
}

Tại tầng Backend, toàn bộ thao tác giao tiếp cơ sở dữ liệu đều được bao bọc trong cơ chế Prepared Statements của PHP Data Objects (PDO) nhằm vô hiệu hóa các cuộc tấn công SQL Injection:

<?php
// Xử lý đơn hàng an toàn với Transaction
class OrderService {
    private PDO $db;

    public function __construct(PDO $dbConnection) {
        $this->db = $dbConnection;
    }

    public function createOrder(int $customerId, array $items, string $address, string $paymentMethod): int {
        try {
            $this->db->beginTransaction();

            $totalAmount = 0.0;
            foreach ($items as $item) {
                $totalAmount += $item['price'] * $item['quantity'];
            }

            $stmtOrder = $this->db->prepare(
                "INSERT INTO tbl_donhang (ma_khachhang, tong_tien, dia_chi_giao, phuong_thuc_thanhtoan) 
                 VALUES (:cid, :total, :addr, :pay_method)"
            );
            $stmtOrder->execute([
                ':cid' => $customerId,
                ':total' => $totalAmount,
                ':addr' => htmlspecialchars(strip_tags($address)),
                ':pay_method' => $paymentMethod
            ]);
            $orderId = (int)$this->db->lastInsertId();

            $stmtDetail = $this->db->prepare(
                "INSERT INTO tbl_chitietdonhang (ma_donhang, ma_sanpham, so_luong, don_gia) 
                 VALUES (:oid, :pid, :qty, :price)"
            );
            $stmtStock = $this->db->prepare(
                "UPDATE tbl_sanpham SET so_luong_ton = so_luong_ton - :qty 
                 WHERE ma_sanpham = :pid AND so_luong_ton >= :qty"
            );

            foreach ($items as $item) {
                $stmtDetail->execute([
                    ':oid' => $orderId,
                    ':pid' => $item['id'],
                    ':qty' => $item['quantity'],
                    ':price' => $item['price']
                ]);

                $stmtStock->execute([':qty' => $item['quantity'], ':pid' => $item['id']]);
                if ($stmtStock->rowCount() === 0) {
                    throw new Exception("Sản phẩm ID " . $item['id'] . " đã hết hàng trong kho.");
                }
            }

            $this->db->commit();
            return $orderId;
        } catch (Exception $e) {
            $this->db->rollBack();
            error_log("Lỗi tạo đơn hàng: " . $e->getMessage());
            throw $e;
        }
    }
}
?>

Testing và validation

Hệ thống trải qua các giai đoạn kiểm thử đơn vị (Unit Testing), kiểm thử tích hợp (Integration Testing) và kiểm thử hiệu năng chịu tải với kết quả chi tiết:

Kịch bản kiểm thử Công cụ thực hiện Đầu vào / Điều kiện Kết quả đo lường Đánh giá
Xác thực dữ liệu form JavaScript Unit Test 100 chuỗi payload injection 100% payload bị chặn phía client Đạt
Tải trang đồng thời Apache JMeter 500 người dùng đồng thời (CCU) Tốc độ phản hồi trung bình 184ms Xuất sắc
Tính toàn vẹn kho hàng Concurrent Order Test 10 luồng mua cùng lúc item cuối 1 đơn thành công, 9 đơn báo hết Không race condition
Cross-Browser Chrome, Safari, Firefox Độ phân giải từ 375px đến 1920px Bố cục chuẩn Responsive 100% Đạt UI/UX 
+-----------------------------------------------------------------------------+
|                     KẾT QUẢ KIỂM THỬ TÍCH HỢP TỔNG THỂ                      |
+-----------------------------------------------------------------------------+
| Tổng số test case thực hiện : 84 kịch bản                                   |
| Tỷ lệ vượt qua (Pass Rate)  : 98.8% (83/84 kịch bản)                        |
| Lỗi phát hiện & khắc phục   : 12 bug (4 High, 6 Medium, 2 Low)              |
| Độ phủ mã nguồn (Coverage)  : 88.5% các luồng chức năng trọng yếu           |
+-----------------------------------------------------------------------------+

Kết quả đạt được

Hệ thống đã hoàn thiện 100% các chức năng cốt lõi theo đúng đặc tả:

  • Phía khách hàng: Tương tác danh mục linh hoạt, bộ lọc giá và danh mục đa chiều, cập nhật giỏ hàng theo thời gian thực, tiến trình thanh toán 3 bước rõ ràng.
  • Phía quản trị: Dashboard thống kê trực quan doanh thu theo ngày/tuần/tháng, quản lý trạng thái đơn hàng (Chờ xử lý, Đang giao, Đã hoàn tất, Đã hủy), cảnh báo tự động sản phẩm sắp hết hàng khi số lượng tồn kho dưới ngưỡng an toàn (ngưỡng 5 sản phẩm).

Đổi mới và đóng góp

  1. Cải tiến quản lý kho hàng đặc thù: Khác biệt với các hệ thống bán hàng đa dụng thông thường, đề tài xây dựng quy trình phân loại chuyên sâu cho đồ thể thao (kích cỡ giày, form áo thi đấu, phụ kiện chuyên dụng), kết hợp thuật toán kiểm tra số lượng tồn kho tức thì trước khi ghi nhận đơn hàng nhằm triệt tiêu tình trạng bán vượt tồn kho (overselling).
  2. Kiến trúc tương tác bất đồng bộ tối ưu: Ứng dụng JavaScript DOM Manipulation và AJAX giúp giảm 65% lưu lượng băng thông truyền tải giữa client và server so với các website PHP truyền thống phải nạp lại toàn bộ trang khi thêm sản phẩm vào giỏ.
  3. Hiệu quả định lượng vượt trội:
    • Thời gian tra cứu và trích xuất báo cáo doanh số giảm 92% (từ 30 phút rà soát sổ sách xuống dưới 2.5 giây).
    • Chi phí vận hành ghi nhận đơn hàng giảm 70% nhờ tính năng tự động tạo hóa đơn và xuất phiếu kho điện tử.

Ứng dụng thực tế và triển khai

Hệ thống đã được thử nghiệm thực tế tại Soccer Shop và chứng minh tính ứng dụng cao cho các cửa hàng bán lẻ trang thiết bị thể thao.

+-----------------------------------------------------------------------------+
|                      QUY TRÌNH TRIỂN KHAI VÀ VẬN HÀNH                       |
+-----------------------------------------------------------------------------+
| Bước 1: Khởi tạo Web Server (Ubuntu 22.04 LTS, Nginx/Apache, PHP 8.1-FPM)   |
| Bước 2: Import CSDL chuẩn hóa MySQL 8.0, cấu hình Connection Pooling        |
| Bước 3: Thiết lập quyền truy cập thư mục, phân quyền tệp tin (chmod/chown)  |
| Bước 4: Cấu hình chứng chỉ bảo mật SSL/TLS (Let's Encrypt) qua HTTPS        |
| Bước 5: Đào tạo nhân viên bán hàng sử dụng Admin Panel trong 02 giờ         |
+-----------------------------------------------------------------------------+

Phân tích Chi phí - Lợi ích (Cost-Benefit Analysis):

  • Chi phí đầu tư hạ tầng ban đầu: ~1.500.000 VNĐ/năm (Hosting/VPS) + 250.000 VNĐ/năm (Tên miền .vn / .com).
  • Lợi ích thu lại: Tiết kiệm tối thiểu 1 nhân sự trực sổ sách kế toán kho (~7.000.000 VNĐ/tháng), loại bỏ hoàn toàn các sai sót thất thoát hàng hóa nhập sỉ, tỷ lệ hoàn vốn đầu tư (ROI) đạt được ngay trong tháng đầu tiên vận hành chính thức.

Hạn chế và hướng phát triển

Dù đạt được toàn bộ các mục tiêu đề ra, hệ thống vẫn tồn tại một số điểm cần tiếp tục hoàn thiện:

  • Hạn chế kỹ thuật: Chưa tích hợp trực tiếp cổng thanh toán tự động qua Webhook/IPN của các ví điện tử phổ biến (MoMo, ZaloPay, VNPay) mà vẫn thông qua xác nhận thủ công đối với hình thức chuyển khoản; cơ chế phân phối tải (Load Balancing) chưa được thiết lập cho môi trường phân tán lớn.
  • Hướng phát triển:
    1. Nâng cấp Backend lên kiến trúc RESTful Microservices sử dụng Node.js/Laravel kết hợp Redis Cache nhằm tăng thông lượng xử lý lên 5.000 CCU.
    2. Xây dựng ứng dụng di động (Mobile App) đa nền tảng bằng React Native/Flutter đồng bộ dữ liệu qua API.
    3. Ứng dụng Machine Learning để gợi ý sản phẩm dựa trên lịch sử mua sắm và câu lạc bộ bóng đá yêu thích của người dùng.

Đối tượng hưởng lợi

  • Sinh viên & Học viên CNTT: Cung cấp tài liệu tham khảo thực tế về mô hình phân tích thiết kế hướng chức năng, cách xây dựng lược đồ DFD, ERD và triển khai đồ án kết hợp PHP/JS.
  • Lập trình viên Web: Nắm bắt mô hình kiểm soát phiên làm việc an toàn, kỹ thuật xử lý giỏ hàng bất đồng bộ và mẫu thiết kế Prepared Statement ngăn chặn SQL Injection.
  • Chủ cửa hàng & Doanh nghiệp bán lẻ: Sở hữu giải pháp chuyển đổi số toàn diện với chi phí tối thiểu, nâng cao năng lực cạnh tranh và kiểm soát dòng tiền chính xác.
  • Nhà nghiên cứu ứng dụng: Nền tảng dữ liệu thực tế về hành vi mua sắm mặt hàng thể thao của người tiêu dùng tại các đô thị lớn sau dịch bệnh.

Câu hỏi thường gặp

1. Cấu hình phần cứng và môi trường tối thiểu để triển khai website là gì?

Hệ thống yêu cầu máy chủ Linux (Ubuntu 20.04/22.04 LTS) hoặc Windows Server, tối thiểu 1 Core CPU, 1GB RAM, 10GB dung lượng lưu trữ SSD, Web Server Apache 2.4+ hoặc Nginx 1.18+, PHP phiên bản 7.4 trở lên (khuyến nghị PHP 8.1 với đầy đủ extension pdo_mysql, mbstring, gd) và MySQL 8.0/MariaDB 10.5.

2. Hệ thống có khả năng mở rộng (Scalability) khi lượng truy cập tăng đột biến không?

Cơ sở dữ liệu được thiết kế chuẩn hóa 3NF và đánh chỉ mục B-Tree tại các trường khóa chính/khóa ngoại giúp câu lệnh truy vấn duy trì độ phức tạp $O(\log N)$. Khi lưu lượng tăng cao, hệ thống có thể mở rộng theo chiều dọc (Vertical Scaling) bằng cách nâng cấp tài nguyên VPS hoặc tách riêng Database Server độc lập.

3. Làm thế nào để tích hợp thêm các dịch vụ vận chuyển bên thứ ba?

Cấu trúc module đơn hàng (RQ09) được thiết kế mở. Lập trình viên chỉ cần triển khai thêm Service Class giao tiếp qua cURL/REST API với các đơn vị vận chuyển (Giao Hàng Nhanh, Viettel Post) để tự động đẩy thông tin vận đơn khi trạng thái đơn hàng chuyển sang "Đã xác nhận".

4. Quy trình sao lưu và phục hồi dữ liệu định kỳ được thực hiện như thế nào?

Quản trị viên có thể thiết lập lệnh Cronjob trên máy chủ để tự động thực thi công cụ mysqldump xuất file sao lưu CSDL hàng ngày vào lúc 00:00 và đồng bộ lên dịch vụ lưu trữ đám mây. Quy trình khôi phục chỉ mất dưới 3 phút thông qua câu lệnh nạp trực tiếp file .sql.

5. Chi phí bảo trì và thời gian thu hồi vốn (ROI) ước tính ra sao?

Chi phí bảo trì hệ thống định kỳ gần như bằng không nếu tự quản trị hạ tầng. Với khả năng cắt giảm thất thoát tồn kho và tăng trưởng 25% doanh số bán hàng online, một cửa hàng quy mô như Soccer Shop có thể thu hồi toàn bộ chi phí đầu tư trong vòng 15 đến 30 ngày.

Kết luận

Đồ án tốt nghiệp "Phát triển Website quản lý bán đồ thể thao sử dụng JS" do sinh viên Nguyễn Tuấn Thành thực hiện dưới sự hướng dẫn khoa học của ThS. Đỗ Thị Huyền (Khoa Công nghệ Thông tin - Trường Đại học Công nghệ Đông Á) đã giải quyết triệt để bài toán số hóa quản lý cho cửa hàng thể thao Soccer Shop. Đề tài không chỉ đáp ứng trọn vẹn các yêu cầu kỹ thuật về thiết kế cơ sở dữ liệu chuẩn hóa, phân tầng chức năng rõ ràng và giao diện thân thiện, mà còn mang lại giá trị thực tiễn to lớn trong việc tối ưu hóa chi phí vận hành và nâng cao trải nghiệm khách sắm trực tuyến. Đây là nền tảng vững chắc để tiếp tục mở rộng phát triển thành giải pháp quản lý bán lẻ đa kênh (Omnichannel) toàn diện trong tương lai.