Laravel 9 CRUD 예제 3부 : 페이지네이션(Pagination)
Laravel 9 CRUD 예제
- Laravel 9 CRUD 초급 예제 1부 : Setting & Create- Laravel 9 CRUD 초급 예제 2부 : Read & Update & Delete
- Laravel 9 CRUD 예제 3부 : 페이지네이션(Pagination)
- Laravel 9 CRUD 예제 4부 : 유효성 검사(Validation)
라라벨 공부
Step 0. Setting
이번 페이지네이션을 진행하는 프로젝트는 Laravel CRUD 초급 예제를 끝낸 뒤를 기준으로 진행합니다.
이전 포스트를 보지 않으신 분이라도 페이지네이션(Pagination) 만드는 데 있어 도움이 될 것입니다.
Step 1. Basic Pagination
라라벨에서 지원하는 페이지네이션 함수를 사용하는 부분입니다.
이전 강의를 진행하신 분들 중 product의 개수가 10개를 넘어가시는 분들은 아래와 같이 스타일이 깨집니다.
위 사진에는 보이지 않지만, 아래로 스크롤을 내리면 이미지에 스타일이 적용되지 않은 것이 존재할 것입니다.
이는 제가 resources/view/products/index.blade.php 에서
{{-- layout 으로 --}}
@extends('products.layout')
{{-- 아래 html 을 @yield('content') 에 보낸다고 생각하시면 됩니다. --}}
@section('content')
<h2 class="mt-4 mb-3">Product List</h2>
<a href="{{route("products.create")}}">
<button type="button" class="btn btn-dark" style="float: right;">Create</button>
</a>
<table class="table table-striped table-hover">
<colgroup>
...
</colgroup>
<thead>
...
</thead>
<tbody>
{{-- blade 에서는 아래 방식으로 반복문을 처리합니다. --}}
{{-- Product Controller의 index에서 넘긴 $products(product 데이터 리스트)를 출력해줍니다. --}}
@foreach ($products as $key => $product)
...
@endforeach
</tbody>
</table>
{{-- 라라벨 기본 지원 페이지네이션 --}}
{{-- 라라벨의 지원 스타일을 적용해야 함 --}}
{!! $products->links() !!}
@endsection가장 아래에 $products->links()에서 출력해주기 때문입니다.
여기서 $products에서 links 메서드를 사용할 수 있는 이유는
app/Http/Controllers/ProductController.php에서 paginate(10)을 통해
$products에 페이지네이션 객체를 넣기 때문입니다.
...
class ProductController extends Controller
{
private $product;
public function __construct(product $product){
// Laravel 의 IOC(Inversion of Control) 입니다
// 일단은 이렇게 모델을 가져오는 것이 추천 코드라고 생각하시면 됩니다.
$this->product = $product;
}
public function index(){
// products 의 데이터를 최신순으로 페이징을 해서 가져옵니다.
$products = $this->product->latest()->paginate(10);
// produce/index.blade 에 $products 를 보내줍니다
return view('products.index', compact('products')); //
}
...
}Cursor Paginator 인스턴스 메서드들은 라라벨 공식 문서 번역 사이트의 잘 나와있습니다.
라라벨 9.x - 페이지네이션
라라벨 한글 메뉴얼 9.x - 페이지네이션
laravel.kr
다시 본문으로 돌아와서 스타일을 깨지지 않게 라라벨 기본 부트스트립 css 적용시키는 방법이 있습니다.
아래 코드처럼 AppServiceProvide boot()에 코드를 추가시키시면 됩니다.
app/Providers/AppServiceProvide.php
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::useBootstrapFive();
Paginator::useBootstrapFour();
}
}이제 아래와 같이 스타일이 깨지지 않을 것입니다.
Step 2. Custom Pagination
$products->links()을 통해 출력된 html이 마음에 들지 않는 경우 수정할 수 있습니다.
우선 아래 명령어를 project 바로 아래의 cmd에서 실행시킵니다.
php artisan vendor:publish --tag=laravel-pagination그러면 resources/views/vendor/pagination에 파일들이 생길 것 입니다.
저는 bootstrap-5.blade가 마음에 들어 이 버전으로 바꾸기로 했습니다.
바꾸는 방법은 app/Providers/AppServiceProvide.php의 boot의 코드를 추가하면 됩니다.
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Paginator::useBootstrapFive();
Paginator::useBootstrapFour();
Paginator::defaultView('vendor/pagination/bootstrap-5');
}
}이제 아래와 같이 기본 스타일에서 살짝 바뀐 것을 알 수 있습니다.
같이 생긴 다른 페이지네이션 파일이 걸리적거리므로 사용하지 않는 것은 지웁시다.
app/Providers/AppServiceProvide.php의 pagination 경로도 아래처럼 바꾸겠습니다.
...
class AppServiceProvider extends ServiceProvider
{
...
public function boot()
{
...
// Paginator::defaultView('vendor/pagination/bootstrap-5');
Paginator::defaultView('bootstrap-5');
}
}이런 식으로 하면 똑같이 작동을 잘하는 것을 볼 수 있습니다.
같은 방법을 통해 이름도 바꿀 수 있으며 이제 html도 자유롭게 수정이 가능합니다.
이로써 라라벨의 페이지네이션, Laravel Pagination 기능에 대해 알아보았습니다.