En este articulo elaboraremos paso a paso el ya clásico y conocido CRUD con Laravel 8, PHP 7.3.27 y MariaDB v10.4.18 haciendo uso con IDE Visual Sturio Code, asimismo, para este articulo se asume que ya estas familiarizado con Git, Php (no en un 100% - Laravel ), MariaDB y Visual Sturio Code.
1. Líneas de comando a utilizar desde el terminal de Visual Studio Code:
php artisan serve: Iniciar el server.
php git: Iniciar el repositorio git, con la finalidad de poder subir a GitHub.
git add .: Para agregar todo lo ficheros.
git commit -m "ingresar_comentario": Para guardar los cambios y generar la versión de dicho cambio.
git branch Create: Para crear la rama Create.
Recuerda que debes crear tu repositorio de trabajo, te recomiendo revisar el punto 1 y 2 del articulo Trabajando con Git.
2. Configuraciones previas:
2.1. Configurar la base de datos desde el archivo .env que se ubica en la raíz del proyecto o repositorio de trabajo. Ingresa los datos necesarios para la conexión a la base de datos, incluyendo el nombre la DB_DATABASE=test-laravel.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test-laravel
DB_USERNAME=root
DB_PASSWORD=
2.2. Modificar el Providers para trabajar con MariaDB, para lo cual debemos ubicar el archivo AppServiceProvider.php "Providers\AppServiceProvider.php", en dicho archivo añadimos la librería "use Illuminate\Support\Facades\Schema;"
use Illuminate\Support\Facades\Schema;//Agregado como parte de la configuración inicial
3.3. Aún están en el mismo archivo AppServiceProvider.php, en la función boot debemos llamar al método estático Schema y pasarle el parámetro 191 con la finalidad de conectarnos a la base de datos de MariaDB.
public function boot()
{
Schema::defaultStringLength(191);
}
3. Creando la base de datos MariaDB:
3.1. Puedes crear desde phpMyAdmin, MySQL WorkbenchSQLyog u otro de tu preferencia - en mi caso uso SQLyog.
3.2. Crear la base de datos de nombre test-laravel por script o modo gráfica considerando el utf8_spanish_ci.
CREATE DATABASE `test-laravel`
/*!40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci */;
USE `test-laravel`;
4. Creando las tablas desde Laravel:
4.1. Desde el terminal de VS Code ingresamos el comando "php artisan make:migration create_role_table". Se debe realizar los mismo pasos para la tabla employee o demás tablas que deseas crear.
4.2. Seguidamente nos ubicamos el directorio database\migrations de nuestro repositorio de trabajo. Se visualizarán 5 ficheros de los cuales 3 de ellos es generado por defecto.
4.3. Modificar el schema de las tablas creadas para lo cual abrimos los siguientes ficheros y agregamos los campos:
2021_04_30_173905_create_role_table.php
public function up()
{
Schema::create('role', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('roles');
$table->timestamps();
});
}
2021_04_30_174329_create_employee_table.php
public function up()
{
Schema::create('employee', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('firstname');
$table->string('lastname');
$table->string('email');
$table->integer('idrole');
$table->timestamps();
});
}
Les recomiendo revisar la documentación oficial de Laravel para entender y conocer acerca de Schema Builder.
4.4. Subimos los cambios hacia la base de datos haciendo uso del comando "php artisan migrate" desde el terminal de VS Code.
4.5. Finalmente validamos ingresando a SQLyog para ver la creación de las tablas en nuestra base de datos test-laravel.
6. Creando la vista Layouts:
6.1. Creamos el directorio layouts dentro del directorio principal views.
6.2. Seguidamente creamos la vista layouts de nombre base.blade.php.
6.3. A continuación agregamos el código html (le podre el titulo de <title>Demo 01 | CRUD con Laravel</title>), y linkeamos los CDNs de bootstrap/4.0.0 para los estilos y font-awesome/5.15.3 para los iconos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width. initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel | Demo 01 - CRUD</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<head>
<body>
</body>
</html>
6.4. Para finalizar la creación de la vista layouts en el archivo AppServiceProvider.php "Providers\AppServiceProvider.php" referenciamos a la librería de Bootstrap y agregamos la línea Paginator::useBootstrap(); en la función boot del mismo archivo - esto nos servirá para realizar el paginado en nuestra lista:
//Referenciar Pagination Bootstrap
use Illuminate\Pagination\Paginator;
public function boot()
{
Schema::defaultStringLength(191);
Paginator::useBootstrap();
}
7. Creando la vista Listar:
7.1. Creamos el directorio employees dentro del directorio principal views.
7.2. Seguidamente creamos la vista listar de nombre list.blade.php.
7.3. Referenciamos a la vista layouts de nombre base.blade.php. donde esta linkeados los estilos e imagénes, incluyendo el titulo del sitio web.
@extends('layouts.base')
7.4. Finalmente agregamos la sección header y footer a nuestra vista listar de nombre list.blade.php. El código html completo se esta vista al final quedariía de la siguiente manera:
@extends('layouts.base')
<header>
<!-- Jumbotron -->
<div class="p-2 text-center bg-light">
<h1 class="mb-3">CRUD con Laravel 8</h1>
</div>
<!-- Jumbotron -->
</header>
<div class="container mt-5">
<div class="row justify-content-center">
<h1>Hola aquí se implementar el listado de empleados</h1>
</div>
</div>
<footer style="position: absolute; width: 100%;" class="bg-light text-center text-white">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #3b5998;"
href="https://www.facebook.com/hadsonpar" target="_blank" role="button">
<i class="fab fa-facebook-f"></i></a>
<!-- Linkedin -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #0082ca;"
href="https://www.linkedin.com/in/hadson-paredes-cordova/" target="_blank"
role="button"><i class="fab fa-linkedin-in"></i></a>
<!-- Github -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #333333;"
href="https://github.com/Hadsonpar/" target="_blank" role="button">
<i class="fab fa-github"></i></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© <script>document.write(new Date().getFullYear());</script> Hadson Paredes | Desarrollado de <i class="fas fa-heart" aria-hidden="true"></i>
por <a href="http://hadsonpar.com" target="_blank">Hadson Paredes</a>
</div>
<!-- Copyright -->
</footer>
8. Registrar la ruta de vista listar:
8.1. Ubicar el archivo web.php que encuentra en el directorio principal routes de nuestro proyecto.
8.2. Agregar el directorio (employees) + la vista (list) en el Route::get (por ahora modificaremos la ruta que viene por defecto - comentamos el en return de la vista welcome):
Route::get('/', function () {
//return view('welcome');
return view('employees/list');
});
8.3. Para finalizar validando levantando el sitio web desde el browser:
9. Implementar funcionalidad a la vista Listar:
Para esto se debe crear el modelo y controlador en relación a la vista listar de nombre list.blade.php para esto se hará la terminal de VS Code:
9.1. Crea el modelo a través de comando "php artisan make:model employee", el modelo creado lo ubicaran en el directorio Models\employee.php
9.2. Crea el controlador a través de comando "php artisan make:controler Employees", el controlador creado lo ubicaras en el directorio de Http\Controllers\EmployeeController.php
9.3. Con el controlador creado iniciaremos la implementación de la función list()
class EmployeeController extends Controller
{
//list employees
public function list(){
$data['employee'] = employee::paginate(4);
return view('employees.list', $data);
}
}
9.4. Seguidamente modificamos el código html desde la vista listar de nombre list.blade.php
Descarga la fuente desde:
Gratitud a Dios 😊 y gracias a todos ustedes por la acogida de este nuevo articulo, éxitos y bendiciones 🙏 y un gran abrazo a todos ✌...!!!
0 Comentarios