Como crear un CRUD con Laravel 5.8 y Bootstrap 4 – Parte 1
En esta página:
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
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 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
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 |
/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
1 2 3 4 5 6 7 8 |
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
1 2 3 4 5 |
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
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 ├── /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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
1 2 3 4 5 6 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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.
- Laravel Tutoriales
- 29-06-2019
- 05-12-2019
- Crear un Post - Eventos Devs - Foro