Creación de Formularios y Respuestas con Livewire en PHP

Clase 14 de 26 • Curso de Interfaces Dinámicas con Laravel Livewire

Resumen

¿Cómo podemos crear un formulario de respuestas con Livewire?

Implementar un sistema de respuestas en aplicaciones interactivas requiere comprensión y habilidades técnicas precisas. A continuación, te guiaré paso a paso en la creación de un formulario de respuestas utilizando Livewire, una potente tecnología de Laravel que facilita la gestión de interactividad en aplicaciones web. Vamos a adentrarnos en los componentes básicos necesarios, cómo activar eventos y, por supuesto, cómo asegurar que todo funcione correctamente.

¿Cómo estructuramos el formulario visual?

El primer paso es diseñar y estructurar nuestro formulario. Este se encargará de capturar las respuestas de los usuarios a las preguntas previamente formuladas.

Creamos el formulario:
- Insertamos el formulario en la sección correspondiente de la interfaz. Es posible reutilizar código de formularios anteriores para agilizar el proceso.
- Configuramos un método para manejar el envío, llamado Enviar respuesta, asegurándonos de que la página no recargue al enviar el formulario.
Asignamos propiedades y métodos:
- Utilizamos la propiedad body, que será el contenedor de la respuesta del usuario. Este estará acompañado de la opción defer para optimizar el rendimiento y asegurar que la página no sufra bloqueos durante actualizaciones.
Configuración visual:
- Ajustamos el CSS para que el formulario tenga una anchura máxima utilizando class="full", asegurando así un diseño de interfaz de usuario responsive.

¿Cómo conectamos el formulario con el componente PHP y aseguramos validaciones?

Con la parte visual lista, el siguiente paso es vincular el formulario con nuestro componente PHP. Este se encargará de procesar y validar las respuestas recibidas.

Vinculación con el componente PHP:
- Iniciamos el proceso creando la propiedad body, que contendrá el texto de la respuesta.
- Definimos el método Enviar respuesta, que se activará con cada envío de formulario.
Validaciones y creación de datos:
- Implementamos una validación obligatoria para asegurar que el campo body no esté vacío.
- Utilizamos la autenticación del usuario para asociar cada respuesta al usuario correcto. Esto se hace creando una relación con el ID de la pregunta y agregando el contenido introducido en el campo body.
Restablecimiento del formulario:
- Una vez guardada la respuesta, eliminamos el contenido de body estableciéndolo en un valor nulo, listo para recibir una nueva respuesta.

¿Cómo solucionamos errores comunes y garantizamos seguridad?

Durante la implementación pueden surgir errores que es necesario corregir para el correcto funcionamiento del formulario.

Errores de relaciones:
- Es vital especificar que un usuario puede tener muchas respuestas, igual que una pregunta. Esto se define en la relación modelo, similar a cómo lo hacemos con las preguntas.
Protección contra asignación masiva:
- Laravel bloquea datos que pueden ser asignados masivamente por seguridad. Para resolver esto, configuramos atributos fillable en el modelo, permitiendo solo aquellos explícitamente autorizados, como los IDs y el cuerpo de la respuesta.

¿Cómo verificamos la correcta implementación del formulario?

Finalmente, verificar que todo funcione es crucial. Lo hacemos de la siguiente manera:

Comprobación en la base de datos:
- Revisamos que cada respuesta nueva se almacene correctamente en la base de datos, tanto en el número de respuestas como en su asociación con el usuario y la pregunta correcta.

Este sistema permite una interacción dinámica con los usuarios, haciéndola intuitiva y fiable. Siguiendo esta guía, habrás implementado con éxito un formulario de respuestas en una aplicación Livewire. No dudes en seguir explorando sus capacidades y mejorando la experiencia del usuario. ¡En la próxima clase profundizaremos aún más en la gestión de respuestas!

Alonso Diaz Gutierrez

student•

Voy a añadirlo como aporte, ya que hay varias dudas por lo que veo en la sección de comentarios:

A lo que he encontrado en diversos foros, con livewire 3.X se tiene varios aspectos 2 cambios para la implementación que el profesor Italo crea:

1.- Para el wire:model.defer -> en livewire 3.x esto ya esta incluido por defecto, es decir se deberá usar wire:model nada mas, mi fuente:

Upgrade Guide | Laravel Livewire

2.- Para los que no "refresca" en el campo de respuesta:

El código está correcto, si se elimina el valor pero algo pasa a nivel de componente visual de livewire y tiene que ver con el archivo App.js (app/resources/js/app.js)

Debemos de comentar estas lineas, dejando asi el archivo

import './bootstrap'; /*import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();*/

No logro entender aun cómo funciona esta librería (Alpine), pero veo que su principal uso es para fomularios dinamicos, pienso que esto hace que "rose" con nuestra sentencia de borrado. En livewire 3 se agrega una sentencia de borrado con reset() pero tambien funciona la forma que el profesor italo expone en el video.

Forms | Laravel Livewire

MAXIMILIANO JAYME DAHLQUIST

student•

Efectivamente. Comentando la importación de Alpine funciona hacer el refresh del input usando $this->body="" o refresh('body'); Y además los componentes de Alpine siguen funcionando sin problemas,

Dave Juanes

student•

Gracias querido!!! Me has salvado tanto tiempo sufriendo con eso, creo que algunas clases tendran que ser actualizadas

Javier Cómbita Téllez

student•

Laravel utiliza @csrf el cual es un sistema de tokens para dar seguridad a las solicitudes POST, PUT, DELETE entre otras, ¿Qué pasa con ese token y por qué no lo usamos?

Sammy Joseph Taboada Paz

student•

Cuando se realiza una solicitud de Livewire, se incluye automáticamente un token CSRF en la solicitud.

Jorge Antonio Cruz Bartolon

student•

Tengo el codigo escrito correctamente pero al realizar la escritura de respuesta no me la ejecuta, y ademas me marca un error en el "controlador" la palabra replies en la siguiente: auth()->user()->replies()->create

Jonathan Jose Corro Acosta

student•

Amigo, Llegaste a solucionarlo??? me marca el mismo error..

Julio Bastidas

student•

tengo mismo problema que otros compañeros han reportado, estoy usando livewire 3 y al resetear el valor del body no se borra del input, he verificado que la variable si se limpia pero el input queda con el mismo valor, alguien ha logrado solucionarlo?

Diego Iván Cundapí León

student•

pienso que hay una brecha de seguridad al no ponerle al formulario la directiva @csrf. Que opinan ustedes?

MCETS DEV

student•

Tengo una duda, ocurre que uso la version livewire 3 y al parecer la propiedad defer ya no esta y solo es necesario invocar al modelo, pero este no se esta actualizando en la vista. El body se queda pegado con informacion anterior, sin embargo estuve debbugeando y vi que realmente lo esta limpiando en el backend, alguien pasa por lo mismo?

Cristian Echeverría Cárdenas

student•

Una consulta por si a alguien le ha ocurrido y me pueda ayudar si lo ha solucionado, he buscado una solución en varias partes y aun no lo he encontrado.

He seguido todos los pasos, señalado por el profesor en el curso, después de escribir una respuesta y dar un enter; como lo esperado se guarda bien la respuesta en la base de datos, pero no se limpia el cuadro donde digité la respuesta, es como si no se ejecutara la línea:

// refresh $this->body = '';

de la función postReply. "Estoy usando livewire 3.0"

Saludos

Alonso Ramírez Páez

student•

Mismo problema, no encuentro cómo se resuelve :/

MCETS DEV

student•

llegaste a solucionar, ya que tengo el mismo problema y veo que la propiedad defer no esta en livewire3

Juan David Rueda Quiroga

student•

En livewire 3 podemos hacer validaciones de forma mucho más fácil

class CreatePost extends Component
{
    #[Validate('required')] 
    public $title = '';
 
    #[Validate('required')] 
    public $content = '';
 
    public function save()
    {
        $this->validate(); 
 
        Post::create(
            $this->only(['title', 'content'])
        );
 
        return $this->redirect('/posts');
    }
 
    public function render()
    {
        return view('livewire.create-post');
    }
}
````class CreatePost extends Component{    #[Validate('required')]     public $title = '';     #[Validate('required')]     public $content = '';     public function save()    {        $this->validate();          Post::create(            $this->only(['title', 'content'])        );         return $this->redirect('/posts');    }     public function render()    {        return view('livewire.create-post');    }}`

Vanessa Quintero Torres

student•

A mi me ayudo en la versión livewire añadir en el input wire:key="reply-input-{{ now()->timestamp }}"

Joseph Paucar

student•

Les dejo la forma que encontre de solucionar el refresh para livewire 3.x:

Segun la documentacion para que Alphine refresque un componente se puede usar "$wire.$refresh()", abajo un ejemplo

<button type="button" x-on:click="$wire.$refresh()">

Pero en nuestro caso como usamos el enter para mandar el form, lo qu hize fue agregar esa funcion al "@keydown.enter"

Al final me quedo asi:

<input
  type="text"
  placeholder="Escribe una respuesta"
  class="bg-slate-800 border-0 rounded-md w-full p-3 text-white/60 text-xs mb-3"
  wire:model="body"
  @keydown.enter="$wire.$refresh()"
>
```Espero les sirva, <https://livewire.laravel.com/docs/alpine>

Iván Andrés Pineda Salazar

student•

A los que nos les refresca el body intenten esto:

// Refresh $this->body = ''; $this->thread->refresh(); // Refresh model data

Iván Andrés Pineda Salazar

student•

He notado que muchos han reportado que en Livewire 3.0 el body no se limpia al guardar una respuesta. Personalmente, también estoy utilizando Livewire 3.0 y todo me funciona excelente al seguir el mismo código que el profesor.

Form

<form wire:submit.prevent="postReply"> <input type="text" placeholder="Escribe una respuesta" wire:model.defer="body" class="bg-slate-800 border-0 rounded-md w-full p-3 text-white/60 text-xs"> </form>

Creación de Formularios y Respuestas con Livewire en PHP

Introducción

Desarrollo de un Foro Interactivo con Laravel y Livewire

Integración de Laravel, Livewire y Tailwind CSS para diseño web profesional

Configuración base

Configuración Inicial de Proyectos Laravel con Visual Studio Code

Configuración y Personalización de Plantillas con Tailwind CSS

Creación de Componentes Livewire para Listado de Preguntas

Creación de Categorías Dinámicas con Laravel

Configuración de Preguntas en Laravel: Migraciones y Factory

Diseño de Interfaz para Visualización de Preguntas en Navegador

Configuración y Uso de Comandos Fresh y Refresh en Laravel

Preguntas

Diseño y Configuración de Listado de Preguntas en Laravel

Filtrado Reactivo de Datos con Livewire y PHP

Filtrado de Preguntas por Categoría en PHP

Pregunta

Creación de Componente Livewire para Visualización de Pregunta Individual