Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Программирование на Yii2: использование Ajax

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called How to Program With Yii2.
Programming With Yii2: Helpers
Programming With Yii2: Security

Russian (Pусский) translation by Dima (you can also view the original English article)

Final product image
What You'll Be Creating

Если вы спрашиваете: "Что такое Yii?", Ознакомьтесь с разделом Введение в Yii Framework, в котором рассматриваются преимущества Yii и представлен обзор Yii 2.0, выпущенный в октябре 2014 года.

В этой серии "Программирование с Yii2" я расскажу читателям, как использовать Yii2 Framework для PHP. В этом уроке мы рассмотрим реализацию интерактивных страниц с использованием Ajax. В частности, я собираюсь осветить использование Ajax в двух областях приложения Meeting Planner, о котором параллельно пишу серию Building Your Startup.

Сначала мы рассмотрим, как мы загружаем карту Google на страницу в ответ на вход пользователя в определенное место. Как показано ниже, после того, как я вхожу в Plum Bistro и нажимаю return, карта справа загружается динамически без обновления страницы.

Yii Ajax - Google Maps UX Example

Во-вторых, я покажу вам, как мы записываем изменения, которые пользователь вносит на этапе планирования. Планировщик встреч позволяет участникам легко определить предпочтительные места и даты, а затем выбрать последнее.

Yii Ajax - Meeting Planner UX Example

Ajax делает процесс намного проще и быстрее, позволяя людям перемещать несколько элементов управления переключателем, чтобы указать свои предпочтения без какого-либо обновления страницы.

Это просто напоминание, я участвую в комментариях ниже. Мне особенно интересно, если у вас есть другие подходы, дополнительные идеи или вы хотите предложить темы для будущих уроков. Если у вас есть вопрос или предложение по теме, пожалуйста, напишите ниже. Вы также можете связаться со мной через Twitter @reifman напрямую.

Использование Ajax с Yii

Yii Ajax - Wikipedia Ajax Flow vs HTTP
Автор: DanielSHaischt, via Wikimedia Commons, CC BY-SA 3.0

Если вы только начинаете с Ajax и хотите начать медленно, на Yii Playground есть два простых примера Ajax, которые могут быть полезны для обзора. Один изменяет текст на странице через Ajax, а другой загружает ответ на форму на той же странице, причем оба без обновления страницы, и каждый включает подробные примеры кода.

Yii Ajax - Yii Playground AJAX Examples

Давайте углубимся в наши примеры. Все источники этих примеров можно найти в Meeting Planner code repository at GitHub.

Интерактивное отображение карт Google

Создание формы ввода

Когда форма Create a Place form (/frontend/views/place/create_place_google.php) изначально загружается, она включает виджет поиска Google Places в реальном времени:

Yii Ajax - Create a Place in Meeting Planner Using Google Places

Интеграция Google места на JavaScript API

Форма загружает библиотеку JavaScript Карт Google и соединяет ее с полем ввода place-searchbox:

Частичная форма _formPlaceGoogle.php включает в себя некоторые скрытые поля, в которых результаты карты могут быть сохранены до отправки всей страницы, а также скрытый div для отображения карты через Ajax.

В таблице Place of Planner Meeting хранятся имя Google, place_id, местоположение, веб-сайт, окрестности и полный адрес для использования в приложении.

MapAsset, включенный выше, загружает наш файл create_place.js, который работает между Google и нашей формой; он в основном управляет передачей и ответом данных через Ajax.

Наш Ajax, управляющий JavaScript

Я рассмотрю create_place.js по частям. Во-первых, есть setupListeners(), вызываемый родительской формой:

Когда пользователь начинает печатать, виджет опускает опции ввода текста для реальных мест, и событие place_changed обрабатывается при каждом нажатии клавиши. Слушатель keydown предотвращает отправку формы ключом возврата (ASCII 13 или 0xD для вас, гиков).

Вот как это выглядит при вводе текста. Я вхожу в Plum для Plum Bistro:

Yii Ajax - Google Places Dropdown List

Сбор итоговой карты и ее данных

Если человек выбрал ввод или щелкнул место в раскрывающемся списке, вызывается populateResult(); если нет, мы ничего не делаем.

Это заполняет все скрытые поля данными из Google и вызывает loadMap() для отображения карты:

Yii Ajax - Google Places Load Map via Ajax

Функция loadMap() очень специфична для API Google Place и отображает карту, показанную выше справа:

Быстрый и впечатляющий пользовательский опыт. Попробуйте его!

Динамическая запись изменений

Далее давайте посмотрим, как мы записываем изменения в режиме реального времени. Здесь нет Google API; это больше ванильный AJAX в Yii Framework.

Когда люди добавляют даты, время и места в свои планы встреч, вы увидите страницу, подобную этой:

Yii Ajax - Meeting Planner Planning View with Sliders

Столбцы You и Them показывают предпочтения каждого участника в отношении мест и времени. Увеличенный слайдер Choose позволяет человеку принять окончательное решение о месте и времени встречи.

Есть много данных, которые нужно собрать от пользователя, и мы не хотим требовать обновления страницы при каждом изменении. Ajax является идеальным решением для этой проблемы.

Я пройдусь по коду для панели "Место встречи". Панель Meeting-Time работает аналогично.

Ниже приведенный код

Из-за инфраструктуры MVC и моего желания повторно использовать частички кода, это может оказаться сложным для отслеживания. Вспомогательные функции PHP и JavaScript иногда приходилось размещать в родительских файлах, а не в частных, с которыми они были наиболее тесно связаны. Я постараюсь сделать обзор в первую очередь. Я призываю вас прочитать это несколько раз для лучшего понимания. И опять, вы можете просматривать код через GitHub.

Подсказка: имейте в виду, что имена файлов для частичных имен обычно начинаются с подчеркивания.

  1. Страница планировщика собраний загружается по адресу /frontend/views/meeting/view.php. Этот файл также содержит вспомогательные функции JavaScript для управления состоянием кнопок, таких как Send и Finalize (т.е. После этого изменения, может ли пользователь сейчас отправить это приглашение? В Планировщике собраний обычно нужно выбрать одно место и один раз, прежде чем его можно будет отправить), и отображать визуальные уведомления о том, что изменения будут отправлены другим участникам по электронной почте после завершения работы пользователя.
  2. При отображении панели Where для мест она загружает /frontend/views/meeting-place/_panel.php. Этот файл включает вспомогательные PHP-функции showOwnerStatus() и showParticipantStatus(), которые будут повторно использоваться его дочерним объектом _list.php. Но, самое главное, _panel.php включает методы JavaScript для события switchChange ползунка Bootstrap.
  3. Файл _panel.php использует _list.php для отображения каждой отдельной строки для каждого места. Этот файл будет отображать ползунки Bootstrap путем вызова функций _panel.php showOwnerStatus() и showParticipantStatus().
  4. Функции switchChange будут вызывать Ajax вызовы MeetingPlaceChoiceController.php.
  5. И, наконец, MeetingPlaceChoiceController.php вызывает модель MeetingPlaceChoice.php для записи изменений в базе данных.

Извините, размещение соответствующего кода сложное и пространное.

Теперь я пошагово проведу вас по ключевым компонентам.

Ajax-код шаг за шагом

Вот Meeting/view.php рендеринг Meeting-Place/_panel.php. Здесь отображается значения для строк возможных мест и выбора участников:

Ниже приведен JavaScript, связанный с действиями, которые отвечают на результаты Ajax, но не являются необходимыми для Ajax. Вам не нужно понимать, что делают эти функции, чтобы понять этот пример Ajax, но я включил их, поскольку они вызываются в ответ на события Ajax.

Здесь, в Meeting-Place/_panel.php, создается таблица с указанием мест и выбора, вызывающая _list.php:

Что еще более важно, он также включает в себя приведенный ниже JavaScript, который мы используем для выполнения вызовов Ajax, когда пользователь перемещает переключатель, изменяя его состояние. Функции выбора соответствуют большему синему ползунку выбора, в то время как функции выбора соответствуют ползункам предпочтения.

Функции выше делают вызов actionSet() в MeetingPlaceChoiceController для ответа на изменение коммутатора с помощью Ajax-запросов:

Действия контроллера, которые отвечают через Ajax, должны иметь формат ответа JSON (таким образом, Yii знает, что они не предназначены для доставки HTML):

Вот метод MeetingPlaceChoice::set(), который записывает действия пользователя в базе данных и создает запись MeetingLog, которая отслеживает все изменения во время планирования.

Особенности, связанные с изменениями собрания

В Meeting Planner я веду журнал каждого отдельного изменения. Это позволяет мне узнать, когда прошло несколько минут с момента последнего изменения пользователя, и уведомить других участников собрания. Я пытаюсь провести эксперимент с этим сервисом, вместо того чтобы требовать, чтобы участники нажимали кнопку "Отправить" каждый раз, когда они хотят внести изменения.

Тем не менее, это требует практики, чтобы понять, что это нормально, чтобы изменить и оставить его, то есть закрыть окно браузера. Таким образом, функции displayNotifier() отображают некоторые флеш-оповещения, чтобы помочь с этим - в конечном счете, я их довожу до совершенства и удаляю для опытных пользователей.

MeetingLog также позволяет мне генерировать текстовую сводку истории планирования собрания. Если вы хотите узнать больше об этом, я написал об этом в статье Создание стартапа: уведомление людей об изменениях собрания и Доставке уведомлений.

Что дальше?

Я надеюсь, что эти примеры помогут вам понять основы Ajax в Yii. Если вы заинтересованы в более продвинутом Ajax, я планирую включить загруженные Ajax формы в серию Meeting Planner. И, по общему признанию, Ajax - это область, где сообщество Yii не поделилось множеством примеров. Как правило, Ajax работает в Yii так же, как и в PHP и других фреймворках, поэтому вы можете учиться на примерах из других сообществ фреймворков.

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

Если вы хотите узнать, когда появится следующий учебник по Yii2, следуйте за мной @reifman в Twitter или зайдите на мою страницу. Моя страница будет включать все статьи из этой серии, как только они будут опубликованы.

Ссылки по теме

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.