Lập trình tạo một MVC Component đơn giản cho Joomla. Phần 1. Khởi tạo component

Trong bài viết này

  1. Danh mục các bài viết cùng nhóm
  2. Giới thiệu
  3. Chuẩn bị cơ sở dữ liệu
  4. Khởi tạo component
  5. Cài đặt component

Danh mục các bài viết cùng nhóm 🔝

Giới thiệu 🔝

Trong loạt bài viết này, với kinh nghiệm ít ỏi của mình, tôi muốn chia sẻ cách tạo một component đơn giản theo mô hình MVC của Joomla. Dù là một component đơn giản, tôi đặt mục đích là giúp mọi người có thể hiểu cặn kẽ cách thức hoạt động của một component chứ không đơn thuần là tạo ra một component có thể hoạt động được. Đây là điểm mà tôi không thấy có ở các tài liệu hướng dẫn hiện có trên Internet cũng như trong sách (như tôi đã phân tích ở bài chia sẻ trước đây: Bắt đầu lập trình Joomla Component). Với mục tiêu như trên, tôi sẽ bỏ qua cơ chế đa ngôn ngữ của Joomla, thay vào đó tôi sẽ sử dụng trực tiếp các chuỗi tiếng Việt để mọi người dễ hình dung hơn (đây là điều mà không được phép khi phát triển ứng dụng thực tế!). Phiên bản Joomla tôi sử dụng là 3.9 và IDE là PHPStorm. Chức năng của component này là quản lý thông tin về sinh viên. Các tao tác cụ thể mà component có thể thực hiện bao gồm:
  1. Xem danh sách sinh viên trong CSDL
  2. Thêm sinh viên vào CSDL
  3. Chỉnh sửa thông tin về một sinh viên (và cập nhật vào CSDL)
Một điều thú vị là đa phần công việc đã được hỗ trợ bởi các lớp MVC của Joomla. Mục đích của việc xây dựng component này là để hiểu được sự hỗ trợ nói trên của Joomla. Các bước chúng ta tiến hành bao gồm:
  1. Chuẩn bị cơ sở dữ liệu (tạo bảng để chứa thông tin sinh viên)
  2. Khởi tạo component: tạo các file tối thiểu của component và cấu hình để Joomla nhận ra component
  3. Lần lượt xây dựng các thành phần của component

Chuẩn bị cơ sở dữ liệu 🔝

Trước khi bắt tay vào lập trình, hãy mở phpMyAdmin và tạo trong CSDL của Joomla một bảng với tên là "prefix_students" để chứa thông tin về sinh viên. Đó cũng là bảng duy nhất mà chúng ta cần cho component này. Bảng có 4 cột là "id" (mã sinh viên), "name" (họ và tên), "year" (năm sinh) và "avg" (điểm trung bình).
CREATE TABLE `#__students`(
    `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
    `name` varchar(50) NOT NULL,
    `year` INT UNSIGNED,
    `avg` FLOAT(4,2),
    PRIMARY KEY(`id`)
    )ENGINE INNODB DEFAULT charset = `utf8mb4` AUTO_INCREMENT=1;

Tiếp đó, nhập sẵn thông tin vài sinh viên để tiện cho việc xây dựng chức năng xem danh sách sinh viên mà ta sẽ tiến hành ở phần sau
INSERT INTO `#__students`(`name`, `year`, `avg`) VALUES
    ("Nguyễn Văn An",2000,9.1),
    ("Trần Thị Bình", 2001,9.7);

Khởi tạo component 🔝

Chúng ta sẽ tạo component này ở phần back-end của Joomla. Hãy tạo thư mục
\administrator\components\com_students

Trong thư mục đó, tạo ra 4 file:
  • index.html: file để ngăn việc duyệt thư mục (không có cũng không sao)
  • students.xml: file có tên trùng với tên của component, chứa thông tin về component, để Joomla nhận biết component
  • students.php: file có tên trùng với tên của component, là điểm khởi động (entry-point) của component
  • controller.php: file chứa controller mặc định (theo mô hình của Joomla 3, còn với Joomla 2.5 trở về trước khi không sử dụng file này)
Bên cạnh đó, ta cũng tạo sẵn 3 thư mục là 'controllers', 'models' và 'views'
Nội dung file index.html
File này chỉ có tác dụng ngăn việc duyệt thư mục nên nội dung của nó là đoạn mã HTML để tạo ra một trang trắng. Khi ta tạo ra bất kỳ thư mục nào trong component  của mình (ví dụ như 3 thư mục 'controllers', 'models' và 'views' được đề cập đến ở trên) thì cũng cần tạo ra (copy) trong đó một file index.html như thế
<html><body bgcolor="#FFFFFF"></body></html>
Nội dung file students.php
<?php
defined("_JEXEC") or die;
$controller = JControllerLegacy::getInstance('Students');
$task = JFactory::getApplication()->input->getCmd('task');
$controller->execute($task);
$controller->redirect();
Tập tin entry-point này nói chung là giống hệt nhau cho mọi component, tất nhiên là khác nhau ở giá trị $prefix truyền vào phương thức JControllerLegacy::getInstance(). Giá trị của tham số $prefix này thường là tên của component (trong trường hợp của chúng ta là "Students") và nó được sử dụng để làm tiền tố trong tên gọi khi đặt tên cho mọi lớp controller của component.
Trên đây chính là đoạn mã đầu tiên sẽ được thực hiện khi Joomla truyền điều khiển tới component của chúng ta. Hoạt động của đoạn mã này được diễn giải trong bài viết này: https://docs.joomla.org/Model-View-Controller, ở mục "The HTTP Request task parameter".

Nội dung file controller.php
<?php
defined("_JEXEC") or die;
class StudentsController extends JControllerLegacy
{
}
Ở đây ta chỉ cần khai báo một lớp controller (thừa kế lớp JControllerLegacy) có tên là StudentsController (bắt đầu bằng prefix là "Students" và tiếp nối là chữ "Controller"). Tuy trông vào thì thấy chỉ có một dòng khai báo tên lớp, nhưng thực tế thì các phương thức mà nó thừa kế từ lớp cha đủ để giúp ta thực thi các chức năng mà ta mong muốn ở component của mình. Ta sẽ trở lại bàn về hoạt động của lớp này ở phần sau.

Nội dung của file students.xml
<?xml version="1.0" encoding="utf-8" ?>
<extension type="component" version="3.0" method="upgrade">
    <name>com_students</name>
    <author>Nguyễn Tuấn Anh</author>
    <administration>
        <menu>Quản lý sinh viên</menu>
        <files folder="admin">
            <filename>index.html</filename>
            <filename>students.php</filename>
            <filename>controller.php</filename>
            <folder>controllers</folder>
            <folder>models</folder>
            <folder>views</folder>
        </files>
    </administration>
</extension>
Nội dung của file là khá rõ ràng. Ý nghĩa của nó là cung cấp cho Joomla thông tin về component của chúng ta.

Cài đặt component 🔝

Sau khi có được các file tối thiểu trên đây, truy cập vào phần quản trị của Joomla và thực hiện  menu Extensions\Manage\Discover. Kết quả là Joomla sẽ phát hiện ra sự có mặt của component:


Thực hiện cài đặt bằng cách tích chọn component rồi nhấn nút "Install". Khi cài đặt thành công, trong menu "Components" sẽ xuất hiện mục "Quản lý sinh viên"

Mặt dù khi nhấn vào mục menu này thì ta sẽ được một thông báo lỗi (404 - View not found) nhưng không sao. Bước khởi tạo component của chúng ta có thể coi là đã thành công.

Comments

Post a Comment

Popular posts from this blog

Cài đặt Xdebug cho VSCode trên Windows

Image
Môi trường Windows 10 x64 Visual Studio Code (latest version) PHP 8.1.6 Tổng thể các bước thực hiện Cài đặt PHP Debug plugin cho VSCode Tải và cài đặt Xdebug Cấu hình PHP Dùng thử Xdebug Cài đặt PHP Debug plugin cho VSCode Trong Market Place, tìm kiếm với từ khóa "PHP Debug" và chọn plugin có tên "PHP Debug" như hình dưới đây. Lưu ý chọn plugin có tích xanh Xdebug và có lượt tải hơn 7 triệu. Sau khi cài đặt (install) thành công, nhấn chuột vào plugin này thì thông tin chi tiết sẽ hiện lên. Trong đó, ở mục Details có hướng dẫn cách cài đặt và cấu hình Xdebug cho PHP. Tải và cài đặt Xdebug Để tải được phiên bản Xdebug phù hợp với hệ thống của mình, ta sẽ sử dụng trình Wizard của Xdebug. Trình này yêu cầu cung cấp thông tin về phiên bản PHP mà ta có. Thực thi câu lệnh sau để trích xuất thông tin và lưu vào tập tin 'phpinfo.txt': D:\> php -i > phpinfo.txt Tiếp đó, truy cập trang https://xdebug.org/wizard ; sao chép toà
Read more

Lập trình tạo một MVC Component đơn giản cho Joomla. Phần 4. Chỉnh sửa một phần tử

Image
Trong bài viết này Ý tưởng chung Logic hoạt động của chức năng chỉnh sửa Bổ sung chức năng chỉnh sửa Chỉnh sửa tiêu đề của form nhập thông tin Chỉnh sửa mã của layout Ý tưởng chung 🔝 Chỉnh sửa thông tin về một phần tử hiện có là một thao tác không thể thiếu trong công cụ quản lý. Phần này sẽ trình bày cách thức xây dựng chức năng cơ bản này. Khi người dùng duyệt danh sách các phần tử (sinh viên), ta có thể cung cấp chức năng "chỉnh sửa" thông qua đường link đặt dưới tên của mỗi phần tử hoặc (và) nút "Edit" đặt bên cạnh mỗi phần tử. Ở phần trước, để xây dựng chức năng "Thêm sinh viên", ta đã sử dụng lớp JControllerForm . Ở đó, ta cũng đã chỉ ra rằng trong số các phương thức mà lớp này hỗ trợ có cả phương thức edit() . Sẽ không khó để đoán được rằng đây chính là phương thức mà có thể giúp ta xây dựng chức năng chỉnh sửa thông tin một phần tử. Logic hoạt động của chức năng chỉnh sửa  🔝 Khi chúng ta thừa kế lớp JControllerForm để xây dựng
Read more