Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Laravel / ¿Como paginar con Laravel 11?

¿Como paginar con Laravel 11?

Por jc mouse sábado, agosto 24, 2024

Se utiliza la paginación para poder mostrar al usuario una gran cantidad de datos de una forma ordenada en forma de «paginas» de tal forma que, uno, no se abrume al usuario con mucha información en pantalla y dos, no saturar los recursos de procesamiento al manipular muchos datos de los que probablemente no usemos ni el uno por ciento.

Laravel ya nos ofrece metodos para implementar esta paginación de una forma muy sencilla y rápida.

Crear paginación en Laravel

A continuación una guía paso a paso sobre cómo usar la paginación en Laravel.

¿Qué necesitamos?

  • Proyecto base de Laravel 11
  • Conocimientos basicos de Laravel

Paso 1. Creamos la estructura de nuestro proyecto

  • Migrations: migrations/2024_08_24_xxxxxx_create_students_table.php
  • Factories: StudentFactory.php
  • Controllers: StudentController.php
  • Models: Student.php
  • Views: studens/index.blade.php

Paso 2. Tabla Student

Definimos las instrucciones necesarias para la creación de la tabla STUDENTS. en nuestro archivo de migración

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('students');
    }
};

Paso 3. El modelo (Student.php)

Solo debemos crear el archivo Student.php , no es necesario realizar ningun cambio.

Paso 4. Fabrica de datos (StudentFactory.php)

Nos ayudamos de los factories (Fabricas) de Laravel para llenar datos en nuestra tabla

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Student>
 */
class StudentFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->email()
        ];
    }
}

Y modificamos el archivo DatabaseSeeder.php para incluir nuestro factory de la siguiente forma:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Student;
class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        Student::factory()
        ->count(10000)                
        ->create();
    }
}

Finalmente ejecutamos el comando:

php artisan migrate:refresh --seed

Paso 5. El controlador (StudentController.php)

Desde la función index() cargamos la lista de estudiantes con el comando paginate(10) y retornamos la vista junto con nuestra lista de estudiantes.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;
class StudentController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        $students = Student::paginate(10);        
        return view('students.index', compact('students'));
    }

Paso 6. La vista (index.blade.php)

En el archivo index se implementa la tabla para mostrar los resultados de la paginación, nos ayudamos de Bootstrap para los estilos css.

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Laravel Pagination - JC Mouse</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <body>                
        <div class="container">
            <h3  class="text-center">Xavier's School for Gifted Youngsters</h3>
            <div class="row justify-content-md-center">
                <div class="col col-lg-6">
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr class="thead-dark">
                                <th scope="col">#</th>
                                <th scope="col">Student Name</th>
                                <th scope="col">Email</th>                        
                            </tr>
                        </thead>
        
                        <tbody>
                            @foreach($students as $student)
                            <tr>
                                <th scope="row">{{ $student->id }}</th>
                                <td>{{ $student->name }}</td>
                                <td>{{ $student->email }}</td>                        
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div>
                        {!! $students->links('pagination::bootstrap-4') !!}                 
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Paso 7. La ruta (web.php)

Para concluir debemos declarar la ruta para acceder a nuestro recurso. Modificamos nuestro archivo web.php para incluir la ruta students.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\StudentController;

Route::get('/students', [StudentController::class, 'index']);

Desde el navegador probamos el proyecto y tenemos:

enjoy!!!

Tags

Artículos similares

Descargar Doodle Google Pacman

Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s[...]

Reporte Padrón electoral con imágenes y Data Matrix

En este post diseñaremos un reporte de un padrón electoral con dos columnas que contendrá los certificados de sufragio e[...]

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF[...]

Recortar imagen

En esta oportunidad dejo a considerancion un codigo realizado en Java/Netbeans para recortar una imagen visualmente Vide[...]

Autenticación en php con MySql y POO

Autenticación en una pagina web es el proceso de confirmar que un usuario es quien dice ser, asi de simple. En el siguie[...]

Sub Tablas: Agregar tablas dentro de otras tablas en Java

El JTable de Java es un gran componente para mostrar datos en una tabla de una forma rápida y sencilla, sin embargo en v[...]