Использование шаблонов при программировании WEB-приложений

ЗАЧЕМ ВООБЩЕ ИСПОЛЬЗОВАТЬ ШАБЛОНЫ?

Может, кто-то скажет, а зачем выносить HTML код в отдельный файл если его можно спокойно писать в скрипте? Да конечно в скрипте можно писать HTML код, но просмотреть полностью «собранную», или частично «собранную» страницу которую выводит скрипт, возможно только при его нормальной работе, а во время отладки скрипта, как правило, возникают некоторые трудности. Потом при смене дизайна, опять же, править HTML код в скрипте сущая каторга, сколько раз я слышал о нареканиях со стороны Web-мастеров, что понять какие куски кода и в какой последовательности выносятся невозможно, так как, по большей части, они не программисты и вникать в код скрипта не намерены. И так далее и тому подобное, поэтому, все-таки будем разделять скрипты от HTML кода….

КАКАЯ ДОЛЖНА БЫТЬ СТРУКТУРА ШАБЛОНОВ

Сначала, вынося HTML код из скриптов, я каждый кусок записывал в отдельный файл. Да когда нет особых сложностей в сборке страницы (шапка, основа, подвал), то трудностей нет, но когда страница имеет сложные внедрения, такие как списки, причем одновременно разных видов (например список страниц и список товаров текущей страницы), количество файлов начинало возрастать с неимоверной быстротой (у меня дошло до того, что страница стала собираться из 28 файлов!!!), и опять возникли трудности, неимоверное количество кусков кода, настолько усложнило их обработку и редактирование, что я пришел опять к изначальной точке…
Потом пришла идея – использовать в качестве шаблона, всего 1 файл, который легко редактировать и который легко предварительно просмотреть визуально. То есть использовать в качестве шаблона уже практически готовую страницу, а разбивать её на куски будет сам скрипт.

ПРИМЕР ВЫВОДА СТРАНИЦЫ СПИСКА ТОВАРОВ С ИСПОЛЬЗОВАНИЕМ ОДНОГО ШАБЛОНА


<html><head>   <title>Шаблон списка товаров</title>   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head><body><table width=”100%” border=”0”><tr>       <td>            Список товаров категории 1       </td></tr><tr>       <td>           Страницы &lt;            <font color=”red”><b>1</b></font>           <a href=”?category=1&page=1”>2</a>           <a href=”?category=1&page=1”>3</a>           <a href=”?category=1&page=1”>4</a>           &gt;       </td></tr><tr>       <td>              <table width=”98%” border=”0” >              <tr>                     <td>№ п.п.</td>                     <td>Наименование товара</td>                     <td>Цена товара</td>              </tr>              <tr>                     <td>1</td>                     <td>Товар № 1</td>                     <td>100 р.</td>              </tr>              <tr>                     <td>2</td>                     <td>Товар № 2</td>                     <td>150 р.</td>              </tr>              <tr>                     <td>3</td>                     <td>Товар № 3</td>                     <td>200 р.</td>              </tr>              </table>       </td></tr><tr>       <td>              Страницы &lt;               <font color=”red”><b>1</b></font>              <a href=”?category=1&page=1”>2</a>              <a href=”?category=1&page=1”>3</a>              <a href=”?category=1&page=1”>4</a>              &gt;       </td></tr></table></body></html>


Выглядит наша таблица как:

Список товаров категории 1
Страницы < 1 2 3 4 >
№ п.п.Наименование товараЦена товара
1Товар 1100 р.
2Товар 2150 р.
3Товар 3200 р.
Страницы < 1 2 3 4 >

Какие блоки кода нам понадобятся:

- Страницы, причем вся строка, так как в зависимости от того, сколько у нас будет товаров, у нас будет либо постраничный вывод, либо все товары уместятся на одной странице. Отдельно из этой строки нам понадобится текущая страница, и ссылка на другую страницу;
- Строка с выводом товара;

Что нужно будет изменять на странице:

- Заголовок страницы;
- Заголовок таблицы (название категории);
- Количество и номера страниц;
- № п.п., Наименование товара и Цена товара

После обработки получаем такой HTML-код:

<html><head>   <title>Список товаров категории %name_category%, страница %n_page%</title>   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head><body><table width=”100%” border=”0” ><tr>       <td>              Список товаров категории %name_category%       </td></tr><!-- 1 --> <tr><!-- 1 --> <td><!-- 1 --> Страницы &lt; <!-- 2 --> <font color=”red”><b>%n_page%</b></font><!-- 3 --> <a href=”?category=%id_category%&page=%n_page%”>%n_page%</a><!-- 1 --> <!-- pages --><!-- 1 --> &gt;<!-- 1 --> </td><!-- 1 --> </tr><!-- list_pages --><tr>       <td>              <table width=”98%” border=”0” >              <tr>                     <td>№ п.п.</td>                     <td>Наименование товара</td>                     <td>Цена товара</td>              </tr><!-- 4 --> <tr><!-- 4 --> <td><!-- 4 --> %npp%<!-- 4 --> </td><!-- 4 --> <td><!-- 4 --> %name_goods%<!-- 4 --> </td><!-- 4 --> <td><!-- 4 --> %price_goods%<!-- 4 --> </td><!-- 4 --> </tr><!-- list_goods -->              </table>       </td></tr><!-- list_pages --></table></body></html>


Что получается? Перед каждой строкой определенного блока кода мы вставили небольшой комментарий в виде <!– цифра –>, и в тех местах, где мы должны вставить код мы добавили по дополнительному комментарию (<!–pages –>, <!– list_pages –>, <!– list_goods –>). Причем комментарий <!–pages –> у нас получился в середине куска кода который мы отметили как <!– 1 –>!
Почему мы использовали именно комментарии? Да потому, что при просмотре этого шаблона мы увидим все как положено, без лишних вещей:

Список товаров категории %name_category%
Страницы < %n_page% %n_page% >
№ п.п.Наименование товараЦена товара
%npp%%name_goods%%price_goods%

Мы можем проверить стили и общий дизайн «не отходя от кассы».
Почему мы поставили комментарии напротив каждой строки, а не, скажем, просто метки начала и конца блока? Да потому, что в случае вывода строки списка номеров страниц, нам требуется «выкусить» часть блока, а потом, после обработки, вставить обратно, нам бы пришлось этот блок разбивать не на 3 части а на 4 (начало блока, текущая страница, ссылка на другую страницу, конец блока). Да и потом, мне лично визуально гораздо проще видеть эти блоки в коде.

Ну теперь когда мы сделали шаблон, попробуем его обработать:

У нас есть переменная $category – название категории;
У нас есть переменная $id_category – идентификатор категории;
У нас есть переменная $num_goods – количество товаров на странице;
У нас есть переменная $on_page – текущая страница;
У нас есть массив @goods – наши товары в виде – Наименование|цена|

Пишем код:

# Загружаем шаблон

$file = “list.html”; open (TMP, “$file”); @template = <TMP>; close ($file);

# Разрезаем его на блоки:

foreach (@template) {      if (m/<!-- 1 -->/) {            $_ =~s /<!-- 1 -->//g;                                                 #Избавляемся от ненужного комментария            @line_pages = (@line_pages, $_);                                  #Собираем блок            $_ = "";                                                                      #Обнуляем строку шаблона      }      if (m/<!-- 2 -->/) {            $_ =~s /<!-- 2 -->//g;                                                 #Избавляемся от ненужного комментария            @on_page = (@on_page, $_);                                         #Собираем блок*            $_ = "";                                                                      #Обнуляем строку шаблона      }      if (m/<!-- 3 -->/) {            $_ =~s /<!-- 3 -->//g;                                                 #Избавляемся от ненужного комментария            @off_page = (@off_page, $_);                                        #Собираем блок*            $_ = "";                                                                     #Обнуляем строку шаблона      }      if (m/<!-- 3 -->/) {            $_ =~s /<!-- 3 -->//g;                                                 #Избавляемся от ненужного комментария            @line_goods = (@line_goods, $_);                                  #Собираем блок            $_ = "";                                                                      #Обнуляем строку шаблона      }}

# Собираем строку с номерами страниц

$number = @goods;# Если количество товаров меньше или равно количеству товаров выводимых# на странице, то обнуляем блок где выводится список номеров страницif ($number <= $number_page) {@line_pages = ();}else {      $number_page = $number/$num_goods;      for ($i = 0; $i < $number_page; $i++) {            $page = $i + 1;# Проверяем текущую страницу, и в зависимости от этого присваиваем # временному массиву соответствующий блок            if ($page eq $on_page) {@temp_line = @on_page;}            else {@temp_line = @off_page;}# Обрабатываем текущий массив           foreach (@temp_line) {                $_ =~s /%id_category%/$id_category/gi;                $_ =~s /%n_page%/$page/gi;           }# Прибавляем полученный массив к списку номеров старниц           @temp_list = (@temp_list, @temp_line);      }# Обрабатываем блок с линией списка номеров страниц*    foreach (@line_pages) {          $_ =~s /<!-- pages -->/@temp_list/gi;     }}

# Собираем таблицу с товарами

$first_goods = ($page – 1)*$num_goods;$last_goods = ($page)*$num_goods;if ($last_goods > $number) {$last_goods = $number;}

for ($i = $first_goods; $i < $last_goods; $i++) {     ($name, $price) = split(/|/,@goods[$i]);# присваиваем временному массиву соответствующий блок     @temp_line = @line_goods;     $npp = $i + 1;    foreach (@temp_line) {          $_ =~s /%npp%/$npp/gi;          $_ =~s /%name_goods%/$name/gi;          $_ =~s /%price_goods%/$price/gi;     }# Прибавляем полученный массив к таблице товаров      @list_goods = (@list_goods, @temp_line);}

# Окончательная обработка шаблона

foreach (@template) {     $_ =~s /<!-- list_goods -->/@list_goods/gi;     $_ =~s /<!-- list_pages -->/@line_pages/gi;     # $_ =~s /<!-- pages -->/@temp_list/gi;*}

# Выводим результат на экран

print "Content-type: text/html; charset=windows-1251nn";print "@template";exit;



ЗАКЛЮЧЕНИЕ

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

Поделиться в соц. сетях

mailru Использование шаблонов при программировании WEB приложений
facebook Использование шаблонов при программировании WEB приложений
odnoklassniki Использование шаблонов при программировании WEB приложений
livejournal Использование шаблонов при программировании WEB приложений
googlebuzz Использование шаблонов при программировании WEB приложений

Также рекомендуем:

  1. Построение дерева иерархии с помощью PHP / MySQL Рассмотрим пример построения дерева иерархии (в развернутом виде) на основе информации из базы данных с помощью PHP и MySQL. Ключ к решению данной задачи – использование рекурсивной функции. Иерархия разделов будет храниться в таблице базы данных MySQL. . Ниже на скриншоте показана данная таблица (catalogue): id – первичный ключ таблицы pid – id родительского раздела [...]...
  2. AJAX’овые грабли в Internet Explorer 6 Если передаваемый сервером заголовок с кодировкой не понятен IE, то возникает прекрасная, красноречивая Системная ошибка: -1072896658. IE приводит к нижнему регистру передаваемые custom-заголовки запросов, например X-Requested-With: XMLHttpRequest превращается на сервере в x-requested-with: xmlhttprequest). Нафига? Internet Explorer иногда не кеширует фоновые изображения, полученные через AJAX; повторно загружаемый фон «забывает» посмотреть в кеше. IE некорректно парсит js-код [...]...
  3. Ловушка для спам-бота Многие спам-боты, чтобы скрыть свои реальные имена (названия), которые легко отследить по записи user_agent, изменяют эту запись, меняя её на записи разных браузеров (например: «mozilla/4.0 (compatible; msie 5.5; windows nt 5.0)» и так далее). Также эти боты игнорируют стандарты записей для файла robots.txt (описание стандарта Вы можете прочесть здесь http://www.robotstxt.org/wc/exclusion.html robots.txt standard).. Можно, конечно, пойти [...]...
  4. GlassBox Описание Недавно обнаружили весьма интересную javascript библиотеку Glassbox.С ее помощью можно создавать прозрачные рамки, цветные полупрозрачные слои и различные визуальные эффекты, такие как плавное появление и исчезновение слоев.. Эта библиотека весьма компактна и включает в себя библиотеки Prototype и Script.aculo.us. К основным плюсам библиотеки можно отнести: * Легкость использования; * Кроссбраузерность (Работает в IE6+ , [...]...
  5. Отказ в обслуживании в Microsoft Internet Explorer Программа: Microsoft Internet Explorer 6.x Опасность: Средняя Наличие эксплоита: Да . Описание: Уязвимость позволяет удаленному пользователю вызвать отказ в обслуживании. Уязвимость существует в библиотеке mshtml.dll при обработке тега OBJECT. Удаленный пользователь может с помощью специально сформированной Web страницы вызвать отказ в обслуживании браузера. Примеры: http://lcamtuf.coredump.cx/iedie2-1.htmlhttp://lcamtuf.coredump.cx/iedie2-2.htmlhttp://lcamtuf.coredump.cx/iedie2-3.htmlhttp://lcamtuf.coredump.cx/iedie2-4.html URL производителя: www.microsoft.com Решение: Способов устранения уязвимости не существует в [...]...
  6. PHP и формы Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.. Обработка простых форм посредством PHP не представляет никакого труда. Однако время от времени возникает потребность обработать форму, содержащую несколько однотипных [...]...
  7. Перекрывание селектов в IE6 Даже через абсолютно спозиционированные ДИВ-ы с максимальным zIndex-ом в ИЕ6 «проглядывают» селекты. Задача: подобрать HTML/CSS-способы перекрывания селектов.. Реализация селектов в браузере Internet Explorer 6 такова, что перекрыть их обычными блочными элементами (ДИВ-ы, таблицы) даже при максимальном zIndex-е у последних не получится. Выглядит этот эффект вот так (у ДИВа z-index:10000): Экспериментальным путем было выявлено, что единственный [...]...
  8. Статистика сайта – ответы на вопросы и не только… Статистика веб-сайта родилась из вопросов. Все начинается с этого.. Интересно, как увеличить продажи? Совсем коротко о главном. Человек сидит за компьютером и с помощью браузера просматривает веб-сайт. Сайт состоит из файлов. Интересно, какие файлы просматривают чаще? И кто их просматривает? Чуть подробнее о предмете. Веб-сайт состоит из совокупности файлов – гипертекстовых документов, картинок оформления, данных. [...]...
  9. Как создать 1000 статей за полчаса 1. Качайте SEO Generator2. Пройдите режим обучения программы 3. Работаете со статьей также как с длиным описанием4. Генерируете статью в файлыПодсказка: используйте для отладки фишку: если строка начинаеться с символа #, то эта строка и последующие не будут генериться.Не переусердствуйте с синтаксисом не мучайте программу и свой мозг.Качаете SEO Generator http://www.altalabs.ru/files/SEOGENDEMO.rar. Так-же будет полезна прога [...]...
  10. Правила хорошего поведения при обмене ссылками Обмен ссылками – один из самых распространенных способов привлечения посетителей на новый сайт.. Некоторые менеджеры сайта, самостоятельно занимающиеся раскруткой и продвижением сайтов, игнорируют данный способ раскрутки, мотивируя это тем, что подобный вид продвижения не принесет на сайт большое количество посетителей, и затраты времени на обмен ссылками с сайтами не принесут ожидаемой качественной и количественной отдачи, [...]...
  11. Неоправданное использование ООП Парадигма ООП – замечательный подход к написанию кода. У ООП есть множество неоспоримых преимуществ, самое значительное из которых – возможность использовать заново уже некогда написанный код. Однако все мы рано или поздно осознаём тот факт, что ‘PHP – не объектно-ориентированный язык’. . Несмотря на то, что PHP имеет корректно работающую поддержку объектов, использовать объекты там, [...]...
  12. Софт для вебмастера Как вы знаете, для создания вебстраниц, все вебмастера пользуются программами. А вот какими лучше всего пользоваться мы сейчас и разберем.. 1. Html-редакторы Macromedia HomeSite – весьма популярный html-редактор. Первое что бросается в глаза – это подсветка. Подсветка кода у него просто ужасная, т.к. в ней используются яркие цвета зеленого, синего, красного. Радует то, что цвета [...]...
  13. Преимущества локальной оптимизации Займитесь локальной оптимизацией. Зачастую оптимизации локального поиска не уделяется достаточно внимания, а между тем это отличный способ привлечения на ваш сайт местного трафика. Включив локальную информации в свои тэги и страницы, вы можете потенциальным клиентам найти специальную информацию по району и сфере деятельности, какие их интересует.. Что такое оптимизация локального поиска? Оптимизация локального поиска – [...]...
  14. Яндекс и доп. ссылки для мультиязычных сайтов Яндекс обзавелся механизмом вывода сайтов, имеющих несколько версий на различных языках, в SERP. Если Яндекс «понимает», что найденный текст – перевод исходного с другого языка, то результат поиска выдает под заголовком найденной ссылку на страницу с переведенным документом.. Бывает и так, что сайт имеет два идентичных текста на разных языках. В этом случае адрес страницы [...]...
  15. Работа с SQLite Введение SQLite – это реляционная база данных, запросы к которой можно осуществлять при помощи языка запросов SQL. База данных не поддерживает все особенности SQL и уступает в функциональности другим развитым СУБД, но вполне подходит для хранения и извлечения информации.. Отличие SQLite от MySQL и аналогичных СУБД Классические СУБД, такие как MySQL (а так же MS [...]...

Комментарии запрещены.