Разделение кода и шаблона, MVC — Часть I

Разделение кода и шаблона, MVC — Часть 1
То, что я попытаюсь рассказать в этой статье, нельзя назвать обязательным для немедленного изучения новичку. Это будет не урок по кодингу, а скорее урок по стилю написания кода. Несмотря на то, что обычно данную тему рассматривают лишь достаточно неплохо подучив сам язык программирования, я всё же думаю, что рассказать сейчас — не будет лишним, а лишь полезным и не позволит потратить Вам в будущем львиную долю времени на переписывание кода…

В процессе работы над проектом программист и дизайнер могут столкнуться с проблемой разделения кода и дизайна. Если не предпринять с самого начала определённые меры, эти проблемы обязательно появятся, а если менеджеру проекта заблагорассудится ещё и изменить дизайн, то дизайнер и кодер просто повесятся… Поэтому лучше предпринять все меры заранее. С этой проблемой в процессе написания «Гостевой книги» столкнулись и мы. Было решено переписать весь код с учётом MVC (об этой технологии мы расскажем в следующей статье). После этого дизайн меняется без помощи программиста.

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

Попытаемся рассмотреть все способы отделения кода от шаблона. Шаблоном мы будем называть HTML-код, написанный верстальщиком.

Самым простым способом, которым пользуются начинающие PHP-программисты — это вывод всего HTML-кода через echo или print.

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

1
2
3
4
5
6
7
8
9
10
11
<?
echo "<html><body>\n";
echo "Текст какой-либо новости на сайте
\n";
for ($i=1; $i<=10; $i++)
	{
	echo "$i-й комментарий
\n";
	}
echo "</html></body>";
?>

Вроде всё неплохо, всё ведь прекрасно работает, однако чтобы «повесить» хоть какой-то дизайн на эту страницу, верстальщику придётся во все echo дописывать целую кучу html-кода. Большинство верстальщиков попросту пошлют заказчика с таким кодом…

Вывод: таким способом просто запрещено писать. Хотите понять почему — попробуйте хоть немного поработать в таком стиле 🙂

Второй способ заключается во вставках PHP-кода внутрь html. Для прошлого примера это будет выглядеть примерно так:

1
2
3
4
5
6
7
8
9
10
11
<html><body>
Текст какой-либо новости на сайте
 
<?
for ($i=1; $i<=10; $i++)
	{
	echo "$i-й комментарий
\n";
	}
?>
</html></body>

То есть, программист берёт свой код и вставляет его в нужные места html-документа, обрамляя каждый участок своего кода тегами . Теперь, разумеется, всё стало намного проще, однако удобным этот способ назвать всё ещё нельзя.

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

Рассмотрим на примере. Пусть мы хоть попасть на страницу с какой-либо статьёй определённого сайта. Адрес это статьи, например, /news.php.

Внутрь этого файла программист пишет такой код:

1
2
3
4
5
6
7
<?
$title="  true-coder "; //определяем, но не выводим переменную
for ($i=0; $i<10; $i++) //заполняем в цикле массив, но опять же не выводим его на страницу 	
{ 	
$array[] = $i; 	
} 
include "news.html"; //подключаем файл шаблона ?>

Весь код до функции include() просто определяет набор переменных, но не выводит их. Функция include() подключает в php-код файл с шаблоном news.html. В этом файле хранится html-код, написанный верстальщиком, где в нужных местах просто выводятся определённые переменные:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html><body>
<head>
 
</head>
Текст какой-либо новости на сайте
 
<?
foreach ($array as $v)
	{
	echo $v."-й комментарий
";
	}
?>
</body></html>

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

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

1
<? Include “news.php”;?>

…затем следует обычный html-код.

При такой структуре юзер запускает файл news.html через адресную строку своего браузера. Первая же строка этого файла подключает php-код, который инициализирует все переменные. Остальные строки, как и в предыдущем примере, отвечают за вывод информации со всеми переменными в браузер.

В общем, в последних двух примерах в некотором роде затронут принцип MVC, однако, не совсем в полной мере… Эти два способа имеют как свои плюсы, так и недостатки. К плюсам в первую очередь нужно отнести разделение php и html в разные файлы. Кодеру нет дела до верстальщика, а верстальщику — до кодера.

Однако, в первом варианте, с ведущим php-файлом возможна следующая ситуация:

Верстая страницу news.html, верстальщик наверняка будет вставлять на неё какие-либо изображения. В том случае, если адреса на них будут относительными, т. е. прописаны относительно файла news.html, может возникнуть проблема с адресами. Предположим, что файл news.html и news.php лежат не в одном каталоге, а, например, html-файл находится в подкаталоге /news. Теперь, при запуске ведущего php-файла всё содержимое html файла будет как бы вставляться в него и адреса на изображения уже работать не будут, т. к. теперь ссылки должны быть относительны ведущего файла.

Структуру расположения всех файлов иллюстрирует следующая схема:

Разделение кода и шаблона, MVC — Часть I

Как можно понять, все эти способы имеют свои недостатки. Первые два способа и того более – абсолютно непригодны для использования. Однако существуют ещё способы разделения кода от шаблона. Это MVC и шаблонизаторы. Шаблонизаторы в ближайшее вермя затронуты не будут, т. к. автор на данный момент не имел счастья, да и желания ими воспользоваться;) Однако принцип MVC будет описан, и описан достаточно подробно. Именно этот принцип мы использовали при написании нашей «Гостевой книги», которой будет посвящён первый цикл уроков. Хочу ещё раз повторить, этот урок не призван обучить читателя программированию, он лишь описывает принципы написания кода и отделения его от дизайна.

В начале работы над «Гостевой книгой» MVC нами не использовался, поэтому, чтобы облегчить себе жизнь в будущем, было принято решение значительно переписать код с учётом этой технологии. Это позволило дизайнеру и верстальщику в нашей команде работать отдельно, при наименьшем знании НЕ своей специальности. К тому же, чтобы поменять дизайн страницы, дизайнер вообще может не сообщать об этом кодеру;) Всем более-менее начинающим php-программистам я бы советовал разобраться в принципе MVC и придерживаться его в дальнейшем. Однако я ни в коем случае не навязываю именно этот способ, Вы можете использовать хоть первый и второй способы)). Но эта технология точно найдёт своих сторонников и кому-то, безусловно, будет интересна.

Оставайтесь с нами 🙂

Разделение кода и шаблона, MVC — Часть II

  • allysher

    Спасибо, замечательная статья! Очень легко читается, все пока понятно)

  • Александр

    чудно

  • У вас ссылка в конце статьи битая Разделение кода и шаблона, MVC — Часть I
    А сам материал статьи действительно легко читаемый, хорошо написано, спасибо.

  • Костя, спасибо за замечание. Ссылку починил.

  • Андрей

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

  • Андрей

    Еще немного предложений по первой части статьи:

    -Псевдокод Контроллера (index.php) выглядит так:-
    корректнее реализовать через switch(Вы) {} — так как будет только одна проверка, чтобы не тратить время на проверку остальных if.

    include “/tpl/shablon1.html”;
    include “/tpl/shablon2.html”;
    include “/tpl/shablon3.html”;

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

    Желаю творческих успехов.
    Статья полезная — общую идею подробно освящает.