Компьютерные системы и сети
Основным требованием заказчиков сайтов является скорость создания, поэтому разработчики применяют в своей работе различные web-framework'и, такие как Laravel, Yii, CodeIgniter и прочие, которые содержат в себе набор готовых решений. Но содержимое сайтов часто обновляется, а компании заказчиков редко имеют собственный отдел веб-разработки для внесения правок, и при этом заказывать мелкие правки сторонним разработчикам не имеют никакого желания. Поэтому были разработаны системы управления контентом (CMS), которые позволяют вносить изменения на сайте, не имея глубоких знаний в программировании. Используя выше перечисленные framework'и разработчики сами создают CMS, но существует множество готовых систем. Такими системами являются Drupal, WordPress, OpenCart, Joomla и 1С Битрикс. О последней как раз и будет эта статья, так как у меня есть опыт разработки сайтов на этой платформе.
В отличие от других перечисленных CMS, 1С Битрикс платная платформа, но эта платформа имеет ряд преимуществ. Во-первых это техническая поддержка, которая быстро помогает с возникшими трудностями. Во-вторых это мощный eCommerce модуль Интернет-магазин
, который достаточно хорошо проработан и имеет большое количество возможностей, в частности встроенная интеграция с 1С Предприятие, что делает эту платформу более привлекательной среди своих конкурентов. Также есть много других преимуществ, которые можно найти на официальном сайте [1].
Для того чтобы начать разработку сайта на платформе 1С Битрикс необходимо разобраться с базовыми понятиями. На рисунке 1 показана публичная (а) и административная (б) части сайта.
Для переключения публичной и административной частей служат вкладки 1 и 2 соответственно.
В публичной части сайта можно создавать и изменять страницы и разделы, для этого служат соответствующие кнопки в верхней панели управления. Страница в Битриксе
состоит преимущественно из компонентов. Компонент – это логически завершенный код, предназначенный для извлечения информации из инфоблоков и других источников и преобразования ее в HTML-код для отображения в виде фрагментов веб-страниц [2]. Компоненты бывают комплексные и простые. Комплексный компонент состоит из нескольких простых компонентов. Компоненты доступны в визуальном редакторе при редактировании страницы в публичной части сайта (рисунок 2).
В административной части сайта на вкладке Контент
есть встроенный файловый менеджер, где также можно создавать и редактировать файлы и папки.
Для того чтобы контент-менеджерам сайта было легко манипулировать динамическими данными разработчиками 1С Битрикс была разработана технология информационных блоков. Информационные блоки – это модуль, позволяющий каталогизировать и управлять различными типами однородной информации. С помощью информационных блоков может быть реализована публикация различных типов динамической информации [3]. Информационные блоки строятся по следующей структуре:
На рисунке 3 показана структура информационного блока Каталог товаров
в одном из интернет-магазинов. На рисунке 4 показано отображение этого инфоблока в публичной части компонентом Каталог
.
Отображение страниц в публичном разделе сайта выполняется на основе шаблонов дизайна сайта. Шаблон дизайна – это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный html-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты. В общем случае шаблон сайта задает обрамление
страницы, а за вывод динамической информации отвечают Визуальные компоненты
[4]. Шаблоны дизайна делятся на шаблоны сайта и компонентов. Шаблон сайта можно привязать к странице, к папке на сервере, к условному выражению PHP. Чаще всего, и это является хорошим тоном разработки, один сайт имеет один шаблон сайта, в котором содержатся шаблоны компонентов.
Файловая структура framework'а 1С Битрикс имеет следующий вид:
В этом списке представлены только основные файлы и каталоги, подробное описание всех каталогов и файлов можно посмотреть в официальных курсах 1С Битрикс [5], [6].
Также следует отметить основные глобальные объекты основных классов платформы:
$APPLICATION – объект главного модуля сайта класса CMain;$USER – объект текущего пользователя класса CUser;$DB – объект для работы с базой данных класса CDBResult.Подробнее об этих и других не мало важных классах и их методах можно почитать в документации к API (Application Programming Interface) 1С Битрикс [7].
Последовательность разработки любого сайта на любой платформе состоит из следующих обязательных этапов:
После выполнения первого и второго пунктов следует переходить к разработке на 1С Битрикс. Разработка сайта на платформе 1С Битрикс начинается с создания шаблона сайта в папке /bitrix/templates/ и подключение этого шаблона в административной части сайта в Администрирование/Настройки/Настройки продукта/Сайты/Список сайтов
, где необходимо выбрать из списка сайт и в пункте шаблон сайта
подключить созданный шаблон, как показано на рисунке 5.
После создания шаблона в его директории следует создать файлы, описанные в пункте 2. В файле .description.php следует написать описание шаблона, которое будет показываться в административной части сайта [8]. Далее необходимо оценить верстку и выделить общие части на всех страницах, причем если на одной странице элемента нет, но разработчик уверен, что на всех остальных он будет, то это еще не повод для создания отдельного шаблона сайта, в таких случаях приемлемо написать условие, и в этом условии выводить этот блок. Например, компонент хлебные крошки
встречается на всех страницах кроме главной. После выделения общих частей сайта следует эту часть верстки перенести в файлы header.php (верхнюю часть) и footer.php (нижнюю часть). В файле header.php после тега body следует вызвать метод $APPLICATION->ShowPanel(), чтобы при авторизации администратора на сайте отображалась административная панель. Стили, связанные с header.php и footer.php, следует разместить в файле template_styles.css, а общие стили, которые будут применяется контент-менеджером при наполнении сайта следует размещать в файле styles.css, остальные стили должны располагаться в шаблонах компонентов. Типичная структура файла header.php выглядит следующим образом:
1. <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?> 2. <!DOCTYPE html> 3. <html lang="ru"> 4. <head> 5. <meta charset="utf-8" /> 6. <? $APPLICATION->ShowHead(); ?> 7. <title><? $APPLICATION->ShowTitle() ?></title> 8. <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 9. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10. </head> 11. <body> 12. <? $APPLICATION->ShowPanel() ?> 13. <header> 14. <div class="wrapper clearfix"> 15. <a href="/" class="logo" style="background-image: url(<?=SITE_TEMPLATE_PATH?>/images/logo.png);"></a> 16. <? $APPLICATION->IncludeComponent("bitrix:menu", "top_menu", Array("ROOT_MENU_TYPE" => "top","MAX_LEVEL" => "1",));?> 17. </div> 18. </header> 19. <? 20. if ($APPLICATION->GetCurPage(false) !== '/') { 21. $APPLICATION->IncludeComponent("bitrix:breadcrumb", "", Array()); 22. } 23. ?>
Footer.php:
1. <? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?> 2. <footer> 3. <?$APPLICATION->IncludeComponent("bitrix:main.include","",Array( "AREA_FILE_SHOW" => "file", "EDIT_TEMPLATE" => "phones.php"));?> 4. </footer> 5. </body> 6. </html>
Следует отдельно отметить некоторые строки этих файлов. Первая строка файла header.php запрещает вызов этого файла, если не было вызвано ядро системы. Метод $APPLICATION->ShowHead() на строке 6 выводит служебные мета теги, например keywords, description. Метод $APPLICATION->ShowTitle() выводит название страницы, которое может устанавливаться в любом месте страницы методом $APPLICATION->SetTtitle(). На строке 15 используется константа SITE_TEMPLATE_PATH, которая содержит путь к шаблону сайта. На строке 16 вызывается компонент меню с шаблоном top_menu и типом top. На 19 строке выполняется вышеописанная ситуация с хлебными крошками. В файле footer.php на третьей строке подключается включаемая область с файлом phones.php. Такая конструкция позволит контент-менеджеру редактировать телефонные номера из визуального редактора не редактируя файл footer.php. Все области, которые разрешается редактировать контент-менеджеру следует выносить во включаемые области.
Так выглядит стандартный шаблон сайта, далее необходимо разделить верстку на компоненты битрикс, и определится какие компоненты нужны для того или иного блока. Часто компоненты можно использовать не по назначению, изменяя лишь шаблон, например, для создания слайдера изображения, где изображения берутся из элементов инфоблока, можно использовать компонент список новостей, который выводит информацию из инфоблоков.
Далее необходимо в публичной части создать страницы, содержащие подобный код:
1. <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php"); 2. $APPLICATION->SetTitle("Главная"); ?> 3. <?$APPLICATION->IncludeComponent("bitrix:news.list","slider",array("IBLOCK_ID" => "1"));?> 4. <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>
Между подключениями файлов header.php и footer.php размещается полезный контент страницы, чаще всего это подключение компонентов, как в данном случае, подключение компонента news.list с шаблоном slider, третьим параметром передается массив параметров компонента, в данном случае указываем, что данные необходимо брать из инфоблока с идентификатором 1.
Системные компоненты 1С Битрикс размещаются в директории /bitrix/components/bitrix/, их редактирование в этой папке категорические запрещено, так как все изменения потеряются после обновления системы и редактируемый компонент лишается технической поддержки. Свои компоненты следует создавать в собственном пространстве имен, для этого в папке /bitrix/components/ необходимо создать папку с названием своего пространства имен.
Папка компонента содержит следующие основные под папки и файлы:
$arParams) массив $arResult, который впоследствии попадет в шаблон компонента. Этот файл должен всегда присутствовать в папке компонента;В папке templates содержатся папки с шаблонами компонента, название папки соответствует названию шаблона. Шаблон по умолчанию называется .default. Папка с шаблоном может содержать следующие папки и файлы:
Классическая схема работы компонента представлена на рисунке 6 [10].
Из рисунка видно, что в компонент попадают данные со страницы в массиве $arParams, файл component.php на основе полученных параметров обрабатывает данные и результат кладет в переменную $arResult. Эти переменные передаются в файл result_modifier.php, если он существует, после чего данные попадают в файл template.php, где содержится html код из верстки с php вставками для вывода данных. В файле template.php не должно быть никакой служебной логики, только вывод информации. Далее сформированные данные кешируются, чтобы при последующих вызовах не повторять обработку, а брать данные из КЕШа, и после чего вызывается файл component_epilog.php. Потом сформированный html передается на страницу, на которой вызывался компонент.
Так как файлы в директории /bitrix/components/bitrix/ редактировать нельзя, то для того чтобы создать собственный шаблон компонента необходимо скопировать папку с шаблоном из папки компонента в папку components/<пространство имен>/<название компонента> шаблона сайта и переименовать ее. Например, для кастомизации шаблона компонента news.list необходимо скопировать папку /bitrix/components/bitrix/ news.list/ templates/ .default в папку /bitrix/templates /<шаблон сайта>/components/bitrix/news.list/ и переименовать ее, например в slider. При подключении компонента, ядро битрикс сперва ищет шаблон в папке, подключенного, шаблона сайта, если там не найден ищет в папке шаблона по умолчанию /bitrix/templates/.default/components/, если там не найден, ищет в папке шаблона компонента, и если и там не найден, то выводится ошибка.
Следует отметить, что если необходимо добавить произвольный css, это необходимо делать при помощи методов $APPLICATION->SetAdditionalCss( или 'my.css')$this->addExternalCss(, тогда эти файлы попадут в общий сборщик css и клиенту будет отдаваться один файл вместо нескольких, что уменьшает нагрузку на сервер, при этом данные закешируются. Аналогичные методы для javascript 'my.css')$APPLICATION->AddHeadScript( или 'my.js')$this->addExternalJS(. Как уже было отмечено выше, файлы style.css и script.js в шаблоне компонента подключаются автоматически, но если в этой папке есть их минимизированные копии с названиями style.min.css и script.min.js, то у этих файлов будет приоритет выше, чем у их полных копий.
'my.js')
Это самый минимум, который необходим для начала разработки сайта на платформе 1С Битрикс, но есть еще множество интересных функций и возможностей в этом framework'е, с которыми можно ознакомиться в официальном курсе на сайте 1С Битрикс [10].
