9. Дополнительные возможности формирования веб-страниц

В предыдущих главах мы рассмотрели основные приемы создания динамических веб-страниц, основанные на применении языка разметки HTML, таблиц стилей CSS и языка сценариев JavaScript. Собственно говоря на этом можно было бы и завершить эту книгу. Девятая глава, которую вы сейчас читаете, является лишь небольшим дополнением к основное тексту. В ней мы коротко проиллюстрируем некоторые дополнительны. возможности, которые имеются при создании веб-страниц. Такими возможностями являются, в частности, использование элементов управления Internet Explorer и применение простейших сценариев, исполняющихся на сервере.

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

9.1. Пример использования элемента управления Tabular Data

Использование элементов управления Internet Explorer имеет свои преимущества и недостатки. Преимущества заключаются в существенном расширении возможностей веб-страницы, а недостатки — в возможности просмотра только в Internet Explorer. Но поскольку этим броузером пользуется очень большое число посетителей WWW, применение элементов управления заслуживает внимания.

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

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

Текстовая база данных

Для этого давайте создадим файл базы данных, в которой хранятся все сведения об имеющихся в библиотеке книгах. Для примера предположим, что у нас всего восемь книг. Файл базы данных будет представлять собой обычный текстовый файл (с расширением txt), в котором каждая строка является записью — данными об одной книге. Каждая запись состоит из нескольких полей: автор, название книги, размер файла и имя файла для загрузки. Чтобы не усложнять код, будем в этом месте просто ставить гиперссылку. Поля будем отделять друг от друга запятыми, например, так:

Толстой,Анна Каренина,305,<А HREF="anna.ziр">загрузить</А>

Как видите, заполнение базы данных вполне можно поручить любому человеку, умеющему использовать компьютер как пишущую машинку. (В принципе, можно избавить его и от необходимости писать страшную конструкцию <А HREF>.) В начале файла базы данных напишем заголовок каждого поля. Вот что у нас получится:

Author,Name,Size:INT, File Дюма,Три мушкетера,250

<A HREF="trim.zip">3arpyзить</A> Дюма,Десять лет спустя,198,<А HREF="deslet.zip"> загрузить </А> Дюма,Двадцать лет спустя,170,

<А HREF="dvlet.zip"> загрузить </А> Толстой/Война и мир,1045,

<А HREF="vojna.rar"> загрузить </А> Толстой,Анна Каренина,305,<А HREF="anna.zip"> загрузить </А> Достоевский,Идиот,560,

<А HREF="idiot.zip"> загрузить </А>

Достоевский,Преступление и наказание,710,

<А HREF="prest.rar"> загрузить </А>

Достоевский,Двойник,432,

<А HREF="doppel.zip"> загрузить </А>

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

INT

Теперь давайте создадим саму веб-страницу. Сначала, как обычно, напи-шем заголовок и определим стиль вывода на экран:

<ТIТLЕ>Электронная библиотека</ТIТLЕ>

<STYLE> BODY { background-color: #F4FFEF;

color: #182F1A;

font-family: sans-serif; font-size: 120%;

} </STYLE>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1>

Элемент управления для работы с базой данных

Теперь, чтобы иметь возможность обращаться к базе данных, поместим на страницу элемент управления — он называется Tabular Data):

<OBJECT ID="hudlit" CLASSID="clsid:333C7BC4-460F-llDO-BC04-0080C7055A83" BORDER="0" WIDTH="CT HEIGHT="0"> <PARAM NAME="DataURL" VALUE="books.txt"> <PARAM NAME="UseHeader" VALUE="True"> </OBJECT>

Может показаться, что это выглядит “страшно”, но не пугайтесь, на самом деле все очень просто. Давайте разберемся. Элемент управления помещается на страницу с помощью тега <OBJECT>. При этом атрибут 1D= — это, как обычно, уникальное имя объекта. Столь необъятно выглядящий атрибут CLASSID= является всего лишь идентификатором (проще говоря, номером ) соответствующей системной подпрограммы. Всякий раз, когда необходимо вставить элемент управления Tabular Data, приходится вводить этот идентификационный номер — clsid:333C7BC4-460F-11DO-BC04-0080C7055A83. У других элементов управления другие номера, такие же длинные.

В первом из тегов <PARAM> мы связываем элемент управления с файлом базы данных. Здесь предполагается, что этот файл называется books.txt.

Второй тег <PARAM> указывает, что в базе данных первая строка используется как заголовочная. Это необходимо, поскольку далее мы будем o6pа-щаться к полям через их заголовки.

Динамическое формирование таблицы

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

Чтобы связать таблицу с элементом управления, используем атрибут

DATASRС=:<TABLE DATASRC="#hudlit">

Обратите внимание на то, что мы указываем здесь не файл базы данных, а имя элемента управления, связанного с этим файлом. Теперь мы можем определить строку таблицы. В тех местах, куда нужно вставить значение кого-либо поля из базы данных, необходимо использовать атрибут DATAFLD=. Его удобно устанавливать в тегах <DIV> и <SPAN>:

<TR>

<TD><SPAN DATAFLD="Author"></SPAN>, &laquo;

<SPAN DATAFLD="Name"></SPAN>&raquo;,

<SPAN DATAFLD="Size"></SPAN>&nbsp; кбайт.

<SPAN DATAFLD="File" DATAFORMATAS="html">

</SPAN></TD>

</TR>

Посмотрите внимательно на этот код. Здесь определена одна строка таблицы, состоящая из одной ячейки (можно было сделать и по-другому, напримеp, значение каждого поля поместить в свою ячейку). В этой ячейке последовательно отображаются: значения первого поля (автор книги), запятая, открывающая кавычка, значение второго поля (название книги), закрывающая кавычка, запятая, значение третьего поля (размер файла), пробел, слово “кбайт”, точка и значение четвертого поля (гиперссылка для загрузки текста книги). Обратите внимание на то, что в последнем случае нам пришлось использовать атрибут DATAFORMATAS='html', чтобы указать, что в базе данных содержатся НТМL-тетта. Если бы мы забыли применить этот атрибут, то в окне броузера ссылка отобразилась бы в виде исходного кода.

Собственно говоря, нам осталось только поставить закрывающие теги:

</TABLE>

</BODY>

</HTML>

Всe остальное сделает элемент управления Tabular Data. Он “пройдется” по всем записям файла базы данных, и для каждой из них автоматически создаст новую строку таблицы.

Фильтрация таблицы

Теперь можно добавить возможность выбора автора из списка и затем отображать на экране книги только выбранного автора. Если в библиотеке очень много книг, такая возможность будет совсем не лишней! Сначала создадим список выбора с помощью тега <SELECT>.

Выберите автора: <SELECT NAME="auth" onChange="auth ()">

<OPTION VALUE="">Bce

<OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Достоевский

<OPTION VALUE="Толстой">Толстой </SELECT>

Поскольку при выборе какого-либо из пунктов списка содержимое акии броузера должно изменяться, применим обработчик событий onChange (напомним, что он реагирует на изменения значения). Пусть он вызывает еще не написанную функцию auth(), которая будет выводить на экран книги только выбранного автора. Для облегчения написания этой функпии мы продублировали названия пунктов списка в атрибуте VALUE= каждого из тегов <OPTION>.

Теперь напишем эту функцию. Это проще, чем может показаться. Дело в том, что у нашего элемента управления есть свойство Filter, значением которого может являться строка типа название поля=строка, то есть сравнение одного из полей с заданной строкой. В данном случае это может быть, например: Auther=Дюма.

Поскольку имя автора у нас уже хранится как значение атрибута VALUE= , мы можем написать так:

hudlit.Filter="Author="+document.all.auth.value;

Кстати, в качестве значения атрибута VALUE= первого элемента списка (“Все”) мы не зря использовали пустую строку. Сравнение с ней в любом случае даст положительный результат, поэтому она как бы отменяет фильтр. Теперь остается только перерисовать изображения с помощью метода Reset:

hudlit.Reset () ; Вот и все. Давайте теперь посмотрим, что у нас получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Электронная библиотека</ТITLЕ>

<STYLE> BODY { background-color: #F4FFEF; color: #182F1A;

font-family: sans-serif;

font-size: 120%; } </STYLE>

<SCRIPT> function auth() { hudlit.Filter="Author="+document.all.auth.value ; hudlit.Reset () ; } </SCRIPT>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1> Выберите автора:

<SELECT NAME="auth" onChange="auth()">

<OPTION VALUE="">Bce <OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Достоевский

<OPTION VALUE="Толстой">Толстой </SELECT> <BR><BR>

<OBJECT ID = "hudlit" CLASSID = "clsid:333C7BC4-460F-llDO-BC04-0080C7055A83" BORDER="0" WIDTH="0" HEIGHT="0">

<PARAM NAME = "DataURL" VALUE = "books.txt">

<PARAM NAME = "UseHeader" VALUE = "True"> </OBJECT>

<TABLE DATASRC = "#hudlit"> <TR>

<TD><SPAN DATAFLD="Author"></SPAN>, &laquo;

<SPAN DATAFLD="Name"> </SPAN>&raquo;,

<SPAN DATAFLD="Size"></SPAN>&nbsp;кбайт.

<SPAN DATAFLD="File" DATAFORMATAS="html"></SPAN></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Результат показан на рис. 9.1. На этом рисунке вы можете видеть все назва ния книг, но если пользователь выберет из списка одного из авторов, то в окне броузера отобразятся только книги выбранного автора.

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

Рис. 9.1. Страница, на которой используются данные из базы

(мало ли, может быть, он и не помнит имя автора). Кроме того, пусть него будет возможность отсортировать список книг по имени автора и по названию книги.

Поскольку мы используем элемент управления Tabular Data, обе эти зада решаются очень просто. Чтобы пользователь мог сам ввести название ну ной книги, создадим для этого текстовое поле и кнопку Поиск рядом с ним

<INPUT TYPE="text" NAME="book" SIZE="15" MAXLENGTH="25">

<INPUT TYPE="button" NAME="search" VALUE="Поиск" onClick="bookname()">

Как видите, кнопке Поиск мы назначили обработчик событий onClick. Тепе; при нажатии этой кнопки будет выполняться еще не написанная функция booknameO, которая должна выбрать из “базы данных” только те записи, в которых присутствует введенное пользователем название книги. Скорее всего, это будет одна запись, если, конечно, в базе нет книг с одинаковыи названиями, как, например, “ Записки сумасшедшего” Гоголя и “Записки сумасшедшего” Толстого.

Собственно говоря, эта функция очень похожа на предыдущую — нам ведь всего лишь нужно применить свойство Filter, в условии которого сравнить значения поля Name (название книги) со строкой, введенной пользователем:

hudlit. Filter="Name="+document. all. book. value;

hudlit.Reset() ;

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

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

document.all.auth.selectedlndex=0 ; Эту строку мы добавим в функцию booknameO. Аналогично можно посту-пить и при поиске книг одного автора - на всякий случай очищать поле ввода названия книги. Для этого добавим в функцию auth() следующую строку:

document.all.book.value="";

Сортировка таблицы

Теперь давайте осуществим сортировку списка книг. Добавим для начала две кнопки — для сортировки по алфавиту, соответственно, авторов и названий книг:

<INPUT TYPE="button"VALUE="Сортировать по автору" onClick="sort_auth()">

<INPUT TYPE="button"VALUE="Сортировать по названию" onClick="sort_name()"> Теперь напишем сами функции сортировки. Для этого нам подойдет чудесное свойство элементоуправления Tabular Data, которое называется SortColumn. В качестве его значения нужно указать поле, значения которого нужно сортировать. Для сортировки по фамилиям авторов в данном случае следует указать поле Author, а для сортировки по названиям книг — поле Name. После этого нужно не забыть применить метод Reset(), чтобы заново “перерисовать” весь список:

function sort_auth() { hudlit.SortColumn="Author"; hudlit.Reset() ;

} . function sort_name() { hudlit.SortColumn="Name" ; hudlit.Reset();

Кстати, применение метода сортировки может избавить от необходимости заботиться о расположении записей в файле базы данных Например, в данном случае при поступлении нового архива с текстом книги можно просто добавлять запись о нем в конец файла. При загрузке файла можно сразу применить сортировку. Кстати, это можно сделать и с помощью тега <PARAM>, который должен быть внутри тега <OBJECT> элемента управления Tabular Data:

<PARAM NAME="SortColumn" VALUE="Author">

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

Давайте посмотрим на текст получившейся страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Электронная библиотека</TITLЕ>

<STYLE> BODY { background-color: #F4FFEF;

color: #182F1A; font-family: sans-serif; font-size: 120%;

} </STYLE> <SCRIPT LANGUAGE""JavaScript" TYPE="text/javascript">

function auth() { document.all.book.value="";

hudlit.Filter="Author="+document.all.auth.value;

hudlit.Reset () ;

} function bookname() {

document.all.auth.selectedlndex=0;

hudlit.Filter="Name="+document.all.book.value;

hudlit.Reset (); } function sort auth()

{ hudlit.SortColumn="Author";

hudlit.Reset () ;

}

function sort_name()

{ hudlit.SortColumn="Name";

hudlit.Reset() ;

//-->

</SCRIPT>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1>

<INPUT TYPE="button" VALUE="Сортировать по автору" onClick="sort_auth()">

<INPUT TYPE="button" VALUE="Сортировать по названию" onClick="sort_name()">

<BR><BR>

Выберите автора:

<SELECT NAME="auth" onChange="auth ()">

<OPTION VALUE="">Bce

<OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Тостоевский

<OPTION VALUE="Толстой">Толстой ;</SELECT>

<BR><BR> Или введите название книги:

<INPUT TYPE="text" NAME="book" SIZE="15" MAXLENGTH="25">

<INPUT TYPE="button" NAME="search" VALUE="Поиск" onClick="bookname()">

<BR><BR>

<OBJECT ID="hudlit" CLASSID="clsid:333C7BC4-460F-11DO-BC04-0080C7055A83" B0RDER="0" ,WIDTH="0" HEIGHT="0">

<PARAM NAME="DataURL" VALUE="books.txt">

<PARAM NAME="UseHeader" VALUE="True"> </OBJECT>

<TABLE DATASRC="#hudlit"> <TR>

<TD><SPAN DATAFLD="Author"></SPAN>, &laquo;

<SPAN DATAFLD="Name"></SPAN>&raquo;,

<SPAN DATAFLD="Size"> </SPAN>Snbsp;кбайт.

<SPAN DATAFLD="File" DATAFORMATAS="html"> </SPAN></TD>

</TR> </TABLE>

</BODY>

</HTML>

Результат показан на рис. 9.2. Конечно, это очень простой пример, который хочется еще улучшить. Например, перед поиском введенного пользователем названии книги хорошо бы сначала удалить лишние пробелы и кавычки, а если введенное название не найдено, то вывести сообщение oб этом. Можно использовать файл базы данных для построения нескольких различных страниц и т. д. Однако приведенный пример уже дает некоторое представление о возможностях элемента Tabular Data. Читателям, заинтересовавшимся использованием элементов управления в Internet Explorer, можно рекомендовать обратиться к специальной литературе по этой теме.

Рис. 9.2. Соративовка данных