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

Construyendo tu Startup con PHP: Configuraciones de Usuario, Imágenes de Perfil y Detalles de Contacto

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Access Control, Active Record Relations and Slugs
Building Your Startup With PHP: Scheduling a Meeting

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product image
What You'll Be Creating

Este tutorial es parte de la serie Construye tu Startup con PHP en Tuts +. En esta serie, te estoy guiando a través del lanzamiento de una startup desde el concepto a la realidad utilizando mi aplicación Meeting Planner como un ejemplo de la vida real. A cada paso en el camino, liberaremos el código de Meeting Planner como ejemplos de código abierto con los que se puede aprender. También veremos las cuestiones de negocios relacionados con la puesta en marcha que puedan surgir.

En este tutorial vamos a construir las áreas clave alrededor de los datos del usuario para un uso más amplio a través de la aplicación:

  1. Datos de contacto: el número de teléfono del usuario y las direcciones de videoconferencia para reuniones virtuales
  2. Configuración de Usuario: para rastrear las preferencias del usuario dentro de la aplicación
  3. Imágenes de Perfil: para permitirle al usuario subir una foto que podamos utilizar en las páginas de reuniones

Todo el código para el Meeting Planner está escrito en el Framework de Yii2 para PHP, que tiene incorporado soporte para I18n. Si deseas más información sobre Yii2, revisa nuestra serie paralela Programación con Yii2 en Tuts +.

Simplemente un recordatorio, participo en las cadenas de comentarios más abajo. Me interesa especialmente si tienes diferentes enfoques o ideas adicionales, o si quieres sugerir temas para futuros tutoriales. 

Detalles de Contacto

El propósito de los detalles de contacto es permitirle a los usuarios proporcionar números de teléfono y direcciones de videoconferencia para reuniones virtuales. El número de teléfono es también útil en el pre y el post de la reunión.

Construir esta Característica es Relativamente Sencillo. Como lo hicimos en anteriores tutoriales, usamos el generador de código de Yii, Gii, para construir el modelo para los archivos UserContact y CRUD.

También actualizamos la barra de navegación para incluir un enlace a la función de contacto del usuario. En frontend/views/layouts/main.php:

También se puede ver un enlace arriba de la función de Configuración de Usuario que será descrito más abajo.

Agregar un menú desplegable de selección de tipos es una extensión de modelo común que utilizamos para hacer formularios más amigables. Mira el menú desplegable de Tipo de Contacto a continuación:

Add Your Contact Form with Type Dropdown

Aquí están las definiciones del tipo de modelo y los métodos auxiliares para permitirle a los amigables menús desplegables para contactar los tipos de servicios:

Aquí está el menú desplegable implementado en el formulario:

Esos auxiliares de tipo, son constructores comunes en todo el Meeting Planner.

Ahora, movámonos en las configuraciones del usuario.

Configuraciones del Usuario

En cuanto el Meeting Planner crece en funcionalidad se vuelve importante permitirle a los usuarios personalizar funcionalidades con un conjunto de preferencias. Construimos un subsistema de configuraciones de usuarios para administrar esas preferencias en la aplicación.

La tabla UserSetting es un poco diferente de los otros modelos en los que cada usuario sólo tiene un registro, y cada registro tiene muchos campos que representan configuraciones particulares del usuario. Esto es diferentes desde cuando el usuarios agrega entradas de contacto, donde cada usuario tiene muchos registros los cuales representan cada uno las entradas del contacto.

Cuando el usuario modifica sus configuraciones, actualizamos sus configuraciones de registros individual. También podemos extender los campos de la tabla para soportar opciones adicionales.

Necesitaremos crear funciones auxiliares que carguen las configuraciones del usuario y creen un registro por defecto de ellos si no existen.

También necesitamos crear un formulario para hacer que la configuración de los parámetros sea un proceso fácil. Podemos usar los diagramas de Bootstrap y los widgets de extensiones de Yii2.

Eligiendo Nuestras Primeras Configuraciones de Usuario

Mientras que el número de configuraciones incremente en el tiepo, revisemos algunas con las cuales queremos comenzar:

  • Foto de Perfil del Usuario( Ruta a un archivo que ellos cargarán)
  • Recibir recordatorios el día antes de la reunión
  • Recibir recordatorios en los días previos a una reunión
  • Compartir los datos de contacto con los participantes de la reunión
  • Bloquear todos los correos del sistema

Podemos crear la tabla de Configuraciones del Usuario con una migración de Active Record y extenderla con una migración actualizada más tarde.

Aquí está la migración con los campos de cuatro configuraciones - nota la relación a la tabla User

Corre la migración

Escribiendo el Código

Podemos utilizar Gii para generar los archivos CRUD y el modelo para nosotros. Por supuesto, tendremos que modificar el CRUD para mostrar solamente el registro del usuario actual.

Estos son los ajustes para el Generador de Modelo:

Yii Code Generator Gii with Model UserSetting

Aquí están las configuraciones para el controlador CRUD:

Yii Gii Code Generator CRUD for User Settings

Cuando el usuario hace clic en Configuración en la Barra de Navegación, queremos mostrar realmente la página de actualizar configuraciones. Construyamos algunos auxiliares que revisen el registro de las configuraciones del usuario y los creen si no existen.

Este es el redireccionamiento del índice para actualizar la acción:

El método inicializar crea un registro para el usuario activo y establece todas las configuraciones por defecto

Personalizando el Formulario de Configuraciones

Tenemos que reemplazar algo del código auto-generado del formulario para incluir otras cajas de selección y lista desplegable (como lo hicimos con el Tipo UserContact arriba). Me gusta que la funcionalidad de casilla de verificación de Yii incluya la posibilidad de especificar si establecer o no losvalores. Por lo general, las casillas de verificación del formulario web devuelve un elemento vacío (existe) para verdadero o no retorno (no existe) para falso.

Este es el resultado final:

Meeting Planner Update Your Settings

Vamos adelante y extendamos UserSetting para soportar las a fotos de perfil.

Imágenes de Perfil

Con el fin de mostrar las fotos de los usuarios en los lugares de reuniones, necesitamos soportar que los usuarios carguen una foto (en la mayoría de los casos). Alternativamente, al menos por defecto, podemos usar el servicio de Gravatar el cual asocia una foto de perfil con la dirección de correo del usuario. Cargar y guardar archivos en un servidor siempre es una tarea de desarrollo web muy detallada y delicada  que les presentaré en breve.

Configurando los Tabs de Bootstrap

Primero, comencemos añadiendo tabs para el formulario de configuraciones del usuario el cual separará las configuraciones generales de las imágenes de perfil. Usando las definiciones nav-tab style de Bootstrap, hemos regresado con eso:

Se verá como esto:

User Settings with Bootstrap Tabs

Por defecto, si no hay ninguna imagen subida, intentaremos mostrar el Gravatar del usuario.

Extensiones útiles de Yii2 para Imágenes de Perfil

Hay cuatro extensiones de Yii2 que quiero incluir para dar soporte a la imagen de perfil:

  1. Gravatar de Carsten Brandt para mostrar Gravatars
  2. Entrada de Archivo de Kartik Visweswaran para soportar la carga de imágenes
  3. Yii Imagine para escalar las imágenes de diferentes dices.
  4. Administrador de Recursos 2amigos para un futuro almacenamiento en Amazon S3

Visweswaran y los 2Amigos han producido un buen número de extensiones de Yii2 que son súper útiles y generalmente dan una documentación sólida también.

Entonces, añade estas extensiones a tu archivo composer.json:

Y actualiza composer:

Usando Imágenes de Gravatar

Si no hay una imagen de perfil configurada, mostraremos el gravatar del usuario. El servicio de Gravatar hace referencia a la dirección de correo del usuario registrado. Este es el código para mostrar el Gravatar:

Se verá algo como esto. Si el usuario ha configurado un Gravatar, verás su imagen elegida.

Displaying a Gravatar with Yii2

Cargando una Imagen de Perfil

Para cargar imágenes, usaremos el excelente widget file input de Kartik. Él también ofrece una excelente explicación de cómo usarlo.

Este es el código para nuestro formulario de actualización el cual mostrará el widget en el panel de la foto:

La parte superior del formulario incluye enctype para los datos de formulario de varias partes:

El formulario se ve algo así:

Yii2 File Input Extension - Upload a Profile Image

También agregamos reglas al modelo UserSetting para restringir las cargas a jpg, gif y png, y para limitar el tamaño de la carga a 100kb.

Por cierto, los validadores de Yii2 tienen una increíble amplitud de posibilidades para muchas operaciones comunes que los desarrolladores web normalmente pueden construir a mano. Intentaré explorar esto en un futuro tutorial de Programación con Yii2.

Aquí está el código que controla el mensaje desde el formulario de actualización. En general, es probablemente una buena idea rehacer este código en los métodos del modelo y reducir la cantidad en la complejidad en los controladores.

Las imágenes deben ser almacenadas donde puedan ser vistas por el servidor web. He creado un directorio de uploads/avatar en el árbol /frontend/web.

Escalando Imágenes con Imagine

Realmente queremos guardar la imagen en tres tamaños: tamaño completo, un pequeño cuadrado para mostrar en la barra de navegación o en las vistas de lista y un cuadrado de tamaño mediano para las páginas de la reunión.

Vamos a utilizar la extensión Imagine de Yii2 para escalar las imágenes; esto extiende la librería de manipulación de imágenes de Imagine para PHP.

Aquí está el código que escala y guarda los tamaños adicionales de la imagen:

Este es el formulario terminado mostrando la imagen que se muestra en la página de Perfil de usuario:

Meeting Planner Update Your Settings with Tabs and Profile Image

Removiendo las Imágenes sin Utilizar

Cuando un usuario carga una nueva foto, necesitamos eliminar la imagen vieja y sus copias acompañantes. Expanderemos el controlador para llamar un nuevo método de borrado:

Este es el método deleteImage en UserSetting:

Usando Amazon S3 para Almacenar las Imágenes

El almacenamiento de las imágenes del usuario cargadas en nuestro servidor web puede crear complejidades. Esto significa que además de realizar copias de seguridad de MySQL, necesitamos siempre hacer una copia de una parte del sistema de archivos. Esto puede complicar el restablecimiento del servidor, las operaciones y las migraciones. Esto también pone una carga en nuestro stack de LAMP siempre que las imágenes sean cargadas.

Usando Amazon S3 se separa esta tarea del servidor web principal y puede mejorar el rendimiento y simplificar la administración de los servidores con el tiempo, especialmente alrededor de la portabilidad, la escalabilidad y las actualizaciones. Analizaré carga y el acceso a los archivos de Amazon S3 en un futuro tutorial.

¿Qué sigue?

Espero que hayas aprendido algunos aspectos de Yii, ActiveRecord, Bootstrap, formularios, carga de imágenes y manipulación de imágenes. He disfrutado trabajar con algo de los nuevos widgets de JQuery disponibles como extensiones de Yii. Revisa los tutoriales siguientes en nuestra serie Construye tu Startuo con PHP, hay un montón de características divertidas en camino. ¡De hecho, ya estamos cerca de la posibilidad de agendar nuestra propia reunión.!

Por favor, ten la libertad de agregar tus preguntas y comentarios abajo; generalmente participo en la discusión. También puedes encontrarme en Twitter @reifman o envíarme un correo electrónico directamente.

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.