GIÁO TRÌNH THIẾT KẾ VÀ CẤU HÌNH WEBSITE – NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH (TRÌNH ĐỘ CAO ĐẲNG)

Tổng quan về giáo trình

Giáo trình Thiết kế và cấu hình website (Mã mô đun: MĐ 20) là tài liệu giảng dạy chuyên môn bắt buộc thuộc chương trình đào tạo nghề Quản trị mạng máy tính ở trình độ Cao đẳng. Tài liệu được ban hành chính thức theo Quyết định số 70/QĐ-CĐN ngày 11 tháng 01 năm 2019 của Hiệu trưởng Trường Cao đẳng nghề An Giang, do tác giả Đỗ Văn Nhớ biên soạn năm 2018.

Mục tiêu học tập của mô đun được xác định cụ thể trên ba phương diện:

  • Kiến thức: Người học trình bày và áp dụng được hệ thống thẻ HTML, cấu trúc tài liệu web và định dạng CSS; giải thích được khái niệm, ưu nhược điểm của Hệ thống quản trị nội dung (Content Management System - CMS); nắm vững quy trình cài đặt, cấu hình hệ thống CMS Joomla; hiểu rõ nguyên lý hoạt động và cấu trúc của các thành phần mở rộng gồm Component, Module, Plugin, Extension, Template và hệ thống API trong Joomla.
  • Kỹ năng: Thiết kế giao diện và tổ chức liên kết cho các trang web tĩnh bằng HTML và CSS; thực hiện cài đặt máy chủ cục bộ (localhost) và mã nguồn Joomla; cài đặt, cấu hình, tùy biến và xây dựng mới các thành phần mở rộng cơ bản; quản trị và hiệu chỉnh template giao diện ở cả hai môi trường front-end và back-end.
  • Năng lực tự chủ và trách nhiệm: Rèn luyện tính cẩn thận, tỉ mỉ trong xử lý mã nguồn và cấu hình máy chủ; duy trì ý thức tự giác nghiên cứu tài liệu kỹ thuật.

Giáo trình được biên soạn theo hình thức tích hợp giữa lý thuyết chuyên môn và bài tập thực hành. Tổng thời lượng của mô đun là 90 giờ, trong đó lý thuyết chiếm 30 giờ, thực hành chiếm 54 giờ và kiểm tra định kỳ chiếm 6 giờ. Cấu trúc nội dung tiếp cận từ các khối kiến thức nền tảng về giao diện tĩnh (HTML/CSS) đến các kỹ thuật triển khai, quản trị và lập trình trên một hệ quản trị nội dung mã nguồn mở hoàn chỉnh (Joomla 3.x).

Nội dung kiến thức cốt lõi

+-------------------------------------------------------------------------+
|                  MĐ 20: THIẾT KẾ VÀ CẤU HÌNH WEBSITE                    |
+--------------------+----------------------------------------------------+
| 1. NỀN TẢNG GIAO   | • Bài 1: Ngôn ngữ HTML (Cấu trúc, thẻ cơ bản)      |
|    DIỆN TĨNH       | • Bài 2: CSS cơ bản (Cú pháp, Box Model, Layout)   |
+--------------------+----------------------------------------------------+
| 2. HỆ QUẢN TRỊ CMS | • Bài 3: Cài đặt & Quản trị Joomla (WampServer)    |
|    VÀ DỮ LIỆU      | • Bài 4: Đối tượng Joomla (URI, Request, Session)  |
|                    | • Bài 5: Quản trị CSDL trong Joomla (MySQLi)       |
+--------------------+----------------------------------------------------+
| 3. PHÁT TRIỂN      | • Bài 6: Component (Mô hình MVC, Feed/PDF/Raw)     |
|    THÀNH PHẦN      | • Bài 7: Module (Tham số, Layout, Helper)          |
|    MỞ RỘNG         | • Bài 8: Plugin (Event, Listeners)                 |
|                    | • Bài 9: Extension (Session, Browser)              |
+--------------------+----------------------------------------------------+
| 4. GIAO DIỆN VÀ    | • Bài 10: Template (Front-end, Back-end, Position) |
|    HỆ THỐNG        | • Bài 11: Sử dụng API (Date, File, Array, Tree)    |
|                    | • Bài 12: Ôn tập tổng hợp                          |
+--------------------+----------------------------------------------------+

Các chương/chủ đề chính

Nội dung giáo trình được cấu trúc thành 12 bài học với sự tiếp nối chặt chẽ về mặt logic kỹ thuật:

  • Bài 1: Ngôn ngữ HTML (20 giờ: 5 LT - 13 TH - 2 KT): Trình bày khái niệm mã nguồn web, cấu trúc chuẩn 3 phần của tài liệu (<html>, <head>, <body>), và cú pháp của các thẻ định dạng văn bản (<hn>, <p>,
    , <b>, <i>, <u>, <font>), thẻ liên kết <a>, hình ảnh <img>, bảng dữ liệu <table> và danh sách (<ul>, <ol>).
  • Bài 2: CSS cơ bản (25 giờ: 10 LT - 13 TH - 2 KT): Khái quát cú pháp CSS; phân tích 3 phương thức nhúng CSS (inline style, internal <style>, external <link>); hệ thống thuộc tính Background, Font, Text, Pseudo-classes (:link, :hover, :visited, :active), Class & ID, phân khối bằng <div>, cấu trúc Box Model (Margin, Border, Padding), kỹ thuật dàn trang với float, clear và position (absolute, relative).
  • Bài 3: Cài đặt và sử dụng Joomla (4 giờ: 2 LT - 2 TH): Hướng dẫn dựng môi trường localhost bằng phần mềm WampServer 3.0 (tích hợp PHP 7 và MySQL); thao tác tạo cơ sở dữ liệu utf8_vietnamese_ci trên phpMyAdmin; cài đặt gói mã nguồn Joomla 3.x; quản lý nội dung qua Category Manager, Article Manager; tạo hệ thống liên kết với Menu Manager (Single Article); quản lý Module và cấu hình template mặc định Protostar.
  • Bài 4: Sử dụng các đối tượng Joomla (4 giờ: 2 LT - 2 TH): Phân tích sơ đồ cây thư mục Joomla, cấu trúc URI và cách thức làm việc với các đối tượng cốt lõi: JRequest, JFactory, JSession.
  • Bài 5: Quản trị cơ sở dữ liệu trong Joomla (4 giờ: 2 LT - 2 TH): Cấu hình kết nối MySQLi; thực thi các phương thức truy vấn dữ liệu từ cơ sở dữ liệu và thao tác bản ghi thông qua lớp JTable.
  • Bài 6: Sử dụng Component (4 giờ: 2 LT - 2 TH): Khái quát cấu trúc component; ứng dụng mô hình kiến trúc MVC (Model - View - Controller); thiết lập các dạng hiển thị dữ liệu (Feed, PDF, Raw) và xử lý tham số cấu hình.
  • Bài 7: Sử dụng Module (8 giờ: 2 LT - 5 TH - 1 KT): Phân tích cấu trúc thư mục module; định nghĩa tham số cấu hình; xây dựng layout hiển thị và file hỗ trợ xử lý logic (helper.php).
  • Bài 8: Sử dụng Plugin (4 giờ: 2 LT - 2 TH): Giới thiệu cấu trúc plugin; phân tích cơ chế xử lý sự kiện (Events) và bộ lắng nghe sự kiện (Listeners).
  • Bài 9: Sử dụng Extension (4 giờ: 2 LT - 2 TH): Sử dụng các lớp bổ trợ lập trình, cơ chế Helper, quản lý Session và nhận dạng trình duyệt (Browser).
  • Bài 10: Sử dụng Template (4 giờ: 1 LT - 3 TH): Cấu trúc template cho Front-End (Site template) và Back-End (Administrator template); tích hợp CSS, JavaScript, hình ảnh; định nghĩa vị trí hiển thị (position) cho module và kích hoạt tính năng xem trước (Preview Module Positions).
  • Bài 11: Sử dụng API (5 giờ: 1 LT - 4 TH): Khai thác các thư viện và lớp tiện ích của Joomla Platform như Date, File, Array, Tree.
  • Bài 12: Ôn tập (4 giờ: 4 KT): Hệ thống hóa kiến thức và thực hành kiểm tra tổng hợp.

Kiến thức nền tảng được xây dựng

  • Cơ sở dữ liệu và môi trường web: Kiến thức thiết lập máy chủ dịch vụ web trên hệ điều hành Windows qua WampServer (Apache, PHP, MySQL), thiết lập định dạng bảng mã ký tự tiếng Việt utf8_vietnamese_ci, và cơ chế giao tiếp cơ sở dữ liệu thông qua thư viện driver MySQLi.
  • Nguyên lý hiển thị giao diện: Quy chuẩn tổ chức thẻ ngữ nghĩa HTML, mô hình tính toán kích thước không gian Box Model (Content + Padding + Border + Margin), và nguyên lý xếp chồng/định vị phần tử trên không gian 2 chiều (CSS Layout).
  • Kiến trúc phần mềm CMS: Cơ chế phân tách dữ liệu và giao diện của CMS; kiến trúc MVC trong thành phần mở rộng; quy trình vòng đời của một yêu cầu xử lý (HTTP Request/Response) thông qua các lớp đối tượng hệ thống của Joomla.

Kỹ năng phát triển

  • Kỹ năng kỹ thuật (Technical skills): Viết mã HTML/CSS đúng quy chuẩn cú pháp; cài đặt gói dịch vụ WampServer và thư viện Microsoft Visual C++; vận hành giao diện quản trị phpMyAdmin để tạo cơ sở dữ liệu; cài đặt gói mã nguồn Joomla 3.x; đóng gói và cấu hình các thành phần Component, Module, Plugin, Template.
  • Kỹ năng phân tích (Analytical skills): Phân tích thiết kế giao diện đồ họa để bóc tách thành các file CSS tương ứng; sơ đồ hóa cấu trúc thông tin website thành các cấp độ chuyên mục (Category), bài viết (Article) và cây trình đơn (Menu); phân định ranh giới chức năng giữa các loại thành phần mở rộng trên CMS.
  • Kỹ năng ứng dụng thực hành (Practical competencies): Xây dựng website hoàn chỉnh từ trang tĩnh đến hệ thống động có cơ sở dữ liệu; tùy chỉnh các tham số giao diện của template Protostar; thiết lập vị trí hiển thị module theo yêu cầu bố cục.

Phương pháp giảng dạy và học tập

+-------------------------------------------------------------------------+
|                  PHÂN BỔ THỜI LƯỢNG ĐÀO TẠO (90 GIỜ)                    |
+-----------------------------------+-------------------------------------+
| Thành phần đào tạo                | Thời lượng | Tỷ lệ phần trăm        |
+-----------------------------------+------------+------------------------+
| Thực hành trên máy tính (TH)      | 54 giờ     | 60.0%                  |
| Lý thuyết chuyên môn (LT)         | 30 giờ     | 33.3%                  |
| Kiểm tra định kỳ (KT)             | 06 giờ     | 06.7%                  |
+-----------------------------------+------------+------------------------+

Phương pháp sư phạm

Giáo trình áp dụng mô hình đào tạo tích hợp (kết hợp trực tiếp giữa bài giảng lý thuyết chuyên môn và thực hành thao tác trên máy tính). Tiến trình bài học được thiết kế theo nguyên tắc suy diễn kỹ thuật: trình bày khái niệm và cú pháp lệnh $\rightarrow$ minh họa mã nguồn mẫu $\rightarrow$ cung cấp hình ảnh giao diện thực tế $\rightarrow$ giao bài tập thực hành độc lập.

Bài tập và case study thực hành

Tài liệu thiết kế các tình huống và bài tập thực hành bám sát cấu trúc của các website thực tế:

  • Xây dựng website tĩnh: Bài tập kết hợp thẻ HTML và tập tin style.css để thiết kế trang thông tin cá nhân cơ bản và định dạng danh sách địa phương theo định danh Class và ID.
  • Xây dựng cấu trúc website bán hàng: Case study tổ chức nội dung cho website thương mại điện tử:
    1. Chuyên mục About: Chứa các bài viết About my site, How to purchase/order products, How to make payment.
    2. Chuyên mục Online customer services.
    3. Thiết lập hiển thị trang chủ bằng thuộc tính Featured = Yes và kết nối bài viết ra ngoài giao diện thông qua danh mục menu kiểu Single Article.

Quy trình bài tập thực hành mẫu

Giáo trình mô tả chi tiết quy trình từng bước trên giao diện phần mềm:

  1. Thiết lập máy chủ: Tải và cài đặt Microsoft Visual C++ (vcredist_x64), cài đặt WampServer 3.0, khởi chạy dịch vụ với biểu tượng màu xanh lá cây, thiết lập trình soạn thảo (Notepad++) và trình duyệt mặc định.
  2. Khởi tạo dữ liệu: Truy cập phpMyAdmin với tài khoản root (mật khẩu trống), tạo database cntt3 với bảng mã utf8_vietnamese_ci.
  3. Cài đặt Joomla: Giải nén Joomla_3.5-Stable-Full_Package.zip vào đường dẫn c:/wamp/www/joomla, cấu hình tham số kết nối (Tên máy chủ: localhost, Tên CSDL: cntt3, Tài khoản: root, Tiền tố bảng: js_), cài đặt dữ liệu mẫu và xóa bỏ thư mục installation.
  4. Hiệu chỉnh template: Truy cập Extensions $\rightarrow$ Templates, chọn template protostar - Default, mở thẻ Advanced để tùy chỉnh màu nền (background-color), màu chữ (color), logo, tiêu đề và khung hiển thị (Fluid/Static); kích hoạt Preview Module Positions trong mục Options để kiểm tra sơ đồ vị trí module.

Đánh giá và hướng dẫn tự học

  • Phương pháp đánh giá: Đánh giá thông qua các bài kiểm tra thực hành trực tiếp trên máy tính tại Bài 1 (2 giờ), Bài 2 (2 giờ), Bài 7 (1 giờ) và bài kiểm tra tổng hợp cuối khóa tại Bài 12 (4 giờ). Điểm số căn cứ trên khả năng vận hành website, tính chính xác của cấu trúc mã và mức độ hoàn thiện cấu hình.
  • Hướng dẫn tự học: Người học tự cài đặt phần mềm máy chủ ảo trên máy tính cá nhân, thực hành tuần tự theo các mã ví dụ mẫu và tra cứu thông số thuộc tính tại bảng phụ lục thuộc tính CSS đính kèm ở cuối Bài 2.

Điểm nổi bật và cập nhật

Môi trường công nghệ và kỹ thuật tích hợp

  • Môi trường máy chủ: Tài liệu cập nhật việc sử dụng phiên bản WampServer 3.0 tích hợp máy chủ dịch vụ PHP 7 và hệ quản trị cơ sở dữ liệu MySQL, hoạt động tương thích với các gói phân phối thư viện Microsoft Visual C++ 2012/2015 trên nền tảng 64-bit.
  • Hệ quản trị nội dung: Sử dụng phiên bản Joomla 3.x (Joomla_3.5-Stable-Full_Package.zip), tích hợp sẵn giao diện chuẩn hóa Protostar hỗ trợ các công nghệ web hiện đại.
  • Cơ sở dữ liệu: Thiết lập bảng mã chuẩn quốc tế có hỗ trợ tiếng Việt utf8_vietnamese_ci và sử dụng driver kết nối nâng cao MySQLi trong cấu hình hệ thống Joomla.

Tính liên kết và thực tiễn kỹ thuật

+-------------------------------------------------------------------------+
|                  SƠ ĐỒ CẤU TRÚC PHẦN MỞ RỘNG TRONG JOOMLA               |
+-------------------------------------------------------------------------+
|                                                                         |
|  +-------------------------------------------------------------------+  |
|  |                             TEMPLATE                              |  |
|  |    (Site Template / Administrator Template: Bố cục, CSS, JS)      |  |
|  +---------------------------------+---------------------------------+  |
|                                    |                                    |
|         +--------------------------+--------------------------+         |
|         |                                                     |         |
|  +------v---------------------------+  +----------------------v------+  |
|  |            COMPONENT             |  |           MODULE            |  |
|  |  (Nội dung chính - Mô hình MVC:  |  |  (Khối tiện ích hiển thị    |  |
|  |   Model, View, Controller)       |  |   theo Position, Helper)    |  |
|  +----------------------------------+  +-----------------------------+  |
|                                                                         |
|  +-------------------------------------------------------------------+  |
|  |                              PLUGIN                               |  |
|  |          (Xử lý ngầm theo sự kiện: Events & Listeners)            |  |
|  +-------------------------------------------------------------------+  |
|                                                                         |
|  +-------------------------------------------------------------------+  |
|  |                        JOOMLA CORE & DATABASE                     |  |
|  |     (JFactory, JSession, JRequest, JTable, Driver MySQLi, API)    |  |
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+
  • Mở rộng chiều sâu kỹ thuật: Không dừng lại ở các thao tác quản trị nội dung bề mặt, giáo trình cung cấp cấu trúc lập trình chuyên sâu vào lõi hệ thống: cách tổ chức lớp JTable để quản trị cơ sở dữ liệu, quản lý phiên làm việc với JSession, điều hướng xử lý với JRequest và khai thác các lớp đối tượng tiện ích của thư viện Joomla API (Date, File, Array, Tree).
  • Ứng dụng mô hình kiến trúc MVC: Hướng dẫn cách phân chia cấu trúc mã nguồn trong Component thành 3 thành phần riêng biệt: Model (xử lý dữ liệu), View (giao diện hiển thị) và Controller (điều hướng luồng xử lý), hỗ trợ xuất dữ liệu ra nhiều định dạng (HTML, PDF, Feed, Raw).
  • Kết nối phân tích nghề nghiệp: Cấu trúc bài học được xây dựng dựa trên kết quả phân tích nghề Quản trị mạng máy tính, đáp ứng yêu cầu vận hành, cấu hình và bảo trì cổng thông tin điện tử cho các tổ chức, doanh nghiệp.

Đối tượng sử dụng giáo trình

Phân loại người học và điều kiện tiên quyết

  • Sinh viên chuyên ngành: Giáo trình được thiết kế dành cho sinh viên theo học trình độ Cao đẳng nghề Quản trị mạng máy tính trong khuôn khổ học phần Mô đun 20.
  • Yêu cầu kiến thức tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về tin học đại cương, kiến thức nền tảng về mạng máy tính, và kỹ năng thao tác trên hệ điều hành Windows. Giáo trình không yêu cầu người học phải có kiến thức lập trình web trước đó do nội dung đã xây dựng lại từ nền tảng HTML và CSS ở hai bài đầu tiên.

Ứng dụng đối với giảng viên và tài liệu tham khảo

  • Giảng viên chuyên môn: Tài liệu là căn cứ để xây dựng đề cương bài giảng chi tiết, kế hoạch giảng dạy 90 giờ tích hợp trên phòng máy thực hành, thiết lập tiêu chí chấm điểm kỹ năng nghề và ngân hàng đề kiểm tra định kỳ.
  • Kỹ thuật viên và người tự học: Tài liệu cung cấp trình tự các bước thực tế kèm hình ảnh giao diện, phục vụ cho kỹ thuật viên quản trị mạng hoặc người học công nghệ thông tin có nhu cầu tìm hiểu về kỹ thuật triển khai và tùy biến CMS Joomla mã nguồn mở.

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

1. Giáo trình này phù hợp với đối tượng nào?

Tài liệu được biên soạn phục vụ cho sinh viên trình độ Cao đẳng nghề chuyên ngành Quản trị mạng máy tính, giảng viên giảng dạy mô đun Thiết kế và cấu hình website, cùng các kỹ thuật viên mạng có nhu cầu học cách cấu hình và quản trị website trên nền CMS Joomla.

2. Cần trang bị những kiến thức nền tảng nào trước khi học mô đun này?

Người học chỉ cần có kỹ năng sử dụng máy tính căn bản, hiểu biết cơ bản về cấu trúc tệp tin và mạng máy tính. Kiến thức về mã nguồn web (HTML, CSS) và hệ thống máy chủ cơ sở dữ liệu (WampServer, MySQL) được hướng dẫn chi tiết từ đầu trong tài liệu.

3. Giáo trình này có điểm gì khác biệt về cấu trúc nội dung?

Giáo trình kết hợp toàn diện từ thiết kế giao diện tĩnh (HTML/CSS) đến triển khai hệ quản trị nội dung mã nguồn mở Joomla. Thay vì chỉ hướng dẫn sử dụng giao diện quản trị, tài liệu đi sâu vào cấu trúc lập trình hệ thống: mô hình MVC trong Component, xử lý tham số trong Module, lập trình Plugin theo sự kiện, cấu trúc JTable, đối tượng JFactory và hệ thống Joomla API.

4. Phương pháp tự học hiệu quả nhất với tài liệu này là gì?

Người học cần tự thiết lập môi trường máy chủ cục bộ bằng WampServer 3.0 trên máy tính cá nhân, thực hiện tuần tự các bước cấu hình CSDL phpMyAdmin và cài đặt mã nguồn Joomla theo đúng tài liệu. Khi học bài CSS và Joomla, người học cần tra cứu các thông số trong bảng thuộc tính phụ lục và chủ động chỉnh sửa mã nguồn để quan sát sự thay đổi trên giao diện web.

5. Tài liệu có cung cấp các bảng tra cứu kỹ thuật bổ trợ không?

Có. Giáo trình tích hợp bảng phụ lục chi tiết đặc tả các thuộc tính và giá trị trong CSS (Background, Font, Text, Margin, Padding, Border, Width, Height, Layout Position, Pseudo-classes), hệ thống thuật ngữ chuyên môn và danh mục tài liệu tham khảo kỹ thuật.

Kết luận

Giáo trình Thiết kế và cấu hình website cung cấp hệ thống kiến thức toàn diện và có cấu trúc logic chặt chẽ, phục vụ đào tạo kỹ năng nghề Quản trị mạng máy tính trình độ Cao đẳng. Tài liệu kết hợp cân bằng giữa lý thuyết nền tảng và hướng dẫn thực hành chuyên môn, từ việc xây dựng trang web tĩnh bằng HTML/CSS đến cấu hình, quản trị và lập trình mở rộng trên hệ quản trị nội dung mã nguồn mở Joomla 3.x.

Lộ trình học tập đề xuất theo giáo trình:

  1. Nắm vững cấu trúc thẻ HTML và cú pháp định dạng CSS (Bài 1 - Bài 2).
  2. Thiết lập máy chủ WampServer, quản trị CSDL MySQL trên phpMyAdmin và cài đặt Joomla 3.x (Bài 3).
  3. Quản trị cấu trúc nội dung: Category, Article, Menu và Template (Bài 3, Bài 10).
  4. Nghiên cứu cấu trúc đối tượng hệ thống, lớp dữ liệu JTable và kiến trúc MVC (Bài 4, Bài 5, Bài 6).
  5. Phát triển các thành phần mở rộng: Module, Plugin, Extension và khai thác hệ thống Joomla API (Bài 7, Bài 8, Bài 9, Bài 11).

Tài liệu tham khảo và nguồn tài nguyên đi kèm:

  • Bảng tra cứu thuộc tính và giá trị CSS chuẩn hóa (Phụ lục Bài 2).
  • Tài liệu hướng dẫn trực tuyến về HTML/CSS từ W3Schools (w3schools.com).
  • Tài liệu kỹ thuật và mã nguồn chính thức từ cộng đồng Joomla toàn cầu (joomla.org).