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

Создание своего стартапа: динамические формы Ajax для планирования

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Preparing for Reminders
Building Your Startup: Sending Reminders

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

Final product image
What You'll Be Creating

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

Введение

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

Во второй части я расскажу о более сложных вещах - отладке Ajax и повторной инициализации виджетов Bootstrap после начальной загрузки страницы. Я также поделюсь тем, как я использовал консоль разработчика браузера Google Chrome, чтобы помочь мне определить неработающий код.

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

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

Сегодня я покажу основную проделанную работу.

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

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

Оптимизация планирования UX

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

Справочная информация

Поскольку я ранее встроил Ajax в сайт, у меня были предположения, что будет легко, а что сложно.

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

Редактирование темы собрания

Startups Ajax - The Meeting Subject Panel Loaded via Ajax

Я начал с редактирования панели темы собрания, потому что она состоит из пары статических полей, одного ввода и одного текстового поля. Однако в поле субъекта используется виджет jQuery Typeahead. Виджеты могут усложнить ситуацию, потому что вы должны иметь возможность инициализировать их с учетом Ajax.

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

Предварительная загрузка всего JavaScript

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

Я также расширил определение MeetingAsset.php, добавив в него больше JavaScript:

MeetingAsset загружается файлом Meeting.php:

Загрузка панели темы

Тема и сведения о встрече являются частью _panel_what.php. Ниже я установил его скрытым при загрузке в #editWhat:

Я подключил кнопку редактирования (со значком карандаша) в _panel_what.php, чтобы вызвать функцию переключения JavaScript showWhat(), чтобы показать или скрыть форму редактирования. Вот этот код:

Функция showWhat() из meeting.js показана ниже:

Вот верхняя часть /frontend/views/meeting/_form.php, которую он скрывает и показывает. Здесь появляются поля input и textarea:

Обновление темы и сведений о собрании с помощью Ajax

Когда пользователь обновляет форму совещания, называется следующее Ajax:

Функция actionUpdatewhat находится в MeetingController.php:

Обратите внимание на Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; который настраивает метод Yii для возврата JSON, а не HTML.

Кроме того, функция Meeting: isAttendee() является проверкой подлинности, чтобы убедиться, что вошедший в систему пользователь является участником перед обновлением данных собрания.

Чему я научился

Как видите, для адаптации всех этих частей требуется совсем немного кода.

Одной из проблем является то, что человек пытается переключаться между большим количеством файлов одновременно и двумя разными языками. PHP и JavaScript имеют разные способы ведения дел. Например, объединение строк выполняется с точкой в ​​PHP и знаком плюс в JavaScript. Быстрое переключение между языками, время от времени пытающееся создать строки параметров запроса, может привести к ошибкам.

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

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

Отправка заметок о встрече

Startups Ajax - The Meeting Notes Panel Loaded via Ajax

Заметки о собрании также являются статическими полями текстовой области. Однако может существовать непрерывная цепочка заметок, которые необходимо обновлять на странице, когда они добавляются (например, не только одна тема собрания). И важно сообщить пользователю, что мы уведомим участников о заметке.

Например, я исключил кнопку отправки UX в планировании, чтобы планирование было быстрым и эффективным. Новые пользователи Meeting Planner часто смущаются этим, поэтому я добавил оповещения, чтобы они знали, что мы позаботимся об этом.

Startups Ajax - Meeting Notes Ajax Success Alert

Кодирование заметок через Ajax

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

В приведенном ниже примере оба noteMessage1 и noteMessage2 загружаются как скрытые.

Вот jQuery, который ищет пустую заметку, отображает соответствующую ошибку или отправляет содержимое через Ajax, чтобы запросить обновление потока заметок, и отображает предупреждение об успехе:

Одна из задач связана с обработкой ошибок в Ajax. Это нелегко сделать, и для его поддержки требуется достаточно детальная архитектура везде - а пока я пошел дальше, не обрабатывая такого рода ошибки.

Вот JavaScript-функция displayAlert(), которую я повторно использовал и построил для всех различных панелей и их предупреждающих сообщений:

Обновление темы заметок

Когда пользователь отправляет новую заметку, MeetingNoteController.php actionUpdatethread() вызывается через Ajax. Вот PHP:

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

Сейчас я заменяю весь обновленный поток контента и заменяю всю панель через Ajax. Вот часть _thread.php, которая загружает все заметки, включая новую:

Надеюсь, на сегодня достаточно учиться и пробовать.

Я буквально потратил от пяти до семи долгих дней написания кода, включая всю ночь, чтобы завершить весь код, как в этом, так и в следующем эпизоде. Я не потянул всю ночь. Тем не менее, результаты были вдохновляющими.

Ну и что дальше?

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

В следующем эпизоде ​​я расскажу об остальных функциях, добавив дату и время, и используя инструменты отладки браузера Google Chrome.

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

Предварительный релиз Meeting Planner теперь доступен. Теперь можно поделиться им со своими друзьями и коллегами.

Наконец, я начинаю экспериментировать с 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.