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

Trong bối cảnh của cuộc Cách mạng Công nghiệp 4.0, các thiết bị điện tử cá nhân như máy tính xách tay (laptop), máy tính để bàn và điện thoại thông minh đã trở thành công cụ thiết yếu phục vụ công việc, học tập và giải trí. Thị trường kinh doanh thiết bị công nghệ hiện nay có sự tham gia của nhiều nhãn hiệu và hệ thống đại lý bán lẻ, mỗi đơn vị đều xây dựng hệ thống website thương mại điện tử riêng biệt. Tuy nhiên, các nền tảng bán hàng hiện có vẫn tồn tại một số hạn chế về trải nghiệm người dùng, khả năng tương thích thiết bị hoặc cấu trúc quản lý dữ liệu.

Đề tài "Thiết kế và xây dựng các tính năng cơ bản cho Website bán Laptop" được thực hiện nhằm xây dựng một trang web bán hàng mẫu mang tên Playzone (lấy mô hình tham khảo từ hệ thống Memory Zone). Hệ thống hướng đến mục tiêu kế thừa các ưu điểm về quy trình bán lẻ công nghệ, đồng thời tối ưu hóa giao diện và cấu trúc xử lý dữ liệu để phục vụ việc kinh doanh máy tính cá nhân và linh kiện máy tính để bàn.

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

  1. Xác định và thiết lập đầy đủ các yêu cầu chức năng cho từng nhóm người dùng: khách truy cập (chưa đăng nhập), khách hàng thành viên (đã đăng nhập) và quản trị viên hệ thống (Admin).
  2. Xây dựng hệ thống tiêu chuẩn kỹ thuật đáp ứng 6 nhóm yêu cầu phi chức năng: Tính khả dụng (Usability), Tính bảo mật (Security), Tính tin cậy (Reliability), Hiệu năng (Performance), Tính có sẵn (Availability) và Tính mở rộng (Extensibility).
  3. Thiết kế kiến trúc phần mềm phân tầng Client - Server kết hợp mô hình MVC (Model - View - Controller).
  4. Thiết kế cơ sở dữ liệu quan hệ, phân rã mã nguồn và hiện thực hóa các chức năng tương tác cốt lõi từ tìm kiếm, giỏ hàng, thanh toán đến bảng điều khiển quản trị.

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

  • Đối tượng nghiên cứu: Quy trình thiết kế, kiến trúc phần mềm và xây dựng website thương mại điện tử kinh doanh laptop, máy tính cá nhân và linh kiện.
  • Phạm vi áp dụng: Bài tập lớn môn Lập trình Web (Mã lớp L04 - L06), Học kỳ 221 (Tháng 12/2022) tại Khoa Khoa học & Kỹ thuật Máy tính, Trường Đại học Bách Khoa – Đại học Quốc gia Thành phố Hồ Chí Minh, dưới sự hướng dẫn của giảng viên Nguyễn Hữu Hiếu.

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

Đề tài áp dụng các công nghệ tiêu chuẩn trong phát triển ứng dụng web hiện đại, kết hợp mô hình kiến trúc phần mềm và phân tích các biện pháp an toàn thông tin:

  • Thư viện Front-End ReactJS: Áp dụng mô hình Single Page Application (SPA), sử dụng cú pháp JSX và cơ chế Virtual DOM (DOM ảo) giúp tối ưu hóa hiệu suất render giao diện, hỗ trợ chia nhỏ giao diện thành các Component độc lập, có khả năng tái sử dụng cao.
  • Framework Bootstrap 5: Cung cấp hệ thống lưới (Grid system) và các lớp tiện ích CSS theo triết lý Mobile-First, đảm bảo tính đáp ứng (Responsive) trên nhiều kích thước màn hình mà không cần viết CSS thuần phức tạp.
  • Ngôn ngữ Back-End PHP: Đóng vai trò là ngôn ngữ kịch bản phía máy chủ (Server-side), thực hiện thu thập dữ liệu biểu mẫu (form), xử lý logic nghiệp vụ, quản lý phiên làm việc (Session) và giao tiếp với hệ quản trị cơ sở dữ liệu.
  • Hệ quản trị cơ sở dữ liệu MySQL: Cơ sở dữ liệu quan hệ (RDBMS) hoạt động theo mô hình Client-Server, được quản lý thông qua giao diện phpMyAdmin và thực thi các tập lệnh SQL (Script.sql).
  • Kiến trúc Model - View - Controller (MVC):
    • Model: Quản lý cấu trúc dữ liệu, thực hiện truy vấn và thao tác trực tiếp với cơ sở dữ liệu.
    • View: Tiếp nhận tương tác của người dùng và hiển thị kết quả trực quan.
    • Controller: Tiếp nhận yêu cầu từ View, điều phối dữ liệu qua Model và trả kết quả phản hồi về View.
  • Nghiên cứu an toàn ứng dụng web:
    • SQL Injection (SQLi): Phân tích cơ chế chèn mã SQL độc hại qua các kênh nhập liệu (form, query string, cookie). Giải pháp khắc phục được triển khai bằng việc sử dụng hàm làm sạch chuỗi mysqli_real_escape_string trước khi ghép nối vào câu lệnh truy vấn.
    • Buffer Overflow (Tràn bộ đệm): Phân tích nguyên nhân do kiểm thử trạng thái biên chưa đầy đủ và cơ chế quản lý bộ nhớ; đề xuất hướng phòng ngừa thông qua bảo vệ không gian thực thi (Stack/Heap) và sử dụng thư viện chuẩn an toàn.
  • Tối ưu hóa công cụ tìm kiếm (SEO): Nghiên cứu các quy tắc tối ưu hóa cấu trúc website nhằm nâng cao thứ hạng trên các công cụ tìm kiếm, gia tăng mức độ nhận diện thương hiệu và hiểu rõ hành vi người dùng.

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

1. Kiến trúc phân tầng và cấu trúc mã nguồn

Hệ thống được tổ chức phân tách độc lập giữa Client (Front-End) và Server (Back-End):

PROJECT_ROOT/

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

Cơ sở dữ liệu của hệ thống Playzone bao gồm 11 bảng quan hệ, được mô tả chi tiết theo bảng dưới đây:

Tên bảng Chức năng chính Các trường dữ liệu chính
Customer Lưu trữ thông tin tài khoản người mua hàng id, first_name, last_name, phone, email, birthday, username, password, address
Admin Lưu trữ thông tin tài khoản người quản trị id, first_name, last_name, phone, email, birthday, username, password, address
Product Lưu trữ thông tin chi tiết sản phẩm laptop và linh kiện id, name, thumbnail, price, quantity, brand, cpu, gpu, ram, disk, screen_size, screen_tech, weight, os, overall_rating, num_rates, description
Address Lưu sổ địa chỉ nhận hàng của khách hàng id, user_id, city, district, ward, specificAddress, phoneNumber, receiverName, type
Resource Quản lý tài nguyên media trên giao diện website id, name, data (đường dẫn, video, hình ảnh)
News Lưu trữ các bài viết tin tức công nghệ id, admin_id, title, thumbnail, content (chứa định dạng HTML)
Order Lưu trữ thông tin tổng quan của đơn đặt hàng id, customer_id, address, phoneNumber, paymentMethod, create_at, last_update, status, total_product, total_order_money
OrderDetail Lưu trữ danh sách chi tiết các mặt hàng trong đơn order_id, product_id, quantity, total_money
Comment Lưu trữ bình luận và đánh giá của khách hàng id, product_id, customer_id, admin_id, comment, updated_at, num_rate, status
Cart Quản lý giỏ hàng tổng thể của từng khách hàng id, user_id, quantity, total
Cart_item Lưu trữ chi tiết từng sản phẩm nằm trong giỏ cart_id, product_id, quantity, total, isSelected

3. Tiêu chuẩn yêu cầu phi chức năng

Hệ thống được thiết lập các chỉ số kỹ thuật nhằm đảm bảo chất lượng vận hành:

Nhóm yêu cầu Chỉ số kỹ thuật quy định trong văn bản
Tính khả dụng (Usability) Người dùng làm quen sau 15 phút hướng dẫn; giao diện Responsive từ điện thoại đến màn hình 4K; các danh mục chính hiển thị trong vùng màn hình đầu tiên (above the fold); tương thích trình duyệt Chrome 43+
Tính bảo mật (Security) Mã hóa mật khẩu bằng thuật toán SHA256; mật khẩu bắt buộc > 8 ký tự (gồm chữ, số, ký tự đặc biệt); khóa đăng nhập 5 phút nếu nhập sai 5 lần liên tiếp trong 30 giây
Tính tin cậy (Reliability) Thời gian ngừng hoạt động (downtime) không vượt quá 1 giờ/tháng; năng lực xử lý khoảng 1.000 giao dịch/giờ với tỷ lệ thành công trên 90%
Hiệu năng (Performance) Thời gian chuyển trang không quá 2 giây; thời gian phản hồi của 80% giao dịch $\le 1.500\text{ ms}$; thời gian tải các component và chuyển route đạt từ 1 - 2 giây
Tính có sẵn (Availability) Hệ thống vận hành liên tục 24/7, bao gồm ngày lễ và khung giờ cao điểm
Tính mở rộng (Extensibility) Cho phép tích hợp module chức năng mới mà không thay đổi cấu trúc nền tảng; dễ dàng bổ sung các tính năng phụ trợ

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

Chương 1: Nhiệm vụ, vai trò của từng thành viên trong nhóm

Chương này tổng kết việc phân công trách nhiệm cho 4 thành viên thuộc nhóm đề tài:

Thành viên Mã số sinh viên Phân công nhiệm vụ cụ thể
Kha Sang 2010576 Hiện thực các tính năng quản trị (Thành viên, Bình luận, Sản phẩm, Tin tức, Tài nguyên); Xây dựng giao diện Trang chủ và Tìm kiếm sản phẩm; Biên soạn báo cáo
Liễu Minh Vương 2015108 Hiện thực tính năng Quản lý đơn hàng và Chi tiết đơn hàng; Xây dựng tính năng Giỏ hàng, Xem chi tiết sản phẩm, Thanh toán; Biên soạn báo cáo
Trần Quốc Thái 2010616 Thiết kế cơ sở dữ liệu quan hệ và sinh dữ liệu mẫu (Script.sql); Xây dựng giao diện Tin tức; Hiện thực luồng Đăng ký và Đăng nhập; Biên soạn báo cáo
Lê Quang Tuấn Hào 2013048 Xây dựng giao diện Thông tin liên hệ, Chính sách mua bán, Về chúng tôi; Hiện thực Quản lý tài khoản cá nhân, Lịch sử mua hàng, Tính năng thêm bình luận; Biên soạn báo cáo

Chương 2: Giới thiệu đề tài

Trình bày bối cảnh thực tiễn của thị trường kinh doanh thiết bị điện tử cá nhân, giới thiệu tổng quan hệ thống website bán hàng Playzone, thiết lập bảng phân rã chức năng cho khách hàng và quản trị viên, đồng thời quy định cụ thể 6 nhóm yêu cầu phi chức năng.

Chương 3: Cơ sở lý thuyết

Trình bày cơ sở lý thuyết của các công nghệ cốt lõi:

  • Thư viện ReactJS với cơ chế render phía client (Client-side rendering) và DOM ảo.
  • Framework Bootstrap 5 hỗ trợ giao diện đáp ứng đa màn hình.
  • Ngôn ngữ máy chủ PHP và hệ quản trị cơ sở dữ liệu MySQL.
  • Nguyên lý hoạt động và ưu điểm của mô hình MVC trong việc tiết kiệm băng thông và tối ưu kiểm thử.
  • Phân tích cơ chế tấn công, ví dụ câu lệnh mã độc và giải pháp lập trình an toàn cho lỗ hổng SQL Injection và Buffer Overflow.
  • Tầm quan trọng của SEO đối với chiến lược nhận diện thương hiệu và thu hút khách hàng tiềm năng.

Chương 4: Thiết kế ứng dụng

Mô tả chi tiết lược đồ cơ sở dữ liệu gồm 11 bảng thực thể (Customer, Admin, Product, Address, Resource, News, Order, OrderDetail, Comment, Cart, Cart_item). Quy định chi tiết cấu trúc thư mục phân tầng cho Client (ReactJS) và Server (PHP MVC), đồng thời liệt kê danh mục tính năng cần xây dựng cho 3 nhóm đối tượng: khách, thành viên và quản trị viên.

Chương 5: Hiện thực

Tài liệu minh họa giao diện và quy trình xử lý thực tế của các tính năng:

  • Giao diện người dùng: Thanh điều hướng chia 3 cấp (TopBar, MidBar, BotBar); công cụ tìm kiếm hỗ trợ lọc theo từ khóa, phân loại danh mục và bộ lọc nâng cao theo thông số kỹ thuật.
  • Xác thực người dùng: Biểu mẫu Đăng ký và Đăng nhập tích hợp kiểm tra tính hợp lệ dữ liệu (validation) tại Client và Server; lưu trữ thông tin phiên làm việc qua Session; phân quyền giao diện tự động giữa Khách hàng và Admin.
  • Trang thông tin: Trang giới thiệu cửa hàng, hệ thống chi nhánh, danh sách thành viên, hướng dẫn mua hàng và trang tin tức công nghệ.
  • Chi tiết sản phẩm & Đánh giá: Hiển thị thông số kỹ thuật chi tiết (CPU, GPU, RAM, Ổ cứng, Màn hình, Trọng lượng, Hệ điều hành), cho phép người dùng đã đăng nhập gửi bình luận và đánh giá số sao.
  • Giỏ hàng & Thanh toán: Hỗ trợ thêm sản phẩm từ thẻ danh mục hoặc trang chi tiết, điều chỉnh số lượng và chọn mặt hàng thanh toán trong giỏ hàng. Quy trình thanh toán hỗ trợ 3 hình thức: Thanh toán khi nhận hàng (COD), quét mã QR qua VNPAY, và Chuyển khoản ngân hàng có hộp thoại xác nhận.
  • Lịch sử đơn hàng: Giao diện tài khoản cá nhân cho phép mở modal xem chi tiết từng đơn hàng đã đặt.
  • Bảng điều khiển Admin (Dashboard):
    • Quản lý tài khoản: xem chi tiết, cấm tài khoản, xóa tài khoản.
    • Quản lý sản phẩm: xem, thêm mới, chỉnh sửa thông số và xóa sản phẩm.
    • Quản lý đơn hàng: xem chi tiết đơn, phê duyệt đơn hàng hoặc hủy bỏ đơn hàng.
    • Quản lý bình luận: kiểm duyệt phản hồi và xóa bình luận vi phạm.
    • Quản lý tin tức: đăng tải, cập nhật nội dung và xóa bài viết.
    • Quản lý tài nguyên: tải lên hình ảnh/video banner cho các trang giao diện chính.

Chương 6: Cài đặt ứng dụng

Tổng hợp các bước triển khai môi trường máy chủ cục bộ, thiết lập biến môi trường .env, nạp cơ sở dữ liệu Script.sql và khởi chạy các dịch vụ phía Client và Server.

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

  • Kết quả thực nghiệm:
    • Hoàn thiện website thương mại điện tử Playzone với đầy đủ 2 phân hệ Front-End (ReactJS) và Back-End (PHP MVC), vận hành trên cơ sở dữ liệu MySQL 11 bảng.
    • Xây dựng giao diện đáp ứng linh hoạt trên cả 3 định dạng màn hình: Desktop, Máy tính bảng (Tablet - Hình 37) và Điện thoại di động (Mobile - Hình 38).
    • Tích hợp kiểm tra tính đúng đắn dữ liệu hai lớp (Client-side validation và Server-side validation) cho biểu mẫu đăng ký/đăng nhập.
    • Hiện thực hóa thành công các cổng thanh toán điện tử cơ bản thông qua quét mã QR (VNPAY, Chuyển khoản ngân hàng) và thanh toán khi nhận hàng (COD).
  • Đóng góp kỹ thuật:
    • Xây dựng tài liệu đặc tả hệ thống và thiết kế CSDL chi tiết cho mô hình bán lẻ thiết bị công nghệ.
    • Cung cấp mô hình triển khai mã nguồn phân tách rõ ràng giữa ReactJS SPA và PHP Backend, đóng vai trò là dự án tham khảo thực tế cho môn học Lập trình Web.

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

  • Hạn chế được ghi nhận trong văn bản:
    • Tính năng "Xem khuyến mãi" tại thanh TopBar trên giao diện trang chủ vẫn đang ở trạng thái chưa hiện thực (mục 5.1).
    • Phương thức thanh toán trực tuyến qua VNPAY và Chuyển khoản ngân hàng hiện dừng lại ở cơ chế hiển thị mã QR và người dùng tự bấm nút xác nhận, chưa tích hợp API Webhook tự động đối soát giao dịch thời gian thực từ ngân hàng.
  • Hướng phát triển:
    • Hoàn thiện module quản lý và áp dụng mã khuyến mãi (voucher) theo đặc tả yêu cầu chức năng.
    • Nâng cấp khả năng mở rộng hệ thống theo tiêu chuẩn Extensibility (mục 6.1, 6.2) để bổ sung các module phụ trợ mà không làm thay đổi cấu trúc nền tảng.

Giá trị tham khảo

Tài liệu là nguồn tư liệu kỹ thuật hữu ích đối với sinh viên ngành Khoa học Máy tính, Kỹ thuật Phần mềm và Công nghệ Thông tin đang thực hiện bài tập lớn, đồ án môn học hoặc khóa luận tốt nghiệp về phát triển ứng dụng web thương mại điện tử.

Các nội dung có giá trị tham khảo nổi bật bao gồm:

  1. Thiết kế lược đồ cơ sở dữ liệu: Cấu trúc 11 bảng với đầy đủ các mối quan hệ giữa khách hàng, sản phẩm, giỏ hàng, chi tiết đơn hàng và bình luận.
  2. Khung yêu cầu phi chức năng định lượng: Cách thiết lập các chỉ số kỹ thuật cụ thể về độ trễ, thời gian phản hồi, bảo mật mật khẩu và độ khả dụng.
  3. Cấu trúc tổ chức mã nguồn: Mô hình phân tách thư mục ReactJS (layouts, pages, components, routes) kết hợp Backend PHP MVC.

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

1. Website Playzone được xây dựng bằng những công nghệ chính nào?
Giao diện Front-End sử dụng ReactJS kết hợp framework Bootstrap 5. Phía Back-End sử dụng ngôn ngữ PHP theo mô hình MVC, giao tiếp với hệ quản trị cơ sở dữ liệu MySQL thông qua công cụ phpMyAdmin.

2. Cơ sở dữ liệu của hệ thống bao gồm những bảng nào?
Cơ sở dữ liệu bao gồm 11 bảng: Customer, Admin, Product, Address, Resource, News, Order, OrderDetail, Comment, Cart, và Cart_item.

3. Các yêu cầu phi chức năng về hiệu năng và bảo mật của hệ thống được quy định ra sao?
Về bảo mật, hệ thống sử dụng thuật toán SHA256 để mã hóa mật khẩu, yêu cầu mật khẩu trên 8 ký tự (gồm chữ, số, ký tự đặc biệt) và khóa đăng nhập 5 phút nếu nhập sai 5 lần liên tiếp trong 30 giây. Về hiệu năng, thời gian chuyển trang không quá 2 giây, thời gian phản hồi của 80% giao dịch không quá 1.500 ms, và thời gian tải component/route từ 1 - 2 giây.

4. Nhóm tác giả đề xuất biện pháp kỹ thuật nào để ngăn chặn lỗ hổng SQL Injection?
Nhóm áp dụng hàm mysqli_real_escape_string để loại bỏ và vô hiệu hóa các ký tự đặc biệt có khả năng làm thay đổi cú pháp truy vấn SQL trước khi dữ liệu đầu vào được đưa vào câu lệnh thực thi trên máy chủ.

5. Hệ thống Playzone hỗ trợ những phương thức thanh toán nào cho khách hàng?
Hệ thống hỗ trợ 3 phương thức: Thanh toán khi nhận hàng (COD), Thanh toán qua VNPAY bằng quét mã QR, và Thanh toán qua chuyển khoản ngân hàng bằng quét mã QR có bước xác nhận hoàn tất giao dịch.

Kết luận

Đồ án bài tập lớn môn Lập trình Web đã hoàn thành việc thiết kế và xây dựng website thương mại điện tử Playzone phục vụ kinh doanh máy tính cá nhân và linh kiện. Báo cáo trình bày đầy đủ từ khâu phân tích yêu cầu, thiết kế lược đồ 11 bảng cơ sở dữ liệu đến hiện thực hóa giao diện đa thiết bị bằng ReactJS và hệ thống xử lý phía máy chủ bằng PHP MVC. Mặc dù còn một số tính năng mở rộng cần tiếp tục hoàn thiện, hệ thống đã đáp ứng tốt các chỉ số kỹ thuật về tính khả dụng, hiệu năng và an toàn thông tin theo mục tiêu đề ra.