Динамическое управление содержимым веб-страницы. Технология SSI

Цель работы

Ознакомиться с технологией серверных включений (SSI). Получить навыки применения директив SSI для динамического управления содержимым веб-страниц на стороне сервера.

Задания к работе

1. Выполнить настройку веб-сервера на использование SSI в докумментах .html.
2. Выполнить редизайн Вашего сайта с использованием SSI: все повторяющиеся элементы веб-собержимого вынести в файлы с расширением .inc. С помощью SSI реализовать динамическую сборку страниц.

Методические указания

Технология SSI (Server Side Includes) - мощное и гибкое средство для динамического формирования веб-страниц на стороне сервера. Суть технологии заключается в препроцессинге запрашиваемых страниц на серверной стороне на предмет поиска в них специальных команд - директив SSI.

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

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

Настройка сервера

Модулем SSI по умолчанию обрабатываются файлы с расширением .shtml и .shtm , но можно настроить сервер и на обработку файлов .html и .htm. Для этого необходимо указать в конфигурационном файле Apache (httpd.conf) или в пользовательском файле управления каталогами .htaccess следующие строки:

AddType text/html .htm .html .shtml
AddHandler server-parsed .htm .html .shtml
Options +Includes

Примечание: Файл httpd.conf отвечает за настройку всего веб-сервера, не доступен непривилегированному пользователю. Скрытый (dot-файл) .htaccess размещается в пользовательских каталогах и отвечает за их настройки.

Формат директив SSI

Общий синтаксис директивы SSI таков:

<!--#команда параметр="значение"-->

Некоторые команды имеют еще и подкоманды:

&&подкоманда&&

Директивы SSI

В табл. 1 перечислены основные директивы SSI.

Табл.1 Директивы SSI

Рассмотрим некоторые из перечисленных директив более подробно.

echo

<!--#echo var="переменная_среды"-->

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

Пример:

 <!--#echo var="HTTP_USER_AGENT"-->

Некоторые переменные окружения:

include

<!--#include file="путь"-->
<!--#include virtual="путь"-->

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

Аргументы:

• file - Путь к файлу, относительно текущей директории. (То есть не может быть абсолютным путем к файлу (начинаться с / или содержать ../).
• virtual - Виртуальный (фактический) путь к документу на сервере. Он может начинатся с /, но должен быть на том же сервере.

Пример:

<!--#include file="docext.html"-->
<!--#include virtual="/counters/spylog.txt"-->
<!--#include virtual="/cgi-bin/counter.pl" -->

fsize

<!--#fsize file="путь"-->
<!--#fsize virtual="путь"-->

Выводит размер файла, формат выдачи может быть изменен командой config

Аргументы:

• file - Путь к файлу, относительно текущей директории. (То есть не может быть абсолютным путем к файлу (начинаться с / или содержать ../).
• virtual - Виртуальный (фактический) путь к документу на сервере. Он может начинатся с /, но должен быть на том же сервере.

Пример:

<!--#fsize virtual="ssi.htm"-->

flastmod

<!--#flastmod file="путь"-->
<!--#flastmod virtual="путь"-->

Выводит дату/время последнего изменения файла, формат выдачи может быть изменен командой config

Аргументы:

• file - Путь к файлу, относительно текущей директории. (То есть не может быть абсолютным путем к файлу (начинаться с / или содержать ../).
• virtual - Виртуальный (фактический) путь к документу на сервере. Он может начинатся с /, но должен быть на том же сервере.

Пример:

<!--#flastmod virtual="index.html"-->

exec

<!--#exec cgi="/cgi-bin/counter.pl"-->

Вызывает внешние программы, формат выдачи может быть изменен командой config.

Аргументы:

• cmd - вызов исполняемых программ в UNIX shell.
• cgi - вызов CGI скрипта.

  Пример: 

<!--#exec cmd="/bin/finger vasjapjatkin@mail.ru"-->
<!--#exec cgi="/cgi-bin/puperscript.cgi"-->

config

Модифицирует формат вывода для других команд.

Аргументы:

errmsg - формат сообщения об ошибке, которое выдается когда обработчик SSI+ обнаруживает ошибки. Для SSI+ также можно использовать onerr.

  Пример: <!--#config errmsg="Ошибка обработки SSI запроса"-->

sizefmt - формат информации об объеме файла. Допустимые значения sizefmt - bytes или addrev. Они задают округление значения объема файла до ближайшего килобайта.

  Пример: <!--#config sizefmt="addrev"-->

timefmt  - формат значений даты/времени.

  Пример: 

<!--#config timefmt="%D %r"-->
<!--#flastmod file="ssi.htm"-->

Некоторые форматы представления даты и времени

Применение SSI

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

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

Пример шаблонной верстки

Задача: Выполнить верстку веб-страниц, включающих логотип сайта, меню навигации, основную часть и счетчик посетителей

Пусть общее оформление сайта должно выглядеть так, как показано на рис. 1. Код разметки одной из страниц, sample.html, приведен в листинге 1.

Рис. 1 Макет оформления

Листинг 1. Код страницы sample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Cool Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<link href="s7a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo"><img src="img/s7logo.png"></div>
<div class="menu">
<ul>
CONTENT
<li><a href="">Startpage</a>
<li><a href="">Sometext1</a>
<li><a href="">Sometext2</a>
<li><a href="">Sometext3</a>
<li><a href="">About</a>
</ul>
<div class="counter"><p><img src="img/cnt.gif" alt="TOP100(88x31.gif)"></div>
</div>
<div class="content"><h1>LOREM IPSUM</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin gravida.
Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio. Nullam eget tellus
vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet, ultricies non,
hendrerit et, orci. Nulla facilisi.
<h2>Sed dictum</h2>
<p>Ut tincidunt lorem ac lorem. Duis eros tellus, pharetra id, faucibus eu,
dapibus dictum, odio...
<p>Nulla sed nulla a consectetuer adipiscing elit. Proin gravida. Phasellus
tincidunt massa vel urna. Proin adipiscing quam vitae odio.</p>
<h2>Donec velit</h2>
Nullam eget tellus vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet,
ultricies non, hendrerit et, orci. Nulla facilisi. Phasellus tincidunt massa vel urna.
Proin adipiscing quam vitae odio. Nullam velit nisl, laoreet id, condimentum ut,
ultricies id, mauris.</div>
</body>
</html>

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

Посмотрите, как будет выглядеть исходный код рассматриваемой страницы (sample.html), после вынесения части кода во внешние файлы и использовании SSI (выделены директивы SSI-включений)

<!--#include virtual="s7logo.html"-->
<div class="content">
<h1>LOREM IPSUM</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin gravida.
Phasellus tincidunt massa vel urna. Proin adipiscing quam vitae odio.
Nullam eget tellus vitae tortor gravida scelerisque.
In orci lorem, cursus imperdiet, ultricies non, hendrerit et, orci. Nulla facilisi.
<h2>Sed dictum</h2>
<p>Ut tincidunt lorem ac lorem. Duis eros tellus, pharetra id, faucibus eu,
dapibus dictum, odio...
<p>Nulla sed nulla a consectetuer adipiscing elit. Proin gravida. Phasellus
tincidunt massa vel urna. Proin adipiscing quam vitae odio.</p>
<h2>Donec velit</h2>
Nullam eget tellus vitae tortor gravida scelerisque. In orci lorem, cursus imperdiet,
ultricies non, hendrerit et, orci. Nulla facilisi. Phasellus tincidunt massa vel urna.
Proin adipiscing quam vitae odio. Nullam velit nisl, laoreet id, condimentum ut, ultricies
id, mauris.
</div>
<!--#include virtual="s7menu.html"-->
<!--#include virtual="s7footer.html"-->

Код, содержащийся например в файле s7logo.html, включает лишь описание заголовка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Cool Site</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<link href="s7a.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo"><img src="img/s7logo.png"></div>

Аналогичным образом разнесены по файлам и прочие общие элементы.

Для удобства позиционирования элементов на странице в этом примере использованы теги <div> с соответствующим стилевым оформлением, фрагмент файла внешней таблицы стилей (s7a.css) приведен в листинге 2.

Листинг 2. Фрагмент файла s7a.css

body {
margin: 0px;
}
div {
border : dashed 2px red;
}
div.logo {
position : absolute;
top: 0;
left: 0;
right: 0;
}
div.menu {
position : absolute;
top: 70px;
left: 0px;
width: 200px;
}
div.content {
position : absolute;
top: 70px;
left: 210px;
right : 0px;
border : dashed 2px blue;
}
div.counter p {
text-align : center;
}

CC-BY-SA Анатольев А.Г., 31.12.2012