Demo
Continuamos con la 3ra Parte del tutorial, en el capitulo anterior llamado Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 2 creamos el Controlador para nuestro CRUD con los métodos para Crear, Leer, Actualizar y Eliminar registros de la Base de Datos, vamos con este nuevo Post.
En este capitulo vamos a crear el Modelo y la vista de nuestro formulario HTML con Bootstrap 4 para que el usuario pueda interactuar con el CRUD.
Modelo
Voy a crear mi modelo llamado Jugos para crearlo voy a la consola de comandos y ejecuto el siguiente comando
|
1 2 3 4 5 |
php artisan make:model Jugos Model created successfully. |
Se nos ha creado un archivo llamado Jugos.php este archivo se encuentra en la carpeta app > Jugos.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 |
/miaplicacionlaravel ├── /app ├── Jugos.php // Abre este Archivo ├── User.php ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /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 que se ha creado Jugos.php y primero colocamos el nombre la tabla que vamos a usar de la Base de Datos, un modelo en Laravel nos permite acceder a una tabla específica y para trabajar con cada tabla se debe de crear su propio Modelo.
Accedo a la tabla que voy a usar la cual se llama jugos, asimismo selecciono todos los campos de esta tabla que voy a usar para mi CRUD
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Jugos extends Model { // Instancio la tabla 'jugos' protected $table = 'jugos'; // Declaro los campos que usaré de la tabla 'jugos' protected $fillable = ['nombre', 'precio', 'stock', 'img']; } |
No olvides instanciar el Trait Model para que puedas acceder a las funciones para Modelos de Eloquent en Laravel
|
1 2 3 4 |
// Trait Model de Eloquent use Illuminate\Database\Eloquent\Model; |
Vistas
Para crear nuestras Vistas con Bootstrap 4 vamos a organizar de manera ordenada nuestros archivos y carpetas, en el conjunto de archivos de Laravel hay un directorio llamado resources y dentro de este se encuentra el directorio llamado views que es en donde se debe de crear las vistas HTML en Laravel.
|
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 |
/miaplicacionlaravel ├── /app ├── /bootstrap ├── /config ├── /database ├── /public ├── /resources ├── /views // En este directorio se colocan las vistas (Bootstrap 4) ├── /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 |
Dentro de la carpeta views crearé una nueva carpeta llamada jugos, en esta carpeta jugos creare una carpeta llamada admin y dentro de ella colocaré las vistas para mi CRUD, aquí voy a crear 3 archivos PHP a los cuales los llamaré actualizar.blade.php, crear.blade.php e index.blade.php
Asimismo dentro de mi carpeta jugos voy a crear un nuevo directorio llamado frm que es como un nombre más corto de la palabra formulario, dentro de esta carpeta frm voy a crear un archivo llamado prt.blade.php (prt es como un nombre más corto de la palabra parte) en este archivo voy a crear el código HTML para el formulario que será usado para Crear y Editar un registro.
Nuestro directorio debe verse actualmente de la siguiente manera
|
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 // En este diretorio llamado 'jugos' creamos las vistas ├── /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 |
Puedes ver que los archivos tiene la extensión .blade esta extensión es el formato del motor de plantillas que usa Laravel para cualquier proyecto en general.
El trabajo con el motor de plantillas blade le da más practicidad, dinamismo entre otras características al trabajo con vistas en Laravel.
Formulario
Las acciones para Crear y Editar un registro en el Sistema CRUD van funcionar sobre un formulario HTML, vamos a crearlo mediante Bootstrap 4 y luego lo instanciamos o llamamos a las vistas correspondientes.
Abre el archivo que hemos creado llamado prt.blade.php en donde vamos a trabajar nuestro Formulario.
Por Criterio me puedo dar cuenta que este formulario va ser usado para 2 funciones en el CRUD que son Crear y Actualizar un registro, entonces puede que el usuario decida Crear un registro nuevo, para esto necesita tener el formulario limpio y sin datos en su interior, en cambio si el usuario decide Actualizar un registro, pues tiene que tener datos para editarlos en el formulario.
Entonces sabiendo esto debo de crear mis sentencias if – else para que cuando el usuario decida Actualizar pues le mostramos los datos de un registro a Actualizar en el formulario y si no pues le mostramos un formulario nuevo en limpio para ser llenado por un nuevo registro
|
1 2 3 4 5 6 7 |
@if ( !empty ( $jugos->id) ) <!-- Acá el formulario con los datos de un registro para Actualizarlo --> @else <!-- Acá el formulario en Limpio para crear un nuevo registro --> @endif |
Entonces primero crearé el formulario que mostrará los datos para Actualizar, lo que hago es con la sentencia if consultar si la variable $jugos->id no esta vacía y esta devolviendo el id del registro que quiero Actualizar, entonces como si esta devolviendo el id del registro, pues le llamo y muestro todos los datos del registro en el formulario para Actualizar
|
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 43 44 45 46 47 48 |
@if ( !empty ( $jugos->id) ) <div class="form-group"> <label for="nombre" class="negrita">Nombre:</label> <div> <input class="form-control" placeholder="Jugo de Fresa" required="required" name="nombre" type="text" id="nombre" value="{{ $jugos->nombre }}"> </div> </div> <div class="form-group"> <label for="precio" class="negrita">Precio:</label> <div> <input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $jugos->precio }}"> </div> </div> <div class="form-group"> <label for="stock" class="negrita">Stock:</label> <div> <input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $jugos->stock }}"> </div> </div> <div class="form-group"> <label for="img" class="negrita">Selecciona una imagen:</label> <div> <input name="img" type="file" id="img"> <br> <br> @if ( !empty ( $jugos->img) ) <span>Imagen Actual: </span> <br> <img src="../../../uploads/{{ $jugos->img }}" width="200" class="img-fluid"> @else <!-- Aún no se ha cargado una imagen para este producto --> @endif </div> </div> @else ... |
Puedes ver al final del contenido de la sentencia if en la parte donde se actualiza la imagen he creado un nueva sentencia if – else, mediante esta sentencia voy a verificar si el registro tiene una imagen o no
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@if ( !empty ( $jugos->img) ) <span>Imagen Actual: </span> <br> <img src="../../../uploads/{{ $jugos->img }}" width="200" class="img-fluid"> @else Aún no se ha cargado una imagen para este producto @endif |
Luego de la sentencia principal if en donde mostramos el formulario para Actualizar un registro, sigue la sentencia else en donde mostaremos un formulario en blanco para crear un nuevo registro
|
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 |
... @else <div class="form-group"> <label for="nombre" class="negrita">Nombre:</label> <div> <input class="form-control" placeholder="Jugo de Fresa" required="required" name="nombre" type="text" id="nombre"> </div> </div> <div class="form-group"> <label for="precio" class="negrita">Precio:</label> <div> <input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio"> </div> </div> <div class="form-group"> <label for="stock" class="negrita">Stock:</label> <div> <input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock"> </div> </div> <div class="form-group"> <label for="img" class="negrita">Selecciona una imagen:</label> <div> <input name="img" type="file" id="img"> </div> </div> @endif <button type="submit" class="btn btn-info">Guardar</button> <a href="{{ route('admin/jugos') }}" class="btn btn-warning">Cancelar</a> |
A continuación el código completo del formulario junto con las sentencias if – else respectivas
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<div class="row"> <div class="col-md-12"> <section class="panel"> <div class="panel-body"> @if ( !empty ( $jugos->id) ) <div class="form-group"> <label for="nombre" class="negrita">Nombre:</label> <div> <input class="form-control" placeholder="Jugo de Fresa" required="required" name="nombre" type="text" id="nombre" value="{{ $jugos->nombre }}"> </div> </div> <div class="form-group"> <label for="precio" class="negrita">Precio:</label> <div> <input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $jugos->precio }}"> </div> </div> <div class="form-group"> <label for="stock" class="negrita">Stock:</label> <div> <input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $jugos->stock }}"> </div> </div> <div class="form-group"> <label for="img" class="negrita">Selecciona una imagen:</label> <div> <input name="img" type="file" id="img"> <br> <br> @if ( !empty ( $jugos->img) ) <span>Imagen Actual: </span> <br> <img src="../../../uploads/{{ $jugos->img }}" width="200" class="img-fluid"> @else Aún no se ha cargado una imagen para este producto @endif </div> </div> @else <div class="form-group"> <label for="nombre" class="negrita">Nombre:</label> <div> <input class="form-control" placeholder="Jugo de Fresa" required="required" name="nombre" type="text" id="nombre"> </div> </div> <div class="form-group"> <label for="precio" class="negrita">Precio:</label> <div> <input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio"> </div> </div> <div class="form-group"> <label for="stock" class="negrita">Stock:</label> <div> <input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock"> </div> </div> <div class="form-group"> <label for="img" class="negrita">Selecciona una imagen:</label> <div> <input name="img" type="file" id="img"> </div> </div> @endif <button type="submit" class="btn btn-info">Guardar</button> <a href="{{ route('admin/jugos') }}" class="btn btn-warning">Cancelar</a> <br> <br> </div> </section> </div> </div> |
Listo ya tenemos el formulario que usaremos en nuestro CRUD.
Notas
- Hasta aquí hemos creado nuestro Modelo Jugos y el formulario que servirá para Crear y Actualizar registros o jugos en nuestro CRUD.
- 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.