Создание сайта с помощью компонента Nodus

В данной статье по шагам распишем процесс создания с нуля маленького сайта.

Структура сайта состоит из главной и 4 внутренних страниц - О компании, Новости, Услуги, Контакты:

• О компании представляет собой статическую страницу с подразделом История, содержащим некий контент.
• Услуги - страница содержащая информацию об услугах, оказываемых организацией и ценах на них.
• Новости - динамическая страница, представляющая собой листинг новостей с постраничной навигацией. Каждая новость содержит дату, заголовок и анонс. Заголовок представляет из себя ссылку на новость целиком.
• На страние Контакты содержится информация об адресе, средствах связи (телефоны, факс, email), схема проезда с картой из Yandex.Maps, а также размещается форма обратной связи для возможности отправки сообщений.
• Вышеперечисленные пункты выводятся в главном меню.
• На главной странице следует выводить список из трех последних новостей и вступительный текст, редактируемый из админки.

Рассмотрим пример создания такого сайта на основе компонента Nodus, механизма управления контентом. Итак, после установки TAO приступим к установке самого компонента.

Установка компонента Nodus

Установка компонента Nodus происходит из админки /admin/ .

• В оранжевом выпадающем меню с надписью "Компоненты" выбираем "Библиотека компонентов".

• В открывшемся разделе находим компонент Нодус (через поиск/на левой боковой панели/из списка компонентов).

• Под описанием компонента находится кнопка "Установить". Подтверждаем установку, выбрав "Начать установку".

После успешной установки компонента его необходимо включить в index.php директивой

Core::load('Component.Nodus');

Обязательно: компонент должен быть подключен в файле www/index.php после подключения модуля CMS, но до вызова CMS::Run().

Создание структуры сайта

Первое, что необходимо сделать это создать структуру. Можно, конечно, сделать это способом, описанным в статье про навигацию, однако в Нодусе есть свой механизм для управления структурой, которым мы и воспользуемся. Для этого сначала зайдем в настройки и вместо описания там всей структуры сайта напишем там простую строчку:

 %nodus

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

Теперь переходим в админку в раздел "Компоненты : Содержимое сайта : Структура". Выбираем добавить узел и заполняем поля для страницы "О компании".

Аналогичным образом создадим адреса /about/history/(создается при выборе родителя), /services/, /news/, /contacts/.

Перейдем в раздел "О компании", что мы видим? Ничего не вышло - "Страница не найдена". Это потому, что мы только создали ссылки в навигации, а сами страницы - нет. Однако, мы можем увидеть, что из всех созданных адресов работает только /news/. Возникает вопрос - почему? Это происходит потому, что в стандартной поставке компонента Нодус есть все необходимое для создания страницы новостей, и по умолчанию задается указанный адрес. В результате произведенных действий мы создали только структуру, теперь давайте создадим сами страницы с указанными адресами.

Разделы "О компании" и "Услуги"

Здесь все просто. Переходим в админку в раздел "Компоненты : Содержимое сайта : Материалы" нажимаем добавить материал.

Из двух предложенных типов выбираем "Страница", задав ему url - /about/, заголовок "О компании" и отмечаем "Опубликовано". На вкладке "Текст страницы" наполняем страницу необходимым контентом. Аналогичным образом создаем страницы для "История" и "Услуги". Теперь, при переходе по адресам отображаются созданные страницы. Давайте продолжим, перейдем к созданию страницы новостей.

Раздел Новости

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

Приступим к добавлению новостей, нажав "Добавить материал" - "Новость" и заполним предложенные поля на вкладках "Параметры" и "Текст Новости".

Если URL не задан, то он будет сформирован автоматически на основе числового идентификатора материала.

Следует обратить внимание на настройки публикации, если не пометить "Опубликовано", то новость у нас создастся, но на странице не отобразится.

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

Заходим по адресу /news/, который указан в Нодусе как адрес по умолчанию для отображения материалов типа "Новость", и видим искомый список с постраничной навигацией.

Страница Контакты

Здесь все намного интересней. Для создания страницы "Контакты" воспользуемся материалом типа "Страница", разместив туда содержимое - адрес, телефон, факс и email.

Однако, помимо текстовой информации(адрес, телефон и т.п.) на странице находятся два объекта - Яндекса карта и форма отправки сообщений от посетителей сайта.

Т.к. задача создания карты является нетривиальной - остановимся на ней поподробней.

Яндекс карта

Для добавления Yandex карты будем использовать вставку. Вызов вставки осуществляется следующим образом:

%maps{service_name,map_id,options_name}

Она принимает 3 параметра:

• service_name - название сервиса, может быть два значения: yandex или google. По умолчанию 'yandex'.
• map_id - идентификатор карты, должен быть уникальным на странице. Необязателен, но по умолчанию будет разным при каждом заходе на страницу, что затруднит обращение к нему с помощью javascript.
• options_name - имя настройки CMS_Vars, содержащей параметры карты. Необязателен.

Давайте создадим простую настройку contacts_map с параметрами карты. Для этого в админке в разделе "Основные настройки" создаем настройку contacts_map, добавим для нее следующие параметры:

properties = {
	center = {
		x = 54.2
		y = 37.6
	}
    	style = height: 400px; width: 400px;
    	lang = ru
	type = roads
}

Где properties - описывает настройки поведения карты, внешнего вида и т.д.

Координаты центра карты (как любые другие координаты) описываются в формате {x = 'широта', y = 'долгота'}

Для поля properties главные параметры:

• center - массив, содержащий координаты точки центра создаваемой карты; необязателен
• style - стиль элемента div, в котором будет отображаться карта; необязателен
• lang - язык карты
• type - тип карты; необязателен

Давайте посмотрим, что у нас получилось, вставив в содержимое страницы "Контакты" %maps{contacts_map}.

Из-за маленького масштаба карты кажется, что мы просто решили отобразить город. Давайте немного увеличим масштаб нашей карты. Для этого необходимо добавить в массив параметр zoom = 15(может принимать значения от 0 до 19). Попробуем изменить поведение карты, т.е. как она будет реагировать на действия пользователя. Сделать это можно с помощью параметра states, добавив в properties следующее:

states = {
	drag = true
	scroll_zoom = true
	dbl_click_zoom = false
}

Что же означают эти параметры?

• drag - возможность перетаскивать карту мышкой
• scroll_zoom - масштабирование при скроллинге
• dbl_click_zoom - масштабирование при двойном клике по карте.

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

markers = {
	marker1 = {
        	position = {
        		x = 54.2
            		y = 37.6
        	}
	}
}

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

Форма обратной связи

Когда мы говорим о форме обратной связи, создается впечатление, что это довольно сложная задача. На самом деле, в TAO для форм есть специальный механизм - компонент "Веб-формы".

Убедимся, что в качестве примера есть готовая форма "Сообщения от посетителей сайта", которой мы и воспользуемся. Для этого переходим в админке в "Компоненты : Веб-формы" - форма действительно есть. Разместить ее можно в любой части страницы с помощью механизма вставок. Вставим веб-форму после Яндекс карты, добавив на страницу

%form{messages}

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

Ну вот и готова страница "Контакты", значит можно приступить к заключительной настройке - выводу списка новостей на главную страницу.

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

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

CMS::vars()->get('maintext')

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

Как это можно сделать? Нам на помощь придут селекторы. Простейший селектор создается системой автоматически и служит для выборки всех опубликованных записей конкретного типа. Мнемокод такого селектора совпадает с мнемокодом типа.

Поскольку нам нужно выводить не все новости на главной, а только часть, то у нас появляется переменная, содержащая значение этого ограничения(limit).

Добавим в шаблон главной страницы app/views/main.phtml следующий код:

$selector = Component_Nodus::selector('news');
print $this->nodus->selector_rows($selector, array('limit' => 3));

Обновим страницу и проверим, что новости действительно отображаются.

Давайте представим ситуацию, что необходимо выводить не три новости на главной, а четыре. Чтобы не лазить в шаблон страницы для изменения этой переменной, вынесем ее значение в админку. В разделе "Основные настройки" добавляем переменную, мнемокод которой "limit" с типом "строка" и устанавливаем значение равное "4", т.е. количество новостей на главной. И заменим в шаблоне страницы код:

$selector = Component_Nodus::selector('news');
print $this->nodus->selector_rows($selector, array('limit' => CMS::vars()->get('limit')));

Под новостями можно вывести ссылку на сам раздел, который создали ранее.

Естественно, есть случаи, когда нам необходимо вывести наш сайт с другим дизайном(например, выделить главную страницу), сверстать какую-то страницу/форму в нестандартном виде. Для этого мы можем переопределить шаблоны используемые по умолчанию. Например, шаблон главной страницы определяется шаблоном app/views/main.phtml.

Для отображения материалов Новость и Страница компонента используются 2 шаблона(full.phtml и teaser.phtml), находящиеся в каталогах app/components/Nodus/app/Datatype/News/ и app/components/Nodus/app/Datatype/Page/ соответственно.

Представим, что нам необходимо изменить отображение какой-то одной страницы, например, "История" в разделе "О компании" в . Если мы переопределим шаблон full.phtml в app/Datatype/Page, то у нас изменится внешний вид всех страниц этого типа, а нам необходима только одна. Как же быть? Переопределение шаблона конкретной страницы происходит с помощью ее мнемокода. Идем в админке в "Компоненты : Материалы" выбираем редактирование материала "История" и на вкладке "Доп. параметры" задаем мнемокод материала "history". Теперь в каталоге app/components/Nodus/app/Datatype/Page/ создаем шаблон full-history.phtml и работаем непосредственно с ним, меняем, эксперементируем.

Для отображения форм используются свои шаблоны, их также можно менять, но об этом читайте в статье Forms: Веб-формы.

Необходимо помнить, что после создания/изменения шаблона необходимо сбрасывать кеш.

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

Настройка галереи в нодусе

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

1. Находим файл, описывающий тип материала «новости» нодуса - Type.php (app/components/Nodus/app/Datatype/News/Type.php), и в нем описываем поле galery. Для удобства вынесем поле на отдельную закладку.

// app/components/Nodus/app/Datatype/News/Type.php

class Component_Nodus_App_Datatype_News_Type extends Component_Nodus_Datatype implements Core_ModuleInterface
{
	...
	public function tabs()
		{
			//добавляем новую закладку для галереи
			return array(
				...
				'gallery' => 'Галерея',
			);
		}

		public function fields()
		{
			return array(
				'gallery' => array(
					'caption' => 'Галерея',
					'type' => 'gallery',
					'weight' => -10,
					'admin size' => '100x100',
					'tab' => 'gallery',
					'style' => 'max-height: 400px;overflow-y: auto;width: 90%;',
				),
			...
			);
		}

где,

• caption - заголовок поля.
• type - тип данных.
• admin size - размер изображения в администраторе сайта.
• tab - имя закладки, на которой будет доступна галерея.
• style - настройки стилей вывода.

После этого в админке при редактировании или добавлении новости появится дополнительная вкладка с полем Галерея.

По умолчанию в администраторе доступны следующие операции над изображением:

• удаление изображения,
• просмотр в исходном размере,
• поворот влево/вправо,
• добавление подписи под изображением,
• возможность перетаскивания изображений в списке, меняя прядок их следования методом «drug-n-drop».

2. Теперь необходимо реализовать вывод галереи в шаблоне. Находим файл шаблона полного вывода новости - full.phtml (app/components/Nodus/app/Datatype/News/full.phtml), и в нем выводим поле gallery.

// app/components/Nodus/app/Datatype/News/full.phtml

<div class="news-full">
	...
	<div><h2>Галерея</h2><br />
        	<?= $item->field('gallery') ?>
        </div>

</div>

Тогда на странице новости будут выведена галерея со всеми добавленными изображениями.

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

Подробно о настройках поля и методах вывода галереи можно почитать в статье CMS.Fields.Types.Gallery: подробнее о галерее.

.

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