Итак, продолжаем наращивать функционал нашего компонента для CMS Joomla. В предыдущей статье мы добавили к нашему компоненту функции работы с базой данных, если Вы ее не прочитали, то я рекомендую обратиться к статье “Создание расширения для CMS Joomla 1.7. Часть 6. Работа с базой данных.”. В этой статье наша основная цель поменять дизайн нашего компонента в административной части нашего сайта. Правда, никакой функциональной нагрузки это нести не будет. Мы будем менять только дизайн. А дизайн это сила ))). Ну ладно хватит лирики, давайте приступим...
Как я уже писал выше, например в статье “Создание расширения для CMS Joomla 1.7. Введение.” CMS Joomla основана на принципе MVC Model-View-Controller. И для решения нашей задачи нам понадобиться реализовать данный принцип. Тут я хотел бы обратить внимание, что в административной (backend) части мы строим свою MVC, а для сайта мы строим свою.
Давайте изменим интерфейс нашего компонента, при переходе в настройки этого компонента в административной части сайта.
Откроем нашу папку с компонентом. Если кто-то только начал с нами создавать компонент, то я рекомендую вернуться к первой части данного цикла статей и начать создавать расширение для CMS Joomla сначала, для нетерпеливых Вы можете отсюда скачать компонент на базе которого мы продолжаем изучать создание расширения для CMS Joomla.
Изменим в папке admin файл helloworld.php следующим образом:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импортируем библиотеку контроллеров
jimport('joomla.application.component.controller');
// Получаем экземпляр контроллераHelloWorld
$controller = JController::getInstance('HelloWorld');
// Выполняем запрос задачи
$controller->execute(JRequest::getCmd('task'));
// перенаправляем на установленный контролер
$controller->redirect();
Отлично, теперь нам необходимо создать сам контроллер. В папке admin создаем файл controller.php и помещаем в него следующих код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импортируем библиотеку controller
jimport('joomla.application.component.controller');
/**
* Создаем наш контроллер HelloWorld
*/
class HelloWorldController extends JController
{
function display($cachable = false)
{
// задаем view по умолчани, если другого не задано
JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorlds'));
// поведение при вызове
parent::display($cachable);
}
}
Теперь у нас есть точка входа и контроллер, теперь нам осталось создать view и шаблон.
В папке admin создаем папку views, в папке views создаем папку helloworlds, а в папке helloworlds создаем файл view.html.php, в который добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импорт библиотеки view
jimport('joomla.application.component.view');
/**
* HelloWorlds View
*/
class HelloWorldViewHelloWorlds extends JView
{
function display($tpl = null)
{
// Получаем данные из модели
$items = $this->get('Items');
$pagination = $this->get('Pagination');
// Проверяем на наличие ошибок.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));
return false;
}
// Вывод данных для просмотра
$this->items = $items;
$this->pagination = $pagination;
// Показывам шаблон
parent::display($tpl);
}
}
Итак обработчик view написали. И завершающий этап создание шаблона. Для этого в папке helloworlds создаем папку tmpl. В папке tmpl создаем файл default.php, а в него уже добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
// загрузка подсказок поведения
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
<table class="adminlist">
<thead><?php echo $this->loadTemplate('head');?></thead>
<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
<tbody><?php echo $this->loadTemplate('body');?></tbody>
</table>
</form>
Тут наверное необходимо отметить, что шаблон нашего компонента в админ части сайта мы разбили на три составляющие: head, foot и body. Для каждой составляющей сосздадим свой файл. В папке tmpl создаем файл default_head.php, который отвечает за вывод верхней части нашего расширения и в него добавим следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
<th width="5">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
</th>
<th width="20">
<input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
</th>
<th>
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
</th>
</tr>
Теперь создадим в папке tmpl файл default_body.php, который будет отвечать за тело нашего компонента и поместим туда следующий код:
<?php
// Права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
<tr class="row<?php echo $i % 2; ?>">
<td>
<?php echo $item->id; ?>
</td>
<td>
<?php echo JHtml::_('grid.id', $i, $item->id); ?>
</td>
<td>
<?php echo $item->greeting; ?>
</td>
</tr>
<?php endforeach; ?>
И осталось создать только файл, отвечающий за нижнюю область шаблона для нашего расширения. В папке tmpl создадим файл default_foot.php и поместим туда следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
<td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
Небольшой совет, разбивайте шаблон расширения так, чтобы в верхней (default_head.php) и нижней (default_foot.php) частях были неизменяемые данные, в теле (default_body.php) уже оставьте изменяемые. Да, конечно не всегда это получается, но старайтесь придерживаться данного принципа.
Вот мы практически и подошли к цели нашего поста, единственное мы не создали саму модель. Давайте это исправим. В папке admin/models создадим файл helloworlds.php и добавим в него следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// загружаем библиотеку modellist
jimport('joomla.application.component.modellist');
/**
* создаем model HelloWorldList
*/
class HelloWorldModelHelloWorlds extends JModelList
{
protected function getListQuery()
{
// создаем новый объект запроса
$db = JFactory::getDBO();
$query = $db->getQuery(true);
// выбираем необходимые поля
$query->select('id,greeting');
// Из таблицы hello, которую мы создали в предыдущем уроке
$query->from('#__helloworld');
return $query;
}
}
Все на этом создание дизайна административного интерфейса для нашего компонента закончен. Осталось немного изменить наш файл helloworld.xml, следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.7.0" method="upgrade">
<name>Hello World!</name>
<!-- Данные о разработчике -->
<creationDate>2011</creationDate>
<author>zloykolobok</author>
<authorEmail></authorEmail>
<authorUrl>http://zloykolobok.blogspot.com</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- Версия продукта-->
<version>0.0.7</version>
<!-- Описание компонента-->
<description>Продолжение статей по созданию расширений для CMS Joomla</description>
<install> <!-- Будет выполнено при установке компонента-->
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> <!-- Будет выполнено при удалении компонента -->
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> <!-- Будет исполнено при обновлении. Доступно с версии 1.6 -->
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>
<!-- Копирование файлов в секцию site-->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
</files>
<administration>
<!-- меню в административном разделе-->
<menu>Hello World!</menu>
<!-- Копирование сайтов в секцию Administration -->
<files folder="admin">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<!-- папка для SQL файлов -->
<folder>sql</folder>
<!-- папка tables -->
<folder>tables</folder>
<!-- папка models -->
<folder>models</folder>
<!-- папка views -->
<folder>views</folder>
</files>
</administration>
</extension>
И все создаем zip-архив и можем приступить к проверке нашего компонента для CMS Joomla 1.7. Скачать готовый компонент данного поста Вы можете по данной ссылке.
Устанавливаем компонент. Если установка прошла успешно, то перейдя по пункту меню “Компоненты” ->”hello-world”
Вы должны увидеть следующее:
На этом я заканчиваю данный пост. В следующих статьях мы поговорим о добавлении языков, о добавлении некоторых action в админку для нашего компонента и о многом другом. Для того, чтобы не пропустить выход новых материалов подпишитесь на мой блог или следите за мной в twitter. Станица о CMS Joomla в G+.
Всем удачной разработки.
Как я уже писал выше, например в статье “Создание расширения для CMS Joomla 1.7. Введение.” CMS Joomla основана на принципе MVC Model-View-Controller. И для решения нашей задачи нам понадобиться реализовать данный принцип. Тут я хотел бы обратить внимание, что в административной (backend) части мы строим свою MVC, а для сайта мы строим свою.
Давайте изменим интерфейс нашего компонента, при переходе в настройки этого компонента в административной части сайта.
Откроем нашу папку с компонентом. Если кто-то только начал с нами создавать компонент, то я рекомендую вернуться к первой части данного цикла статей и начать создавать расширение для CMS Joomla сначала, для нетерпеливых Вы можете отсюда скачать компонент на базе которого мы продолжаем изучать создание расширения для CMS Joomla.
Изменим в папке admin файл helloworld.php следующим образом:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импортируем библиотеку контроллеров
jimport('joomla.application.component.controller');
// Получаем экземпляр контроллераHelloWorld
$controller = JController::getInstance('HelloWorld');
// Выполняем запрос задачи
$controller->execute(JRequest::getCmd('task'));
// перенаправляем на установленный контролер
$controller->redirect();
Отлично, теперь нам необходимо создать сам контроллер. В папке admin создаем файл controller.php и помещаем в него следующих код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импортируем библиотеку controller
jimport('joomla.application.component.controller');
/**
* Создаем наш контроллер HelloWorld
*/
class HelloWorldController extends JController
{
function display($cachable = false)
{
// задаем view по умолчани, если другого не задано
JRequest::setVar('view', JRequest::getCmd('view', 'HelloWorlds'));
// поведение при вызове
parent::display($cachable);
}
}
Теперь у нас есть точка входа и контроллер, теперь нам осталось создать view и шаблон.
В папке admin создаем папку views, в папке views создаем папку helloworlds, а в папке helloworlds создаем файл view.html.php, в который добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// импорт библиотеки view
jimport('joomla.application.component.view');
/**
* HelloWorlds View
*/
class HelloWorldViewHelloWorlds extends JView
{
function display($tpl = null)
{
// Получаем данные из модели
$items = $this->get('Items');
$pagination = $this->get('Pagination');
// Проверяем на наличие ошибок.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));
return false;
}
// Вывод данных для просмотра
$this->items = $items;
$this->pagination = $pagination;
// Показывам шаблон
parent::display($tpl);
}
}
Итак обработчик view написали. И завершающий этап создание шаблона. Для этого в папке helloworlds создаем папку tmpl. В папке tmpl создаем файл default.php, а в него уже добавляем следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
// загрузка подсказок поведения
JHtml::_('behavior.tooltip');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld'); ?>" method="post" name="adminForm">
<table class="adminlist">
<thead><?php echo $this->loadTemplate('head');?></thead>
<tfoot><?php echo $this->loadTemplate('foot');?></tfoot>
<tbody><?php echo $this->loadTemplate('body');?></tbody>
</table>
</form>
Тут наверное необходимо отметить, что шаблон нашего компонента в админ части сайта мы разбили на три составляющие: head, foot и body. Для каждой составляющей сосздадим свой файл. В папке tmpl создаем файл default_head.php, который отвечает за вывод верхней части нашего расширения и в него добавим следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
<th width="5">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
</th>
<th width="20">
<input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
</th>
<th>
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
</th>
</tr>
Теперь создадим в папке tmpl файл default_body.php, который будет отвечать за тело нашего компонента и поместим туда следующий код:
<?php
// Права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<?php foreach($this->items as $i => $item): ?>
<tr class="row<?php echo $i % 2; ?>">
<td>
<?php echo $item->id; ?>
</td>
<td>
<?php echo JHtml::_('grid.id', $i, $item->id); ?>
</td>
<td>
<?php echo $item->greeting; ?>
</td>
</tr>
<?php endforeach; ?>
И осталось создать только файл, отвечающий за нижнюю область шаблона для нашего расширения. В папке tmpl создадим файл default_foot.php и поместим туда следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted Access');
?>
<tr>
<td colspan="3"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
Небольшой совет, разбивайте шаблон расширения так, чтобы в верхней (default_head.php) и нижней (default_foot.php) частях были неизменяемые данные, в теле (default_body.php) уже оставьте изменяемые. Да, конечно не всегда это получается, но старайтесь придерживаться данного принципа.
Вот мы практически и подошли к цели нашего поста, единственное мы не создали саму модель. Давайте это исправим. В папке admin/models создадим файл helloworlds.php и добавим в него следующий код:
<?php
// права доступа
defined('_JEXEC') or die('Restricted access');
// загружаем библиотеку modellist
jimport('joomla.application.component.modellist');
/**
* создаем model HelloWorldList
*/
class HelloWorldModelHelloWorlds extends JModelList
{
protected function getListQuery()
{
// создаем новый объект запроса
$db = JFactory::getDBO();
$query = $db->getQuery(true);
// выбираем необходимые поля
$query->select('id,greeting');
// Из таблицы hello, которую мы создали в предыдущем уроке
$query->from('#__helloworld');
return $query;
}
}
Все на этом создание дизайна административного интерфейса для нашего компонента закончен. Осталось немного изменить наш файл helloworld.xml, следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.7.0" method="upgrade">
<name>Hello World!</name>
<!-- Данные о разработчике -->
<creationDate>2011</creationDate>
<author>zloykolobok</author>
<authorEmail></authorEmail>
<authorUrl>http://zloykolobok.blogspot.com</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- Версия продукта-->
<version>0.0.7</version>
<!-- Описание компонента-->
<description>Продолжение статей по созданию расширений для CMS Joomla</description>
<install> <!-- Будет выполнено при установке компонента-->
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> <!-- Будет выполнено при удалении компонента -->
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> <!-- Будет исполнено при обновлении. Доступно с версии 1.6 -->
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>
<!-- Копирование файлов в секцию site-->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
</files>
<administration>
<!-- меню в административном разделе-->
<menu>Hello World!</menu>
<!-- Копирование сайтов в секцию Administration -->
<files folder="admin">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<!-- папка для SQL файлов -->
<folder>sql</folder>
<!-- папка tables -->
<folder>tables</folder>
<!-- папка models -->
<folder>models</folder>
<!-- папка views -->
<folder>views</folder>
</files>
</administration>
</extension>
И все создаем zip-архив и можем приступить к проверке нашего компонента для CMS Joomla 1.7. Скачать готовый компонент данного поста Вы можете по данной ссылке.
Устанавливаем компонент. Если установка прошла успешно, то перейдя по пункту меню “Компоненты” ->”hello-world”
Вы должны увидеть следующее:
На этом я заканчиваю данный пост. В следующих статьях мы поговорим о добавлении языков, о добавлении некоторых action в админку для нашего компонента и о многом другом. Для того, чтобы не пропустить выход новых материалов подпишитесь на мой блог или следите за мной в twitter. Станица о CMS Joomla в G+.
Всем удачной разработки.
готовый компонент что-то не закачивается
ОтветитьУдалитьв ближайшее время перезалью
Удалитьперезалил
Удалить