Hiểu rõ cấu trúc của component; module • Hiểu rõ về quy trình, cách thức, giải pháp xây dựng component, module

1. Bài 5
Hướng dẫn xây dựng Extension

2. Nhắc lại bài cũ
• Chỉnh sửa template thông qua chỉnh sửa hình ảnh, chỉnh
sửa CSS
• Cấu trúc file và thư mục của một Template
Bài 5 - Hướng dẫn xây dựng Extension

3. Mục tiêu bài học
• Hiểu rõ cấu trúc của component; module
• Hiểu rõ về quy trình, cách thức, giải pháp xây dựng
component, module
Bài 5 - Hướng dẫn xây dựng Extension

4. Xây dựng Component
Xây dựng component theo mô hình MVC
- Các component Joomla được xây dựng theo mô hình MVC
(Model-View-Controler);
User
(Khách truy
cập web)
Bài 5 - Hướng dẫn xây dựng Extension
View
(tạo giao diện hiển
thị)
Model
(thiết lập các
chức năng web)
Controler
(điều khiển, xử lý
tương tác)

5. Xây dựng Component
Xây dựng 1 Component đơn giản: Component Hello
Bài 5 - Hướng dẫn xây dựng Extension

6. Xây dựng Component
Component cơ bản có 5 file:
• site/hello.php - file tạo entry point
• site/controller.php - Thiết lập điều khiển
• site/views/hello/view.html.php - Thiết lập
hiển thị
• site/views/hello/tmpl/default.php - Tạo giao
diện hiển thị
• hello.xml - Đóng gói thành bộ cài
Bài 5 - Hướng dẫn xây dựng Extension
• site/hello.php - file tạo entry point
• site/controller.php - Thiết lập điều khiển
• site/views/hello/view.html.php - Thiết lập
hiển thị
• site/views/hello/tmpl/default.php - Tạo giao
diện hiển thị
• hello.xml - Đóng gói thành bộ cài

7. Xây dựng Component
Lập trình file Hello.php - Tạo entry point
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( JPATH_COMPONENT.DS.'controller.php' );
if ($controller = JRequest::getWord('controller')) {
$path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
if (file_exists($path)) {
require_once $path;
} else {
$controller = '';
}
}
$classname = 'HelloController'.$controller;
$controller = new $classname();
$controller->execute( JRequest::getVar( 'task' ) );
$controller->redirect();
Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( JPATH_COMPONENT.DS.'controller.php' );
if ($controller = JRequest::getWord('controller')) {
$path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
if (file_exists($path)) {
require_once $path;
} else {
$controller = '';
}
}
$classname = 'HelloController'.$controller;
$controller = new $classname();
$controller->execute( JRequest::getVar( 'task' ) );
$controller->redirect();

8. Xây dựng Component
Tạo controller với file controller.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
class HelloController extends JController
{
function display()
{
parent::display();
}
}
Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
class HelloController extends JController
{
function display()
{
parent::display();
}
}

9. Xây dựng Component
Tạo view - lập trình file site/views/hello/view.html.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');
class HelloViewHello extends JView
{
function display($tpl = null)
{
$greeting = "Hello, World!";
$this->assignRef( 'greeting', $greeting );
parent::display($tpl);
}
}
Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');
class HelloViewHello extends JView
{
function display($tpl = null)
{
$greeting = "Hello, World!";
$this->assignRef( 'greeting', $greeting );
parent::display($tpl);
}
}

10. Xây dựng Component
Tạo Template tại file site/views/hello/tmpl/default.php
<?php defined('_JEXEC') or die('Restricted access'); ?>
<h1><?php echo $this->greeting; ?></h1>
Bài 5 - Hướng dẫn xây dựng Extension

11. Xây dựng Component
Viết file XML (install.xml)
<?xml version="1.0" encoding="utf-8"?>
<install type="component" version="1.5.0">
<name>Hello</name>
<creationDate>2007-02-22</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>1.01</version>
<description>Description of the component ...</description>
<files folder="site">
<filename>controller.php</filename>
<filename>hello.php</filename>
<filename>index.html</filename>
<filename>views/index.html</filename>
<filename>views/hello/index.html</filename>
<filename>views/hello/view.html.php</filename>
<filename>views/hello/tmpl/default.php</filename>
<filename>views/hello/tmpl/index.html</filename>
</files>
Bài 5 - Hướng dẫn xây dựng Extension
<?xml version="1.0" encoding="utf-8"?>
<install type="component" version="1.5.0">
<name>Hello</name>
<creationDate>2007-02-22</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<version>1.01</version>
<description>Description of the component ...</description>
<files folder="site">
<filename>controller.php</filename>
<filename>hello.php</filename>
<filename>index.html</filename>
<filename>views/index.html</filename>
<filename>views/hello/index.html</filename>
<filename>views/hello/view.html.php</filename>
<filename>views/hello/tmpl/default.php</filename>
<filename>views/hello/tmpl/index.html</filename>
</files>

12. Xây dựng Component
<administration>
<menu>Hello World!</menu>
<files folder="admin">
<filename>hello.php</filename>
<filename>index.html</filename>
</files>
</administration>
</install>
Bài 5 - Hướng dẫn xây dựng Extension
<administration>
<menu>Hello World!</menu>
<files folder="admin">
<filename>hello.php</filename>
<filename>index.html</filename>
</files>
</administration>
</install>

13. Xây dựng Component
Tạo file index.html để bảo mật
<html><body bgcolor="#FFFFFF"></body></html>
Bài 5 - Hướng dẫn xây dựng Extension

14. Xây dựng Component
Bổ xung Model tại site/models/hello.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.model' );
class HelloModelHello extends JModel
{
function getGreeting()
{
return 'Hello, World!';
}
}Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.model' );
class HelloModelHello extends JModel
{
function getGreeting()
{
return 'Hello, World!';
}
}

15. Xây dựng Component
Sử dụng Model: bằng cách thay đổi tại dòng $greeting =
"Hello World!"; tại file site/views/hello/view.html.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');
class HelloViewHello extends JView
{
function display($tpl = null)
{
$model =& $this->getModel();
$greeting = $model->getGreeting();
$this->assignRef( 'greeting', $greeting );
parent::display($tpl);
}
}Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view');
class HelloViewHello extends JView
{
function display($tpl = null)
{
$model =& $this->getModel();
$greeting = $model->getGreeting();
$this->assignRef( 'greeting', $greeting );
parent::display($tpl);
}
}

16. Xây dựng Component
Bổ sung file vào gói cài đặt bằng dòng lệnh
<filename>models/hello.php</filename>
<files folder="site">
<filename>controller.php</filename>
<filename>hello.php</filename>
<filename>index.html</filename>
<filename>models/hello.php</filename>
<filename>models/index.html</filename>
<filename>views/index.html</filename>
<filename>views/hello/index.html</filename>
<filename>views/hello/view.html.php</filename>
<filename>views/hello/tmpl/default.php</filename>
<filename>views/hello/tmpl/index.html</filename>
</files>
Bài 5 - Hướng dẫn xây dựng Extension
<files folder="site">
<filename>controller.php</filename>
<filename>hello.php</filename>
<filename>index.html</filename>
<filename>models/hello.php</filename>
<filename>models/index.html</filename>
<filename>views/index.html</filename>
<filename>views/hello/index.html</filename>
<filename>views/hello/view.html.php</filename>
<filename>views/hello/tmpl/default.php</filename>
<filename>views/hello/tmpl/index.html</filename>
</files>

17. Xây dựng Module
Cấu trúc các file trong 1 module:
• mod_helloworld.php
• mod_helloworld.xml
• helper.php
• tmpl/default.php
Bài 5 - Hướng dẫn xây dựng Extension
• mod_helloworld.php
• mod_helloworld.xml
• helper.php
• tmpl/default.php

18. Xây dựng Module
File mod_helloworld.php
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( dirname(__FILE__).DS.'helper.php' );
$hello = modHelloWorldHelper::getHello( $params );
require( JModuleHelper::getLayoutPath( 'mod_helloworld' ) );
?>
Bài 5 - Hướng dẫn xây dựng Extension
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( dirname(__FILE__).DS.'helper.php' );
$hello = modHelloWorldHelper::getHello( $params );
require( JModuleHelper::getLayoutPath( 'mod_helloworld' ) );
?>

19. Xây dựng Module
File helper.php
<?php
class modHelloWorldHelper
{
function getHello( $params )
{
return 'Hello, World!';
}
}
?>
Bài 5 - Hướng dẫn xây dựng Extension
<?php
class modHelloWorldHelper
{
function getHello( $params )
{
return 'Hello, World!';
}
}
?>

20. Xây dựng Module
File tmpl/defalt.php
<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<?php echo $hello; ?>
Bài 5 - Hướng dẫn xây dựng Extension

21. Xây dựng Module
File mod_hello_world.xml
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>Hello, World!</name>
<author>John Doe</author>
<version>1.5.0</version>
<description>A simple Hello, World! module.</description>
<files>
<filename>mod_helloworld.xml</filename>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
<filename>tmpl/index.html</filename>
</files>
<params>
</params>
</install>
Bài 5 - Hướng dẫn xây dựng Extension
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<name>Hello, World!</name>
<author>John Doe</author>
<version>1.5.0</version>
<description>A simple Hello, World! module.</description>
<files>
<filename>mod_helloworld.xml</filename>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
<filename>tmpl/index.html</filename>
</files>
<params>
</params>
</install>

22. Xây dựng Module
Tạo file index.html trong các thư mục của module để
bảo mật với nội dung:
<html><body bgcolor="#FFFFFF"></body></html>
Bài 5 - Hướng dẫn xây dựng Extension

23. Tổng kết bài học
• Các component trong Joomla được xây dựng theo mô
hình MVC và dựa vào Joomla Framework - thư viện mã
nguồn sẵn có trong Joomla CMS.
• Quy trình xây dựng giống nhau đối với tất cả các
component hay module.
• Sau khi hoàn thiện lập trình một component hay module,
cần đóng gói thành file .zip để có thể cài đặt vào Joomla
từ trình cài đặt tháo gỡ tự động của Joomla
• Các component trong Joomla được xây dựng theo mô
hình MVC và dựa vào Joomla Framework - thư viện mã
nguồn sẵn có trong Joomla CMS.
• Quy trình xây dựng giống nhau đối với tất cả các
component hay module.
• Sau khi hoàn thiện lập trình một component hay module,
cần đóng gói thành file .zip để có thể cài đặt vào Joomla
từ trình cài đặt tháo gỡ tự động của Joomla
Bài 5 - Hướng dẫn xây dựng Extension