Bối cảnh và vấn đề nghiên cứu

Đề tài "Xây dựng website bán quần áo" được thực hiện bởi sinh viên Nguyễn Quang Hiếu (lớp CNTT1.K21, Khoa Công nghệ thông tin, Trường Đại học Hải Phòng) dưới sự hướng dẫn của ThS. Đào Việt Anh, hoàn thành vào tháng 04 năm 2024. Đề tài được triển khai trong quá trình thực tập tại Công ty Dịch vụ MobiFone Khu vực 5.

Về bối cảnh thực tiễn, tác giả chỉ ra rằng công nghệ thông tin và việc tin học hóa đóng vai trò quyết định trong việc tối ưu hóa chi phí và nâng cao hiệu quả vận hành của các tổ chức, doanh nghiệp. Mạng Internet tạo nền tảng cho việc truyền tải thông tin toàn cầu với tốc độ cao và chi phí thấp hơn phương thức truyền thống, thúc đẩy sự phát triển mạnh mẽ của thương mại điện tử. Đối với các cửa hàng bán lẻ thời trang, việc xây dựng một website riêng nhằm quảng bá toàn bộ danh mục sản phẩm, giới thiệu mẫu mã mới và tiếp cận khách hàng trực tuyến là nhu cầu thiết yếu để mở rộng thị trường và duy trì năng lực cạnh tranh.

Mục tiêu và nhiệm vụ nghiên cứu của đồ án bao gồm 4 nội dung chính:

  1. Nghiên cứu tổng quan về hệ quản trị nội dung WordPress, lịch sử hình thành, cấu trúc quản trị, ưu nhược điểm và vòng đời xử lý truy vấn của mã nguồn.
  2. Khảo sát quy trình tác nghiệp thương mại điện tử thực tế, phân định rõ luồng xử lý của khách hàng và luồng quản trị của nhân viên quản trị hệ thống.
  3. Thực hiện phân tích và thiết kế hệ thống phần mềm bằng ngôn ngữ mô hình hóa UML (gồm biểu đồ Use Case, đặc tả Use Case, biểu đồ tuần tự) và thiết kế cấu trúc cơ sở dữ liệu quan hệ.
  4. Cài đặt môi trường máy chủ cục bộ (XAMPP), cấu hình hệ thống, tích hợp các plugin bổ trợ và triển khai xây dựng hoàn chỉnh 6 giao diện chức năng chính cho website bán quần áo.

Về đối tượng và phạm vi nghiên cứu:

  • Đối tượng nghiên cứu: Mô hình website thương mại điện tử bán lẻ thời trang, mã nguồn mở WordPress và các plugin chức năng phục vụ quản lý sản phẩm, giỏ hàng, thanh toán và quản trị nội dung.
  • Phạm vi nghiên cứu: Đồ án tập trung vào phân tích thiết kế và xây dựng website trên môi trường cục bộ (Localhost) chạy trên hệ điều hành Windows, phục vụ quy trình kinh doanh của một shop bán lẻ thời trang; thời gian thực hiện trong khóa tốt nghiệp 2020–2024 (nghiệm thu tháng 04/2024).

Cơ sở lý thuyết và phương pháp

Về cơ sở lý thuyết và nền tảng công nghệ, đồ án dựa trên các công nghệ và công cụ sau:

  • Hệ quản trị nội dung (CMS) WordPress: Mã nguồn mở self-hosted phát triển từ nền tảng b2/cafelog, hoạt động dựa trên ngôn ngữ PHP và cơ sở dữ liệu MySQL, sử dụng kiến trúc template tags và cơ chế hook (init).
  • Môi trường máy chủ web: Bộ công cụ XAMPP (tích hợp Apache Web Server, PHP, MySQL Server) chạy trên hệ điều hành Windows (hỗ trợ Windows 7, 8, 10), sử dụng giao diện phpMyAdmin để quản lý cơ sở dữ liệu.
  • Hệ sinh thái Plugin mở rộng:
    • WooCommerce: Plugin cốt lõi phục vụ chức năng thương mại điện tử (sản phẩm, giỏ hàng, đặt hàng).
    • WP-Mega-Menu: Công cụ tùy biến thanh điều hướng và menu đa cấp.
    • CSS Hero 4.0: Hỗ trợ tùy biến trực quan giao diện CSS của website.
    • NextGEN Gallery: Quản lý thư viện hình ảnh và video sản phẩm.
    • Revslider (Slider Revolution): Trình tạo hiệu ứng chuyển động và trình diễn ảnh tự động.
    • WP Live Chat Support (Wp-livechat): Hỗ trợ tương tác và tư vấn trực tuyến với khách hàng.

Về phương pháp nghiên cứu, tác giả kết hợp các phương pháp kỹ thuật phần mềm:

  • Phương pháp khảo sát quy trình tác nghiệp: Thu thập và phân tích yêu cầu từ hoạt động bán lẻ thực tế, chia hệ thống thành 2 phân hệ: giao dịch người dùng và quản trị hậu đài.
  • Phương pháp phân tích và thiết kế hướng đối tượng (OOAD): Sử dụng các biểu đồ chuẩn UML bao gồm xác định tác nhân, vẽ biểu đồ Use Case, viết bảng đặc tả chi tiết (Basic Flow, Exception Flow, Non-Functional Requirements) và vẽ biểu đồ tuần tự (Sequence Diagram) cho từng chức năng.
  • Phương pháp mô hình hóa dữ liệu: Thiết kế lược đồ cơ sở dữ liệu quan hệ, xác định bảng, kiểu dữ liệu, ràng buộc khóa chính và khóa ngoại.

Thiết kế và triển khai hệ thống

Hệ thống website bán quần áo được thiết kế theo mô hình 2 phân hệ chức năng tương ứng với các nhóm tác nhân:

1. Phân hệ chức năng và tác nhân hệ thống

  • Tác nhân Khách hàng: Thực hiện các chức năng đăng ký tài khoản, đăng nhập, cập nhật thông tin cá nhân, khôi phục mật khẩu, tìm kiếm sản phẩm (theo tên hoặc danh mục), xem chi tiết sản phẩm, quản lý giỏ hàng (thêm, sửa số lượng, xóa), đặt hàng, theo dõi lịch sử đơn hàng và gửi yêu cầu/phản hồi.
  • Tác nhân Người quản trị (Administrator): Đăng nhập khu vực quản trị, quản lý danh mục sản phẩm, quản lý thông tin sản phẩm, quản lý tài khoản người dùng, quản lý đơn đặt hàng, quản lý thông tin thanh toán (hóa đơn), quản lý danh sách khách hàng và tiếp nhận/xử lý yêu cầu phản hồi từ khách hàng.
  • Tác nhân Hệ thống ngân hàng: Tiếp nhận thông tin tài khoản/thẻ từ khách hàng, xử lý nghiệp vụ thanh toán trực tuyến và phản hồi trạng thái giao dịch cho hệ thống.
[Khách hàng] <---> (Giao diện Web / Front-end) <---> [Hệ thống WordPress / WooCommerce]
                                                                |
                                                      (MySQL Database / XAMPP)
                                                                |
[Quản trị viên] <---> (Giao diện Admin / Dashboard) <----------+
                                                                |
[Hệ thống Ngân hàng] <--- (Cổng thanh toán / Trực tuyến) <------+

2. Thiết kế cơ sở dữ liệu

Hệ thống sử dụng cơ sở dữ liệu quan hệ MySQL bao gồm 7 bảng dữ liệu chính:

STT Tên bảng dữ liệu Mục đích lưu trữ
1 Danh mục các loại sản phẩm Phân loại các chủng loại sản phẩm thời trang
2 Danh sách các sản phẩm Thông tin chi tiết về sản phẩm (tên, giá, mô tả, số lượng kho)
3 Danh sách khách hàng thành viên Dữ liệu cá nhân và tài khoản của người dùng đăng ký
4 Danh sách các đơn đặt hàng Thông tin đơn hàng tổng quát (ngày đặt, trạng thái, phương thức thanh toán)
5 Chi tiết đơn đặt hàng Danh sách từng sản phẩm và số lượng tương ứng trong đơn hàng
6 Danh sách giỏ hàng Lưu trữ các mặt hàng được chọn mua tạm thời của từng phiên người dùng
7 Danh sách quản trị viên (User) Thông tin tài khoản quản trị hệ thống

Cấu trúc chi tiết của bảng Khách Hàng được tác giả đặc tả như sau:

Thuộc tính Kiểu dữ liệu Ràng buộc / Ghi chú
MaKH nvarchar(50) Khóa chính (Primary Key)
TenKH varchar(20) Họ tên khách hàng
Email nvarchar(50) Địa chỉ thư điện tử
DiaChi nvarchar(50) Địa chỉ giao nhận hàng
DienThoai nvarchar(20) Số điện thoại liên lạc
NgaySinh Datetime Ngày tháng năm sinh
TaiKhoan nvarchar(50) Tên đăng nhập hệ thống
MatKhau nvarchar(20) Mật khẩu xác thực
NgayTao Datetime Thời điểm tạo tài khoản
TrangThai nvarchar(50) Trạng thái hoạt động của tài khoản

3. Vòng đời xử lý truy vấn của nền tảng WordPress

Trong quá trình triển khai, tác giả làm rõ quy trình 5 bước xử lý của mã nguồn WordPress khi tiếp nhận yêu cầu từ người dùng:

  • Bước 1 – Khởi động mã nguồn: Nạp tập tin index.php, kết nối cơ sở dữ liệu qua wp-config.php, nạp các thư viện lõi từ /wp-includes/functions.php và trích xuất toàn bộ dữ liệu cấu hình trong bảng wp_options có giá trị autoload = true.
  • Bước 2 – Kích hoạt plugin: Tải các plugin đang kích hoạt gắn vào điểm neo init hook.
  • Bước 3 – Thực thi functions.php trong theme: Xác định theme đang dùng qua giá trị siteurl trong bảng wp_options và nạp tập tin functions.php của theme đó.
  • Bước 4 – Phân tích và khởi tạo truy vấn: Chạy hàm wp() gọi $wp->main(), phân tích URL bằng $wp->parse_request(), thiết lập tham số lọc bằng $wp_query->parse_query(), chuyển thành câu lệnh SQL qua $wp_query->get_posts(), nạp kết quả vào biến đối tượng $post (hoặc trả về mã lỗi 404 nếu không tìm thấy dữ liệu).
  • Bước 5 – Thực thi các tập tin khuôn mẫu (template): Áp dụng các template tags tương ứng trong theme để kết xuất dữ liệu thành cấu trúc mã HTML hiển thị trên trình duyệt.

4. Ràng buộc phi chức năng và môi trường vận hành

Toàn bộ các biểu mẫu đặc tả Use Case trong hệ thống đều quy định ràng buộc phi chức năng với thời gian chờ (Time out) tối đa cho các màn hình thêm mới và xử lý là 60 giây. Môi trường web server Apache mặc định chạy ở cổng 80; trong trường hợp xảy ra xung đột cổng mạng, tác giả hướng dẫn cấu hình chuyển sang cổng 8080 trong tập tin httpd.conf và máy chủ ảo httpd-vhost.conf.

Nội dung chính theo từng chương

Chương 1: Tổng quan về WordPress

Chương này cung cấp bức tranh toàn diện về nền tảng mã nguồn mở WordPress. Tác giả trình bày lịch sử phát triển bắt đầu từ công cụ viết blog b2/cafelog (Michel Valdrighi phát triển năm 2001), sau đó được Matt Mullenweg và Mike Little kế thừa, phát hành phiên bản WordPress đầu tiên vào tháng 5 năm 2003. Các mốc phát triển kỹ thuật được hệ thống hóa gồm: ra mắt dịch vụ Ping-O-Matic (tháng 4/2004), hỗ trợ plugin từ phiên bản 1.2 (tháng 5/2004), hỗ trợ theme (tháng 2/2005), nâng cấp giao diện UI và tự động lưu bài viết ở phiên bản 2.1 (năm 2007), và tính năng tự động cập nhật (năm 2009).

Chương 1 đi sâu phân tích kiến trúc khu vực quản trị WordPress (Dashboard, Updates, Posts, Appearance, Plugins, Settings); nêu rõ các ưu điểm (kho theme/plugin phong phú, dễ quản lý, tối ưu SEO tốt) và nhược điểm (khó nắm bắt hệ thống hàm có sẵn, chi phí cho theme cao cấp, đòi hỏi kiến thức chuyên sâu để tùy biến, mức độ an ninh cần cải thiện). Điểm nhấn kỹ thuật của chương là việc phân tích chi tiết quy trình 5 bước nạp mã nguồn, xử lý truy vấn dữ liệu từ MySQL Server và kết xuất template tags. Phần cuối chương hướng dẫn cài đặt phần mềm XAMPP trên hệ điều hành Windows và quy trình xử lý đổi cổng mạng Apache từ cổng 80 sang cổng 8080.

Chương 2: Phân tích và thiết kế hệ thống

Chương 2 chiếm dung lượng lớn nhất trong đồ án, tập trung vào việc mô hình hóa hệ thống thông tin bán hàng trực tuyến. Tác giả tiến hành khảo sát chi tiết hai luồng nghiệp vụ:

  1. Quy trình mua hàng của khách hàng: Bao gồm duyệt danh mục, tìm kiếm sản phẩm, quản lý giỏ hàng, đăng nhập/đăng ký tài khoản, cung cấp địa chỉ nhận hàng, lựa chọn phương thức thanh toán (hỗ trợ 3 phương thức: thanh toán trực tiếp, chuyển khoản ngân hàng, chuyển qua bưu điện) và nhận thông báo xác nhận đơn hàng.
  2. Quy trình quản trị hệ thống: Bao gồm quản lý danh mục, quản lý sản phẩm, quản lý người dùng, quản trị đơn hàng, theo dõi/xóa khách hàng, phản hồi yêu cầu và quản lý thanh toán/hóa đơn để thống kê tài chính.

Tác giả xây dựng biểu đồ Use Case tổng quát cho hai nhóm tác nhân (Khách hàng và Administrator), sau đó lập bảng đặc tả chi tiết cho 15 ca sử dụng chính: Đăng ký thành viên, Đăng nhập, Cập nhật thông tin, Khôi phục mật khẩu, Gửi phản hồi, Tìm kiếm theo loại sản phẩm, Tìm kiếm theo tên sản phẩm, Xem chi tiết sản phẩm, Thêm sản phẩm vào giỏ hàng, Xóa sản phẩm khỏi giỏ hàng, Cập nhật số lượng trong giỏ hàng, Xem giỏ hàng, Đặt hàng, Xem lại đơn hàng đã đặt, Quản lý danh mục, Quản lý sản phẩm, Quản lý User, Quản lý thanh toán, Quản lý yêu cầu, Quản lý khách hàng. Tiếp đó, tác giả thiết lập 15 biểu đồ trình tự (Sequence Diagram) mô tả luồng tương tác thông điệp giữa các đối tượng trong từng ca tác vụ, đồng thời thiết kế danh mục 7 bảng cơ sở dữ liệu quan hệ và đặc tả bảng Khách Hàng.

Chương 3: Xây dựng website bán quần áo trên WordPress

Chương 3 trình bày việc hiện thực hóa các kết quả phân tích và thiết kế vào sản phẩm thực tế. Tác giả làm rõ bối cảnh, mục đích và ý nghĩa của đề tài đối với hoạt động kinh doanh trực tuyến. Nội dung cốt lõi của chương là phần hiện thực và bố cục 6 giao diện chính của website bán quần áo:

  • Giao diện trang chủ: Hiển thị banner quảng bá, danh mục sản phẩm nổi bật, sản phẩm mới và thanh điều hướng.
  • Giao diện cửa hàng: Trình bày danh sách toàn bộ sản phẩm quần áo, hỗ trợ bộ lọc và phân loại theo chủng loại.
  • Giao diện đăng nhập: Cung cấp biểu mẫu xác thực tài khoản người dùng và liên kết đăng ký/khôi phục mật khẩu.
  • Giao diện blog: Kênh đăng tải các bài viết tin tức, thông tin khuyến mại và xu hướng thời trang.
  • Giao diện giỏ hàng: Cho phép người mua kiểm tra danh sách mặt hàng đã chọn, điều chỉnh số lượng hoặc xóa sản phẩm.
  • Giao diện thanh toán: Biểu mẫu thu thập thông tin giao hàng, lựa chọn hình thức thanh toán và xác nhận hoàn tất đơn hàng.

Kết quả và đóng góp

Về kết quả đạt được:

  • Xây dựng thành công hệ thống website bán quần áo hoàn chỉnh trên nền tảng WordPress kết hợp WooCommerce và máy chủ XAMPP.
  • Hoàn thành bộ hồ sơ phân tích thiết kế hệ thống bao gồm: 2 biểu đồ Use Case tổng quát, 15 bảng đặc tả Use Case chi tiết có phân định luồng sự kiện chính/luồng ngoại lệ/ràng buộc thời gian chờ (60s), 15 biểu đồ tuần tự UML và thiết kế 7 bảng dữ liệu quan hệ.
  • Triển khai thành công 6 màn hình giao diện người dùng đáp ứng đầy đủ chu trình mua bán hàng trực tuyến và hỗ trợ 3 hình thức thanh toán (trực tiếp, chuyển khoản ngân hàng, gửi qua bưu điện).

Về giải pháp và đóng góp của đề tài:

  • Cung cấp giải pháp ứng dụng hệ quản trị nội dung mã nguồn mở WordPress kết hợp hệ sinh thái plugin (WooCommerce, WP-Mega-Menu, CSS Hero, NextGEN Gallery, Revslider, Wp-livechat) để xây dựng website thương mại điện tử với chi phí thấp và thời gian triển khai nhanh.
  • Chuẩn hóa quy trình đặt hàng và quản trị bán lẻ cho các cửa hàng thời trang vừa và nhỏ, hỗ trợ số hóa việc quản lý danh mục sản phẩm, theo dõi đơn hàng và tiếp nhận phản hồi từ khách hàng.

Hạn chế và hướng nghiên cứu tiếp

Dựa trên nội dung và phạm vi nghiên cứu của văn bản, đồ án tồn tại một số hạn chế và hướng mở rộng:

Về hạn chế:

  • Hệ thống mới được triển khai và thử nghiệm trên môi trường máy ảo cục bộ (Localhost/XAMPP), chưa được đưa lên máy chủ Internet thực tế (Hosting/Domain công cộng) để kiểm thử tải và tương thích đa nền tảng.
  • Phương thức thanh toán ngân hàng trong hệ thống chủ yếu dựa trên quy trình cung cấp thông tin số tài khoản và thông báo đối soát thủ công, chưa tích hợp API cổng thanh toán trực tuyến tự động (như VNPAY, MoMo, ZaloPay hay cổng thẻ quốc tế).
  • Trong tài liệu đồ án, phần đặc tả Use Case tại Chương 2 còn xuất hiện một số điểm không nhất quán về thuật ngữ (sử dụng lẫn lộn từ khóa "sách", "loại sách", "cuốn sách" do kế thừa tài liệu mẫu khảo sát trước đó thay vì dùng đồng nhất thuật ngữ "quần áo/sản phẩm thời trang").

Về hướng nghiên cứu và phát triển tiếp:

  • Triển khai hệ thống lên môi trường hosting đám mây hoặc máy chủ web thực tế với tên miền riêng.
  • Tăng cường các biện pháp an ninh, bảo mật cơ sở dữ liệu và mã nguồn WordPress nhằm khắc phục điểm yếu bảo mật của CMS.
  • Tích hợp các cổng thanh toán điện tử tự động và mở rộng thêm các mô-đun báo cáo thống kê doanh thu nâng cao.

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

  • Sinh viên ngành Công nghệ thông tin, Hệ thống thông tin và Thương mại điện tử: Có thể sử dụng đồ án làm mẫu tham khảo khi thực hiện đồ án môn học Phân tích thiết kế hệ thống, Lập trình web hoặc khóa luận tốt nghiệp ứng dụng CMS.
  • Người nghiên cứu và phát triển web WordPress: Cung cấp tài liệu hữu ích về cơ chế hoạt động tầng lõi của WordPress, cụ thể là quy trình 5 bước nạp mã nguồn, xử lý truy vấn $wp_query và cách thức cấu hình môi trường máy chủ Apache trên XAMPP khi gặp xung đột cổng mạng.

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

1. WordPress xử lý truy vấn dữ liệu từ MySQL Server khi có người truy cập qua những bước nào?

Theo Chương 1 của đồ án, quá trình này diễn ra qua 5 bước:

  1. Khởi động mã nguồn: Nạp index.php, wp-config.php, kết nối cơ sở dữ liệu MySQL và lấy dữ liệu bảng wp_options có autoload = true.
  2. Kích hoạt plugin: Nạp các plugin kích hoạt thông qua hook init.
  3. Thực thi functions.php: Dò tìm và nạp tập tin functions.php trong theme đang kích hoạt.
  4. Phân tích và khởi tạo truy vấn: Chạy hàm wp() gọi $wp->main(), phân tích URL, chuyển thành câu lệnh SQL qua $wp_query->get_posts() và gán dữ liệu vào biến $post.
  5. Thực thi template: Nạp các tập tin khuôn mẫu (template tags) của theme để kết xuất thành mã HTML hiển thị trên trình duyệt.

2. Website bán quần áo trong đồ án hỗ trợ những phương thức thanh toán nào?

Hệ thống hỗ trợ 3 phương thức thanh toán chính: thanh toán trực tiếp khi nhận hàng, chuyển khoản qua tài khoản ngân hàng của doanh nghiệp và chuyển tiền qua đường bưu điện.

3. Khi cổng 80 của máy chủ Apache trên XAMPP bị xung đột, tác giả hướng dẫn cách khắc phục như thế nào?

Người dùng mở bảng điều khiển XAMPP Control Panel, vào phần cấu hình của Apache (httpd.conf), thay đổi cổng lắng nghe mặc định từ 80 sang cổng 8080. Sau đó cập nhật cổng trong tập tin máy chủ ảo C:\xampp\apache\conf\extra\httpd-vhost.conf, dừng (Stop) và khởi động lại (Start) Apache, rồi truy cập qua đường dẫn http://localhost:8080.

4. Bảng cơ sở dữ liệu Khách Hàng được thiết kế gồm những thuộc tính nào và khóa chính là gì?

Bảng Khách Hàng sử dụng MaKH (kiểu nvarchar(50)) làm khóa chính, cùng các thuộc tính: TenKH (varchar(20)), Email (nvarchar(50)), DiaChi (nvarchar(50)), DienThoai (nvarchar(20)), NgaySinh (Datetime), TaiKhoan (nvarchar(50)), MatKhau (Nvarchar(20)), NgayTao (Datetime) và TrangThai (Nvarchar(50)).

5. Yêu cầu phi chức năng (Non-Functional) chung được quy định xuyên suốt trong các Use Case của hệ thống là gì?

Mọi ca sử dụng trong hệ thống đều quy định thời gian chờ tối đa (Time out) cho màn hình thêm mới và các phiên tương tác dữ liệu là 60 giây.

Kết luận

Đồ án tốt nghiệp "Xây dựng website bán quần áo" của sinh viên Nguyễn Quang Hiếu đã giải quyết trọn vẹn bài toán xây dựng một ứng dụng thương mại điện tử bán lẻ thời trang trên nền tảng WordPress kết hợp bộ công cụ XAMPP. Tác giả đã hoàn thành việc khảo sát quy trình nghiệp vụ, xây dựng bộ tài liệu phân tích thiết kế hệ thống chuẩn UML với 15 Use Case, 15 biểu đồ tuần tự và mô hình 7 bảng cơ sở dữ liệu quan hệ. Mặc dù vẫn còn một số điểm cần hoàn thiện về tính nhất quán văn bản và việc tích hợp cổng thanh toán trực tuyến tự động, đề tài là một tài liệu tham khảo có cấu trúc rõ ràng về phương pháp phát triển website thương mại điện tử ứng dụng mã nguồn mở.