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

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

 
Посетитель
small user social cms
Сообщений: 5
Сложность: средняя.
Необходимое время: 30 мин.
В статье представлена инструкция по созданию своего компонента для движка InstantCMS2. В конце статьи приведена ссылка на архив с исходным кодом и содержимым всех файлов из этой инструкции. Пример внешнего вида компонента, который можно создать, используя данный туториал, представлен на иллюстрации (картинка кликабельна).

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

Рис. 1 - Наглядное представление реального уровня зарплат в Российской Федерации

Свой компонент для InstantCMS2

Перейдем непосредственно к вопросу написания отдельного компонента.

Для создания нового компонента создайте папку, в которой будет ваш компонент (назовем его newcomponent), в директории \SiteDirectory\system\controllers\, т.е полный адрес к созданной директории будет \SiteDirectory\system\controllers\newcomponent\ — все буквы в названии компонента должны быть строчными, это важно!

Далее в этой папке создаем файл frontend.php — это главный файл, без которого компонент не будет работать.

В этом файле создаем класс с таким же названием. Название класса совпадает с названием папки. И этот класс наследуется от системного класса cmsFrontend.
В этом классе мы имеем возможность добавлять методы, описывающие действия компонента.
Что такое действия компонента? Давайте взглянем на следующее изображение:
Инструкция: свой компонент для InstantCMS2

Рис.2 - Схема формирования URL компонента InstantCMS2

Каждый адрес страницы состоит из нескольких сегментов:
/controller — Название компонента.
/action — Название действия. Каждый компонент может иметь несколько действий внутри себя.
/p1/p2/p3/… — Любое количество параметров, необходимых для этого действия.


Как определяется действие компонента? Определяется публичный метод в классе компонента, который называется actionНазваниеДействияСБольшойБуквы. Для главной страницы компонента siteaddress.ru/newcomponent/ необходимо определить метод actionIndex(). Для внутренней страницы компонента siteaddress.ru/newcomponent/act/ необходимо определить метод actionAct().

Файл frontend.php

Показать код

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

Файл model.php

Код 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

Код 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

Показать код

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

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

В результате, у нас должна получится примерно такая приятная карта России:
Инструкция: свой компонент для InstantCMS2

Рис.3 - Уровень зарплат работников здравоохранения по регионам России в 2014 году по данным Росстата

Файл act.tpl.php

Показать код

Исходные данные для картограммы

Для того, чтобы карта заработала, остался последний шаг. Размещаем файлы cities.tsv, russia.json, zarplata-1-1.csv, zarplata-1-2.csv, zarplata-2-1.csv, zarplata-2-2.csv (приведены в архиве, ссылка на который есть в конце статьи) в директории \SiteDirectory\upload\.

Заходим по адресу siteaddress.ru/newcomponent/act/ — здесь все регионы на карте России подкрашены темно-серым цветом и при наведении появляется название региона — NaN. Для отображения каких-нибудь реальных данных замените значения в последнем столбце .csv файлов на численные данные.

Демо компонента

Подобный модуль разработан мною для сайта Зарплата бюджетников в разделе Карта зарплат. Демо модуля можно посмотреть по ссылке.

Бонус

Напоследок, небольшой хинт. В дефолтном шаблоне по умолчанию в InstantCMS 2 боковая колонка вместе с меню действий пропадает при уменьшении ширины окна браузера. Но на мобильных девайсах исчезновение боковой колонки и меню действий очень не удобно, т.к. у пользователей пропадает довольно таки много возможных действий. Для изменения этой ситуации можно проделать следующее. Найдите в директории \templates\default\css\ файл theme-layout.css, и замените в нем кусочек кода

Код CSS:
  1. /* Media Queries ============================================================ */
  2.  
  3. @media screen and (max-width: 980px) {
  4. #body section { width:100% !important; }
  5. #body aside { display:none; }
  6. }
  7.  
  8. @media screen and (max-width: 800px) {
  9. #body section { width:100% !important; }
  10. #body aside { display:none; }
на

Код CSS:
  1. /* Media Queries ============================================================ */
  2.  
  3. @media screen and (max-width: 980px) {
  4. #body section { width:100% !important; }
  5. #body aside { width:100% !important; }
  6. }
  7.  
  8. @media screen and (max-width: 800px) {
  9. #body section { width:100% !important; }
  10. #body aside { width:100% !important; }

Т.е. по факту необходимо исправить всего 2 строчки #body aside { display:none; } на #body aside { width:100% !important; } — после этого боковая колонка при уменьшении ширины браузера будет съезжать в основную колонку после находящегося в нем контента (перед футером).


Исходный код

Все описанные скрипты и файлы можно скачать в архиве, который нужно будет просто загрузить и распаковать в корневую директорию вашего сайта, работающего на InstantCMS2.


P.S. Данную инструкцию я также разместил на популярном ресурсе для программистов habrahabr, там дополнительно указал в начале моей статьи преимущества движка InstantCMS.
Редактировалось: 6 раз (Последний: 13 августа 2015 в 10:56)
Посетитель
small user social cms
Медаль
Сообщений: 221
Вы сможете написать более сложную доработку по этой CMS ? )
Реклама
cms
Посетитель
small user social cms
Сообщений: 5
rookee, думаю, смогу. Качество кода разработчиков InstantCMS2 оценил на очень высоком уровне, когда разрабатывал этот компонент. Разбираться в этом движке - одно удовольствие: всё организовано весьма логично и удобно.
Сейчас, конечно, всё свободное время трачу на свой проект. Поэтому, возьмусь ли за доработку по заказу - зависит от того, насколько такая доработка будет интересна/полезна моему проекту. Присылайте ТЗ в личку - надо смотреть.
Посетитель
no avatar
Медаль
Сообщений: 230
Здравствуйте.
А не могли бы вы написать компонент- школьный дневник для инстанта.
И сколько это будет стоить
Посетитель
small user social cms
Медаль
Сообщений: 238
ЗарплатаБюджетников.РФ, спасибо, по-больше бы таких людей здесь.
Посетитель
small user social cms
МедальПочетный донор проекта
Сообщений: 560
ЗарплатаБюджетников.РФ, хороший материал. Добавил плюс в карму. Надеюсь увидеть аналогичные публикации в Вашем блоге, когда у Вас откроется такая возможность.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 3549
Последний визит: 9 месяцев назад. Вероятно, продолжение будет не скорым.
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатий
Сообщений: 1827
Loadырь:
9 месяцев
Как раз уже должно что то родиться
Мой блог с плюшками
Посетитель
small user social cms
Медаль
Сообщений: 865
Давно пора кнопку в админке завести или какой батник накидать для ускорения процесса создания набора стандартных файлов нового компонента. Имя компонента только попросить ввести. Для визуального выхлопа создать один tpl с сообщением "Новый компонент".
InstantCMS Team
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1343
PIN:
батник накидать для ускорения процесса создания набора стандартных файлов нового компонента
Есть такое, на досуге выложу.
Как раз буквально недавно запилил такую утилиту для генерации компонентов
Редактировалось: 1 раз (Последний: 2 июня 2016 в 20:11)
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатий
Сообщений: 2470
Прибавим кармы ЗарплатаБюджетников.РФ!
Редактировалось: 1 раз (Последний: 2 июня 2016 в 20:28)
Раньше РАЙ был везде - РАЙсовет, РАЙком, РАЙсобес...., а сейчас везде АДминистрации!
Не надо давать людям советы. Каждый должен лохануться самостоятельно!
Любишь в продакшн, люби и баги починить!
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаПочетный донор проекта
Сообщений: 2298
Боюсь, с ТС что-то случилось или он просто полностью потерял интерес не только к инстанту, но и к своему сайту, в противном случае, не понимаю, как можно было год на сайт не заходить - надо ведь и свой сайт обновлять!
Недорогие Windows-сервера CRM для соцсетей
VPS с бесплатным администрированием!
Посетитель
small user social cms
Сообщений: 5
AndroS, ничего со мной и сайтом не случилось smoke
Посетитель
no avatar
Медаль
Сообщений: 230
ЗарплатаБюджетников.РФ:

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

Здравствуйте.
А не могли бы вы написать компонент- школьный дневник для инстанта.
И сколько это будет стоить
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.