Веб-сайт: сборка по кирпичикам

1612   |    9 мин., 28 сек.

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

Конечно, серьезную работу не сделать без хорошей команды. Но многие начинающие веб-мастера, впервые взявшиеся за создание небольшого динамического сайта, хотели бы иметь для этой задачи простой инструмент, не слишком далеко ушедший от хорошо знакомого статического 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");
	include ("menu.txt");
	include ("main.txt");
	include ("footer.txt");
	?>

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

Конечно, генерировать подобным образом отдельную страницу нет никакого смысла. Но при большом числе страниц со сходной компоновкой некоторые блоки (в нашем случае, например, header.txt и menu.txt) будут использоваться многократно. Выигрыш от этого получается двоякий. Во-первых, при необходимости изменить, допустим, меню, редактировать придется только один файл, а во-вторых, основной текст страницы в файле main.txt не будет перегружен совершенно не относящимися к делу тегами и скриптами, значит, меньше будет риск ошибки при редактировании.

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

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

Вариант 2. Динамическая структура

Задача - сделать сайт с функциями динамической структуры данных. 
В этом примере мы ближе подойдем к основной задаче - создать сайт на основе темплейта.

Вид основной странички (index.php) изменился незначительно:

	<?php        
	require("func.php");   
	include("header.txt"); 
	text();               
	include("footer.txt"); 
	?>

Дело в том, что все самое интересное спрятано в файле 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"); ?>
	<HTML><HEAD>
	<TITLE>Template Site</TITLE>
	</HEAD><BODY>

	<!-- здесь может быть любой HTML-код, 
	     задающий верстку и дизайн сайта -->
	<? menu(); ?>
	<!-- HTML-код продолжается -->
	<? text(); ?>
	<!-- HTML-код продолжается -->
	<? news(); ?>
	<!-- HTML-код продолжается -->
	</HTML></BODY>

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

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

Другой пример динамического блока - функция news. Обычно она просто помещает в отведенное ей место темплейта сводку кратких новостей сайта из файлаshortnews.txt. Однако это не имеет смысла, если мы находимся на основной странице новостей. В этом случае вызывается функция banner, которая вместо новостей вставляет рекламный баннер.

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

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

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

Листинг. Файл func.php

	<?php
	$text_path = "text/";               // Каталог с текстами

	// Вставка блока основного текста соответственно параметру $page
	function text() 
	{
	 if($page == "news"){ include($text_path."news.txt"); }
	  elseif($page == "photo"){ include($text_path."photo.txt"); }
	  // ...
	   else{ include($text_path."index.txt"); }
	}                       

	// Вывод навигационного меню без ссылки на страницу $page
	function menu() 
	{
	 if($page != ""){ echo ("<a href='index.php'>Главная</a><br>"); }
	  elseif($page != "news"){ echo ("<a href='index.php?page=news'>Новости</a>"); }
	   elseif($page != "photo"){ echo ("<a href='index.php?page=photo'>Галерея</a>"); }
	  // ...
	}                       

	// Вывод блока кратких новостей (если мы не на основной новостной странице)
	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.freelayouts.com/templates/templates.php - более 800 темплейтов не только HTML, но и Flash, Swish, много описаний и, конечно, возможность добавить свой темплейт и участвовать в конкурсах на лучший темплейт.
• www.templateclub.com - требует регистрации.
• www.snakeyewebtemplates.com/web-templates/templates-free.html - есть и бесплатный, и платный разделы.
• www.oswd.org - немного мрачноватый сайт, однако темплейты можно просматривать не в виде картинок, а в уже законченном HTML-виде.
• winstart.com/template - бесплатно, перед скачиванием можно посмотреть превью.

Где взять скрипты?

• www.scriptsearch.com - один из крупнейших сайтов.
• www.script-index.com - около 500 скриптов.
• www.php-resource.de - более 2000 скриптов.
• www.hotscripts.com - более 40 000 скриптов.

Первая публикация в журнале "Мир Интернет" №8 2002 год.

Хотите сделать сайт для салона красоты?

Сайт для салонов красоты - Антикризисное предложение для салонов красоты - сайт на битриксе + базовое seo за совершенно адекватные деньги. С наполнением сайта, гарантией и консультациями маркетолога. →→→