Учебно-методические материалы для студентов кафедры АСОИУ

Динамическое управление содержимым веб-страницы. Технология 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Вставка в документ переменных среды (браузер, дата, имя документа, ...).
includeВключение файла в HTML документ.
fsizeВключение размера файла в HTML документ.
flastmod Включение даты последней модификации файла в HTML документ.
execВыполнение внешнего исполняемого файла (CGI программы). Выходной поток данных (стандартный вывод) этой программы включается в документ.
configУстановка параметров для SSI+ команд.
odbcОбращение к внешней ODBC СУБД.
emailОтправка электронной почты или представление формы.
ifУсловный оператор, управляющий выполнением других команд SSI и вывода документа.
gotoОператор перехода на определенную SSI метку (label).
labelМетка в документе.
breakОстановка вывода документа.

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

echo

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

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

Пример:

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

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

DOCUMENT_NAME локальное имя файла
DOCUMENT_URI URL файла
DATE_LOCAL Текущая дата и время (локаль сервера)
DATE_GMT Текущая дата и время по Гринвичу
LAST_MODIFIED Дата и время последнего изменения текущего файла
REMOTE_ADDR IP адрес удаленного клиента
QUERY_STRING Строка, полученная от клиента
SERVER_SOFTWARE Имя HTTP server software
SERVER_NAME Имя компьютера, на котором работает WWW сервер
REMOTE_HOST Имя компьютера удаленного клиента
HTTP_USER_AGENT Имя браузера клиента (browser software).
HTTP_REFERER URL адрес HTML документа из которого сделан запрос клиентом

include

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

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

Аргументы:

Пример:

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

fsize

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

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

Аргументы:

Пример:

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

flastmod

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

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

Аргументы:

Пример:

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

exec

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

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

Аргументы:

  Пример: 

<!--#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"-->

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

Код Значение Пример
%a День недели в сокращенном виде Sun
%A День недели Sunday
%b Месяц в сокращенном виде (также %h) Jan
%B Месяц  January
%d Дата  01
%D Дата в формате %m/%d/%y 06/23/99
%e Дата 1
%H Время в часах в 24-часовой системе 13
%I Время в часах в 12-часовой системе 01
%m Номер месяца 11
%M Количество минут 08
%p AM|PM AM
%r Время в формате %I:%M:%p 09:21:13 PM
%S Количество секунд 09
%T Время в 24-часовой системе в формате %H:%M:%S 12:22:40
%Y Год 1996

Применение 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