Сегодня мы поговорим о том, как минимальными усилиями создать сайт с динамическим контентом. Обычно создание современного динамического веб-сайта - это результат работы серьезной профессиональной команды. Дизайнер разрабатывает внешний вид страниц, программист организует базу данных и пишет управляющие контентом скрипты, верстальщик создает эргономичный код, контент-менеджер поддерживает сайт наполнением, веб-мастер настраивает веб-сервер и следит за правильной работой всего сайта в целом.
Конечно, серьезную работу не сделать без хорошей команды. Но многие начинающие веб-мастера, впервые взявшиеся за создание небольшого динамического сайта, хотели бы иметь для этой задачи простой инструмент, не слишком далеко ушедший от хорошо знакомого статического HTML. В этой статье я постараюсь продемонстрировать, как один человек без особого опыта в программировании может построить динамический сайт буквально за один день. В этом нам поможет технология темплейтов, реализуемая при помощи несложных скриптов на языке PHP.
Идея построения сайта на темплейтах родилась довольно давно, многие компании делают свои программы и сайты именно по этой технологии. Приемы работы с темплейтами используются практически во всех HTML-редакторах. Темплейты сильно экономят время, позволяя веб-мастеру создавать множество страниц, пользуясь всего одним шаблоном.
На каждой странице современного сайта, как правило, собрано большое количество информационных блоков, обладающих различной функциональностью, - навигационное меню, последние новости, форма для голосования, строка поискового запроса, ссылки, счетчики, реклама
и т. п. Структура HTML-кода подобной страницы довольно сложна. Содержание каждого информационного блока может меняться независимо, да и сами блоки могут порой заменять друг друга.
Если за создание каждого информационного блока отвечает PHP-скрипт, "встроенный" в HTML-код страницы,
то ничего, кроме головной боли, обслуживание такого сайта вам не принесет. Любое изменение структуры сайта или способа обработки информации в одном из блоков приведет к необходимости вносить значительные коррективы сразу во множество страниц. Поэтому веб-программисты стремятся как можно сильнее отделить код сайта от его верстки и дизайна.
Вот тут-то и возникает идея использования темплейтов как средства разделения внешнего вида и исполняемого кода сайта. Оказывается, сайт можно собрать, как домик, - шаг за шагом, кирпичик за кирпичиком. А кирпичиками являются как раз те самые составляющие сайта, о которых мы уже говорили, - меню, формы, рекламные и информационные блоки и т. п. Темплейты позволят вам в большей или меньшей степени избавиться от привязки кода к внешнему виду сайта и облегчает задачу генерации динамического HTML-кода страниц.
Вариант 1. Вложения
Задача - собрать сайт из статичных блоков.
Для того, чтобы собрать веб-страницу по кирпичику, надо ее сначала разбить на
кирпичики.
Рассмотрим в качестве примера страницу
http://devser.com/code/download.php,
с которой, кстати, можно скачать несколько заготовок для темплейтных сайтов.
Верхний блок назовем Header
, нижний, соответственно, - Footer
,
меню - Menu
, а основной информационный текст - Main
.
Это и будут кирпичики для нашего сайта.
Код, соответствующий каждому блоку, поместим в отдельный файл с расширением .txt
(чтобы не путать с полноценными HTML-страницами).
Редактировать эти текстовые файлы можно в любом HTML-редакторе. А сборка страницы выполняется с использованием PHP.
Когда веб-сервер встречает этот скрипт, он перенаправляет его интерпретатору
PHP, который на место каждой команды include
вставляет текст из
соответствующего файла. Страницу, полученную в результате сборки, сервер
передает пользователю.
Конечно, генерировать подобным образом отдельную страницу нет никакого
смысла. Но при большом числе страниц со сходной компоновкой некоторые блоки
(в нашем случае, например, header.txt
и menu.txt
)
будут
использоваться многократно. Выигрыш от этого получается двоякий. Во-первых,
при необходимости изменить, допустим, меню, редактировать придется только один файл,
а во-вторых, основной текст страницы в файле main.txt
не будет
перегружен совершенно не относящимися к делу тегами и скриптами, значит,
меньше будет риск ошибки при редактировании.
Данный пример хорошо иллюстрирует идею "собирания" HTML-кода страницы из
кусочков путем вложения их в основной блок страницы. Каждый из подключаемых
файлов отвечает только за одну определенную функцию. Но основной смысл состоит
в том, что удалось полностью избавиться
от помещения HTML-кода внутрь PHP-кода, так как здесь каждая частичка HTML
хранится в отдельном файле.
Простота примера впечатляет, но годится такой способ только для очень
несложных страниц. Главный минус этого варианта состоит в том, что связи
разбитых по отдельным файлам блоков HTML-кода жестко заданы внутри самого
PHP-скрипта. Для динамического сайта это не годится.
Вариант 2. Динамическая структура
Задача - сделать сайт с функциями динамической структуры данных.
В этом примере мы ближе подойдем к основной задаче - создать сайт на основе
темплейта.
Вид основной странички (index.php
) изменился незначительно:
Дело в том, что все самое интересное спрятано в файле func.php
(см. листинг), который подключается в первой же строчке скрипта.
Файл func.php
состоит из двух частей. В первой определяются
значения переменных, которые понадобятся в дальнейшем, а во второй содержится
описание функции text, выполняющей вставку изменяемого текста. В данном
простейшем примере нам понадобилась единственная переменная
$text_path
, задающая путь к каталогу, из которого функция
text
будет брать файлы.
Может возникнуть естественный вопрос: а как же функция text
определит, какой файл следует вставить? Ведь мы создаем многостраничный сайт.
Для доступа ко всем страницам используется файл index.php
, а для указания,
какой информацией наполнить страницу, служит параметр page, передаваемый в
формате CGI-запроса, например, index.php?page=news
- для ссылки на страницу
с новостями или index.php?page=photo
- для странички с фотоальбомом и т. д.
Если имя раздела не было задано, или указанной страницы не существует,
выводится текст из файла index.txt
.
Таким образом мы избавились от необходимости создавать для каждой страницы
нашего сайта отдельный файл, как это было в первом примере. Но пока структуре
нашего сайта не хватает гибкости. HTML-код, определяющий, как будет выглядеть
страница, разбросан по отдельным файлам-фрагментам, и изменение дизайна сайта
может стать большой проблемой.
Вариант 3. Единый темплейт для всего сайта
Задача - полностью разделить дизайн, скрипты и содержание страниц.
До сих пор мы исходили из того, что структура страницы может быть описана как набор последовательно идущих информационных блоков, которые можно просто вставить в файл командой include. Надо ли говорить, что на практике все обстоит гораздо сложнее? Тем не менее, для большинства веб-сайтов можно выделить с одной стороны неизменные HTML-конструкции, которые повторяются на всех страницах и описывают их структуру и дизайн, а с другой, варьирующиеся тексты, которые, собственно, и составляют информационное наполнение.
То, что останется, если всю переменную информацию выкинуть, - это и есть темплейт страницы. Для создания темплейтного сайта надо просто научиться вставлять информационные блоки внутрь темплейта. На практике темплейты бывают довольно сложными, в них используются нетривиальные приемы верстки и дизайна, однако в конце концов остается просто добавить в темплейт текст. Мы не будем загромождать статью сложными примерами и рассмотрим предельно упрощенный темплейт:
require("func.php"); ?>
Template Site
menu(); ?>
text(); ?>
news(); ?>
Поместим код темплейта в файл index.php
. Он полностью описывает
структуру нашей страницы, если не считать того, что вместо основного текста в
нем содержится вызов функции text
, вместо меню - вызов функции menu, а вместо
блока кратких новостей - вызов функции news
. Код этих функций размещен в файле
func.php
, который подключается директивой require
в начале
темплейта.
Каждая функция, обращаясь к переменной $page
, может определить,
какую именно информацию нужно вывести в формируемом ею информационном блоке.
Например, функция menu может исключать из меню ссылку на отображаемую в данный
момент страницу. (На практике, правда, совсем удалять пункт из меню не стоит -
лучше просто убрать с него ссылку, однако в данном примере для простоты ссылка
со страницы на саму себя просто исключается.)
Другой пример динамического блока - функция news. Обычно она просто помещает
в отведенное ей место темплейта сводку кратких новостей сайта из файла
shortnews.txt
. Однако это не имеет смысла, если мы находимся на
основной странице новостей. В этом случае вызывается функция banner, которая
вместо новостей вставляет рекламный баннер.
Как видите, наш сайт уже обретает динамику. Дополнительные возможности дает
добавление в начало файла func.php
различных переменных - параметров, значения
которых используются в коде, формирующем информационные блоки. Вы можете
добавить и новые функции, которые в дальнейшем будут активно применяться при
формировании страниц.
Какие достоинства есть у этого решения? Во-первых, простота и чистота кода.
Все скрипты собраны в одном файле, описание верстки и дизайна страницы - в
другом, который можно редактировать любым HTML-редактором, а содержательная
информация - в остальных файлах. Еще один плюс раздельного хранения
информационных блоков - в том, что легко можно соорудить несложный
веб-интерфейс для обновления данных прямо в тех файлах, где они хранятся.
Наконец, ничто не мешает нам при необходимости написать сколь угодно хитрые
функции для заполнения информационных блоков.
Единственный минус заключается в том, что когда будет написано множество
функций, вы начнете в них путаться. Если это случилось, значит, сайт уже
нельзя назвать небольшим и несложным. Пора подумать о полноценном
многофункциональном движке.
Листинг. Файл func.php
Главная
"); }
elseif($page != "news"){ echo ("Новости"); }
elseif($page != "photo"){ echo ("Галерея"); }
// ...
}
// Вывод блока кратких новостей (если мы не на основной новостной странице)
function news()
{
if($page != "news"){ include ($text_path."shortnews.txt"); }
else{ banner(); }
}
?>
Киса, вы умеете рисовать?
Пожалуй, самый незаменимый человек в команде веб-студии - это веб-дизайнер.
Вы или умеете рисовать, или нет. Как же быть, если сайт надо делать в одиночку,
а по рисованию с черчением в школе у вас была натянутая тройка? В таком случае,
скорее всего, вам подойдут бесплатные HTML-темплейты, которых в Сети довольно
много. В качестве примера могу привести парочку ссылок. Например, со страницы
http://winstart.com/template
все можно скачать бесплатно, а перед скачиванием
еще и посмотреть, как это будет выглядеть при использовании.
На www.elcdesigns.com
большая часть темплейтов платная, но впечатляет уровень сервиса.
На www.icehousedesigns.com/downloads
все выглядит достаточно просто, но при желании можно найти
довольно любопытную информацию о создании сайтов и различные графические
заготовки. На других сайтах все приблизительно так же - где-то получше,
где-то похуже.
Где взять темплейты?
Где взять скрипты?
Автор: Алексей Гончаренко
Источник: www.devser.net