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

Programando Con Yii2: Usando 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

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Final product image
What You'll Be Creating

Si te preguntas, "Qué es Yii?, revisa Introducción al Framework Yii, el cuál revisa los beneficios de Yii e incluye un vistazo a Yii2, liberado en Octubre de 2014.

En esta serie de Programando Con Yii2, estaré guiando a los lectores en el uso del Framework Yii2 para PHP. En este tutorial, exploraremos la implementación de páginas interactivas usando Ajax. Específicamente, voy a resaltar el uso de Ajax en dos áreas de la aplicación Planeador de Reuniones, de la cuál estoy escribiendo la serie Construyendo Tu Startup en paralelo.

Primero, revisaremos cómo cargar un Mapa de Google en la página en respuesta al usuario ingresando un lugar específico. Como se muestra abajo, después de ingresar Plum Bistro y dar clic en retorno, el mapa a la derecha carga dinámicamente sin refrescar la página.

Yii Ajax - Google Maps UX Example

Después, te mostraré como registrar los cambios que hace el usuario a una reunión durante la fase de planeación. Planeador de Reuniones facilita a los participantes identificar sus lugares y fechas preferidas y después elegir la final.

Yii Ajax - Meeting Planner UX Example

Ajax hace el proceso mucho más fácil y rápido, permitiendo a la gente deslizar una cantidad de controles para indicar sus preferencias sin actualizar la página.

Solo un recordatorio, yo participo en la sección de comentarios de abajo. Estoy especialmente interesado si tienes aproximaciones diferentes, ideas adicionales o quieres sugerir temas para futuros tutoriales. Si tienes una pregunta o sugerencia de tema, por favor publicala abajo. También puedes contactarme en Twitter @reifman directamente.

Usando Ajax Con Yii

Yii Ajax - Wikipedia Ajax Flow vs HTTP
Por DanielSHaischt, via Wikimedia Commons, CC BY-SA 3.0

Si apenas estás comenzando con Ajax y quieres comenzar despacio, el Playground de Yii tiene dos ejemplos simples de Ajax que te podrían ser útiles para revisar. Uno cambia texto en una página vía Ajax y el otro carga la respuesta a un formulario en la misma página, ambos sin refrescar y cada uno incluye muestras detalladas de código.

Yii Ajax - Yii Playground AJAX Examples

Adentrémonos a nuestros dos ejemplos primarios. Puedes encontrar toda la fuente para estos ejemplos en el repositorio de código de GitHub de Planeador de Reuniones.

Mostrando Mapas de Google Interactivamente

Construyendo el Formulario de Entrada

Cuando se carga inicialmente el formulario Crear un Lugar (/frontend/views/place/create_place_google.php), este incluye el widget de búsqueda en tiempo real de Google Places.

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

Integrando la API JavaScript de Google Places

El formulario carga la librería JavaScript de Google Maps y la conecta al campo de entrada place-searchbox.

El formulario parcial _formPlaceGoogle.php incluye algunos campos ocultos en los cuales se pueden almacenar los resultados del mapa antes de que se envíe toda la página, así como un div oculto para mostrar el mapa vía Ajax.

La tabla Meeting Planner Place guarda el nombre, place_id, location, website, vicinity y full_address de google para usar dentro de la aplicación.

El MapAsset incluido abajo carga nuestro archivo create_place.js el cuál operan entre Google y nuestro formulario; este básicamente maneja la transmisión y respuesta de información vía Ajax.

Nuestro JavaScript Manejador de Ajax

Te guiaré a través de create_place.js por partes. Primero, está setupListeners(), llamados por el formulario padre.

Mientras el usuario comienza a teclear, el widget muestra opciones de lugares del mundo real y el evento place_changed es procesado con cada tecla presionada. El listener keydown de arriba previene que la tecla enter (ASCII 13 o 0xD para los geeks hex) de enviar el formulario.

Asó es como se ve mientras tecleas. Estoy ingresando Plum por Plum Bistro:

Yii Ajax - Google Places Dropdown List

Recolectando el Mapa Resultante y su Información

Si la persona ha seleccionado enter o a dado clic sobre un lugar en el menú desplegable, entonces populateResult() es llamado; si no, no tenemos nada.

Esto llena todos los campos ocultos con información de Google y llama a loadMap() para mostrar el mapa.

Yii Ajax - Google Places Load Map via Ajax

La función loadMap() es muy específica para la API de Google Place y muestra el mapa que ves abajo a la derecha:

La experiencia de usuario es rápida e impresionante. ¡Pruébalo!

Registrar Cambios de Reunión Dinámicamente

Ahora, veamos como registrar cambios en los planes de reunión en tiempo real. No hay API de Google aquí, es más AJAX dentro del Framework Yii.

Mientras la gente agrega fechas, horarios y lugares a sus planes de reunión, verás una página como esta:

Yii Ajax - Meeting Planner Planning View with Sliders

Las columnas You y Them muestran la disposición de cada participante hacia lugares y fechas. El slider más grande Choose permita a la persona tomar la decisión final acerca del lugar y la hora de la reunión.

Hay mucha información de las personas para recolectar y no queremos que cada cambio requiera que se refresque la página. Ajax es la solución ideal para este problema.

Te llevaré a través del código para el panel Reunión-Lugar de arriba. El panel Reunión-Horario de arriba trabaja de manera similar.

Siguiendo el Código

Debido al framwork MVC y mi deseo de rechazar codigos parciales, este flujo podría percibirse com odifícil de seguir. Las funciones helper de PHP y Javascript algunas veces tenían que ser colocadas en archivos padre, no los parciales a los que están más cercanamente relacionados. Trataré de darte un vistazo rápido primero. Te aliento a que lo leas unas cuántas veces para poder entenderlo completamente. Y de nuevo, puedes explorar el código vía GitHub.

Pista: Ten en mente que los nombres de archivos para parciales generalmente comienzan con un guión bajo.

  1. La página Planeador de Reuniones se carga en /frontend/views/meeting/view.php. Este archivo también incluye las funciones helper de JavaScript para manejar el estado de los botones como Enviar y Finalizar (e.j. ¿después de este cambio, el usuario puede ahora mandar esta invitación? Con Planeador de Reuniones, un lugar y un horario generalmente deben ser seleccionados antes de que pueda ser enviado) y mostrar notificaciones visuales de que los cambios han sido enviados por correo a otros participantes cuando el usuario termina.
  2. Cuando se muestra el panel Where para lugares, este carga /frontend/views/meeting-place/_panel.php. Este archivo incluye las funciones helper de PHP showOwnerStatus() y showParticipantStatus(), las cuáles serán reutilizadas por sus hijos, _list.php. Pero, más importante, _panel.php incluye los métodos PHP para el evento switchChange del slider Bootstrap.
  3. El archivo _panel.php usa _list.php para mostrar cada renglón individual para cada lugar. Este archivo genera los sliders Bootstrap llamando las funciones showOwnerStatus() y showParticipantStatus() de calling_panel.php.
  4. Las funciones switchChange harán llamadas Ajax a MeetingPlaceChoiceController.php.
  5. Y finalmente, MeetingPlaceChoiceController.php llama al modelo MeetingPlaceChoice.php que registra los cambios en la base de datos.

Lo siento porque la colocación de código relevante es complicada y dispersa.

Ahora, te guiaré a través de los componentes clave paso a paso.

Código Ajax Paso a Paso

Aquí está Meeting/view.php generando Meeting-Place/_panel.php. Esto muestra el parcial para las filas de posibles lugares y las selecciones de los participantes:

Abajo está el JavaScript relacionado a las acciones que responden a los resultados Ajax pero que no son directamente necesarios para Ajax. No necesitas entender lo que hacen estas funciones para entender este ejemplo de Ajax, pero las incluí ya que son llamadas en respuesta a eventos de Ajax.

Aquí en Meeting-Place/_panel.php, la tabla que muestra lugares y selecciones es creada, invocando _list.php:

Más importante, también incluye el JavaScript de abajo, el cuál usamos para hacer llamadas Ajax cuando el usuario mueve un switch, cambiando su estado. Las funciones de elección corresponder a la opción del slider azul más grande, mientras que las funciones de opción corresponden a los sliders de preferencias.

Las funciones de arriba hacen la llamada a actionSet() en MeetingPlaceChoiceController para responder al cambio de switch usando peticiones Ajax:

Las acciones de controlador que responden vía Ajax necesitan tener un formato de repsuesta JSON (de esta manera Yii sabe que no son para entregar HTML):

Aquí está el método MeetingPlaceChoice::set(), el cual registra las acciones del usuario en la base de datos y crea una entrada MeetingLog, la cuál vigila todos los cambios durante la planeación.

Características Relacionadas con Cambios de Reunión

En el Planeador de Reuniones, mantengo un bitácora de cada cambio. Esto me permite saber cuando han pasado unos cuántos minutos desde el último cambio de una persona y notificar a otros participantes de la reunión. Es un experimento que estoy probando con este servicio, en vez de requerir que los participantes presionen enviar cada vez que quieren hacer cambios.

Sin embargo, esto requiere capacitarlos para que entiendan que está bien cambiarlo y salir, por ejemplo, cerrar la ventana del navegador. Así que las funciones displayNotifier() muestran algunas alertas para ayudar con esto--finalmente puliré esto con el tiempo y las quitaré para usuarios experimentados.

El MettingLog también me permite generar un resumen de texto del historia de planeación de la reunión. Si estás interesado en aprender más acerca de esto, he escrito al respecto en Construyendo Tu Startup: Notificando a la Gente Sobre Cambios de Reunión y Entregando Notificaciones.

¿Qué Sigue?

Espero que estos ejemplos te ayuden a comprender los básicos de Ajax en Yii. Si estás interesado en Ajax más avanzado, estoy planeando incluir formularios cargados con Ajax en la serie Planeador de Reuniones. Y, es cierto que, Ajax es un área en donde la comunidad de Yii no ha compartido muchos ejemplos. Generalmente, Ajax trabaja de manera similar en Yii a como lo hace en PHP y otros Frameworks, así que puedes aprender de ejemplos de comunidades de otros framworks.

Está al pendiente de próximos tutoriales en nuestra serie Programando con Yii2 mientras continuamos sumergiéndonos en diferentes aspectos del framework. También deberías querer revisar nuestra serie Construyendo Tu Startup con PHP, la cual usa una plantilla avanzada de Yii2 mientras construimos una aplicación del mundo real.

Si quieres saber cuando llegue el siguiente tutorial de Yii2, sígueme @reifman en Twitter o revisa mi página de instructor. Mi página de instructor incluirá todos los artículos de esta serie tan pronto sean publicados.

Enlaces Relacionados

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.