October CMS — Builder plugin — Основы (Часть 2)
В прошлой части мы сделали бекенд нашего модуля «Заказать звонок», который ожидает что в него когда нибудь придут всего два параметра: Телефон и Имя заказавшего звонок, после чего он их должен бережно добавить в базу данных добавив к записи ip заказавшего (в будущем можно будет сделать блэк-лист). Теперь пришло время сделать фронтенд нашего модуля, для этого нам понадобятся:
Первые две библиотеки не нуждаются в представлении, а про ion.js скажу пару слов. Это даже не библиотека а дополнение к jQuery и Bootstrap (Именно к ним обоим) стало быть что-бы использовать ion.js нужно с начала подключить jQuery потом Bootstrap и уже потом ion.js. А нужен ion.js только для того что-бы удобно собирать данные с форм, отправлять их посредством AJAX на нужный адрес и вставлять результат в заданный контейнер, и всё это делать одной командой типа :
Что-бы это работало, в javasctript шаблона, нужно будет добавить такой код:
Так-же нам понадобятся парочка скрытых элементов на странице, это модальное окно и контейнер для системных сообщений. Про модальное окно понятно, оно и будет содержать нашу форму для заполнения, это будет стандартное модальное окно Twitter Bootstrap, его код:
A вот с контейнером системных сообщений поподробнее.
Зачем нужны системные сообщения? Когда мы делаем что-то не так, т.е. допускаем ошибки, нам было бы очень удобно если бы мы точно знали, какие ошибки мы допустили. По этому в любом хорошем интерфейсе обязательно будет предусмотрено поле для системных сообщений. В нашем случае это будет контейнер, куда будут подгружаться эти самые сообщения, контейнер этот будет отслеживаемый, т.е. на нём будет висеть обработчик, отслеживающий изменения внутри контейнера, и если они происходят (т.е. появились сообщения) их нужно как-то обработать (показать). Сделаем красиво и с анимацией:
На странице должен присутствовать html-код:
Для него предусмотрен приблизительно такой стиль:
Для того что-бы наши сообщения красивенько появлялись и скрывались, и самое главное обрабатывались, в яваскрепте нашего шаблона должен быть вот такой код:
Все внешние приготовления закончены, приступим к созданию непосредственна модуля обратной связи, дальше я не буду заниматься оформлением а покажу только то что необходимо, по этому всё будет предельно просто:
Итак, нам понадобится три элемента:
В ion-команде дословно написано (порядок команд не имеет значения) обратится по адресу /callme/modal и вызвать модальное окно с идентификатором #ModalWin в котором отобразить содержимое ответа от сервера.
Страница для модального окна
Создадим страницу с содержимым модального окна, для этого в админке сделаем страничку с такими параметрами:
Код в секции Markup
Теперь при нажатии на кнопку «Заказать звонок» появляется наше модальное окно (неприглядное, стилизуйте сами):
Обратите внимание на Ion-команду кнопки «Заказать звонок» внутри модального окна:
Страница обработчик
Теперь создадим страницу-обработчик:
Содержимое секции Markup
Содержимое секции Code
Для тех кто знает PHP и Laravel на обычном уровне познаний всё будет понятно, остальные могут воспользоваться гуглом и самостоятельно разобрать что тут написано. Добавлю только то что стоит обратить внимание только на указание правильной таблицы в конструкторе запросов DB::table(‘mcmraak_feedback_calls’) посмотреть её название вы можете в Bulder
На этом пока всё, начальный результат достигнут. Заявки принимаются, добавляются в бузу данных, их нельзя отправлять чаще чем раз в минуту (время можно выставить в коде). При не правильном вводе, или при отправке раньше чем раз в минуту, всплывают сообщения.
Используя данную инструкцию, вы можете как угодно облагородить ваш модуль приёма заявок, в него можно добавить:
Формы
Введение
Note: Very often the form and list behavior are used together in a same controller.
Configuring the form behavior
The following fields are required in the form configuration file:
| Field | Description |
|---|---|
| name | the name of the object being managed by this form. |
| form | a configuration array or reference to a form field definition file, see form fields. |
| modelClass | a model class name, the form data is loaded and saved against this model. |
The configuration options listed below are optional. Define them if you want the form behavior to support the Create, Update or Preview pages.
| Option | Description |
|---|---|
| defaultRedirect | used as a fallback redirection page when no specific redirect page is defined. |
| create | a configuration array or reference to a config file for the Create page. |
| update | a configuration array or reference to a config file for the Update page. |
| preview | a configuration array or reference to a config file for the Preview page. |
Create page
To support the Create page add the following configuration to the YAML file:
The following configuration options are supported for the Create page:
| Option | Description |
|---|---|
| title | a page title, can refer to a localization string. |
| redirect | redirection page when record is saved. |
| redirectClose | redirection page when record is saved and the close post variable is sent with the request. |
| flashSave | flash message to display when record is saved, can refer to a localization string. |
| form | overrides the default form fields definitions for the create page only. |
Update page
To support the Update page add the following configuration to the YAML file:
The following configuration options are supported for the Update page:
| Option | Description |
|---|---|
| title | a page title, can refer to a localization string. |
| redirect | redirection page when record is saved. |
| redirectClose | redirection page when record is saved and close post variable is sent with the request. |
| flashSave | flash message to display when record is saved, can refer to a localization string. |
| flashDelete | flash message to display when record is deleted, can refer to a localization string. |
| form | overrides the default form fields definitions for the update page only. |
Preview page
To support the Preview page add the following configuration to the YAML file:
The following configuration options are supported for the Preview page:
| Option | Description |
|---|---|
| title | a page title, can refer to a localization string. |
| form | overrides the default form fields definitions for the preview page only. |
Defining form fields
Form fields are defined with the YAML file. The form fields configuration is used by the form behavior for creating the form controls and binding them to the model fields. The file is placed to a subdirectory of the models directory of a plugin. The subdirectory name matches the model class name written in lowercase. The file name doesn’t matter, but fields.yaml and form_fields.yaml are common names. Example form fields file location:
Fields can be placed in three areas, the outside area, primary tabs or secondary tabs. The next example shows the typical contents of a form fields definition file.
Tab options
| Option | Description |
|---|---|
| stretch | specifies if this tab stretches to fit the parent height. |
| defaultTab | the default tab to assign fields to. Default: Misc. |
| cssClass | assigns a CSS class to the tab container. |
Field options
For each field you can specify these options (where applicable):
Available field types
There are various native field types that can be used for the type setting. For more advanced form fields, a form widget can be used instead.
Создание кастомного плагина для October CMS
Мы продолжаем рассматривать October CMS и её особенности. Мы в LOVATA уже 6 лет работаем с этой системой и за это время убедились в том, что её растущая популярность абсолютно заслуженная.
Сегодня мы подготовили перевод еще одной статьи, на этот раз авторства Andriy Haydash. Данная статья посвящена созданию кастомной функциональности через плагины. Предыдущую статью, посвященную сравнению October CMS и WordPress, вы можете найти здесь.
Если вам нравится писать объектно-ориентированный и лёгкий для чтения код, то эта статья для вас. Вы узнаете, как написать свой плагин и почему October может стать хорошим вариантом для вашего следующего проекта.
В прошлом году я провёл небольшое исследование новых CMS, основанных на PHP, в поисках хорошей альтернативы WordPress. В идеале это должно было быть решение с открытым исходным кодом на современной кодовой базе.
Тогда меня заинтересовала October CMS. Я попробовал её и она почти сразу мне понравилась. У October хорошая структура кода, для неё легко писать собственные плагины.
Цель этой статьи — помочь вам понять, что собой представляет платформа и чего стоит от неё ожидать, прежде чем вы решите её использовать.
Почему стоит выбрать October в качестве CMS платформы?
Есть несколько основных причин, почему я решил использовать October для своих проектов.
Написана на фреймворке Laravel
October CMS построена на основе Laravel — самого мощного PHP-фреймворка для создания современных веб-приложений. Я могу точно сказать, что он лучший. Фреймворк очень прост в использовании, он исключительно понятен. Кроме того, в нём есть все возможности, необходимые современному фреймворку: роутинг (маршрутизация), объектно-реляционное отображение (ORM), авторизация, кэширование и многие другие, обеспечивающие красивую и понятную структуру в соответствии с концепцией Model-View-Controller. Поскольку October CMS написана на фреймворке Laravel, она унаследовала все эти возможности от «старшего брата».
Чистый код и документация
В отличие от многих других CMS, у October очень чистая и хорошо документированная кодовая база, написанная с использованием объектно-ориентированной парадигмы.
Вместо старого доброго PHP, October использует Twig в качестве языка для создания шаблонов, что упрощает работу разработчиков. Техническая документация также хорошо написана и позволяет быстро найти ответы на большинство вопросов.
Отличное сообщество
Хотя сообщество October еще не очень большое, люди в нём отзывчивы и всегда готовы помочь. Есть канал в Slack (На данный момент официально заморожен, сообщество переезжает в Discord. — Прим. перев.), к которому вы можете присоединиться, и разработчики с радостью помогут решить вашу проблему.
Большой маркетплейс
Как и у WordPress и других CMS, у October есть маркетплейс тем и плагинов. Выбор хороших тем не очень большой, но есть более 700 плагинов (По состоянию на июнь 2020 опубликовано более 900 плагинов и около 200 тем. — Прим. перев.), поэтому вполне вероятно, что вы сможете расширить функциональность, просто выполнив поиск и установив один из них. Отличительной особенностью плагинов является то, что их можно легко синхронизировать между всеми вашими проектами, просто добавив свой идентификатор проекта в админке.
Плагины и компоненты
Плагины — основа добавления новых функций в October CMS. Плагин может состоять из нескольких файлов и директорий, которые отвечают за регистрацию пользовательских компонентов, моделей, обновление структуры базы данных или добавление переводов. Плагин обычно создаётся в проекте в директории plugins/. Поскольку многие плагины добавляются в маркетплейс для использования другими людьми, каждый плагин должен иметь собственный неймспейс, который обычно начинается с названия компании или разработчика, создавшего плагин. Так, например, если вас зовут Acme и вы создали отличный плагин под названием Blog, ваш плагин будет называться Acme\Blog.
Покажу вам, как может выглядеть структура директорий плагина:
Как видите, есть файл с именем plugin.php, который отвечает за регистрацию плагина и всех его компонентов в October CMS.
Стоит упомянуть, что не все директории, перечисленные выше, необходимы для запуска плагина. Ваш плагин может иметь следующую структуру и тем не менее отлично работать:
Чаще всего один плагин добавляет только одну функциональность. Например, плагин Translate предназначен для того, чтобы помочь вам перевести контент вашего сайта на разные языки и обеспечить многоязычную поддержку пользователей.
У October CMS большой маркетплейс, где вы можете найти всё, что нужно.
В отличие от WordPress и других популярных CMS, плагины October могут содержать компоненты. Согласно документации October, компоненты являются «настраиваемыми модулями, которые можно прикрепить к любой странице (page), паршелу (partial) или лэйауту (layout)». Например, форма обратной связи, навигация, FAQ (список часто задаваемых вопросов и ответы на них); по сути, всё, что логично объединить в один модуль, который можно повторно использовать на нескольких страницах.
Компоненты создаются как часть плагина и находятся в субдиректории components/:
У каждого компонента есть PHP-файл, например, componentName.php, который определяет компонент, а также необязательную поддиректорию для паршелов (partials). Папка паршелов (partials) для компонента должна иметь то же имя в нижнем регистре, что и сам компонент.
Чтобы понять, как функционирует компонент, давайте предположим, что наш компонент отвечает за показ сообщений в блоге.
Как видим, компонент имеет две основные функции. Первая, componentDetails(), предоставляет информацию о компоненте администратору, который будет добавлять и использовать компоненты на своих веб-страницах. Вторая функция, posts(), возвращает пустые посты, которые затем могут быть использованы внутри части компонента (файл blogposts/default.htm), например так:
Чтобы October CMS знала, что наш компонент существует, мы должны зарегистрировать его, используя основной файл плагина внутри функции registerComponents():
Создаём плагин формы обратной связи
Мы напишем плагин для создания формы обратной связи. Вот как он должен работать:
Начнём создавать наш плагин, запустив команду в терминале, которая генерирует структуру плагина:
Аргумент progmatiq.contactform содержит имя автора (progmatiq) и имя плагина (contactform).
Теперь нужно открыть наш файл plugin.php и изменить информацию о плагине следующим способом:
Вот несколько других методов, на которые стоит взглянуть:
Теперь нам нужно зарегистрировать компонент внутри плагина. Для этого мы модифицируем метод registerComponents():
Эта функция возвращает массив компонентов, которые предоставляет наш плагин. Полное имя класса компонента является ключом в этом методе, а значение — альяс, который мы будем использовать для ссылки на наш компонент в шаблонах Twig.
После того, как мы зарегистрировали компонент, можно создать новую страницу контактов и добавить наш компонент (номер шага совпадает с номером иллюстрации на скриншоте):
Добавим наш новый компонент на страницу:
Если вы сейчас откроете страницу контактов, то не увидите ничего, кроме заголовка с надписью «Контакты».
Дело в том, что у нашей формы нет HTML для отображения.
Нам нужно создать файл contactform/default.htm в папке components/.
Также нужно добавить следующий HTML-код в файл:
В основном этот код довольно прост. Однако, в нем есть специальные атрибуты data- *, которые можно использовать в October:
Тег имеет три специальных атрибута:
Этот атрибут сообщает October, что функция onSend из нашего компонента (которую мы собираемся создать дальше) должна вызываться при отправке формы с использованием Ajax.
включит валидацию формы посредством Ajax с использованием ошибок, которые будут отправлены с сервера, если форма недействительна.
очищает форму и затем выдает сообщение, если запрос был успешным и не было никаких ошибок проверки или сервера.
У каждого входа есть следующий блок, который отвечает за отображение ошибок проверки, возвращаемых сервером для данного ввода:
Кнопка отправки имеет атрибут data-attach-loading, который добавляет спиннер и отключает кнопку во время обработки запроса сервером. Это сделано для того, чтобы пользователь не мог снова отправить форму, пока предыдущий запрос не будет обработан.
А вот как теперь выглядит наша страница:
Вернёмся к нашему компоненту contactForm.php и создадим вспомогательные методы onSend() и validate(), которые будет отвечать за отправку формы:
Первое, что мы делаем, это получаем данные из запроса и проверяем их с помощью вспомогательного метода validate(). Все доступные правила проверки, которые вы можете использовать, можно найти в документации. Если проверка не удалась, метод validate() генерирует исключение ValidationException — выполнение кода остановится, а сервер выдаст код состояния 406 и сообщение о провале валидации.
Если валидация прошла успешно, мы отправим электронное письмо нашему администратору.
Примечание: для упрощения я предположил, что почта, на которую мы хотим отправить заявку — admin@gmail.com. Убедитесь, что используете собственный адрес электронной почты!
Вот полный код вашего плагина contactForm.php:
Как видите, первый аргумент, который принимает функция Mail :: send() — имя шаблона адреса электронной почты, которое будет отображаться в теле сообщения. Нам нужно создать его в панели администратора. Перейдите в Настройки> Шаблоны писем и нажмите кнопку «Новый шаблон». Затем заполните форму, как показано на экране ниже:
Вот тело письма, которое мы собираемся использовать:
You have received a new contact inquiry
Теперь сохраните шаблон письма. Следующее, что нам нужно сделать, это настроить SMTP-сервер, который будет отправлять электронные письма.
Перейдите в Настройки> Конфигурация почты и заполните все настройки.
Конечно, я не поделюсь своей конфигурацией. Используйте собственные настройки.
На этом этапе у нас всё готово для начала тестирования компонента формы обратной связи.
Во-первых, давайте проверим, работает ли валидация, когда мы оставляем поле Content пустым и вводим неверный адрес электронной почты:
Валидация работает как положено. Теперь давайте введём правильные данные и посмотрим, будет ли электронное письмо успешно отправлено нашему администратору.
Вот письмо, которое получит admin@gmail.com:
После успешной отправки формы пользователь увидит соответствующее сообщение:
Вывод
В этой статье мы рассмотрели, что такое плагин и компонент, и выяснили, как их использовать в October CMS.
Не бойтесь создавать собственный плагин для вашего проекта, если не можете найти существующий плагин, который соответствует вашим потребностям. Это не так сложно и вы можете полностью его контролировать, обновлять и расширять в любое время. Даже создание плагина для простой формы обратной связи, вроде того, что мы сделали сегодня, может быть полезно, если вы захотите потом интегрировать его с другими сервисами, например, с Mailchimp или HubSpot.
Я надеюсь, что статья была для вас полезна. Если у вас есть вопросы, не стесняйтесь задавать их в комментариях.
October cms форма обратной связи
Form Constructor
Allows you to manage forms on the site. Processes forms, sends data in mail templates. Integration with the Se.
Form Constructor
Allows you to manage forms on the site. Processes forms, sends data in mail templates. Integration with the Se.
Contact Form, Subscriptions
Poptin: Pop Ups & Contact Forms
Convert visitors into sales, leads, and email subscribers with engaging website pop ups and contact forms
Poptin: Pop Ups & Contact Forms
Convert visitors into sales, leads, and email subscribers with engaging website pop ups and contact forms
Contact Form, Marketing
Contacts
Manage contacts and receive messages from customers
Contacts
Manage contacts and receive messages from customers
Contact Form, Content
Form Constructor
Allows you to manage forms on the site. Processes forms, sends data in mail templates. Integration with the Se.
Form Constructor
Allows you to manage forms on the site. Processes forms, sends data in mail templates. Integration with the Se.
Contact Form, Subscriptions
Poptin: Pop Ups & Contact Forms
Convert visitors into sales, leads, and email subscribers with engaging website pop ups and contact forms
Poptin: Pop Ups & Contact Forms
Convert visitors into sales, leads, and email subscribers with engaging website pop ups and contact forms
Contact Form, Marketing
Contacts
Manage contacts and receive messages from customers
Contacts
Manage contacts and receive messages from customers
Contact Form, Content
Forms
GromIT.Forms is a simple and powerful frontend forms constructor for October CMS.
Forms
GromIT.Forms is a simple and powerful frontend forms constructor for October CMS.
Contact Form, Content
SendGrid
This plugin let you sending email through Sendgrid driver.
SendGrid
This plugin let you sending email through Sendgrid driver.
Contact Form, Email
Telephone input field and phone number validator
International telephone form field and phone number validator
Telephone input field and phone number validator
International telephone form field and phone number validator
Contact Form, Developer Tools
All plugins
Form Builder
This plugin allows you to build custom front-end forms with ease.
Form Builder
This plugin allows you to build custom front-end forms with ease.
Contact Form, Content
Magic Forms
Create easy and flexible front-end AJAX forms (contact, feedback, registration, uploads)
Magic Forms
Create easy and flexible front-end AJAX forms (contact, feedback, registration, uploads)
Contact Form, Social
Small Contact Form
Simple but flexible multi language contact form builder with custom fields, validation and antispam
Small Contact Form
Simple but flexible multi language contact form builder with custom fields, validation and antispam
ContactMe
Contact Form plugin for OctoberCMS
ContactMe
Contact Form plugin for OctoberCMS
Custom Forms
Custom forms made easy
Custom Forms
Custom forms made easy
Contact Form, Customization
Flexi Contact
A Flexible and Configurable Contact Form to Add to any Page
Flexi Contact
A Flexible and Configurable Contact Form to Add to any Page
SendGrid
This plugin let you sending email through Sendgrid driver.
SendGrid
This plugin let you sending email through Sendgrid driver.
Contact Form, Email
Simple Contact Us
Easily configurable contact us form. Add form to any page and manage, reply or print recieved messages.
Simple Contact Us
Easily configurable contact us form. Add form to any page and manage, reply or print recieved messages.
Forms
GromIT.Forms is a simple and powerful frontend forms constructor for October CMS.
Forms
GromIT.Forms is a simple and powerful frontend forms constructor for October CMS.
Contact Form, Content
Contact Manager
Manage Companies, Contacts, Events, Calendars and Subscribers, with contact form and subscribe form
Contact Manager
Manage Companies, Contacts, Events, Calendars and Subscribers, with contact form and subscribe form
Contact Form, Content
Mail Telegram
Send site mail to your Telegram account using bot
Mail Telegram
Send site mail to your Telegram account using bot
Contact Form, Email
Webmail Beta [DEPRECATED]
Send and receive emails using your existing IMAP mail server
Webmail Beta [DEPRECATED]
Send and receive emails using your existing IMAP mail server
Contact Form, Email
Popular bundles
Small Bundle
Collection of plugins for small web sites
Small Bundle
Collection of plugins for small web sites
CRM Pro
The professional Customer Relations Manager (CRM) for October