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

Đề tài "Thiết kế website động quản lí di động" được thực hiện trong khuôn khổ Đồ án chuyên ngành Khoa học máy tính tại Khoa Công nghệ Thông tin, Trường Đại học Văn Hiến (Mã lớp học phần: INT48404, hoàn thành ngày 13 tháng 11 năm 2023 do sinh viên Ngô Nguyễn Đan Trường thực hiện dưới sự hướng dẫn của ThS. Nguyễn Minh Thi).

Bối cảnh thực tiễn của nghiên cứu xuất phát từ sự phát triển của ngành công nghiệp thiết bị di động, nơi các dòng sản phẩm mới liên tục ra mắt với sự đa dạng về thương hiệu, thông số kỹ thuật và phân khúc giá. Song song với đó là sự phổ biến của thương mại điện tử, thúc đẩy nhu cầu tìm kiếm, so sánh và mua sắm trực tuyến từ phía người tiêu dùng. Về phía doanh nghiệp kinh doanh thiết bị, việc quản trị danh mục sản phẩm, đơn hàng và dữ liệu khách hàng đòi hỏi một giải pháp phần mềm có khả năng đồng bộ, tương tác linh hoạt và đảm bảo tính chính xác.

Mục tiêu nghiên cứu của đồ án được xác định gồm 4 nội dung cụ thể:

  1. Xây dựng một ứng dụng web quản lý sản phẩm di động với giao diện thân thiện, dễ sử dụng và hiệu quả dựa trên nền tảng công nghệ ASP.NET.
  2. Phát triển cơ sở dữ liệu để lưu trữ thông tin chi tiết về các sản phẩm di động, bao gồm hình ảnh, thông số kỹ thuật, giá cả và số lượng tồn kho.
  3. Cung cấp khả năng tìm kiếm, sắp xếp và lọc thông tin sản phẩm nhằm hỗ trợ người dùng tra cứu và so sánh sản phẩm.
  4. Hỗ trợ quản lý giỏ hàng và đơn đặt hàng, bao gồm việc tích hợp quy trình mua sắm trực tuyến an toàn, thuận tiện.

Đối tượng nghiên cứu của đồ án tập trung vào 3 nhóm đối tượng:

  • Người tiêu dùng: Nghiên cứu nhu cầu trải nghiệm giao diện tra cứu, công cụ lọc thông số, chức năng giỏ hàng và quản lý tài khoản cá nhân.
  • Doanh nghiệp kinh doanh thiết bị di động: Nghiên cứu nhu cầu quản trị danh mục sản phẩm (thêm, sửa, xóa), theo dõi đơn hàng và quản lý tài khoản khách hàng.
  • Nhóm phát triển web: Nghiên cứu phương pháp ứng dụng công nghệ ASP.NET MVC và hệ quản trị cơ sở dữ liệu quan hệ để xây dựng hệ thống web động.

Phạm vi nghiên cứu: Về không gian, đề tài triển khai mô hình ứng dụng web mẫu áp dụng cho mô hình kinh doanh bán lẻ điện thoại di động (hỗ trợ các thương hiệu như Apple, Samsung, Xiaomi, Vivo, Oppo); về thời gian, dữ liệu và công nghệ được khảo sát, triển khai tại thời điểm tháng 11 năm 2023.

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

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

Hệ thống được xây dựng trên nền tảng kiến trúc web phân tầng, kết hợp các công nghệ:

  • Front-End: Sử dụng HTML5 để định hình cấu trúc ngữ nghĩa của tài liệu web theo tiêu chuẩn W3C; CSS (Cascading Style Sheets) để định dạng giao diện, tách biệt phần trình bày khỏi mã nguồn HTML; JavaScript (chuẩn ECMAScript) để xử lý logic kịch bản phía máy khách và thư viện jQuery hỗ trợ các hiệu ứng chuyển động danh mục sản phẩm.
  • Back-End: Sử dụng Microsoft SQL Server làm hệ thống quản trị cơ sở dữ liệu quan hệ (RDBMS), hỗ trợ cú pháp T-SQL và ANSI SQL; ngôn ngữ C# trên nền tảng ASP.NET MVC (thuộc không gian tên System.Web.Mvc) phân chia ứng dụng thành 3 thành phần Model - View - Controller; công cụ tương tác dữ liệu ADO.NET Entity Data Model (Entity Framework) theo tiếp cận Database-First.
  • Môi trường phát triển: Microsoft Visual Studio.

Phương pháp nghiên cứu

Đề tài áp dụng quy trình nghiên cứu và phát triển phần mềm gồm 5 giai đoạn:

  1. Nghiên cứu thư mục: Thu thập, tổng hợp tài liệu chuyên ngành về thiết kế ứng dụng web, kiến trúc ASP.NET MVC và các phương pháp thiết kế cơ sở dữ liệu quan hệ.
  2. Phân tích yêu cầu: Xác định các ca sử dụng, yêu cầu chức năng và phi chức năng đối với cả hai nhóm người dùng (khách hàng và quản trị viên).
  3. Phát triển hệ thống: Thiết kế lược đồ cơ sở dữ liệu, xây dựng tầng dữ liệu qua Entity Data Model, triển khai các Controller, cấu hình bộ định tuyến và thiết kế giao diện View.
  4. Kiểm thử: Thực hiện kiểm thử chức năng trên từng phân hệ, xác thực tính toàn vẹn dữ liệu và kiểm tra khả năng xử lý ngoại lệ khi thao tác dữ liệu.
  5. Đánh giá: Thu thập phản hồi về mức độ tương tác của giao diện, luồng xử lý đơn hàng và tính chính xác của các chức năng quản trị.

Nguồn dữ liệu của đề tài được tạo lập trực tiếp trong cơ sở dữ liệu mang tên DD trên hệ thống Microsoft SQL Server cục bộ.

Thiết kế và triển khai

Kiến trúc tổng thể và kết nối dữ liệu

Hệ thống áp dụng mô hình ASP.NET MVC 5. Cơ chế kết nối giữa cơ sở dữ liệu SQL Server và ứng dụng được thực hiện thông qua ADO.NET Entity Data Model (.edmx) theo phương pháp Database-First qua các bước:

  1. Khởi tạo mô hình ADO.NET Entity Data Model trong thư mục Models.
  2. Lựa chọn chế độ EF Designer from database.
  3. Thiết lập kết nối (New Connection) tới máy chủ SQL Server thông qua cơ chế Windows Authentication và chỉ định cơ sở dữ liệu DD.
  4. Lựa chọn các bảng dữ liệu (Tables), khung nhìn (Views), thủ tục lưu trữ (Stored Procedures) để ánh xạ vào sơ đồ thực thể Entity Data Model.
               [ Trình duyệt Web (Client) ]
               (HTTP Request / Response)
            (ADO.NET / SQL)

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

Cơ sở dữ liệu DD bao gồm 5 bảng chính và 1 khung nhìn (View):

Tên bảng / Khung nhìn Cột dữ liệu Kiểu dữ liệu Ràng buộc / Đặc tính
infophone MADD
TENSP
MAHANG
Display
RAM
ROM
Camera
ANH
GIA		 INT
nvarchar(MAX)
INT
nvarchar(10)
INT
INT
INT
nvarchar(MAX)
INT		 Khóa chính (PK), Identity tự tăng, Not Null
Null
Khóa ngoại (FK), Null
Null
Null
Null
Null
Null
Null
brand MAHANG
TENHANG
ANH		 INT
nvarchar(10)
nvarchar(MAX)		 Khóa chính (PK), Identity tự tăng, Not Null
Null
Null
Customer MAKH
TENKH
SDT		 INT
nvarchar(20)
nvarchar(10)		 Khóa chính (PK), Identity tự tăng, Not Null
Null
Null
bill MAHD
MAKH
Tong
THANHTOAN
NGAYTHANHTOAN		 INT
INT
numeric
bit
smalldatetime		 Khóa chính (PK), Not Null
Khóa ngoại (FK), Not Null
Null, tổng giá trị đơn hàng
Null, trạng thái thanh toán
Null, thời gian giao dịch
Billdetail MASP
MAKH
MADD
MAHD
SL
Thanhtien		 INT
INT
INT
INT
INT
numeric		 Khóa chính (PK)
Khóa ngoại (FK)
Khóa ngoại (FK)
Khóa ngoại (FK)
Null, số lượng mua
Null, tính bằng (SL * GIA)
View giohang Kết hợp từ Billdetail và infophone Đa dạng Chứa các cột chi tiết cùng ANH và GIA từ bảng infophone

Ràng buộc khóa ngoại:

  • brand.MAHANG (1) nối với infophone.MAHANG (n)
  • infophone.MADD (1) nối với Billdetail.MADD (n)
  • Customer.MAKH (1) nối với Billdetail.MAKH (n)
  • Customer.MAKH (1) nối với bill.MAKH (n)
  • bill.MAHD (1) nối với Billdetail.MAHD (n)

Phân hệ Quản trị (Admin Area)

Phân hệ quản trị được cấu hình độc lập trong thư mục Areas/Admin, sử dụng kỹ thuật Scaffolding của MVC 5 (MVC 5 Controller with views, using Entity Framework):

  • Quản lý sản phẩm (InfophoneController):
    • Chức năng thêm mới (Create): Tích hợp biểu mẫu với thuộc tính enctype = "multipart/form-data" và hàm @using (Html.BeginForm...) để tiếp nhận tập tin hình ảnh từ máy cục bộ, lưu vào đường dẫn ~/Content/image.
    • Chức năng chỉnh sửa (Edit): Sử dụng biến Session trong ASP.NET MVC để lưu trữ đường dẫn hình ảnh cũ, tránh trường hợp thuộc tính ANH bị gán giá trị null khi quản trị viên cập nhật thông tin mà không tải ảnh mới.
    • Chức năng danh sách (Index) và chi tiết (Detail): Hiển thị đầy đủ thông số kỹ thuật (RAM, ROM, Camera, màn hình, giá) và tích hợp thanh tìm kiếm.
  • Quản lý khách hàng (CustomerController):
    • Trang danh sách hiển thị tên, địa chỉ và số điện thoại. Để đảm bảo an toàn thông tin cá nhân, hệ thống áp dụng cơ chế bảo mật chỉ hiển thị 3 số cuối của số điện thoại; các nút Edit và Delete bị lược bỏ khỏi giao diện này.
  • Quản lý đơn hàng (BillController & BilldetailController):
    • Hiển thị danh sách các hóa đơn gồm mã đơn, tên khách hàng, ngày thanh toán và trạng thái.
    • Hệ thống khóa quyền chỉnh sửa hoặc xóa hóa đơn nhằm bảo toàn tính toàn vẹn của lịch sử giao dịch. Từ hóa đơn có thể điều hướng trực tiếp sang trang chi tiết (Billdetail) để xem các sản phẩm cụ thể.

Phân hệ Người dùng (Client)

Giao diện người dùng được xây dựng trên bố cục dùng chung _layout.cshtml, tích hợp thẻ @RenderBody():

  • Trang chủ (Index) & Danh mục (Category): Hiển thị danh sách sản phẩm phân nhóm theo các thương hiệu (Samsung, Apple, Xiaomi, Vivo, Oppo).
  • Bộ lọc nâng cao (Allsp): Cho phép người dùng lọc sản phẩm chi tiết theo dung lượng RAM, ROM và thông số kích thước màn hình.
  • Tìm kiếm (Listsp & Errorsearch): Sử dụng phương thức Contains trong C# để lọc các sản phẩm có tên chứa chuỗi ký tự người dùng nhập. Trường hợp không tìm thấy dữ liệu phù hợp, hệ thống tự động chuyển hướng sang trang báo lỗi Errorsearch.
  • Giỏ hàng (Cart): Hiển thị danh sách các mặt hàng đã chọn, đơn giá, hình ảnh và số lượng. Hệ thống hỗ trợ cập nhật số lượng, xóa từng mục và hiển thị số lượng tổng trên biểu tượng giỏ hàng. Nếu người dùng chưa đăng nhập, hệ thống hiển thị thông báo yêu cầu đăng nhập; nếu giỏ hàng rỗng, hệ thống hiển thị thông báo hướng dẫn quay lại trang chủ.
  • Chi tiết sản phẩm (Detail): Cung cấp đầy đủ thông số kỹ thuật và 2 tùy chọn điều hướng: "Thêm vào giỏ" (giữ nguyên vị trí trang) hoặc "Mua ngay" (chuyển hướng thẳng tới trang Cart). Phía dưới trang chi tiết tích hợp thanh trượt trình diễn danh sách sản phẩm liên quan sử dụng thư viện jQuery.
  • Tài khoản và Lịch sử giao dịch (Login, Register, Cusinfo, Editaccount, Trashis): Khách hàng đăng ký bằng tên, số điện thoại, địa chỉ và thực hiện đăng nhập thông qua số điện thoại. Trang thông tin cá nhân cho phép chỉnh sửa thông tin, xem tổng số tiền đã thanh toán và tra cứu toàn bộ lịch sử các giao dịch đã thực hiện.

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

Chương 1: Tổng quan về đề tài

Chương 1 hệ thống hóa các kiến thức nền tảng về công nghệ phát triển web phía máy khách (Front-End) và phía máy chủ (Back-End):

  • Phần Front-End: Trình bày vai trò của HTML5 trong việc tạo cấu trúc tài liệu; CSS trong việc tách biệt định dạng hiển thị giúp mã nguồn gọn gàng, hỗ trợ bảo trì; JavaScript với chuẩn ECMAScript 12 trong việc tạo tính tương tác trên giao diện.
  • Phần Back-End: Giới thiệu hệ quản trị cơ sở dữ liệu quan hệ Microsoft SQL Server với khả năng lưu trữ quy mô lớn, hỗ trợ T-SQL; giới thiệu mẫu thiết kế Model - View - Controller (MVC) trong không gian tên System.Web.Mvc, phân tích ưu thế về tính gọn nhẹ và khả năng kiểm thử so với mô hình ASP.NET Web Forms truyền thống.

Chương 2: Thiết kế cơ sở dữ liệu

Chương 2 mô tả chi tiết cấu trúc dữ liệu của dự án với cơ sở dữ liệu mang tên DD:

  • Định nghĩa chi tiết các thuộc tính, kiểu dữ liệu và ràng buộc khóa cho 5 bảng: infophone (10 trường), brand (3 trường), Customer (3 trường), bill (5 trường), Billdetail (6 trường).
  • Xây dựng khung nhìn View giohang thông qua phép kết nối giữa Billdetail và infophone để truy xuất tự động trường hình ảnh (ANH) và đơn giá (GIA).
  • Thiết lập sơ đồ quan hệ toàn vẹn dữ liệu với các khóa ngoại liên kết giữa thương hiệu, sản phẩm, khách hàng và chi tiết đơn hàng.

Chương 3: Giao diện website

Chương 3 tập trung vào quy trình hiện thực hóa các chức năng của ứng dụng:

  • Trình bày 5 bước cấu hình kết nối cơ sở dữ liệu bằng ADO.NET Entity Data Model để sinh tệp .edmx.
  • Quy trình khởi tạo phân hệ quản trị Areas/Admin, ứng dụng cơ chế Scaffolding để sinh mã tự động cho Controller và View.
  • Giải pháp kỹ thuật xử lý tải tệp tin ảnh thông qua multipart/form-data và sử dụng biến Session để duy trì đường dẫn ảnh khi chỉnh sửa dữ liệu.
  • Thiết kế bố cục giao diện dùng chung với _layout.cshtml, giải thích cơ chế @RenderBody(), cấu trúc Header/Footer và lưu ý về việc không sử dụng Partial View trong phạm vi bài toán.
  • Trình bày chi tiết giao diện và luồng hoạt động của 15 trang chức năng phía người dùng: Index, Category, Allsp, Listsp, Errorsearch, Cart, Detail, Login, Register, Cusinfo, Editaccount, Trashis, cùng các thông báo điều kiện xác thực.

Chương 4: Kết luận

Chương 4 tổng kết các hạng mục đã hoàn thành của đồ án chuyên ngành, đánh giá mức độ đáp ứng mục tiêu đề ra về mặt giao diện, cơ sở dữ liệu và khả năng quản lý danh mục sản phẩm di động.

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

Kết quả chính

  • Xây dựng hoàn chỉnh cơ sở dữ liệu quan hệ DD gồm 5 bảng và 1 view kết hợp, thiết lập đầy đủ các quan hệ khóa ngoại bảo đảm toàn vẹn tham chiếu.
  • Triển khai thành công phân hệ Quản trị (Areas/Admin) với đầy đủ các thao tác CRUD trên danh mục điện thoại, đồng thời thiết lập cơ chế kiểm soát truy cập và bảo vệ dữ liệu (ẩn bớt số điện thoại khách hàng, chặn xóa/sửa hóa đơn đã thanh toán).
  • Hoàn thiện phân hệ Khách hàng với 15 giao diện chức năng, đáp ứng các luồng nghiệp vụ: duyệt danh mục theo hãng, lọc nâng cao theo cấu hình phần cứng (RAM, ROM, màn hình), tìm kiếm theo chuỗi ký tự bằng Contains, quản lý giỏ hàng, xác thực tài khoản và theo dõi lịch sử đơn hàng.

Giải pháp kỹ thuật tác giả đề xuất

  • Xử lý vấn đề mất dữ liệu hình ảnh khi cập nhật thông tin sản phẩm bằng cách lưu đường dẫn ảnh hiện tại vào biến Session trong Controller, tránh việc ghi đè giá trị null vào cơ sở dữ liệu nếu quản trị viên không chọn tệp mới.
  • Thiết kế khung nhìn View giohang độc lập để tự động hóa việc tính toán thành tiền (SL * GIA) và truy xuất trực tiếp dữ liệu hình ảnh từ bảng infophone mà không cần viết các câu truy vấn kết nối phức tạp ở tầng ứng dụng.

Đóng góp tự nêu

  • Cung cấp một mô hình ứng dụng web mẫu hoàn chỉnh viết bằng C# ASP.NET MVC 5 kết hợp Entity Framework Database-First, minh họa rõ ràng cách tổ chức kiến trúc phần mềm, phân chia Areas và tương tác cơ sở dữ liệu cho bài toán bán lẻ trực tuyến.

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

Hạn chế

  • Hệ thống chưa áp dụng thành phần Partial View để tái sử dụng các khối giao diện lặp lại giữa các trang (như tác giả đã ghi nhận trong Chương 3).
  • Cơ chế xác thực người dùng được thiết kế ở mức độ cơ bản (đăng nhập trực tiếp bằng số điện thoại, chưa tích hợp mã hóa mật khẩu hoặc xác thực hai yếu tố).
  • Mặc dù mục tiêu đề ra có bao gồm tích hợp thanh toán trực tuyến, nhưng trong phần triển khai thực tế, hệ thống mới chỉ quản lý trạng thái thanh toán thông qua trường kiểu bit (THANHTOAN) trong bảng bill chứ chưa tích hợp cổng thanh toán trực tuyến của bên thứ ba.

Hướng nghiên cứu tiếp

  • Tái cấu trúc giao diện để ứng dụng Partial View, giúp tối ưu hóa mã nguồn và tăng tính tái sử dụng.
  • Nâng cấp hệ thống bảo mật tài khoản người dùng, tích hợp các cơ chế xác thực nâng cao.
  • Mở rộng chức năng thanh toán trực tuyến qua các cổng thanh toán điện tử thực tế.

Giá trị tham khảo

Tài liệu đồ án này có giá trị tham khảo thiết thực cho:

  • Sinh viên các ngành Công nghệ thông tin, Kỹ thuật phần mềm, Khoa học máy tính đang thực hiệ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ử với nền tảng .NET Framework.
  • Người học lập trình cần tài liệu tham khảo từng bước về:
    • Quy trình kết nối cơ sở dữ liệu SQL Server với ASP.NET MVC thông qua ADO.NET Entity Data Model (.edmx).
    • Cách thiết lập và phân quyền khu vực quản trị (Areas/Admin) sử dụng kỹ thuật Scaffolding của Entity Framework.
    • Kỹ thuật xử lý tải lên tập tin hình ảnh (multipart/form-data) và kỹ thuật duy trì dữ liệu trường ảnh bằng Session.

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

1. Đồ án sử dụng phương pháp kết nối dữ liệu nào giữa SQL Server và ASP.NET MVC?

Hệ thống sử dụng công cụ ADO.NET Entity Data Model theo hướng tiếp cận Database-First. Tác giả tạo cơ sở dữ liệu DD trước trên SQL Server, sau đó tạo tệp ánh xạ .edmx trong thư mục Models thông qua công cụ EF Designer from database của Visual Studio.

2. Tác giả đã giải quyết lỗi mất ảnh khi chỉnh sửa (Edit) sản phẩm di động như thế nào?

Khi người dùng thực hiện thao tác Edit mà không tải tệp ảnh mới lên, giá trị của cột ANH có nguy cơ bị gán về null. Tác giả khắc phục vấn đề này bằng cách lưu trữ đường dẫn ảnh cũ vào biến Session trong ASP.NET MVC, giúp giữ nguyên ảnh cũ nếu không có tệp mới được tải lên.

3. Những biện pháp bảo mật nào được áp dụng trên giao diện quản lý khách hàng và hóa đơn của Admin?

Trên trang quản lý khách hàng (Customer/Index), hệ thống chỉ hiển thị 3 số cuối của số điện thoại và loại bỏ các nút Edit, Delete để bảo vệ thông tin cá nhân. Trên trang quản lý hóa đơn (Bill/Index), hệ thống không cung cấp tính năng sửa hoặc xóa dữ liệu nhằm bảo toàn tính toàn vẹn của lịch sử giao dịch.

4. Thuật ngữ Partial View được tác giả đề cập như thế nào trong bài?

Tác giả định nghĩa Partial View là một view con có thể tái sử dụng trong nhiều view khác nhằm loại bỏ trùng lặp mã nguồn. Tuy nhiên, tác giả ghi rõ trong thuyết minh rằng trong đồ án này không sử dụng Partial View.

5. Cơ chế tìm kiếm sản phẩm theo từ khóa được hiện thực bằng phương thức nào?

Tại trang Listsp, chức năng tìm kiếm sản phẩm theo ký tự người dùng nhập vào thanh tìm kiếm được hiện thực bằng phương thức Contains trong mã nguồn C#, cho phép lọc tất cả sản phẩm có tên chứa ký tự tương ứng.

Kết luận

Đồ án "Thiết kế website động quản lí di động" của sinh viên Ngô Nguyễn Đan Trường đã hoàn thành việc xây dựng một hệ thống website thương mại điện tử hoàn chỉnh dựa trên mô hình ASP.NET MVC và cơ sở dữ liệu Microsoft SQL Server. Công trình đã hiện thực hóa đầy đủ cấu trúc cơ sở dữ liệu gồm 5 bảng và 1 view, thiết lập phân hệ quản trị Areas/Admin với các xử lý nghiệp vụ về dữ liệu hình ảnh, đồng thời xây dựng hệ thống 15 giao diện người dùng phục vụ tra cứu, lọc cấu hình và đặt hàng. Tài liệu phản ánh chi tiết các bước triển khai kỹ thuật từ thiết kế dữ liệu, cấu hình ánh xạ thực thể đến xây dựng giao diện, đóng vai trò là một tài liệu tham khảo học thuật rõ ràng cho sinh viên chuyên ngành công nghệ thông tin.