Giới thiệu dự án

Thương mại điện tử (E-Commerce) ngành thời trang tại Việt Nam đang ghi nhận mức tăng trưởng trung bình hơn 22% mỗi năm (theo báo cáo e-Conomy SEA). Sự dịch chuyển mạnh mẽ từ mô hình bán hàng truyền thống sang kinh doanh số hóa đặt ra yêu cầu cấp thiết về việc tối ưu hóa hạ tầng bán hàng, quản lý đơn lẻ và đồng bộ hóa trải nghiệm người dùng đa kênh.

Đồ án tốt nghiệp "Xây dựng Website Quản lý Bán Quần Áo" được thực hiện bởi sinh viên Đại học Thủ Dầu Một (Khoa Công nghệ Thông tin) dưới sự hướng dẫn của GVHD. Nguyễn Hữu Vinh, tập trung giải quyết bài toán cốt lõi: chuyển đổi số quy trình quản trị kho hàng may mặc đa biến thể và tự động hóa quy trình bán hàng - thanh toán trực tuyến cho các thương hiệu thời trang vừa và nhỏ.

+-----------------------------------------------------------------------+
|                 KIẾN TRÚC HỆ THỐNG WEBSITE THỜI TRANG                 |
+-----------------------------------------------------------------------+
|  CLIENT TIER: Responsive UI (Bootstrap 5.2, Swiper.js, Ajax/jQuery)   |
|                                |                                      |
|  APP TIER:    Laravel 8.x MVC Framework (PHP 8.0)                     |
|               - Auth & RBAC Middleware  - Cart & Checkout Controller  |
|               - Eloquent ORM Engine     - Payment Gateway (VNPay)     |
|                                |                                      |
|  DATA TIER:   SQL Server 2019 / MySQL 8.0 (3NF Relational Schema)     |
+-----------------------------------------------------------------------+

Vấn đề thực tế và điểm nghẽn nghiệp vụ (Pain Points)

Các cửa hàng thời trang truyền thống thường đối mặt với các thách thức kỹ thuật và vận hành:

  • Quản lý biến thể phức tạp: Một mẫu quần áo có thể phân tách thành hàng chục đơn vị lưu kho (SKU) dựa trên tổ hợp Màu sắc (Color) $\times$ Kích cỡ (Size). Quản lý thủ công dẫn đến sai lệch tồn kho tức thời.
  • Tỷ lệ rớt đơn do quy trình thanh toán: Thiếu cổng thanh toán số nội địa (VNPay) và quốc tế (PayPal) khiến khách hàng bỏ dở giỏ hàng.
  • Phân quyền và bảo mật lỏng lẻo: Dữ liệu đơn hàng, thông tin khách hàng và doanh thu chưa được bảo vệ bằng các chuẩn mã hóa và phân quyền nhiều cấp (RBAC).

Mục tiêu dự án

  1. Thiết kế cơ sở dữ liệu quan hệ chuẩn 3NF: Tối ưu hóa việc phân cấp Danh mục (Category), Thương hiệu (Brand), Sản phẩm (Product) và Biến thể chi tiết (Product_Details).
  2. Xây dựng hệ thống Backend trên nền tảng Laravel 8: Hiện thực hóa đầy đủ kiến trúc MVC, xử lý logic kiểm tra tồn kho, xử lý đơn hàng theo thời gian thực.
  3. Tích hợp cổng thanh toán trực tuyến: Kết nối API Sandbox VNPay và PayPal với mã băm bảo mật HMAC-SHA512.
  4. Tối ưu hóa giao diện người dùng (UI/UX): Tích hợp Ajax cho thao tác thêm giỏ hàng không tải lại trang, responsive trên mọi kích thước màn hình với Bootstrap 5.2.

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

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

Tiêu chí Cửa hàng truyền thống Nền tảng SaaS đóng gói Hệ thống Website Laravel 8 Tùy biến
Chi phí đầu tư Mặt bằng cao, nhân sự lớn Thuê bao hàng tháng + phí % giao dịch Chi phí hosting cơ bản, toàn quyền sở hữu
Quản lý SKU biến thể Sổ sách/Excel dễ sai lệch Cấu hình phức tạp theo khuôn mẫu Cơ chế tách bảng Product_Details linh hoạt
Khả năng mở rộng (Scale) Giới hạn địa lý Phụ thuộc Plugin của bên thứ 3 Tùy biến API, Microservices theo nhu cầu
Bảo mật & Dữ liệu Dễ thất thoát thông tin Dữ liệu lưu tại máy chủ nhà cung cấp Tự chủ hạ tầng, chuẩn hóa Bcrypt & CSRF

Phân tích yêu cầu chức năng theo mô hình MoSCoW

  • Must-have (Bắt buộc): Đăng ký/đăng nhập phân quyền (Admin, Staff, Customer), quản lý CRUD sản phẩm biến thể, giỏ hàng, đặt hàng, tích hợp thanh toán VNPay, xác thực Mail OTP/Reset Password.
  • Should-have (Nên có): Lọc sản phẩm đa tiêu chí (giá, danh mục, kích cỡ), sản phẩm yêu thích (Wishlist), theo dõi trạng thái đơn hàng (Pending, In Progress, Delivered, Cancel).
  • Could-have (Có thể có): Bảng hướng dẫn chọn size (Size Guide Chart), gợi ý sản phẩm bán chạy/sản phẩm mới (Trending/New Arrival flags).
  • Won't-have (Chưa thực hiện ở pha này): Ứng dụng di động Native (Android/iOS), gợi ý sản phẩm bằng Machine Learning.

Thiết kế hệ thống

Ngăn xếp công nghệ (Technology Stack)

  • Backend Framework: Laravel 8.83 (Ngôn ngữ lập trình PHP 8.0)
  • Cơ sở dữ liệu: Microsoft SQL Server 2019 / MySQL 8.0 (Hỗ trợ Eloquent ORM)
  • Frontend Engine: Blade Template, Bootstrap 5.2.3, jQuery 3.6.0, Swiper.js Slider
  • Tích hợp thanh toán & Dịch vụ: VNPay Payment Gateway Sandbox API v2.1.0, SMTP Gmail Relay

Thiết kế cơ sở dữ liệu quan hệ (Database Schema)

-- Bảng sản phẩm chính (Products)
CREATE TABLE products (
    id BIGINT IDENTITY(1,1) PRIMARY KEY,
    category_id BIGINT NOT NULL,
    brand_id BIGINT NOT NULL,
    productname NVARCHAR(255) NOT NULL,
    price FLOAT NOT NULL,
    price_sale FLOAT NULL,
    sku NVARCHAR(255) UNIQUE NOT NULL,
    slug NVARCHAR(255) NOT NULL,
    description NVARCHAR(MAX) NULL,
    view_count BIGINT DEFAULT 0,
    sold BIGINT DEFAULT 0,
    created_at DATETIME DEFAULT GETDATE(),
    updated_at DATETIME DEFAULT GETDATE()
);

-- Bảng chi tiết biến thể thời trang (Product Details)
CREATE TABLE product_details (
    id BIGINT IDENTITY(1,1) PRIMARY KEY,
    product_id BIGINT NOT NULL,
    color NVARCHAR(100) NOT NULL,
    size NVARCHAR(50) NOT NULL,
    quantity INT NOT NULL DEFAULT 0,
    colorImg_1 NVARCHAR(255) NULL,
    colorImg_2 NVARCHAR(255) NULL,
    created_at DATETIME DEFAULT GETDATE(),
    FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
);

Thiết kế API Endpoints và Điều hướng (Routing)

HTTP Method Endpoint URI Controller & Action Quyền truy cập Chức năng
GET /api/products/filter ProductController@filter Public Lọc sản phẩm theo danh mục, giá, size
POST /cart/add-ajax CartController@addToCartAjax Customer Thêm biến thể vào giỏ hàng qua Ajax
POST /checkout/vnpay PaymentController@createVnpayPayment Customer Khởi tạo giao dịch thanh toán VNPay
GET /checkout/vnpay-return PaymentController@vnpayCallback Public Webhook xử lý trạng thái thanh toán
PUT /admin/orders/{id}/status AdminOrderController@updateStatus Admin/Staff Cập nhật tiến trình đơn hàng

Implementation và kết quả

Quá trình phát triển và Thuật toán cốt lõi

Hệ thống được phát triển theo mô hình MVC tách biệt hoàn toàn giữa tầng xử lý dữ liệu và tầng biểu diễn.

1. Thiết lập quan hệ Eloquent Model đa tầng

Tại tầng Model, mối quan hệ 1-Nhiều giữa Sản phẩm (Product) và Biến thể (ProductDetail) được cấu hình nhằm hỗ trợ cơ chế Eager Loading, giảm thiểu truy vấn N+1:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $table = 'products';
    protected $fillable = ['category_id', 'brand_id', 'productname', 'price', 'price_sale', 'sku', 'slug'];

    public function details()
    {
        return $this->hasMany(ProductDetail::class, 'product_id', 'id');
    }

    public function category()
    {
        return $this->belongsTo(Category::class, 'category_id', 'id');
    }
}

2. Xử lý Giỏ hàng Bất đồng bộ (Asynchronous Ajax Cart Engine)

Việc cập nhật số lượng và tính tổng giá tiền được thực thi thông qua Ajax, mang lại trải nghiệm mượt mà không cần tải lại toàn bộ trang web:

// Thao tác cập nhật giỏ hàng trực quan không gián đoạn luồng duyệt
function updateCartQuantity(cartItemId, newQty) {
    $.ajax({
        url: '/cart/update-quantity',
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
            item_id: cartItemId,
            quantity: newQty
        },
        success: function(response) {
            if(response.status === 'success') {
                $('#item-total-' + cartItemId).text(response.item_total + ' VNĐ');
                $('#cart-subtotal').text(response.subtotal + ' VNĐ');
                toastr.success('Cập nhật giỏ hàng thành công!');
            }
        },
        error: function(xhr) {
            toastr.error('Lỗi cập nhật tồn kho biến thể.');
        }
    });
}

3. Thuật toán xác thực chữ ký số thanh toán VNPay (HMAC-SHA512)

Đảm bảo an toàn giao dịch bằng cách so khớp mã băm chữ ký từ dữ liệu phản hồi:

public function vnpayCallback(Request $request)
{
    $vnp_SecureHash = $request->vnp_SecureHash;
    $inputData = array();
    foreach ($request->all() as $key => $value) {
        if (substr($key, 0, 4) == "vnp_" && $key != "vnp_SecureHash") {
            $inputData[$key] = $value;
        }
    }
    ksort($inputData);
    $hashData = urldecode(http_build_query($inputData));
    $secureHash = hash_hmac('sha512', $hashData, config('services.vnpay.hash_secret'));

    if ($secureHash === $vnp_SecureHash) {
        if ($request->vnp_ResponseCode == '00') {
            // Thanh toán thành công: Cập nhật Order status = 1 (Paid)
            Order::where('id', $request->vnp_TxnRef)->update(['status' => 1]);
            return view('client.checkout_success');
        }
    }
    return view('client.checkout_fail');
}

Kiểm thử và Đánh giá hiệu năng

+--------------------------------------------------------------------+
|               KẾT QUẢ KIỂM THỬ VÀ HIỆU NĂNG HỆ THỐNG               |
+--------------------------------------------------------------------+
|  Unit Test Coverage (PHPUnit):             86.4%                   |
|  Thời gian phản hồi trung bình (Response): 320ms                   |
|  Thông lượng chịu tải (Throughput):        450 requests/sec        |
|  Điểm hài lòng kiểm thử người dùng (UAT):  4.65 / 5.0              |
+--------------------------------------------------------------------+
  • Kiểm thử đơn vị & Tích hợp (Unit & Integration Tests): 48 ca kiểm thử tự động trên PHPUnit cho các module Auth, Cart Calculation, và Order Fulfillment đạt tỷ lệ vượt qua 100%.
  • Hiệu năng hệ thống (System Benchmark):
    • Thời gian phản hồi trang danh mục (50 sản phẩm/trang): 320ms.
    • Thời gian xác thực đơn hàng & tạo giao dịch thanh toán: 680ms.
    • Tải trọng tối đa thử nghiệm: 450 requests/giây với CPU load < 45% trên môi trường Web Server tiêu chuẩn.

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

  1. Cấu trúc dữ liệu biến thể tách lớp chuyên sâu: Khắc phục hạn chế của việc lưu trữ cứng thuộc tính sản phẩm. Bảng product_details cho phép mở rộng không giới hạn các tổ hợp Size/Color mà không cần thay đổi cấu trúc bảng chính products.
  2. Quy trình đặt hàng khép kín không phụ thuộc bên thứ ba: Tích hợp trực tiếp VNPay Sandbox kết hợp gửi thư xác nhận tự động qua giao thức SMTP giúp tối ưu 65% thời gian xử lý đơn hàng so với gọi điện xác nhận thủ công.
  3. Phân quyền truy cập đa cấp (Multi-role RBAC): Tách biệt rõ ràng quyền hạn giữa Quản trị viên tối cao (Admin - xem thống kê doanh thu, quản lý nhân sự) và Nhân viên vận hành (Staff - chỉ xem và cập nhật trạng thái đơn, kiểm tra tồn kho).

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

Hướng dẫn triển khai môi trường Production

Hệ thống sẵn sàng triển khai trên hệ điều hành Ubuntu Server 20.04 LTS chạy Nginx/Apache:

# 1. Clone mã nguồn và cài đặt dependencies
git clone https://github.com/project-repo/fashion-store.git
cd fashion-store
composer install --optimize-autoloader --no-dev

# 2. Cấu hình môi trường (.env)
cp .env.example .env
php artisan key:generate

# 3. Chạy Migration và cấu hình quyền thư mục
php artisan migrate --force
php artisan storage:link
sudo chmod -R 775 storage bootstrap/cache

Phân tích hiệu quả kinh tế (Cost-Benefit Analysis)

  • Chi phí vận hành: Tiết kiệm khoảng 70% chi phí phần mềm hàng năm so với việc duy trì các gói dịch vụ thương mại điện tử chuyên nghiệp đóng gói nước ngoài.
  • Thời gian hoàn vốn (ROI): Ước tính từ 3 đến 6 tháng nhờ cắt giảm nhân sự kiểm kho thủ công và tối ưu chi phí quảng cáo qua đường dẫn chuẩn SEO (Slug URL tự động).

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

  • Hạn chế kỹ thuật hiện tại: Chưa tích hợp Redis/Memcached để cache dữ liệu sản phẩm tĩnh; chưa cấu hình hàng đợi Message Queue (RabbitMQ) khi gửi email với số lượng lớn.
  • Hướng phát triển:
    • Nâng cấp lên kiến trúc Headless E-commerce (Laravel REST API Backend + Next.js/React Frontend).
    • Tích hợp thêm các phương thức thanh toán ví điện tử: MoMo, ZaloPay, Apple Pay.
    • Ứng dụng hệ thống gợi ý sản phẩm thông minh dựa trên hành vi duyệt web của khách hàng.

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

  • Sinh viên & Lập trình viên mới: Cung cấp mã nguồn tham khảo chuẩn mực về kiến trúc MVC trên Laravel 8, kỹ thuật truy vấn Eloquent và xử lý Ajax giỏ hàng.
  • Chủ cửa hàng thời trang vừa & nhỏ: Sở hữu hệ thống quản lý bán hàng toàn diện, linh hoạt biến thể với chi phí đầu tư ban đầu thấp.
  • Người dùng mua sắm: Trải nghiệm giao diện thân thiện, tra cứu kích cỡ chuẩn xác, thanh toán an toàn và nhận thông báo đơn hàng tức thời.

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

1. Yêu cầu phần cứng và phần mềm tối thiểu để triển khai website là gì?

Máy chủ cần cài đặt PHP >= 7.4 (khuyến nghị PHP 8.0), Web Server Apache hoặc Nginx, Cơ sở dữ liệu MySQL 5.7/8.0 hoặc Microsoft SQL Server 2019, RAM tối thiểu 1GB và dung lượng ổ cứng từ 5GB trở lên.

2. Hệ thống xử lý trường hợp hai khách hàng cùng đặt một sản phẩm còn lại cuối cùng trong kho như thế nào?

Laravel Database Transaction kết hợp cơ chế khóa dòng (lockForUpdate()) trong hàm xử lý đơn hàng sẽ đảm bảo tính nguyên vẹn (ACID), chỉ cho phép giao dịch hoàn tất đầu tiên trừ tồn kho thành công và thông báo hết hàng cho giao dịch sau.

3. Làm thế nào để tích hợp thêm các cổng thanh toán khác như MoMo hay ViettelPay?

Nhờ cấu trúc Service Pattern được thiết kế module hóa, lập trình viên chỉ cần tạo thêm MomoPaymentService kế thừa cùng interface thanh toán và cấu hình thêm Secret Keys trong file .env.

4. Dữ liệu mật khẩu và thông tin tài khoản người dùng được bảo vệ ra sao?

Mật khẩu được băm một chiều bằng thuật toán Bcrypt với độ phức tạp cao, không thể giải mã ngược. Toàn bộ các form gửi dữ liệu đều bắt buộc có token @csrf chống tấn công giả mạo yêu cầu.

5. Website có hỗ trợ chuẩn SEO để đẩy thứ hạng từ khóa sản phẩm không?

Có. Hệ thống tự động tạo trường slug không dấu từ tên sản phẩm và danh mục, kết hợp cấu trúc HTML5 ngữ nghĩa và thẻ meta responsive, hỗ trợ tối ưu hóa công cụ tìm kiếm Google.

Kết luận

Đồ án "Xây dựng Website Quản lý Bán Quần Áo" của nhóm tác giả Trường Đại học Thủ Dầu Một đã xây dựng thành công một giải pháp thương mại điện tử chuyên ngành thời trang toàn diện. Ứng dụng giải quyết hiệu quả bài toán quản lý biến thể đa kích cỡ/màu sắc trên nền tảng Laravel 8 vững chắc, đáp ứng chuẩn mực thiết kế cơ sở dữ liệu và tích hợp mượt mà cổng thanh toán VNPay. Đề tài mở ra tiềm năng ứng dụng thực tiễn cao cho các doanh nghiệp bán lẻ trong kỷ nguyên số hóa.