Creando y consumiendo nuestro primer formulario de ruta tipo POST en Laravel

Los formularios son una parte importante de prácticamente cualquier aplicaciones web; de muchas formas, en la manera por excelencia que se tiene para interactuar con el usuario, ya sea para crear o editar datos, usarlos como filtros, en un paso por paso y un largo etc. 

Ya conocemos como crear nuestra primera ruta y controlador, nuestro Hola Mundo en Laravel, vamos al siguiente paso, manejar datos de usuarios mediante los formularios.

Los formularios en Laravel, pueden ser directamente un formulario en HTML clásico y agregando la protección de CSRF y poco más.

El manejo de formularios en Laravel también incluye la validación de los datos enviados por el usuario; para esto, se emplean clases adicionales generadas mediante artisan en la cual, tenemos una serie de métodos predefinidos listos para usar o podemos crear las propias; estas validaciones son fundamentales ya que, siempre hay que generar validaciones del lado del servidor.

Laravel proporciona una sintaxis clara y muy potente para definir reglas de validación ya sea a nivel de los controladores o como es clásico, en clases aparte que luego inyectamos en el controlador o netamente referenciamos, con esto, siempre nos aseguramos de que los datos recibidos por el servidor sean correctos.

En esta entrada vamos a aprender a procesar un formulario en Laravel de manera básica, enviar el mismo, consumir los datos desde una función tipo Post y mostrar una página de respuesta; este es el funcionamiento común cuando estamos trabajando con formularios que se encarga de procesar y recibir datos por parte del usuario con el propósito de almacenar los mimos en la base de datos.

En esta entrada seguiremos trabajando con los controladores, rutas y las vistas; por lo que será una entrada similar a la que ya tratamos anteriormente; pero vamos a ir un paso más allá y vamos a trabajar un poco con los formularios para poder enviar información o datos a nuestro controlador y luego poder imprimirlos en la vista; así que vamos a ello.

Crear función y ruta tipo get en nuestro controlador de Home y el formulario

Vamos a usar el controlador que ya definimos anteriormente (HomeController); pero vamos a crear una nueva función que vamos a llamar simplemente contact:

public function contact()
{
   return view('contact');
}

Y la ruta en laravel de tipo GET:

Route::get('/contact', 'HomeController@contact');

Ahora la vista que vamos a desarrollar en la función anterior simplemente será una página llamada:

contact.blade.php

Con un formulario o en el cual podemos colocar el nombre, apellido y un mensaje; como puedes ver:

<form action="contact_post" method="POST">
    <label>Nombre</label>
    <input type="text" name="nombre" id="">
    <br>
    <label>Apellido</label>
    <input type="text" name="apellido" id="">
    <br>
    <label>Mensaje</label>
    <textarea name="mensaje"></textarea>
    <br>
    <input type="submit" value="Enviar">
</form>

Al menos de momento vamos a enviarlo vía get; pudiéramos enviarlo a la misma función que definimos anteriormente, pero lo mejor que podemos hacer es enviarlo a una nueva función; para eso:

    public function contact_post()
    {
        return view('contact');
    }

Crear la función y ruta Post para recibir los datos

Ahora, vamos a definir la función que se encarga de recibir los datos (POST); como puedes suponer si has desarrollado en otros frameworks; en estos casos tenemos que trabajar con la petición del usuario, que en inglés se llama request; en Laravel 10 podemos inyectar la misma, es decir, pasarla como parámetro a la función del controlador; por lo tanto, estamos inyectando la petición de nuestro usuario en la función que se encarga de recibir los datos; te dejo la documentación oficial.

Para que veas que mas puedes hacer con el requests , ya que podemos conseguir información o datos interesantes de nuestro usuario, pero lo que nos interesa en esta oportunidad es obtener los datos.

Y ahora, vamos a imprimir los datos que recibimos de nuestro usuario desde la misma función del controlador:

    public function contact_post(Request $request)
    {
 
        echo "Nombre: ".$request->input('nombre')."<br>";
        echo "Apellido: ".$request->apellido."<br>";
        echo "Msj: ".request('mensaje')."<br>";
 
        return view('contact');
    }

Y si definimos una ruta como la siguiente:

Route::post('/contact_post', 'HomeController@contact_post');

Y si vamos a nuestro navegador:

Veremos que no funciona y nos devuelve un mensaje de tipo 419: 

Protección CSRF en Laravel

Esto se debe a que cuando hacemos una petición de tipo Post, Put Patch o Delete, tenemos que emplear un token para la protección llamado csrt; por lo tanto nuestro formulario queda de la siguiente manera:

<form action="contact_post" method="POST">
 
    @csrf
 
    <label>Nombre</label>
    <input type="text" name="nombre" id="">
    <br>
    <label>Apellido</label>
    <input type="text" name="apellido" id="">
    <br>
    <label>Mensaje</label>
    <textarea name="mensaje"></textarea>
    <br>
    <input type="submit" value="Enviar">
</form>

La protección CSRF (Cross-Site Request Forgery) es un mecanismo de seguridad que se utiliza para evitar ataques CSRF. Laravel proporciona protección contra este tipo de ataques generando un token CSRF que es una cadena aleatoria que se genera para cada petición realizada desde un formulario. Este token es luego comprobado internamente por Laravel para saber que la petición recibida fue generada desde una vista interna de la aplicación en Laravel.

Y si probamos otra vez:

Buala! Allí lo tenemos todo:

Recibir datos vía post desde nuestro formulario

Generalmente, cuando nosotros vamos a enviar datos al servidor se recomienda emplear las peticiones de tipo post, porque los datos van más seguro encapsulado en la petición y no por la URL como es en el caso de los get. Las peticiones de tipo get generalmente se emplean para obtener datos; así que recuerda definir tu formulario con el método post y emplear las rutas correspondientes.

Extra: Variaciones para obtener el request

Tal cual viste anteriormente; existen varias variaciones que podemos usar para obtener el request del usuario; por ejemplo:

$request->input('nombre'); $request->apellido; request('mensaje');

Mostrar los datos del formulario en una vista

Ahora, el objetivo de esta entrada era imprimir los datos enviados por nuestro usuario en una página aparte; para eso vamos a crear una página HTML como la siguiente:

<ul>
    <li><strong>Nombre: </strong>{{ $nombre }}</li>
    <li><strong>Apellido: </strong>{{ $apellido }}</li>
    <li><strong>Mensaje: </strong>{{ $mensaje }}</li>
</ul>

En la cual como puedes ver, simplemente estamos imprimiendo los datos; y ahora, desde nuestra función, le pasamos los datos a este vista:

   public function contact_post(Request $request)
    {
        return view('contact_info', [
            'nombre' => request('nombre'),
            'apellido' => request('apellido'),
            'mensaje' => request('mensaje'),
        ]);
    }

Y con esto, al enviar el formulario este es el resultado:

Notas y consideraciones

• Recuerda que existen múltiples tipos de métodos que podemos emplear con HTTP, Métodos de tipo GET, POST, PUT, DELETE, PATCH y con estos podemos comunicarnos con el servidor, pero solamente podemos emplear peticiones de tipo GET o POST para cuando estamos trabajando con el API de HTML.
• Las rutas de tipo GET las empleamos para consumir recursos desde el navegador, por ejemplo entrar en una página o hacer filtros o búsquedas; ya que son peticiones más inseguras que las del resto de los tipos, por ejemplo las de tipo POST ya que las de tipo GET, los parámetros viajan en la URL del navegador, lo que conlleva a un posible agujero de seguridad si quieres pasar datos sensibles de la app; por lo tanto, para procesar datos mediante formularios generalmente empleamos las peticiones de tipo POST.
• Recuerda emplear la protección CSRF de Laravel para evitar ataques a tu web; esto simplemente es un token que genera Laravel para saber que los datos que está recibiendo son del formulario que forma parte de la aplicación: {{ csrf_field() }}

El siguiente paso, consiste en conectar un proyecto en Laravel con MySQL.

PrepareForValidation, generar datos antes de validar los formularios en Laravel

▶

Usualmente, en las aplicaciones que manejan un campo para el slug, este se genera internamente a partir de otro campo, en este caso, el del título.

En Laravel, podemos realizar este proceso de forma automática mediante la función prepareForValidation(), en la cual hacemos un merge con el slug generado a partir del título, utilizando el helper proporcionado por Laravel: Str::slug().

Recuerda que la función prepareForValidation() se ejecuta antes de realizar las validaciones, por lo que es el lugar ideal para preparar datos automáticamente.

Por lo tanto, debemos colocar este código en ambos archivos de validación que correspondan, tanto para la creación como para la actualización de registros.

app/Http/Requests/Category/Store.php

app/Http/Requests/Category/Put.php

// ***
public function prepareForValidation()
{
    if(str($this->slug)->trim() == "")
    $this->merge([
        'slug' => str($this->title)->slug()
    ]);
}
// ***

Ejemplo de implementación

• Convertimos el título en un objeto Str.
• Aplicamos el método slug() para generar la URL amigable.
• Hacemos merge con el request, asegurándonos de no sobrescribir un slug ya existente.
• Asignamos el resultado al campo slug.

Importante: Siempre usamos el título como referencia, y verificamos si el slug ya existe para no sobrescribirlo cuando el usuario edita el título, evitando así conflictos o duplicados.

Uso de prepareForValidation()

Para automatizar este proceso, contamos con el método prepareForValidation(), el cual se ejecuta antes de realizar las validaciones. Tal como indica su nombre, prepara los datos que vamos a validar, funcionando como una especie de middleware que modifica la data antes de que llegue al controlador.

La lógica básica consiste en verificar si el usuario no ha suministrado un slug. En ese caso, lo generamos automáticamente y hacemos un merge con los datos actuales del request. Recuerda que merge significa mezclar: combinamos el request existente con los cambios que estamos realizando.

Esto nos permite no solo autogenerar el slug, sino también aprovechar este espacio para cualquier otra operación que queramos realizar sobre los datos antes de validarlos.

Consideraciones finales

• Esta optimización no depende de Inertia o Livewire, pero puede emplearse sin problemas en cualquier formulario Laravel.
• Cuando el usuario edita el título, el slug no cambiará si ya existe, garantizando consistencia en las URLs.
• La recarga de la página para reflejar los cambios se puede manejar posteriormente mediante la redirección o actualización de la vista.