Desarrollo de Formularios Seguros en Laravel

Clase 19 de 31 • Curso de Introducción a Laravel 9

Resumen

¿Cómo se desarrolla un formulario seguro en Laravel?

El desarrollo de formularios en Laravel requiere asegurar no solo la estética, sino también la seguridad y funcionalidad. En este contenido, explorarás cómo estructurar un formulario usando las directrices correctas en Laravel, incluyendo el uso de CSRF y las clases de diseño de Tailwind CSS.

¿Por qué es importante usar CSRF en los formularios?

La etiqueta @csrf es fundamental para la seguridad en Laravel. CSRF (Cross-Site Request Forgery) protege tu aplicación asegurándose de que todas las solicitudes de formulario provengan de fuentes legítimas.

<form method="POST" action="/route">
    @csrf
    <!-- Otros elementos de formulario -->
</form>

Laravel genera un token que valida si la solicitud es legítima, protegiendo así contra ataques que intentan hacerse pasar por el usuario.

¿Cómo se estructuran los controles del formulario?

El diseño y funcionalidad del formulario se manejan mediante etiquetas HTML con clases de Tailwind CSS para asegurar un diseño atractivo y fluido.

Input para título:

Utilizando el nombre "título", se aplican clases para estilizar el input para que sea redondeado, con un borde gris de nivel 200 y una anchura máxima.

<div class="uppercase text-gray-700 text-sm">Título</div>
<input type="text" name="titulo" 
       class="rounded border-gray-200 w-full mb-4"
       value="{{ old('pos.titulo') }}">

Textarea para contenido:

Se configura un textarea para el contenido, eliminando atributos innecesarios y ajustando las filas.

<textarea name="body" rows="5"
          class="rounded border-gray-200 w-full mb-4">{{ old('pos.body') }}</textarea>

¿Cómo se mejora la navegación y funcionalidad en el formulario?

Un formulario debe permitir fácil navegación entre vistas, por lo que implementamos accesos directos y mejoramos la experiencia del usuario mediante un diseño centrado y alineado.

Enlace para regresar: Con clases de diseño, se crea un botón para regresar al índice.

<div class="flex items-center">
    <a href="{{ route('index') }}" 
      class="text-indigo-600">Volver</a>
</div>

Botón de envío: Se incorpora un botón de tipo "submit," utilizando clases para mantener estética y funcionalidad consistente.
```
<input type="submit" value="Enviar" class="bg-blue-500 text-white rounded px-4 py-2">
```

¿Cómo manejar errores comunes al crear un formulario desde cero?

Un error frecuente al crear un formulario es la ausencia de inicialización de variables necesarias. En la creación, si no existe una variable como pos, el sistema podría fallar.

$value = isset($pos) ? $pos->title : '';

Se recomienda establecer valores predeterminados o vacíos para evitar que el sistema falle al esperar datos inexistentes durante la creación de nuevos registros.

Consejos prácticos para el desarrollo de formularios en Laravel

Utiliza CSRF en tus formularios para mantener la seguridad de las solicitudes.
Aprovecha Tailwind CSS para el diseño de componentes, asegurando un diseño atractivo y la reutilización de clases.
Implementa redirecciones y accesos rápidos para mejorar la usabilidad y navegación en la aplicación.
Manejo de errores con condiciones y valores predeterminados, lo que evita fallos al crear o editar entradas nuevas.

El desarrollo efectivo de formularios en Laravel puede parecer complicado, pero al seguir estas prácticas lograrás un diseño efectivo, seguro y optimizado. ¡Sigue practicando y no dudes en innovar!

Julian David Alzate Cuervo

student•

Este curso esta genial, ojalá sigan haciendo mas cursos de laravel, y con el profesor italo

Juan Pablo Campuzano Monsalve

student•

Ya van dos años de este curso :c. Aún sigue siendo muy bueno a nivel de contenido pero ojalá hagan uno de Laravel 10

Daniel Martínez Suarez

student•

Si al momento de imprimir el valor del post tanto de title como de body se le antepone un @ no será necesario mandar Post $post en la función create(), por ejemplo:

Funciones de edit() y create():

public function create(){
    return view('posts.create');
}

public function edit(Post $post){
	return view('posts.edit', compact('post'));
}

Código del archivo _form.blade.php():

<label class="uppercase text-gray-700 text-xs">Título</label>
<input type="text" name="title" class="rounded border-gray-200 w-full mb-4" value="{{ @$post->title }}">

<label class="uppercase text-gray-700 text-xs">Contenido</label>
<textarea name="body" id="" rows="5" class="rounded border-gray-200 w-full mb-4">{{ @$post->body }}</textarea>

<div class="flex justify-between items-center">
    <a href="{{ route('posts.index') }}" class="text-indigo-600">Volver</a>
    <input type="submit" value="Enviar" class="bg-gray-800 text-white rounded px-4 py-2">
</div>

Tengo mi código así y funciona sin problemas. 😁

Anabel Canseco Peralta

student•

excelente aportación

Fabiola Jessica Huancollo Chambi

student•

gracias :O

Abraham Gonzalez

student•

Importante, tuve un error con Create y no hallaba cual era. Revise algunos foros y me percate que al momento de hacer un CRUD con laravel las rutas deben estar en plural. Así que dejo un breve guia:

Controller: Singular Model: Singular Routes: Plural (sobretodo si usas CRUD)

Espero que les sirva y no pasen 2 horas (como yo) buscando que esta mal.

Joel Dominguez Merino

student•

Gracias por el aporte @Abraham! Me han pasado errores de ese tipo y de tanto moverle a nombres de archivos es que se soluciona, esto sin duda es importante tenerlo presente.

Ya lo tengo anotado para evitar estos errores por que uno se pone a buscar error en el código y no lo haya hasta que se topa con que fue un error en el nombramiento de los archivos :(

Owen Enríquez

student•

Son las convenciones que tiene Laravel y Eloquent por defecto, por lo que si las sigues todo será mucho más fácil, en mi caso (sin saber) no seguí ninguna convención y pude adaptar el código sin usar las convenciones predeterminadas, pero aún así recomiendo seguirlas, ya que como dices, te ahorras muchos dolores de cabeza.

Sergioluis Mendiola

student•

Para el botón de envío se puede usar también el isset($post) y así variar el contenido o texto del botón para los casos de edición o creación, ya que si se recibe información de $post, significa que se desea editar, y en caso contrario, estarémos creando una nueva publicación.

<div class="flex gap-4 items-center justify-between">
    <a href="{{ route('posts.index') }}" class="text-indigo-600">Volver</a>
    <button type="submit" class="bg-gray-800 text-white rounded px-4 py-2">{{ isset($post) ? 'Editar Post' : 'Crear Post'}}</button>
</div>

diegogutierrezrazo.95

student•

tengo problemas para que me carguen los estilos en los tags de input y button, a alguien mas le ha pasado y lo ha podido solucionar?

Liann Melanny Huaman Cunyas

student•

Si , lo solucione abriendo dos terminales a la vez en una terminal pones el comando

php artisan serve

y en la otra terminal

npm run dev

npm run build

Christian Alvarenga

student•

Por algún motivo a mi me sigue arrojando el mismo error de Undefined variable $post al momento de querer crear un post, por más de que agregue el parámetro de $post en el método de create y mi solución fue esta:

Para el input

<input type="text" name="title" id="title" class="rounded border-gray-200 w-full mb-4" value="{{ isset($post) ? $post->title : '' }}" 
/>

Para el textarea

<textarea name="body" id="body" rows="5" class="rounded border-gray-200 w-full mb-4">{{ isset($post) ? $post->body : '' }}</textarea>

Kenneth Angulo L

student•

Hola companero, ese error te indica que la vista no esta recibiendo la variable post. . Para el ejercicio que hacemos esa variable la recibe especificamente el formulario de editar. . La solucion que propones esta bien.

value="{{ isset($post) ? $post->title : '' }}"

Eso mismo lo logras usando la funcion old(). con la ventaja que old te ayuda a no perder el texto escrito en el forumalio en caso de error

value="{{ old('title', $post->title) }}"

Si deseas hacer lo mismo usandotu validacion deberias escribir un codigo mas largo, asi:

value="{{ isset($post) ? $post->title : old('title') }}"

Gustavo Pú

student•

una exelente solucion!

luis juarez

student•

Como puedo checar ese error!!!

José Bastidas

student•

Asegúrate de que estés pasando la variable $post al formulario.

Luis Fernando Alfonso Saavedra

student•

el profesor esta mal para el crear solo pasale una instancia vacia de POST y listo no tienes que hacerlo como el lo hizo ya que no estas llamando ningun post

return view('posts.create',['post' => new Post()]);

ALEXANDER TOMAS

student•

excelente clase

Andres Felipe Gutierrez Jimenez

student•

Si quieren ver los cambios de html y el front en general usen npm run dev para verlos apenas guarden, mientras también tienen activo el comando php artisan serve en otro terminal

Ruben Gallegos Hernandez

student•

Una opción que hice al mostrar el formulario de posts fue usando Null coalescing operator. Ya que si el primer valor es nulo, entonces mostrará el siguiente dato si existe:

<label for="" class="uppercase text-gray-700 text-xs">Título</label>
<input type="text" name="title" class="rounded border-gray-200 w-full mb-4" value="{{$post->title ?? old('title') ?? ''}}">

<label for="" class="uppercase text-gray-700 text-xs">Contenido</label>
<textarea rows="10" name="body" class="rounded border-gray-200 w-full mb-4">{{$post->body ?? old('body') ?? ''}}</textarea>

Ricardo Andres Zambrano Cuaicuan

student•

Buen aporte

Gustavo Pú

student•

exelente solución !

Eduardo Miguel Ruiz

student•

¿el conocimiento que se adquiere en este curso servira para laravel 11?

Desarrollo de Formularios Seguros en Laravel

Introducción a Laravel

Desarrollo web con Laravel 9: instalación y configuración inicial

Estructura de Carpetas en Proyectos Laravel

Fundamentos de Laravel

Comandos básicos de Artisan en Laravel

Desarrollo de Rutas Web en Laravel: Creación y Configuración

Configuración de Vistas en Laravel con Blade

Creación de Plantillas en PHP para Vistas Eficientes

Controladores en Laravel: Organización de Rutas y Peticiones

Migraciones de Base de Datos en Laravel: Creación y Control de Versiones

Creación y Configuración de Modelos y Factories en Laravel

Manejo de Bases de Datos con Eloquent en Laravel

Relaciones de Tablas en Laravel: Usuarios y Publicaciones

Manos a la obra con nuestro proyecto

Revisión de Controladores y Vistas en Proyectos Web

Instalación y Configuración del Sistema de Inicio de Sesión en Laravel

Modificación de Rutas en Sistema de Inicio de Sesión Web

Configuración de Rutas y Controladores en PHP Artisan

Desarrollo de Vistas y Controladores con Paginación en PHP

Eliminar datos con formularios seguros en Laravel

Configuración Inicial para Creación y Edición de Registros en Platzi