Перейти на главную   
  helloworld.ru - документация и книги по программированию  
helloworld.ru - документация и книги по программированию    
    главная     хостинг     создание сайтов    
Поиск по сайту:  
Смотрите также
Языки программирования
C#
MS Visual C++
Borland C++
C++ Builder
Visual Basic
Quick Basic
Turbo Pascal
Delphi
JavaScript
Java
PHP
Perl
Assembler
AutoLisp
Fortran
Python
1C

Интернет-технологии
HTML
VRML
HTTP
CGI
FTP
Proxy
DNS
протоколы TCP/IP
Apache

Web-дизайн
HTML
Дизайн
VRML
PhotoShop
Cookie
CGI
SSI
CSS
ASP
PHP
Perl

Программирование игр
DirectDraw
DirectSound
Direct3D
OpenGL
3D-графика
Графика под DOS

Алгоритмы
Численные методы
Обработка данных

Системное программирование
Драйверы

Базы данных
MySQL
SQL

Другое

Хостинг


Друзья
demaker.ru
Реклама

Лучший хостинг. Аренда серверов




helloworld.ru

SSI

Alexey Godovnik

Наряду с неоспоримыми достоинствами бесплатного хостинга, есть и существенные недостатки. Больше всего меня раздражает отсутствие SSI. Если и вас тоже, сообщаю: Выход есть! И довольно простой, как в поговорке про все гениальное.

Для тех, кто не в курсе, поясняю. Вам наверняка хоть раз в жизни приходилось собирать мозаику. Ну, или хотя бы соединять вместе несколько частей в одно целое. В этом и заключается идея SSI - собирать свой сайт из HTML-фрагментов. Для чего это нужно? Как правило, на каждом сайте некоторые детали присутствуют на всех страничках сайта. У меня, например, таким является оглавление слева. И web-мастеры при создании новых документов просто переписывают их туда. А если вдруг захочется изменить внешний вид, приходится вносить изменения во все файлы. А если сайт содержит много информации, то реконструкция сайта превращается в тягомотину. Можно, конечно, использовать фреймы (про них рассказано в "HTML за полчаса", но у них есть свои недостатки.

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

Итак, все дело в следующем: как вы знаете (а если не знаете, то я с удовольствием вас информирую), в HTML документ можно встраивать скрипты, написанные на различных языках. Один из них - JavaScript - довольно прост (о нем рассказано в статье Основы JavaScript) и имеет то преимущество, что его понимают все браузеры, а для выполнения используются ресурсы компютеров ваших посетителей.

Так вот, скрипт на JavaScript не обязательно встраивать в HTML документ, что бы там ни было написано в инструкции по его использованию. Он может располагаться в отдельном файле, следовательно, на него можно ставить ссылку/сноску из любого другого документа, следовательно, его можно написать только один раз и использовать в неограниченном количестве документов.

Наши файлы-кусочки будут иметь содержание
document.write('ваш HTML-код');
или
document.write("ваш HTML-код");
количество таких записей неограничено, внутри кавычек/апострофов вы пишете строчку с вашим HTML. Естественно, что если вам надо использовать кавычки, вы берете первый вариант, а если апострофы, то второй. Файл с кусочком встраиваемого HTML сохраняете в виде name.js, где вместо name используете любую комбинацию цифр и латинских букв.

Когда вы написали все фрагменты, начинаем их склеивать. В том месте, где должен быть нужный элемент, пишем
<script language="JavaScript" src=source></script>,
где source - адрес этого фрагмента.

Таким образом, ваша страничка (в идеальном варианте) будет иметь следующий вид

По-моему, вполне элегантно.

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

Не бойтесь того, что общий размер странички увеличивается из-за многократного повторения document.write. Так как страничка состоит из нескольких кусочков, ее загрузка будет происходить даже немного быстрее.

Если захотите что-либо уточнить, пишите. НО!!! Я не буду отвечать на вопросы типа "я все сделал так как написано, но ничего не работает". Значит, не совсем так. Шевелите извилинами и ищите ошибки. Самая распространная - многие забывают, что в адресах и в JavaScript большие и маленькие буквы РаЗлИчАюТсЯ.

 

Передача и обработка данных средствами SSI

Передача данных (1-й способ)

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

Особенности

Для SSI данные лучше передавать в виде name=value. Метод GET формы так и делает, а вот если вы самостоятельно формируете строку запроса, она должна выглядеть так:
file.shtml?var1=value1&var2=value2 и т.д.

Получение данных

Нам мало передать данные. Нам надо еще и получить их. Для того, чтобы увидеть, что мы там себе передали, включите в файл строку
<!--#printenv -->
Эта строка нам в дальнейшем не понадобится. Она нужна лишь для того, чтобы увидеть, передается ли хоть что-нибудь. В дальнейшем, если что-то не так пойдет, вставьте эту строку в файл и проверьте, может вы где-то не так буковку написали.

Самый простой способ использования

Допустим, у вас на сайте есть FAQ, но ответы на вопросы такие объемные, что хотелось бы выводить их по одному и при этом, если потом приспичит поменять дизайн, чтобы долго не возиться. Мы делаем одну страничку (назовем ее faq.shtml), оформляем ее как положено, а в том месте, где должен быть ответ, пишем
<!--#include virtual="${file}" -->
Учтите, что может быть, для вашего сервера надо использовать не фигурные, a круглые скобки или даже вообще без них обойтись.
Теперь ответы на вопросы пишем каждый в своем html-файле, в котором нет ничего, кроме текста да тегов, с ним связанных (B, FONT и т.д), и желательно не использовать атрибуты COLOR, чтобы потом не мучаться.
Ссылки на ответы надо делать следующим образом
<a href="faq.shtml?file=url">
где url - адрес html-файла, содержащего ответ, можно относительный - только смотрите не запутайтесь.

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

Обработка данных

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

В файлах SSI можно использовать переменные. Они объявляются так
<!--#set var="name" value="value" -->
Передача данных
file.shtml?username=Alexey&birth=1974
эквивалентно
<!--#set var="username" value="Alexey" -->
<!--#set var="birth" value="1974" -->

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

Можно просто вставить переменную в документ.
<!--#echo var="name" -->
Например, используя переданные ранее данные, можно написать
Привет, <!--#echo var="username" -->
В результате чего на экране появится Привет, Alexey
Пример посложнее. Если в файле написать
<!--#set var="title" value="заголовок" -->
то потом в вызывающем файле можно использовать
<title><!--#echo var="title" --></title>
Таким образом, мы можем передавать из включаемых файлов в вызываемые различные конфиденциальные сведения. Пользователь не видит инструкции SSI - они обрабатываются сервером и передаются уже в итоговом, "готовом к употреблению" виде.

Можно поизвращаться и попробовать проанализировать переданные данные и на их основе что-нибудь сделать.

Условные операторы выглядят так
<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->
Элемент endif является обязательным. elif можно повторять сколько угодно раз. После if и elif пишется HTML-код, который будет подставляться при истинности условия. После else пишется код, который подставится, если ни одно из имеющихся ранее условий не выполнилось.

Например

<!--#if expr=($username="Alexey") -->
<h1>Привет, <!--#echo var="username" --></h1>
<!--#else -->
<h2>Привет, <!--#echo var="username" --></h2>
<!--#endif -->

Такой нехитрый код выводит приветствие, но если человека зовут Alexey, буквы будут чуть-чуть побольше.

Передача данных (2-й способ)

Можно передавать данные и средствами SSI. Плюс у этого метода в том, что он, в отличие от первого способа, проходит незамеченным для пользователя. Чтобы передать данные, надо их присвоить какой- нибудь переменной. Все переменные, объявленные в файле, доступны и в вызываемых, и в вызывающих файлах. Но!!! Само cобой разумеется, что надо сначала подключить файл, а потом использовать имеющиеся в нем данные, а в подключаемых файлах использовать можно только то, что имеется к моменту подключения.

Второй способ организации сайта

Он немножко сложнее, но (имхо) прогрессивнее.
Все свои статьи пишем в формате html, но избегаем применения тегов, меняющих цвет, и не указываем body. Сохраняем (допустим в файле text.html), и запоминаем адрес этого сайта. Никому его не говорим - он будет для сугубо внутреннего использования.

Теперь создаем "публичный" файл для этой статьи, его мы будем заносить в каталоги и рекомендовать знакомым. Он состоит всего из нескольких строчек.

<html>
<!--#set var="description" value="описание" -->
<!--#set var="title" value="Заголовок" -->
<!--#set var="keywords" value="ключевые слова" -->
<!--#set var="file" value="url статьи" -->
<!--#include virtual="файл интерфейса.shtml" -->


Как видите, мы указали в нем заголовок, ключевые слова, описание и "приватный" файл, в котором содержится статья (text.html). Можно еще написать то, что вы там еще обычно пишете в заголовке. Я чаще всего ограничиваюсь одним title. Как-то спокойно отношусь к тому, что релевантность маленькая окажется :-).

Теперь создаем файл интерфейса (*,shtml). Начало его выглядит так:

<html><head>
<title><!--#echo var="$title" --></title>
<meta name="description"
content="<!--#echo var="$description" -->">
<meta name="keywords"
content="<!--#echo var="$keywords" -->">
</head>


Далее оформляем внешний вид - вешаем баннеры, вставляем счетчики, добавляем новости и т.д. Наконец в том уголке, где должна быть статья, пишем
<!--#include virtual="$file" -->

Теперь для радикального изменения дизайна всего сайта достаточно изменить лишь наш файл интерфейса.

Нюансы

В зависимости от ситуации а так же различного программного обеспечения может быть разным синтаксис написания имен переменных. Если вы все сделали как тут написано и ничего не вышло, попробуйте следующее:
Вставьте строку <!--#printenv -->
и посмотрите, есть ли вообще у вас хоть какие-то переменные. Если есть, но использовать их не получается, попробуйте другой способ написания :
"name"
"$name"
$name
"${name}"
"$(name)"
Один из них сработает.

Если у вас не работает даже printenv, Возможно, вам сначала нужно сделать из своего компьютера сервер. Самый простой способ - установить программу Small Http Server. Проста в установке и использовании, инструкция на русском языке. После установки сможете тестировать на своем компе CGI, SSI, PHP и т.д.











helloworld.ru © 2001-2016
Все права защищены
Rambler's Top100 TopList Rambler's Top100