Переход на шаблонный дизайн Оптимизация Статьи, информация, Создание сайтов в Рязани

материал подготовил: А. В. Кириллов

Общая схема разработки веб-сайтов с помощью высокоуровневых средств вроде Dreamweaver сводится к получению необходимых данных, например из таблиц MySQL, и дальнейшему их "заковыванию" в дизайн. Как правило, веб-страница, созданная с применением такого механизма разработки, нуждается не просто в изменении дизайна (чего часто хочет ваш клиент), но и в коренной переделке самой структурной схемы ее работы. Это может выражаться как в простейшем вынесении функций и обращений к базам данных в классы, так и в более сложной процедуре рефакторинга всего вашего приложения. Попытаемся опустить все меркантильные составляющие этой проблемы (соотношение стоимости разработки решения с нуля и его переделки в божеский вид) и представим, что вы получили достаточно времени и стимулов для переработки веб-сайта в технически грамотное программное решение.

Основа большинства современных веб-решений - это PHP-скрипт, который использует библиотеки функций и позволяет подключать разнообразные виды внешнего оформления. Для быстрой смены дизайна используется так называемый механизм шаблонов, который представляет собой способ разделения оформления веб-сайта и его содержимого. В простейшем случае решение такого типа позволяет абстрагироваться от полета мысли дизайнера. Также это дает возможность достаточно просто сменить внешний вид веб-сайта, не вдаваясь в реальные проблемы программирования. Конечно, PHP, являющийся одним из самых массовых веб-интерпретаторов, достаточно гибок, и под него наработано уже настолько много разнообразных решений, что создание очередного веб-проекта часто упирается в вопрос выбора готового "движка".

Как правило, такая схема коренным образом отличается от чисто линейного вывода данных со вставками PHP-кода. Во-первых, для качественного решения задачи "шаблонирования" веб-сайта необходимо подготовить все данные перед началом вывода информации. Во-вторых, часто бывает нужно применять многоуровневое "шаблонирование". Одно из наиболее выдающихся решений такого типа - это популярный форум PHPBB, который позволяет отлично настраивать свой внешний вид на уровне как строк данных, так и в целом всей страницы. При этом дизайн составляющих частей как бы вкладывается, постепенно переходя с уровня "боксов" с информацией к общему виду веб-страницы. В итоге любой пользователь этого программного решения получает отличную возможность настройки форума под внешний вид своего сайта.

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

... 
<table> 
  <tr> 
    <td> 
    Меню  системы 
    <a  href="./login.php">Войти  в  систему</a> 
<?  if  (isUser())  {  ?> 
        <a  href="./logout.php">Выход</a> 
<?  };  ?> 
    </td> 
  </tr> 
  <tr> 
    <td>Информационное  наполнение  сайта</td> 
  </tr> 
</table> 
...

В этом примере пункт меню "Выход" появляется только в случае успешного входа пользователя в систему. С помощью вставок кода if (isUser()) ... программист веб-страницы выполнил простейшее переключение режима отображения части меню в зависимости от факта входа конкретного пользователя в систему.

Попытаемся теперь представить себе ситуацию, когда отлаженный скрипт приходится подгонять под совершенно другой стиль оформления. В этом случае простой квалификации веб-дизайнера может быть недостаточно. Конечно, вы заметите, что приведенный пример чрезвычайно прост. Но в реальной обстановке можно столкнуться с достаточно изощренным решением, которое мало того что не комментировано на уровне кода, но еще и не имеет встроенного шаблонного механизма. Характерный стиль оформления кода часто встречается в разовых веб-решениях, которые не планируется использовать серийно. Дело здесь не столько в квалификации разработчика, сколько в поджимающих сроках, что часто приводит к получению уникального решения, которое совершенно нежизнеспособно при переходе на другую платформу или при изменении способа хранения данных. Такие вопросы, как безопасность информации, разработчиками обычно парируются уникальностью решения и сложностью получения их исходных кодов.

С чего следует начать  

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

top.php - скрипт, в котором подключаются все возможности вашего интерпретатора и необходимые для его работы внешние библиотеки. Обратите внимание - в этом скрипте информация подготавливается, но не выводится в клиентский браузер. Весь вывод пройдет в самой последней части описываемой структуры. Файл (или набор скриптов) top.php может быть как уникальным для вашей веб-системы, так и состоящим из нескольких составляющих частей. Конечно, оптимален вариант унитарного файла. При этом вы получаете опять же очередной плюсик в виде возможности включения или выключения отладочных Notice и Warnings, а также ваших личных сообщений;
xxxxx.php - веб-программа, уникальная для каждого из разделов вашего сайта. Как минимум, необходимо создать index.html, который будет генерировать данные для стартовой страницы;
bot.php - формирование данных для основного шаблона. Именно в этой части структуры и будет происходить вызов функции слияния шаблона и исходных данных.

Постепенный переход  

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

Скрипт top.php - подготовка и включение внешних библиотек функций:

... 
require_once("./functions.php"); 
...

Основной (управляющий) скрипт подготавливает меню и включает определения функций в top.php и парсер данных в bot.php:

require_once("./top.php"); 
$arr_menu  =  array(); 
$i  =  1; 
$arr_menu["name".$i]  =  "Главная"; 
$arr_menu["href".$i++]  =  "index.html"; 
$arr_menu["name".$i]  =  "Войти  в  систему"; 
$arr_menu["href".$i++]  =  "login.php"; 
 
if  (isUser()) 
{ 
  $arr_menu["name".$i]  =  "Логин"; 
  $arr_menu["href".$i++]  =  "logout.php"; 
} 
$arr_main_template["menu"]  =  parse_template("./menu.html",  $arr_menu); 
require_once("./bot.php");

Вывод данных в bot.php будет выглядеть следующим образом:

$site_str_  =  parse_template("./main_template.html",  $arr_main_template); 
$site_str  =  enchance($site_str); 
echo  $site_str;

С помощью функции enchance() проводится оптимизация получаемого HTML-кода. Таким образом, для большого веб-проекта можно значительно сократить объем передаваемого трафика при сохранении его смыслового содержимого.

Трехуровневая структура  

К приведенному тексту требуются небольшие пояснения. В качестве функции, которая подготавливает вывод в браузер, используется parse_template(). Основное назначение этой функции - подставить значения из переданного ей массива (второй параметр) в шаблонный файл (первый параметр). Таким образом, в index.html можно создать подходящее вам меню (а лучше всего вынести его создание или формирование в menu.php, после чего включить код в скрипт раздела).

Шаблонная функция  

В приведенном примере продемонстрировано применение двухуровневой модели макетирования данных веб-сайта в готовый дизайн. Как правило, переход от произвольной структуры скрипта к более упорядоченной требует коренной его переделки. Чтобы избежать этого (когда поджимают сроки), можно воспользоваться функциями буферизированного вывода ob_start() и ob_get_contents() для формирования данных с помощью старого кода, чтобы затем обрамлять эти данные в новый дизайн с помощью функции вроде parse_template() из приведенного выше примера. Реальное исполнение задачи требует применения более продвинутых шаблонных механизмов. Но, как правило, набор функций, которые могут понадобиться при внедрении вашего дизайна, четко ограничен. И зачастую бывает необходимо только выполнять подстановку строки и вывод файла в указанных позициях шаблона. А такая задача решается просто и красиво с применением PHP-функций для работы с регулярными выражениями preg*().