Giới thiệu dự án

Sự bùng nổ của cuộc Cách mạng Công nghiệp 4.0 và thương mại điện tử (TMĐT) đã tái định hình hành vi tiêu dùng toàn cầu. Tại Việt Nam, thị trường bán lẻ trực tuyến đạt mức tăng trưởng trung bình trên 25%/năm, trong đó ngành hàng chăm sóc sắc đẹp và mỹ phẩm luôn nằm trong nhóm có lưu lượng giao dịch cao nhất. Tuy nhiên, rào cản kỹ thuật lớn nhất của các nền tảng web truyền thống chính là trải nghiệm người dùng (UX) bị gián đoạn do cơ chế tải lại toàn bộ trang (Full Page Reload/PostBack).

Vấn đề cốt lõi đặt ra là: Khi khách hàng thực hiện các thao tác cơ bản như tra cứu mỹ phẩm phù hợp với từng loại da (da dầu, da khô, da nhạy cảm), thêm sản phẩm vào giỏ hàng hoặc xác thực tài khoản, trình duyệt web truyền thống buộc phải gửi yêu cầu đồng bộ (Synchronous HTTP Request) lên máy chủ và tải lại toàn bộ tài nguyên (HTML, CSS, hình ảnh). Quá trình này gây ra độ trễ từ 2.5 đến 4.0 giây, tạo hiện tượng màn hình trắng nhấp nháy, làm tăng tỷ lệ thoát trang (Bounce Rate) và giảm tỷ lệ chuyển đổi đơn hàng lên tới 68% theo các báo cáo thống kê hành vi TMĐT.

Đồ án khóa luận "Tìm hiểu kĩ thuật AJAX và ứng dụng xây dựng Website bán mỹ phẩm" do sinh viên Trần Thị Diễm (Khoa Công nghệ Thông tin, Trường Đại học Quảng Nam) thực hiện dưới sự hướng dẫn của ThS. Trần Thị Diệu Linh nhằm giải quyết triệt để bài toán độ trễ trên môi trường web.

Mục tiêu cụ thể của đề tài bao gồm:

  1. Nghiên cứu toàn diện cơ chế hoạt động bất đồng bộ của đối tượng XMLHttpRequest và thư viện jQuery AJAX.
  2. Thiết kế và chuẩn hóa cơ sở dữ liệu quan hệ đạt chuẩn 3NF (Third Normal Form) gồm 7 thực thể dữ liệu nghiệp vụ.
  3. Xây dựng website bán mỹ phẩm thương hiệu Hanayuki tích hợp cơ chế cập nhật giao diện thành phần (Partial DOM Update).
  4. Triển khai phân hệ quản trị (Admin Dashboard) hỗ trợ xử lý dữ liệu thời gian thực (Real-time CRUD) không tải lại trang.
  5. Đánh giá và tối ưu hóa hiệu năng, giảm thiểu lượng băng thông tiêu thụ giữa Client và Server.

Phương pháp tiếp cận của đề tài là ứng dụng kỹ thuật AJAX (Asynchronous JavaScript and XML) trên nền tảng ngôn ngữ kịch bản máy chủ PHP kết hợp hệ quản trị cơ sở dữ liệu MySQL. Kết quả kỳ vọng đạt được là rút ngắn thời gian phản hồi giao diện xuống dưới 350ms, tiết kiệm hơn 60% băng thông tải trang và loại bỏ hoàn toàn tình trạng "đóng băng" giao diện. Phạm vi nghiên cứu tập trung vào mô hình bán lẻ B2C trực tuyến cho dòng mỹ phẩm chăm sóc da chuyên sâu, giới hạn thử nghiệm trong môi trường máy chủ cục bộ WampServer trước khi mở rộng lên hạ tầng Cloud.

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

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

Trước khi xây dựng hệ thống, việc đánh giá các giải pháp công nghệ trên thị trường là bước bắt buộc để xác định khoảng trống công nghệ và tối ưu hóa kiến trúc.

Tiêu chí so sánh Web TMĐT truyền thống (Classic PostBack) Ứng dụng Desktop POS độc lập Website bán mỹ phẩm ứng dụng AJAX (Đề tài)
Cơ chế tải dữ liệu Đồng bộ (Synchronous) - Full Reload Cục bộ (Local Memory/File) Bất đồng bộ (Asynchronous) - Partial DOM
Thời gian phản hồi 2.5s - 4.2s mỗi thao tác < 100ms 180ms - 320ms
Mức tiêu hao băng thông Rất cao (Tải lại toàn bộ Assets) Không tốn băng thông web Rất thấp (Chỉ truyền dữ liệu JSON/Text)
Khả năng tiếp cận Đa nền tảng qua trình duyệt Giới hạn hệ điều hành cài đặt Mọi thiết bị có trình duyệt web
Trải nghiệm giao diện Nhấp nháy, gián đoạn tương tác Mượt mà, tức thì Mượt mà tương đương Desktop

Phân tích yêu cầu hệ thống theo mô hình phân loại MoSCoW:

  • Must Have (Bắt buộc): Lọc mỹ phẩm theo loại da/dòng sản phẩm không reload; Thêm/Xóa/Sửa giỏ hàng ngầm qua AJAX; Kiểm tra trùng lặp tên đăng nhập thời gian thực; Module Admin CRUD sản phẩm và danh mục bất đồng bộ.
  • Should Have (Nên có): Xem nhanh chi tiết mỹ phẩm qua Modal Box; Thư viện hình ảnh đa góc chụp cho từng mặt hàng; Thống kê doanh thu sơ bộ.
  • Could Have (Có thể có): Gợi ý combo mỹ phẩm thông minh dựa trên lịch sử xem; Hệ thống đánh giá/phản hồi sao trực tiếp.
  • Won't Have (Chưa thực hiện): Tích hợp cổng thanh toán quốc tế trực tiếp qua Visa/Mastercard (sử dụng phương thức COD và chuyển khoản ngân hàng trong pha này).

Thiết kế hệ thống

Kiến trúc hệ thống được xây dựng theo mô hình 3 tầng (3-Tier Architecture) phân tách rõ ràng giữa giao diện hiển thị, tầng xử lý logic và tầng lưu trữ dữ liệu:

graph TD
    Client[Client Browser: HTML5 / CSS3 / Bootstrap 3 / jQuery AJAX]
    Server[Web Server: Apache 2.4 / PHP 7.x Engine]
    DB[(Database: MySQL 5.7 RDBMS)]

    Client -- "1. Asynchronous XMLHttpRequest (JSON/Payload)" --> Server
    Server -- "2. SQL Queries (Prepared Statements)" --> DB
    DB -- "3. Result Set" --> Server
    Server -- "4. Response Data (JSON / Partial HTML)" --> Client
    Client -- "5. DOM Manipulation (Target Container Update)" --> Client

  • Technology Stack & Versions:

    • Frontend: HTML5, CSS3, JavaScript ES5/ES6, Bootstrap 3.3.7, jQuery 3.3.1.
    • Backend: PHP 7.2.x (tương thích máy chủ Apache 2.4.x).
    • Database: MySQL 5.7 (InnoDB Engine, utf8mb4 collation).
    • Development Environment: WampServer 3.1.x, Microsoft Visual Studio Code 1.12.

  • Thiết kế Cơ sở dữ liệu (Database Schema): Hệ thống chuẩn hóa 7 bảng quan hệ đạt chuẩn 3NF:

    1. user (IdUser, TenDangNhap, MatKhau, Email, Level)
    2. loaisanpham (IdLoaiSanPham, TenLoaiSanPham, MoTa)
    3. sanpham (IdSanPham, TenSanPham, GiaSanPham, GioiThieuSanPham, ChiTietSanPham, TinhTrang, IdLoaiSanPham)
    4. khachhang (IdKhachHang, TenDangNhap, TenKhachHang, MatKhau, Email, GioiTinh, DiaChiLienLac, SoDienThoai)
    5. images (IdImages, TenImages, IdSanPham)
    6. giohang (IdGioHang, IdKhachHang, IdSanPham, SoLuong, NgayMua, TrangThai)
    7. phanhoi (IdPhanHoi, IdKhachHang, NoiDung, NgayGui)
-- DDL Schema rút gọn cho bảng thực thể lõi
CREATE TABLE sanpham (
    IdSanPham INT AUTO_INCREMENT PRIMARY KEY,
    TenSanPham VARCHAR(255) NOT NULL,
    GiaSanPham DECIMAL(12,2) NOT NULL,
    GioiThieuSanPham TEXT,
    ChiTietSanPham LONGTEXT,
    TinhTrang INT DEFAULT 1,
    IdLoaiSanPham INT,
    CONSTRAINT fk_sanpham_loai FOREIGN KEY (IdLoaiSanPham) 
        REFERENCES loaisanpham(IdLoaiSanPham) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
  • API/Endpoint Design:
    • POST /ajax/cart_action.php: Tiếp nhận product_id, quantity và cập nhật giỏ hàng trong session/CSDL mà không rời trang.
    • GET /ajax/filter_products.php: Nhận tham số category_id và skin_type, trả về cấu trúc HTML các thẻ sản phẩm tương ứng.
    • POST /ajax/check_username.php: Xác minh sự tồn tại của tài khoản khi người dùng nhập trên form đăng ký.

Methodology

Dự án áp dụng mô hình phát triển phần mềm lặp tuần tự (Iterative Waterfall Model) kéo dài trong 16 tuần:

[Tuần 1-3] Khảo sát nghiệp vụ & Nghiên cứu lý thuyết AJAX/PHP
   └──> [Tuần 4-6] Thiết kế CSDL (3NF) & Wireframe UI Bootstrap 3
          └──> [Tuần 7-11] Lập trình Module, Tích hợp jQuery AJAX & Backend
                 └──> [Tuần 12-14] Kiểm thử chức năng, Tối ưu tải trang
                        └──> [Tuần 15-16] Hoàn thiện tài liệu khóa luận & Báo cáo
  • Quản trị rủi ro (Risk Mitigation):
    • Rủi ro xung đột JavaScript/DOM: Đóng gói các hàm AJAX trong closure $(document).ready(), sử dụng cơ chế ủy quyền sự kiện $(document).on('click', ...) cho các phần tử sinh ra động.
    • Rủi ro bảo mật dữ liệu: Sử dụng htmlspecialchars() lọc dữ liệu chống lỗi Cross-Site Scripting (XSS) và ràng buộc toàn vẹn khóa ngoại chống lỗi dữ liệu mồ côi.

Implementation và kết quả

Development process

Quá trình phát triển tập trung vào việc chuyển đổi toàn bộ các tương tác tĩnh sang tương tác bất đồng bộ thông qua kỹ thuật xử lý ngầm.

  1. Cơ chế AJAX thuần (Native XMLHttpRequest): Minh họa cách thức khởi tạo đối tượng trao đổi dữ liệu nguyên bản trong JavaScript:
function loadProductData(productId) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("product-detail-modal").innerHTML = this.responseText;
        }
    };
    xhr.open("GET", "get_product.php?id=" + productId, true);
    xhr.send();
}
  1. Cơ chế jQuery AJAX tối ưu cho Giỏ hàng & Lọc danh mục: Được triển khai trong hệ thống website nhằm tối giản mã nguồn và tăng cường khả năng xử lý callback:
// Thao tác thêm vào giỏ hàng và cập nhật huy hiệu số lượng tức thì
function addToCart(productId, quantity) {
    $.ajax({
        url: 'ajax_cart.php',
        type: 'POST',
        dataType: 'json',
        data: {
            action: 'add',
            id_sanpham: productId,
            soluong: quantity
        },
        beforeSend: function() {
            $('#cart-status-notification').html('<span class="badge">Đang xử lý...</span>');
        },
        success: function(response) {
            if(response.status === 'success') {
                $('#cart-badge-count').text(response.total_items);
                $('#cart-mini-view').html(response.cart_html);
                alert('Đã thêm sản phẩm vào giỏ hàng thành công!');
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error: " + error);
        }
    });
}
  1. Xử lý Backend PHP trả dữ liệu linh hoạt (JSON / Partial View):
<?php
// ajax_cart.php - Backend Controller xử lý yêu cầu ngầm
session_start();
require_once('../config/database.php');

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    $productId = intval($_POST['id_sanpham']);
    $quantity = intval($_POST['soluong']);
    
    // Xử lý lưu session giỏ hàng
    if (!isset($_SESSION['cart'])) {
        $_SESSION['cart'] = [];
    }
    
    if (isset($_SESSION['cart'][$productId])) {
        $_SESSION['cart'][$productId] += $quantity;
    } else {
        $_SESSION['cart'][$productId] = $quantity;
    }
    
    $totalItems = array_sum($_SESSION['cart']);
    
    header('Content-Type: application/json');
    echo json_encode([
        'status' => 'success',
        'total_items' => $totalItems,
        'message' => 'Giỏ hàng đã được cập nhật'
    ]);
    exit;
}
?>

Testing và validation

Quá trình kiểm thử được tiến hành thông qua 45 kịch bản kiểm thử (Test Cases) trên các trình duyệt Google Chrome, Mozilla Firefox và Microsoft Edge.

Module kiểm thử Số lượng Test Cases Tỷ lệ đạt (Pass Rate) Thời gian phản hồi trung bình
Xác thực tài khoản Live 8 100% 120ms
Lọc danh mục mỹ phẩm 12 100% 210ms
Cập nhật giỏ hàng AJAX 15 100% 185ms
Admin CRUD dữ liệu 10 100% 240ms
  • Hiệu năng đo đạc qua Chrome DevTools Network Benchmark:
    • Kích thước gói tin truyền tải (Payload Size): Giảm từ 458 KB (đối với phương thức load toàn trang truyền thống) xuống còn 3.8 KB (đối với phương thức trả dữ liệu qua AJAX JSON).
    • Thời gian phản hồi tương tác (Latency): Giảm từ 3.200ms xuống còn 215ms (nhanh hơn xấp xỉ 93.2%).

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

Hệ thống website bán mỹ phẩm Hanayuki đã được hoàn thiện 100% các phân hệ chức năng:

  • Trang người dùng: Bố cục 5 khối hoàn chỉnh (Header & Menu tích hợp tìm kiếm, Slider banner mỹ phẩm khuyến mãi, Khối giới thiệu thương hiệu Hanayuki, Khối Content hiển thị sản phẩm dạng lưới Responsive, Footer thông tin cửa hàng).
  • Trang quản trị (Admin Panel): Quản lý trực quan bảng sản phẩm, loại mỹ phẩm, đơn đặt hàng và quản lý tài khoản với giao diện bảng dữ liệu tích hợp phân trang và xóa bản ghi bằng AJAX.

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

  • Cải tiến kỹ thuật vượt trội: Áp dụng mô hình trao đổi dữ liệu không đồng bộ thay thế triệt để kiến trúc PostBack cổ điển, cho phép người dùng lọc sản phẩm, chọn loại da phù hợp và cập nhật giỏ hàng mà không bị mất dấu vị trí cuộn trang (Scroll position).
  • Định lượng hiệu năng tối ưu:
    • Tiết kiệm 92% - 98% dung lượng truyền tải trên mỗi thao tác người dùng.
    • Tốc độ phản hồi giao diện tăng trưởng 85% - 93%.
    • Loại bỏ 100% hiện tượng "màn hình trắng" (Blank screen flickering) khi chuyển đổi danh mục.
  • Đóng góp vào lĩnh vực đào tạo và ứng dụng: Khóa luận cung cấp một bộ khung mã nguồn mẫu chuẩn mực, kết hợp hài hòa giữa cấu trúc PHP hướng thủ tục nâng cao và kỹ thuật JavaScript bất đồng bộ. Đây là tài liệu tham khảo có giá trị học thuật và thực tiễn cao cho sinh viên ngành Công nghệ Thông tin tại Đại học Quảng Nam khi nghiên cứu phát triển web thương mại điện tử quy mô vừa và nhỏ.

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

Kịch bản triển khai thực tế

Hệ thống hoàn toàn đáp ứng được nhu cầu thực tế của các shop kinh doanh mỹ phẩm, spa làm đẹp hoặc chuỗi phân phối mỹ phẩm thiên nhiên cần một kênh bán hàng độc lập, tốc độ cao mà không phải chịu chi phí duy trì hàng tháng từ các nền tảng thương mại điện tử bên thứ ba.

Hướng dẫn cài đặt và Triển khai (Deployment Guide)

[1. Tải & Cài đặt WampServer] 
       ↓
[2. Khởi động dịch vụ Apache (Port 80/8080) & MySQL (Port 3306)]
       ↓
[3. Truy cập phpMyAdmin -> Tạo CSDL 'db_mypham' (utf8mb4)]
       ↓
[4. Import file schema 'database.sql' vào 'db_mypham']
       ↓
[5. Copy source code vào thư mục 'C:/wamp64/www/mypham/']
       ↓
[6. Cấu hình chuỗi kết nối trong 'config/database.php']
       ↓
[7. Mở trình duyệt truy cập: http://localhost/mypham/]

Phân tích chi phí - lợi ích (Cost-Benefit Analysis)

  • Chi phí bản quyền phần mềm: 0 VNĐ (sử dụng hoàn toàn công nghệ mã nguồn mở: PHP, MySQL, Apache, Bootstrap, jQuery, VS Code).
  • Chi phí hạ tầng: 1.000.000 - 1.500.000 VNĐ/năm cho tên miền quốc tế và Shared Hosting tiêu chuẩn.
  • Thời gian hoàn vốn (ROI): Ước tính dưới 2 tháng kinh doanh nhờ tối ưu hóa chi phí vận hành đơn hàng và cải thiện tỷ lệ chốt sale trực tuyến.

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

Hạn chế kỹ thuật hiện tại

  1. Phụ thuộc vào JavaScript: Nếu trình duyệt của người dùng bị vô hiệu hóa JavaScript do chính sách bảo mật, các chức năng tương tác cốt lõi của website sẽ không thể vận hành.
  2. Khả năng điều hướng nút Back/Forward: Việc thay đổi nội dung trang ngầm qua AJAX mà chưa tích hợp HTML5 History API (window.history.pushState) khiến nút điều hướng của trình duyệt không đồng bộ với trạng thái hiển thị của bộ lọc sản phẩm.
  3. Tối ưu hóa công cụ tìm kiếm (SEO): Các nội dung được tải động sau khi trang load có thể gặp khó khăn nhất định khi được thu thập dữ liệu bởi một số bot tìm kiếm thế hệ cũ.

Hướng phát triển trong tương lai

  • Tích hợp HTML5 History API để hỗ trợ lưu URL định danh cho từng bộ lọc mỹ phẩm.
  • Nâng cấp kiến trúc lên mô hình Single Page Application (SPA) hoàn chỉnh sử dụng Vue.js hoặc ReactJS kết hợp Laravel RESTful API.
  • Tích hợp cổng thanh toán trực tuyến tự động qua mã QR tĩnh/động (VNPay, MoMo, ZaloPay).
  • Xây dựng thuật toán gợi ý mỹ phẩm thông minh ứng dụng Machine Learning dựa trên lịch sử tìm kiếm và loại da người dùng.

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

+-------------------------------------------------------------------------+
|                        ĐỐI TƯỢNG HƯỞNG LỢI                             |
+-------------------+-------------------+-----------------+---------------+
|   Sinh viên CNTT  |   Lập trình viên  |  Chủ doanh nghiệp| Nhà nghiên cứu|
| (Learning & Ref)  | (Patterns & Code) |  (Low Cost & UX)| (Empirical UI)|
+-------------------+-------------------+-----------------+---------------+
| - CSDL chuẩn 3NF  | - Clean AJAX flow | - Tiết kiệm chi | - Số liệu đo  |
| - Tài liệu đồ án  | - jQuery reusable |   phí phần mềm  |   đạc băng    |
| - Fullstack flow  | - Error handling  | - Tăng tỷ lệ    |   thông & độ  |
|                   |   controllers     |   chốt đơn hàng |   trễ thực tế |
+-------------------+-------------------+-----------------+---------------+
  • Sinh viên ngành CNTT: Tiếp cận tài liệu phân tích hệ thống hoàn chỉnh từ mô hình phân cấp chức năng, sơ đồ luồng dữ liệu (DFD mức ngữ cảnh, mức đỉnh, dưới đỉnh) đến thiết kế quan hệ ERD chuẩn mực.
  • Lập trình viên Web: Nắm vững cấu trúc kết nối bất đồng bộ giữa jQuery và PHP, làm chủ kỹ thuật bẫy lỗi HTTP và cập nhật dữ liệu DOM an toàn.
  • Chủ cửa hàng & Doanh nghiệp: Sở hữu giải pháp website bán lẻ mỹ phẩm với chi phí tối thiểu, hiệu năng vận hành vượt trội và tính năng giỏ hàng tiện dụng.
  • Giảng viên & Nhà nghiên cứu: Nguồn dữ liệu thực nghiệm kiểm chứng hiệu quả giảm thiểu độ trễ mạng và tối ưu băng thông khi ứng dụng AJAX vào hệ thống TMĐT.

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ủ hoặc máy cá nhân cài đặt môi trường WampServer/XAMPP với Apache 2.4+, PHP 7.0+ và MySQL 5.6+. Bộ nhớ RAM tối thiểu 2GB và dung lượng ổ cứng trống từ 500MB trở lên.

2. Website xử lý thế nào khi đường truyền mạng của khách hàng bị ngắt quãng lúc gửi AJAX?

Trong hàm $.ajax, hệ thống đã cấu hình thuộc tính timeout và khối error: function(xhr, status, error). Khi mất kết nối hoặc máy chủ phản hồi chậm quá thời gian quy định, giao diện sẽ xuất thông báo lỗi thân thiện để người dùng thử lại thay vì treo trang.

3. Làm thế nào để giải quyết vấn đề bảo mật (SQL Injection, XSS) trong hệ thống?

Tại tầng Backend PHP, mọi dữ liệu nhận từ $_POST và $_GET đều được chuẩn hóa qua hàm lọc ký tự đặc biệt htmlspecialchars() và làm sạch chuỗi. Đồng thời, các truy vấn CSDL được kiểm soát chặt chẽ kiểu dữ liệu đầu vào trước khi thực thi.

4. Hệ thống có khả năng chịu tải đồng thời bao nhiêu người dùng trên máy chủ thông thường?

Nhờ cơ chế AJAX chỉ truyền nhận gói tin dung lượng rất nhỏ (khoảng 3-5 KB/request thay vì vài trăm KB như web truyền thống), máy chủ Apache tiêu chuẩn có thể phục vụ đồng thời 200 - 500 phiên người dùng tương tác liên tục mà không bị nghẽn băng thông.

5. Chi phí triển khai và thời gian vận hành thử nghiệm là bao lâu?

Do ứng dụng 100% công nghệ nguồn mở miễn phí, chi phí triển khai hệ thống là 0 VNĐ nếu chạy nội bộ. Thời gian thiết lập môi trường, import CSDL và vận hành thử nghiệm toàn bộ website chỉ mất từ 15 đến 30 phút.

Kết luận

Khóa luận tốt nghiệp "Tìm hiểu kĩ thuật AJAX và ứng dụng xây dựng Website bán mỹ phẩm" của tác giả Trần Thị Diễm đã hoàn thành xuất sắc các mục tiêu nghiên cứu và ứng dụng thực tiễn đề ra. Bằng việc kết hợp nhuần nhuyễn giữa kỹ thuật truyền thông bất đồng bộ AJAX, ngôn ngữ kịch bản PHP và cơ sở dữ liệu quan hệ MySQL, đề tài đã giải quyết triệt để nhược điểm gián đoạn hiển thị của các website thương mại điện tử truyền thống.

Công trình không chỉ mang lại giá trị học thuật thông qua hệ thống sơ đồ luồng dữ liệu, chuẩn hóa CSDL 3NF chặt chẽ mà còn tạo ra một sản phẩm phần mềm có tính ứng dụng cao, sẵn sàng phục vụ cho hoạt động kinh doanh mỹ phẩm trong thực tế. Đây là nền tảng vững chắc để mở rộng phát triển thành các hệ thống thương mại điện tử đa kênh quy mô lớn trong tương lai.