Глаза страшат, а руки делают

ШАГ 5


  • Краткое обобщение пройденного
  • Переменная окружения QUERY_STRING

КРАТКОЕ ОБОБЩЕНИЕ ПРОЙДЕННОГО

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

Директивы настройки

  • #set — для создания переменных и установки их значений (атрибуты var и value, используются вместе);
  • #config — для установки значений сообщения об ошибке (атрибут errmsg), формата размера файла (атрибут sizefmt), формата даты/времени (атрибут timefmt).

Выполняющие директивы

  • #echo — для вывода на экран значений переменных (атрибут var);
  • #include — для вставки содержимого из другого файла (атрибуты file или virtual);
  • #fsize — для вывода размера файла в заданном формате (атрибуты file или virtual);
  • #flastmod — для вывода даты последнего обновления файла в заданном формате (атрибуты file или virtual);
  • #printenv — для вывода списка переменных окружения (атрибутов не имеет).

Кроме того, мы знаем условный оператор #if.

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

Теперь пора узнать, как можно изменить содержимое страницы, например, по запросу пользователя.

ПЕРЕМЕННАЯ ОКРУЖЕНИЯ QUERY_STRING

Query string означает «строка запроса». Значение строки запроса присоединяется к адресу файла через знак «?» и отображается в адресной строке:

http://адрес/сайт.html?значение_QUERY_STRING

Например:

http://froland.ru/scores.html?fp

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

Попробуем реорганизовать таким образом сайт нашего Васи Пупкина (см. шаги 1 и 2).

Подготовим файлы.

style.css — содержит стили css

/* стили отображения и ссылок меню */
.txtmenu {text-align: center; color: #FF8080; font-weight: bold; font-family: Arial;}
a.lnkmenu:link, a.lnkmenu:visited, a.lnkmenu:active {color: #FFC; text-decoration: none;}
a.lnkmenu:hover {color: #FF8080; text-decoration: none;}
/* стили основного содержания (контейнер содержания имеет id "body") */
#body p {font-family: "Times New Roman", Times, serif; font-size: 100%; margin: 6px 0px 6px 0px; text-align: left;}
#body h1 {font-family: "Times New Roman", Times, serif; color: #000;}

kepka.txt — шапка сайта

Чтобы на заморачиваться с вёрсткой, сделаем всё в таблицах.

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<img src="kepka.jpg" width="600" height="200" border="0"></td>
</tr>
</table>

niz.txt — «подвал» сайта

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<img src="niz.jpg" width="600" height=="30" border="0"></td>
</tr>
</table>

Осталось подготовить файл, содержащий меню, и файлы с содержанием страниц. Но мы это сделаем потом, а сначала займёмся «контейнером» — index.html, который будет открываться в браузере.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->
<!--#set var = "DOCTIT" value = "Мой сайт - Главная страница" -->
<!--#elif expr = "$QUERY_STRING=page2" -->
<!--#set var = "DOCTIT" value = "Мой сайт - О сайте" -->
<!--#elif expr = "$QUERY_STRING=page3" -->
<!--#set var = "DOCTIT" value = "Мой сайт - Обо мне" -->
<!--#elif expr = "$QUERY_STRING=page4" -->
<!--#set var = "DOCTIT" value = "Мой сайт - Ссылки" -->
<!--#endif -->

    <title><!--#echo var = "DOCTIT" --></title>
<meta http-equiv=
"Content-Type" content="text/html; charset=Windows-1251">
<link href=
"style.css" type=text/css rel=stylesheet>
</head>

<body>

<!--#include file = "kepka.txt" -->
<!--#include file = "menu.html" -->
<!--#if expr = "$QUERY_STRING" -->
<!--#include file = "$QUERY_STRING.html"-->
<!--#else --><
<!--#include file = "page1.html"-->
<!--#endif -->
<!--#include file = "niz.txt" -->

</body>
</html>

Начнём разбираться.

В самой «голове» — блок условного оператора для названий страниц (в тэге <title>).

Файл-контейнер у нас один. И «голова» у него тоже одна. Следовательно, заголовок <title> должен изменяться при загрузке разных «псевдостраниц».

Итак, первое условие:

<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->

$QUERY_STRING='' означает, что строка запроса пуста.

$QUERY_STRING=page1 означает, что строка запроса — это page1.

|| — оператор «или».

Когда мы загружаем главную страницу в первый раз, в адресной строке только имя файла, безо всяких вопросов с довесками. Следовательно, наша QUERY_STRING пуста ($QUERY_STRING=''). Когда же мы попадаем на главную страницу по ссылке с другой страницы сайта, то у нас появляется добавка ?page1, поскольку ссылки на сайте работают по запросу.

То есть, если пусто или если page1, то

<!--#set var = "DOCTIT" value = "Мой сайт - Главная страница" -->

задаём переменную DOCTIT, содержащую название главной страницы.

На другие страницы — page2, page3 и page4 — мы можем попасть только по запросу QUERY_STRING, поэтому всё то же самое, только без «или».

Теперь выводим переменную в тэг <title>:

<title><!--#echo var = "DOCTIT" --></title>

Дальше, понятное дело, включаем шапку и меню:

<!--#include file = "kepka.txt" -->
<!--#include file = "menu.html" -->

Теперь разберёмся в условном операторе для включения содержания страницы.

<!--#if expr="$QUERY_STRING" -->
<!--#include file="$QUERY_STRING.html"-->
<!--#else -->
<!--#include file="page1.html"-->
<!--#endif -->

Если адресная строка имеет «довесок» в виде QUERY_STRING, то включаем страницу, указанную в «довеске». В противном случае (т.е. QUERY_STRING чиста, как слеза) включаем page1 — главную страницу.

ПРИМЕЧАНИЕ

Каждый файл содержания имеет имя и расширение .html. Чтобы не прописывать .html в каждую QUERY_STRING, прописываем его в директиву #include как дополнение к QUERY_STRING, которая совпадает с именем файла без расширения.

Ну, и подвал:

<!--#include file = "niz.txt" -->

Осталось прошерстить menu.html — меню сайта.

<table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#800000"><tr>
<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->
<td><div class="txtmenu">Главная</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html?page1" class="lnkmenu">Главная</a></div></td>
<!--#endif -->
<!--#if expr = "$QUERY_STRING=page2" -->
<td><div class="txtmenu">О сайте</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html?page2" class="lnkmenu">О сайте</a></div></td>
<!--#endif -->
<!--#if expr = "$QUERY_STRING=page3" -->
<td><div class="txtmenu">Обо мне</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html?page3" class="lnkmenu">Обо мне</a></div></td>
<!--#endif -->
<!--#if expr = "$QUERY_STRING=page4" -->
<td><div class="txtmenu">Ссылки</div></td>
<!--#else -->
<td><div class="txtmenu"><a href="index.html?page4" class="lnkmenu">Ссылки</a></div></td>
<!--#endif -->
<td><div class="txtmenu"><a href="javascript: alert('Еще не прикрутил');" class="lnkmenu">Гостевая книга</a></div></td>
</tr></table>

Тут более громоздкая конструкция. Каждый #if имеет свой «персональный» #else, поэтому не получится использовать компактный #elif.

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

Если главная страница,

<!--#if expr = "$QUERY_STRING='' || $QUERY_STRING=page1" -->

первый пункт меню — без ссылки:

<div class="txtmenu">Главная</div>

В противном случае — со ссылкой:

<div class="txtmenu"><a href="index.html?page1" class="lnkmenu">Главная</a></div>

А все файлы с содержанием (pageN.html) будут выглядеть следующим образом:

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" id="body" style="background: #FFF;">
<tr>
<td>

<!-- Здесь содержание страницы -->
. . .
. . .
. . .
</td>
</tr>
</table>

Посмотреть скрипт в работе


Следующий шаг >>


 000619