Реализация генерируемого содержимого

Реализация генерируемого содержимого

Давайте реализуем генерируемое содержимое на нашем Web-сайте. Мы создадим базу данных, содержащую список всех Web-страниц (файлов с подгружаемым содержимым) с названиями и гиперссылками.

— На основе этой базы данных мы будем генерировать вложенные списки полосы навигации.

— В главе 19 мы осуществим вывод на каждой Web-странице раздела "См. также", в котором поместим гиперссылки на Web-страницы с "родственными" данными.

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

Для генерирования содержимого Web-страницы мы применим соответствующие методы объекта Element библиотеки Ext Core (см. главу 15). Этих методов довольно много, и не составит труда выбрать подходящий.

Создание базы данных

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

Наша база данных будет представлять собой три массива, хранящие списки Web-страниц, которые описывают, соответственно, теги HTML, атрибуты стиля CSS и примеры. Элементы массивов будут хранить конфигураторы, описывающие эти Web-страницы и хранящие их названия и интернет-адреса в виде строк.

Что ж, цель поставлена. За работу!

Создадим текстовый файл с именем data.js и поместим его в папке Site 2. Откроем его и наберем код, приведенный в листинге 18.1.

Листинг 18.1

var aHTML = [];

aHTML[0] = { name: "!DOCTYPE", url: "tags/t_doctype.htm" };

aHTML[1] = { name: "AUDIO", url: "tags/t_audio.htm" };

aHTML[2] = { name: "BODY", url: "tags/t_body.htm" };

aHTML[3] = { name: "EM", url: "tags/t_em.htm" };

aHTML[4] = { name: "HEAD", url: "tags/t_head.htm" };

aHTML[5] = { name: "HTML", url: "tags/t_html.htm" };

aHTML[6] = { name: "IMG", url: "tags/t_img.htm" };

aHTML[7] = { name: "META", url: "tags/t_meta.htm" };

aHTML[8] = { name: "P", url: "tags/t_p.htm" };

aHTML[9] = { name: "STRONG", url: "tags/t_strong.htm" };

aHTML[10] = { name: "TITLE", url: "tags/t_title.htm" };

aHTML[11] = { name: "VIDEO", url: "tags/t_video.htm" };

var aCSS = [];

aCSS[0] = { name: "border", url: "attrs/a_border.htm" };

aCSS[1] = { name: "color", url: "attrs/a_color.htm" };

aCSS[2] = { name: "margin", url: "attrs/a_margin.htm" };

var aSamples = [];

aSamples[0] = { name: "Гиперссылки", url: "samples/a_hyperlinks.htm" };

aSamples[1] = { name: "Контейнеры", url: "samples/a_containers.htm" };

aSamples[2] = { name: "Таблицы", url: "samples/a_tables.htm" };

Здесь мы объявили массивы aHTML, aCSS и aSamples, которые будут хранить списки Web-страниц, описывающих, соответственно, теги HTML, атрибуты стиля CSS и примеры.

Элементы каждого из этих массивов хранят конфигураторы с двумя свойствами:

— name — название соответствующего пункта вложенного списка в виде строки;

— url — интернет-адрес файла с фрагментом содержимого также в виде строки.

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

Затем откроем в Блокноте Web-страницу index.htm и вставим в ее секцию заголовка такой код:

<SCRIPT SRC="data.js"></SCRIPT>

Он загрузит и выполнит только что созданный нами файл Web-сценария data.js. В результате в памяти компьютера будут созданы три массива — наша база данных.

Отметим, что файл Web-сценария загружается и выполняется в самом начале загрузки Web-страницы index.htm. Поэтому, когда дело дойдет до исполнения Web- сценариев, хранящихся в файле main.js (а они выполняются в конце загрузки Web-страницы), наша база данных уже будет сформирована и готова к работе.