MainSource - Создание простой страницы закладок своими руками на XML/XSL

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

Я вспомнил, что как-то в одном проекте я применял xsl-преобразования. Правда я использовал это на стороне сервера, то есть использовались те навороченные штуки, которые в данном случае мне были не нужны. Но можно же передавать xsl-шаблон прямо браузеру, и уже он будет обрабатывать это. Да! Этот вопрос решен: данные по ссылкам и категориям вставляю в отдельный xml-файл (база ссылок), а вид отображения в браузере реализую через xsl-шаблон.

Отлично. Но еще осталась проверка на валидность формата данных — валидность моей базы данных ссылок. И тут нашлось решение из знаний по лабораторным работам института. Это же dtd-схема. Браузер автоматически будет проверять соответствие моей xml'ки данной схеме.

Ну вот. Определился. Значит делаю так: XML + XSL + DTD. Три файлика будут представлять мою страничку закладок. При этом: в браузере надо будет открывать xml-файл, а ссылки на xsl и dtd указываются в xml.

1. Разработка структуры базы данных на основе XML (links.xml)

Меня интересуют всего две сущности: ссылки и категории. Например, категория СПОРТ, а в ней несколько ссылок на сайты о футболе и баскетболе.

<?xml version="1.0" encoding="UTF-8"?>
<LINKS>

<LINK>

<HREF>http://www.championat.ru/</HREF>
<DESCRIPTION>новости о футболе</DESCRIPTION>

</LINK>
<LINK>

<HREF>http://slamdunk.ru/</HREF>
<DESCRIPTION>басетбол (+НБА)</DESCRIPTION>

</LINK>

</GROUP>
<GROUP name="Недвижимость">

<LINK>

<HREF>http://bn.ru/</HREF>
<DESCRIPTION>бюллетень недвижимости</DESCRIPTION>

</LINK>

</GROUP>

</LINKS>

В этом файле корневой тег LINKS содержит в себе теги GROUP, которые являются категориями. GROUP в себе содержит теги LINK, представляющие ресурсы в виде ссылок HREF и их описаний DESCRIPTION.
Вот такая база данных получилась. В нее легко вносить данные. Структура минимальная и понятная.

2. Отображение ссылок — создание XSL-шаблона (links.xsl)

Данный шаблон обрабатывает xml-файл и строит html-структуру.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version = '1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:template match="/">

<html>

<head>

<title>ссылки</title>
<style>

td.h {text-align:center;vertical-align:middle;}
td.b {vertical-align:middle;}

</style>

</head>
<body>

<tr>

<h3>ССЫЛКИ</h3>

</td>

</tr>
<xsl:for-each select="LINKS/GROUP">

<tr>

</td>
<td class="b">

<xsl:for-each select="LINK">

<li>

<xsl:attribute name="href">
<xsl:value-of select="HREF"/>
</xsl:attribute>
<font><xsl:value-of select="DESCRIPTION"/></font>

</a>

</li>

</xsl:for-each>

</ul>

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>
</xsl:stylesheet>

Этот небольшой код пробегает по всем тегам xml-файла и отображает содержимое в них через html.
При этом в xml можно добавлять или удалять ссылки и категории, а xsl будет обрабатывать все равно полноценно и не требует модификации при этом. Очень удобно.

Здесь все довольно просто. Стуктура xml получилась простая и правил для нее совсем не много.

<!ELEMENT LINKS (GROUP*)>

<!ELEMENT GROUP (LINK*)>
<!ATTLIST GROUP name CDATA #REQUIRED>

<!ELEMENT LINK (HREF, DESCRIPTION)>

<!ELEMENT HREF (#PCDATA)>
<!ELEMENT DESCRIPTION (#PCDATA)>

Здесь первая строка сообщает, что тег LINKS содержит 0 и более тегов GROUP. Вторая строка аналогично. В третьей строке задается правило о том, что тег GROUP содержит атрибут name, и этот атрибут является обязательным. В следующей строке говорится о содержимом тега LINK: по одном тегу HREF и DESCRIPTION. Ну а в последних строках сказано, что соответствующие теги содержат текстовый контент.

Это делается в самом xml через следующие инструкции:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="links.xsl"?>
<!DOCTYPE LINKS SYSTEM "links.dtd">
<LINKS>

........

</LINKS>

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

Вот что я вижу в браузере, когда двойным щелчком открываю links.xml: