Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 3

7 minuto(s)

En esta página:

Demo

En la Parte 3 o la parte anterior llamada Como crear un CRUD con Laravel 10 y Bootstrap 5 – Parte 2, creamos nuestro controlador llamado ProductosController, este conrolador permite que enviemos los datos a nuestras vistas para poder ser gestionadas correctamente, asimismo recibe los datos que enviamos desde las vistas hacia la base de datos, por ejemplo cuando editamos un registro o producto, enviamos datos desde el formulario o vista editar (edit), en esta parte 2 continuamos con el tutorial Como crear un CRUD con Laravel 10 y Bootstrap 5, vamos con ello.

Partes

Parte 1
Parte 2
Parte 3
Parte 4
Parte 5 (Final – Código Fuente GitHub)

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar” y “¿ Qué Es NoCode Development ?” (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 3.

Voy a crear el modelo y la vista de nuestro formulario HTML con Bootstrap 5 para que el usuario pueda interactuar con el CRUD.

Modelo

Para el sistema CRUD debo crear un modelo llamado, yo le daré el nombre Productos, tu le puedes poner el nombre que desees. Para crear el modelo voy a la consola de comandos y ejecuto el siguiente comando:


php artisan make:model Productos

INFO  Model [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\app/Model
s/Productos.php] created successfully.

php artisan make:model Productos

INFO Model [D:\xampp\htdocs\xampp\nc\tutoriales\blog\crudlaravel10\app/Model

s/Productos.php] created successfully.

Laravel me ha creado un archivo llamado Productos.php este archivo se encuentra en la carpeta app > Models > Productos.php


/crudlaravel10 
    ├── /app 
        ├── /Models 
            ├── Productos.php
            ├── User.php // Se me ha creado este archivo y abro este archivo 
    ├── /bootstrap
    ├── /config
    ├── /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

/crudlaravel10

├── /app

├── /Models

├── Productos.php

├── User.php // Se me ha creado este archivo y abro este archivo

├── /bootstrap

├── /config

├── /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 Productos.php y primero coloco el nombre la tabla que voy 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 productos, asimismo selecciono todos los campos de esta tabla que voy a usar para mi CRUD:


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Productos extends Model
{
    use HasFactory; 

    // Instancio la tabla 'productos' 
    protected $table = 'productos';
    
    // Declaro los campos que usaré de la tabla 'productos' 
    protected $fillable = ['nombre', 'precio', 'stock', 'img']; 
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Productos extends Model

{

use HasFactory;

// Instancio la tabla 'productos'

protected $table = 'productos';

// Declaro los campos que usaré de la tabla 'productos'

protected $fillable = ['nombre', 'precio', 'stock', 'img'];

}

Si Laravel no ha instanciado automáticamente el Trait Model, debemos de instanciarlos dentro de nuestro modelo para que pueda acceder a los métodos para Modelos de Eloquent en Laravel:


// Trait Model de Eloquent 
use Illuminate\Database\Eloquent\Model;

// Trait Model de Eloquent

use Illuminate\Database\Eloquent\Model;

Vistas

Para crear las vistas con Bootstrap 5 debo organizar mis 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:


/crudlaravel10 
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database 
    ├── /lang 
    ├── /node_modules
    ├── /public          
    ├── /resources
        ├── /views // En este directorio se colocan las vistas (Bootstrap 5)
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/crudlaravel10

├── /app

├── /bootstrap

├── /config

├── /database

├── /lang

├── /node_modules

├── /public

├── /resources

├── /views // En este directorio se colocan las vistas (Bootstrap 5)

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Dentro de la carpeta views crearé una nueva carpeta llamada productos, y dentro de ella creare una carpeta llamada admin y dentro de ella colocaré las vistas para el sistema CRUD, aquí voy a crear 3 archivos PHP a los cuales los llamaré actualizar.blade.php, crear.blade.php, detalles.blade.php e index.blade.php

Asimismo dentro de mi carpeta productos 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:


/crudlaravel10 
    ├── /app
    ├── /bootstrap
    ├── /config
    ├── /database 
    ├── /lang 
    ├── /node_modules
    ├── /public           
    ├── /resources
        ├── /views 
            ├── /admin   
                ├── /productos // En este diretorio llamado 'productos' creamos las vistas 
                    ├── /frm
                        ├── prt.blade.php
                    ├── actualizar.blade.php
                    ├── crear.blade.php // Abro este Archivo 
                    ├── detalles.blade.php  
                    ├── index.blade.php
    ├── /routes
    ├── /storage
    ├── /tests
    ├── /vendor
    ├── .editorconfig
    ├── .env
    ├── .env.example
    ├── .gitattributes
    ├── .gitignore
    ├── artisan
    ├── composer.json
    ├── composer.lock
    ├── package.json
    ├── phpunit.xml
    ├── README.md 
    ├── vite.config

/crudlaravel10

├── /app

├── /bootstrap

├── /config

├── /database

├── /lang

├── /node_modules

├── /public

├── /resources

├── /views

├── /admin

├── /productos // En este diretorio llamado 'productos' creamos las vistas

├── /frm

├── prt.blade.php

├── actualizar.blade.php

├── crear.blade.php // Abro este Archivo

├── detalles.blade.php

├── index.blade.php

├── /routes

├── /storage

├── /tests

├── /vendor

├── .editorconfig

├── .env

├── .env.example

├── .gitattributes

├── .gitignore

├── artisan

├── composer.json

├── composer.lock

├── package.json

├── phpunit.xml

├── README.md

├── vite.config

Puedes ver que los archivos tiene la extensión .blade esta extensión es el formato del motor de plantillas que usa Laravel para las vista de 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 tareas Crear y Actualizar un registro en el Sistema CRUD van funcionar sobre un formulario HTML, vamos a crearlo mediante Bootstrap 5 y luego lo instanciamos o llamamos a las vistas correspondientes.

Abro el archivo que he creado llamado prt.blade.php en el voy a trabajar el 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 un registro, 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:


@if ( !empty ( $productos->id) )

   <!-- Acá el formulario con los datos de un registro para actualizarlo -->

@else

   <!--  Acá el formulario en Limpio para crear un nuevo registro -->

@endif

@if ( !empty ( $productos->id) )

@else

@endif

Entonces primero creo el formulario que mostrará los datos a actualizar, lo que hago es con la sentencia if consultar si la variable $productos->id no esta vacía y esta devolviendo el id del registro que quiero sctualizar, entonces como si esta devolviendo el id del registro, pues le llamo y muestro todos los datos del registro en el formulario para modificarlos:


@if ( !empty ( $productos->id) )

<div class="mb3">
    <label for="nombre" class="negrita">Nombre:</label> 
    <div>
        <input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre" value="{{ $productos->nombre }}"> 
    </div>
</div>

<div class="mb3">
    <label for="precio" class="negrita">Precio:</label> 
    <div>
        <input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $productos->precio }}"> 
    </div>
</div>

<div class="mb3">
    <label for="stock" class="negrita">Stock:</label> 
    <div>
        <input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $productos->stock }}"> 
    </div>
</div>

<div class="mb3">
    <label for="img" class="negrita">Selecciona una imagen:</label> 
<div>
<input name="img" type="file" id="img">
<br>
<br>
@if ( !empty ( $productos->img) )

<span>Imagen Actual: </span>
<br>
<img src="../../../uploads/{{ $productos->img }}" width="200" class="img-fluid">

@else

    <!-- Aún no se ha cargado una imagen para este producto -->

@endif 
</div>

</div>

@else
...

@if ( !empty ( $productos->id) )

<label for="nombre" class="negrita">Nombre:</label>

<div>

<input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre" value="{{ $productos->nombre }}">

</div>

<label for="precio" class="negrita">Precio:</label>

<div>

<input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $productos->precio }}">

</div>

<label for="stock" class="negrita">Stock:</label>

<div>

<input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $productos->stock }}">

</div>

<label for="img" class="negrita">Selecciona una imagen:</label>

<div>

<br>

@if ( !empty ( $productos->img) )

<span>Imagen Actual: </span>

<br>

<img src="../../../uploads/{{ $productos->img }}" width="200" class="img-fluid">

@else

@endif

</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:


@if ( !empty ( $productos->img) )

	<span>Imagen Actual: </span>
	<br>
	<img src="../../../uploads/{{ $productos->img }}" width="200" class="img-fluid">

@else

	Aún no se ha cargado una imagen para este producto

@endif

@if ( !empty ( $productos->img) )

<span>Imagen Actual: </span>

<br>

<img src="../../../uploads/{{ $productos->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 sctualizar un registro, sigue la sentencia else en donde mostaremos un formulario en blanco para crear un nuevo registro:


...
@else

	<div class="mb3">
		<label for="nombre" class="negrita">Nombre:</label> 
		<div>
			<input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre"> 
		</div>
	</div>

	<div class="mb3">
		<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="mb3">
		<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="mb3">
		<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/productos') }}" class="btn btn-warning">Cancelar</a>

...

@else

<label for="nombre" class="negrita">Nombre:</label>

<div>

</div>

<label for="precio" class="negrita">Precio:</label>

<div>

</div>

<label for="stock" class="negrita">Stock:</label>

<div>

</div>

<label for="img" class="negrita">Selecciona una imagen:</label>

<div>

</div>

@endif

<button type="submit" class="btn btn-info">Guardar</button>

<a href="{{ route('admin/productos') }}" class="btn btn-warning">Cancelar</a>

A continuación el código completo del formulario junto con las sentencias if – else respectivas:


<div class="row">
	<div class="col-md-12">
		<section class="panel"> 
			<div class="panel-body">

				@if ( !empty ( $productos->id) )

					<div class="mb-3">
						<label for="nombre" class="negrita">Nombre:</label> 
						<div>
							<input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre" value="{{ $productos->nombre }}"> 
						</div>
					</div>

					<div class="mb-3">
						<label for="precio" class="negrita">Precio:</label> 
						<div>
							<input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $productos->precio }}"> 
						</div>
					</div>

					<div class="mb-3">
						<label for="stock" class="negrita">Stock:</label> 
						<div>
							<input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $productos->stock }}"> 
						</div>
					</div>

					<div class="mb-3">
						<label for="img" class="negrita">Selecciona una imagen:</label> 
						<div>
							<input name="img" type="file" id="img">
							<br>
							<br>

							@if ( !empty ( $productos->img) )

								<span>Imagen Actual: </span>
								<br>
								<img src="../../../uploads/{{ $productos->img }}" width="200" class="img-fluid">

							@else

								Aún no se ha cargado una imagen para este producto

							@endif

						</div>

					</div>

					@else

					<div class="mb-3">
						<label for="nombre" class="negrita">Nombre:</label> 
						<div>
							<input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre"> 
						</div>
					</div>

					<div class="mb-3">
						<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="mb-3">
						<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="mb-3">
						<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/productos') }}" class="btn btn-warning">Cancelar</a>

				<br>
				<br>

			</div>
		</section>
	</div>
</div>

@if ( !empty ( $productos->id) )

<label for="nombre" class="negrita">Nombre:</label>

<div>

<input class="form-control" placeholder="Zapatos Marrones de Cuero" required="required" name="nombre" type="text" id="nombre" value="{{ $productos->nombre }}">

</div>

<label for="precio" class="negrita">Precio:</label>

<div>

<input class="form-control" placeholder="4.50" required="required" name="precio" type="text" id="precio" value="{{ $productos->precio }}">

</div>

<label for="stock" class="negrita">Stock:</label>

<div>

<input class="form-control" placeholder="40" required="required" name="stock" type="text" id="stock" value="{{ $productos->stock }}">

</div>

<label for="img" class="negrita">Selecciona una imagen:</label>

<div>

<br>

@if ( !empty ( $productos->img) )

<span>Imagen Actual: </span>

<br>

<img src="../../../uploads/{{ $productos->img }}" width="200" class="img-fluid">

@else

Aún no se ha cargado una imagen para este producto

@endif

</div>

@else

<label for="nombre" class="negrita">Nombre:</label>

<div>

</div>

<label for="precio" class="negrita">Precio:</label>

<div>

</div>

<label for="stock" class="negrita">Stock:</label>

<div>

</div>

<label for="img" class="negrita">Selecciona una imagen:</label>

<div>

</div>

@endif

<button type="submit" class="btn btn-info">Guardar</button>

<a href="{{ route('admin/productos') }}" class="btn btn-warning">Cancelar</a>

<br>

</div>

</section>

</div>

Listo ya tenemos el formulario que usaremos en nuestro CRUD.

Hasta aquí hemos creado el modelo Productos, también hemos organizado los directorios para las vistas del sistema CRUD y creamos el formulario prt.blade.php que servirá para crear y actualizar un registro en la tabla productos de la base de datos.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

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.