Необходимое время: 30 мин.
В статье представлена инструкция по созданию своего компонента для движка InstantCMS2. В конце статьи приведена ссылка на архив с исходным кодом и содержимым всех файлов из этой инструкции. Пример внешнего вида компонента, который можно создать, используя данный туториал, представлен на иллюстрации (картинка кликабельна).
Рис. 1 — Наглядное представление реального уровня зарплат в Российской Федерации
Свой компонент для InstantCMS2
Перейдем непосредственно к вопросу написания отдельного компонента.Для создания нового компонента создайте папку, в которой будет ваш компонент (назовем его newcomponent), в директории \SiteDirectory\system\controllers\, т.е полный адрес к созданной директории будет \SiteDirectory\system\controllers\newcomponent\ — все буквы в названии компонента должны быть строчными, это важно!
Далее в этой папке создаем файл frontend.php — это главный файл, без которого компонент не будет работать.
В этом файле создаем класс с таким же названием. Название класса совпадает с названием папки. И этот класс наследуется от системного класса cmsFrontend.
В этом классе мы имеем возможность добавлять методы, описывающие действия компонента.
Что такое действия компонента? Давайте взглянем на следующее изображение:
Рис.2 — Схема формирования URL компонента InstantCMS2
Каждый адрес страницы состоит из нескольких сегментов:
/controller — Название компонента.
/action — Название действия. Каждый компонент может иметь несколько действий внутри себя.
/p1/p2/p3/… — Любое количество параметров, необходимых для этого действия.
Как определяется действие компонента? Определяется публичный метод в классе компонента, который называется actionНазваниеДействияСБольшойБуквы. Для главной страницы компонента siteaddress.ru/newcomponent/ необходимо определить метод actionIndex(). Для внутренней страницы компонента siteaddress.ru/newcomponent/act/ необходимо определить метод actionAct().
Файл frontend.php
<?php class newcomponent extends cmsFrontend { public function actionIndex() { $template = cmsTemplate::getInstance(); $template->render('index'); } public function actionAct() { $errors = false; $form = $this->getForm('newForm'); $is_submitted = $this->request->has('submit'); $newForm = $form->parse($this->request, $is_submitted); if ($is_submitted){ $errors = $form->validate($this, $newForm); if (!errors) { $choropleth = $this->model->getChoropleth($newForm); } if (!errors) { cmsUser::addSessionMessage(LANG_FORM_ERRORS, 'error'); } } $template = cmsTemplate::getInstance(); 'form' => $form, 'errors' => $errors, 'newForm' => $newForm )); } } ?>
Внимательный читатель заметил использование метода $this->model->getChoropleth().
Для использования методов модели в директории \SiteDirectory\system\controllers\newcomponent\ создаем файл model.php
Однако читать данные мы будем из файлов, поэтому поставим здесь заглушку. Описание файла модели приведено с целью обучения.
Файл model.php
<?php class modelNewComponent extends cmsModel { public function getChoropleth($average_zarplata) { return $choropleth; } } ?>
Строка $template->render('index'); определяет вывод настоящего шаблона, который должен быть создан в директории \SiteDirectory\templates\default\controllers\newcomponent\. Где \default — название используемой темы на сайте (можно найти и скачать новую тему с сайта сообщества instantcms и изменить используемую тему через админку), папку \newcomponent необходимо будет создать самостоятельно, это папка для шаблонов нового компонента.
В этой папке должен быть создан файл index.tpl.php для главной страницы компонента, и act.tpl.php — для внутренней.
Файл index.tpl.php
<?php $this->setPageTitle('Заголовок страницы в названии окна браузера'); $this->addBreadcrumb('Название страницы в цепи хлебных крошек'); 'class' => 'item', 'title' => 'Название кнопки в меню действий для перехода на внутреннюю страницу компонента', 'href' => $this->href_to('act') )); ?> <h1>Главный заголовок страницы</h1> <p>Содержание страницы</p>
Внутренняя страница компонента будет содержать форму выбора параметров.
Для начала создадим папку \forms\ в папке нашего компонента \SiteDirectory\system\controllers\newcomponent\.
В директории \SiteDirectory\system\controllers\newcomponent\forms\ создаем файл form_newForm.php
Форма будет очень простой, она предлагает пользователю выбрать два параметра из выпадающих списков.
Файл form_newForm.php
<?php class formNewcomponentnewform extends cmsForm { public function init() { 'type' => 'fieldset', 'title' => 'Параметр1', "ТекстовыйИдентификатор1" => "ТекстовыйПараметр1", "ТекстовыйИдентификатор2" => "ТекстовыйПараметр2" ) )), 'title' => 'Параметр2', 1 => "1", 2 => "2" ) )) ) ) ); } } ?>
Интерактивная SVG картограмма
После этого перейдем к созданию шаблона для внутренней страницы компонента /act — создаем файл act.tpl.php и размещаем его в директории \SiteDirectory\templates\default\controllers\newcomponent\.Для создания уникального сервиса воспользуемся разработкой хабраюзера KoGoR (пользуясь случаем, хочу передать огромную благодарность за проведенный KoGor'ом труд и хорошо оформленную и интуитивно понятную статью) — инфограммой карты Российской Федерации с распределением по регионам.
В результате, у нас должна получится примерно такая приятная карта России:
Рис.3 — Уровень зарплат работников здравоохранения по регионам России в 2014 году по данным Росстата
Файл act.tpl.php
<?php $this->setPageTitle('Заголовок страницы в названии окна браузера'); $this->addBreadcrumb('Название главной страницы компонента в цепи хлебных крошек', $this->href_to('')); $this->addBreadcrumb('Название страницы в цепи хлебных крошек'); 'ТекстовыйИдентификатор2' => 2 ); $filename='/upload/zarplata-'.$arr_par1_id[$_GET['par1']].'-'.$_GET['par2'].'.csv'; 'action' => '', 'method' => 'get', 'toolbar' => false ), $errors); ?> <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script> <script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script> <!-- <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> --> <style> path { stroke:white; stroke-width: 1px; } body { font-family: Arial, sans-serif; } .city { font: 10px sans-serif; font-weight: bold; } .legend { font-size: 12px; } div.tooltip { position: absolute; text-align: center; width: 150px; height: 25px; padding: 2px; font-size: 10px; background: #FFFFE0; border: 1px; border-radius: 8px; pointer-events: none; } </style> <script type="text/javascript"> var width = 720, height = 375; // Setting color domains(intervals of values) for our map var color_domain = [10000, 15000, 20000, 30000, 50000] var ext_color_domain = [0, 10000, 15000, 20000, 30000, 50000] var legend_labels = ["до 10000 руб.", "10000-15000 руб.", "15000-20000 руб.", "20000-30000 руб.", "30000-50000 руб.", "от 50000 руб."] var color = d3.scale.threshold() .domain(color_domain) .range(["#ff1300", "#ff4e40", "#ff7d73", "#ffba00", "#ffcb40", "#adfcad"]); var div = d3.select("form").append("div") .attr("class", "tooltip") .style("opacity", 0); var svg = d3.select("form").append("svg") .attr("width",
#2
13 августа 2015 в 10:03
Вы сможете написать более сложную доработку по этой CMS? )
#3
13 августа 2015 в 10:15
rookee, думаю, смогу. Качество кода разработчиков InstantCMS2 оценил на очень высоком уровне, когда разрабатывал этот компонент. Разбираться в этом движке — одно удовольствие: всё организовано весьма логично и удобно.
Сейчас, конечно, всё свободное время трачу на свой проект. Поэтому, возьмусь ли за доработку по заказу — зависит от того, насколько такая доработка будет интересна/полезна моему проекту. Присылайте ТЗ в личку — надо смотреть.
Сейчас, конечно, всё свободное время трачу на свой проект. Поэтому, возьмусь ли за доработку по заказу — зависит от того, насколько такая доработка будет интересна/полезна моему проекту. Присылайте ТЗ в личку — надо смотреть.
Сегодня в 01:32
#4
2 июня 2016 в 08:36
Здравствуйте.
А не могли бы вы написать компонент- школьный дневник для инстанта.
И сколько это будет стоить
А не могли бы вы написать компонент- школьный дневник для инстанта.
И сколько это будет стоить
#5
2 июня 2016 в 11:02
ЗарплатаБюджетников.РФ, спасибо, по-больше бы таких людей здесь.
#6
2 июня 2016 в 17:45
ЗарплатаБюджетников.РФ, хороший материал. Добавил плюс в карму. Надеюсь увидеть аналогичные публикации в Вашем блоге, когда у Вас откроется такая возможность.
#7
2 июня 2016 в 18:06
Последний визит: 9 месяцев назад. Вероятно, продолжение будет не скорым.
#8
2 июня 2016 в 18:39
Как раз уже должно что то родиться9 месяцев
#9
2 июня 2016 в 19:50
Давно пора кнопку в админке завести или какой батник накидать для ускорения процесса создания набора стандартных файлов нового компонента. Имя компонента только попросить ввести. Для визуального выхлопа создать один tpl с сообщением "Новый компонент".
Есть такое, на досуге выложу.батник накидать для ускорения процесса создания набора стандартных файлов нового компонента
Как раз буквально недавно запилил такую утилиту для генерации компонентов
Прибавим кармы ЗарплатаБюджетников.РФ!
#12
21 сентября 2016 в 02:01
Боюсь, с ТС что-то случилось или он просто полностью потерял интерес не только к инстанту, но и к своему сайту, в противном случае, не понимаю, как можно было год на сайт не заходить — надо ведь и свой сайт обновлять!
#13
21 сентября 2016 в 10:31
AndroS, ничего со мной и сайтом не случилось
#14
18 апреля 2017 в 01:06
AndroS, ничего со мной и сайтом не случилось
Здравствуйте.
А не могли бы вы написать компонент- школьный дневник для инстанта.
И сколько это будет стоить