История создания одного сайта

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

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

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

Сайту требовались стандартные разделы «О компании», «Новости» (которые нужно разбить на тематические блоки), предоставлять возможность проведения опросов и размещения баннеров.

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

Дизайн есть, его нужно интегрировать с сайтом.

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

Проект реализовывался в системе управления сайтом UMI.CMS PRO Business. С этой версией я познакомился, когда отправил заявку, чтобы стать партнером «Юмисофт», — мне подарили лицензию PRO Business. Система понравилась, да и функционала у нее хватает. Поэтому решил купить ее для работы над заказом.

В версию PRO Business входят модули, которые нужны для работы: «Каталог», «Пользователи», «Статистика», «Поиск», «Рассылки», «Обратная связь», «Баннеры» и др.

В первую очередь смотрим на системные требования: Apache, MySQL с InnoDB (специальным ядром, поддерживающим механизм транзакций) и PHP 5.0.4 (http://umi-cms.ru/support/umi_cms_system_requirements/). Некоторых до сих пор настораживает PHP5, хотя он уже достаточно распространен у хостинг-провайдеров и с ним сложностей нет. Кроме того, после 8 августа перестанут выходить обновления для PHP4 и пятая версия станет общепринятой. Внимание нужно обратить на поддержку у хостера InnoDB: далеко не все его поддерживают, а для UMI.CMS это критично.

Избавить себя от лишних неудобств можно, если при выборе хостинга руководствоваться списком рекомендуемых провайдеров на сайте производителя системы (http://umi-cms.ru/support/umi_cms_php5_hosting/). Условия вполне приемлемые: например, для выполнения конкретной задачи подойдет тариф Real от Spaceweb (1500 Мбайт дискового пространства) за 240 руб. в месяц.

Прежде чем запускать инсталлятор, определимся с технологией верстки: UMI.CMS поддерживает XSLT и tpl. Для тех, кто знаком с html и не пугается макросов, верстка на tpl-шаблонах — оптимальный вариант. Это довольно быстрая и простая работа. Даже несмотря на то, что каждая CMS использует свой «внутренний» tpl-шаблонизатор, разобраться в коде несложно — разработчик предоставляет документацию, а от пользователя требуется лишь понимание принципа верстки. Что касается XSLT, то это спецификация, которая задает язык преобразований XML-документов. Перечисляя пре-имущества XSLT, обычно говорят о том, что он позволяет практически идеально разделять данные и их представление, а XML-файлы и XSL-шаблоны независимы от платформы или языка программирования. Еще упоминают о расширяемости: изменения в бизнес-логике не приведут к обрушению других шаблонов, значит, есть возможности для последовательного расширения. Благодаря расширяемости XSLT его однозначно лучше использовать для сложных или масштабируемых проектов. Мой проект к таковым не относится, да и багаж знаний по XSLT у меня не настолько богат, чтобы я мог вкусить все прелести этой технологии. Поэтому я решил делать сайт на tpl.

Установка системы так же проста, как и установка, например, пакета Microsoft Office: запускаем инсталлятор, берем лицензионный ключ и следуем инструкциям. Завершив установку, можно приступать к основной работе.

Первое, что я делаю, — провожу предварительную настройку системы. В модуле «Конфигурация» введем название сайта, e-mail администратора, проверим, не включено ли кэширование. Можно сразу создать группы пользователей, которые будут трудиться над проектом, и указать их права.

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

Скелет сайта готов, будем наращивать «мышечную массу», т.е. наполнять страницы контентом. План работ такой: создаем страницы с информацией об услуге, заполняем разделы «Новости», «О компании», «Каталог», внедряем программу-калькулятор. После этого проводим окончательную настройку и тестирование системы.

В принципе интерфейс системы достаточно прост и понятен, не придется тратить много времени на обучение заказчика, но разработчику в процессе создания сайта необходимо будет заглядывать в документацию (http://www.umi-cms.ru/support/docs/). Мне даже пришлось несколько раз обращаться в службу заботы о клиентах (так у компании «Юмисофт» называется техподдержка), благо отвечает она быстро.

Итак, переходим к задачам.

Раздел «Новости». Задача — создать тематические блоки. Заказчик хочет, чтобы новости объединялись в группы по конкретным темам. Например, блок «Новинка парка» или «Новости автопрома». В модуле «Новости» есть возможность объединять все новости, относящиеся к одному событию, в ленты. Реализуется это в модуле «Новости» с помощью функции «Лента новостей».

Проведение опросов. Заходим в модуль «Опросы», нажимаем «Добавить опрос». Вводим все необходимые данные. И затем вставляем макрос, который выводит опрос (найти его можно в документации UMI.CMS), в шаблон дизайна нужной страницы.

Создание каталога. Отдельного разговора требует модуль «Каталог»: работа по настройке и оформлению вывода каталога товаров является самой трудозатратной частью сайта. Система UMI.CMS дает возможность задавать неограниченное число уровней вложенности в каталоге товаров, а каждому объекту — задавать уникальные характеристики. Создадим категорию товара «Свадебный кортеж», заведем группу товаров «Лимузин» и каждому товару пропишем уникальные характеристики. Все это делается с помощью модуля «Шаблоны данных» редактированием карточки товара и созданием нужных полей.

Одна из задач, стоящих передо мной при создании каталога, — вывести для определенных товаров дополнительные характеристики. Например, в карточке BMW 5 указать, что в наличии имеются автомобили зеленого, черного и красного цветов. Технических сложностей тут не возникло, а вот с версткой пришлось посидеть.

Итак, чтобы не создавать кучу карточек BMW 5 с разными фотографиями, я работал с шаблонами данных: создал новый тип данных «Цвет кузова» и добавил к нему группу полей «Цветовые решения». Внутри этой группы добавил поля с названиями цветов, для каждого значения загрузил нужную фотографию (т.е. значению «красный» соответствует фото с красной машиной). Теперь вернемся к нашему объекту — автомобилю BMW 5 — и в каталоге создадим для него свойство «Доступны следующие цвета». При этом в качестве типа свойства возьмем «Список со множественным выбором». Остается связать это свойство со справочником «Цвет кузова» и сверстать страницу.

Ссылки на сопутствующие товары можно настроить на странице «Редактирование свойств объекта» в каталоге. В этом разделе есть блок «Рекомендуем». Здесь мы выбираем товары, которые могут быть использованы вместе. Например, для свадебного лимузина  — свадебные кольца на автомобиль, ленты, клаксон и т.д. А в шаблоне дизайна с помощью макросов «вытягиваем» из URL нужные нам данные для отображения на странице: фото, цена и т.п.

Оформление заказа. Чтобы реализовать функцию «Оформить заказ», используем модуль «Обратная связь»  — он позволяет указать для веб-формы сообщения неограниченное количество адресов электронной почты. Посетитель сайта сможет выбрать получателей сообщения из выпадающего списка адресатов.

Поиск. Функция поиска по каталогу реализуется с помощью фильтров, которые настраиваются в модуле «Каталог».

Калькулятор. Внедрение калькулятора — задача индивидуальная для каждого проекта, поэтому в коробочных системах по умолчанию этот функционал не встречается. Я решал задачу с помощью языка JavaScript и шаблонов данных. Для начала в карточке товара я завел поля «Цена аренды 1 часа в утреннее время», «Цена аренды 1 часа в вечернее время», в дневное и т.д. Потом нарисовал форму, в которой жестко указана стоимость аренды автомобиля с водителем, так как она не изменяется при выборе марки машины. Калькулятор берет значения из карточки товара. Если пользователь укажет период аренды, например, с 14.00 до 20.00, то скрипт разобьет введенные данные на те интервалы, которые указаны администратором в карточке товара, и определит, сколько часов считать по каждому тарифу. В результате мы получаем калькулятор, с помощью которого посетитель сайта сможет узнать, во сколько ему обойдется аренда автомобиля в конкретный промежуток времени и какова наценка за услуги водителя.

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

Последний этап работы — верстка, т.е. представление всего вышеописанного в «человекопонятном» виде.

Чтобы сделать отдельный вход для корпоративных клиентов, нужно воспользоваться несложным макросом. Вставим его в шаблон дизайна страницы, где будет размещена форма авторизации. Затем в модуле «Пользователи» создаем группу «Корпоративные клиенты», в нее вносим данные пользователей (ФИО, e-mail) и настраиваем права на доступ к страницам сайта.

Итак, в соответствии с техническим заданием (ТЗ) я реализовал все потребности заказчика, касающиеся «Каталога».

Помимо прописанных в ТЗ задач, в результате общения с заказчиком по ходу проекта было решено добавить еще несколько возможностей, которые стимулировали бы продажи через Интернет. Так как дизайн сайта предполагал наличие мест для рекламных баннеров, нам захотелось предусмотреть возможность использования поведенческих технологий. Они позволяют определять интересы посетителя сайта и выдавать ему рекламные сообщения, исходя из его реальных потребностей. Например, зайдя однажды на сайт, посетитель изучал страницы с автомобилями марки BMW. Когда он зайдет на сайт в следующий раз, система покажет ему баннеры, сообщающие о специальных предложениях на автомобили именно этой марки. Для использования поведенческих технологий каждую страницу раздела (скажем, все лимузины) нужно отметить тегами (в данном случае «лимузин») — все остальное система сделает сама.

Кроме того, в UMI.CMS есть возможность с помощью модуля «Шаблоны данных» добавить ссылку на товар, о котором говорится в тексте, к любому публикуемому материалу. Допустим, к новости, где упоминается о новом лимузине в автопарке компании, можно добавить ссылку «Заказать этот автомобиль прямо сейчас». Щелкнув по ней, посетитель попадает на страницу каталога, где представлен искомый лимузин. Реализовать это несложно: в разделе нужных нам новостей выбираем ссылку «Редактировать тип» и попадаем в раздел «Шаблоны данных». Здесь добавляем вкладку «Соответствующий товар», настраиваем необходимые поля. Теперь возвращаемся к нужной нам новости, указываем в появившемся поле «Соответствующий товар» требуемый объект из каталога и в шаблон страницы вставляем макрос, выводящий ссылку на этот товар. Таким образом, мы создали новый шаблон новости, позволяющий выводить описание товара, о котором говорится в тексте.

Одно из требований заказчика — доступ к статистике сайта. В стандартном модуле «Статистика» в UMI.CMS предоставляется более 30 отчетов по посещаемости сайта в виде диаграмм и графиков. Обучение клиента добавлению новостей, новых товаров в каталог на уже готовый сайт заняло в нашем случае около получаса.

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

Об авторе: Илья Рогов — веб-программист, фрилансер (irogov@mail.ru).