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

Đồ án tốt nghiệp "Thiết kế và lập trình Website" do sinh viên Phan Tiến Đạt thực hiện dưới sự hướng dẫn của ThS. Nguyễn Lan Hương tại Trường Đại học Bà Rịa – Vũng Tàu (Khoa Công nghệ Kỹ thuật – Nông nghiệp Công nghệ cao, chuyên ngành Máy tính, khóa 2016 – 2020).

Bối cảnh thực tiễn được tác giả xác định dựa trên số liệu thống kê tính đến đầu năm 2019: Việt Nam có hơn 60 triệu người sử dụng Internet, chiếm trên 60% dân số. Môi trường mạng Internet trở thành không gian tiếp cận khách hàng tiềm năng đối với các tổ chức và doanh nghiệp. Trong bối cảnh chuyển đổi số và cạnh tranh thị trường, các thương hiệu lớn (như samsung.vn) cũng như các doanh nghiệp vừa và nhỏ đều chú trọng xây dựng cổng thông tin điện tử để khẳng định thương hiệu và truyền thông tiếp thị.

Mục tiêu nghiên cứu và phát triển của đề tài bao gồm:

  1. Thiết kế và lập trình hệ thống website giới thiệu, quảng bá hình ảnh doanh nghiệp (áp dụng cho mô hình doanh nghiệp giả định mang tên Viko).
  2. Xây dựng không gian trực tuyến cung cấp đầy đủ thông tin về các dòng sản phẩm, dự án và tin tức hoạt động để người dùng thuận tiện tra cứu, tương tác.
  3. Cung cấp phân hệ quản trị nội dung (Admin) hoàn chỉnh, hỗ trợ doanh nghiệp quản lý bài đăng, thông tin tài khoản và tiếp nhận yêu cầu từ khách hàng.

Nhiệm vụ nghiên cứu được phân định thành 4 giai đoạn nối tiếp:

  1. Nghiên cứu tổng quan cơ sở lý thuyết về các công nghệ, ngôn ngữ và nền tảng phát triển ứng dụng web.
  2. Khảo sát thực tế nhu cầu thị trường và phân tích chi tiết website tương tự đang vận hành (điển hình là tandaithanh.net).
  3. Xây dựng mô hình chức năng, xác định đối tượng người dùng, thiết lập các ràng buộc hệ thống và sơ đồ Use Case.
  4. Thiết kế cơ sở dữ liệu quan hệ, thiết kế giao diện phía người dùng (Front-End) và lập trình xử lý logic hệ thống phía máy chủ (Back-End).

Đối tượng nghiên cứu là hệ thống website giới thiệu doanh nghiệp và quản trị thông tin nội bộ. Phạm vi không gian và địa bàn nghiên cứu gắn liền với đề tài tốt nghiệp ngành Công nghệ Thông tin tại Trường Đại học Bà Rịa – Vũng Tàu. Phạm vi thời gian thực hiện kéo dài từ ngày 02/03/2020 đến ngày 10/05/2020.

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

Đồ án tổng hợp nền tảng công nghệ xây dựng website toàn diện, kết hợp giữa các chuẩn phát triển giao diện và kiến trúc phía máy chủ:

  • Bộ ba nền tảng Front-End: HTML (ngôn ngữ đánh dấu cấu trúc tài liệu web), CSS (ngôn ngữ định dạng bảng kiểu hiển thị bố cục, màu sắc, phông chữ) và JavaScript (ngôn ngữ kịch bản hướng đối tượng hỗ trợ xử lý tương tác động phía trình duyệt).
  • Framework và thư viện hỗ trợ Front-End:
    • Bootstrap: Framework giao diện hỗ trợ thiết kế web tương thích đa thiết bị (Responsive Design) trên các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari, Opera).
    • jQuery: Thư viện JavaScript dung lượng gọn nhẹ (~19KB), tích hợp bộ định vị Sizzle để duyệt DOM, đơn giản hóa xử lý sự kiện và hoạt họa (animation).
    • Kỹ thuật Ajax (Asynchronous JavaScript and XML): Cơ chế gửi và nhận dữ liệu bất đồng bộ giữa máy trạm và máy chủ, cho phép cập nhật từng phần trang web mà không cần tải lại toàn bộ trang (minh họa qua ví dụ xếp hạng phim của Netflix).
  • Ngôn ngữ và Framework Back-End:
    • PHP (PHP: Hypertext Preprocessor): Ngôn ngữ kịch bản phía máy chủ do Rasmus Lerdorf khởi xướng năm 1994, có cú pháp tương đồng ngôn ngữ C, hỗ trợ kết nối nhiều hệ quản trị cơ sở dữ liệu (MySQL, PostgreSQL, Oracle, Sybase, Informix, Microsoft SQL Server). Văn bản trích dẫn dữ liệu thống kê PHP được cài đặt trên khoảng 20 triệu website và 1 triệu máy chủ web.
    • Laravel Framework: Framework PHP mã nguồn mở theo mô hình MVC do Taylor Otwell phát triển (phát hành lần đầu ngày 09/06/2011). Laravel tích hợp công cụ dòng lệnh Artisan, công cụ kết xuất giao diện Blade Template, quản lý phụ thuộc qua Webpack, NPM, Yarn, cùng cơ chế bảo mật xác thực thẻ token CSRF và lớp lọc trung gian Middleware.
Công nghệ / Thành phần Bản chất kỹ thuật Vai trò trong hệ thống Viko
HTML / CSS / JavaScript Ngôn ngữ đánh dấu, định kiểu và kịch bản cơ bản Xây dựng khung hiển thị, tạo kiểu và hiệu ứng tương tác giao diện
Bootstrap Front-end Framework Đảm bảo tính đáp ứng (Responsive) trên màn hình máy tính và di động
jQuery & Ajax Thư viện kịch bản và kỹ thuật gọi bất đồng bộ Xử lý sự kiện DOM, gửi dữ liệu nhận xét và yêu cầu báo giá ngầm
PHP & Laravel Ngôn ngữ máy chủ và Framework MVC Xử lý logic nghiệp vụ, định tuyến URL, bảo mật CSRF và kiểm soát dữ liệu
MySQL Database Hệ quản trị cơ sở dữ liệu quan hệ Lưu trữ cấu trúc danh mục, sản phẩm, dự án, tài khoản và phản hồi

Phương pháp nghiên cứu được triển khai bao gồm:

  • Phương pháp phân tích – tổng hợp tài liệu: Hệ thống hóa lý thuyết về mô hình MVC, cơ chế hoạt động của Web Server và các chuẩn phát triển web.
  • Phương pháp khảo sát đối sánh (Benchmarking): Khảo sát cấu trúc thực tế của website doanh nghiệp tương tự trong ngành cung cấp cửa kính (tandaithanh.net), bóc tách các khối chức năng: trang chủ, slide giới thiệu, danh mục sản phẩm, trang chi tiết báo giá, danh sách công trình hoàn thiện và biểu mẫu liên hệ.
  • Phương pháp mô hình hóa hướng đối tượng (UML/Use Case): Đặc tả các kịch bản tương tác người dùng, định danh tác nhân, xây dựng biểu đồ Use Case và bảng ràng buộc logic.
  • Phương pháp thiết kế hệ thống phần mềm: Thiết kế lược đồ cơ sở dữ liệu quan hệ và lập trình thử nghiệm chức năng.

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình kiến trúc MVC (Model – View – Controller) của framework Laravel, phân tách mạch lạc giữa tầng dữ liệu, tầng hiển thị và tầng điều khiển luồng:

[Trình duyệt Người dùng] <---> [Định tuyến (Routes)] <---> [Controller]
                                                                |
           +----------------------------------------------------+
           |                                                    |
           v                                                    v
[Model & Cơ sở dữ liệu MySQL]                           [Blade View / HTML]

Cơ sở dữ liệu hệ thống

Cơ sở dữ liệu được tổ chức thành 9 bảng dữ liệu có quan hệ logic chặt chẽ:

  1. tai_khoans: Quản lý thông tin định danh, mật khẩu mã hóa và quyền hạn quản trị của Admin.
  2. infoct: Lưu trữ thông tin giới thiệu chung, địa chỉ, số điện thoại, tiêu chí hoạt động của công ty.
  3. thanhpham: Lưu trữ danh mục các thành phẩm hoặc dự án công trình đã hoàn thành.
  4. baogia: Lưu trữ các bảng tin và đơn giá phục vụ việc công bố thông tin báo giá.
  5. sanpham: Lưu trữ thông tin chi tiết của từng sản phẩm (tên, mã, quy cách, bài viết mô tả).
  6. loaisanpham: Quản lý danh mục phân loại sản phẩm.
  7. loaisanpham_sanpham: Bảng trung gian thiết lập mối quan hệ nhiều - nhiều giữa loại sản phẩm và sản phẩm.
  8. hinhsanpham: Quản lý danh sách đường dẫn hình ảnh đại diện và hình ảnh chi tiết của sản phẩm.
  9. nhanxet: Lưu trữ các phản hồi, bình luận và họ tên của khách hàng đối với từng bài viết sản phẩm.

Phân quyền tác nhân và luồng Use Case

Hệ thống xác định hai nhóm tác nhân chính:

  • Khách vãng lai (Guest): Thực hiện xem thông tin công ty, tra cứu sản phẩm theo từ khóa, lọc sản phẩm theo danh mục, gửi bình luận nhận xét công khai và điền biểu mẫu gửi yêu cầu báo giá trực tiếp.
  • Quản trị viên (Admin): Sở hữu toàn quyền kiểm soát hệ thống, bao gồm đăng nhập/đăng xuất bằng tài khoản mã hóa, quản lý nội dung tin đăng (thêm, sửa, xóa sản phẩm và dự án), cập nhật thông tin công ty, xem danh sách thông báo yêu cầu báo giá và đổi mật khẩu quản trị.

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 tập trung trình bày tổng quan lý thuyết về các công nghệ cốt lõi cấu thành website: HTML, CSS, JavaScript, framework Bootstrap, thư viện jQuery, kỹ thuật Ajax, ngôn ngữ PHP và framework Laravel (lịch sử phát triển từ tên gọi Bootplant lấy cảm hứng từ lâu đài Cair Paravel trong tác phẩm Narnia, kiến trúc MVC, công cụ dòng lệnh Artisan, Blade template). Tác giả so sánh ưu thế của PHP với ASP về mặt hỗ trợ thư viện và độ phổ biến trên máy chủ.

Phần khảo sát hiện trạng phân tích sự bùng nổ internet tại Việt Nam và tiến hành khảo sát thực nghiệm website tandaithanh.net (doanh nghiệp sản xuất cửa nhôm kính). Phân tích chỉ ra cấu trúc chức năng của website tham chiếu gồm: trang chủ với slide hình ảnh, danh mục sản phẩm nhôm kính, bài đăng giới thiệu công trình (tại Tân Phú, Bình Thạnh, Quận 6), trang báo giá và biểu mẫu tiếp nhận thông tin yêu cầu. Đây là cơ sở để định hình chức năng cho website Viko.

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

Chương 2 xác lập quan điểm xây dựng sản phẩm: giao diện thân thiện, cấu trúc đơn giản, hỗ trợ tìm kiếm nhanh chóng và đảm bảo tính bảo mật. Văn bản xác định phạm vi chức năng của hệ thống gồm: xem tin, tìm kiếm, lọc sản phẩm, gửi yêu cầu báo giá, nhận xét bài viết, đăng nhập/đăng xuất, quản lý bài đăng, quản lý tài khoản quản trị và tiếp nhận danh sách liên hệ.

Hệ thống phân định ranh giới người dùng:

  • Admin: Phụ trách toàn quyền quản trị nội dung và xử lý thông tin nội bộ.
  • Guest: Người dùng bên ngoài chỉ được giới hạn ở 5 chức năng tương tác (xem tin, tìm kiếm, lọc, gửi nhận xét, gửi yêu cầu báo giá) và bị ngăn chặn hoàn toàn việc truy cập các liên kết dành cho quản trị.

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

Chương 3 đi vào đặc tả chi tiết 9 nhóm yêu cầu chức năng nghiệp vụ của hệ thống:

  1. Xem tin: Phân loại hiển thị theo từng chủ đề bài viết trên giao diện.
  2. Tìm kiếm sản phẩm: Tìm kiếm dữ liệu theo từ khóa nhập vào thanh công cụ.
  3. Lọc sản phẩm: Trích xuất danh sách sản phẩm theo danh mục loại đã chọn.
  4. Gửi yêu cầu nhận báo giá: Biểu mẫu cho phép khách hàng gửi tin nhắn yêu cầu chi tiết về hệ thống.
  5. Nhận xét bài viết về sản phẩm: Đăng tải ý kiến phản hồi công khai tại bài viết sản phẩm.
  6. Đăng nhập/đăng xuất: Kiểm soát phiên làm việc của Admin, ngăn chặn truy cập đường dẫn URL quản trị trái phép khi chưa xác thực.
  7. Quản lý tin đăng trên website: Cho phép Admin thực hiện đầy đủ 4 thao tác CRUD (Xem, Thêm, Sửa, Xóa) trên các bảng dữ liệu.
  8. Nhận thông báo yêu cầu từ khách hàng: Hiển thị danh sách và hộp thư cảnh báo yêu cầu báo giá mới từ khách.
  9. Quản lý thông tin tài khoản: Hỗ trợ quản trị viên cập nhật thông tin cá nhân và thay đổi mật khẩu hệ thống.

Chương 4: Mô hình Use Case

Chương này chuyển hóa các yêu cầu nghiệp vụ thành các sơ đồ và bảng đặc tả Use Case chuẩn tắc:

Nhóm chức năng hệ thống Tên yêu cầu chức năng Ký hiệu mã hóa Tác nhân thực hiện
Đăng nhập / Đăng xuất Đăng nhập hệ thống UC_1.1 Admin
Đăng xuất hệ thống UC_1.2 Admin
Xem tin đăng Xem các tin trên trang chủ UC_2.1 Guest, Admin
Xem chi tiết danh mục tin UC_2.2 Guest, Admin
Xem chi tiết tin đăng UC_2.3 Guest, Admin
Hiển thị tiêu đề tin liên quan UC_2.4 Guest, Admin
Tìm / Lọc sản phẩm Tìm kiếm sản phẩm UC_3.1 Guest, Admin
Lọc sản phẩm theo loại UC_3.2 Guest, Admin
Nhận xét bài đăng Đăng nhận xét phản hồi UC_4.1 Guest, Admin
Gửi yêu cầu báo giá Gửi thông tin đăng ký báo giá UC_5.1 Guest, Admin
Quản lý tài khoản Cập nhật thông tin tài khoản UC_6.1 Admin
Thay đổi mật khẩu UC_6.2 Admin
Nhận thông báo yêu cầu Nhận thông báo yêu cầu mới UC_7.1 Admin
Xem danh sách các yêu cầu UC_7.2 Admin
Xem chi tiết yêu cầu báo giá UC_7.3 Admin
Quản lý tin đăng Xem danh sách tin đăng UC_8.1 Admin
Thêm tin đăng mới UC_8.2 Admin
Sửa tin đăng hiện có UC_8.3 Admin
Xóa tin đăng khỏi hệ thống UC_8.3 Admin

Bên cạnh bảng tổng hợp, chương này trình bày chi tiết kịch bản tương tác (Flow of Events gồm Basic flow và Alternative flow/Failure) cho từng mã Use Case từ UC_1.1 đến UC_5.1.

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

Chương 5 mô tả toàn bộ kết quả hiện thực hóa sản phẩm phần mềm:

  • Thiết kế cơ sở dữ liệu: Trình bày chi tiết lược đồ CSDL, cấu trúc các trường (kiểu dữ liệu, khóa chính, khóa ngoại) và mối quan hệ giữa 9 bảng thực thể (Bảng 5.1 đến Bảng 5.9).
  • Thiết kế giao diện người dùng (Front-End): Hiện thực hóa đầy đủ các màn hình: Trang chủ (gồm thanh điều hướng, slide quảng bá, khối giới thiệu, khối sản phẩm nổi bật, tiêu chí hoạt động, khối dự án đã thực hiện, đánh giá từ khách hàng và khối liên hệ chân trang); Trang danh mục và lọc sản phẩm; Trang chi tiết sản phẩm tích hợp mục hiển thị sản phẩm cùng loại và khối gửi nhận xét; Trang danh sách dự án và chi tiết dự án; Trang hiển thị lỗi đường dẫn 404 (Not Found).
  • Lập trình quản trị (Back-End với Laravel): Hiện thực hóa giao diện đăng nhập Admin an toàn, bảng điều khiển tổng quan (Dashboard), các giao diện quản lý loại sản phẩm (thêm/sửa/danh sách), quản lý bài viết sản phẩm, quản lý dự án đã thực hiện, cập nhật thông tin doanh nghiệp, trang theo dõi danh sách yêu cầu báo giá từ khách hàng và trang chỉnh sửa thông tin tài khoản quản trị. Chương kết thúc bằng việc trích xuất các đoạn mã nguồn tiêu biểu trong hệ thống.

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

Đồ án ghi nhận các kết quả kỹ thuật cụ thể đã hoàn thành trong thời gian thực hiện:

  • Xây dựng thành công website hoàn chỉnh cho doanh nghiệp Viko trên nền tảng framework Laravel và cơ sở dữ liệu quan hệ MySQL.
  • Thiết kế hệ thống giao diện Front-End đáp ứng chuẩn bố cục, hỗ trợ đầy đủ các thao tác tra cứu, phân loại sản phẩm, đọc bài viết công trình và gửi phản hồi không tải lại trang nhờ tích hợp jQuery/Ajax.
  • Hiện thực hóa trang quản trị Back-End với đầy đủ các phân hệ xử lý dữ liệu nghiệp vụ (CRUD danh mục, sản phẩm, dự án, cấu hình thông tin công ty) và kiểm soát bảo mật thông qua mã hóa tài khoản, cơ chế CSRF token và phân quyền chặt chẽ giữa Guest và Admin.
  • Xây dựng hoàn chỉnh tài liệu đặc tả phần mềm gồm 9 bảng dữ liệu, 18 mã Use Case chi tiết và hệ thống sơ đồ ca sử dụng.

Về mặt đóng góp, đề tài cung cấp một quy trình mẫu về việc ứng dụng kiến trúc MVC và framework mã nguồn mở hiện đại vào bài toán tin học hóa hoạt động quảng bá, tiếp thị cho các doanh nghiệp quy mô vừa và nhỏ.

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

  • Hạn chế: Do thời gian thực hiện đồ án bị giới hạn (từ tháng 3 đến tháng 5 năm 2020) và năng lực thực tế của sinh viên, đồ án tập trung giải quyết bài toán giới thiệu, quảng bá thông tin và tiếp nhận liên hệ, chưa tích hợp phân hệ thương mại điện tử chuyên sâu (như giỏ hàng, đặt hàng trực tuyến, cổng thanh toán số). Hệ thống mới triển khai thử nghiệm trên môi trường cục bộ, chưa đo lường hiệu năng chịu tải dưới lưu lượng truy cập lớn.
  • Hướng nghiên cứu và phát triển tiếp: Tác giả định hướng tiếp tục hoàn thiện, bổ sung các chức năng bán hàng trực tuyến, tối ưu hóa giao diện người dùng và mở rộng các phân hệ phân tích hành vi khách hàng trên website.

Giá trị tham khảo

Đồ án là tài liệu kỹ thuật có giá trị thực tiễn đối với sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm và Hệ thống Thông tin đang thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về lập trình web.

Những nội dung có giá trị tham khảo chuyên môn cao bao gồm:

  • Quy trình phân rã yêu cầu chức năng và mô hình hóa Use Case chi tiết (Chương 3 và Chương 4).
  • Phương pháp khảo sát đối sánh một website thực tế ngoài thị trường để hình thành cấu trúc chức năng hệ thống (Chương 1).
  • Thiết kế lược đồ cơ sở dữ liệu quan hệ mẫu (Chương 5) cho các hệ thống quản trị nội dung doanh nghiệp (CMS) xây dựng trên nền tảng PHP/Laravel.

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

1. Hệ thống website công ty Viko được xây dựng trên những công nghệ và framework chính nào?
Website sử dụng bộ công nghệ tiêu chuẩn gồm HTML, CSS, JavaScript kết hợp framework Bootstrap và thư viện jQuery/Ajax cho tầng Front-End; tầng Back-End được lập trình trên ngôn ngữ PHP sử dụng framework Laravel theo mô hình MVC, lưu trữ dữ liệu trên hệ quản trị cơ sở dữ liệu MySQL.

2. Cơ sở dữ liệu của website gồm bao nhiêu bảng và quản lý những dữ liệu gì?
Cơ sở dữ liệu gồm 9 bảng dữ liệu quan hệ: tai_khoans (tài khoản quản trị), infoct (thông tin công ty), thanhpham (dự án hoàn thiện), baogia (thông tin báo giá), sanpham (dữ liệu sản phẩm), loaisanpham (danh mục phân loại), loaisanpham_sanpham (bảng liên kết nhiều - nhiều), hinhsanpham (hình ảnh sản phẩm) và nhanxet (bình luận từ người dùng).

3. Khách vãng lai (Guest) có những quyền hạn tương tác nào trên website?
Khách vãng lai bị ràng buộc trong 5 chức năng: xem thông tin/bài viết trên website, tìm kiếm sản phẩm theo từ khóa, lọc danh sách sản phẩm theo danh mục, viết nhận xét tại bài đăng sản phẩm và gửi biểu mẫu đăng ký nhận báo giá đến công ty.

4. Khảo sát hiện trạng trong đồ án đã phân tích chi tiết website thực tế nào?
Tác giả đã tiến hành khảo sát và bóc tách cấu trúc trang của website tandaithanh.net (doanh nghiệp kinh doanh các sản phẩm cửa sổ nhôm kính, kính cường lực, lan can kính), từ đó học hỏi cách bố trí trang chủ, danh mục sản phẩm, bài viết công trình và mẫu đơn nhận báo giá.

5. Cơ chế bảo mật trong hệ thống được đồ án giải quyết bằng những kỹ thuật nào?
Hệ thống tận dụng cơ chế bảo vệ của Laravel Framework với xác thực thẻ token CSRF trong mọi yêu cầu gửi dữ liệu dạng POST, sử dụng Middleware để kiểm soát quyền truy cập, mã hóa mật khẩu trong cơ sở dữ liệu và khóa hoàn toàn các liên kết quản trị đối với người dùng chưa đăng nhập.

Kết luận

Đồ án tốt nghiệp "Thiết kế và lập trình Website" của tác giả Phan Tiến Đạt đã giải quyết trọn vẹn bài toán xây dựng cổng thông tin giới thiệu và quảng bá hình ảnh cho doanh nghiệp Viko. Bằng việc kết hợp kiến trúc MVC của framework Laravel với thư viện Bootstrap và kỹ thuật Ajax, đề tài đã phát triển thành công cả phân hệ hiển thị cho khách hàng và phân hệ quản trị nội dung cho doanh nghiệp. Công trình hoàn thành đầy đủ các mục tiêu thiết kế hệ thống từ phân tích Use Case, thiết kế cơ sở dữ liệu đến lập trình thực nghiệm, là tài liệu kỹ thuật hữu ích cho sinh viên công nghệ thông tin tham khảo khi xây dựng các ứng dụng web quản trị doanh nghiệp.