Уроки по созданию компонентов для Joomla (Часть 1: создаем каркас компонента)

Уроки по созданию компонентов для Joomla (Часть 1: создаем каркас компонента)

Сегодня начинаю серию практических уроков по созданию компонента для Joomla 2.5+

Для лучшего восприятия материала будем рассматривать процесс создания формы обратной связи.
Форма будет отправлять данные на указанный E-mail данные и будет сохранять архив отправленных сообщений в базу данных, которые можно будет удобно посмотреть через административную часть.

Данный урок будет создаваться под Joomla 3.x, но основные принципы создания в Joomla 2.5 точно такие же, отличаются только шаблоны вывода в административной части

Для создания каркаса компонента мы воспользуемся сервисом для создания компонентов.

Итак приступим к генерации компонента:

Заполняем основные данные компонента: В качестве названия компонента вводим "Форма обратной связи" В поле "Системное имя:" вводим например "form"
Переходим на вкладку "Таблицы" и добавляем одну табличку которую мы назовем form_messages
Переходим на вкладку "Пользовательская часть" Тут нам нужно добавить два вида: form - вид в котором будет отображаться наша форма! result - вид в котором будут отображаться данные о успешной отправке формы!
Теперь приступим к настройке видов. Сначала настроим вид "form" Нажимаем на кнопку настроить, и в появившемся всплывающем окне выбираем тип вида "Вид формы". После этого появится дополнительное поле "Связать с таблицей". В поле "Выбрать таблицу" из выпадающего списка выбираем созданную нами таблицу
Теперь настроим вид "result" а точнее настраивать не будем) Так как мы будем выводить пустое сообщение то мы будем использовать для этого "Пустой вид"
Приступаем к конфигурировании административной части Выбираем закладку "Админка" и добавляем в него вид с названием "archive"
И настроим наш вид Выбираем тип вида "Вид с функциями редактирования" и прикрепляем табличку которую мы создали в закладке "Таблицы" В поле Связать с категорией: оставляем значение "НЕТ"

При желании заполняем данные в языковых файлах и нажимаешь на кнопку Сформировать компонент

После чего вам будет предложено сохранить архив с каркасом компонента с таким содержимым:

Важно понимать что файлы из папки site после установки будут помещены в папку components и файлы из папки admin после установки будут помещены в папку administrator/components

У пользовательской части и административной части будут разные точки инициализации практически никак друг с другом не связанные!
В моделях пользовательской части можно использовать таблицы которые помещены в папку administrator/components/com_forms/tables/

Также в пользовательской части можно получать данный из настроек нашего компонента!

Полученный нами архив устанавливаем через менеджер расширений, и дальнейшую разработку мы будем проводить уже в установленной системе.

Уроки по созданию компонентов для Joomla (Часть 2: настройка компонента)

Продолжение серии уроков по созданию MVC компонента

В этой части мы рассмотрим настройки административной части и принципы работы MVC компонента

После установки компонента в административной части в меню Компоненты появится подпункт Форма обратной связи
При входе в этот компонент нам будут доступны настройки компонента, и список записей которыми мы можем управлять.

Теперь нас интересуют настройки нашего компонента, при нажатии на кнопку Настройки мы попадем в конфигурацию компонента!
Поля которые мы видим в настройках этого компонента создаются через специальный конфигурационный xml файл который находится по адресу administrator/components/com_form/config.xml

Теперь нам нужно внести изменения в файле config.xml

Для начала удаляем секцию:

Теперь нам нужно ввести три своих поля:

Получатель - на какой E-mail придет сообщение с формы.
Тема письма: - тема письма.
Сообщение об удачной отправке - сообщение которое отобразится пользователю в случае успешной отправки сообщения

Для этого вносим в секцию global три новых поля. Пример секции c этими полями ниже

</fieldset>

После этого поля нужно заполнить и нажать на кнопку сохранить!

Далее для удобства создадим пункт меню ссылающийся на нашу форму обратной связи в менеджере меню!
Как мы можем заметить у нас две записи: Форма обратной связи и Сообщение
Вид Сообщение нам не нужен! что бы он не выводился удаляем файл default.xml который лежит по адресу: components/com_form/views/result/tmpl/default.xml
После удаления этого файла при создании пункта меню вид "Сообщение" будет недоступен

После создания пункта меню на сайте появится базовая форма с одним полем!

Итак основные принципы работы MVC компонента:

После того как мы создали пункт меню и переходим на него на самом деле открывается ссылка: index.php?option=com_form&view=form
Наш компонент сначала проинициализируется через точку входа components/com_form/form.php и если не будет передана задача в переменной task у нас запустится контроллер по умолчанию из файла controller.php и в нем выполняется метод display() который подключит вид из папки components/com_form/views/form/view.html.php

Наш вид подключит модель из папки components/com_form/models/form.php которая загрузит форму и и вернет её в модель.

После этих действий наш вид отобразит шаблон котрый лежит по адресу: components/com_form/views/form/tmpl/default.php и мы увидим непосредственно нашу форму с одним полем!

Когда мы нажимаем на кнопку "Сохранить" в нашей форме происходят те же самые процессы инициализации!
Но так как в форме есть передача task с названием form.save это означает что подключится контроллер который лежит в components/com_form/controllers/form.php.
Этот контроллер наследуется от класса JControllerForm в котором есть метод save который произведет валидацию формы, и если форма валидна и все данные корректны вызовет метод save в модели components/com_form/models/form.php и если наша модель из метода save вернет true то нас перекинет на вид который в нашем контроллере указан в переменной $this->view_list = 'Form';, то есть мы перейдем на этот же вид! и если наша модель из метода save вернет False то загрузится текущий вид, выведется сообщений об ошибке и все незаполненные поля сохранят введенные в них до отправки данные!

Уроки по созданию компонентов для Joomla (Часть 3: программирование пользовательской части компонента)

Третий урок по созданию MVC компонента

В этом уроке мы создадим форму для отправки сообщений, а так же отправим его на указанный E-mail указанный в настройках, сохраним запись в базу данных и выведем пользователю сообщение об успешной отправке сообщения!

Для начала отредактируем XML файл с нашей формой. Файл у нас находится по адресу: components/com_form/models/forms/form.xml
Сейчас этот файл содержит следующий код:

<?xml version="1.0"?>

<form>

</fieldset>

</form>

В нашей форме только одно поле с именем test. Нам нужно его удалить(или изменить) и сделать что бы у нас было 3 поля: Имя, E-mail и Сообщение

После добавления этих полей форма у нас будет выглядеть так:

<?xml version="1.0"?>

<form>

</fieldset>

</form>

Если обратить внимание у нас появилось несколько дополнительных атрибутов в полях field:

required="true" - означает что поле будет обязательное, если его не заполнить будет ошибка!
validate="email" - означает что выполнится проверка или в это поле введен E-mail адрес (проверка будет выполняться только на стороне сервера)

Теперь нам нужно вывести эти поля в форме!
Для этого откроем файл components/com_form/views/form/tmpl/default.php

Для вывода полей формы, которые мы перед этим создали в XML файле, используются строки:

//для вывода метки поля из атрибута "label"

echo $this->form->getLabel('name');

//для вывода самого поля, название поля содержится в атрибуте "name"

echo $this->form->getInput('name');

Теперь нам нужно вывести три наших поля в форме, и код шаблона нашей формы изменится на такой:

	<?php // No direct access defined('_JEXEC') or die; ?> <div class="item-page"> <h1>Форма обратной связи</h1> <form action="<?php echo JRoute::_('index.php?view=form')?>" method="post" class="form-validate"> <div class="control-group form-inline"> <div class="control-label"><?php echo $this->form->getLabel('name');?></div> <div class="controls"><?php echo $this->form->getInput('name');?></div> </div> <div class="control-group form-inline"> <div class="control-label"><?php echo $this->form->getLabel('email');?></div> <div class="controls"><?php echo $this->form->getInput('email');?></div> </div> <div class="control-group form-inline"> <div class="control-label"><?php echo $this->form->getLabel('text');?></div> <div class="controls"><?php echo $this->form->getInput('text');?></div> </div> <input type="hidden" name="task" value="form.save" /> <input type="submit" value="Отправить" /> <?php echo JHtml::_('form.token');?> </form> </div>
После проделанных манипуляций наша форма будет выглядеть как на картинке справа:
Если мы не корректно заполним какое то поле и попробуем отправить форму нажав на кнопку отправить, то получим сообщение об ошибке:
Если мы хотим добавить валидацию на стороне клиента то нам нужно в php код вставить такую строку: JHtml::_('behavior.formvalidation'); У тега form должен быть класс class="form-validate"

В форме у нас есть одно скрытое поле:
<input type="hidden" name="task" value="form.save" /> это поле означает что наш скрипт запустит задачу save в контроллере form

И еще одна непонятная конструкция в форме это: <?php echo JHtml::_('form.token');?>.
Эта конструкция на самом деле всего лишь вставляет скрытое поле с уникальным значением! Служит это поле для защиты отправки формы вне сайта, то есть не выйдет создать на каком то чужом сайте форму с такими полями и отправлять на адрес этой формы какой либо спам!
Приблизительная его работа - в сессии генерируется случайное значение, и выводится в этом поле, после отправки формы проверяется или это значение пришло и совпадает ли оно с тем что установлено в форме!

На этом вывод формы завершен!

Теперь нам нужно зайти в контроллер нашей формы который находится по адресу: components/com_form/controllers/form.php. В нем есть такая строка:

$this->view_list = 'Form';

В этой строке мы указываем на какой вид мы попадем в случае успешной отправки нашей формы. Так как мы хотим выводить отдельный вид result на котором будет сообщение которое мы заполняем в конфигурационном файле, то смело меняем значение в этой строке на result:

$this->view_list = 'result';

Теперь приступим непосредственно к отправке письма и сохранения в архив записи!
Открываем нашу модель: components/com_form/models/form.php.

В модели у нас есть метод:

public function save($data){ return parent::save($data); }

Который выполняет сохранение данных и в случае успешного сохранения возвращает true. В этом методе есть одно значение $data которое представляет из себя асоциированный массив, в котором будут значения из отправленных в форме полей!
То есть например в $data['name'] - будет значение из поля "Имя"

Теперь нам нужно сформировать тело письма, отправить письмо и сохранить его в базе данных! Эту часть у нас выполнит следующий код:

public function save($data){

//Формируем тело сообщения

$body = '<table class="table table-bordered table-striped table-hover">';

$body.= '<tr><td>Имя:</td><td>'. $data['name']. '</td></tr>';

$body.= '<tr><td>E-mail:</td><td>'. $data['email']. '</td></tr>';

$body.= '<tr><td>Текст сообщения:</td><td>'. $data['text']. '</td></tr>';

$body.= '</table>';

//Получаем данные из конфиг файла

$params = JComponentHelper::getParams('com_form');

//Адрес получателя письма

$recipient = $params->get('recipient');

//Тема письма

$subject = $params->get('subject');

//Получаем экземпляр таблицы form_messages

$table = $this->getTable('form_messages');

//Данные которые запишем в базу данных

$archiveData = array(

'title' => 'Сообщение от '. $data['name'],

'text' => $body

);

//Заносим данные в таблицу

$table->bind($archiveData);

//если удалось сохранить запись в базу данных то отправляем E-mail

if ($table->store()) {

//Отправляем почту

//Получаем данные о конфигурации сайта

$config = JFactory::getConfig();

//Получаем экземпляр класса JMail

$mailer = JFactory::getMailer();

//Указываем что письмо будет в формате HTML

$mailer->IsHTML(true);

//Указываем отправителя в качестве отправителя письма адрес и название которые у нас хранятся в конфиге сайта

$mailer->setSender(array($config->get('mailfrom'), $config->get('fromname')));

//Указываем тему письма

$mailer->setSubject($subject);

//указываем получателя письма

$mailer->addRecipient($recipient);

//Добавляем текст письма

$mailer->setBody($body);

//Отправляем письмо

$mailer->send();

//возвращаем true тем самым говоря что сообщение успешно отправлено

return true;

}

//Не удалось по какой то причине отправить сообщение

return false;

}

Теперь наша форма сохраняет данные в базу данных, и отправляет данные на E-mail который вы указали в настройках нашего компонента в административной части!

После отправки формы мы перейдем на вид result и получим сообщения о сохранении данных:
Если зайдем в административную часть и выберем "Компоненты" -> "Форма обратной связи", то увидим что у нас появилась новая запись

Теперь нам нужно немного доработать наш вид result что бы он выводил сообщение которое мы сохранили в конфигурационном файле.
Открываем файл components/com_form/views/result/tmpl/default.php

<?php

// No direct access

defined('_JEXEC') or die;

<h1>Форма контактов</h1>

<?php

$params = JComponentHelper::getParams('com_form');

echo $params->get('message');

</div>

Уроки по созданию компонентов для Joomla (Часть 4: настройка административной части)

Четвертый урок по созданию MVC компонента.

В этом уроке будет минимум программирования. В основном мы будем немного приводить в божеский вид нашу админку, удаляя или переписывая часть кода.
Что же не так в админке спросите вы?

Всего лишь присутствие ненужных полей например как автор, публикация сообщений, так же сортировка по этим полям, кнопки которые позволяют снять с публикации материал или отредактировать его, а так же отображение сохраненного письма в визуальном редакторе!

Если мы откроем наш компонент в административной части то увидим что у нас лишние поля:

Списки фильтрации: выбор состояния и выбора автора
Кнопки: Создать, изменить, опубликовать и Снять с публикации
Поля в таблице: Состояние и Автор

Для начала уберем первые два пункта. Для этого открываем файл: administrator/components/com_form/views/archives/view.html.php и меняем его код на следующий:

<?php

// No direct access

defined('_JEXEC') or die;

/**

* View to display a list of items

* @author Aleksandr Denezh

class FormViewArchives extends JViewLegacy

{

protected $items;

protected $pagination;

protected $state;

protected $user;

/**

* Method to display the current pattern

* @param type $tpl

public function display($tpl = null)

{

$this->items = $this->get('Items');

$this->pagination = $this->get('Pagination');

$this->state = $this->get('State');

$this->user = JFactory::getUser();

$this->loadHelper('form');

$this->_setToolBar();

parent::display($tpl);

}

/**

* Method to display the toolbar

protected function _setToolBar()

{

JToolBarHelper::title(JText::_('COM_FORM'));

$canDo = formHelper::getActions('archive');

if ($canDo->get('core.delete')) {

JToolBarHelper::deleteList('DELETE_QUERY_STRING', 'archives.delete', 'JTOOLBAR_DELETE');

JToolBarHelper::divider();

}

if ($canDo->get('core.admin')) {

JToolBarHelper::preferences('com_form');

JToolBarHelper::divider();

}

formHelper::addSubmenu('archives');

}

protected function getSortFields()

{

return array(

'ordering' => JText::_('JGRID_HEADING_ORDERING'),

'title' => JText::_('JGLOBAL_TITLE'),

'created' => JText::_('JDATE'),

'id' => JText::_('JGRID_HEADING_ID')

);

}

Далее открываем файл шаблона этого вида по адресу administrator/components/com_form/views/archives/tmpl/default.php и удаляем следующие строки кода:

<?php echo JHtml::_('grid.sort', 'JSTATUS', 'state', $listDirn, $listOrder);?>

</th>

<?php echo JHtml::_('grid.sort', 'JAUTHOR', 'created_by', $listDirn, $listOrder);?>

</th>

<?php echo JHtml::_('jgrid.published', $item->state, $i, 'archives.', $canChange, 'cb');?>

</div>

</td>

<?php echo $this->escape($item->created_by);?>

</td>

После внесения изменения в этих двух файлах наш список видов примет следующий вид:

Теперь мы отредактируем шаблон редактирования записи!

Открываем файл вида по адресу administrator/components/com_form/views/archive/view.html.php

Нам нужно отредактировать метод: _setToolBar(), и привести его к следующему виду:

protected function _setToolBar()

{

JFactory::getApplication()->input->set('hidemainmenu', true);

JToolBarHelper::title('Просмотр сообщения');

JToolBarHelper::cancel('archive.cancel', 'JTOOLBAR_CLOSE');

}

После этого открываем шаблон формы редактирования который находится по адресу: administrator/components/com_form/views/archive/tmpl/edit.php, и привести его к такому виду:

<?php

// No direct access

defined('_JEXEC') or die;

JHTML::_('behavior.tooltip');

JHTML::_('behavior.keepalive');

$input = JFactory::getApplication()->input;

Joomla.submitbutton = function (task) {

if (task == 'archive.cancel' || document.formvalidator.isValid(document.id('item-form'))) {

Joomla.submitform(task, document.getElementById('item-form'));

} else {

alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED'));?>');

}

</script>

<form action="<?php echo JRoute::_('index.php?option=com_form&id='. $this->form->getValue('id'));?>" method="post" name="adminForm" id="item-form" class="form-validate" enctype="multipart/form-data">

<p><?php echo $this->item->title;?></p>

<p> Отправлено: <?php echo JHtml::_('date', $this->item->created, 'd.m.Y H:i');?></p>

<?php echo $this->item->text;?>

</div>

<input type="hidden" name="return" value="<?php echo $input->getCmd('return');?>" />

<?php echo JHtml::_('form.token');?>

</form>

После внесения изменения в этих двух файлах просмотр сообщения будет выглядеть так:

На этом настройка административной части, а также наш урок завершен!

Уроки по созданию компонентов для Joomla (Часть 5: улучшение пользовательской части)

Последний урок из цикла создания статей MVC компонента

В этом уроке мы добавим простенькую защиту от роботов, а также выведем заголовки, ключевые слова и описания.

Итак для начала мы отредактируем заголовки и ключевые слова!

За это отвечает функция formHelper::setDocument('view title', $this->baseurl); которая находится в каждом методе display(); наших видов

Эта строка вызываем метод setDocument который находится в файле components/com_form/helpers/form.php и который всего лишь устанавливает заголовки, ключевые слова и описания тоесть мы должны написать так:

formHelper::setDocument('Форма обратной связи', $this->baseurl, 'Описание страницы', 'Ключевые слова страницы');

На этом установка ключевых слов, описаний и заголовков завершена!

Теперь займемся созданием поля для защиты от спам бота.

Для этого нам нужно создать файл с названием mycaptcha.php в папке components/com_form/models/fields/

И добавляем в него следующий код:

<?php

/**

* @package Joomla.Administrator

* @subpackage com_content

* @license GNU General Public License version 2 or later; see LICENSE.txt

defined('JPATH_BASE') or die;

/**

* Class JFormFieldMyCaptcha

class JFormFieldMyCaptcha extends JFormFieldText

{

/**

* @var string

protected $type = 'MyCaptcha';

/**

* Метод для создания поля

* @return string

public function getInput()

{

//Устанавливаем атрибуты сессии

$size = $this->element['size']? ' size="'. (int)$this->element['size']. '"': '';

$maxLength = $this->element['maxlength']? ' maxlength="'. (int)$this->element['maxlength']. '"': '';

$class = $this->element['class']? ' class="'. (string)$this->element['class']. '"': '';

$readonly = ((string)$this->element['readonly'] == 'true')? ' readonly="readonly"': '';

$disabled = ((string)$this->element['disabled'] == 'true')? ' disabled="disabled"': '';

$onchange = $this->element['onchange']? ' onchange="'. (string)$this->element['onchange']. '"': '';

//Генерируем два случайных числа

$number1 = mt_rand(1, 9);

$number2 = mt_rand(1, 9);

//Получаем сессию

$session = JFactory::getSession();

//Устанавливаем в сессию значение суммы наших сгенерированных чисел

$session->set('mycaptcha', $number1 + $number2);

//Формируем поле

$html = 'Сколько будет '. $number1. ' + '. $number2. '?: ';

$html.= '<input type="text" name="'. $this->name. '" id="'. $this->id. '"'. ' value="'

. htmlspecialchars($this->value, ENT_COMPAT, 'UTF-8'). '"'. $class. $size. $disabled. $readonly. $onchange. $maxLength. '/>';

return $html;

}

Теперь мы добавляем в файл с нашей формой (components/com_form/models/forms/form.xml) наше поле в секцию fields:

Далее в шаблоне нашего вида нужно вывести наше поле:

<div class="controls"><?php echo $this->form->getInput('mycaptcha');?></div>

</div>

После того как мы выполнили этот код

Теперь нам нужно внести в контроллер проверку нашего поля на корректность ввода.
открываем файл components/com_form/controllers/form.php, и добавляем в него следующий метод:

public function save($key = null, $urlVar = null)

{

//Получаем наше приложение

$app = JFactory::getApplication();

//Данные коотрые пришли из формы

$data = $this->input->post->get('jform', array(), 'array');

//Получаем нашу модель

$model = $this->getModel();

//получаем нашу форму

$form = $model->getForm($data, false);

//Проводим валидацию данных формы

$validData = $model->validate($form, $data);

//Идентификатор записи

$recordId = $this->input->getInt($urlVar);

//Контекст

$context = "$this->option.edit.$this->context";

//объект сессии

$session = JFactory::getSession();

//проверяем или данные из сессии совпадают с тем что прошло из формы

if ((int)$session->get('mycaptcha')!= (int)$data['mycaptcha']) {

//Устанавливаем данные для формы

$app->setUserState($context. '.data', $validData);

//Создаем ошибку о неверно заполненном поле с суммой цифр

$this->setError(JText::sprintf('Вы неверно ввели сумму цифр', $this->getModel()->getError()));

//Устанавливаем сообщение для системы

$this->setMessage($this->getError(), 'error');

//Редиректим обратно на форму с отображением ошибок

$this->setRedirect(

JRoute::_(

'index.php?option='. $this->option. '&view='. $this->view_item

. $this->getRedirectToItemAppend($recordId, $urlVar), false

)

);

return false;

}

return parent::save($key, $urlVar);

}

Если мы введем неправильную сумму цифр то мы получим сообщение об ошибке:

Дата добавления: 2015-08-27; просмотров: 285 | Нарушение авторских прав

<== предыдущая лекция	\|	следующая лекция ==>
	\|	Стоимость доставки из Алматы

mybiblioteka.su - 2015-2024 год. (0.093 сек.)