Bootstrap 5를 사용한 Laravel 8 페이지 매김 예제

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/laravel/laravel-8-pagination-example-using-bootstrap-5

이 글에서는 부트스트랩 5를 사용하여 라라벨 8 페이지네이션을 구현하는 방법의 예를 공유할 것입니다. 대용량 데이터가 있는 테이블이 있고 페이지별로 표시하려는 경우 라라벨에서 페이지네이션을 수행하는 것은 결과당 제한에 따라 달라집니다.

1단계: 라라벨 설치

Laravel 페이지 매김 튜토리얼로 시작합니다. 로컬에 Laravel 8이 설치되어 있지 않은 경우 아래 명령을 실행하십시오.

composer create-project --prefer-dist laravel/laravel crud

2단계: 데이터베이스 구성

Laravel 프로젝트가 최신인 경우 데이터베이스 자격 증명을 업데이트해야 합니다. Laravel 8 프로젝트에서 .env 파일을 열기만 하면 됩니다.
.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name_here
DB_USERNAME=your_database_username_here
DB_PASSWORD=your_database_password_here

3단계: 마이그레이션 설정

이 예에서는 사용자 테이블을 사용하고 있으며 여기에 사용자 이름 필드를 추가하겠습니다. 아래의 마이그레이션 예를 참조하십시오.

<?php

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

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name')->nullable();
            $table->string('email')->unique();
            $table->string('username')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

이제 아래의 명령을 실행해 봅시다.

php artisan migrate

4단계: 모델 설정

아래는 Laravel 페이지 매김에 사용하는 User 모델의 코드 예제입니다.

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'users';

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'username',
        'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    /**
     * Always encrypt password when it is updated.
     *
     * @param $value
     * @return string
     */
    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = bcrypt($value);
    }
}

5단계: Faker를 사용하여 가짜 데이터 생성

이제 Laravel 패키지Faker를 사용하여 사용자 테이블에 대한 가짜 데이터를 생성해 보겠습니다.

Database\Factories\UserFactory 클래스에서 페이커를 수정하고 구현할 것입니다.

<?php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

class UserFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name(),
            'email' => $this->faker->unique()->safeEmail(),
            'username' => $this->faker->unique()->userName,
            'email_verified_at' => now(),
            'password' => 'test', // password
            'remember_token' => Str::random(10),
        ];
    }

    /**
     * Indicate that the model's email address should be unverified.
     *
     * @return \Illuminate\Database\Eloquent\Factories\Factory
     */
    public function unverified()
    {
        return $this->state(function (array $attributes) {
            return [
                'email_verified_at' => null,
            ];
        });
    }
}

그런 다음 Database\Seeders\DatabaseSeeder 클래스에서 run() 메서드 내부에 아래 코드를 추가합니다.

\App\Models\User::factory(100)->create();

전체 코드는 다음과 같습니다.

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        \App\Models\User::factory(100)->create();
    }
}

이제 아래의 명령을 실행해 봅시다.

php artisan db:seed

그리고 사용자 테이블에 100개의 가짜 데이터를 생성합니다.

6단계: 라라벨 페이지네이션 예시를 위한 컨트롤러 및 라우트 생성

아래의 다음 명령을 실행하여 UsersController를 생성합니다.

php artisan make:controller UsersController

그런 다음 아래 코드를 UsersController 파일에 넣습니다.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UsersController extends Controller
{
    /**
     * Display all users
     * 
     * @return \Illuminate\Http\Response
     */
    public function index() 
    {
        $users = User::latest()->paginate(10);

        return view('users.index', compact('users'));
    }
}

위에서 볼 수 있듯이 각 페이지에 10개의 결과가 있는 latest() 메서드 다음에 paginate()를 호출합니다. 결과를 페이지별로 표시할 수 있습니다. Laravel 페이지 매김에 대한 자세한 내용은 여기를 방문하십시오.

그런 다음 경로를 만듭니다.

Route::get('/users', 'App\Http\Controllers\UsersController@index')->name('users.index');

7단계: Our Laravel Pagination을 위한 블레이드 보기 추가

리소스/보기에/사용자 폴더를 만든 다음 index.blade.php를 만듭니다.

이제 다음과 같아야 합니다: resources/views/users/index.blade.php

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Laravel 8 Pagination Demo - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container mt-5">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col" width="1%">#</th>
                    <th scope="col" width="15%">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col" width="10%">Username</th>
                </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                        <tr>
                            <th scope="row">{{ $user->id }}</th>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->username }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="d-flex">
                {!! $users->links() !!}
            </div>
        </div>
    </body>
</html>

위에서도 볼 수 있듯이 {!! $users->links() !!} Laravel 8 페이지 매김이 우리 보기에 표시되도록 하는 기능입니다.

추가의:

App\Providers\AppServiceProvider 클래스에서 부트스트랩 페이지네이터를 지원하려면 boot() 함수 내부에 아래 코드를 추가해야 합니다.

Paginator::useBootstrap();

전체 코드:

<?php

namespace App\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

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

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

이제 Laravel 8 페이지 매김을 구현하는 방법에 대한 기본 예제가 있습니다. 도움이 되었으면 합니다.

이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/laravel/laravel-8-pagination-example-using-bootstrap-5를 방문하십시오.

행복한 코딩 :)