Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 1

Demo

Laravel es uno de los mejores Frameworks para PHP en la actualidad, no se que pasará en el futuro, hasta la fecha de este artículo lo sigue siendo, en un tutorial anterior llamado Como crear un CRUD con Laravel 5.6 creamos un sistema que nos permitía realizar las tareas indispensables con nuestra Base de Datos MySQL, pero muchas cosas han cambiado, ya estamos en la versión de Laravel 5.8 por esto he decidido crear este nuevo tutorial así que vamos con este Post.

Antes de continuar con este tutorial, te invito a leer nuestro artículo Que es Laravel + Tu Primera Aplicación con Laravel para que estés familiarizado con Laravel, si ya conoces este Framework, adelante puedes continuar con el tutorial.

En este tutorial trabajaremos con la Consola de comandos Git (Bash), te recomendamos leer los siguientes artículos:

Si ya tienes conocimiento sobre los artículos que te recomendamos leer, no hay problema, puedes continuar con este tutorial.

Nuevo Proyecto

Antes de crear nuestro proyecto CRUD con Laravel 5.8 ten en cuenta que esta versión de Laravel nos pide que nuestro servidor cuente con las siguientes Características

  • PHP >= 7.1.3
  • BCMath PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Si tu servidor no tiene estas Características lo más probable es que te aparesca algún error durante el Desarrollo del proyecto, puedes optar por usar un servidor local para Desarrollo (hasta que puedas adquirir un servidor de pago), en este artículo Como Crear nuestra Primera Aplicación con PHP en la parte que dice Creando la Aplicación PHP te explico como puedes usar Xampp.

Bien antes de crear el proyecto abre tu consola de comandos y ejecuta el siguiente comando para instalar Laravel de manera global

composer global require laravel/installer

Changed current directory to C:/Users/nc/AppData/Roaming/Composer
Using version ^2.1 for laravel/installer
./composer.json has been created
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 12 installs, 0 updates, 0 removals
  - Installing symfony/process (v4.2.9): Downloading (100%)
  - Installing symfony/polyfill-ctype (v1.11.0): Loading from cache
  - Installing symfony/filesystem (v4.2.9): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.11.0): Loading from cache
  - Installing symfony/contracts (v1.1.1): Downloading (100%)
  - Installing symfony/console (v4.2.9): Downloading (100%)
  - Installing guzzlehttp/promises (v1.3.1): Downloading (100%)
  - Installing ralouphie/getallheaders (2.0.5): Downloading (100%)
  - Installing psr/http-message (1.0.1): Downloading (100%)
  - Installing guzzlehttp/psr7 (1.5.2): Downloading (100%)
  - Installing guzzlehttp/guzzle (6.3.3): Downloading (100%)
  - Installing laravel/installer (v2.1.0): Downloading (100%)
symfony/contracts suggests installing psr/cache (When using the Cache contracts)
symfony/contracts suggests installing psr/container (When using the Service contracts)
symfony/contracts suggests installing psr/event-dispatcher (When using the EventDispatcher contracts)
symfony/contracts suggests installing symfony/cache-implementation
symfony/contracts suggests installing symfony/event-dispatcher-implementation
symfony/contracts suggests installing symfony/http-client-implementation
symfony/contracts suggests installing symfony/service-implementation
symfony/contracts suggests installing symfony/translation-implementation
symfony/console suggests installing symfony/event-dispatcher
symfony/console suggests installing symfony/lock
symfony/console suggests installing psr/log (For using the console logger)
guzzlehttp/guzzle suggests installing psr/log (Required for using the Log middleware)
Writing lock file
Generating autoload files

Al instalar Laravel de manera Global posteriormente te va permitir ejecutar comandos y tareas de Laravel desde cualquier lugar por medio de la consola de comandos.

Voy a crear mi proyecto nuevo con Laravel, yo le daré el nombre miaplicacionlaravel tu le puedes dar el nombre que desees, para crear un nuevo proyecto ejecuto el siguiente comando en la consola de comandos

laravel new miaplicacionlaravel
 
Crafting application...
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 76 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (v1.3.0): Loading from cache
  - Installing doctrine/lexer (v1.0.1): Loading from cache
  - Installing dragonmantank/cron-expression (v2.3.0): Loading from cache
  - Installing erusev/parsedown (1.7.3): Loading from cache
  - Installing symfony/polyfill-ctype (v1.11.0): Loading from cache
  - Installing phpoption/phpoption (1.5.0): Loading from cache
  - Installing vlucas/phpdotenv (v3.3.3): Loading from cache
  - Installing symfony/css-selector (v4.2.9): Loading from cache
  - Installing tijsverkoyen/css-to-inline-styles (2.2.1): Loading from cache
  - Installing symfony/polyfill-php72 (v1.11.0): Loading from cache
  - Installing symfony/polyfill-mbstring (v1.11.0): Loading from cache
......
(Continua la creación del proyecto ...)
......
Package manifest generated successfully.
Application ready! Build something amazing.

Se ha creado un directorio con el nombre  de nuestro proyecto, a mi se me ha creado el directorio miaplicacionlaravel y dentro de este directorio un conjunto de archivos y directorios que forman parte de mi proyecto junto al core o núcleo de Laravel

/miaplicacionlaravel
├── /app
├── /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

Conforme vas avanzando tu proyecto pueden aparecer otros archivos si es que este lo requiere.

Base de Datos

Primero debemos elegir que Motor de Base de Datos que vamos a usar, Laravel es compatible con diferentes motores de Base de Datos como PostgreSQL DB, Oracle DB, Mongo DB, Redis DB, etc.  yo voy a usar el motor de Base de Datos MySQL que al parecer siempre ha sido muy amigable con PHP.

A mi Base de Datos le voy a colocar de nombre productos tu le puedes colocar el nombre que desees

Para poder usar la Base de Datos que hemos  creado, tenemos que configurar los datos de conexión en Laravel.

En el directorio principal de Laravel 5.8 hay un archivo llamado .env abre este archivo y en configura en las líneas a continuación los datos de conexión a la base de datos productos

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=productos
DB_USERNAME=root
DB_PASSWORD=mipassword

En mi base de datos crearé una nueva tabla llamada jugos con esta tabla llevaremos a cabo todos los procesos de nuestro sistema CRUD, en términos más sencillos vamos a Crear, Leer, Actualizar y Eliminar registros de jugos en nuestra tabla jugos

Para crear la tabla jugos, debemos de crear un nueva migración, ejecutamos el siguiente comando en nuestra consola de comandos

php artisan make:migration create_jugos_table

Created Migration: 2019_06_29_105350_create_jugos_table

Se nos ha creado un nuevo archivo con la nueva migración, este archivo lo encuentras en el directorio database > migrations > 2019_06_29_105350_create_jugos_table.php, Abre este archivo

/miaplicacionlaravel
├── /app
├── /bootstrap
├── /config
├── /database
    ├── /migrations
        ├── 2019_06_29_105350_create_jugos_table.php // Abre este Archivo 
├── /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

El archivo que se ha creado para la migración, Laravel le asigna la fecha y hora de creación al inicio del nombre del archivo,  2019_06_29_105350_create_jugos_table.php

Abre el archivo, dentro de la función public up() vamos agregar los campos de nuestra tabla jugos, estos campos son nombre, precio, stock y el campo para la imagen llamado img, los agregamos como tipo string

public function up()
{
    Schema::create('jugos', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('nombre');
        $table->string('precio');
        $table->string('stock');
        $table->string('img');
        $table->timestamps();
        $table->softDeletes();
    });
}

Puedes ver que he añadido el campo $table->softDeletes(); este campo almacena la fecha y hora en que un registro o jugo es eliminado de la tabla jugos, si tienes dudas para agregar esta campo te recomiendo ver el siguiente video

Bien como ya definimos los campos de nuestra tabla jugos en el archivo de migración, vamos a ejecutar la migración para crear la en la Base de Datos, ve a la consola de comandos y ejecuta el siguiente comando

php artisan migrate

Migrating: 2019_06_29_105350_create_jugos_table
Migrated:  2019_06_29_105350_create_jugos_table

Luego de ejecutar la migración, se nos ha creado la tabla jugos con los respectivos campos en nuestra Base de Datos

Bootstrap 4

Para la creación más adelante de las vistas del usuario para el sistema CRUD, vamos a usar Bootstrap 4, la versión actual hasta la fecha de este artículo es Bootstrap 4.1.3 dentro del directorio de mi proyecto miaplicacionlaravel abro la consola de comandos y ejecuto el siguiente comando para instalar Boostrap 4

composer require twbs/bootstrap:4.1.3

./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing twbs/bootstrap (v4.1.3): Downloading (100%)
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: barryvdh/laravel-elfinder
Discovered Package: beyondcode/laravel-dump-server
Discovered Package: fideloper/proxy
Discovered Package: intervention/image
Discovered Package: laracasts/generators
Discovered Package: laravel-notification-channels/discord
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.

Con esto ya tenemos instalado Bootstrap 4 y podremos usar sus elementos HTML (Botones, Formularios, Alertas, etc.) cuando los necesitemos para las vistas Front del Sistema CRUD.

Notas

  • 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.
  • En el siguiente capitulo crearemos el Controlador para nuestro Sistema CRUD y otros detalles más.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.