Урок 1. Меню навигации

Урок 1. Меню навигации

Давайте начнем с самого начала. Итак, вы хотите сделать сайт (узел, сервер). Первым делом, необходимо уяснить, каким образом на сайте будет упорядочена та или иная информация. Сколько будет категорий, подразделов т.д. Все эти вопросы возникают на первом этапе - "Организация сайта".

А какой должна быть навигация сайта? Требований к хорошей навигации много. Она должна быть понятна, легко узнаваема, единообразна, удобна в использовании, быстро загружаться, давать четкое понятие о текущем местоположении. При этом на сайте не должно возникать 404-й ошибки, т.е. все ссылки должны работать. Если у вас есть опыт создания сайтов, то вам, скорее всего, приходилось сталкиваться с проблемой создания грамотной навигации.

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

Создание меню, которое ориентирует пользователя на сайте, не дает ему заблудиться - вот задача, с которой нам хочется начать повествование о Parser. Почему именно это? Прежде всего потому, что большое количество тегов:

<a href="страница_сайта.html">

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

Решение следующее. Мы создаем некую функцию на Parser, которая будет генерировать нужный нам фрагмент HTML-кода. В терминологии Parser функции называются методами. В тех местах, где этот код понадобится, будем просто давать указание «Вставить меню навигации» и сразу же будет создана страница, содержащая меню. Для этого сделаем несколько простых шагов:

1. Всю информацию о наших ссылках будем хранить в одном файле, что позволит впоследствии вносить необходимые изменения только в нем. В корневом каталоге будущего сайта создаем файл sections.cfg, в который помещаем следующую информацию:

section_id	name	uri
1	Главная	/
2	Новости	/news/
3	Контакты	/contacts/
4	Цены	/price/
5	Ваше мнение	/gbook/

Здесь используется так называемый формат tab-delimited. Столбцы разделяются знаком табуляции, а строки - переводом каретки. При копировании этой таблицы в текстовый редактор данное форматирование будет создано автоматически, но если вы будете создавать таблицу вручную, необходимо это учитывать. Для таблиц ВСЕГДА применяется формат tab-delimited.

2. В том же каталоге, где и sections.cfg, создаем файл auto.p
В нем мы будем хранить все те кирпичики, из которых впоследствии Parser соберет наш сайт. AUTO означает, что все эти кирпичики будут всегда доступны для Parser в нужный момент, а расширение ".p", как вы, наверное, догадались, это… правильно! Он самый!

3. В файл auto.p вставим следующий код:

@navigation[]
$sections[^table::load[sections.cfg]]
<table width="100%" border="1">
   <tr>
   ^sections.menu{
      <td align="center">
          <a href="$sections.uri"><nobr>$sections.name</nobr></a>
      </td>
   }
   </tr>
</table>

Данные из этого файла и будут служить основой для нашего навигационного меню.

Вот и все, подготовительные работы закончены. Теперь открываем код страницы, где все это должно появиться (например, index.html), и говорим: «Вставить меню навигации». На Parser это называется «вызов метода» и пишется так:

^navigation[]

Осталось только открыть в браузере файл, в который мы вставили вызов метода и посмотреть на готовое меню навигации. Теперь в любом месте на любой странице мы можем написать заветное ^navigation[], и Parser вставит туда наше меню. Страница будет сформирована «на лету». Что хотели, то и получили.

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

Однако не будем радоваться раньше времени. Давайте разберемся, что же мы сделали, чтобы добиться такого результата. Взгляните на код в auto.p. Если кажется, что все непонятно, не надо бежать прочь. Уверяем, через несколько минут все встанет на свои места. Итак, посмотрим на первую строчку:

@navigation[]

Она аналогична строке ^navigation[], которую мы вставили в текст страницы для создания меню. Различие только в первом символе: ^ и @. Однако логический смысл этого выражения совершенно иной - здесь мы определяем метод, который вызовем позже. Символ @ (собака) в первой колонке строки в Parser означает, что мы хотим описать некоторый блок, которым воспользуемся в дальнейшем. Следующее слово определяет имя нашего метода: navigation. Это только наше решение, как ее назвать. Вполне допустимы имена: а_ну_ка_вставь_меню_быстро. Но читаться такая программа будет хуже, впрочем, кому как понятнее, можете назвать и так.

Жизненно необходимо давать простые, понятные имена. Они должны точно соответствовать тому, что именуемый объект будет хранить и делать. Сохраните нервы и время себе и всем тем, кому придется разбираться в ваших текстах, отнеситесь, пожалуйста, к именам внимательно. Имена могут быть русские или латинские, главное соблюдать единообразие: или все по-русски, или по-английски.

Идем дальше.

$sections[^table::load[sections.cfg]]

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

Строка начинается символом $ (рубль) и следующим сразу за ним именем sections. Так в Parser обозначаются переменные. Это надо запомнить. Все просто: видим в тексте $var - имеем дело с переменной var. Переменная может содержать любые данные: числа, строки, таблицы, файлы, рисунки и даже часть кода. Присвоение переменной $parser_home_url значения www.parser3.ru на Parser выглядит так: $parser_home_url[www.parser3.ru]. После этого мы можем обратиться к переменной по имени, т.е. написать $parser_home_url и получить значение www.parser3.ru.

Еще раз тоже самое:

$var[…]	- присваиваем
$var	- получаем

Подробности в разделе «Переменные».

В нашем случае переменная $sections будет хранить таблицу из файла sections.cfg.

Любую таблицу Parser рассматривает как самостоятельный объект, с которым он умеет производить только вполне определенные действия, например, добавить или удалить из нее строку. Поскольку переменная может хранить любые данные, необходимо указать, что присвоенное нами переменной значение является именно таблицей.

Лирическое отступление.
Пример из жизни. Всю автомобильную технику можно грубо разделить на несколько классов: легковые автомашины, грузовики, трактора и гусеничная техника. Любой автомобиль является объектом одного из этих классов. Вы легко можете определить, к какому классу относится автомобиль, поскольку их всех объединяют общие характеристики, такие как вес, масса перевозимого груза и т.д. Любой автомобиль может совершать действия: двигаться, стоять или ломаться. Каждый из автомобилей обладает своими собственными свойствами. И самое главное, автомобиль не может появиться сам собой, его нужно создать. Когда конструктор придумывает новую модель автомобиля, он точно знает, автомобиль какого класса он создает, какими свойствами будет наделено его творение и что оно сможет делать. Также и в Parser: каждый объект относится к определенному классу, объект класса создается конструктором этого класса и наделен характеристиками (полями) и методами (действиями), общими для всех подобных объектов.

Итог
Любой объект в Parser принадлежит конкретному классу, характеризуется полями и методами именно этого класса. Чтобы он появился, его нужно создать. Делает это конструктор данного класса. Разберитесь с этой терминологией, это основа.

Отвлеклись? Продолжим. Переменной $sections мы присвоили вот что:

^table::load[sections.cfg]

Буквально это означает следующее: мы создали объект класса table при помощи конструктора load. Общее правило для создания объекта записывается так:

^имя_класса::конструктор[параметры_конструктора]

Подробности в разделе «Передача параметров».

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

Теперь переменная $sections содержит таблицу с разделами нашего сайта. Parser считает ее объектом класса table и точно знает, какие действия с ней можно выполнить. Пока нам понадобится только один метод этого класса - menu, который последовательно перебирает все строки таблицы. Также нам потребуются значения из полей самой таблицы. Синтаксис вызова методов объекта:

^объект.метод_класса[параметры]

Получение значений полей объекта (мы ведь имеем дело с вполне определенной таблицей с заданными нами же полями):

$объект.имя_поля

Знания, полученные выше, теперь позволяют без труда разобраться в последней части нашего кода:

<table width="100%" border="1">
   <tr>
   ^sections.menu{
      <td align="center">
         <a href="$sections.uri"><nobr>$sections.name</nobr></a>
      </td>
   }
   </tr>
</table>

Мы формируем HTML-таблицу, в каждый столбец которой помещаем значения, содержащиеся в полях нашей таблицы $sections: uri - адрес и name - имя. При помощи метода menu мы автоматически перебираем все строки таблицы. Таким образом, даже если у нас будет несколько десятков разделов, ни один из них не будет потерян или пропущен. Мы можем свободно добавлять разделы, удалять их и даже менять местами. Изменения вносятся только в файл sections.cfg. Логика работы не нарушится. Все просто и красиво.

Давайте подведем итоги первого урока.

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

Что узнали: познакомились c концептуальными понятиями языка (класс, объект, свойство, метод), а также некоторыми базовыми конструкциями Parser.

Что надо запомнить: Parser использует объектную модель. Любой объект языка принадлежит какому-то классу, имеет собственные свойства и наделен методами своего класса. Для того чтобы создать объект, необходимо воспользоваться конструктором класса.

Синтаксис работы с объектами:

$переменная[значение]	- задаем значение
$переменная	- получаем значение
$переменная[^имя_класса::конструктор[параметры]]	- создаем объекта класса имя_класса и присваиваем его переменной
$переменная.имя_поля	- получаем поле самого объекта, хранящегося в переменной
^переменная.метод[]	- вызываем действие (метод класса, к которому принадлежит объект, хранящийся в переменной)

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

In order to add comments you must register.

Дата обновления: 04.09.2008