Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 5 (Final)
8 minuto(s)En esta página:
Demo Github
En la parte anterior o penultima parte creamos las vistas HTML con el framework frontend Bootstrap 5, entre las vistas que creamos estan las vista para las tareas: Crear, Leer, Actualizar y la funcionalidad Elimiar que es una tarea CRUD pero la hicimos de una manera particular por las mismas necesidades del proyecto. Asimismo creamos una vista principal en donde colocamos una tabla HTML de Bootstrap 5, en ella listamos todos los productos con ciertos botones al lado derecho para realizar las tareas Detalles (Leer), Editar y Eliminar. En esta parte 5 y última continuaremos con el tutorial Como crear un CRUD con Laravel 10 y Bootstrap 5, vamos con ello.
Partes
Antes de continuar, te invito a leer los siguientes artículos:
- Las Novedades más destacadas que trae Laravel 9 – Parte 1
- Como Crear un CRUD con Laravel 8 y Bootstrap 5 – Parte 1
- Como Usar Mongo DB en Laravel 8 + Listado de Datos – Parte 1
- Que es Laravel + Tu Primera Aplicación con Laravel
- Las Novedades más destacadas que trae Laravel 8
- Nuevos Comandos Para Bases de Datos En Laravel 9
- Las Novedades más destacadas que trae Laravel 10
- Como crear un CRUD con Galería de Imágenes en Laravel 6.2 y Bootstrap 4 – Parte 1
- Como Trabajar con Query Scopes (Ámbitos de Consulta) en Laravel 7
- Cliente PHP de OpenAI Para Laravel
- Lee más artículos en la categoría Laravel
Asimismo te invito a scuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente” (En Spotify, Sound Cloud y Apple Podcasts)” y “¿ Cual Es El Momento Ideal Para Dejar Tu Empleo y Ser Freelance ?” (Anchor Podcast):
| Spotify: | Sound Cloud: | Apple Podcasts | Anchor Podcasts |
 |
 |
 |
 |
Bien ahora continuemos con el Post: Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 5 (Final).
Cada tarea u operación que el usuario realiza en el sistema CRUD, debe estar acompañado de una mensaje que confirme que dicha operación ha sido realizada correctamente, este mensaje lo voy a mostrar usando el componente Alerts de Bootstrap 5.
Mensaje de Operación Realizada
Cuando el usuario realiza una determinada tarea, por ejemplo para Crear (Create), el usuario llena el formulario con los datos que quiere guardar, estos pasan por el Controlador llamado ProductosController y ejecuta el método store que recibe los datos del formulario y los guarda en la tabla productos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Proceso de Creación de un Registro public function store(ItemCreateRequest $request) { // Instancio al modelo Productos que hace llamado a la tabla 'productos' de la Base de Datos $productos = new Productos; // Recibo todos los datos del formulario de la vista 'crear.blade.php' $productos->nombre = $request->nombre; $productos->precio = $request->precio; $productos->stock = $request->stock; // Almacenos la imagen en la carpeta publica especifica, esto lo veremos más adelante $productos->img = $request->file('img')->store('/'); // Inserto todos los datos en mi tabla 'productos' $productos->save(); // Hago una redirección a la vista principal con un mensaje return redirect('admin/productos')->with('message','Guardado Satisfactoriamente !'); } |
Antes de terminar la función store se lleva acabo una redirección a la página principal junto con un mensaje que dice Guardado Satisfactoriamente !
|
1 2 3 4 |
// Redireccionamos con un mensaje confirmando que la Operación se llevo acabo correctamente return redirect('admin/productos')->with('message','Guardado Satisfactoriamente !'); |
Si recuerdas en la Parte 2 de este tutorial, he creado el controlador ProductosController y en cada acción o método, el sistema hace un redirección y muestra un mensaje confirmando que la operación correspondiente se ha llevado acabo correctamente.
El mensaje lo voy a mostrar en la vista principal en donde listo o muestro todos los registros, es decir la vista Leer (Read), esta vista la he creado dentro del archivo index.blade.php este archivo se encuentra en resources > views > admin > productos > 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 36 |
/crudlaravel10 ├── /app ├── /bootstrap ├── /config ├── /database ├── /lang ├── /node_modules ├── /public ├── /resources ├── /views ├── /admin ├── /productos ├── /frm ├── prt.blade.php ├── actualizar.blade.php ├── crear.blade.php ├── detalles.blade.php ├── index.blade.php # Abro este archivo ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── README.md ├── vite.config |
Abre el archivo index.blade.php y agrega lo siguiente antes de la tabla en donde listan todos los registros:
|
1 2 3 4 5 6 7 |
@if(Session::has('message')) <div class="alert alert-primary" role="alert"> {{ Session::get('message') }} </div> @endif |
En todas las operaciones que el usuario realiza el sistema lo redirecciona a la vista Leer (Read) es por eso que alli es donde he decidido mostrar el mensaje.
Entonces si el usuario por ejemplo realiza la operación Eliminar (Delete), le aparecerá el mensaje Eliminado Satisfactoriamente !
Para las demas operaciones se va a mostrar el mensaje que le corresponda según la operación realizada.
Validación
Una cosa es validar los datos en el formulario desde la vista Front, pero otra cosa es validar los datos en la Base de Datos o desde la parte Back de la aplicación, por ejemplo si el usuario ingresa el nombre de un registro debemos verificar si este registro con dicho nombre ya ha sido ingresado en la Base de datos, especificamente en la tabla productos, de esta manera evitamos registros repetidos y que no sean sobreescritos encima.
Para validar voy a usar los Requests que trae Laravel, voy a crear 2 Requests uno llamado ItemCreateRequest que servirá para validar la creación de un registro, para esto voy a mi consola de comandos y ejecuto lo siguiente:
|
1 2 3 4 5 6 |
php artisan make:request ItemCreateRequest INFO Request [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\app/Htt p/Requests/ItemCreateRequest.php] created successfully. |
Y otro llamado ItemUpdateRequest que servirá para validar la actualización de un registro, para esto ejecuto el siguiente comando en la consola de comandos:
|
1 2 3 4 5 6 |
php artisan make:request ItemUpdateRequest INFO Request [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\app/Htt p/Requests/ItemUpdateRequest.php] created successfully. |
Estos 2 Request se han creado en el directorio llamado Requests, aquí se me ha creado 2 archivo llamados ItemCreateRequest.php e ItemUpdateRequest.php, estos archivos se encuentran especificamente en app > Http > Requests:
|
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 |
/crudlaravel10 ├── /app ├── /Http ├── /Request ├── ItemCreateRequest.php # Este archivo ├── ItemUpdateRequest.php # Y este archivo ├── /bootstrap ├── /config ├── /database ├── /lang ├── /node_modules ├── /public ├── /resources ├── /views ├── /admin ├── /productos ├── /frm ├── prt.blade.php ├── actualizar.blade.php ├── crear.blade.php ├── detalles.blade.php ├── index.blade.php # Abro este archivo ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── README.md ├── vite.config |
Abre el archivo llamado ItemCreateRequest.php y agrego 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 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class ItemCreateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array<string, mixed> */ public function rules() { return [ 'nombre' => 'required|unique:productos|max:255', 'stock' => 'required', 'precio' => 'required', ]; } } |
Dentro del método authorize() le estoy retornando true para permitir el ingreso de datos a mi aplicación, si le coloca false, el sistema no te permitirá ingresar datos a la aplicación:
|
1 2 3 4 5 6 |
public function authorize() { return true; } |
Debajo hay otro método llamado rules() en donde hago la validación de los datos que se envian a la Base de Datos, el primer caso es para el nombre, le digo que es un campo obligatorio (required) y que debe ser único en la tabla productos, es decir no debe haber otro registro con ese nombre y solo le permitiré un máximo de 255 caracteres al nombre del registro, debajo a los valores stock y precio le indico que son datos obligatorios (required):
|
1 2 3 4 5 6 7 8 9 10 |
public function rules() { return [ 'nombre' => 'required|unique:productos|max:255', 'stock' => 'required', 'precio' => 'required', ]; } |
Ahora a mi otro archivo que he creado llamado ItemUpdateRequest.php le voy a dar solamente el permiso para que se actualicen los datos de la Base de Datos, este permiso se lo doy dentro del método authorize() retornando true:
|
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 |
<?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class ItemUpdateRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array<string, mixed> */ public function rules() { return [ // ]; } } |
Si tu deseas validar datos al actualizar el registro, lo puedes hacer no hay problema eso depende de ti y lo que tu aplicación requiera, para este tutorial dejaré asi mi configuración.
Si quieres aprender más sobre las reglas de validación y otros detalles puedes visitar la documentación oficial de Laravel.
Configuraciones Adicionales
Tu proyecto con Laravel debe de estar configurado para que funcione con el idioma español. Para configurar el proyecto al idioma Español, debemos hacerlo en el archivo app.php, este archivo se encuentra en config > app.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 36 37 38 39 40 41 42 |
/crudlaravel10 ├── /app ├── /bootstrap ├── /config ├── app.php # Abro este archivo ├── auth.php ├── broadcasting.php ├── cache.php ├── cors.php ├── database.php ├── filesystems.php ├── hashing.php ├── logging.php ├── mail.php ├── queue.php ├── sanctum.php ├── services.php ├── session.php ├── view.php ├── /database ├── /lang ├── /node_modules ├── /public ├── /resources ├── /routes ├── /storage ├── /tests ├── /vendor ├── .editorconfig ├── .env ├── .env.example ├── .gitattributes ├── .gitignore ├── artisan ├── composer.json ├── composer.lock ├── package.json ├── phpunit.xml ├── README.md ├── vite.config |
Abro el archivo app.php y en la línea que dice locale le asigno la opción es (español):
|
1 2 3 4 5 6 7 |
// Acá coloca al idioma español (es) o al idioma que desees 'locale' => 'es', // Laravel usa el idioma inglés (en) por defecto 'fallback_locale' => 'en', |
También puedes configurar la zona horaria en donde dice ‘timezone’ => ‘UTC’, y reemplazarlo por la que deseas, por ejemplo: ‘timezone’ => ‘America/Lima’:
|
1 2 3 4 5 6 7 8 9 10 |
// Acá configuramos la zona horaria 'timezone' => 'UTC', // Acá coloca al idioma español (es) o al idioma que desees 'locale' => 'es', // Laravel usa el idioma inglés (en) por defecto 'fallback_locale' => 'en', |
Asimismo puedes configurar otras cosas, no quiero extenderme del objetivo principal que es crear el CRUD, tu puedes hacer otras configuraciones según lo que requiera tu proyecto, no hay problema.
Publicar Proyecto
Para publicar el Proyecto te recomiendo leer el siguiente Tutorial en donde explico más a detalle como publicar un proyecto creado con Laravel en un Hosting Compartido o en un Servidor VPS:
Con esto terminamos la creación de nuestro Proyecto CRUD.
Al iniciar cada parte de este tutorial, he colocado una Demo para que veas el proyecto en acción, también he colocado en esta última parte del tutorial, un enlace al código del proyecto alojado en un repositorio de GitHub, en donde encontrarás dentro del directorio sql el archivo de la base de datos llamado crularavel10.sql para que lo importes a tu phpMyAdmin.
Nota (s)
- Los pasos mencionados en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de la oraganización que da soporte a Laravel que suele cambiar el orden y las opciones de este framework en sus futuras versiones.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.
- Laravel
- 14-02-2023
- 15-02-2023
- Crear un Post - Eventos Devs - Foro
Seguimos trabajando las 24 horas del día para brindarte la mejor experiencia en la comunidad.
Hemos corregido el problema y ahora la web no muestra esa barra horizontal y se ve en su tamaño natural.
Seguimos trabajando las 24 horas del día, para mejorar la comunidad.
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.
