Язык SSI

Содержание:

Язык SSI (от англ. Server Side Includes — Включения на стороне сервера) — это один из вариантов серверных языков программирования. На сегодняшний день он несколько устарел, но иногда еще используется.

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

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

К сожалению, в SSI отсутствует большинство возможностей полноценных современных серверных языков, но, если Вам нужно быстро создать несложный сайт с динамическим выводом контента, то это именно то, что Вам нужно!

Как создать сайт на SSI. Руслан Тертышный

Версия для печати
Язык:	Русский
Формат:	DOC
Обновлено:	2013-08-06
Автор:	https://www.BestFREE.ru

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

Галерея скриншотов

Язык SSI Тот, кто знает HTML и CSS, может сверстать веб-страничку любой сложности. Если у Вас простой сайт-визитка, то, в принципе, большего Вам и не надо, – главное, чтобы было красиво :).

Но, если планируется, что сайт будет иметь не один десяток страниц, то тут уже перед нами встает проблема: как уследить за тем, чтобы код на всех страничках был одинаковым, а, главное, что будет, если в один прекрасный момент придется менять какие-то нюансы нашего кода?

Согласитесь, ручная обработка пары десятков страниц, для изменения, например, содержимого секции <HEAD>, занятие не из самых приятных… Конечно, Вы можете воспользоваться мощными утилитами для пакетной замены текста, но проще было бы использовать возможности разнообразных серверных языков программирования.

Самым популярным на сегодняшний день является язык PHP. Это практически полноценный язык программирования, который предоставляет богатые функциональные возможности, но у него есть один недостаток – страницы на PHP грузятся почти вдвое дольше, чем на простом HTML.

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

Расшифровывается название, как Server Side Includes, что на русский можно перевести, как «включения на стороне сервера». Этот язык отличается своей относительной простотой в освоении, а также скоростью обработки. Страницы на SSI собираются примерно на 25–50% быстрее, чем на PHP!

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

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

Подготовка к созданию сайта на SSI

Итак, мы решились :)… Сейчас мы с Вами в качестве примера создадим небольшой сайт про то, как создавать сайты на SSI ;) Контент для быстроты работы будет позаимствован из всезнающей Википедии, а сам сайт будет создан на чистом HTML и CSS, с использованием мощностей их последней версии (HTML5 и CSS3, соответственно).

Для работы нам потребуется небольшой набор программ:

локальный веб-сервер (я использую Денвер) для реализации SSI;
текстовый редактор (я использовал AkelPad, но Вы можете выбрать для себя любой другой);
веб-браузер для просмотра результатов нашей работы (я верстал сайт под Google Chrome, поэтому рекомендую использовать подобные ему веб-обозреватели для корректного отображения кода упомянутого в данной статье).

Если Вы разбираетесь в HTML, то Вам проще всего будет сразу сверстать главную страничку будущего сайта, чтобы было, откуда брать фрагменты кода (хотя, в будущем Вы сможете обходиться и без этого, напрямую верстая сразу в SSI). Мой пример странички в HTML выглядит примерно так:

Для простоты воспроизведения Вами данного урока в оформлении я не использовал никаких картинок, – только чистый код, который мы разместили в двух файлах: index.html и style.css (находятся в архиве в папке «Простой HTML»). В браузере жмем CTRL+U и смотрим исходник странички:

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

Подключение блоков кода посредством SSI

Теперь, внимательно посмотрим на вышеприведенный код и прикинем, какие элементы будут у нас повторяться на всех страницах нашего сайта. По сути, на всех страничках меняется только содержимое тега <article>, все остальное можно вынести и подключать динамически. Для этого в SSI существует простая команда (кстати, аналогичная PHP) – «include»:

На примере данной функции рассмотрим синтаксис SSI. Он, в принципе прост: для предотвращения вывода браузером SSI-включений они экранируются обычными HTML-комментариями, а внутри еще и дополнительным символом «#». Затем идет непосредственно команда и ее атрибуты (почти так же, как в обычных HTML-тегах).

Что касается именно команды «include», то она может иметь один из двух атрибутов: «virtual» и «file». Оба они служат для указания ссылки на нужный документ, текст которого должен быть вставлен, но «file» может содержать только относительный путь, поэтому использование «virtual», как более функционального атрибута, будет предпочтительнее.

Попробуем применить на практике, только что полученные данные. Для этого установим веб-сервер (если Вы его еще не устанавливали) и создадим в папке «home» новую папку с названием нашего сайта (у меня это – ssi.site). В папке сайта создадим еще одну директорию с именем «www» (прочитать подробнее о работе с Денвером можно здесь). В нее мы и будем складывать файлы нашего сайта.

Кстати о файлах… Для работы SSI требуется чтобы они имели расширения .shtml, .shtm или .stm.

Весь код созданной нами странички можно рассовать по трем файлам:

В «header.shtml» разместится код шапки и навигации;
В «general.shtml» будет находиться текст статьи (этот файл мы потом упраздним);
В «footer.shtml» поместим подвал сайта.

Теперь для того чтобы собрать все это в единое целое нам будет достаточно создать четвертый файл index.shtml, который будет отвечать за отрисовку главной страницы сайта, со следующим содержимым:

Таким образом, мы получим следующую структуру документов:

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

Однако, дабы не плодить лишних сущностей, мы можем еще немного оптимизировать код файла «index.shtml», вставив вместо второй директивы содержимое файла general.shtml.

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

<article>Здесь текст статьи…</article>

Что мы выигрываем от этого? А то, что в случае добавления новых пунктов меню или изменений в заголовках/подвалах нам будет достаточно nпоправить всего два файла и их содержимое автоматом будет изменено на всех страницах!

Работа с переменными в SSI

Вставлять готовые блоки кода – это прекрасно, но иногда требуется, чтобы некоторые из них изменялись в зависимости от того, на какой странице находится посетитель нашего сайта. В SSI, как и в других языках программирования, это решается при помощи переменных.

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

Тег этот используется для каждой страницы в блоке <HEAD>, а его, как мы помним, мы вынесли в файл «header.shtml». Сейчас там задан фиксированный заголовок для главной страницы, и он выводится неизменным везде.

Попробуем исправить положение… Как Вы, наверное, догадались содержимое тега <title> нужно заменить переменной. Сделать это очень просто, достаточно вписать в него такие строки:

<title></title>

Синтаксис выражения нам уже знаком, но команды – новые. Здесь основная команда – echo. Она, как и в PHP, служит для вывода любых переменных. Далее мы видим два атрибута. Атрибут «var» нужен для указания имени переменной, которую мы вызываем, и является обязательным.

Атрибут «encoding» – необязательный, но приносит неоценимую помощь тем, кто использует кодировку, отличную от WIN-2151.

По умолчанию, сервер преобразовывает все переменные в вышеуказанную кодировку и на выходе мы получаем английский текст (если он был, то он обычно не меняется) с кракозябрами вместо русских слов :(. Дабы этого не произошло, используем «encoding» со значением «none», тем самым отключая все преобразования!

Однако вызвать, то мы переменную вызвали, но ее пока не существует… Ее нужно еще и объявить. Для этого в самое начало каждой странички с уникальной статьей вставим строку примерно следующего содержания:

Здесь мы видим новую команду – «set». В SSI она служит для объявления пользовательских переменных. Она имеет два обязательных атрибута: уже знакомый нам «var» для указания имени переменной и «value».

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

Пример реализации динамического навигационного меню на SSI

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

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

Получить список всех встроенных переменных Вы можете, воспользовавшись командой printenv (то есть, ).

В нашем же случае нам нужна переменная «DOCUMENT_URI», которая отвечает за адрес запрошенной страницы. Для реализации изменений в меню навигации нам нужно придумать алгоритм. Алгоритмов может быть несколько, поэтому программирование – это своего рода искусство :). Я предлагаю следующий алгоритм:

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

На языке SSI это можно выразить следующим условием:

<span class="activ"> Главная </span>

<a class="inactiv" href="index.shtml"> Главная </a>

Как видим, здесь мы прописали условие для главной страницы сайта. Синтаксис остается все тот же, но появляются новые команды:

if – условный оператор, заменяющий слово «если»;
expr – атрибут, при помощи которого можно задать выражение, для которого создается условие;
else – условный оператор, который на «человеческий» язык можно перевести, как «во всех остальных случаях». Он позволяет задать действие, которое будет исполняться тогда, когда условия не соответствуют параметрам, заданным в «if» (не путать с оператором «elif», который позволяет задать дополнительное условие);
endif – обязательный оператор, который закрывает условие.

Обратите внимание, что в атрибуте «expr» переменные обязательно предваряются знаком доллара («$»), как в PHP.

Итак, при помощи вышеописанной конструкции мы задали условие, при котором изменяется не только стилевой класс, но и вообще тип элемента, точнее в зависимости от ситуации выводится один из двух элементов: либо ссылка, либо обычный текстовый блок.

Нам остается прописать такие же условия для каждой кнопки меню (оно у нас находится в блоке <nav>…</nav> в файле header.shtml), и мы получим динамическую навигацию на всем сайте:

Манипуляции со временем в SSI

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

Вывод текущей даты и времени Вашего часового пояса в заданном формате.
Вывод времени по Гринвичу.
Вывод даты последней модификации документа.

Для вывода те кущей даты и времени нам достаточно воспользоваться встроенной переменной «DATE_LOCAL»:

Вывод будет осуществлен в формате: день (по английски), число-сокращенное название месяца-год часы:минуты:секунды часовой пояс. Однако этот формат легко настроить под свои нужды, используя команду «config» с атрибутом «timefmt».

Например, если нам нужно вывести время и дату в стандартизированном международном представлении, то команда будет иметь следующий вид:

Результат будет примерно таким: 2013-08-01, 10:56:22. Как нетрудно догадаться, большие и маленькие буквы после значка «%» отвечают за вывод той или иной части даты, и, по сути, являются сокращением от английских названий этих частей.

Соответственно, большие буквы обозначают полный формат (например, для года %Y (сокр. от «year») это будет – 2013), а маленькие – сокращенный (%y выведет только число «13»).

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

А мы двигаемся дальше и следующей командой, с которой ознакомимся, будет «flastmod». Она предназначена для автоматического вывода даты последнего обновления страницы. К этой функции тоже можно применять любое форматирование, как было описано выше и общий ее вид примерно следующий:

Если Вы внимательно читали статью, то помните, что атрибут «virtual» указывает путь к файлу, который требует определенной обработки. Здесь мы используем его для тех же целей – указания адреса файла, дату последней модификации которого мы хотим вывести.

Причем, атрибут «virtual» может содержать не только реальные адреса, но и переменные. Это дает нам возможность, например, динамически выводить дату последнего изменения страниц при помощи такого кода:

Применив эти знания на практике, мы можем, например, снабдить подвал нашего сайта (файл footer.shtml) полезной информацией:

Немного поработав с форматированием текста, мы можем получить примерно такой итоговый вариант:

Достоинства и недостатки технологии SSI

Плюсы:

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

Минусы:

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

Выводы

В свое время SSI был прорывом, но сейчас его почти вытеснил PHP. Однако, несмотря на это, некоторые сайты до сих пор используют данный язык, например, в связке с CGI-скриптами.

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

P.P.S. Если Вы никак не решитесь, какой именно язык выбрать для создания сайта, можете почитать следующую статью:
https://www.bestfree.ru/article/webdesign/language.php