Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 4
7 minuto(s)Demo
En el capitulo anterior llamado Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 3 creamos la vista del formulario que sera usado en la página Crear y Editar un registro (jugo), en este capitulo 4 crearemos las vistas para el usuario final, estas vistas son Crear, Leer (Vista Principal) y Actualizar, vamos con este Post.
En cuanto a la Vista Eliminar no necesitare una vista, ya que se solicitará directamente al servidor eliminar un registro, previamente un mensaje de confirmación al usuario con Javascript, esta parte lo veremos más abajo.
Crear (Create)
Para crear esta vista y las demás vistas de nuestro CRUD usaremos Bootstrap 4, en esta vista llamaremos al formulario con sus respectivos campos que creamos en la Parte 3 de este tutorial.
Para esta vista usaremos el archivo crear.blade.php el cual creamos en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > jugos > crear.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/miaplicacionlaravel ├── /app ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /views ├── /admin ├── /jugos ├── /frm ├── prt.blade.php ├── actualizar.blade.php ├── crear.blade.php // Abre este Archivo ├── index.blade.php ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── .styleci.yml ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── server.php ├── webpack.mix.js ├── yarn.lock |
Abre el archivo con el nombre crear.blade.php y agrega lo siguiente
|
1 2 3 4 5 6 7 8 9 10 |
<form method="POST" action="{{ route('admin/jugos/store') }}" role="form" enctype="multipart/form-data"> <input type="hidden" name="_method" value="PUT"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> @include('admin.jugos.frm.prt') </form> |
He definido las etiquetas <form></form> en mi vista Crear y dentro de estas etiquetas coloco un elemento input de tipo oculto (hidden) con el nombre _method y en el value le digo a Laravel que usare el método PUT
|
1 2 3 |
<input type="hidden" name="_method" value="PUT"> |
También he colocado otro input oculto (hidden) con el nombre _token y el método PUT como valor o value
|
1 2 3 |
<input type="hidden" name="_token" value="{{ csrf_token() }}"> |
Laravel nos pide que en cada ejecución de un formulario le debemos pasar el método correspondiente en este caso PUT y un csrf_token el cual Laravel lo genera automáticamente, los Desarrolladores solo debemos colocar {{ csrf_token() }} y Laravel hara el trabajo.
El csrf_token tiene las iniciales CSRF que sinifica Cross-site Request Forgery o en español Falsificación de Petición en Sitios Cruzados el cual Laravel utiliza como medidad de seguridad ante estos posibles ataques de tipo CSRF.
Por ultimo mediante la directiva @include llamamos al formulario que creamos en la Parte 3 de este tutorial con el nombre prt.blade.php y basta con solo colocar la ruta y el nombre prt para que Laravel lo imprima en la vista
|
1 2 3 |
@include('admin.jugos.frm.prt') |
Bien mi vista para Crear un registro o jugo se veria de la siguiente manera
Leer (Read)
En esta Vista voy a crear una tabla HTML con Bootstrap 4 en donde muestro o leo los datos Nombre, Precio, Stock e Imagen de todos los jugos que se han creado en la Base de Datos y una columna adicional llamada Acciones en donde colocaré 2 botones para Editar y Eliminar el registro o jugo correspondiente.
Para esta vista usare el archivo index.blade.php que he creado en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > jugos > index.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/miaplicacionlaravel ├── /app ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /views ├── /admin ├── /jugos ├── /frm ├── prt.blade.php ├── actualizar.blade.php ├── crear.blade.php ├── index.blade.php // Abre este Archivo ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── .styleci.yml ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── server.php ├── webpack.mix.js ├── yarn.lock |
Abre el archivo index.blade.php y agrega lo siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<a href="{{ route('admin/jugos/crear') }}" class="btn btn-success mt-4 ml-3"> Agregar </a> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Nombre</th> <th>Precio</th> <th>Stock</th> <th>Imagen</th> <th>Acciones</th> </tr> </thead> <tbody> @foreach($jugos as $jug) <tr> <td class="v-align-middle">{{$jug->nombre}}</td> <td class="v-align-middle">{{$jug->precio}}</td> <td class="v-align-middle">{{$jug->stock}}</td> <td class="v-align-middle"> <img src="{!! asset(" uploads/$jug->img") !!}" width="30" class="img-responsive"> </td> <td class="v-align-middle"> <form action="{{ route('admin/jugos/eliminar',$jug->id) }}" method="POST" class="form-horizontal" role="form" onsubmit="return confirmarEliminar()"> <input type="hidden" name="_method" value="PUT"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <a href="{{ route('admin/jugos/actualizar',$jug->id) }}" class="btn btn-primary">Editar</a> <button type="submit" class="btn btn-danger">Eliminar</button> </form> </td> </tr> @endforeach </tbody> </table> |
Arriba de la tabla creo un botón para Agregar un nuevo jugo o registro
|
1 2 3 |
<a href="{{ route('admin/jugos/crear') }}" class="btn btn-success mt-4 ml-3"> Agregar </a> |
Para llamar a los datos uso el loop @foreach y coloco cada jugo en una fila y columna correspondiente en la Tabla HTML, a continuación los valores tal cual pero sin la tabla HTML
|
1 2 3 4 5 6 7 8 9 10 |
@foreach($jugos as $jug) {{$jug->nombre}} {{$jug->precio}} {{$jug->stock}} {{$jug->img}} {{$jug->id}} <!-- Paso la carpeta 'uploads' en donde se guardan las imágenes de cada jugo --> @endforeach |
En la columna Imagen uso la carpeta uploads que es en donde se guardan las imágenes de cada registro o jugo
|
1 2 3 |
{!! asset("uploads/$jug->img") !!} |
La columna Acciones contiene 2 botones, uno es Editar y tiene una ruta a la cual le paso el id del jugo que deseo editar $jug->id
|
1 2 3 |
<a href="{{ route('admin/jugos/actualizar',$jug->id) }}" class="btn btn-primary">Editar</a> |
El otro botón es Eliminar y funciona sobre un elemento de tipo formulario al cual tiene una ruta a la cual le paso también el id del jugo que deseo eliminar $jug->id, este formulario usa el método POST y antes de ejecutar la eliminación del jugo, va llamar a la función confirmarEliminar(), esta función arrojará una pregunta al usuario preguntandole si desea eliminar el jugo o registro
|
1 2 3 |
<form action="{{ route('admin/jugos/eliminar',$jug->id) }}" method="POST" class="form-horizontal" role="form" onsubmit="return confirmarEliminar()"> |
La función confirmarEliminar() para Eliminar un registro la veremos más abajo en la Vista Eliminar (Delete).
Mi vista para Leer los registros se ve así
Actualizar (Update)
Para esta vista creare un formulario HTML con Bootstrap 4, igualmente usare los campos del formulario que he creado en la Parte 3 de este tutorial.
Usare el archivo actualizar.blade.php el cual también lo he creado en la Parte 3 de este tutorial, este archivo se encuentra en resources > views > admin > jugos > actualizar.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/miaplicacionlaravel ├── /app ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /views ├── /admin ├── /jugos ├── /frm ├── prt.blade.php ├── actualizar.blade.php // Abre este Archivo ├── crear.blade.php ├── index.blade.php ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── .styleci.yml ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── server.php ├── webpack.mix.js ├── yarn.lock |
Abre el archivo actualizar.blade.php y agrega lo siguiente
|
1 2 3 4 5 6 7 8 9 10 |
<form method="POST" action="{{ route('admin/jugos/update',$jugos->id) }}" role="form" enctype="multipart/form-data"> <input type="hidden" name="_method" value="PUT"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> @include('admin.jugos.frm.prt') </form> |
Al formulario para editar un jugo o registro le asigno el método POST y en le paso la ruta con el id del jugo que deseo Editar $jugos->id
Dentro del formulario coloco un input de tipo oculto (hidden) con el nombre _method y el valor PUT, con estos datos le digo a Laravel el método que usaré para procesar mi formulario
|
1 2 3 |
<input type="hidden" name="_method" value="PUT"> |
También agrego otro input oculto (hidden) con el nombre _token y el valor {{ csrf_token }}, con estos datos le paso un token de seguridad ante ataques de tipo CSRF, basta con agregar {{ csrf_token }} y Laravel hará el resto el trabajo.
|
1 2 3 |
<input type="hidden" name="_token" value="{{ csrf_token() }}"> |
El csrf_token tiene las iniciales CSRF que sinifica Cross-site Request Forgery o en español Falsificación de Petición en Sitios Cruzados el cual Laravel utiliza como medidad de seguridad ante estos posibles ataques de tipo CSRF.
Por último imprimo los campos del Formulario que he creado en la Parte 3 de este tutorial, utilizo la directiva @include para llamar al archivo prt.blade.php que contiene los campos del formulario, solo coloco la ruta y el nombre prt para que los campos del formulario se muestren
|
1 2 3 |
@include('admin.jugos.frm.prt') |
Mi vista Actualizar se debe de ver de la siguiente manera
Eliminar (Delete)
Para la acción Eliminar un registro no voy a crear una vista HTML, por criterio o al menos es la forma en que quiero que se haga esto, lo que hare es crear una función con Javascript que muestre una ventana preguntando al usuario: Estas seguro de Eliminar?
En la Vista Leer (Read) mencione que usare la función confirmarEliminar(), debajo de la tabla para listar los registros colocare el código con la función Javascript confirmarEliminar()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> function confirmarEliminar() { var x = confirm("Estas seguro de Eliminar?"); if (x) return true; else return false; } </script> |
Esta función frena la acción para eliminar un jugo o registro de la Base de Datos por Seguridad, cuando el usuario presiona el botón Eliminar, impido que se elimine el jugo y primero le pido una confirmación para continuar con la eliminación del postre o jugo.
A continuación un ejemplo del mensaje de confirmación cuando el botón Eliminar es presionado
Bien hasta acá ya tenemos las vistas del usuario final para las operaciones CRUD (Create, Read, Update y Delete).
Rutas
Bien ahora vamos a crear las rutas para que funciones las vistas de nuestro CRUD y demás, abre el archivo web.php que se encuentra en routes > web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/miaplicacionlaravel ├── /app ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /routes ├── api.php ├── channels.php ├── console.php ├── web.php // Abre este Archivo ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── .styleci.yml ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── server.php ├── webpack.mix.js ├── yarn.lock |
En este archivo web.php agregamos las rutas de nuestra aplicación, agregamos lo siguiente (En el código he agregado comentarios para explicar a que ruta pertenece cada una):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Ruta Página Principal Route::get('/', function () { return view('welcome'); }); // Ruta Dashboard Route::get('admin/dashboard', 'Dashboard@index')->name('admin/dashboard'); // Rutas CRUD /* Crear */ Route::get('admin/jugos/crear', 'JugosController@crear')->name('admin/jugos/crear'); Route::put('admin/jugos/store', 'JugosController@store')->name('admin/jugos/store'); /* Leer */ Route::get('admin/jugos', 'JugosController@index')->name('admin/jugos'); /* Actualizar */ Route::get('admin/jugos/actualizar/{id}', 'JugosController@actualizar')->name('admin/jugos/actualizar'); Route::put('admin/jugos/update/{id}', 'JugosController@update')->name('admin/jugos/update'); /* Eliminar */ Route::put('admin/jugos/eliminar/{id}', 'JugosController@eliminar')->name('admin/jugos/eliminar'); |
Bien, hasta aquí ya tenemos las vistas y las rutas de nuestro CRUD (Create, Read, Update y Delete) listas.
Si hago todo el tutorial en una sola página se va hacer muy extenso y no tendrás un correcto aprendizaje, es por eso que opto por avanzar este tutorial por Partes, el siguiente capitulo es el último de este tutorial.
Notas
- En la Parte 5 y última de este tutorial, trabajaremos con las validaciones (Requests), personalizaremos los mensajes de validación y realizaremos otras configuraciones adicionales para que nuestro sistema CRUD funcione correctamente.
- Los Pasos y opciones mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de las empresas que dan soporte a estas herramientas como Laravel y Bootstrap, que suelen cambiar sus opciones de despliegue y configuración en futuras versiones.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- Laravel
- 01-09-2019
- 14-02-2023
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas y 365 días del año para mejorar tu experiencia en la comunidad.
Seguimos trabajando para brindarte le mejor experiencia en Nube Colectiva.
