Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

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

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

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

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

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

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

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

 

Заполняем основные данные компонента:
В качестве названия компонента вводим "Форма обратной связи"
В поле "Системное имя:" вводим например "form"

Переходим на вкладку "Таблицы" и добавляем одну табличку которую мы назовем form_messages

Переходим на вкладку "Пользовательская часть"
Тут нам нужно добавить два вида:

  1. form - вид в котором будет отображаться наша форма!
  2. 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

Загрузка...

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

<field name="limit" type="text" value="10" label="Количество записей" />

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

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

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

<fieldset name="global" label="JGLOBAL_FIELDSET_OPTIONS">

<field name="recipient" type="text" value="" label="Получатель:"/>

<field name="subject" type="text" value="" label="Тема письма:"/>

<field name="message" type="editor" value="" label="Сообщение об удачной отправке:" buttons="false" filter="RAW"/>

</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>

<field name="test" type="text" label="test field" class="span3" />

</fieldset>

</form>

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

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

<?xml version="1.0"?>

<form>

<fieldset>

<field name="name" type="text" label="Имя:" class="span3" required="true" />

<field name="email" type="text" label="E-mail:" class="span3" required="true" validate="email"/>

<field name="text" type="textarea" label="Сообщение:" class="span3" required="true" />

</fieldset>

</form>

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

Теперь нам нужно вывести эти поля в форме!
Для этого откроем файл 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;

?>

<div class="item-page">

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

<?php

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

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

?>

</div>

 

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

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

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

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

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

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

Для начала уберем первые два пункта. Для этого открываем файл: 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 и удаляем следующие строки кода:

<th width="5%" style="min-width:55px" class="center">

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

</th>

<th width="10%" class="hidden-phone">

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

</th>

 

<td class="center">

<div class="btn-group">

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

</div>

</td>

<td class="small hidden-phone">

<?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;

?>

<script type="text/javascript">

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">

<div class="row-fluid">

<!-- Begin Content -->

<div class="form-horizontal">

<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>

</div>

<input type="hidden" name="task" value="" />

<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

*

* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.

* @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:

<field name="mycaptcha" type="mycaptcha" label="" class="span1" required="true" />

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

<div class="control-group form-inline">

<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; просмотров: 183 | Нарушение авторских прав




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

mybiblioteka.su - 2015-2018 год. (0.101 сек.)