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

Tính đến đầu năm 2019, Việt Nam có hơn 60 triệu người sử dụng internet, chiếm hơn 60% dân số. Trong bối cảnh kinh tế cạnh tranh và thời đại 4.0, môi trường internet trở thành kênh tiếp cận khách hàng tiềm năng quan trọng. Hầu hết doanh nghiệp đều sở hữu website để quảng bá thương hiệu, từ các tập đoàn lớn như Samsung đến các công ty vừa và nhỏ. Tuy nhiên, nhiều doanh nghiệp vừa và nhỏ chưa có nền tảng trực tuyến bài bản, dẫn đến hạn chế trong tiếp thị và kết nối khách hàng.

Mục đích nghiên cứu: Xây dựng website giới thiệu công ty Viko nhằm đưa đến khách hàng những hình ảnh, thông tin đầy đủ và rõ nét về công ty, tạo thêm ưu thế trên môi trường marketing.

Nhiệm vụ nghiên cứu:

  1. Tìm hiểu cơ sở lý thuyết về công nghệ phát triển website.
  2. Khảo sát thực tế nhu cầu và tham khảo các website tương tự.
  3. Xây dựng mô hình chức năng, ràng buộc hệ thống.
  4. Lập trình và hoàn thiện website.

Đối tượng nghiên cứu: Website giới thiệu công ty (lấy tên Viko), phục vụ hai nhóm người dùng là Admin và Guest.

Phạm vi: Đồ án được thực hiện từ ngày 02/03/2020 đến ngày 10/05/2020, tại Trường Đại học Bà Rịa – Vũng Tàu, chuyên ngành Công nghệ Thông tin (Máy tính), khóa 2016–2020.


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

Khung công nghệ

Đồ án sử dụng bộ công nghệ web gồm các thành phần sau:

Công nghệ Vai trò
HTML, CSS Cấu trúc và định dạng giao diện trang web
JavaScript Xử lý logic phía client, tương tác người dùng
Bootstrap Front-end framework hỗ trợ responsive design, tương thích đa trình duyệt
jQuery Thư viện JavaScript (~19KB), hỗ trợ thao tác DOM, xử lý sự kiện
Ajax (Asynchronous JavaScript and XML) Giao tiếp bất đồng bộ với server, cập nhật nội dung không cần tải lại trang
PHP Ngôn ngữ lập trình phía server, cài đặt trên hơn 20 triệu website và 1 triệu máy chủ web
Laravel Framework PHP mã nguồn mở, kiến trúc MVC, phát hành lần đầu ngày 9/6/2011, do Taylor Otwell phát triển

Kiến trúc hệ thống tuân theo mô hình MVC (Model – View – Controller) trong Laravel, sử dụng Blade template để tách biệt mã hiển thị và mã logic nghiệp vụ, công cụ dòng lệnh Artisan để tối ưu hóa, migrate dữ liệu và tạo các thành phần ứng dụng, và cơ chế bảo mật CSRF tokens cho mỗi POST request.

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

Đồ án kết hợp hai phương pháp:

  • Phân tích lý thuyết: Nghiên cứu tài liệu về các công nghệ web (HTML/CSS/JS, Bootstrap, jQuery, Ajax, PHP, Laravel).
  • Khảo sát thực tế: Phân tích hiện trạng nhu cầu website doanh nghiệp và khảo sát website tương tự (tandaithanh.net — website cung cấp các loại cửa kính) để xác định chức năng, bố cục và trải nghiệm người dùng cần thiết.

Nguồn dữ liệu

Dữ liệu được tổ chức trong cơ sở dữ liệu quan hệ gồm 9 bảng do tác giả thiết kế: tai_khoans, infoct, thanhpham, baogia, sanpham, loaisanpham, loaisanpham_sanpham, hinhsanpham, nhanxet.


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

Chương 1: Cơ sở lý thuyết và khảo sát

Chương này trình bày nền tảng công nghệ được lựa chọn, bao gồm lý do sử dụng từng công nghệ (Bootstrap, jQuery, Ajax, Laravel, PHP). Tác giả so sánh PHP với ASP — hai ngôn ngữ phổ biến trong phát triển web động — và phân tích các phiên bản Laravel tính đến tháng 4 năm 2020. Phần khảo sát phân tích chi tiết website tandaithanh.net theo cấu trúc từng trang: trang chủ (logo, thanh điều hướng, slide hình ảnh sản phẩm, danh mục sản phẩm, tin tức, công trình tiêu biểu, chân trang), trang sản phẩm, trang báo giá, trang tin tức và trang công trình đã hoàn thiện. Kết quả khảo sát được sử dụng làm cơ sở xác định chức năng và giao diện cho website Viko.

Chương 2: Tổng quan chức năng website

Chương này định nghĩa quan điểm sản phẩm (giao diện thân thiện, dễ sử dụng, bảo mật cao), danh sách chức năng tổng thể và phân loại người dùng:

  • Admin: Quản lý toàn bộ tin đăng (xem, thêm, sửa, xóa), nhận thông báo yêu cầu từ khách hàng, quản lý tài khoản cá nhân (cập nhật thông tin, đổi mật khẩu).
  • Guest: Xem tin, tìm kiếm sản phẩm, lọc sản phẩm, đăng nhận xét, gửi yêu cầu báo giá.

Các ràng buộc hệ thống được nêu rõ: Guest chỉ thực hiện được 5 chức năng và không thể truy cập các tính năng quản trị.

Chương 3: Yêu cầu chức năng website

Chương liệt kê 9 nhóm chức năng cụ thể với mô tả chi tiết từng yêu cầu:

  1. Xem tin theo từng loại chủ đề
  2. Tìm kiếm sản phẩm qua từ khóa
  3. Lọc sản phẩm theo loại
  4. Gửi yêu cầu nhận báo giá dạng tin nhắn
  5. Nhận xét bài viết về sản phẩm (công khai)
  6. Đăng nhập / đăng xuất (dành cho Admin)
  7. Quản lý tin đăng (xem, thêm, sửa, xóa)
  8. Nhận thông báo yêu cầu từ khách hàng dạng hộp thư
  9. Quản lý thông tin tài khoản admin

Chương 4: Mô hình UseCase

Chương xây dựng bảng tác nhân và quyền hạn (Bảng 4.1) và bảng yêu cầu chức năng hệ thống (Bảng 4.3) với ký hiệu UC từ UC_1.1 đến UC_8.3. Lược đồ tổng quan UseCase (Hình 4.1) thể hiện mối quan hệ giữa hai tác nhân Admin và Guest với toàn bộ các use case. Phần chi tiết các use case (Bảng 4.3, trang 31–58) mô tả từng use case theo cấu trúc: ID, Name, Goal, Actors, Pre-conditions, Post-conditions, Basic flow (thành công), Alternative flow (thất bại) và Extension.

Ví dụ UC_1.1 (Đăng nhập): Hệ thống yêu cầu tên đăng nhập và mật khẩu, so sánh với dữ liệu mã hóa trong Database; nếu sai, trả về thông báo "Tên Đăng Nhập Hoặc Mật Khẩu Không Đúng".

Chương 5: Thiết kế website

Chương trình bày ba nội dung lớn:

Thiết kế cơ sở dữ liệu: Lược đồ CSDL (Hình 5.1) gồm 9 bảng với chi tiết các trường (Bảng 5.1–5.9) và mối quan hệ giữa các bảng.

Thiết kế giao diện Front-End: Bao gồm trang chủ (slide sản phẩm nổi bật, mục giới thiệu, tiêu chí hoạt động, dự án đã thực hiện, phản hồi khách hàng, liên hệ), trang danh sách sản phẩm với bộ lọc, trang chi tiết sản phẩm (bài viết, nhận xét, sản phẩm cùng loại), trang danh sách dự án và chi tiết dự án.

Lập trình Back-End với Laravel: Giao diện quản trị Admin bao gồm trang đăng nhập, dashboard, quản lý loại sản phẩm (thêm/danh sách/sửa), quản lý sản phẩm (thêm/danh sách/sửa), quản lý dự án đã thực hiện (thêm/danh sách/sửa), cập nhật thông tin công ty, danh sách yêu cầu báo giá, quản lý tài khoản và trang báo lỗi 404. Phần cuối chương trình bày một số đoạn code nổi bật (trang 156–158).


Thiết kế và triển khai

Kiến trúc hệ thống

Website được xây dựng theo mô hình MVC trong Laravel, trong đó:

  • Model tương tác với cơ sở dữ liệu quan hệ gồm 9 bảng.
  • View sử dụng Blade template, kết hợp HTML/CSS/Bootstrap để render giao diện.
  • Controller xử lý logic nghiệp vụ và điều phối dữ liệu giữa Model và View.
  • Routes định tuyến URL đến đúng Controller tương ứng.

Công nghệ sử dụng

Tầng Công nghệ
Front-End HTML, CSS, JavaScript, Bootstrap, jQuery, Ajax
Back-End PHP, Laravel (framework MVC)
Template Engine Blade template
Bảo mật CSRF tokens, Middleware
CLI Artisan (migrate, optimize, tạo template/controller)
Quản lý gói Webpack, npm/yarn

Cơ sở dữ liệu

Gồm 9 bảng quan hệ:

Bảng Nội dung
tai_khoans Thông tin tài khoản Admin
infoct Thông tin công ty
sanpham Dữ liệu sản phẩm
loaisanpham Danh mục loại sản phẩm
loaisanpham_sanpham Bảng trung gian nhiều-nhiều giữa loại và sản phẩm
hinhsanpham Hình ảnh sản phẩm
thanhpham Dự án đã thực hiện
baogia Yêu cầu báo giá từ khách hàng
nhanxet Nhận xét bài viết sản phẩm

Phân quyền và bảo mật

Hệ thống phân biệt hai nhóm người dùng. Admin xác thực qua trang đăng nhập với mật khẩu mã hóa trong Database; sau khi đăng xuất, không thể truy cập trang quản trị qua URL nếu chưa đăng nhập lại. Bảo mật POST request được thực hiện qua CSRF tokens tích hợp sẵn trong Laravel.


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

Kết quả chính:

  • Hoàn thiện website giới thiệu công ty Viko với giao diện đẹp mắt, bố cục đơn giản.
  • Tích hợp đầy đủ 9 nhóm chức năng theo đặc tả ban đầu, bao gồm 5 chức năng dành cho Guest và 4 chức năng dành riêng cho Admin.
  • Hệ thống quản trị (Admin panel) cho phép thực hiện các thao tác CRUD (xem, thêm, sửa, xóa) trên toàn bộ nội dung website.
  • Trang chi tiết sản phẩm tích hợp chức năng nhận xét công khai và hiển thị sản phẩm cùng loại liên quan.
  • Hệ thống gửi và nhận yêu cầu báo giá hoạt động qua mẫu đơn, thông báo đến Admin dưới dạng hộp thư.

Giải pháp và kiến nghị của tác giả:

  • Sử dụng Laravel làm framework chính để đảm bảo kiến trúc thống nhất, bảo mật và dễ mở rộng.
  • Ứng dụng Ajax để cải thiện trải nghiệm người dùng thông qua cập nhật nội dung không cần tải lại trang.
  • Sử dụng Bootstrap nhằm đảm bảo giao diện responsive, tương thích đa thiết bị và đa trình duyệt.

Đóng góp so với trước: Đồ án cung cấp quy trình đầy đủ và thực tiễn từ khảo sát, phân tích yêu cầu, thiết kế CSDL, đến lập trình và hoàn thiện sản phẩm — phù hợp làm mẫu tham khảo cho sinh viên xây dựng website giới thiệu doanh nghiệp quy mô vừa và nhỏ.


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

Tác giả thừa nhận trong lời cảm ơn rằng do thời gian thực hiện ngắn (02/03/2020 – 10/05/2020, khoảng 10 tuần) và năng lực còn hạn chế, đồ án không tránh khỏi những thiếu sót.

Dựa trên phạm vi đề tài, một số hướng mở rộng có thể xem xét:

  • Bổ sung chức năng thanh toán trực tuyến hoặc đặt hàng trực tiếp trên website.
  • Phát triển thêm tính năng thống kê lượt truy cập, phân tích hành vi người dùng cho Admin.
  • Tối ưu hóa hiệu suất, bổ sung cache và cải thiện SEO cho website.
  • Mở rộng quyền quản trị đa cấp thay vì chỉ có một tài khoản Admin duy nhất.

Giá trị tham khảo

Đồ án phù hợp để tham khảo cho các đối tượng sau:

  • Sinh viên ngành Công nghệ Thông tin đang học hoặc thực hiện đồ án về phát triển web, đặc biệt những người mới tiếp cận Laravel và PHP — có thể tham khảo Chương 1 (cơ sở lý thuyết công nghệ) và Chương 5 (thiết kế CSDL và lập trình Back-End).
  • Sinh viên làm đề tài tương tự về website giới thiệu doanh nghiệp có thể sử dụng mô hình UseCase (Chương 4) và bảng yêu cầu chức năng (Chương 3) làm mẫu phân tích hệ thống.
  • Người mới bắt đầu học Laravel có thể tham khảo phần lý do chọn công nghệ (Chương 1) và đoạn code nổi bật (Chương 5, trang 156–158) để hiểu cách áp dụng framework trong dự án thực tế.
  • Doanh nghiệp vừa và nhỏ muốn nắm bắt quy trình và chi phí phát triển website giới thiệu công ty có thể tham khảo bản đặc tả chức năng và thiết kế giao diện.

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

1. Website Viko hỗ trợ những chức năng nào cho người dùng không đăng nhập (Guest)? Guest thực hiện được đúng 5 chức năng: xem tin, tìm kiếm sản phẩm qua từ khóa, lọc sản phẩm theo loại, đăng nhận xét bài viết về sản phẩm (nhập tên và nội dung), và gửi yêu cầu nhận báo giá (nhập họ tên, số điện thoại, địa chỉ, nội dung). Guest không thể truy cập bất kỳ chức năng quản trị nào.

2. Laravel được chọn dựa trên những tiêu chí nào so với các lựa chọn khác? Tác giả nêu sáu lý do: hỗ trợ mô hình MVC mạnh mẽ với Routes định tuyến URL; Blade template giúp tách biệt mã hiển thị và logic nghiệp vụ; công cụ Artisan hỗ trợ migrate, tối ưu hóa và tạo template; bảo mật qua CSRF tokens và Middleware; tích hợp Webpack với npm/yarn để tự động hóa build; và cộng đồng lớn trên Laracast cùng tài liệu do chính Taylor Otwell biên soạn.

3. Cơ sở dữ liệu của website Viko gồm những bảng nào và mối quan hệ ra sao? CSDL gồm 9 bảng: tai_khoans, infoct, thanhpham, baogia, sanpham, loaisanpham, loaisanpham_sanpham, hinhsanpham, nhanxet. Bảng loaisanpham_sanpham đóng vai trò bảng trung gian thể hiện mối quan hệ nhiều-nhiều giữa loại sản phẩm và sản phẩm. Lược đồ CSDL và các mối quan hệ được trình bày tại Hình 5.1 và Hình 5.3 (Chương 5).

4. Quy trình Admin nhận và xử lý yêu cầu báo giá từ khách hàng diễn ra như thế nào? Theo UC_5.1: Guest nhấn nút "Nhận Báo Giá", điền mẫu đơn (họ tên, số điện thoại, địa chỉ, nội dung), sau đó nhấn xác nhận. Hệ thống chuyển yêu cầu đến trang quản trị Admin và trả về thông báo "Đăng ký nhận báo giá thành công" cho người gửi. Admin truy cập trang "Danh sách yêu cầu báo giá" (Hình 5.32) để xem và xử lý các yêu cầu, với thông báo yêu cầu mới được hiển thị dạng hộp thư (UC_7.1).

5. Website tham khảo nào được phân tích trong quá trình khảo sát và những điểm nào được áp dụng vào Viko? Tác giả phân tích tandaithanh.net — website cung cấp các loại cửa kính — theo từng trang (trang chủ, trang sản phẩm, trang báo giá, trang tin tức, trang công trình đã hoàn thiện). Các điểm được đúc kết và áp dụng cho Viko gồm: bố cục slide hình ảnh sản phẩm trên trang chủ, mẫu gửi yêu cầu báo giá, trang danh mục sản phẩm với bộ lọc, trang chi tiết hiển thị sản phẩm tương tự, và trang danh sách công trình/dự án đã hoàn thiện.


Kết luận

Đồ án tốt nghiệp của sinh viên Phan Tiến Đạt (Trường Đại học Bà Rịa – Vũng Tàu, niên khóa 2016–2020) trình bày toàn bộ quy trình xây dựng website giới thiệu công ty Viko, từ nghiên cứu lý thuyết, khảo sát thực tế, phân tích yêu cầu và mô hình hóa UseCase, đến thiết kế cơ sở dữ liệu và lập trình hoàn chỉnh với bộ công nghệ PHP/Laravel, Bootstrap, jQuery và Ajax. Sản phẩm đáp ứng đầy đủ các mục tiêu ban đầu với 9 nhóm chức năng cho hai loại người dùng (Admin và Guest), giao diện responsive và hệ thống quản trị nội dung. Đồ án có giá trị tham khảo cho sinh viên Công nghệ Thông tin trong việc nắm bắt cách áp dụng kiến trúc MVC và quy trình phát triển web thực tế theo hướng dự án doanh nghiệp vừa và nhỏ.