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

Đồ án tốt nghiệp "Website bán hàng online" (trong nội dung báo cáo còn được định danh là "Website bán đồ điện tử online") do nhóm sinh viên ngành Công nghệ thông tin thuộc Trường Đại học Ngoại ngữ - Tin học TP.HCM (HUFLIT) thực hiện năm 2022, dưới sự hướng dẫn của ThS. Trần Phương Tuấn trong khuôn khổ học phần Lập trình web nâng cao.

Trong bối cảnh cuộc Cách mạng công nghiệp 4.0 và đặc biệt là giai đoạn biến động do đại dịch Covid-19, việc ứng dụng các nền tảng kỹ thuật số trở thành giải pháp thiết yếu nhằm duy trì hoạt động kinh doanh và đáp ứng nhu cầu tiêu dùng. Đại dịch đã thúc đẩy sự chuyển dịch mạnh mẽ trong hành vi của người tiêu dùng từ hình thức mua sắm trực tiếp truyền thống sang giao dịch trực tuyến nhằm tiết kiệm chi phí, giảm thiểu thời gian di chuyển và nhận hàng tận nơi. Nhóm tác giả lựa chọn đề tài nhằm xây dựng một hệ thống thương mại điện tử chuyên biệt cho các mặt hàng công nghệ, điện tử (máy tính xách tay, máy tính để bàn PC và điện thoại) giúp người dùng giao dịch thuận tiện qua Internet và hỗ trợ chủ cửa hàng tự động hóa quy trình quản lý.

Mục tiêu nghiên cứu và phát triển của đề tài được tác giả xác định thông qua 8 nhiệm vụ cụ thể:

  1. Quản lý thông tin hàng hóa trong hệ thống.
  2. Thống kê các hàng hóa hiện có trong cửa hàng.
  3. Thực hiện thêm, xóa, cập nhật thông tin sản phẩm.
  4. Quản lý thông tin khách hàng đăng ký và mua hàng.
  5. Quản lý hóa đơn mua hàng của khách hàng.
  6. Cập nhật các sản phẩm điện tử mới phù hợp với nhu cầu thị trường.
  7. Đưa toàn bộ danh mục sản phẩm lên website phục vụ việc tra cứu, lựa chọn.
  8. Nâng cao hiệu quả hoạt động kinh doanh của đơn vị bán lẻ.

Đối tượng nghiên cứu của đồ án là quy trình nghiệp vụ bán lẻ thiết bị điện tử trực tuyến, mô hình quản lý kho - đơn lẻ và dữ liệu khách hàng. Phạm vi nghiên cứu tập trung vào việc thiết kế, xây dựng một ứng dụng web thương mại điện tử hai phân hệ (Khách hàng và Quản trị viên), triển khai trên nền tảng .NET và hoàn thành vào tháng 6 năm 2022 tại TP.HCM.

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

Đồ án ứng dụng các công nghệ, framework phát triển phần mềm web và mô hình kiến trúc sau:

  • Ngôn ngữ lập trình C# (C Sharp): Ngôn ngữ lập trình thuần hướng đối tượng do Anders Hejlsberg phát triển từ năm 2001 thuộc Microsoft, hoạt động trên nền tảng .NET Framework. Ngôn ngữ có các đặc tính cơ bản gồm tính trừu tượng, đa hình, kế thừa, đóng gói; cú pháp chặt chẽ, an toàn kiểu dữ liệu và tích hợp cùng môi trường phát triển Visual Studio để xây dựng ứng dụng web.
  • Nền tảng ASP.NET: Khung công nghệ (Active Server Pages .NET) hỗ trợ xử lý phía máy chủ cho các ứng dụng web.
  • Kiến trúc 3 lớp MVC (Model – View – Controller): Mô hình phân tách cấu trúc phần mềm thành ba thành phần độc lập:
    • Model: Đảm nhận vai trò truy xuất, xác nhận và lưu trữ dữ liệu vào kho chứa dữ liệu/CSDL, đồng thời thực thi toàn bộ logic nghiệp vụ (Business logic xử lý quy tắc/chính sách và Domain data chuyển đổi dữ liệu).
    • View: Tiếp nhận và hiển thị thông tin cho người dùng, bao gồm các tệp giao diện định nghĩa layout, màu sắc và logic xử lý cách áp dữ liệu hiển thị.
    • Controller: Tiếp nhận yêu cầu từ View, kết hợp dữ liệu từ Model để thực hiện cập nhật và điều phối luồng phản hồi.
  • Framework giao diện Bootstrap 4 (BS4): Khung giao diện mã nguồn mở xây dựng từ HTML, CSS và JavaScript, hỗ trợ thiết kế web đáp ứng (Responsive) ưu tiên thiết bị di động. Cấu trúc gồm ba thành phần: Bootstrap.css (định dạng bố cục, bảng, kiểu văn bản), Bootstrap.js (kết hợp thư viện jQuery để xử lý tương tác động, plugin) và hệ thống biểu tượng Glyphicons. Giao diện vận hành trên hệ thống lưới (Grid System 12 cột) và các lớp vùng chứa (container, container-fluid).

Phương pháp nghiên cứu được áp dụng gồm:

  • Khảo sát hiện trạng và nghiệp vụ bán lẻ thực tế đối với hai nhóm tác nhân (Khách hàng và Quản trị viên).
  • Phân tích và thiết kế hệ thống hướng đối tượng thông qua sơ đồ Use Case, bảng đặc tả Use Case chi tiết và thiết kế cơ sở dữ liệu quan hệ.
  • Phương pháp phát triển phần mềm theo mô hình MVC, lập trình chức năng thực nghiệm và kiểm thử giao diện tương tác.

Dữ liệu của hệ thống được xây dựng mô phỏng dựa trên cấu trúc thông tin của cửa hàng bán lẻ thiết bị tin học, bao gồm danh mục thể loại, bảng sản phẩm, tài khoản người dùng, bảng đơn hàng/hóa đơn và chi tiết hóa đơn.

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

Phân tích Use Case hệ thống

Hệ thống phân quyền cho hai tác nhân chính:

  • Admin (Người quản trị): Người quản lý toàn quyền hệ thống, thực hiện các khối chức năng: Quản lý sản phẩm, Quản lý khách hàng, Quản lý hóa đơn và Báo cáo thống kê.
  • Khách hàng: Người dùng tra cứu sản phẩm, xem thông tin chi tiết, quản lý giỏ hàng và tạo/hủy đơn đặt hàng.
Tên Use Case Mã Use Case Tác nhân Điều kiện tiên quyết Luồng xử lý chuẩn Tình huống lỗi
Quản lý sản phẩm UC_QLSP Admin Đã đăng nhập hệ thống 1. Chọn chức năng quản lý sản phẩm
2. Thực hiện thêm/sửa/xóa
3. Quay lại trang chủ		 Sai thông tin đăng nhập; Lỗi trang; Lỗi dữ liệu; Mất kết nối server
Quản lý khách hàng UC_QLKH Admin Đã đăng nhập hệ thống 1. Đăng nhập hệ thống
2. Chọn chức năng quản lý khách hàng
3. Xem/sửa thông tin
4. Quay lại trang chủ		 Mất kết nối server; Lỗi trang quản lý; Lỗi bảo mật
Quản lý hóa đơn UC_QLHD Admin Đã đăng nhập hệ thống 1. Đăng nhập hệ thống
2. Chọn chức năng quản lý hóa đơn
3. Cập nhật trạng thái
4. Quay lại trang chủ		 Lỗi tải trang hóa đơn; Mất kết nối server; Lỗi bảo mật
Báo cáo thống kê UC_BCTK Admin Đã đăng nhập hệ thống 1. Đăng nhập hệ thống
2. Chuyển sang trang báo cáo
3. Thực hiện thống kê
4. Quay lại trang chủ		 Lỗi trang báo cáo; Lỗi bảo mật; Không kết nối được máy chủ
Tra cứu sản phẩm UC_TCSP Khách hàng, Admin Đã truy cập/đăng nhập 1. Đăng nhập/truy cập hệ thống
2. Chọn tra cứu
3. Nhập từ khóa sản phẩm
4. Hiển thị danh sách kết quả		 Lỗi tải danh sách sản phẩm; Không kết nối được server

Thiết kế cấu trúc cơ sở dữ liệu và giao diện chức năng

Cơ sở dữ liệu được tổ chức liên kết giữa các bảng nghiệp vụ: bảng Hàng hóa (chứa ID, tên mặt hàng, loại mặt hàng, đơn giá, số lượng, ngày nhập, 4 trường lưu đường dẫn hình ảnh, mô tả chi tiết), bảng Thể loại hàng hóa, bảng Khách hàng (họ tên, số điện thoại, địa chỉ, email, ngày sinh, tên đăng nhập, mật khẩu), bảng Hóa đơn và bảng Chi tiết hóa đơn.

Phân hệ giao diện được thiết kế chuyên biệt cho hai nhóm người dùng:

  1. Phân hệ Khách hàng:

    • Trang chủ: Header (logo, menu liên kết, icon tài khoản), Banner quảng cáo, vùng hiển thị 8 sản phẩm mới nhất, danh mục thể loại kèm nút chuyển hướng ("Shop now"), vùng hiển thị 8 sản phẩm bán chạy nhất và Footer.
    • Trang danh mục sản phẩm: Thanh tìm kiếm từ khóa, menu danh mục bên cạnh để lọc theo thể loại, khung hiển thị danh sách sản phẩm kèm phân trang (Page Navigation cố định 6 sản phẩm trên một trang).
    • Trang chi tiết sản phẩm: Bộ sưu tập hình ảnh chi tiết, tên, đơn giá, đoạn mô tả ngắn, nút "Thêm vào giỏ hàng" và nội dung mô tả chi tiết kỹ thuật.
    • Trang giỏ hàng: Bảng danh sách hàng chọn mua, đơn giá, nút tăng/giảm số lượng từng dòng, nút "Update", nút "Delete", tổng tiền giỏ hàng, nút "Tiếp tục mua hàng" và nút "Mua hàng".
    • Trang chi tiết hóa đơn: Biểu mẫu thông tin người nhận (họ tên, địa chỉ, email, số điện thoại, ngày lập), Dropdown list chọn phương thức thanh toán, bảng chi tiết từng sản phẩm và nút "Đặt hàng".
    • Trang quản lý đơn hàng của khách: Bao gồm giao diện xem các đơn hàng đã đặt, giao diện quản lý đơn hàng đang chờ duyệt (kèm nút "Hủy đơn hàng") và danh sách các mặt hàng đã hoàn tất mua.

  2. Phân hệ Quản trị (Admin):

    • Bảng điều khiển trung tâm (Dashboard): Hiển thị danh mục điều hướng, thống kê số lượng hóa đơn chờ duyệt, tổng số hóa đơn, mặt hàng, thể loại, khách hàng, cùng bảng tổng kết doanh thu theo khách hàng và theo sản phẩm.
    • Quản lý hàng hóa: Danh sách sản phẩm kèm bộ lọc tìm kiếm; các trang chức năng Thêm mới (hỗ trợ 4 nút tải tệp hình ảnh, đơn giá, ngày nhập), Chỉnh sửa thông tin, Xem chi tiết và Xóa sản phẩm.
    • Quản lý thể loại, khách hàng và hóa đơn: Các bảng quản lý chuyên biệt hỗ trợ tìm kiếm, cập nhật trạng thái đơn hàng (đã thanh toán / chờ xác nhận), chỉnh sửa hoặc xóa dữ liệu.

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

Chương 1: Mở đầu

Chương này phân tích bối cảnh phát triển của thương mại số thời kỳ hậu Covid-19 và nêu lý do hình thành đề tài xây dựng website bán đồ điện tử online. Tác giả xác định 8 mục tiêu chính nhằm giải quyết bài toán quản lý kho hàng, hóa đơn, khách hàng và cung cấp kênh mua sắm trực tuyến thuận tiện cho người dùng. Khảo sát hiện trạng nêu rõ quy trình mua bán điện tử cho khách hàng từ khâu đăng ký, chọn sản phẩm, lập hóa đơn, chọn thanh toán đến quy trình quản trị kho và thống kê của chủ cửa hàng.

Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng

Nội dung chương trình bày chi tiết về các nền tảng kỹ thuật được lựa chọn:

  • Ngôn ngữ lập trình C# với các đặc trưng thuần hướng đối tượng, cú pháp logic, an toàn kiểu dữ liệu và thư viện toán học/xử lý tích hợp sẵn.
  • Kiến trúc phần mềm 3 lớp MVC, phân định rõ ràng vai trò giữa Model (xử lý Business logic và Domain data), View (tệp mẫu hiển thị và logic giao diện) và Controller (điều hướng và kiểm soát luồng dữ liệu).
  • Khung giao diện Bootstrap 4, phân tích cơ chế hoạt động của Bootstrap.css, Bootstrap.js (kết hợp jQuery), bộ icon Glyphicons, hệ thống lưới 12 cột Responsive (Grid System với lớp .col-xl- cho màn hình từ 1200px trở lên) cùng quy chuẩn thẻ vùng chứa container và container-fluid.

Chương 3: Thiết kế

Chương 3 trình bày toàn diện giai đoạn thiết kế hệ thống thông tin:

  • Khảo sát nghiệp vụ chi tiết cho hai đối tượng Admin và Khách hàng.
  • Xây dựng Biểu đồ Use Case tổng quát (Hình 1), Biểu đồ phân rã Use Case Admin (Hình 2) và Biểu đồ Use Case Khách hàng (Hình 3).
  • Lập 5 bảng đặc tả Use Case chi tiết (Bảng 2 đến Bảng 6) mô tả dòng sự kiện chuẩn, luồng thay thế và xử lý lỗi hệ thống.
  • Xây dựng sơ đồ cơ sở dữ liệu quan hệ (Hình 4).
  • Thiết kế chi tiết cấu trúc Header, Body, Footer và các nút chức năng cho 16 màn hình giao diện của hệ thống (Hình 5 đến Hình 20).

Chương 4: Code các chức năng ứng dụng

Chương 4 mô tả quá trình hiện thực hóa các chức năng phần mềm thông qua các đoạn mã Model, View và Controller cụ thể:

  • Phía Quản trị: Cài đặt Model Class mặt hàng, View hiển thị danh sách, Controller và View thêm sản phẩm mới (xử lý 4 tệp ảnh), Controller xem chi tiết, Controller/View chỉnh sửa, Controller/View xóa mặt hàng; cài đặt Model/Controller/View cho xác thực đăng nhập tài khoản admin; cài đặt khối xử lý thống kê doanh thu theo khách hàng và theo sản phẩm; cài đặt Controller và View trang chủ quản trị.
  • Phía Khách hàng: Cài đặt Controller và View hiển thị 8 sản phẩm mới nhất, 8 sản phẩm bán chạy nhất, View banner trang chủ; Controller và View danh mục phân trang sản phẩm; Model/Controller/View giỏ hàng; xử lý xác nhận đơn hàng, Dropdown list phương thức thanh toán; xử lý Controller hủy hóa đơn và hiển thị lịch sử mua hàng.

Chương 5: Kết luận và hướng phát triển

Đánh giá mức độ hoàn thành các chức năng theo mục tiêu đề ra ban đầu, tổng kết phân công nhiệm vụ của các thành viên trong nhóm thực hiện đề tài và vạch ra các định hướng mở rộng ứng dụng trong tương lai.

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

Kết quả kỹ thuật đạt được

Hệ thống website bán hàng online đã hoàn thiện đầy đủ các phân hệ chức năng theo mô hình MVC:

Phân hệ Chức năng đã hiện thực Chi tiết triển khai
Giao diện Khách hàng Hiển thị sản phẩm trang chủ Tự động phân loại 8 sản phẩm mới nhất và 8 sản phẩm bán chạy nhất
Danh mục & Tìm kiếm Bộ lọc thể loại, tìm kiếm theo tên, phân trang chuẩn 6 sản phẩm/trang
Giỏ hàng & Đặt hàng Tăng/giảm số lượng, cập nhật/xóa sản phẩm, chọn hình thức thanh toán
Lịch sử đơn hàng Tra cứu đơn hàng đã đặt, theo dõi đơn chờ duyệt, hủy đơn hàng đang chờ
Giao diện Quản trị Quản lý sản phẩm Thêm mới (hỗ trợ tải lên 4 ảnh), sửa thông tin, xóa và tra cứu chi tiết
Quản lý danh mục & User Thêm/sửa/xóa thể loại hàng; quản lý danh sách và tài khoản khách hàng
Quản lý đơn hàng Cập nhật trạng thái duyệt đơn (đã thanh toán / chờ xác nhận), xóa hóa đơn
Báo cáo thống kê Thống kê số liệu đơn chờ, tổng hợp doanh thu theo khách hàng và theo sản phẩm

Đóng góp thực tiễn

  • Xây dựng thành công ứng dụng web thương mại điện tử hoàn chỉnh trên nền tảng .NET/C# tuân thủ chặt chẽ kiến trúc 3 lớp MVC.
  • Cung cấp giải pháp số hóa kênh bán hàng cho các đơn vị kinh doanh đồ điện tử (laptop, PC) trong giai đoạn chuyển đổi số bán lẻ.
  • Tài liệu hóa chi tiết toàn bộ quy trình phân tích, thiết kế use case, thiết kế dữ liệu và đặc tả mã nguồn cho một ứng dụng web hướng đối tượng.

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

  • Hạn chế: Hệ thống vận hành ở quy mô đồ án môn học nâng cao, tập trung vào các luồng nghiệp vụ cơ bản (đặt hàng, quản lý đơn, thống kê cơ bản) trên cơ sở dữ liệu mẫu; giao diện thanh toán mới dừng ở việc lựa chọn phương thức thông qua danh sách Dropdown list mà chưa tích hợp cổng thanh toán trực tuyến của bên thứ ba.
  • Hướng phát triển tiếp:
    • Hoàn thiện và tích hợp các cổng thanh toán điện tử trực tuyến (như ví điện tử, cổng thẻ ngân hàng).
    • Bổ sung các giải pháp bảo mật nâng cao cho hệ thống tài khoản và giao dịch.
    • Tối ưu hóa hiệu năng truy vấn cơ sở dữ liệu và mở rộng thêm các tiêu chí phân tích, thống kê nghiệp vụ chuyên sâu.

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo thực tế cho:

  • Sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang học các học phần Lập trình Web nâng cao, Công nghệ phần mềm hoặc làm đồ án tốt nghiệp liên quan đến kiến trúc MVC.
  • Các nhà phát triển muốn tham khảo mô hình tổ chức code C# kết hợp ASP.NET, Bootstrap 4 và jQuery trong việc xây dựng hệ thống thương mại điện tử bán lẻ.
  • Phần đáng tham khảo nhất của tài liệu là hệ thống 5 bảng đặc tả Use Case chi tiết (quản lý sản phẩm, khách hàng, hóa đơn, báo cáo thống kê, tra cứu) và cấu trúc thiết kế 16 màn hình giao diện tương tác gắn liền với từng Model, View, Controller trong mã nguồn.

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

1. Hệ thống website được xây dựng nhằm phục vụ kinh doanh mặt hàng cụ thể nào?
Hệ thống được thiết kế chuyên biệt cho việc kinh doanh các thiết bị công nghệ, điện tử trực tuyến, trọng tâm là các dòng máy tính xách tay (laptop), máy tính để bàn (PC) và điện thoại.

2. Giao diện trang danh mục sản phẩm của khách hàng được cấu hình hiển thị bao nhiêu sản phẩm trên một trang?
Theo tài liệu thiết kế tại Chương 3 (Mục 12.2, Hình 6), giao diện trang danh mục sản phẩm sử dụng cơ chế điều hướng phân trang (Page Navigation) với quy chuẩn hiển thị cố định 6 sản phẩm trên một trang.

3. Khách hàng có thể thao tác hủy đơn đặt hàng trong trạng thái nào?
Khách hàng có thể thực hiện hủy đơn hàng thông qua nút "Hủy đơn hàng" tại màn hình giao diện "Trang đơn hàng đang chờ" (Hình 11); đối với các đơn hàng đã được Admin xác nhận xử lý hoặc đã mua, khách hàng chỉ có quyền xem lại danh sách chi tiết.

4. Chức năng thống kê doanh thu của Admin hỗ trợ những tiêu chí báo cáo nào?
Phân hệ quản trị cung cấp chức năng thống kê theo hai tiêu chí độc lập: thống kê doanh thu theo khách hàng (hiển thị tên khách hàng, số lượng hàng đã mua, số tiền đã trả, tổng doanh thu) và thống kê doanh thu theo từng sản phẩm (hiển thị tên sản phẩm, số lượng đã bán, số tiền thu được, tổng doanh thu).

5. Khi thêm một sản phẩm mới vào hệ thống, quản trị viên có thể tải lên tối đa bao nhiêu hình ảnh minh họa?
Giao diện thêm sản phẩm mới (Hình 15) và giao diện chỉnh sửa sản phẩm (Hình 16) được thiết kế tích hợp sẵn 4 nút chọn tệp (Button choose file hình ảnh 1 đến 4) để lưu trữ các góc ảnh chi tiết của mặt hàng vào cơ sở dữ liệu.

Kết luận

Đồ án "Website bán hàng online" đã xây dựng thành công một hệ thống thương mại điện tử chuyên ngành đồ điện tử hoàn chỉnh trên nền tảng C# và ASP.NET theo mô hình MVC. Nhóm tác giả đã thực hiện đầy đủ từ khảo sát hiện trạng, phân tích đặc tả Use Case, thiết kế cơ sở dữ liệu đến hiện thực hóa mã nguồn cho hai phân hệ Quản trị viên và Khách hàng. Đồ án đáp ứng tốt các yêu cầu nghiệp vụ quản lý kho hàng, xử lý hóa đơn, hỗ trợ đặt hàng trực tuyến và là tài liệu mẫu mực phục vụ học tập, nghiên cứu trong lĩnh vực phát triển phần mềm web.