Инструкция: свой компонент для InstantCMS2

Модуль интерактивной SVG картограммы

#1 13 августа 2015 в 09:22
Сложность: средняя.
Необходимое время: 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


  1. <?php
  2.  
  3. class newcomponent extends cmsFrontend {
  4.  
  5. public function actionIndex() {
  6.  
  7. $template = cmsTemplate::getInstance();
  8.  
  9. $template->render('index');
  10.  
  11. }
  12.  
  13. public function actionAct() {
  14.  
  15. $errors = false;
  16.  
  17. $form = $this->getForm('newForm');
  18.  
  19. $is_submitted = $this->request->has('submit');
  20.  
  21. $newForm = $form->parse($this->request, $is_submitted);
  22.  
  23. if ($is_submitted){
  24. $errors = $form->validate($this, $newForm);
  25.  
  26. if (!errors) {
  27. $choropleth = $this->model->getChoropleth($newForm);
  28. }
  29.  
  30. if (!errors) {
  31. cmsUser::addSessionMessage(LANG_FORM_ERRORS, 'error');
  32. }
  33. }
  34.  
  35. $template = cmsTemplate::getInstance();
  36.  
  37. $template->render('act', array(
  38. 'form' => $form,
  39. 'errors' => $errors,
  40. 'newForm' => $newForm
  41. ));
  42.  
  43. }
  44.  
  45. }
  46.  
  47. ?>

Внимательный читатель заметил использование метода $this->model->getChoropleth().
Для использования методов модели в директории \SiteDirectory\system\controllers\newcomponent\ создаем файл model.php
Однако читать данные мы будем из файлов, поэтому поставим здесь заглушку. Описание файла модели приведено с целью обучения.

Файл model.php

  1. <?php
  2.  
  3. class modelNewComponent extends cmsModel {
  4.  
  5. public function getChoropleth($average_zarplata) {
  6.  
  7. $choropleth = array();
  8.  
  9. return $choropleth;
  10.  
  11. }
  12.  
  13. }
  14.  
  15. ?>

Строка $template->render('index'); определяет вывод настоящего шаблона, который должен быть создан в директории \SiteDirectory\templates\default\controllers\newcomponent\. Где \default — название используемой темы на сайте (можно найти и скачать новую тему с сайта сообщества instantcms и изменить используемую тему через админку), папку \newcomponent необходимо будет создать самостоятельно, это папка для шаблонов нового компонента.
В этой папке должен быть создан файл index.tpl.php для главной страницы компонента, и act.tpl.php — для внутренней.

Файл index.tpl.php

  1. <?php
  2.  
  3. $this->setPageTitle('Заголовок страницы в названии окна браузера');
  4. $this->addBreadcrumb('Название страницы в цепи хлебных крошек');
  5.  
  6. $this->addToolButton(array(
  7. 'class' => 'item',
  8. 'title' => 'Название кнопки в меню действий для перехода на внутреннюю страницу компонента',
  9. 'href' => $this->href_to('act')
  10. ));
  11.  
  12. ?>
  13.  
  14. <h1>Главный заголовок страницы</h1>
  15. <p>Содержание страницы</p>

Внутренняя страница компонента будет содержать форму выбора параметров.
Для начала создадим папку \forms\ в папке нашего компонента \SiteDirectory\system\controllers\newcomponent\.
В директории \SiteDirectory\system\controllers\newcomponent\forms\ создаем файл form_newForm.php
Форма будет очень простой, она предлагает пользователю выбрать два параметра из выпадающих списков.

Файл form_newForm.php


  1. <?php
  2.  
  3. class formNewcomponentnewform extends cmsForm {
  4.  
  5. public function init() {
  6.  
  7. return array(
  8.  
  9. 'type' => 'fieldset',
  10. 'childs' => array (
  11. new fieldList('par1', array(
  12. 'title' => 'Параметр1',
  13. 'items' => array (
  14. "ТекстовыйИдентификатор1" => "ТекстовыйПараметр1",
  15. "ТекстовыйИдентификатор2" => "ТекстовыйПараметр2"
  16.  
  17. )
  18. )),
  19. new fieldList('par2', array(
  20. 'title' => 'Параметр2',
  21. 'items' => array (
  22. 1 => "1",
  23. 2 => "2"
  24.  
  25. )
  26. ))
  27.  
  28. )
  29.  
  30. )
  31.  
  32. );
  33.  
  34. }
  35.  
  36. }
  37.  
  38. ?>

Интерактивная SVG картограмма

После этого перейдем к созданию шаблона для внутренней страницы компонента /act — создаем файл act.tpl.php и размещаем его в директории \SiteDirectory\templates\default\controllers\newcomponent\.
Для создания уникального сервиса воспользуемся разработкой хабраюзера KoGoR (пользуясь случаем, хочу передать огромную благодарность за проведенный KoGor'ом труд и хорошо оформленную и интуитивно понятную статью) — инфограммой карты Российской Федерации с распределением по регионам.

В результате, у нас должна получится примерно такая приятная карта России:
Иллюстрация
Рис.3 — Уровень зарплат работников здравоохранения по регионам России в 2014 году по данным Росстата

Файл act.tpl.php


  1. <?php
  2.  
  3. $this->setPageTitle('Заголовок страницы в названии окна браузера');
  4. $this->addBreadcrumb('Название главной страницы компонента в цепи хлебных крошек', $this->href_to(''));
  5. $this->addBreadcrumb('Название страницы в цепи хлебных крошек');
  6.  
  7. $arr_par1_id = array('ТекстовыйИдентификатор1' => 1 ,
  8. 'ТекстовыйИдентификатор2' => 2
  9. );
  10.  
  11.  
  12. $filename='/upload/zarplata-'.$arr_par1_id[$_GET['par1']].'-'.$_GET['par2'].'.csv';
  13. if (!isset ($_GET['par1']) || !isset ($_GET['par2'])) $filename='/upload/zarplata-1-1.csv';
  14.  
  15. $this->renderForm($form, $newForm, array(
  16. 'action' => '',
  17. 'method' => 'get',
  18. 'toolbar' => false
  19. ), $errors);
  20. ?>
  21.  
  22. <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  23. <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
  24. <script type="text/javascript" src="http://d3js.org/topojson.v0.min.js"></script>
  25. <!-- <script type="text/javascript" src="http://d3js.org/topojson.v1.min.js"></script> -->
  26.  
  27. <style>
  28.  
  29. path {
  30. stroke:white;
  31. stroke-width: 1px;
  32. }
  33.  
  34. body {
  35. font-family: Arial, sans-serif;
  36. }
  37.  
  38. .city {
  39. font: 10px sans-serif;
  40. font-weight: bold;
  41. }
  42.  
  43. .legend {
  44. font-size: 12px;
  45. }
  46.  
  47. div.tooltip {
  48. position: absolute;
  49. text-align: center;
  50. width: 150px;
  51. height: 25px;
  52. padding: 2px;
  53. font-size: 10px;
  54. background: #FFFFE0;
  55. border: 1px;
  56. border-radius: 8px;
  57. pointer-events: none;
  58. }
  59. </style>
  60.  
  61. <script type="text/javascript">
  62. var width = 720,
  63. height = 375;
  64.  
  65. // Setting color domains(intervals of values) for our map
  66.  
  67. var color_domain = [10000, 15000, 20000, 30000, 50000]
  68. var ext_color_domain = [0, 10000, 15000, 20000, 30000, 50000]
  69. var legend_labels = ["до 10000 руб.", "10000-15000 руб.", "15000-20000 руб.", "20000-30000 руб.", "30000-50000 руб.", "от 50000 руб."]
  70. var color = d3.scale.threshold()
  71. .domain(color_domain)
  72. .range(["#ff1300", "#ff4e40", "#ff7d73", "#ffba00", "#ffcb40", "#adfcad"]);
  73.  
  74. var div = d3.select("form").append("div")
  75. .attr("class", "tooltip")
  76. .style("opacity", 0);
  77.  
  78. var svg = d3.select("form").append("svg")
  79. .attr("width",
#2 13 августа 2015 в 10:03
Вы сможете написать более сложную доработку по этой CMS? )
#3 13 августа 2015 в 10:15
rookee, думаю, смогу. Качество кода разработчиков InstantCMS2 оценил на очень высоком уровне, когда разрабатывал этот компонент. Разбираться в этом движке — одно удовольствие: всё организовано весьма логично и удобно.
Сейчас, конечно, всё свободное время трачу на свой проект. Поэтому, возьмусь ли за доработку по заказу — зависит от того, насколько такая доработка будет интересна/полезна моему проекту. Присылайте ТЗ в личку — надо смотреть.
#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 месяцев

Loadырь
Как раз уже должно что то родиться
#9 2 июня 2016 в 19:50
Давно пора кнопку в админке завести или какой батник накидать для ускорения процесса создания набора стандартных файлов нового компонента. Имя компонента только попросить ввести. Для визуального выхлопа создать один tpl с сообщением "Новый компонент".
#10 2 июня 2016 в 20:10

батник накидать для ускорения процесса создания набора стандартных файлов нового компонента

PIN
Есть такое, на досуге выложу.
Как раз буквально недавно запилил такую утилиту для генерации компонентов
#11 2 июня 2016 в 20:27
Прибавим кармы ЗарплатаБюджетников.РФ!
#12 21 сентября 2016 в 02:01
Боюсь, с ТС что-то случилось или он просто полностью потерял интерес не только к инстанту, но и к своему сайту, в противном случае, не понимаю, как можно было год на сайт не заходить — надо ведь и свой сайт обновлять!
#14 18 апреля 2017 в 01:06


AndroS, ничего со мной и сайтом не случилось smoke

ЗарплатаБюджетников.РФ

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