Как стать автором
Обновить

Использование шаблонов SMARTY с PEAR HTML_QuickForm

Время на прочтение 13 мин
Количество просмотров 3.7K
Автор оригинала: Keith Edmunds

1. Введение.


Что из себя представляет эта статья.


Данная статья является простым введением в использование шаблонов Smarty с классами PEAR HTML_QuickForm. Статья не является исчерпывающим руководством, и фактически представляет лишь малую часть функциональности шаблонов Smarty. Однако для новичка в использовании шаблонов Smarty данная статья будет полезной базой.



Примечание переводчика: Так как Хабр парсирует HTML, в некоторых местах код представлен в виде скринов.

Предпосылки.


Подразумевается, что вы уже установили PHP и PEAR и что вы знакомы с PHP и HTML. Вы также должны быть знакомы с использованием классов PEAR HTML_QuickForm. Помощь с PEAR можете получить на сайте PEAR, помощь с PHP можете получить на сайте PHP и введение в использование HTML_QuickForm можете найти в другой моей статье.

Данная статья написана с практической точки зрения. Если вы хотите получить от нее максимальную пользу, вы должны будете скопировать код примеров отсюда и самим запускать его. Помимо всего прочего, шаблоны используются для представления информации и в этой статье не представлены примеры вывода данных. Если вы хотите видеть шаблоны в действии, вы должны будете сами запускать код. И, наконец, примеры кода представленные в данной статье предназначены для представления использования только шаблонов Smarty. Другими словами, такие функции как проверка данных были опущены для более четкого представления функции шаблонов.

2. Основные формы.


Краткий обзор.


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



Вы должны увидеть форму, ввести информацию и отправить данные. После этого страница перезагрузится с информацией в статичном виде. Если это не работает или вы не понимаете почему это работает, тогда, пожалуйста, посмотрите следующую статью.
Заметьте следующее про код представленный выше:
  • Он содержит PHP/PEAR код, а также HTML,
  • Не существует четкого способа влияния на форматирование отображаемого HTML.


3. Немного теории.



Для чего используются шаблоны?


Как мы увидели в примера выше, по умолчанию шаблоны, созданные классами PEAR HTML_QuickForm, отображаются крайне простым способом – ярлык с последующей формой и с элементами, отображенными друг под другом.
Будучи работоспособными этим формам не хватает некоторых штрихов для профессионального приложения.

Один из проблем генерации программно-контроллируемого HTML является разделение отображаемых элементов от кода программы и это то, что классы PEAR делают весьма успешно.

Шаблоны дают возможность дизайнеру создать намного привлекательные и сложные страницы и в точности определять места отображения элементов форм. Дизайнер работает с файлами HTML, программист работает с PHP кодом и классами PEAR и изменения одного из них не требует изменений второго.

Как шаблоны Smarty работают с HTML_QuickForm?



Из примера выше, строчка $form→display (); вызывает стандартный визуализатор HTML_QuickForms. Заменяя эту строчку можно достичь большего контроля над отображаемым HTML. Это также даст нам возможность разделить код в 2 части: код PHP/PEAR и непосредственно файл шаблона.

Файл шаблона содержит HTML код и некоторые дополнительные теги. На этом простом уровне эти теги являются местами отображения информации. Роль визуализатора состоит в том, чтобы взять данные формы и перенести их в формат, который может быть использован объектом шаблона. Роль объекта шаблона состоит в том, чтобы парсировать файл шаблона и заменить дополнительные теги данными из формы.

Создание и визуализация формы с использованием шаблона является многоступенчатым процессом.

  1. Создается форма с использованием классов PEAR тем же способом как и раньше,
  2. Создается обьект шаблона,
  3. Создается обьект визуализации,
  4. Визуализатор генерирует фрагменты HTML для каждого элемента формы и эти фрагменты, вместе с остальной информацией о формах, собирается в одном большом массиве.
  5. Массив данных формы передается объекту шаблона,
  6. Далее объект шаблона парсирует файл шаблона, заменяет теги данными из массива и отображает HTML.


4. Простой шаблон формы.



Простой пример



Сейчас мы изменим пример выше, чтобы тот использовал шаблон. Нам понадобятся парочка строк require_once в начале файла, также мы заменим строчку $form→display (); кодом шаблона. Также мы можем убрать весь HTML код. Результат показан ниже:

  1. <?php
  2. require_once "HTML/QuickForm.php";
  3. require_once 'HTML/QuickForm/Renderer/ArraySmarty.php';
  4. require_once 'Smarty.class.php';
  5. $form = new HTML_QuickForm('frmTest', 'get');
  6. $form->addElement('header', 'hdrTesting', 'Тестируем Smarty');
  7. $form->addElement('text', 'txtFirstName', 'Имя?');
  8. $form->addElement('text', 'txtLastName', 'Фамилия?');
  9. $form->addElement('text', 'txtAge', 'Возраст?');
  10. $form->addElement('text', 'txtTelephone', 'Номер телефона?');
  11. $form->addElement('reset', 'btnClear', 'Очистить');
  12. $form->addElement('submit', 'btnSubmit', 'Отправить');
  13. if ($form->validate()) {
  14. # Если форма проверена, заморозить данные
  15. $form->freeze();
  16. }
  17. // Создание объекта шаблона
  18. $tpl =& new Smarty;
  19. $tpl->template_dir = '.';
  20. $tpl->compile_dir = '/tmp';
  21. // Создание объекта визуализатора
  22. $renderer =& new HTML_QuickForm_Renderer_ArraySmarty($tpl);
  23. // создание HTML для формы
  24. $form->accept($renderer);
  25. // присвоить массиву данные формы
  26. $tpl->assign('form_data', $renderer->toArray());
  27. // парсировать и отобразить шаблон
  28. $tpl->display('smarty1.tpl');
  29. ?>


Нам также потребуется файл шаблона, который показан ниже. Файл должен быть помещен в ту же папку где находится файл PHP представленный выше.



Форма, показанная кодом выше, конечно же не получит премию за лучший дизайн, но выглядит намного лучше чем в предыдущем примере.

Если у вас возникнут при этом проблемы, проверьте следующее:

  1. Соответствуют ли имена файлов тем, что написано в этой статье?
  2. Находятся ли оба файла в одной и той же папке?
  3. Имеет ли процесс вашего веб-сервера полномочия чтения файлов?
  4. Есть ли у процесса веб-сервера полномочия записи в папку /tmp?

Шаг за шагом: исходный код PHP


Заметьте следующие различия по сравнению с первой версией:
  • Форма представлена двумя столбиками, в отличии от первой версии,
  • Внизу страницы есть статическая информация об авторских правах,
  • Файл PHP содержит только код PHP.

Давайте проанализируем файлы начиная с кода PHP. Помимо дополнительных строчек require_once, первое изменение было сделано, когда мы представили объект шаблона Smarty:
  1. // Создание объекта шаблона
  2. $tpl =& new Smarty;
  3. $tpl->template_dir = '.';
  4. $tpl->compile_dir = '/tmp';

После инициализации, мы подсказываем объекту шаблона где он может найти файл шаблона (в конкретном случае это та же папка) и в какую папку загрузить скомпилированную версию (в конкретном случае это папка /tmp). Можно использовать любые папки, если у процесса веб-сервера есть полномочия чтения в папку шаблона и полномочия записи в папку для скомпилированной версии.
Далее мы инициализируем визуализатор, передавая объект шаблона как параметр:

  1. // Создание объекта визуализации
  2. $renderer =& new HTML_QuickForm_Renderer_ArraySmarty($tpl);


Следующим шагом является создание массива содержащего информацию о форме и фрагменты HTML для каждого элемента. Делается это следующей строкой:

  1. // Создание HTML для формы
  2. $form->accept($renderer);


Следующим шагом передаем массив данных шаблону:

  1. // присвоить массиву данные формы
  2. $tpl->assign('form_data', $renderer->toArray());


Выражение assignсоздает в шаблоне переменную form_data и заполняет его данными ранее определенного массива.
И наконец мы вызываем метод display объекта шаблона, который парсирует файл шаблона и заменяет места отображения данных непосредственными данными для этих мест взятых из массива. Далее отображается HTML:

  1. // визуализировать и отобразить шаблон
  2. $tpl->display('smarty1.tpl');


Массив данных



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



Если захотим изучить данный массив, будучи заполненный данными, мы можем добавить дополнительную строчку в файл PHP, как показано ниже:



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

Шаг за шагом: файл шаблона



Файл шаблона в основном состоит из простого HTML и не содержит интересных вещей для этой статьи. Однако, различные теги и команды для Smarty записаны в скобках. Давайте изучим их.

Первая команда {literal} появляется в начале файла:



Тег {literal} закрытый тегком {/literal}, попросту значит, что текст, который находится между этими двумя тегами должен быть взят в том же виде, не должен быть интерпретирован шаблоном Smarty. Это обязательно в этом случае, так как текст является определением стиля, который сам по себе должен использовать скобки. Без тега {literal} Smarty интерпретировал бы строчку text-align: right; как тег Smarty.
Следующая команда {$form_data.header.hdrTesting} формирует текст заголовка второго уровня. Вызывая ее раньше мы передали шаблону массив данных формы и далее сохранили в переменную form_data следующей строкой:

  1. $tpl->assign('form_data', $renderer->toArray());


В этом массиве есть элемент по имени header, который также является массивом, ключами которого являются имена элементов заголовка и компонентов данных, которые сравнивают текст заголовка. Из этого следует, что строка {$form_data.header.hdrTesting} представляет текст заголовка под названием hdrTesting, который был передан шаблону в массиве form_data.
Остальные теги в файле шаблона просто берут разные элементы массива form_data. Каждый элемент форм отличный от заголовков имеет свой собственный массив в массиве form_data, из чего следует, что, например, элемент txtFirstName может быть представлен в массиве form_data следующим образом:

  1. ["txtFirstName"]=>
  2. array(8) {
  3. ["name"]=>
  4. string(12) "txtFirstName"
  5. ["value"]=>
  6. string(5) "Keith"
  7. ["type"]=>
  8. string(4) "text"
  9. ["frozen"]=>
  10. bool(true)
  11. ["label"]=>
  12. string(11) "First name?"
  13. ["required"]=>
  14. bool(false)
  15. ["error"]=>
  16. NULL
  17. ["html"]=>
  18. string(62) "Keith"
  19. }


В данном примере, form_data.txtFirstName.label будет «First name?» и form_data.txtFirstName.html будет «Keith».
И наконец, шаблон может содержать статическую информацию. В примере выше информация об авторских правах всегда будет отображаться дословно, так как она внедрена в файл шаблона в виде статичного HTML.

5. Интеллектуальная обработка шаблона.



Введение



Не стараясь написать исчерпывающее руководство использования шаблонов Smarty (что весьма успешно сделано на сайте Smarty), в этой части мы изучим несколько простых функций шаблонов Smarty, которые сделают шаблоны намного мощными.

Обработка типа «if-then-else”.



Шаблоны Smarty поддерживают обработку типа if-then-else. Мы можем изменить оригинальный файл шаблона следующим образом:



Переменная $form_data.frozen является логическим, которое равно единице, если форма заморожена. Когда форма отображается в первый раз, заголовком будет служить значение переменной hdrTesting, как было предусмотрено кодом из файла PHP. После того как данные отправлены, форма будет „заморожена“ и отображена в красном цвете.

Более практичным примером будет отображение кнопок формы, если она не заморожена. Это мы сможем сделать следующим образом:



Заметьте, что {if} закрывается {/if}. Шаблоны Smarty также поддерживают ключевые слова {else} и {elseif}, которые работают ожидаемым образом.

Локальные переменные.



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



Комментарии в шаблоне.



Комментарии можно включить в шаблон помещая их между {* и *}. Пример:

  1. {* Это комментарий *}


5. Практические соображения.



Введение



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

Скрытые поля и JavaScript



Скрытые поля используются в формах для хранения контекстной информации. Многие формы используют JavaScript для выполнения различных функций. Как известно, ни скрытые поля, ни код JavaScript не будут отображены на странице, однако эта информация находится в массиве, который передается объекту шаблона. Нам надо будет сделать следующие изменения для того, чтобы использовать эти данные:



Обязательные поля



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

При создании собственных шаблонов мы должны включить код для пометки полей обязательными (если нам нужна такая функциональность). Давайте сделаем наше поле Age обязательным, делая следующие изменения в нашем PHP файле.

  1. $form->addElement('submit', 'btnSubmit', 'Отправить');
  2. $form->addRule('txtAge', 'Поле возраст обязателен', 'required');
  3. if ($form->validate()) {
  4. # Если форма проверена, заморозить данные
  5. $form->freeze();
  6. }


После отображения данной формы мы увидим, что на форме нет пометки о том, что поле Age является обязательным. И если мы оставим поле Age пустым, форма не отправит данные, но не скажет нам почему. Для предотвращения этих проблем мы должны будем сделать некоторые изменения в визуализаторе при помощи метода setRequiredTemplate. Он берет шаблон как аргумент текстовой линии, хотя, конечно, мы можем прочесть внешний файл шаблона при помощи функции PHP file_get_contents (). Для простоты мы непосредственно укажем шаблон.

Шаблон Smarty признает 3 переменные:

  • {$label} – ярлык элемента в вопросе,
  • {$html} – HTML код элемента,
  • {$required} – значение будет «Истина” если данный элемент является обязательным


Будет яснее после ознакомления со следующим примером. Измените PHP код как показано ниже:



Из кода выше видно, что при возникновении ошибки, ярлык элемента должен быть показан красным цветом. Если ошибки нет, отобразить ярлык как обычно. И если это обязательное поле, поместить у нее маленькую красную звездочку.
Если мы сейчас отобразим форму, то увидим, что поле Age имеет маленькую красную звездочку. И если мы отправим данные, оставив поле Age пустым, то форма отобразится с красным ярлыком для поля Age. Однако форма нам не говорит о том, что означает красная звездочка и из за чего данные не отправляются при пустом поле Age.

Сообщения об ошибках.



Подобно методу setRequiredTemplate, визуализатор также имеет метод setErrorTemplate. В дополнение к трем Smarty переменным для setRequiredTemplate, метод setErrorTemplate также поддерживает переменные. Он содержит текст ошибки, который ассоциируется с элементом, который определен во втором аргументе метода addRule.

Далее изменим код PHP следующим образом:



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

И наконец, мы должны объяснить пользователю что именно означает красная звездочка. Делаем это посредством добавления в шаблон поля requirednote. Измените файл шаблона следующим образом:



Это отобразит стандартный текст „requirednote“, но мы можем его изменить в самом PHP файле.



6. Выводы.



Данное руководство только лишь поверхностно представило, что умеет делать Smarty. Однако чаще всего самое трудное это начало, и я надеюсь, что данное руководство помогло вам сделать этот первый шаг. Вторым полезным шагом для вас будет чтение документации Smarty для того, чтобы понять, что еще умеет Smarty делать.
Теги:
Хабы:
+1
Комментарии 4
Комментарии Комментарии 4

Публикации

Истории

Работа

PHP программист
175 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн