Creando instagram (versión web) con laravel #6: Actualizar bio, nombre y nombre de usuario.
En este post mostrare como habilitar la función de actualizar la bio, el nombre y el nombre de usuario de la manera mas simple posible.
El repositorio para seguir el código esta en: https://github.com/Brandonxy/imagegram.
La vista
En profile.blade.php agregamos lo siguiente:
Primero agrega el nombre de usuario al costado del nombre, luego un link al formulario donde se actualizaran los datos de perfil con la ruta route('profile.edit').
Añadimos una vista dentro de user/edit_profile.blade.php para mostrar el formulario de edición:
Nota: aquí también vamos a actualizar la foto de perfil pero es básicamente copiar lo del post anterior con una pequeña modificación.
Tenemos un formulario que apunta a la ruta profile.update que es donde se guardarán los cambios en la base de datos. Después tenemos la misma lógica y el mismo código de la foto de perfil que tenemos en la vista profile.blade.php, luego los input respectivos para el nombre, nombre de usuario y bio, ademas abajo de cada uno tenemos los mensajes de error para cada input en caso de haber alguno:
Para finalizar con las vistas justo antes del botón actualizar el siguiente código:
Este mensaje lo enviaremos mas adelante en este post desde el controlador ProfileController cuando guardemos los datos exitosamente en la base de datos.
La ruta
En el archivo de rutas agregamos 2 nuevas rutas, una para el formulario y la otra para el controlador que se encargara de guardar los cambios:
El controlador
En el ProfileController añadimos 2 nuevos métodos, el primero muestra la vista para editar el perfil (edit_profile.blade.php) y el segundo guarda los cambios en la base de datos:
Primero comprobamos que el input de la foto de perfil tenga algún archivo, si es asi actualizamos la foto de perfil (mismo proceso del post anterior). Luego actualizamos los datos del usuario de manera muy simple asignando sus respectivos valores obtenidos del formulario y para terminar el método re-dirigimos al mismo lugar con un mensaje flash de éxito.
El método es muy simple y la lógica de validación se encuentra en UpdateProfile que es el FormRequest en los parámetros del mismo, aquí el FormRequest:
Las reglas son simples el nombre, nombre de usuario, bio son obligatorias y la foto de perfil debe ser una imagen (jpg, png, etc.). No ponemos como required la foto de perfil porque si cambiamos 1 solo dato como por ejemplo el nombre, la validación nos daría error constantemente y no podríamos actualizar nuestro perfil sin subir una. Finalmente los que estan con required es para que no se puedan dejar en blancos información en la base de datos.
Conclusión
Ahora deberías tener un formulario funcionando que te permita actualizar los datos del perfil y con las validaciones necesarias, teniendo en cuenta que este formulario se puede mejorar añadiendo aún mas validaciones para cubrir todos los casos que la aplicación web requiera. En el próximo post se verá como subir fotos (posts) para visualizarlas en el perfil del usuario.
El repositorio para seguir el código esta en: https://github.com/Brandonxy/imagegram.
