Comment utiliser la pagination Bootstrap dans Laravel Blade (Tutoriel)

Comme on le voit souvent dans les applications, vous souhaiterez peut-être répartir vos données sur plusieurs pages. Heureusement, nous pouvons facilement y parvenir en utilisant les fonctionnalités de pagination intégrées de Laravel.

Étape 1 : Installation de Laravel

Commencez par créer un nouveau projet Laravel si vous ne l'avez pas déjà fait.

Ouvrez votre terminal et exécutez :

composer create-project laravel/laravel bootstrap-pagination-demo
cd bootstrap-pagination-demo

Étape 2 : Création du modèle et migration

Generate a Movies Model along with a migration file to define the movie database schema:

php artisan make:model Movie -m

Modifiez le fichier de migration pour définir le schéma de la table « movies » :

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    public function up(): void
    {
        Schema::create('movies', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('country');
            $table->date('release_date');
            $table->timestamps();
        });
    }
    public function down(): void
    {
        Schema::dropIfExists('movies');
    }
};

Étape 3 : Exécuter la migration

Exécutez la migration pour créer la table « films » dans la base de données :

php artisan migrate

Étape 4 : Création de l'usine

Générez une usine qui définit à quoi ressemblent les données du film en exécutant :

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

class MovieFactory extends Factory
{
    public function definition(): array
    {
        return [
            'title' => $this->faker->sentence,
            'country' => $this->faker->country,
            'release_date' => $this->faker->dateTimeBetween('-40 years', 'now'),
        ];
    }
}

Maintenant, ajoutez le code suivant pour définir la structure et les données de nos faux films :

php artisan make:factory MovieFactory --model=Movie

Maintenant, ajoutez le code suivant pour définir la structure et les données de nos faux films :

Étape 5 : Création du seeder

Créez un seeder pour remplir la table « films » en exécutant :

php artisan make:seeder MovieSeeder

Dans cet exemple, nous allons le remplir avec 1 000 enregistrements de données aléatoires :

<?php
namespace Database\Seeders;
use App\Models\Movie;
use Illuminate\Database\Seeder;
class MovieSeeder extends Seeder
{
    public function run(): void
    {
        Movie::factory()->count(10000)->create();
    }
}

Maintenant, ajoutez le code suivant pour définir la structure et les données de nos faux films :

php artisan db:seed --class=MovieSeeder

Étape 6 : Création du contrôleur

Générez un contrôleur nommé MovieController :

php artisan make:controller MovieController

Dans le fichier MovieController.php, chargez les films depuis la base de données et transmettez-les à la vue :

<?php
namespace App\Http\Controllers;
use App\Models\Movie;
class MovieController extends Controller
{
    public function index()
    {
        $movies = Movie::paginate(10); // changer en fonction du nombre de page que vous voulez voir 
        return view('movies.index', compact('movies'));
    }
}

Remarque : Vous pouvez définir ici le nombre d'éléments par page en remplaçant « 10 » par la valeur souhaitée.

Étape 7 : Création d'une vue

Créez un fichier de vue Blade (index.blade.php) dans resources/views/movies/ :

            @foreach($movies as $movie)
                <tr>
                    <td>{{ $movie->title }}</td>
                    <td>{{ $movie->country }}</td>
                    <td>{{ $movie->release_date }}</td>
                </tr>
            @endforeach
        </tbody>
    {{ $movies->links() }}
    </table>

Maintenant, ajoutez le code suivant pour définir la structure et les données de nos faux films :

php artisan db:seed --class=MovieSeeder

Étape 8 : Ajout de l'itinéraire

Pour définir la route vers MovieController, modifiez routes/web.php et ajoutez :

use App\Http\Controllers\MovieController;
Route::get('/movies', [MovieController::class, 'index']);

Étape 9 : Correction du style de pagination Bootstrap

Par défaut, Laravel suppose que vous avez besoin des liens de pagination dans le style Tailwind. Cela semblera faux puisque nous souhaitons utiliser Bootstrap dans notre exemple. Pour résoudre ce problème, modifiez app/Providers/AppServiceProvider.php comme suit :

<?php
namespace App\Providers;
use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Paginator::useBootstrap(); // For Bootstrap 5
        // Paginator::useBootstrapFour(); // For Bootstrap 4
        // Paginator::useBootstrapThree(); // For Bootstrap 3
    }
}

Étape 10 : tester l'application

php artisan serve