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

Sự phát triển mạnh mẽ của công nghệ thông tin và mạng Internet đã thúc đẩy sự chuyển dịch mô hình kinh doanh truyền thống sang thương mại điện tử (TMĐT). Việc trao đổi hàng hóa trực tuyến ngày càng gia tăng cả về số lượng lẫn giá trị, trở thành phương thức mua sắm tiện lợi và phổ biến. Trong lĩnh vực thể thao tại Việt Nam, đặc biệt là bộ môn ván trượt (skateboard), nhu cầu của người tiêu dùng đối với các sản phẩm chuyên dụng ngày càng cao. Tuy nhiên, thị trường có sự tham gia của nhiều đơn vị kinh doanh với mức giá và chương trình ưu đãi đa dạng, gây khó khăn cho khách hàng trong việc tìm kiếm, so sánh và lựa chọn sản phẩm phù hợp. Nhằm giải quyết thực trạng này, nhóm tác giả đã thực hiện đề tài xây dựng website thương mại điện tử chuyên biệt mang tên "Leninn".

Mục tiêu nghiên cứu và nhiệm vụ của đề tài được xác định cụ thể như sau:

  1. Xây dựng thành công một website thương mại điện tử kinh doanh đồ chơi thể thao skateboard hoàn chỉnh, cung cấp môi trường mua sắm trực tuyến nhanh chóng, tiện lợi, đáp ứng đầy đủ nhu cầu của khách hàng.
  2. Củng cố và vận dụng các kiến thức, kỹ năng chuyên ngành đã được đào tạo trong chương trình học, trọng tâm là các học phần Lập trình web và Phân tích thiết kế hệ thống.
  3. Tạo tiền đề để tiếp tục nghiên cứu, mở rộng và phát triển dự án phục vụ các mục tiêu thực tiễn cao hơn trong tương lai.

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

  • Đối tượng nghiên cứu: Quy trình phân tích, thiết kế và xây dựng hệ thống website thương mại điện tử cho cửa hàng kinh doanh đồ chơi thể thao skateboard; bao gồm cấu trúc dữ liệu, các luồng nghiệp vụ mua bán, quản lý kho hàng và tích hợp thanh toán tự động.
  • Phạm vi không gian: Áp dụng cho mô hình vận hành của cửa hàng thể thao ván trượt Leninn, triển khai thử nghiệm trên môi trường máy chủ cục bộ (Localhost).
  • Phạm vi thời gian: Đề tài được hoàn thành vào tháng 12 năm 2023 tại Trường Đại học Công nghệ Thông tin & Truyền thông Việt Hàn (VKU), thực hiện theo lộ trình 9 tuần từ khảo sát, phân tích, thiết kế, lập trình đến kiểm thử và hoàn thiện báo cáo.

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

Đề tài áp dụng các nền tảng lý thuyết kỹ thuật phần mềm và phương pháp phát triển hệ thống thông tin tiêu chuẩn:

  • Khung kiến trúc và mô hình thiết kế:

    • Kiến trúc Model-View-Controller (MVC): Tách biệt ứng dụng thành ba thành phần độc lập gồm Model (xử lý dữ liệu và logic nghiệp vụ), View (giao diện hiển thị cho người dùng), và Controller (bộ điều khiển tiếp nhận yêu cầu, tương tác giữa Model và View).
    • Kỹ thuật Object-Relational Mapping (ORM): Ánh xạ các bảng cơ sở dữ liệu quan hệ sang các đối tượng trong ngôn ngữ lập trình hướng đối tượng, giúp chuẩn hóa và tối ưu hóa các thao tác truy vấn dữ liệu.
    • Mô hình Open Banking và Transactions API: Cơ chế giao tiếp lập trình ứng dụng cho phép kết nối, truy xuất và đối chiếu tự động các giao dịch ngân hàng theo thời gian thực.

  • Phương pháp nghiên cứu và phát triển:

    • Phương pháp khảo sát và đặc tả hệ thống: Thực hiện qua hai giai đoạn gồm khảo sát sơ bộ (tìm hiểu cơ cấu tổ chức, văn hóa, con người) và khảo sát chi tiết (thu thập yêu cầu chức năng, thông tin nhập/xuất, các ràng buộc nghiệp vụ).
    • Phương pháp phân tích và thiết kế hướng đối tượng (OOAD): Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng các biểu đồ Use Case (tổng quát, quản lý, khách hàng, mua hàng), biểu đồ hoạt động (Activity Diagram cho các luồng đăng nhập, đăng ký, thanh toán) và biểu đồ lớp (Class Diagram).
    • Phương pháp thiết kế cơ sở dữ liệu quan hệ: Phân tích các thực thể, xác định thuộc tính, khóa chính (Primary Key), khóa ngoại (Foreign Key), thiết lập các mối quan hệ (Relationships) và ràng buộc toàn vẹn dữ liệu.
    • Phương pháp kiểm thử phần mềm: Xây dựng test case, kiểm chứng các module chức năng từ giao diện đến xử lý backend và khắc phục các lỗi phát sinh.

  • Nguồn dữ liệu: Dữ liệu thử nghiệm về danh mục ván trượt, thông số kỹ thuật sản phẩm, thông tin người dùng và lịch sử đơn hàng mô phỏng.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình phân lớp rõ ràng, đảm bảo tính mô-đun hóa và khả năng mở rộng. Dưới đây là tổng hợp các công nghệ và công cụ được sử dụng trong đề tài:

Phân hệ / Vai trò Công nghệ / Công cụ sử dụng Mục đích triển khai trong hệ thống
Giao diện người dùng (Front-end) HTML5, CSS3, JavaScript Xây dựng cấu trúc trang, định kiểu thẩm mỹ và xử lý tương tác động phía client
Framework & Thư viện Front-end Bootstrap, jQuery, Chart.js Thiết kế giao diện tương thích đa thiết bị (Responsive), xử lý hiệu ứng DOM và trực quan hóa biểu đồ
Xử lý phía máy chủ (Back-end) PHP (Framework Laravel) Xử lý logic nghiệp vụ theo kiến trúc MVC, quản lý định tuyến (Routing) và ORM
Hệ quản trị cơ sở dữ liệu MySQL / MariaDB Lưu trữ, quản lý và truy vấn dữ liệu quan hệ
Môi trường máy chủ thử nghiệm XAMPP (Apache, MySQL, PHP, Perl) Cung cấp môi trường web server cục bộ phục vụ việc lập trình và kiểm thử
Công cụ phát triển (IDE) Visual Studio Code Soạn thảo mã nguồn, hỗ trợ debug, IntelliSense và quản lý mã nguồn với Git
Tích hợp thanh toán Transactions API Tự động tạo mã QR động chứa thông tin đơn hàng và đối chiếu trạng thái thanh toán

Hệ thống cơ sở dữ liệu được thiết kế gồm 10 bảng dữ liệu quan hệ với cấu trúc chi tiết như sau:

STT Tên bảng dữ liệu Danh sách các trường dữ liệu chính Chức năng lưu trữ
1 Bảng giỏ hàng Cart_ID, Product_ID, User_ID, Quantity Quản lý các sản phẩm khách hàng đã chọn nhưng chưa thanh toán
2 Bảng sản phẩm Product_ID, Name, typeProduct_ID, Price, Desciption, urlimage Lưu trữ thông tin chi tiết, giá thành, mô tả và hình ảnh của ván trượt
3 Bảng người dùng User_ID, firstname, lastname, BirthDate, phoneNumber, email, Password, streetname, streetNumber, district, city, urlAvata, status, role Quản lý toàn bộ thông tin cá nhân, địa chỉ, tài khoản xác thực và phân quyền người dùng
4 Bảng loại sản phẩm typeProduct_ID, nametype Phân loại danh mục sản phẩm ván trượt
5 Bảng chi tiết hóa đơn ID, Product_ID, Order_ID, quantity, Current_price Lưu từng mục sản phẩm trong đơn hàng kèm số lượng và đơn giá tại thời điểm mua
6 Bảng hóa đơn ID, User_ID, Status_ID, Total_price Quản lý thông tin đơn hàng tổng thể, trạng thái xử lý và tổng tiền
7 Bảng liên hệ ID, Email, Message Tiếp nhận phản hồi, thắc mắc và yêu cầu hỗ trợ từ khách hàng
8 Bảng trạng thái thanh toán ID, namepayment, color Định nghĩa các trạng thái thanh toán kèm màu sắc biểu thị trực quan
9 Bảng ngân hàng ID, NameBank, shortname, number, passwordbank, token Cấu hình tài khoản ngân hàng của cửa hàng phục vụ đối soát giao dịch
10 Bảng thanh toán qua ngân hàng ID, Order_ID, amount, Bank_ID Ghi nhận chi tiết các giao dịch chuyển khoản qua ngân hàng cho từng đơn hàng

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

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

Chương này tập trung trình bày bối cảnh thực tế của thị trường bán lẻ đồ chơi thể thao ván trượt, sự bùng nổ của TMĐT và lý do lựa chọn đề tài. Tác giả nêu bật bài toán cần giải quyết là giúp khách hàng tiếp cận đầy đủ các dòng sản phẩm skateboard chất lượng, minh bạch về giá cả và thông số kỹ thuật.

Báo cáo phân định rõ cấu trúc các phân hệ chức năng trên website:

  • Phân hệ người dùng công cộng và khách hàng: Bao gồm Trang chủ (hiển thị sản phẩm nổi bật, sản phẩm mới, đánh giá cao, slider quảng bá), Cửa hàng (danh sách sản phẩm, bộ lọc theo loại/xuất xứ/thương hiệu, sắp xếp theo giá và mức độ phổ biến), Blog (bài viết lịch sử ván trượt, hướng dẫn kỹ thuật chơi ván an toàn, tips phòng tránh chấn thương), Về chúng tôi (sứ mệnh, câu chuyện thương hiệu, thông tin liên hệ), Trang liên lạc, Giỏ hàng & thanh toán trực tuyến, Đăng ký, Đăng nhập và Khôi phục mật khẩu qua email tự động.
  • Phân hệ quản trị (Admin Dashboard): Cung cấp các công cụ quản lý toàn diện gồm quản lý tài khoản khách hàng (khóa/mở quyền truy cập), quản lý sản phẩm (thêm, sửa, xóa thông tin ván trượt), quản lý nhân viên (phân quyền theo bộ phận), quản lý hóa đơn (phê duyệt, từ chối, cập nhật tình trạng giao hàng) và quản lý danh mục loại sản phẩm.

Chương 2: Giới thiệu công nghệ

Chương 2 trình bày chi tiết về các ngôn ngữ, thư viện, framework và công cụ phần mềm được lựa chọn để hiện thực hóa website:

  • Phân tích vai trò của bộ ba ngôn ngữ cơ bản: HTML5 cung cấp cấu trúc ngữ nghĩa, CSS3 định hình phong cách giao diện, và JavaScript xử lý các tương tác logic phía máy khách.
  • Giới thiệu các thư viện hỗ trợ Front-end gồm jQuery giúp thao tác DOM nhanh chóng, Chart.js hỗ trợ trực quan hóa số liệu thống kê qua 8 dạng biểu đồ tương thích chuẩn HTML5, và CSS Framework Bootstrap tối ưu hóa khả năng responsive trên nhiều độ phân giải màn hình.
  • Làm rõ cơ sở kỹ thuật phía Back-end: Ngôn ngữ PHP kết hợp Framework Laravel với các ưu điểm về cú pháp rõ ràng, hệ thống quản lý gói phụ thuộc (Composer), cơ chế ORM Eloquent và việc áp dụng mô hình kiến trúc MVC nhằm phân tách độc lập các luồng xử lý dữ liệu, giao diện và điều hướng.
  • Trình bày giải pháp thanh toán tự động qua Transactions API trong hệ thống Open Banking, cùng việc sử dụng bộ công cụ phát triển Visual Studio Code, hệ quản trị cơ sở dữ liệu quan hệ MySQL và gói môi trường máy chủ tích hợp XAMPP.

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

Chương này thực hiện chuyển đổi các yêu cầu nghiệp vụ thành các mô hình kỹ thuật chi tiết:

  • Đặc tả chi tiết các tác nhân hệ thống (Khách hàng và Người quản trị) cùng các quyền hạn tương ứng trên hệ thống.
  • Xây dựng hệ thống các biểu đồ Use Case mô tả trực quan các tương tác: Use case tổng quát, Use case quản lý, Use case khách hàng và Use case mua hàng.
  • Xây dựng biểu đồ lớp (Class Diagram) và các biểu đồ hoạt động (Activity Diagram) thể hiện chi tiết luồng xử lý nghiệp vụ cho ba quy trình trọng tâm: quy trình Đăng ký tài khoản, quy trình Đăng nhập hệ thống và quy trình Đặt mua hàng.
  • Thiết kế chi tiết cấu trúc dữ liệu vật lý gồm 10 bảng dữ liệu quan hệ với các kiểu dữ liệu, khóa chính, khóa ngoại và các trường thông tin cụ thể phục vụ cho việc sinh mã SQL.

Chương 4: Giới thiệu website

Chương 4 minh họa kết quả triển khai thực tế của hệ thống thông qua giao diện và các ca sử dụng:

  • Giao diện Front-end: Trình bày chi tiết giao diện Trang chủ với các banner slider; Giao diện Cửa hàng cho phép xem danh sách, lọc theo danh mục, xem chi tiết sản phẩm và danh sách sản phẩm tương tự; Giao diện trang Blog, Về chúng tôi và Liên hệ; Giao diện Giỏ hàng cho phép kiểm tra danh sách sản phẩm, cập nhật số lượng và xem trước hóa đơn.
  • Tính năng thanh toán tự động: Khi người dùng chọn thanh toán, hệ thống tự động sinh mã QR chứa đầy đủ số tài khoản nhận, tên chủ tài khoản, số tiền và nội dung chuyển khoản đã được điền sẵn; trạng thái đơn hàng tự động cập nhật ngay sau khi giao dịch ngân hàng hoàn tất.
  • Tính năng xác thực và hỗ trợ tài khoản: Giao diện đăng ký, đăng nhập với cơ chế kiểm tra tính hợp lệ của dữ liệu đầu vào (bắt lỗi thiếu trường thông tin bắt buộc, thông tin sai định dạng); tính năng hỗ trợ quên mật khẩu tự động gửi mật khẩu mới về địa chỉ Gmail đã đăng ký.
  • Giao diện quản trị (Dashboard): Giao diện quản lý danh sách người dùng kèm tính năng khóa/mở tài khoản; Giao diện CRUD (Thêm, Sửa, Xóa) thông tin sản phẩm và loại sản phẩm; Giao diện quản lý và chuyển đổi trạng thái hóa đơn mua hàng.

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

  • Kết quả thực nghiệm đạt được:

    • Hoàn thiện website thương mại điện tử chuyên ngành skateboard hoàn chỉnh về cả Front-end lẫn Back-end theo đúng mô hình kiến trúc MVC.
    • Xây dựng và triển khai thành công cơ sở dữ liệu quan hệ gồm 10 bảng dữ liệu chuẩn hóa, đáp ứng đầy đủ các mối quan hệ và ràng buộc nghiệp vụ.
    • Tích hợp thành công giải pháp thanh toán tự động thông qua Transactions API / Open Banking, tự động tạo mã QR động và đồng bộ trạng thái đơn hàng.
    • Xây dựng hoàn chỉnh các chức năng quản trị bán hàng (sản phẩm, loại sản phẩm, đơn hàng, tài khoản người dùng) và chức năng tương tác khách hàng (mua hàng, lọc sản phẩm, phản hồi liên hệ, khôi phục mật khẩu qua email).

  • Giải pháp kỹ thuật đề xuất:

    • Kết hợp Bootstrap và thư viện JavaScript nhằm nâng cao trải nghiệm người dùng, đảm bảo website hiển thị tối ưu trên máy tính để bàn, máy tính bảng và thiết bị di động.
    • Ứng dụng mô hình ORM trong Laravel giúp tối ưu hóa truy vấn cơ sở dữ liệu, tăng tính bảo mật và giảm thiểu lỗi thao tác dữ liệu thủ công.
    • Tự động hóa khâu xác nhận thanh toán đơn hàng qua API ngân hàng, loại bỏ quy trình đối soát chứng từ thủ công của nhân viên quản trị.

  • Đóng góp của đề tài: Đồ án cung cấp một mô hình ứng dụng web TMĐT hoàn chỉnh cho phân khúc sản phẩm thể thao đặc thù, kết hợp hài hòa giữa hoạt động kinh doanh trực tuyến và việc xây dựng nội dung cộng đồng (blog chia sẻ kiến thức, kỹ thuật ván trượt).

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

  • Hạn chế: Nhóm tác giả thẳng thắn thừa nhận đồ án cơ sở vẫn còn một số khiếm khuyết trong quá trình thiết kế và hoàn thiện sản phẩm; hệ thống chủ yếu được triển khai và kiểm thử trong môi trường máy chủ cục bộ (Localhost); các mô-đun quản lý nhân viên chuyên sâu và báo cáo thống kê doanh số nâng cao vẫn chưa được hoàn thiện triệt để.
  • Hướng nghiên cứu tiếp:
    • Tiếp tục nâng cấp và tối ưu hóa mã nguồn, hoàn thiện các chức năng quản trị nâng cao.
    • Triển khai website lên môi trường máy chủ Internet thực tế với tên miền và chứng chỉ bảo mật riêng.
    • Mở rộng các tính năng phân tích hành vi người dùng, phát triển thêm các cổng thanh toán điện tử bổ trợ và tối ưu hóa công cụ tìm kiếm (SEO).

Giá trị tham khảo

Tài liệu đồ án cơ sở này mang lại giá trị tham khảo thiết thực cho:

  • Sinh viên ngành Công nghệ thông tin, Kỹ thuật phần mềm và Hệ thống thông tin: Làm tài liệu tham khảo trực tiếp cho các học phần Đồ án cơ sở, Lập trình Web, và Phân tích thiết kế hệ thống thông tin.
  • Người phát triển ứng dụng thương mại điện tử với PHP/Laravel: Cung cấp mô hình tham khảo về cấu trúc cơ sở dữ liệu bán hàng (10 bảng dữ liệu cơ bản), cách thiết kế các sơ đồ UML (Use Case, Activity, Class Diagram) và quy trình tích hợp API thanh toán ngân hàng tự động.

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

1. Đề tài do ai thực hiện và thuộc cơ sở đào tạo nào?
Đề tài "Xây dựng website kinh doanh đồ chơi thể thao skateboard" do nhóm sinh viên Đàm Trung Nguyên (Mã SV: 22IT187) và Hồ Vĩnh Duy Phương (Mã SV: 22IT228), lớp 22MC thuộc Khoa Khoa Học Máy Tính, Trường Đại học Công nghệ Thông tin & Truyền thông Việt Hàn (VKU) thực hiện, dưới sự hướng dẫn của TS. Ngô Lê Quân vào tháng 12 năm 2023.

2. Website được xây dựng dựa trên những công nghệ và kiến trúc nào?
Website được phát triển dựa trên kiến trúc MVC với Back-end viết bằng ngôn ngữ PHP (sử dụng Framework Laravel kết hợp ORM), Front-end sử dụng HTML5, CSS3, JavaScript, jQuery, Bootstrap và Chart.js. Cơ sở dữ liệu sử dụng MySQL/MariaDB chạy trên nền tảng máy chủ XAMPP, mã nguồn được phát triển trên Visual Studio Code.

3. Cơ sở dữ liệu của hệ thống gồm những bảng nào?
Cơ sở dữ liệu gồm 10 bảng: Bảng giỏ hàng, Bảng sản phẩm, Bảng người dùng, Bảng loại sản phẩm, Bảng chi tiết hóa đơn, Bảng hóa đơn, Bảng liên hệ, Bảng trạng thái thanh toán, Bảng ngân hàng và Bảng thanh toán qua ngân hàng.

4. Chức năng thanh toán tự động trên website hoạt động như thế nào?
Hệ thống sử dụng Transactions API kết nối Open Banking. Khi khách hàng bấm vào biểu tượng hóa đơn, một mã QR động sẽ được sinh ra với đầy đủ thông tin: số tài khoản nhận, tên tài khoản nhận, số tiền và nội dung chuyển khoản. Sau khi người dùng xác nhận chuyển khoản, hệ thống sẽ tự động đối soát và cập nhật trạng thái đơn hàng sang đã thanh toán.

5. Chức năng khôi phục mật khẩu của người dùng được xử lý ra sao?
Khi người dùng quên mật khẩu, họ chỉ cần cung cấp số điện thoại đã đăng ký. Hệ thống sẽ tự động xác minh thông tin và gửi một email kèm mật khẩu mới về hòm thư Gmail mà khách hàng đã đăng ký trước đó.

Kết luận

Báo cáo Đồ án cơ sở 2 "Xây dựng website kinh doanh đồ chơi thể thao skateboard" đã hoàn thành việc phân tích, thiết kế và hiện thực hóa một hệ thống thương mại điện tử hoàn chỉnh cho thương hiệu Leninn. Đề tài vận dụng hiệu quả mô hình MVC trên nền tảng PHP Laravel kết hợp MySQL, đồng thời tích hợp thành công giải pháp thanh toán tự động qua mã QR ngân hàng và các chức năng quản trị bán hàng toàn diện. Kết quả đồ án phản ánh khả năng làm chủ kiến thức lập trình web và phân tích hệ thống, tạo nền tảng vững chắc cho các định hướng phát triển phần mềm chuyên sâu tiếp theo.