Como Crear un CRUD con Laravel 8 y Bootstrap 5 – Parte 1

5 minuto(s)

En esta página:

Antes que Laravel Framework se hiciera popular existían otros Frameworks como Zend y Symfony que si bien permiten hacer aplicaciones con el Lenguaje de Programación PHP, robustas y profesionales de manera práctica y dinámica, no lograban detener los malos comentarios de la comunidad contra PHP, no digo que en la actualidad no hayan usuarios que critican a PHP, pero desde que apareció Laravel, estos comentarios negativos en contra de PHP se redujeron, ya que Laravel es un Framework que coge lo mejor de muchas tecnologías como Symfony, Composer y otras más, asimismo acaparo mucho el mercado de PHP y la comunidad lo adopto de buena manera. Hasta la fecha de este Post Laravel se encuentra en su versión 8 y en esta nueva aventura te voy a enseñar a Como Crear un CRUD con Laravel 8 y Bootstrap 5, vamos con ello.

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

Que es Laravel + Tu Primera Aplicación con Laravel
Las Novedades más destacadas que trae Laravel 8
Lee más artículos en la categoría Laravel
Que es Bootstrap, Historia y tu Primer Hola Mundo
Diseña Tu Primera Página Web con Bootstrap 4
Como Crear una Notificación de tipo Toast con Bootstrap 4 y Javascript
Puedes leer más en la categoría Bootstrap.

Asimismo, te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify	SoundCloud	Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un CRUD con Laravel 8 y Bootstrap 5 – Parte 1.

La versión de Laravel 8 nos pide que cumplamos ciertos requisitos en nuestro servidor para poder usarlo, a continuación te dejo una lista de cuales son, estos los puedes encontrar también en su página oficial, en este enlace, en donde también encontrarás información adicional importante.

PHP >= 7.3
BCMath PHP Extension
Ctype PHP Extension
Fileinfo PHP Extension
JSON PHP Extension
Mbstring PHP Extension
OpenSSL PHP Extension
PDO PHP Extension
Tokenizer PHP Extension
XML PHP Extension

Como yo estoy trabajando sobre un servidor local, algunos requisitos no los necesito por el momento, como el OpenSSL PHP Extension ya que este se suele usar para un dominio https, pero si pasamos el proyecto a producción o a un servidor de pago, necesitaremos tenerlo activado para poder usar OpenSSL que nos provee un certificado SSL para nuestro proyecto. Igualmente la configuración para el servidor ya sea Apache o Nginx y otras configuraciones necesarias.

Creación de Nuevo Proyecto

Laravel nos brinda algunas maneras para instalarlo y crear un proyecto nuevo, yo suelo usar mucho Composer que es una herramienta que nos permite realizar varias tareas y Laravel nos brinda la opción de instalarlo como una dependencia global para poder crear un nuevo proyecto. Entonces voy a comenzar instalando composer como una dependencia global, ejecutando el siguiente comando:


composer global require laravel/installer 

Changed current directory to C:/Users/JC/AppData/Roaming/Composer
Using version ^4.2 for laravel/installer
./composer.json has been updated
Running composer update laravel/installer
Loading composer repositories with package information
Updating dependencies
Lock file operations: 0 installs, 1 update, 0 removals
  - Upgrading laravel/installer (v4.2.6 => v4.2.7)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 0 installs, 1 update, 0 removals
  - Downloading laravel/installer (v4.2.7)
  - Upgrading laravel/installer (v4.2.6 => v4.2.7): Extracting archive
Generating autoload files
11 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

composer global require laravel/installer

Changed current directory to C:/Users/JC/AppData/Roaming/Composer

Using version ^4.2 for laravel/installer

./composer.json has been updated

Running composer update laravel/installer

Loading composer repositories with package information

Updating dependencies

Lock file operations: 0 installs, 1 update, 0 removals

- Upgrading laravel/installer (v4.2.6 => v4.2.7)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 0 installs, 1 update, 0 removals

- Downloading laravel/installer (v4.2.7)

- Upgrading laravel/installer (v4.2.6 => v4.2.7): Extracting archive

Generating autoload files

11 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

Bien, luego de instalar Composer, ahora puedo crear un nuevo proyecto en Laravel para mi sistema CRUD, yo le pondré de nombre crud-laravel-8-bootstrap-5 a mi proyecto y para crearlo debo ejecutar el siguiente comando:


laravel new crud-laravel-8-bootstrap-5

 _                               _
| |                             | |
| |     __ _ _ __ __ ___   _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|

    Creating a "laravel/laravel" project at "./crud-laravel-8-bootstrap-5"
    Installing laravel/laravel (v8.5.24)
      - Downloading laravel/laravel (v8.5.24)
      - Installing laravel/laravel (v8.5.24): Extracting archive
    Created project in E:\xampp\htdocs\xampp\nc\tutoriales\blog/crud-laravel-8-bootstrap-5
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
    Loading composer repositories with package information
    Updating dependencies
    Lock file operations: 105 installs, 0 updates, 0 removals
  - Locking asm89/stack-cors (v2.0.3)
  - Locking brick/math (0.9.2)
  - Locking theseer/tokenizer (1.2.1)
  - Locking tijsverkoyen/css-to-inline-styles (2.2.3)
  - Locking vlucas/phpdotenv (v5.3.0)
  - Locking voku/portable-ascii (1.5.6)
  - Locking webmozart/assert (1.10.0)
    Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 105 installs, 0 updates, 0 removals
      - Downloading symfony/polyfill-php80 (v1.23.1)
      - Downloading symfony/polyfill-mbstring (v1.23.1)
  - Downloading symfony/var-dumper (v5.3.6)
  - Downloading symfony/polyfill-intl-grapheme (v1.23.1)
  - Downloading symfony/string (v5.3.3)
      - Downloading symfony/console (v5.3.6)
  - Downloading monolog/monolog (2.3.2)
      - Downloading symfony/css-selector (v5.3.4)
  - Downloading symfony/routing (v5.3.4)
...
...
...
(Continua la Creación del Proyecto)
...
...
...
      - Installing phar-io/manifest (2.0.3): Extracting archive
      - Installing myclabs/deep-copy (1.10.2): Extracting archive
      - Installing phpunit/phpunit (9.5.8): Extracting archive
    78 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
    > Illuminate\Foundation\ComposerScripts::postAutoloadDump
    > @php artisan package:discover --ansi
    Discovered Package: facade/ignition
Discovered Package: fruitcake/laravel-cors
Discovered Package: laravel/sail
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
    75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
    > @php artisan vendor:publish --tag=laravel-assets --ansi
    No publishable resources for tag [laravel-assets].
Publishing complete.
    > @php artisan key:generate --ansi
    Application key set successfully.

Application ready! Build something amazing.

laravel new crud-laravel-8-bootstrap-5

_ _

| | | |

| | __ _ _ __ __ ___ _____| |

| | / _` | '__/ _` \ \ / / _ \ |

| |___| (_| | | | (_| |\ V / __/ |

|______\__,_|_| \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./crud-laravel-8-bootstrap-5"

Installing laravel/laravel (v8.5.24)

- Downloading laravel/laravel (v8.5.24)

- Installing laravel/laravel (v8.5.24): Extracting archive

Created project in E:\xampp\htdocs\xampp\nc\tutoriales\blog/crud-laravel-8-bootstrap-5

> @php -r "file_exists('.env') || copy('.env.example', '.env');"

Loading composer repositories with package information

Updating dependencies

Lock file operations: 105 installs, 0 updates, 0 removals

- Locking asm89/stack-cors (v2.0.3)

- Locking brick/math (0.9.2)

- Locking theseer/tokenizer (1.2.1)

- Locking tijsverkoyen/css-to-inline-styles (2.2.3)

- Locking vlucas/phpdotenv (v5.3.0)

- Locking voku/portable-ascii (1.5.6)

- Locking webmozart/assert (1.10.0)

Writing lock file

Installing dependencies from lock file (including require-dev)

Package operations: 105 installs, 0 updates, 0 removals

- Downloading symfony/polyfill-php80 (v1.23.1)

- Downloading symfony/polyfill-mbstring (v1.23.1)

- Downloading symfony/var-dumper (v5.3.6)

- Downloading symfony/polyfill-intl-grapheme (v1.23.1)

- Downloading symfony/string (v5.3.3)

- Downloading symfony/console (v5.3.6)

- Downloading monolog/monolog (2.3.2)

- Downloading symfony/css-selector (v5.3.4)

- Downloading symfony/routing (v5.3.4)

...

(Continua la Creación del Proyecto)

...

- Installing phar-io/manifest (2.0.3): Extracting archive

- Installing myclabs/deep-copy (1.10.2): Extracting archive

- Installing phpunit/phpunit (9.5.8): Extracting archive

78 package suggestions were added by new dependencies, use `composer suggest` to see details.

Generating optimized autoload files

> Illuminate\Foundation\ComposerScripts::postAutoloadDump

> @php artisan package:discover --ansi

Discovered Package: facade/ignition

Discovered Package: fruitcake/laravel-cors

Discovered Package: laravel/sail

Discovered Package: laravel/tinker

Discovered Package: nesbot/carbon

Discovered Package: nunomaduro/collision

Package manifest generated successfully.

75 packages you are using are looking for funding.

Use the `composer fund` command to find out more!

> @php artisan vendor:publish --tag=laravel-assets --ansi

No publishable resources for tag [laravel-assets].

Publishing complete.

> @php artisan key:generate --ansi

Application key set successfully.

Application ready! Build something amazing.

Ahora vamos a probar si el proyecto se ha creado y esta funcionando correctamente, primero ingreso al directorio del proyecto, ya que se me ha creado un directorio con el nombre que le puse a mi proyecto crud-laravel-8-bootstrap-5 y luego arranco el servidor local de Laravel:


# Ingreso al directorio de mi proyecto 
crud-laravel-8-bootstrap-5 

# Arranco el servidor local de Laravel 
crud-laravel-8-bootstrap-5/ php artisan serve

Starting Laravel development server: http://127.0.0.1:8000
[Tue Aug 10 19:20:36 2021] 127.0.0.1:50160 [200]: /favicon.ico

# Ingreso al directorio de mi proyecto

crud-laravel-8-bootstrap-5

# Arranco el servidor local de Laravel

crud-laravel-8-bootstrap-5/ php artisan serve

Starting Laravel development server: http://127.0.0.1:8000

[Tue Aug 10 19:20:36 2021] 127.0.0.1:50160 [200]: /favicon.ico

En la consola me dice que el servidor local de desarrollo se inicio en la ruta http://127.0.0.1:8000/ o lo mismo que seria http://localhost:8000/, entonces si abro esa ruta en el navegador, debería de ver que el proyecto se ha creado y funciona correctamente.

Con esto verificamos que el proyecto se ha creado correctamente, asimismo podemos ver en la parte inferior derecha que nos muestra la versión de Laravel y de PHP que estamos usando en nuestro servidor.

Adicionalmente, si quiero saber la versión de Laravel en mi consola, debo ejecutar el siguiente comando:


# Comando para saber la versión de Laravel que tengo en mi proyecto 
crud-laravel-8-bootstrap-5/ php artisan --version 

Laravel Framework 8.54.0

# Comando para saber la versión de Laravel que tengo en mi proyecto

crud-laravel-8-bootstrap-5/ php artisan --version

Laravel Framework 8.54.0

Bueno hasta aquí llegamos con esta primera parte en donde hemos creado nuestro nuevo proyecto con Laravel para poder desarrollar el sistema CRUD.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En el siguiente capitulo configuraremos la base de datos e instalaremos Bootstrap 5.
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.