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

Пишем свой стартап: Ajax для встреч и встреч

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Security Basics
Building Your Startup: Invite People via URL

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

Final product image
What You'll Be Creating

Этот учебник является частью серии Пишем свой стартап на PHP на Envato Tuts +. В этой серии я показываю вам запуск приложения от самой концепции до реального приложения, используя приложение «Планировщик встреч» в качестве примера. На каждом шаге я буду выкладывать код планировщика собраний в качестве примеров с открытым исходным кодом. Я также рассмотрю связанные с запуском бизнес-вопросы по мере их возникновения.

Погружаемся глубже в Ajax

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

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

Я также расскажу вам, как я использовал консоль разработчика браузера Google, чтобы помочь мне идентифицировать сломанные области, что может быть особенно сложно при работе с Ajax между PHP и JavaScript. Это как свет в конце туннеля тьмы.

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

Startups Ajax - Broken Bootstrap Switch Controllers After Ajax

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

Напомним, что весь код Планировщика собраний написан на Yii2 Framework для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь с нашей параллельной серией Программирование с Yii2.

Для начала рассмотрим добавление участников встречи через Ajax.

Добавление участников собрания

Startups Ajax - The Participant Panel Loaded via Ajax

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

Раньше на встречу был только один участник. Затем я включил групповые встречи и создал список кнопок для указания каждого участника:

Startups Ajax - Refreshing Participant Button List via Ajax

Когда участник добавляется, я обновляю весь список через Ajax.

Вот функция jQuery addParticipant(), которая вызывает getParticipantButtons() после добавления каждого нового:

Вот функция getParticipantButtons():

Она делает вызов Ajax для метода actionGetbuttons() для объекта ParticipantController.php:

Примечание. Вместо ComponentController мне нравится говорить «ParCon» для краткости, потому что ему нравится удаленная база команд Star Trek, или это указывает, что я слишком долго работал в этом запуске. Я определенно провел слишком много поздних ночей, работая над функцией Ajax.

В любом случае, вышеупомянутые функции заполняют панель всеми обновленными участниками.

Теперь давайте перейдем к датам и времени, которые полагаются на один из наиболее часто используемых виджетов Bootstrap Date Time.

Добавление дат и времени

Startups Ajax - The Date Time Panel Loaded via Ajax

Дата, время и место оказались самыми сложными функциями для ajaxify. Это не столько виджет Bootstrap и API Карт Google, используемый в формах. Трудным оказался Bootstrap Switch Controllers - они не были разработаны и не были хорошо документированы для Ajax.

Проблемы с Bootstrap Switch Controllers через Ajax

Вот пример сломанных переключателей после представления Ajax, добавляющего место:

Startups Ajax - Bootstrap Switches for Places Broken Checkboxes

Я расскажу, как я в конечном итоге исправил это, но сначала посмотрим на meeting-time/panel.php:

Вы заметите timeMessage, который предоставляет предварительно загруженные предупреждения для отображения в определенных условиях ajax, рассмотренных в последнем эпизоде. И, в основном, код начинает следовать тем же форматам, которые я использовал на других панелях.

Насколько это возможно, я пытался использовать предыдущие подходы и повторно использовать структуру кода при ajaxifying каждой панели содержимого.

Вот JavaScript-панель с переключателем в Meeting.js:

Когда появляется панель и пользователь отправляет новое время, она вызывает addTime():

Это вызывает функцию MeetingTimeController.php actionAdd() Ajax:

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

Я бы перезагрузил строки даты, и все контроллеры коммутатора на странице сломались.

Часть проблемы заключалась в том, что повторная инстанция Ajax для Switch Bootstrap не была хорошо документирована. Попробовав кучу вещей в слепую и, найдя помощь в сетях, я наконец нашел верный путь.

$("input[name='meeting-time-choice']").map(function(){} проходит через каждое управление переключателем, а набор команд $(this).bootstrapSwitch(property,value) перезагружает настройки управления. Понадобилось некоторое время, чтобы обнаружить соответствующий управляющий API.

В принципе, мне пришлось переконфигурировать все свойства, которые мне нужны для каждого элемента управления с нуля. Это превратило необработанные флажки выше в более богатые переключатели.

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

Двигаясь дальше, добавление мест для встреч было похоже на добавление дат и времени, но я хотел бы использовать эту панель контента, чтобы погрузиться в устранение неполадок Ajax с помощью инструментов Google Chrome Browser Developer.

Добавление мест для встреч

Startups Ajax - The Meeting Places Panel Loaded via Ajax

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

В этом случае использование консоли разработчика браузера Google Chrome помогло мне прорваться через пустоту.

Как правило, с Ajax у вас просто ломается без указания того, что пошло не так.

Ниже приведена пошаговая информация о том, что Chrome показывает, что я использовал для отслеживания ошибок.

Используя вкладку Console, я мог видеть неудачные запросы GET. Это ошибка сервера, пытающаяся запросить добавление места на собрание:

Startups Ajax - Google Chrome Browser Console Tab

Это помогло мне определить конкретные аргументы, запрашиваемые через ajax, в этом случае для встречи id=186.

На вкладке Network также отображаются эти вызовы и их аргументы:

Startups Ajax - Google Chrome Browser Network Tab

Когда вы нажимаете на конкретный запрос, вы можете увидеть пять вкладок; вот вкладка Headers:

Startups Ajax - Google Chrome Browser Headers Tab

В этом случае вкладка Preview подсвечила мою ошибку PHP в MeetingPlaceController, с которой столкнулся запрос Ajax:

Startups Ajax - Google Chrome Browser Preview Tab

Вы можете видеть, насколько это полезно, особенно учитывая широкий объем кода, который мне пришлось перестроить, чтобы ajaxify все эти функции планирования.

Вот еще один пример закладки Network, в которой запрашиваются места для Meeting id = 186:

Startups Ajax - Google Chrome Browser Network Tab

На вкладке Preview показано, что запрашиваемый файл просмотра не существует или, по крайней мере, не был там, где он должен быть:

Startups Ajax - Google Chrome Browser Preview Tab

Консоль разработчика Google Chrome очень помогла мне в завершении работы Ajax.

Спасибо, Google! Я даже не буду дразнить тебя в моем гениальном меме.

Что дальше?

Надеюсь, вам понравились оба этих эпизода об Ajax и переход к быстрому, эффективному планированию встреч и устранению обновлений страниц. Расписание встреч - это сердце и душа Планировщика собраний, поэтому следует сделать эту работу отличной.

Я лично многому научился в этом процессе, и эти изменения оказали значительное положительное влияние на обслуживание.

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

Я приближаюсь к запуску эксперимента с WeFunder, основанного на реализации новых правил SEC. Вы можете подписаться на наш профиль, если хотите. Я также напишу об этом в следующем учебнике.

Следите за предстоящими учебными пособиями в разделе «Создание вашего запуска с помощью серии PHP».

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

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.