Yii2, форма обратной связи во сплывающем (модальном) окне
14 апреля 2017 г. 33 Александр Хмельницкий 7748 Yii Framework 2, yii2—>
Пример реализации формы обратной связи во сплывающем (модальном) окне с использованием стандартной формы из страницы контактов.
Пример будет реализован на Yii2 basic, для внедрения его на Yii2 advanced необходимо сменить локацию файлов соответствующую шаблону advanced и namespace (особых трудностей это вызвать не должно).
Форма обратной связи во всплывающем окне будет работать на каждой странице сайта, поэтому реализуем виджет который будет инициализировать модель ContactForm, отправлять сообщение в случае правильного заполнения формы и сообщать об отправке пользователю (посетителю сайта).
Создаем класс виджет app/components/FBFWidget.php со следующим содержимым:
Далее создадим представление (view) для виджета app/components/views/fbfWidget.php:
Представление содержит два простых модальных окна bootstrap. Первое содержит сообщение об успешной отправки и автоматически выводится при отправке, второе содержит саму форму обратной связи (код формы идентичен форме из представления contact (app/views/site/contacts.php)).
Далее в основном макете (app/views/layouts/main.php) добавляем инициализацию виджета и ссылку (или кнопку) для вызова всплывающего (модального) окна с формой обратной связи.
Добавляем в use виджет с формой обратной связи:
Добавляем (меняем) ссылку для вывода всплывающего окна с формой обратной связи в меню ( Nav::widget ):
Вызываем виджет со всплывающим (модальным) окном, которое содержит форму обратной связи:
Yii2 модальное окно с формой
Создание модального окна
Как известно, по-умолчанию к Yii2 подключаются стилевые файлы css-фреймворка Bootstrap. Это значит, что мы можем использовать все доступные в нем элементы интерфейса: выпадающие списки, слайдеры и прочее.
Часто бывает необходимо создать простое всплывающее (модальное) окно (окно, которое появляется в центре экрана и содержит в себе какую-либо информацию, при этом вся остальная часть рабочей области затемняется и становится недоступной) с какими-то данными.
Boostrap позволяет очень просто сделать это с помощью следующего кода:
Модальное окно
Содержимое модального окна
Чтобы модальное окно действительно работало, сначала нужно создать кнопку, которая будет инициализировать модальное окно (кликаем по кнопке, получаем окно):
Сам элемент модального окна должен содержать атрибут id со значением, которое было указано в кнопке вызова окна:
Внутри блока находятся три важных элемента, которые нужно заполнять для создания интерфейса модального окна.
1) Шапка окна:
Модальное окно
Здесь в базовом примере от Bootstrap находится заголовок формы и кнопка закрытия всей формы.
2) Контентная область окна:
Содержимое модального окна
Здесь также может быть любое html-содержимое: форма, таблица, текст, список и другие.
3) Подвал окна:
Здесь обычно располагаются элементы управления формой: кнопка выполнения действия окна (например, отправка формы, если она там есть) и еще одна кнопка закрытия формы.
После окончательной разметки можно получить примерно такую форму:
Как всегда, виджеты Yii2 позволяют нам сэкономить много строк кода.
Для начала подключим одноименный виджет, который идет в дистрибутиве фреймворка:
После этого разместим php-код в нужном месте страницы:
Текст модального окна
Начало блока модального окна инициализируется с помощью конструкции:
Вся разметка, которая находится между этими вызовами будет находится в контентой области модального окна, т.е. внутри блока:
Для корректной работы модального окна в инициализации формы нужно заполнить параметры:
Параметры header и footer должны содержать разметку, которая будет выводиться в соответствующих областях модального окна.
Это единственный неудобный момент использования виджета, но скорее всего больших блоков разметки здесь не будет и все значения можно поместить в соответствующие переменные:
Которые нужно указать при инициализации формы.
Виджет поддерживает и другие полезные параметры для создания модального окна. Исходный код виджета хорошо документирован, разобраться во всех его настройках не составит труда.
Виджет хорошо подойдет в ситуации, когда нужно быстро создать простое модальное окно. Однако, если надо создать какое-то специфично стилизованное окно, виджет не сможет в полной мере реализовать эту задачу. Придется вставлять на страницу полный вариант разметки и вызывать окно с помощью JS/jQuery.
Pjax на ActiveForm и на GridView на странице и в модальном окне («Пиджак в окне»)
1. Случай формы ActiveForm по Pjax на странице
Пригодится для лендингов. Форму одеваем в пиджак (Pjax::begin() и Pjax::end()), чтобы обновлялась она асинхронно при ответе с сервера (мне нужно вывести вместо формы на её месте сообщение о результате отправки сообщения администратору сайта). И, второе, не забываем у ActiveForm в опциях добавить ‘data-pjax’ => true, чтобы форма отправляла данные асинхронно.
Дальше в контроллере в действии для этого представления добавляем отдельно проверку для случая isPjax. В модели формы BuycourseForm действие contact(), отправляющее сообщение на email.
2. Случай ActiveForm по Pjax в модальном окне («Пиджак в окне»)
Пишу CRM-ку для студии танцев и возникло желание задействовать мощь Pjax. Тем более, что его поддержка встроена в Yii2.
В модальном окне внесения оплаты сохранение оплаты делается через Pjax («Пиджак в окне»), потому что в модальном окне под формой внесения оплаты находится грид с данными об оплатах этого ученика и таким образом (по pjax) он обновляется на лету и админ видит, что платеж зафиксирован на сервере. При закрытии же самого модального окна, нужно снова обновить ячейку с оплатой в главном гриде «Ученики».
Итак, когда вызывается модальное окно, там форма добавления платежа и грид уже имеющихся платежей. Контроллер PaymentController
Yii2: Выводим модальное окно с формой обратной связи и отправляем её Ajax’ом на email
Некогда мы выводили модальное окно с формой обратной связи на CJuiDialog для Yii 1. Делаем то же теперь в Yii 2. Но теперь используем Bootstrap 3 modal, в целом же вести всплывающую форму отправляющую письмо по ajax, в случае с Yii 2 проще. Это достаточно насущная задача, так как крайне часто требуется на сайте воткнуть кнопку «Оставить онлайн заявку» или «Перезвоните мне».
В работе форму можно посмотреть на сайте нашей школы брейк данса «Inspire».
1) Ставим кнопку, вызывающую модальное окно с формой и само окно (обычно в шаблоне главной страницы)
2) Тут же в шаблоне главной, где подключили кнопку (на весь сайт это не нужно распространять), подключаем скрипт:
3) Его создадим в папке web/scripts.
4) Едем дальше. В контроллере SiteController методы signup и submitsignup
5) Создадим модель SignupForm.php (очень похожую на ContactForm)
6) И само представление формы
Если этого не сделать, то все письма будут складываться и скапливаться в runtime/mail, а не отправляться адресату:
Вот и всё. У вас должно получиться модальное окно, появляющееся по нажатию на кнопку. В окне форма, у которой работает ajax валидация и нажав «Отправить» эти данные отправляются администратору без перезагрузки страницы!
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Yii2 (basic + advanced), форма авторизации во всплывающем (модальном) окне
Подробная инструкция добавления авторизации в модальном окне в Yii2 (basic + advanced).
Решение содержит в себе 3 раздела (инструкции) для «Yii2 basic + авторизация через БД в модальном окне», «Yii2 basic + авторизация из коробки в модальном окне» и «Yii2 advanced авторизация в модальном окне», которые объединены в одну статью, т.к. делать 3 отдельных не имеет смысла. Для удобства весь код продублирован для каждого шага отдельной инструкции. Однако решение «Yii2 basic + авторизация через БД в модальном окне» взято за основу для остальных инструкций.
Все проверено и работает без танцев с бубном, приступаем.
Содержание
Yii2 basic авторизация через БД во всплывающем (модальном) окне
Шаг 1
Для реализации авторизации Yii2 basic во всплывающем окне я возьму ранее написанный пример с авторизацией из БД: Yii2 basic, авторизация и регистрация через БД. Для этого клонируем его и подготавливаем:
Настраиваем соединение с БД и запускаем миграцию:
Шаг 2
Создаем каталог для хранения виджтов app/widgets и каталог для представлений (view) виджетов app/widgets/views.
Создаем виджет LoginFormWidget для отображения модального окна с формой авторизации, app/widgets/LoginFormWidget.php:
В представление (view) виджета LoginFormWidget добавляем модально окно с формой авторизации, app/widgets/views/loginFormWidget.php:
Шаг 3
Добавляем ajax действие проверки и авторизации пользователя в контроллер Site, app/controllers/SiteController.php:
Шаг 4
В главном макете app/views/layouts/main.php в блок use добавляем виджет LoginFormWidget:
Заменим ссылку ведущую на страницу авторизации для вызов модального окна, с:
В итоге app/views/layouts/main.php примет вид:
Сохраняем и запускаем.
Yii2 basic, авторизация из коробки во всплывающем (модальном) окне
Пример описанный выше подойдет и для авторизации имеющейся в Yii2 basic из коробки с небольшими правками.
Шаг 1
Шаг 1 из предыдущего примера пропускаем, вместо него устанавливаем yii2 basic (Как установить Yii 2 basic, краткая инструкция) или открываем существующий проект с авторизацией из коробки.
Шаг 2
Выполняем шаг 2 из предыдущего примера с некоторыми изменениями. В представлении виджета app/widgets/views/loginFormWidget.php заменяем:
В итоге app/widgets/LoginFormWidget.php примет вид:
Представление виджета LoginFormWidget примет вид, app/widgets/views/loginFormWidget.php:
Шаг 3
Шаг 3 из предыдущего примера выполняем полностью.
В итоге actionAjaxLogin в app/controllers/SiteController.php примет вид:
Шаг 4
Шаг 4 из предыдущего примера подвергнется небольшим изменениям. А именно в главном макете app/views/layouts/main.php заменяем ссылку вызова страницы авторизации с:
Остальное делаем как написано. В итоге app/views/layouts/main.php примет вид:
По окончанию жмем на Login, вводим логин и пароль (admin, admin).
Yii2 advanced. Авторизация во всплывающем (модальном) окне
Шаг 1
Открываем существующий проект на Yii2 advanced или устанавливаем новый (Как установить Yii 2 advanced, краткая инструкция). И используем инструкцию описанную выше с некоторыми изменениями.
Шаг 1 пропускаем из основного примера.
Шаг 2
Для шага 2 из основного примера, меняем путь к каталогу хранения виджета и его представления на frontend/widgets и frontend/widgets/views соответственно.
В классе виджета frontend/widgets/LoginFormWidget.php меняем namespace c:
Также меняем путь к LoginForm c:
В представление виджета frontend/widgets/views/loginFormWidget.php заменяем:
Остальное в шаге 2 из основного примера оставляем как есть.
Виджет frontend/widgets/LoginFormWidget.php примет вид:
Представление виджета LoginFormWidget примет вид, frontend/widgets/views/loginFormWidget.php:
Шаг 3
Шаг 3 из основного примера делаем полностью.
В итоге actionAjaxLogin в frontend/controllers/SiteController.php примет вид:
Шаг 4
Шаг 4 из основного примера имеет небольшие отличия. Открываем основной макет frontend/views/layouts/main.php, в блок use добавляем виджет с модальным окном и формой авторизации:
Остальное остается как описано в шаге 4 из основного примера.
В итоге frontend/views/layouts/main.php примет вид:
Добавляем нового пользователя в БД. И пробуем.
Если у вас есть вопросы или предложения по улучшению кода описанного в статье пишите в комментариях.
Я всегда открыт к конструктивному диалогу