Comparte en Facebook Twitter Google+

post-delete-sin-formularios-laravel-jquery

Al igual que una petición de tipo POST, las peticiones PUT y DELETE se realizan mediante el envío de la data a través de formularios, pero en ocasiones esto resulta ser muy poco práctico debido a la cantidad de código que debemos escribir para crear dicho formulario. Por ejemplo si tenemos un listado de productos en una lista que cuenta con un botón de eliminar; en este caso deberíamos crear un formulario por cada botón y es por ello que muchos acaban simplemente creando una ruta de tipo GET que reciba el id del objeto que queremos eliminar. Esto compromete un poco la seguridad o el correcto funcionamiento de nuestra aplicación, debido a que, en teoría, podríamos eliminar datos solo con ingresar una url en el navegador. Vamos a ver como solucionar este problema.

Veamos el siguiente ejemplo

Iniciemos creando un nuevo proyecto de Laravel.

Creamos una base de datos y configuramos las credenciales en el archivo .env del proyecto

Editamos el archivo /database/seeds/DatabaseSeeder.php usando Model Factorya para crear algunos usuarios de prueba en la base de datos.

Ejecutamos la migración y el seed para crear la base de datos y los 10 registros de prueba.

Creamos una vista para mostrar la lista de registros (layout.blade.php), en este caso usaremos Bootstrap.

Finalmente una ruta para poder acceder a esta vista editando el archivo app/Http/routes.php

El resultado en el navegador (url/users) seria algo similar a esto.

Capture

Aqui es donde enfrentamos el problema. Si deseamos agregar la logica para eliminar podríamos hacer los siguiente.

Para que esto funcione debemos agregar una ruta que maneje la lógica del borrado

En este ejemplo $users tiene 10 registros, estaríamos imprimiendo 10 veces el mismo código para cada formulario que contiene a cada botón “delete”. Realmente esto acaba siendo algo molesto, ademas el hecho de crear un formulario para enviar un solo campo, parece no ser muy practico, por suerte, no eres la primera persona a la que le pasa esto. Esta es una solución que ofrece un programador que tal vez conozcas si trabajas con Laravel: @Jeffrey_Way.

Ingresa al siguiente link y descarga el archivo de javascript.

Enlace: Laravel.js

Una vez descargado agrégalo en la carpeta public de tu proyecto, por ejemplo: /public/js/laravel.js.

Para poder usar este script debes agregar el link al template de tu proyecto (layout.blade.php)

Para usar este script es necesario tener jquery.js

Finalmente, podemos crear un link que envié esta petición de la siguiente manera:

Si hacemos click en “Delete” veremos un mensaje en pantalla preguntando por confirmación.

Capture2

¿Cual es la ventaja de usar este script ? si ingresas desde el navegador a la url /user/2, vas a obtener un error por que dicha ruta no existe, debido a que estas realizando una peticion GET y la ruta que creamos es de tipo DELETE, por tanto, estas agregando algo de seguridad restringiendo el borrado de datos con peticiones GET.

¿Cómo funciona el script?

Se captura el evento click sobre los links que contengan el atributo “data-method”

Se evalúa si el método que enviamos es PUT o DELETE

Javascript crea el formulario por nosotros incluyendo el campo csrf_token

Como puedes ver, es una solución elegante a un problema común. Tienes algún otro tip que quieras compartir con la comunidad ? Forma parte de nuestra comunidad, contribuye con una publicación y ayuda a otros programadores.

Esto ha sido todo por ahora, espero que te haya gustado esta lección, si tienes alguna duda puedes dejarla en la sección de comentarios.

Material relacionado

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.

Lección anterior Como integrar plantilla AdminLTE en Laravel Lección siguiente Cómo organizar el código en PhpStorm siguiendo el estándar PSR-2