Saitistika 4.0.Руководство разработчика.2005

Быстрое освоение системы

Раздел предназначен для разработчиков, которые впервые сталкиваются с разработкой систем на основе Сайтистики. Перед тем, как приступать к изучени данного раздела настоятельно рекомендуется ознакомиться с разделами «Общие положения», «Архитектура системы», «База данных», «Бэкофис», «Фронтофис».

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	41 из 41

Создание нового фронтофиса

Описана пошаговая последовательность действий, начиная с определения требований, и заканчивая программированием шаблонов вывода.

Краткое описание, исходные материалы

Тип веб-сайта, базовые требования

Информационный сайт о продуктах и услугах компании, предоставляющей услуги для аквариумистов.

Сайт должен:

1.Содержать 4 раздела и порядка 50 страниц текстовой информации

2.Иметь автоматическую навигацию – общую по всему сайту и внутри каждого раздела

3.Иметь систему анонсирования важных страниц по принципу внутренней баннерной системы

4.Иметь главную страницу с возможностями:

4.1.Полного контроля (через визуальный редактор) нескольких блоков

4.2.Автоматического анонсирования специальным образом задаваемых отдельных материалов и разделов

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

Карта сайта

1.О компании

1.1.Руководство

1.2.Контакты

1.3.Карта проезда

2.Продукты

2.1.Аквариумы

2.1.1.LP 560

2.1.2.LP 800

2.1.3.LP 1000

2.1.4.LP 1200

2.2.Оборудование

2.2.1.Системы освещения

2.2.2.Системы фильтрации воды

2.2.3.Аксессуары

2.3.Рыбы

2.3.1.Морские

2.3.1.1.Zebrasoma xanthurum

2.3.1.2.Pterois volitans

2.3.1.3....

2.3.1.4.Thalassoma lunare

2.3.2.Пресноводные

2.3.2.1.Барбус суматранский

2.3.2.2.Барбус огненный

2.3.2.3....

2.3.2.4.Дискус Голубой Туркис

2.3.2.5.Дискус Мандарин

2.3.2.6.Дискус Кобальт

3.Услуги

3.1.Комплексное обслуживание аквариумов

3.2.Создание аквариумов под заказ

3.3.Для посредников

4.Клиенты

Типы страниц

Посмотрим на карту. Всем страницам на концах веток разделов (они и будут содержать основную информацию) присвоим тип «3». Все остальные содержат внутри другие страницы, и их (за исключением главной страницы) логично сделать типом «2». Главная страница получается типом «1».

Для наглядности еще раз повторим структуру раздела с указанием типа страниц около каждой.

Главная страница (1)

1.О компании (2)

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	42 из 42

1.1.Руководство (3)

1.2.Контакты (3)

1.3.Карта проезда (3)

2.Продукты (2)

2.1.Аквариумы (2)

2.1.1.LP 560 (3)

2.1.2.LP 800 (3)

2.1.3.LP 1000 (3)

2.1.4.LP 1200 (3)

2.2.Оборудование (2)

2.2.1.Системы освещения (3)

2.2.2.Системы фильтрации воды (3)

2.2.3.Аксессуары (3)

2.3.Рыбы (2)

2.3.1.Морские (2)

2.3.1.1.Zebrasoma xanthurum (3)

2.3.1.2.Pterois volitans (3)

2.3.1.3.... (3)

2.3.1.4.Thalassoma lunare (3)

2.3.2.Пресноводные (2)

2.3.2.1.Барбус суматранский (3)

2.3.2.2.Барбус огненный (3)

2.3.2.3.... (3)

2.3.2.4.Дискус Голубой Туркис (3)

2.3.2.5.Дискус Мандарин (3)

2.3.2.6.Дискус Кобальт (3)

3.Услуги (2)

3.1.Комплексное обслуживание аквариумов (3)

3.2.Создание аквариумов под заказ (3)

3.3.Для посредников (3)

4.Клиенты (3)

Соответственно, в дополнение к карте нужно реализовать прототип из 3-х страниц

1.Главная страница

2.Страница раздела, на которой выводится список содержащихся в нем материалов

3.Страница материала

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	43 из 43

Главная страница

Страница раздела

Страница материала

Прототип может быть в одном из видов:

1.Графические файлы, содержащие точный вид 1 экземпляра для каждого типа страницы

2.Статические HTML-файлы с произвольной структурой и нарезкой на «инклуды» для каждого типа страницы

Прототип вместе с картой и составляют исходные материалы.

Анализ прототипа

Проанализируем структуру этих типов страниц. Видим, что эти страницы:

1.Имеют общую верхнюю часть, содержащую логотип и три баннера справа.

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	44 из 44

2.Имеют общую нижнюю часть, содержащую некоторый текст.

3.Все страницы имеют одинаковый баннер внизу правой колонки.

4.Все страницы, кроме главной, имеют одинаковые списки разделов вверху и внизу.

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

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

Общие элементы

Определим элементы, общие для всех страниц

A1. Общая верхняя часть. Состоит из логотипа в верхнем левом углу и трех баннеров размером 120х60 в верхнем правом углу.

A2. Сразу под ней – навигация по некоторым разделам сайта (назовем ее «Верхняя навигация»). Определим, какие разделы должны отображаться в верхней навигации. Так как набор разделов, выводимых в верхней навигации, никак не связан со структурой разделов веб-сайта (это произвольный набор разделов), то логично выводить в

навигации все разделы с определенной пометкой (пометки для разделов задаются на странице свойств раздела в бэкофисе системы). Просмотрев набор уже существующих пометок в свойствах любого раздела, решаем, что в верхней навигации будем выводить разделы с пометкой «Верхняя навигация – является корневым разделом».

A3. На всех страницах, кроме главной, выводится правое навигационное меню, состоящее из всех подразделов текущего раздела. В скобках справа от названия каждого раздела указывается количество материалов, содержащихся в этом разделе (без учета подразделов).

Под навигационным меню находится баннер размером

100х100.

A4. Внизу страницы находится еще одна навигация по разделам сайта (назовем ее «Нижняя навигация»). Как и в верхней, в нижней навигации могут отображаться произвольные разделы сайта, причем наборы разделов в верхней и нижней навигациях отличаются. Аналогично верхней навигации, будем выводить здесь все разделы, имеющие определенную пометку. Просмотрев список имеющихся пометок, решаем завести новую пометку для нижней навигации и назвать ее «Нижняя навигация – является корневым разделом».

A5. Сразу под нижней навигацией находится текст, общий для всех страниц сайта. Удобно создать материал,

содержимым первой страницы которого будет этот текст (назовем этот материал индексным материалом сервера),

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

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	45 из 45

Страница раздела

Определим элементы, специфичные для страницы раздела. Общие элементы также опускаем.

B1. Вверху страницы под общими элементами выводится

содержимое первой страницы индексного материала текущего раздела, под которым находится заголовок текущего раздела.

B2. Левая колонка содержимого – выводятся блоки для

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

сопроводительную надпись и список присоединенных к материалу файлов со ссылками.

B3. Правая колонка содержимого – выводятся блоки для

каждого непосредственного подраздела текущего раздела. Каждый блок содержит картинку раздела, название со ссылкой, описание и количество материалов в этом разделе.

Страница материала

Определим элементы, общие для страницы материала (общие элементы для всех страниц опускаем)

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

B5. Под верхним ниспадающим меню выводится название текущего материала, затем подряд выводится содержимое всех страниц материала.

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	46 из 46

Главная страница

Определим элементы, специфичные для главной страницы. Уже описанные общие элементы опускаем.

B6. Левая колонка. Содержит текст, который удобно сделать индексной страницей раздела (второй, так как первая уже выводится в общей нижней части, блок A5). Под текстом – баннер размером 100х100 из другого профиля (не из того, из которого выводится баннер в общей правой колонке, блок A3).

B7. Средняя колонка. В верхней ее части находится некоторый текст, который удобно сделать содержимым первой страницы индексного материала раздела (в данном случае раздел – это раздел, представляющий собой сервер). Под страницей индексного материала выводятся 2 блока материалов. Каждый блок состоит из картинки материала, его названия (со ссылкой) и краткой сопроводительной надписи. Выводим здесь

блоки для самых новых по дате материалов с пометкой «Важно» (такая пометка уже есть в свойствах материалов). Под блоками материалов выводятся 2 блока разделов с пометкой «Важно». Каждый блок также состоит из картинки раздела, его названия (со ссылкой) и описания.

B8. Правая колонка – содержит список подразделов раздела «Услуги». Для гибкости реализации сайта будем

выводить здесь подразделы раздела по умолчанию для типа «Каталог сервера». Разделом по умолчанию можно назначить любой раздел сервера, в том числе и раздел «Услуги». Внизу колонки выводится баннер из того же профиля, что и в общей правой колонке, блок A3.

Проектирование и создание инфраструктуры

Определимся теперь с набором типов разделов сайта и файлами, в которых будут реализованы все типы его страниц. Как было отмечено ранее, сайт состоит из трех различных типов страниц, включающих в себя главную страницу, сраницу раздела и страницу материала. Любой веб-сайт, работающий на Saitistika, имеет одно представление раздела, являющееся наиболее общим. Разделы с таким представлением реализуются как разделы стандартного типа «Каталог сервера». Если некоторые разделы на сайте должны иметь другое представление на фронтофисе, то для них заводятся другие типы разделов. В рассматриваемом сайте имеется только одно представление разделов, поэтому новые типы разделов создавать не требуется. Все разделы проектируемого сайта будут иметь тип «Каталог сервера» и, соответственно, реализовываться в файле content.asp в каталоге темы. Материалы сайта также имеют только одно представление, поэтому наиболее разумно реализовать их в файле material.asp, содержащем стандартное представление материала. Главная страница любого сайта реализуется в файле default.asp каталога темы.

Теперь в бэкофисе можно создать структуру веб-сайта. Для этого сначала создадим для него новую тему. Для этого перейдем в раздел Структура | Шаблоны, нажмем на ссылку «Основная тема» и на загрузившейся по этой ссылке страницу нажмем на ссылку «Добавить тему». В форме введем название, мнемонику (это будет имя каталога с темой, находящегося в разделе /common/data/themes) и описание темы, затем нажмем кнопку «Добавить». При этом создастся новая тема, унаследованная от основной темы. Если тема «Основная тема» была правильно импортирована в базу, то теперь можно автоматически сгенерировать новую тему, перейдя на вкладку «Генерация тем», отметив там новую тему, в блоке «Куда генерировать» отметив «Генерировать на сайт» и нажав кнопку «Сгенерировать». Если же основная тема не была правильно проимпортирована, то создать новую тему в файловой структуре можно, скопировав каталог /common/data/themes/default в каталог /common/data/themes, и назвать новый каталог так, как было указано в поле «Мнемоника» при создании новой темы.

После создания темы нужно создать в бэкофисе новый сервер, в свойствах сервера в поле «Тема» выбрать новую тему, заполнить остальные поля и нажать кнопку «Сохранить». После создания сервера можно создать всю структуру разделов и материалов из карты сайта, выбирая при создании всех разделов тип раздела «Каталог сервера», как говорилось ранее. Созда структуру каталогов сервера, в свойствах сервера в качестве раздела по умолчанию для типа «Каталог сервера» нужно выбрать раздел «Услути» (или любой другой по желанию) для вывода в правой колонке главной страницы его подразделов.

Также на странице Настройки | Типы ресурсов требуется создать 2 новых типа ресурсов: «баннер 120х60» и «баннер

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	47 из 47

100х100» (тип ресурса – шаблон профиля баннерной системы, имя главного файла – соответственно banner-template- 120x60.xsl и banner-template-100x100.xsl), затем на странице Интерактив | Баннерная система | Добавить профиль добавить 3 профиля: «Правый верхний» (шаблон вывода – «баннер 120х60»), «Левый нижний» (шаблон вывода – «баннер 100х100») и «Правый нижний» (шаблон вывода – «баннер 100х100»). Затем в эти профили можно включить один или несколько баннеров, которые будут отображаться в соответствующих частях страницы. Сами xsl-файлы шаблонов создадим в разделе «Создание шаблонов».

Как только структура веб-сайта и физический каталог новой темы будут созданы, сайт будет настроен в соответствии с руководством администратора, он уже будет работать (представление страниц будет пока как в основной теме) и можно приступать к программированию сайта, заключающемуся в данном случае в изменении представления страниц (файлы content.asp, material.asp и default.asp).

Создание шаблонов

Общие элементы и представление раздела (content.asp)

Начнем программирование с изменения представления для раздела (файл content.asp), одновременно занимаясь и общими элементами. Большей частью общего оформления страниц занимается класс CPageDecoration, находящийся в файле CPageDecoration.asp в каталоге темы. Поэтому для изменения оформления страниц часто нужно изменять методы этого класса. Вызов методов класса CPageDecoration на странице происходит через объект oPD. Объект oPD на фронтофисе имеет «синонимы» – Decoration, oPage, Page. В этом разделе в качестве имени объекта всегда используется oPD, но на реальной странице вместо него может быть использован любой его синоним.

В разных частях страницы нам потребуется выводить баннеры. Профили для баннеров уже созданы при создании инфраструктуры, но для вывода баннеров необходимо создать xsl-шаблоны вывода. Создадим эти шаблоны из стандартного шаблона для баннера размером 234х90, скопировав файл banner-template-234x90.xsl в файлы banner-template-120x60.xsl и banner-template-100x100.xsl. Затем в файле banner-template-120x60.xsl требуется заменить в размерах 234 на 120, 90 на 60, а в banner-template-100x100.xsl заменить 234 и 90 на 100. Теперь баннеры из профилей «Правый верхний», «Левый нижний» и

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	48 из 48

«Правый нижний» будут выводиться через эти шаблоны. Для вывода баннера в любом месте страницы нужно в этом месте вызвать функцию Banners_ShowBanner с параметром, которым может быть ID или название профиля. Дялее баннеры везде будут выводиться по названию профиля, т.к. неизвестны ID профилей. Но если ID профилей известны, то рекомендуется выводить баннеры по ID профилей.

Вывод общей верхней части происходит в методе Top класса CPageDecoration. Первая таблица, выводящаяся в этом методе внутри тега <body>, не нужна, выведем вместо нее другую таблицу, представляющую собой блок A1 – логотип в верхнем левом углу и три баннера в верхнем правом углу:

<table cellspacing="0" cellpadding="0" width="<%=CStr(TableWidth) + WidthType%>" border="0">

<tr>

<td width="100%">

<a href="/"><img src="/images/top-logo.gif" border="0" width="200" height="60" alt="Логотип"></a><%UserSession.WriteHooks%>

</td>

<td>

<table cellspacing="0" cellpadding="0" border="0"> <tr>

<td><%Banners_ShowBanner("Верхний")%></td> <td><%Banners_ShowBanner("Верхний")%></td> <td><%Banners_ShowBanner("Верхний")%></td>

</tr>

</table>

</td>

</tr>

</table>

При выводе таблицы предполагается, что в каталоге images фронтофиса находится файл top-logo.gif размером 200х60. Если файл называется по-другому и/или имеет другие размеры, нужно соответственно изменить тег <img>, а также написать подходящий alt. Заметим, что при выводе таблицы мы не забыли вызвать функцию UserSession.WriteHooks, которая должна выводиться как можно ближе к началу страницы и при этом не нарушать дизайн с учетом, что она выводит несколько пустых изображений размером 1x1 и тег <br> после них.

Далее в фукнции Top идет строка <%=Navigator.Output("/themes/" & TRim(FolderInfo.ThemeName) & "/navigationtopmenu.xsl")%>, выводящая верхнее меню. В новом сайте вместо верхнего меню должна выводиться верхняя навигация (блок A2). Вспомним, что в нижней части страницы должна выводиться похожая навигация (блок A4), отличающаяся только пометкой выводимых разделов. Логично выводить такие навигации через один xsl-файл, передавая ему пометку в качестве параметра. Назовем этот параметр folder-note. Для верхней навигации значением этого параметра будет мнемоника пометки «Верхняя навигация - является корневым разделом», nav1root. Напишем xsl-файл для вывода такой навигации:

<?xml version='1.0' encoding="windows-1251"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:z="#RowsetSchema" xmlns:rs="urn:schemas-microsoft-com:rowset"> <xsl:output method="html" encoding="windows-1251"/>

<xsl:include href="templates.xsl"/>

<xsl:variable name="folder-note" select="/xml/param[@name='folder-note']"/> <xsl:variable name="TopIcons" select="boolean(/xml/param[@name='TopIcons'])"/>

<xsl:template match="/"> <xsl:apply-templates/>

</xsl:template>

<xsl:template match="/xml"> <div>

<xsl:apply-templates select="rs:data[@name='folders']"/> </div>

</xsl:template>

<xsl:template match="rs:data">

<table cellspacing="0" cellpadding="5" width="{/xml/param[@name='width']}" border="0" height="15">

<tr><td class="nav1">

<xsl:apply-templates select="z:row[(substring-after(concat(@notes,'.'),

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	49 из 49

$folder-note)) and number(@rights)-floor(number(@rights) div 2048)*2048 >=1024]" mode="navbar"/> 

</td></tr>

</table>

</xsl:template>

<xsl:template match="z:row" mode="navbar">

<img src="/images/empty.gif" height="1" alt=""> <xsl:attribute name="width"><xsl:choose>

<xsl:when test="position()=1">14</xsl:when> <xsl:otherwise>22</xsl:otherwise>

</xsl:choose></xsl:attribute>

</img>

<a class="nav1" href="/themes/{@themename}/{@filename}?folder={@id}"> <u><xsl:value-of select="substring(@title,1,1)"/></u><xsl:value-of

select="substring(@title,2)"/>

</a>

<xsl:if test="$TopIcons"> <xsl:call-template name="ficons" />

</xsl:if>

</xsl:template>

</xsl:stylesheet>

Приведенный здесь текст xsl-файла (назовем его navigation-folders.xsl) получен из файла navigation-topmenu.xsl и служит для вывода навигации из разделов с пометкой, переданной через параметр folder-note. Для вывода верхней навигации в методе

Top класса CPageDecoration требуется заменить строку <%=Navigator.Output("/themes/" & TRim(FolderInfo.ThemeName) & "/navigation-topmenu.xsl")%> на следующие строки:

<%Navigator.SetParam "folder-note", "nav1root"%> <%=Navigator.Output("/themes/" & TRim(FolderInfo.ThemeName) & "/navigationfolders.xsl")%>

Оставшаяся часть метода Top нам не требуется и ее нужно удалить (удалить следует таблицу высотой в 1px, обеспечивающую оформление страниц стандартного сайта, а также «лишний» вызов функции UserSession.WriteHooks, теперь эта функция вызывается в другом месте).

Таким образом, общая верхняя часть страниц (блоки A1 и A2) реализована. Теперь реализуем общую нижнюю часть страниц

(блоки A4 и A5).

Выводом нижней части страницы занимается метод Bottom в классе CPageDecoration. Вспомним, что для вывода нижней навигации требуется завести новую пометку. Для этого открываем в SQL Enterprise Manager таблицу FolderNotes и добавляем в нее следующую строку: ID – сгенерируется автоматически, mnemonic – navbottom, name – Нижняя навигация – является корневым разделом. После добавления этой строки в свойствах разделов появится добавленная пометка и ее можно будет отметить у требуемых разделов.

Нижняя часть полностью отличается от стандартной, поэтому метод Bottom придется переписать:

Public Sub Bottom()

If Print Then Exit Sub %>

<br>

<%

'Удалим элемент folder-note, оставшийся от предыдущего вывода навигации

Navigator.ClearParam "folder-note"

'Выводим нижнюю навигацию (блок A4)

Navigator.SetParam "folder-note", "navbottom" %>

<%=Navigator.Output("/themes/" & TRim(FolderInfo.ThemeName) & "/navigationfolders.xsl")%>

<%

' Выводим первую страницу индексного материала сервера (блок A5)

Copyright © 2005 Individ company	Страница
Контакты: www.saitistika.ru | [e-mail] | [phone]	50 из 50