En este articulo veremos la 3ra parte en relación al desarrollo del CRUD con Laravel 8, PHP 7.3.27 y MariaDB v10.4.18 haciendo uso con IDE Visual Studio Code, como resultado final tendremos como la siguiente página:
Ahora bien, implementaremos el método Read (leer los datos desde la base de datos) realizando los siguientes pasos:
En este caso al método Read lo describiré como listar, y la función a crear se llamará list()
1. Creando la vista Listar:
1.1. Creamos el directorio employees dentro del directorio principal views.
1.2. Seguidamente creamos la vista listar de nombre list.blade.php.
1.3. Referenciamos a la vista layouts de nombre base.blade.php. donde esta linkeados el CDN de estilos e imágenes, incluyendo el titulo del sitio web.
@extends('layouts.base')
1.4. Finalmente agregamos la sección header y footer a nuestra vista listar de nombre list.blade.php. El código html completo de esta vista al final quedaría de la siguiente manera (aun esta pendiente la implementación):
@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>
2. Registrar la ruta de prueba para validar vista listar:
2.1. Ubicar el archivo web.php que encuentra en el directorio principal routes de nuestro proyecto.
2.2. Agregar el directorio (employees/) + la vista (list) en el Route::get(por ahora modificaremos la ruta que viene por defecto - comentaremos la sentencia del return //return view('welcome');):
Route::get('/', function () {
//return view('welcome');
return view('employees/list');
});
2.3. Para validar el registro de la ruta, levantamos el sitio web desde el browser a través de la IP HOST=127.0.0.1 y PUERTO=8000 (aplica para este ejemplo, normalmente la ip es lo mismo pero tu puerto puede varias por temas de uso o conflico).
3. Registrar la ruta adiconando el controlador y la vista listar:
3.1. Nuevamente ubicamos el archivo web.php que encuentra en el directorio principal routes de nuestro proyecto.
3.2. Eliminar o comentar el siguiente archivo:
Route::get('/', function () {
//return view('welcome');
return view('employees/list');
});
3.3. Seguidamente agregar el siguiente código para poder acceder al controlador y la vista listrar con la con la finalidad de poder leer los datos:
Route::get('/', 'EmployeesController@list');
4. 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 abrirá la terminal de VS Code:
4.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
4.2. Crea el controlador a través de comando "php artisan make:control EmployeesController", el controlador creado lo ubicaras en el directorio Http\Controllers\EmployeesController.php
4.3. En el controlador que acabamos de crear, realizaremos la implementación de la función que nos permitirá retornar los valores de tabla employee; primeramente debe referenciar al modelo employee y seguidamente crear la función list():
<?php
namespace App\Http\Controllers;
use App\Models\employee;//Debe referencia el modelo
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class EmployeesController extends Controller
{
//list employees
public function list(){
//Se define una llave en refrencia al modelo employee
$data['keyemployees'] = employee::paginate(4);//Páginación
return view('employees.list', $data);//Pasamos el valor $data a la vista
}
}
4.4. Seguidamente modificamos el código html de la vista listar de nombre list.blade.php que corresponde al directorio employees\list.blade.php:
Remplaza la sección <h1>Hola aquí se implementar el listado de empleados</h1> por lo siguiente:
<div class="col-md-10">
<h2 class="text-center mb-5">Lista de Empleados</h2>
<table class="table table bordered table-striped text-center">
<thead class="table-dark">
<tr>
<th>Nombres<th>
<th>Apellidos<th>
<th>Email<th>
<th>Rol<th>
</tr>
</thead>
<tbody>
@foreach($keyemployees as $item)
<tr>
<td>{{$item->firstname}}<td>
<td>{{$item->lastname}}<td>
<td>{{$item->email}}<td>
<td>{{$item->idrole}}<td>
</tr>
@endforeach
</tbody>
</table>
<div class="row justify-content-center">
{{ $keyemployees->links() }}
</div>
</div>
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