» Навигация
- - - - - - - - - - - - - - - -
  » Наша кнопка
- - - - - - - - - - - - - - - -
   » Пример использования Tabular Data
 
Автор: Алексей Голубев

Сайт: http://www.frnet.narod.ru/

Один человек попросил меня помочь ему сделать поиск людей из их группы на сайте. Конечно первое, что мне пришло на ум - это создание базы данных и последующее обращение к ней через встроенный компонент Internet Explorer, Tabular Data, так как что-то подобное я уже разбирал, а точнее сказать, пример из моей любимой книжки по разработке web-страниц ("Новейший самоучитель по разработке Web-страниц", В. Белунцов, издательство "Десс Ком", Москва - 2000). В книге описывалось создание базы с книгами, однако скрипт двумя пальцами переделывался в скрипт поиска людей.

Допустим у вас есть база данных с именами и фамилиями людей. Вам нужно создать поиск. Для этого сначала надо переформатировать базу в текстовый файл (это необходимо для работы Tabular Data) вида:

fname, link
Иванов Иван, <a href="m000.html">информация</a>
Иванов Петр, <a href="m001.html">информация</a>
Иванов Сергей, <a href="m002.html">информация</a>
Иванов Александр, <a href="m003.html">информация</a>
Иванов Алексей, <a href="m004.html">информация</a>
Петров Иван, <a href="m005.html">информация</a>
Петров Максим, <a href="m006.html">информация</a>
Петров Александр, <a href="m007.html">информация</a>
Сидоров Иван, <a href="m008.html">информация</a>
Сидоров Владимир, <a href="m009.html">информация</a>
В первом столбце находятся фамилии и имена людей (fname - сокращение от full name), во втором - ссылки на их личные web-станицы (link - ссылка, ярлык). Фамилию и имя пришлось объединить в одно поле, так как, к сожалению, элемент позволяет фильтровать по одному (по первому) полю (или я что-то не так делал). Назовем этот файл для примера base.data. Далее мы вставляем элемент Tabular Data на страницу, вот так:

<object id=base classid="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83">
<param name="dataurl" value="base.data">
<param name="useheader" value="true">
</object>
Здесь, classid - особый код компонента в Internet Explorer. Параметр dataurl - указывает относительный (как в данном случае) или абсолютный адрес базы данных; useheader - указывает на то, что первая строка используется, как заголовок с названиями полей (по умолчанию этот параметр принимает значение - false).

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

<table datasrc="#base" id=res>
<tr>
<td><span datafld=fname></span></td>
<td><span datafld=link dataformatas=html></span></td>
</tr>
</table>
Параметр тега table datasrc связывает элемент Tabular Data с таблицей, а атрибут datafld тега span связывает его с отдельным полем базы.

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

<table>
<tr>
<td>По Имени<br><br>
Имя: <input type=text id=fname><br>
<input type=button value=Найти onclick="f_name()">
</td>
<td>По Фамилии<br>
Фамилия: <input type=text id=lname><br>
<input type=button value=Найти onclick="l_name()">
</td>
</tr>
<tr>
<td colspan=2><br><input type=button value="Очистить Все" onClick="reset()"> 
<input type=button value="Найти по Имени и Фамилии" onClick="l_f_name()"><br>
</td>
</table>
Тут объяснять нечего: здесь чистый HTML (тем кто его не знает или не очень хорошо разбирается в нем советую прочитать выше упомянутую книгу).

Теперь самое интересное - написание функций f_name(), l_name(), l_f_name() и reset(). Я написал их на JavaScript. Они достаточно просты, но получились, на мой взгляд, достаточно громоздкими для тех действий, которые они выполняют. Будет рассматривать их по одной. Начнем с l_name():

function l_name() {
res.style.display="none"; //1
if (lname.value!="*") { if (lname.value!=" ") { if (lname.value!="") { //2
fname.value=""; //3
base.Filter="fname="+lname.value + "*"; //4
base.Reset(); //5
res.style.display="block"; }}} //6
}
Первое, что делает функция - это скрытие таблицы с базой (строка 1). Далее (строка 2) проверяем, заполнено ли поле правильно. Строка 3 очищает поле с именем (это сделано, чтобы не запутать пользователя, в том случае, если не окажется нужной фамилии в базе). 4 строка присваивает значение фильтру (отображать поля, в которых значение поля fname начинается на то, что введено в поле "Фамилия"). Строка 5 обновляет параметры базы, я 6 - выводит таблицу на экран. Аналогично данной написана функция f_name() (для тренировки желательно написать ее самим, хотя вот код):

function f_name() {
res.style.display="none";
if (fname.value!="*") { if (fname.value!=" ") { if (fname.value!="") {
lname.value="";
base.Filter="fname=*"+fname.value;
base.Reset();
res.style.display="block"; }}}
}
Теперь перейдем к написанию функции поиска по имени и фамилии (сразу надо сказать, что она также не очень отличается от двух предыдущих), главное отличие - задание условий, при которых начнется поиск. Вот что надо:

function l_f_name() {
res.style.display="none";
if (lname.value!="*" && fname.value!="*") { if (lname.value!=" " && fname.value!=" ") {
if (lname.value!="" && fname.value!="") {
if (lname.value=="") lname.value="*";
if (fname.value=="") fname.value="*";
base.Filter="fname="+lname.value+" "+fname.value;
base.Reset();
res.style.display="block"; }}}
}
И, наконец, очистка всех полей формы, фильтра и удаление таблицы с экраны. Из первых трех функций можно догадаться, как ее написать, однако, для увеличения объема статьи, приведу и ее код :):

function reset() {
base.Filter="";
lname.value="";
fname.value="";
res.style.display="none";
}
Вот и весь поиск. В заключении скажу, что компонент Tabular Data при сохранении страницы пользователем не выдает базу. Это можно использовать для авторизации на сайте (если конечно Ваш хостинг не поддерживает PHP, Perl, CGI). Однако, для создания базы с именами людей лучше использовать другой скрипт, более универсальный, более подходящий для этих целей. О нем я расскажу в одной из последующих своих статей.

P.S.1. Для тех, кто не знает: все функции нужно писать в разделе <head>, в парном теге <script>.

P.S.2. Вы можете cкачать этот пример.
 
  » Друзья сайта
- - - - - - - - - - - - - - - -
  » Разное
- - - - - - - - - - - - - - - -
  » Счетчики
- - - - - - - - - - - - - - - -
  Дизайнер и ведущий проекта: Голубев Алексей
Copyright Alexei Golubev © 2004
Hosted by uCoz