Giới thiệu dự án

Trong bối cảnh kỷ nguyên Internet phát triển bùng nổ, thương mại điện tử (E-commerce) đã trở thành hạ tầng kinh doanh không thể thiếu cho các doanh nghiệp. Theo các thống kê từ O’Reilly Media và W3C, lưu lượng truy cập web toàn cầu tăng trưởng theo cấp số nhân, kéo theo khối lượng dữ liệu trao đổi khổng lồ giữa máy trạm (client) và máy chủ (server). Tuy nhiên, các hệ thống website truyền thống dựa trên nền tảng Web 1.0 bộc lộ nhiều điểm nghẽn nghiêm trọng: mô hình tương tác đồng bộ "nhấp - chờ - tải lại" (click-wait-and-refresh) buộc toàn bộ trang HTML/CSS phải nạp lại từ đầu ngay cả khi chỉ cập nhật một phần nhỏ dữ liệu, gây lãng phí từ 60% đến 80% băng thông đường truyền và tạo độ trễ giao diện đáng kể.

Đồ án tốt nghiệp "Tìm hiểu Web 2.0 và xây dựng ứng dụng web bán hàng" (Thực hiện bởi sinh viên Bo Rattana, ngành Truyền thông và Mạng máy tính, Khoa Công nghệ Thông tin – Trường Đại học Bách Khoa Hà Nội, dưới sự hướng dẫn của Thầy Nguyễn Linh Giang) được triển khai nhằm giải quyết bài toán cốt lõi về hiệu năng và trải nghiệm người dùng trong hệ thống bán lẻ trực tuyến.

                                  MÔ HÌNH VẤN ĐỀ VÀ GIẢI PHÁP
+------------------------------------+             +-------------------------------------+
|      Web 1.0 (Truyền thống)        |             |        Web 2.0 & AJAX Engine        |
| - Tải lại toàn bộ trang (Refresh)  |  -------->  | - Trao đổi dữ liệu bất đồng bộ (XHR)|
| - Lãng phí băng thông (HTML + CSS) |  Chuyển đổi | - Cập nhật cục bộ qua DOM Tree      |
| - Server gánh toàn bộ tải render   |             | - Tối ưu băng thông & tăng tốc 70%  |
+------------------------------------+             +-------------------------------------+

Mục tiêu của đồ án:

  1. Nghiên cứu toàn diện cơ sở lý thuyết về kiến trúc Web 2.0, các giao thức cấp phát nội dung (RSS, RDF, Atom, REST, SOAP) và tổ hợp công nghệ AJAX (Asynchronous JavaScript and XML).
  2. Thiết kế và hiện thực hóa cơ chế truyền thông bất đồng bộ giữa Client và Server sử dụng đối tượng XMLHttpRequest kết hợp xử lý dữ liệu chuẩn XML/XSLT.
  3. Xây dựng website thương mại điện tử hoàn chỉnh cho cửa hàng quy mô vừa và nhỏ (phân hệ kinh doanh máy tính xách tay và thiết bị công nghệ) trên nền tảng ngôn ngữ PHP và hệ quản trị cơ sở dữ liệu quan hệ.
  4. Tích hợp module tìm kiếm tức thì (Live Search) và quản lý giỏ hàng bất đồng bộ nhằm loại bỏ hoàn toàn hiện tượng nhấp nháy màn hình khi tương tác.

Phạm vi và giới hạn: Dự án tập trung vào việc tối ưu hóa giao tiếp tầng ứng dụng (Application Layer) phía Client-Side và Server-Side trên trình duyệt chuẩn; giới hạn thử nghiệm trên các trình duyệt tiêu chuẩn hỗ trợ DOM Level 2 và engine JavaScript tương thích chuẩn ECMAScript.

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

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

Trước khi kiến trúc Web 2.0 và AJAX định hình tiêu chuẩn mới, các giải pháp xây dựng ứng dụng web động đều gặp phải những rào cản kỹ thuật nhất định:

Giải pháp công nghệ Ưu điểm Nhược điểm & Rủi ro kỹ thuật
CGI (Common Gateway Interface) Khả năng truy xuất CSDL trực tiếp, hỗ trợ Perl/C/C++. Hiệu năng kém do mỗi request tạo một tiến trình mới (fork process), tiềm ẩn lỗ hổng bảo mật hệ thống.
Java Applets Giao diện đồ họa phong phú, thực thi mã nhúng sandbox. Yêu cầu máy ảo Java (JVM) nặng nề phía client, thời gian khởi tạo chậm, không tích hợp mượt với DOM HTML.
DHTML truyền thống Thao tác giao diện động thông qua CSS và JavaScript cơ bản. Không có kênh truyền thông nền bất đồng bộ; vẫn phải nạp lại toàn bộ trang khi cần đồng bộ dữ liệu với server.
AJAX trên nền Web 2.0 Tải dữ liệu bất đồng bộ qua XMLHttpRequest, cập nhật DOM cục bộ, tiết kiệm băng thông tối đa. Phá vỡ luồng nút "Back/Forward" của trình duyệt, khó bookmark URL trạng thái nếu không xử lý hash fragment.

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

  • Must have (Bắt buộc có): Tra cứu danh mục sản phẩm, hiển thị sản phẩm cùng nhóm, module tìm kiếm dữ liệu bất đồng bộ không tải lại trang, chức năng đặt hàng trực tuyến, giỏ hàng (Cart), phân quyền Admin/Customer/Guest.
  • Should have (Nên có): Xác thực tài khoản thành viên, quản lý danh mục CRUD (Create, Read, Update, Delete) cho quản trị viên, kiểm tra tính hợp lệ của dữ liệu đầu vào phía client.
  • Could have (Có thể có): Chuyển đổi dữ liệu tự động giữa XML và HTML thông qua XSLT templates.
  • Won't have (Tạm hoãn): Tích hợp cổng thanh toán trực tuyến qua bên thứ ba (Visa/Mastercard) và cơ chế routing đa trạng thái dựa trên HTML5 History API.

Thiết kế hệ thống

Kiến trúc hệ thống website bán hàng Web 2.0 phân tách rõ ràng luồng hiển thị và luồng truyền tải dữ liệu, sử dụng một bộ máy điều phối trung gian (AJAX Engine) chạy ngầm trên trình duyệt client.

graph TD
    User([Người dùng / Client Browser]) -->|Tương tác UI / Sự kiện bàn phím, chuột| JS[JavaScript & DOM Controller]
    JS -->|Gọi hàm bất đồng bộ| Engine[AJAX Engine / XMLHttpRequest]
    Engine -->|HTTP Request ngầm: XML/Text| WebServer[Apache Web Server / PHP Engine]
    WebServer -->|Truy vấn SQL| Database[(MySQL Database)]
    Database -->|Dữ liệu bảng: Manager, Customer, Cart, Don_hang| WebServer
    WebServer -->|HTTP Response: Dữ liệu XML/XHTML| Engine
    Engine -->|Phân tích cú pháp XML/Text| JS
    JS -->|Thao tác innerHTML / appendChild| DOM[HTML DOM Tree Rendered]
    DOM -->|Hiển thị cập nhật tức thì| User

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

  • Tầng Client (Frontend): HTML 4.01 / XHTML 1.0, CSS 2.1 (Tổ chức theo cơ chế phân tầng Cascade: Inline, Internal, External), JavaScript (ECMAScript 3 chuẩn W3C), XML DOM Level 2 Parser.
  • Tầng Server (Backend): PHP Engine 5.x (Xử lý Business Logic, phân tích request, tạo chuỗi XML/JSON output), Apache HTTP Server 2.2.
  • Tầng Dữ liệu (Database): MySQL 5.0 (Lưu trữ quan hệ đảm bảo toàn vẹn dữ liệu).

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

Hệ thống được chuẩn hóa dữ liệu với 4 bảng thực thể chính:

  1. Manager (Quản trị viên): AdminID (PK, Int), Username (Varchar 50), Password (Varchar 255 - Hashed), Role (Varchar 20).
  2. Customer (Khách hàng): CustomerID (PK, Int), Fullname (Varchar 100), Email (Varchar 100), Address (Varchar 255), Phone (Varchar 20), Password (Varchar 255).
  3. Cart (Giỏ hàng tạm): CartID (PK, Int), SessionID (Varchar 100), ProductID (FK, Int), Quantity (Int), AddedTime (Datetime).
  4. Don_hang (Đơn hàng): OrderID (PK, Int), CustomerID (FK, Int), OrderDate (Datetime), TotalAmount (Decimal 10,2), OrderStatus (Varchar 30), ShippingAddress (Text).

Phương pháp luận phát triển (Methodology)

Dự án áp dụng mô hình phát triển phần mềm lặp từng bước (Iterative Model) kết hợp kiểm thử đơn vị liên tục:

  • Giai đoạn 1 (Milestone 1 - Tuần 1-3): Khảo sát lý thuyết Web 2.0, phân tích kiến trúc giao tiếp client-server, xây dựng thư viện Wrapper chuẩn hóa đối tượng XMLHttpRequest đa trình duyệt.
  • Giai đoạn 2 (Milestone 2 - Tuần 4-7): Thiết kế CSDL quan hệ trên MySQL, viết các script PHP phía server xử lý truy vấn sản phẩm và xuất định dạng XML chuẩn well-formed.
  • Giai đoạn 3 (Milestone 3 - Tuần 8-10): Lập trình giao diện người dùng (UI) bằng HTML/CSS, liên kết sự kiện DOM với AJAX Engine cho các phân hệ Tra cứu, Giỏ hàng, Đặt hàng.
  • Giai đoạn 4 (Milestone 4 - Tuần 11-12): Tích hợp phân hệ Quản trị (Admin CMS), kiểm thử tải và tương thích trình duyệt, tối ưu hóa kích thước payload.

Implementation và kết quả

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

Trọng tâm kỹ thuật của đồ án là việc xây dựng module xử lý truyền thông không đồng bộ độc lập với các thư viện cồng kềnh, tối ưu trực tiếp trên JavaScript thuần và DOM API.

1. Khởi tạo đối tượng XMLHttpRequest tương thích đa trình duyệt:

Để đảm bảo ứng dụng thực thi trơn tru trên cả hệ sinh thái Mozilla Firefox, Apple Safari, Opera lẫn các phiên bản Microsoft Internet Explorer (sử dụng ActiveX control), hàm trừu tượng hóa được cài đặt:

function getXMLHTTPRequest() {
    var xRequest = null;
    if (window.XMLHttpRequest) {
        // Khởi tạo cho Firefox, Safari, Opera, Netscape 7.1+, Chrome
        xRequest = new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        // Khởi tạo cho Internet Explorer 5.0+/6.0
        try {
            xRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                xRequest = null;
            }
        }
    }
    return xRequest;
}

2. Thuật toán gửi yêu cầu bất đồng bộ và xử lý State Machine:

Quá trình gửi yêu cầu dữ liệu sử dụng phương thức POST hoặc GET mà không gây nghẽn luồng xử lý giao diện người dùng:

function sendRequest(url, params, HttpMethod, callbackHandler) {
    if (!HttpMethod) { 
        HttpMethod = "POST"; 
    }
    var req = getXMLHTTPRequest();
    if (req) {
        req.open(HttpMethod, url, true); // true = Bất đồng bộ (Asynchronous)
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        
        req.onreadystatechange = function() {
            // readyState 4: Hoàn thành tác vụ; status 200: HTTP OK
            if (req.readyState == 4) {
                if (req.status == 200) {
                    callbackHandler(req.responseXML, req.responseText);
                } else {
                    console.error("Lỗi giao tiếp máy chủ: HTTP Code " + req.status);
                }
            }
        };
        req.send(params);
    }
}

3. Cấu trúc dữ liệu phản hồi dạng XML (Well-formed XML Document):

Dữ liệu danh mục và sản phẩm từ PHP script phía server được cấu trúc chuẩn hóa để JavaScript DOM Parser dễ dàng bóc tách:

<?xml version="1.0" encoding="utf-8"?>
<Catalog>
    <Product>
        <ProductID>F10</ProductID>
        <ProductName>Shimano Calcutta</ProductName>
        <ListPrice>48.76</ListPrice>
        <Category>Laptop Gaming</Category>
    </Product>
    <Product>
        <ProductID>F20</ProductID>
        <ProductName>Bantam Lexica</ProductName>
        <ListPrice>49.99</ListPrice>
        <Category>Laptop Office</Category>
    </Product>
</Catalog>

4. Thao tác cập nhật cây giao diện DOM động (Dynamic DOM Manipulation):

Thay vì tái nạp trang, hệ thống định vị phần tử qua định danh duy nhất và cập nhật trực tiếp cấu trúc cây:

function updateProductView(xmlDoc) {
    var productNodeList = xmlDoc.getElementsByTagName("Product");
    var container = document.getElementById("product_display_area");
    container.innerHTML = ""; // Xóa bộ nhớ đệm hiển thị cũ

    for (var i = 0; i < productNodeList.length; i++) {
        var pName = productNodeList[i].getElementsByTagName("ProductName")[0].childNodes[0].nodeValue;
        var pPrice = productNodeList[i].getElementsByTagName("ListPrice")[0].childNodes[0].nodeValue;
        
        var productDiv = document.createElement("div");
        productDiv.className = "product-card";
        
        var titleNode = document.createElement("h3");
        titleNode.appendChild(document.createTextNode(pName));
        
        var priceNode = document.createElement("p");
        priceNode.className = "price-tag";
        priceNode.appendChild(document.createTextNode("Giá: " + pPrice + " VNĐ"));
        
        productDiv.appendChild(titleNode);
        productDiv.appendChild(priceNode);
        container.appendChild(productDiv);
    }
}

Kiểm thử và đánh giá hiệu năng (Testing & Validation)

Hệ thống đã trải qua các bài kiểm thử nghiêm ngặt về chức năng, tải và độ trễ trên hệ thống mạng mô phỏng:

  • Test Scenarios & Coverage: 100% kịch bản kiểm thử các ca sử dụng (Use Case) cho 3 nhóm đối tượng: Quản trị viên (UseCase Admin), Khách hàng (UseCase Customer) và Khách vãng lai (UseCase Guest) đạt kết quả chính xác.
  • Tối ưu hóa dung lượng truyền tải: Với thao tác lọc danh mục 20 sản phẩm, website truyền thống tiêu tốn trung bình 84.5 KB (toàn bộ mã nguồn trang HTML, header, footer, stylesheet nạp lại). Trong khi đó, module AJAX của website chỉ tiêu tốn 3.2 KB payload XML, giảm 96.2% khối lượng dữ liệu truyền qua mạng.
  • Thời gian phản hồi tương tác (Round-Trip Time - RTT): Thời gian phản hồi tác vụ tra cứu giảm từ 1,450ms (mô hình truyền thống) xuống còn 110ms (mô hình AJAX), mang lại cảm giác mượt mà tức thì như một ứng dụng cài đặt trên Desktop.

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

  1. Ứng dụng thực tiễn triết lý Web 2.0 vào E-Commerce: Chuyển dịch mô hình website từ kênh phát thông tin một chiều thụ động sang môi trường dịch vụ tương tác cao, nơi người dùng làm chủ trải nghiệm mua sắm thông qua các thao tác kéo - chọn - lọc không gián đoạn.
  2. So sánh định lượng với các giải pháp tiền nhiệm:
Tiêu chí kỹ thuật Web 1.0 Truyền thống Ứng dụng Java Applet Hệ thống Đồ án (AJAX Web 2.0)
Cơ chế cập nhật Tải lại 100% trang web (Full Page Reload) Render bên trong khung JVM Client Cập nhật cục bộ qua DOM Tree Injection
Dung lượng mạng / Request Lớn (Bao gồm toàn bộ HTML/Layout) Trung bình (Dữ liệu nhị phân/Bytecode) Cực nhỏ (Chỉ truyền XML/Text thuần)
Phụ thuộc môi trường Thấp (Mọi trình duyệt cơ bản) Rất cao (Cần cài đặt đúng phiên bản JRE) Không phụ thuộc plugin ngoại vi
Trải nghiệm giao diện (UX) Gián đoạn màn hình, chớp nháy liên tục Chậm chạp khi khởi tạo ban đầu Mượt mà, phản hồi lập tức (< 150ms)
  1. Chuẩn hóa cấu trúc dữ liệu trao đổi: Sử dụng lược đồ XML tự đặc tả kết hợp mô hình DOM Level 2 giúp kiến trúc phần mềm có tính module hóa cao, dễ dàng nâng cấp sang các giao thức RESTful hoặc định dạng JSON trong tương lai.

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

Khả năng ứng dụng và đối tượng người dùng

Website được đóng gói hoàn chỉnh, đáp ứng hoàn hảo nhu cầu số hóa quy trình kinh doanh cho các cửa hàng bán lẻ máy tính xách tay, đồ chơi, thiết bị số quy mô vừa và nhỏ (SME):

  • Người mua hàng: Trải nghiệm quy trình thêm hàng vào giỏ, cập nhật số lượng, lọc cấu hình sản phẩm mượt mà, loại bỏ cảm giác ức chế khi mạng chậm.
  • Người quản trị: Quản lý danh mục trực quan, thêm mới sản phẩm và theo dõi đơn hàng với tốc độ xử lý nhanh, không tiêu tốn tài nguyên máy chủ.

Chiến lược triển khai và bài toán kinh tế (Cost-Benefit Analysis)

  • Yêu cầu hạ tầng tối thiểu: Máy chủ Linux/Windows cài đặt Apache 2.x, PHP 5.x, MySQL 5.x, RAM tối thiểu 512MB. Phía client chỉ cần trình duyệt web tiêu chuẩn (IE 6+, Firefox 1.0+, Safari 1.2+, Opera 8.0+).
  • Hiệu quả đầu tư (ROI): Nhờ giảm thiểu 90%+ khối lượng băng thông tiêu thụ trên mỗi phiên người dùng, chi phí thuê bao đường truyền và hosting của doanh nghiệp giảm từ 40% đến 60% mỗi tháng, đồng thời tăng tỷ lệ chuyển đổi đơn hàng nhờ trải nghiệm người dùng vượt trội.

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

Hạn chế kỹ thuật tồn đọng:

  • Nút điều hướng trình duyệt (Back/Forward Button): Do các giao dịch thực hiện ngầm bằng JavaScript mà không thay đổi URL chính, thao tác bấm nút "Back" của người dùng có thể làm thoát khỏi trang thay vì quay lại trạng thái tìm kiếm trước đó.
  • Đánh dấu trang (Bookmarking): Người dùng không thể lưu lại trực tiếp liên kết của một danh mục đã lọc qua AJAX vào thư mục Favorites nếu hệ thống chưa gắn hash identifier vào URL.
  • Vấn đề lập chỉ mục (SEO Indexing): Các công cụ tìm kiếm truyền thống gặp khó khăn trong việc cào dữ liệu (crawl) nội dung được render động từ các request XMLHttpRequest.

Hướng nâng cấp mở rộng:

  1. Nghiên cứu cơ chế điều hướng trạng thái thông qua việc can thiệp location.hash hoặc HTML5 History API (pushState, popState).
  2. Chuyển dịch dần payload từ XML sang JSON (JavaScript Object Notation) để giảm kích thước gói tin và tăng tốc độ parse dữ liệu trên JavaScript Engine.
  3. Tích hợp các giao thức truyền thông hai chiều thời gian thực (WebSockets) để tự động cập nhật số lượng tồn kho sản phẩm khi có khách đặt hàng.

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

  • Sinh viên ngành Công nghệ Thông tin: Nắm vững tài liệu mẫu mực về nguyên lý hoạt động của XMLHttpRequest, kỹ thuật điều khiển DOM và cấu trúc một đồ án tốt nghiệp chuẩn mực từ trường Đại học Bách Khoa Hà Nội.
  • Lập trình viên Web (Frontend/Backend): Tiếp thu các mẫu thiết kế (Design Patterns) về xây dựng AJAX Wrapper thuần không phụ thuộc framework cồng kềnh, tối ưu mã nguồn cho các hệ thống tải cao.
  • Chủ doanh nghiệp / Cửa hàng bán lẻ: Sở hữu giải pháp kiến trúc website bán hàng tối ưu chi phí hạ tầng, nâng cao năng lực cạnh tranh và trải nghiệm khách hàng số.
  • Nhà nghiên cứu học thuật: Cung cấp số liệu phân tích đối sánh cụ thể giữa các mô hình web truyền thống và kiến trúc hướng dịch vụ Web 2.0.

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

1. Hệ thống có bắt buộc phải cài đặt phần mềm phụ trợ (plugin) phía máy khách không?

Hoàn toàn không. AJAX tận dụng chính các công nghệ tiêu chuẩn sẵn có trong trình duyệt (HTML, CSS, JavaScript engine và đối tượng XMLHttpRequest hoặc ActiveX tích hợp sẵn trên hệ điều hành), không đòi hỏi cài đặt Flash hay Java Runtime Environment.

2. Sự khác biệt căn bản giữa Web 2.0 và AJAX là gì?

Web 2.0 là khái niệm mang tính triết lý và kiến trúc, nhấn mạnh vào tính cộng đồng, chia sẻ dữ liệu và xem Web như một nền tảng dịch vụ. AJAX chỉ là một trong những tổ hợp công nghệ kỹ thuật nền tảng hỗ trợ hiện thực hóa trải nghiệm mượt mà của Web 2.0.

3. Tại sao hệ thống vẫn sử dụng định dạng XML thay vì chuỗi Text thông thường?

XML mang tính tự đặc tả cấu trúc cao, cho phép truyền tải các đối tượng dữ liệu phức tạp (như danh sách sản phẩm gồm ID, Tên, Giá, Phân loại) một cách chuẩn hóa và dễ dàng bóc tách thông qua các API chuẩn của XML DOM Parser.

4. Website xử lý như thế nào nếu trình duyệt của người dùng bị tắt JavaScript?

Trong trường hợp JavaScript bị vô hiệu hóa, hệ thống cần duy trì cơ chế dự phòng truyền thống (Graceful Degradation): các form bán hàng sẽ gửi dữ liệu qua phương thức HTTP POST chuẩn để nạp lại trang, đảm bảo tính liên tục của giao dịch thương mại.

5. Khả năng mở rộng (Scalability) của website khi số lượng sản phẩm lên đến hàng chục nghìn?

Hệ thống hoàn toàn đáp ứng tốt nhờ cơ chế phân trang phía máy chủ (Server-side Pagination) kết hợp với các truy vấn đánh chỉ mục (Index) trên MySQL. AJAX Engine chỉ kéo về đúng 20-50 bản ghi cho mỗi lượt hiển thị, giữ nguyên băng thông tối ưu ở mức vài kilobyte.

Kết luận

Đồ án tốt nghiệp "Tìm hiểu Web 2.0 và xây dựng ứng dụng web bán hàng" của tác giả Bo Rattana đã 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. Dự án không chỉ hệ thống hóa toàn diện cơ sở lý luận về cuộc cách mạng Web 2.0 mà còn hiện thực hóa thành công một sản phẩm thương mại điện tử hoàn chỉnh, vận hành ổn định trên nền tảng PHP - MySQL kết hợp công nghệ AJAX. Việc loại bỏ mô hình "nhấp và chờ", giảm hơn 90% tải băng thông dữ liệu dư thừa đã khẳng định tính ưu việt vượt trội của công nghệ web thế hệ mới. Đây là tài liệu tham khảo kỹ thuật giá trị và là nền tảng vững chắc để tiếp tục phát triển các hệ thống ứng dụng web chuyên sâu trong tương lai.