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

Construyendo tu Startup: Formularios Ajax Dinámicos para Programación

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

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

Final product image
What You'll Be Creating

Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En esta serie, te guío a través de lanzar una startup desde concepto hasta realidad usando mi app Planificador de Reuniones como un ejemplo de la vida real. Cada paso a lo largo del camino, liberaré el código de Planificador de Reuniones como ejemplos de código abierto de los cuales puedes aprender. También abordaré temas de negocios relacionados con startups conforme vayan surgiendo.

Introducción

En el tutorial de hoy, te guiaré a través del conjunto inicial de cambios exhaustivos para la interfaz de programación de reuniones. Mi meta era usar Ajax para hacer posible la programación de actividades sin referscar la página. Algunos de estos aspectos resultaron ser simples y otros bastante complicados. En este episodio, me enfocaré en las partes simples: cómo construir de manera básica peticiones Ajax UX en tu aplicación php basada en Yii.

En la parte dos, cubriré las cosas más difíciles--depurar Ajax y reinicializar widgets de Bootstrap después de la carga inicial de la página. También compartiré cómo usé la consola de desarrollador del navegador Google Chrome para ayudarme a identificar código roto.

Francamente, mientras que las actualizaciones iniciales resultaron bien, me encontré con muchos bloqueos y dificultades en que hubo momentos en donde pensé que tendría que abandonar mi meta para la liberación beta.

Extrañamente, hubo senderos de código que parecieran acercarme a la solución pero entonces me encontraba con un bloqueo insuperable--y tenía que volver a empezar desde cero con una nueva aproximación. Por último, fui capaz de completar exitosamente la programación completa por medio de Ajax para la liberación beta.

Sígueme hoy mientras te guío a través de la parte principal del trabajo.

Si no has probado Planificador de Reuniones aún, ve y programa tu primera reunión con las nuevas capacidades interactivas. Participo en la sección de comentarios de abajo, ¡así que dime que piensas! También puedes contactarme en Twitter @reifman. Estoy especialmente interesado si quieres sugerir nuevas características o temas para futuros tutoriales.

Como recordatorio, todo el código para Planificador de Reuniones está escrito en el Framework Yii2 para PHP. Si quisieras aprender más acerca de Yii2, revisa nuestra serie paralela Programando Con Yii2.

Coordinando la UX de Programación

Mi metal principal para esta etapa del producto fue implementar todas las características de programación clave y eliminar el refrescar la página requerido actualmente para editar el asunto, agregar participantes, agregar fechas, lugares y notas.

Antecedentes

Mientras que he construido algo de Ajax en el sitio antes, tuve algunas ideas sobre qué iría bien y qué sería difícil.

Únete a mi mientras te guío a través de los elementos iniciales de 'ajaxificar' la programación.

Editando el Asunto de la Reunión

Startups Ajax - The Meeting Subject Panel Loaded via Ajax

Comencé editando el panel del asunto de la reunión porque consiste en un par de campos estáticos, un input y un textarea. Sin embargo, el campo de asunto usa un widget Typehead de jQuery. Los widgets pueden complicar las cosas porque necesitas poder inicializarlos con Ajax en mente.

En ese caso, pre-cargo el formulario de manera oculta y cargo la librería del widget junto con este. Realmente no tiene complejidad. En el siguiente episodio, verás que el widget Bootstrap Switch en la fecha en los paneles de fecha y lugar lo hacen mucho más difícil.

Pre-cargando Todo el JavaScript

Así que, para simplificar el 'ajaxificar' cada panel de programación (participantes, asunto, fechas, lugares y notas), los cargaría por adelantado y expandiría el contenido inicial de meeting.js.

También expandí la definición MeetingAsset.php para incluír más JavaScript:

Meetingasset es cargado por el archivo view.php de la Reunión:

Cargando el Panel de Asunto

El asunto y los detalles de la reunión son parte del parcial _panel_what.php. Abajo, lo establecí para ser oculto en la carga dentro de #editWhat:

Enganché el botón de editar (con icono de lápiz) en _panel_what.php para llamar una función toggle JavaScript showWhat() para mostrar u ocultar el formulario de edición. Aquí está ese código:

La función showWhat() de meeting.js se muestra abajo.

Aquí está la parte superior de /frontend/views/meeting/_form.php que se oculta y muestra. Aquí es donde aparencen los campos input y textarea:

Actualizando el Asunto y los Detalles de la Reunión vía Ajax

Cuando el usuario actualiza el formulario de reunión, el siguiente Ajax es llamado:

La función actionUpdatewhat está dentro de MeetingController.php:

Nota Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; el cuál configura un método Yii para regresar JSON, no HTML.

También, la función Meeting:isAttendee() es una comprobación de autentificación para asegurarse de que el usuario con sesión iniciada es un participante antes de actualizar los datos de la reunión.

Lo Que He Aprendido Hasta Ahora

Como puedes ver, toma algo de código 'ajaxificar' estas piezas.

Uno de los retos es ser un humano tratando de cambiar entre tantos archivos al mismo tiempo y dos lenguajes diferentes. PHP y JavaScript tienen dos maneras diferentes de hacer las cosas. Por ejemplo, concatenar cadenas de texto se hace con un punto en PHP y un signo de suma en JavaScript. Cambiar rápidamente entre lenguajes ocasionalmente tratando de construir cadenas de consulta de parámetros puede llevar a errores.

También está la necesidad de comprobaciones intensivas de seguridad dentro de funciones de Ajax basasas en PHP. En el tutorial de hoy, ves el comienzo de esto, pero tendré que agregar más comprobaciones exhaustivas antes de tener el código completamente funcional.

Y finalmente, según avancé, intenté reusar notaciones y aproximaciones estructurales para que todo el código tuviera una composición y terminología similar--a pesar de trabajar con diferentes elementos de datos.

Enviando Notas de Reuniones

Startups Ajax - The Meeting Notes Panel Loaded via Ajax

Las notas de reuniones también son campos textarea estéticos. Sin embargo, puede haber un hilo de notas en marcha que necesita ser actualizado en la página cuando una es agregada (ej. no solo un asunto de reunión). Y es importante decirle al usuario que notificaremos a los participantes acerca de la nota.

Por ejemplo, he eliminado el UX del botón enviar en la programación para que la planeación sea rápida y eficiente. Usuarios nuevos de Planificador de Reuniones están confundidos regularmente por esto así que he agregado alertas para hacerles saber que nos encargaremos de ello.

Startups Ajax - Meeting Notes Ajax Success Alert

Codificando las Notas vía Ajax

Primero, está el _panel.php para la nota de la Reunión. Pre-construí alertas de error ocultas que pueden ser mostradas vía jQuery según se necesiten. Planeo simplificar y estandarizar esto en el futuro, incluyendo hacer más fácil usar localización para los mensajes.

En el ejemplo de abajo, ambos noteMessage1 y noteMessage2 son cargados como ocultos.

Aquí está el jQuery que busca una nota en blanco, muestra un error apropiado o envía el contenido vía Ajax para pedir una actualización de hilo de notas y muestra una alerta de éxito:

Una de las tareas por hacer ahí es manejar errores en Ajax. No es fácil hacer esto y requiere una arquitectura bastante detallada en todos lados para soportar esto--por ahora, he continuado sin manejar este tipo de error.

Aquí está la función JavaScript displayAlert() que he reutilizado y construido sobre los diversos paneles y sus mensajes de alerta:

Actualizando los Hilos de Notas

Cuando un usuario envía una nueva nota, MeetingNoteController.php actionUpdateThread() es llamado vía Ajax. Aquí está el PHP:

Algunas veces experimenté simplemente regresando el último objeto de contenido (ej. la nota más nueva) e insertando antes de los objetos previos. Sin embargo, esto resulto problemático, especialmente con objetos de tiempos y lugares que aparecieron en filas de tabla.

Por ahora, reemplazo el hilo de contenido actualizado completo y reemplazo el panel completo vía Ajax. Aquí está el parcial _thread.php que carga todas las notas, incluyendo la nueva:

Espero que eso sea suficiente para estudiar y probar por hoy.

Literalmente pasé alrededor de cinco a siete largos días de codificar incluyendo una demañanada para completar todo el código detrás de este episodio y el siguiente. No me había desvelado en años. Aún así, los resultados han sido inspiradores.

Así qué, ¿Qué Sigue?

Espero haya sido de ayuda para ver los básico del desarrollo Ajax para Yii y PHP. Ciertamente aprendí mucho durante este proceso y los cambios han hecho programar reuniones increíblemente más rapido y fácil que antes.

En el siguiente episodio, cubriré las características restantes agregando fechas y lugares y el uso de las herramientas de depuración del navegador Google Chrome para asistirme.

Mientras esperas por el siguiente episodio, programa tu primera reunión y pruba las características de programación de Ajax. También, apreciaría si compartes tu experiencia abajo en los comentarios y siempre estoy interesado en tus sugerencias. También puedes contactarme directamente en Twitter @reifman.

La versión de vista previa de Planificador de Reuniones ya está disponible. Ya puedes compartirlo con tus amigos y colegas para que lo usen.

Finalmente, estoy comenzando a experimentar con WeFunder basado en la implementación de las nuevas reglas de crowdfunding de SEC. También puedes seguir nuestro perfíl ahí si quisieras. También escribiré más acerca de esto en un tutorial futuro.

Espera tutoriales por venir en la serie Construyendo Tu Starup Con PHP.

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.