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

Trong bối cảnh công nghệ thông tin và mạng Internet phát triển nhanh chóng, thương mại điện tử đã trở thành phương thức mua sắm quen thuộc đối với người tiêu dùng. Các nền tảng lớn như Shopee, Tiki, Lazada đã thay đổi thói quen mua sắm từ đồ công nghệ đến nhu yếu phẩm hàng ngày. Tuy nhiên, nhiều nhà bán lẻ và cơ sở kinh doanh cá thể hiện nay có nhu cầu sở hữu một trang web bán hàng riêng biệt nhằm xây dựng thương hiệu, nâng cao độ uy tín và chủ động mở rộng kênh phân phối thay vì chỉ phụ thuộc vào việc làm đối tác trên các sàn giao dịch tập trung.

Mặc dù nhu cầu tự chủ nền tảng bán hàng trực tuyến rất lớn, việc phát triển một website thương mại điện tử hoàn chỉnh, tối ưu hóa công cụ tìm kiếm (SEO) và tích hợp đầy đủ công năng phức tạp thường đòi hỏi chi phí cao và kéo dài thời gian phát triển. Trong khi đó, các cửa hàng kinh doanh đồ ăn vặt và sản phẩm tiêu dùng nhanh chỉ cần một hệ thống có các tính năng cốt lõi: giới thiệu sản phẩm, đặt hàng, quản lý đơn hàng, theo dõi thu chi và thông tin khách hàng. Từ yêu cầu thực tiễn đó, đề tài "Thiết kế website bán đồ ăn vặt và quản lý trên mô hình MVC" được thực hiện bởi sinh viên Lê Tuấn Kiệt (MSSV: B1909935, Khóa K45) dưới sự hướng dẫn của giảng viên Võ Bùi Quốc Bảo tại Trường Công nghệ Thông tin & Truyền thông – Trường Đại học Cần Thơ vào tháng 12 năm 2022.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:

  1. Nghiên cứu phương pháp xây dựng một website bán lẻ bằng các công nghệ web nền tảng kết hợp mô hình kiến trúc MVC (Model - View - Controller).
  2. Tối ưu hóa quy trình quản lý bán hàng và hiển thị danh mục cho các cơ sở kinh doanh đồ ăn vặt với thời gian xây dựng nhanh chóng.
  3. Thiết kế giao diện trực quan, đồng nhất và trải nghiệm người dùng (UI/UX) bằng công cụ Figma, sau đó hiện thực hóa giao diện thông qua việc tích hợp các thư viện JavaScript và CSS hiện đại.
  4. Xây dựng tài liệu đặc tả yêu cầu, thiết kế cơ sở dữ liệu quan hệ và lập trình hoàn thiện các phân hệ chức năng cho cả khách hàng và người quản trị (Admin).

Đối tượng nghiên cứu là quy trình vận hành, quản lý bán hàng trực tuyến và kiến trúc phần mềm hướng MVC trên nền tảng web. Phạm vi nghiên cứu tập trung vào hệ thống website bán đồ ăn vặt nội địa, áp dụng bộ dữ liệu hành chính Việt Nam để hỗ trợ quy trình giao nhận hàng.

Cơ sở lý thuyết và công nghệ áp dụng

Đề tài sử dụng mô hình MVC làm kiến trúc thiết kế phần mềm chủ đạo. Kiến trúc này phân tách hệ thống thành ba thành phần độc lập:

  • Model (Dữ liệu): Chịu trách nhiệm tương tác trực tiếp với cơ sở dữ liệu MySQL, quản lý trạng thái dữ liệu và logic nghiệp vụ.
  • View (Giao diện): Tiếp nhận dữ liệu từ Controller và hiển thị trực quan dưới dạng HTML/CSS tới người dùng.
  • Controller (Bộ điều khiển): Đóng vai trò cầu nối, tiếp nhận yêu cầu từ client thông qua cơ chế định tuyến (router), xử lý logic, truy xuất Model và gọi View tương ứng để trả kết quả về trình duyệt.

Về mặt công nghệ và công cụ phát triển, tác giả đã ứng dụng các chuẩn công nghệ và thư viện phần mềm sau:

Thành phần Tên công nghệ / Thư viện Phiên bản Chức năng cụ thể
Backend PHP 8.1 Ngôn ngữ kịch bản phía máy chủ, xử lý nghiệp vụ MVC
Cơ sở dữ liệu MySQL 8.0 Hệ quản trị cơ sở dữ liệu quan hệ lưu trữ dữ liệu hệ thống
Frontend Framework Bootstrap 5.3 Khung giao diện responsive cho đa thiết bị
JavaScript Core jQuery 3.6 Xử lý thao tác DOM, sự kiện và tương tác AJAX
Môi trường phát triển VS Code, Laragon, MAMP Pro - Trình soạn thảo mã nguồn và máy chủ web cục bộ
Quản lý gói & Gỡ lỗi Composer, Pnpm, Xdebug - Quản trị thư viện PHP/Node và hỗ trợ debug mã nguồn
Quản trị CSDL Navicat - Công cụ thiết kế lược đồ quan hệ và trực quan hóa CSDL
Mạng phân phối (CDN) jsDelivr, ImageKit - Tối ưu hóa tốc độ phân phối thư viện JS/CSS và tài nguyên hình ảnh

Bên cạnh đó, đề tài tích hợp hệ thống thư viện bổ trợ giao diện phong phú gồm: FontAwesome Pro 6.1 (gói biểu tượng), Pace 1.4 (hiệu ứng tải trang), Animate.css 4.1 và AOS 2.4 (hiệu ứng chuyển động khi cuộn trang), Nice-select 2.0 (tùy biến dropdown), Lobibox 1.7 (hộp thoại thông báo popup), Tiny-slider 2.3 (thanh trượt hình ảnh), Metismenu 3.7 (menu điều hướng thu gọn), Perfect-scrollbar 1.5 (thanh cuộn tùy chỉnh), ApexCharts 3.3 (biểu đồ thống kê số liệu), Datatable 1.1 (bảng dữ liệu động) và Star-rating 4.0 (thành phần đánh giá sao).

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

1. Phân quyền và các nhóm tác nhân (Actors)

Hệ thống được thiết kế phục vụ ba nhóm người dùng chính:

  • Khách vãng lai: Người dùng chưa đăng nhập, có quyền truy cập trang chủ, xem danh mục, lọc và tìm kiếm món ăn, xem chi tiết sản phẩm, sử dụng biểu mẫu liên hệ và đăng ký tài khoản mới.
  • Người dùng (Thành viên): Khách hàng đã đăng nhập, có đầy đủ quyền của khách vãng lai, đồng thời được sử dụng các tính năng: quản lý giỏ hàng, đặt hàng và thanh toán, tra cứu lịch sử đơn hàng cá nhân, xem danh sách sản phẩm đã xem, cập nhật thông tin cá nhân và đổi mật khẩu.
  • Quản trị viên (Admin): Tài khoản có đặc quyền quản trị cao nhất, thực hiện đăng nhập vào phân hệ quản trị, theo dõi bảng phân tích tổng quan qua biểu đồ số liệu, quản lý danh mục và sản phẩm (thêm, sửa, xóa, kích hoạt trạng thái), quản lý trạng thái đơn hàng, quản lý danh sách người dùng và phản hồi các liên hệ gửi về từ khách hàng.

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

Hệ thống cơ sở dữ liệu được thiết kế chi tiết trên hệ quản trị MySQL thông qua công cụ Navicat, bao gồm các bảng thực thể sau:

+-------------------------------------------------------------------------------+
|                             LƯỢC ĐỒ QUAN HỆ BẢNG                             |
|                                                                               |
|   +-------------------+        1:N         +-------------------+              |
|   |    tb_category    | -----------------> |    tb_product     |              |
|   +-------------------+                    +-------------------+              |
|                                                      |                        |
|                                            1:N       | 1:N                    |
|                                             +--------+--------+               |
|                                             |                 |               |
|   +-------------------+        1:N          v                 v               |
|   |      tb_user      | -----------------> tb_cart     tb_order_details       |
|   +-------------------+                     ^                 ^               |
|             |                               |                 |               |
|             | 1:N                           | 1:N             | 1:N           |
|             +-------------------------------+                 |               |
|             |                                                 |               |
|             | 1:N                          1:N                |               |
|             +------------> tb_order --------------------------+               |
|             |                                                                 |
|             | 1:N                          1:N                                |
|             +------------> tb_recent_product <---------------+                |
+-------------------------------------------------------------------------------+
  • tb_user: Lưu trữ thông tin tài khoản người dùng với các trường username (PK, varchar(50)), fullname, email, password, active (tinyint(1)), phone, address, province, city, ward.
  • tb_category: Phân loại mặt hàng ăn vặt, gồm id_category (PK, char(25)), title, image, active (1: đang hoạt động, 0: ngừng hoạt động).
  • tb_product: Quản lý thông tin chi tiết món ăn, gồm id_product (PK, int auto_increment), name, description, price (decimal), ranking, image, discount (decimal(10,2)), quantity, id_category (FK liên kết với tb_category).
  • tb_cart: Thực thể yếu quản lý giỏ hàng của thành viên, gồm khóa ngoại kép username (FK từ tb_user), id_product (FK từ tb_product) và số lượng amount.
  • tb_order: Quản lý đơn đặt hàng, gồm id_order (PK, char(10)), username (FK từ tb_user), name_customer, phone_customer, address_customer, email_customer, city_customer, ward_customer, province_customer, status, order_date, process_date, shipped_date, total_money. Thuộc tính status nhận 4 trạng thái nghiệp vụ: pending (chờ xử lý), shipping (đang giao hàng), delivered (đã giao hàng), canceled (đã hủy).
  • tb_order_details: Chi tiết món ăn trong đơn hàng, gồm id_order (FK), id_product (FK), amount, price.
  • tb_recent_product: Lưu lịch sử món ăn đã xem gần đây, gồm id_recent (PK), username (FK), id_product (FK).
  • Dữ liệu địa giới hành chính: Tích hợp bộ cơ sở dữ liệu chuẩn gồm Tỉnh/Thành phố, Quận/Huyện, Xã/Phường của Việt Nam (tham chiếu từ nguồn ThangLeQuoc/vietnamese-provinces-database) nhằm đảm bảo tính chính xác khi người mua nhập địa chỉ nhận hàng.

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

CHƯƠNG I. Mục Tiêu Đề Bài

Chương I trình bày bối cảnh chung về xu hướng thương mại điện tử, đặt vấn đề về sự cần thiết của một nền tảng bán hàng độc lập cho các nhà buôn nhỏ lẻ. Tác giả xác định đối tượng, phương pháp và nội dung nghiên cứu: xây dựng website bằng HTML, CSS, JavaScript, PHP 8.1, MySQL 8 trên nền tảng kiến trúc MVC, kết hợp thiết kế UI/UX trên Figma và ứng dụng các thư viện frontend để tối ưu hóa thời gian phát triển và nâng cao trải nghiệm khách hàng.

CHƯƠNG II. Ngôn Ngữ Thiết Kế WebSite

Chương này cung cấp bức tranh tổng quan về mặt lý thuyết và công nghệ xây dựng website:

  • Giới thiệu lịch sử phát triển của các công nghệ lõi: HTML (từ 1989 đến HTML5.2), CSS (từ CSS1 đến CSS3), JavaScript (từ ECMAScript 1 đến ECMAScript 2022).
  • Giới thiệu các khung giao diện và thư viện: Bootstrap 5, jQuery 3.6 và bảng tổng hợp 12 thư viện mở rộng chức năng (biểu tượng, hiệu ứng chuyển cảnh, thanh trượt, biểu đồ, bảng dữ liệu).
  • Trình bày ngôn ngữ lập trình backend PHP (lịch sử phát triển đến phiên bản PHP 8.1) và hệ quản trị cơ sở dữ liệu MySQL 8.
  • Phân tích chi tiết kiến trúc MVC: định nghĩa, ưu và nhược điểm, luồng xử lý dữ liệu thực tế từ trình duyệt qua router, controller, model tới view template.
  • Giới thiệu dịch vụ mạng phân phối nội dung (CDN) với các giải pháp cụ thể như jsDelivr và ImageKit.

CHƯƠNG III. ĐẶC TẢ YÊU CẦU

Tác giả tiến hành phân tích và đặc tả toàn diện các yêu cầu chức năng của hệ sinh thái website:

  • Phân nhóm ba đối tượng người dùng: Khách vãng lai, Người dùng đã đăng nhập và Quản trị viên (Admin).
  • Xây dựng sơ đồ Use Case tổng quát phản ánh mối liên hệ giữa các tác nhân và hệ thống.
  • Chi tiết hóa 15 sơ đồ Use Case cụ thể, bao gồm: Đăng nhập, Đăng ký thành viên, Đăng xuất, Xem sản phẩm, Tìm kiếm sản phẩm, Lọc sản phẩm, Quản lý giỏ hàng, Thanh toán đơn hàng, Tra cứu đơn hàng, Thay đổi thông tin cá nhân, Thay đổi mật khẩu, Phân tích tổng quan, Quản lý sản phẩm, Quản lý đơn hàng, Quản lý người dùng và Phản hồi liên hệ.

CHƯƠNG IV. THIẾT KẾ GIẢI PHÁP

Chương IV tập trung vào việc mô hình hóa cơ sở dữ liệu quan hệ cho website:

  • Thiết kế sơ đồ quan hệ thực thể bằng công cụ Navicat.
  • Đặc tả chi tiết thuộc tính, kiểu dữ liệu, ràng buộc khóa chính, khóa ngoại và quy tắc Not Null cho từng bảng: tb_user, tb_category, tb_product, tb_cart, tb_order, tb_order_details, tb_recent_product.
  • Trình bày cấu trúc và cách tích hợp bộ dữ liệu địa giới hành chính (Tỉnh - Thành phố, Quận - Huyện, Phường - Xã) phục vụ việc chuẩn hóa biểu mẫu giao vận.

CHƯƠNG V. CÀI ĐẶT GIẢI PHÁP

Chương này mô tả toàn bộ quy trình thiết lập môi trường và hiện thực hóa giao diện website:

  • Danh mục công cụ môi trường: VS Code, PHP 8.1, Xdebug, Composer, Pnpm, MySQL, máy chủ web cục bộ Laragon (trên Windows) và MAMP Pro (trên macOS).
  • Hiện thực giao diện người dùng (Client):
    • Khung giao diện dùng chung: Header và Footer đồng nhất.
    • Trang lỗi (Error page) điều hướng khi đường dẫn không hợp lệ.
    • Trang chủ: Tích hợp thanh tìm kiếm dạng popup, điều hướng danh mục món ăn (Bánh, Kẹo, Đồ chiên, Trái cây, Kem), banner chuyển động bằng tiny-slider và anime.js, bộ lọc sản phẩm linh hoạt (Đánh giá cao, Giảm giá nhiều, Mua nhiều).
    • Trang Giới thiệu và Trang Liên hệ (tích hợp form gửi phản hồi và bản đồ Google Maps qua thẻ iframe).
    • Trang Mua hàng: Hỗ trợ chuyển đổi hiển thị chế độ lưới (Grid) và danh sách (List), sắp xếp sản phẩm, phân trang dữ liệu và danh mục sản phẩm đã xem.
    • Trang Đăng nhập và Đăng ký: Tích hợp cơ chế kiểm tra dữ liệu hợp lệ (JS validate) ngay tại client trước khi gửi yêu cầu lên server.
    • Trang Giỏ hàng và Thanh toán: Cho phép cập nhật số lượng, xóa sản phẩm, dọn sạch giỏ hàng; form thanh toán tự động fetch dữ liệu địa giới hành chính tương ứng khi người dùng lựa chọn Tỉnh/Thành phố.
    • Trang cá nhân (Dashboard) theo dõi đơn hàng và thông tin cá nhân.
  • Hiện thực giao diện quản trị (Admin):
    • Trang quản trị sản phẩm: Thêm, sửa, xóa, thay đổi trạng thái món hàng.
    • Trang quản trị đơn hàng: Theo dõi danh sách và cập nhật 4 trạng thái đơn hàng (pending, shipping, delivered, canceled).
    • Trang quản trị người dùng: Kiểm soát danh sách thành viên và trạng thái kích hoạt tài khoản.

CHƯƠNG VI. Kết Quả Đạt Được

Chương cuối cùng tổng kết các kết quả đạt được từ hệ thống, đưa ra những nhận định đánh giá khách quan về mức độ hoàn thiện của website và đề xuất các định hướng nâng cấp, phát triển phần mềm trong tương lai.

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

Kết quả chính

  • Xây dựng hoàn chỉnh website thương mại điện tử chuyên ngành đồ ăn vặt: Hệ thống hoạt động ổn định trên máy chủ web cục bộ (Laragon/MAMP Pro), đảm bảo đầy đủ các quy trình nghiệp vụ mua bán hàng trực tuyến từ bước xem hàng, tìm kiếm, lọc danh mục, thêm vào giỏ, đặt hàng, đến quản lý đơn hàng.
  • Hiện thực hóa kiến trúc MVC thuần: Áp dụng thành công cấu trúc phân lớp Model - View - Controller bằng ngôn ngữ PHP 8.1 kết hợp CSDL MySQL 8, giúp phân tách độc lập giữa xử lý dữ liệu, điều khiển luồng và hiển thị giao diện.
  • Thiết kế giao diện hoàn chỉnh: Xây dựng hệ thống giao diện tương thích, đồng nhất từ bản mẫu thiết kế Figma sang mã nguồn thực tế với sự hỗ trợ của Bootstrap 5 và hơn 10 thư viện JavaScript chuyên dụng.
  • Chuẩn hóa quy trình nhập liệu: Tích hợp thành công cơ chế kiểm tra dữ liệu đầu vào bằng JavaScript và bộ dữ liệu địa giới hành chính 3 cấp (tỉnh, huyện, xã) của Việt Nam, hạn chế lỗi nhập sai thông tin giao hàng.

Đóng góp về mặt kỹ thuật

  • Cung cấp một tài liệu kỹ thuật chi tiết từ khâu đặc tả yêu cầu bằng sơ đồ Use Case đến thiết kế CSDL quan hệ chuẩn hóa cho bài toán bán hàng quy mô vừa và nhỏ.
  • Đưa ra giải pháp xây dựng website bán lẻ nhanh chóng, dễ triển khai cho các cơ sở kinh doanh cá thể mà không đòi hỏi chi phí đầu tư lớn hay cấu hình phức tạp.

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

Hạn chế

  • Hạn chế về kiến trúc: Việc tự thiết kế mô hình MVC thuần từ đầu đối với một hệ thống quy mô nhỏ có thể tạo ra cấu trúc cồng kềnh ở giai đoạn ban đầu, việc phân chia nghiệp vụ giữa các thành phần đôi khi chưa hoàn toàn đồng đều (Model phải gánh vác nhiều logic xử lý).
  • Hạn chế về cổng thanh toán: Hệ thống chủ yếu hỗ trợ quy trình đặt hàng và chuyển đổi trạng thái đơn hàng nội bộ, chưa tích hợp các cổng thanh toán điện tử trực tuyến tự động (như thẻ ngân hàng, ví điện tử).
  • Thời gian nghiên cứu: Do hạn chế về thời gian thực hiện niên luận, một số tính năng nâng cao về bảo mật chuyên sâu và tối ưu hóa SEO vẫn cần tiếp tục được hoàn thiện.

Hướng phát triển

  1. Tiếp tục nâng cấp và tối ưu hóa hiệu năng của các truy vấn CSDL, hoàn thiện cơ chế bảo mật cho các form nhập liệu và phiên làm việc (Session).
  2. Tích hợp thêm các phương thức thanh toán trực tuyến tự động qua cổng thanh toán trung gian hoặc ví điện tử.
  3. Mở rộng module phân tích tổng quan và báo cáo thống kê doanh thu đa chiều hơn cho trang quản trị Admin bằng biểu đồ trực quan.

Giá trị tham khảo

Tài liệu niên luận là nguồn tham khảo hữu ích cho:

  • Sinh viên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm: Những người đang thực hiện niên luận, đồ án môn học hoặc khóa luận tốt nghiệp về lập trình web sử dụng PHP, MySQL theo mô hình kiến trúc MVC.
  • Lập trình viên mới bắt đầu (Fresher Web Developer): Tham khảo quy trình phân tích ca sử dụng (Use Case), cách thức tổ chức cấu trúc bảng cơ sở dữ liệu quan hệ cho một website thương mại điện tử bán lẻ và cách nhúng các thư viện giao diện JavaScript phổ biến.
  • Nội dung đáng tham khảo nhất: Hệ thống đặc tả 15 sơ đồ Use Case ở Chương III, thiết kế lược đồ quan hệ CSDL ở Chương IV và giải pháp tích hợp dữ liệu địa giới hành chính Việt Nam phục vụ thanh toán ở Chương V.

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

1. Đề tài sử dụng mô hình kiến trúc nào để phát triển hệ thống và có ưu điểm gì?

Đề tài sử dụng mô hình kiến trúc MVC (Model - View - Controller). Ưu điểm chính của mô hình này là phân tách rõ ràng giữa dữ liệu (Model), giao diện hiển thị (View) và logic điều khiển (Controller). Sự tách biệt này giúp mã nguồn rõ ràng, quy trình phát triển và bảo trì dễ dàng hơn, tiết kiệm băng thông nhờ sử dụng viewstate và cho phép nhiều lập trình viên có thể làm việc song song trên cùng một dự án.

2. Hệ thống quản lý những trạng thái nào của một đơn đặt hàng?

Trong bảng cơ sở dữ liệu tb_order, thuộc tính status được thiết kế để quản lý 4 trạng thái nghiệp vụ cụ thể của đơn hàng:

  • pending: Đơn hàng đã được khách đặt thành công, đang chờ hệ thống và quản trị viên tiếp nhận xử lý.
  • shipping: Đơn hàng đã được xử lý xong, đang trong quá trình vận chuyển tới khách hàng.
  • delivered: Đơn hàng đã được giao thành công tới người nhận.
  • canceled: Đơn hàng đã bị hủy.

3. Website giải quyết bài toán nhập sai địa chỉ giao hàng của người mua như thế nào?

Tại trang thanh toán (tb_order), hệ thống tích hợp bộ dữ liệu địa giới hành chính Việt Nam (gồm danh mục chuẩn các tỉnh thành, quận huyện, xã phường từ nguồn vietnamese-provinces-database). Khi người dùng chọn Tỉnh/Thành phố, hệ thống sẽ tự động fetch dữ liệu Quận/Huyện và Xã/Phường tương ứng, giúp ngăn ngừa việc nhập sai lệch địa chỉ và nâng cao trải nghiệm mua hàng.

4. Người dùng chưa đăng nhập (Khách vãng lai) có thể sử dụng những chức năng nào trên website?

Khách vãng lai có quyền truy cập trang chủ, xem thông tin giới thiệu, xem danh sách sản phẩm, sử dụng thanh tìm kiếm, lọc sản phẩm theo các tiêu chí (đánh giá cao, giảm giá nhiều, mua nhiều), xem chi tiết món ăn, gửi biểu mẫu liên hệ và thực hiện đăng ký tài khoản. Tuy nhiên, các chức năng "Giỏ hàng" và "Thanh toán" yêu cầu người dùng phải đăng nhập tài khoản; nếu chưa đăng nhập, hệ thống sẽ hiển thị thông báo yêu cầu xác thực thông qua thư viện thông báo Lobibox.

Kết luận

Niên luận "Thiết kế website bán đồ ăn vặt và quản lý trên mô hình MVC" của sinh viên Lê Tuấn Kiệt đã hoàn thành trọn vẹn mục tiêu nghiên cứu và xây dựng một ứng dụng thương mại điện tử hoàn chỉnh. Bằng việc kết hợp kiến trúc MVC thuần trên nền tảng PHP 8.1, MySQL 8 và hệ thống giao diện Bootstrap 5 cùng các thư viện JavaScript hiện đại, hệ thống đã giải quyết tốt nhu cầu sở hữu một kênh bán hàng độc lập, trực quan cho các cơ sở kinh doanh đồ ăn vặt. Đề tài là tài liệu kỹ thuật có tính thực tiễn cao, đóng vai trò là tài liệu tham khảo giá trị cho sinh viên công nghệ thông tin trong các học phần phát triển phần mềm web.