ホームページ > 記事 > PHPフレームワーク > Laravelを使ったページング機能の実装方法
Laravelを使ったページング機能の実装方法
- PHPzオリジナル
- 2023-04-19 10:09:142846ブラウズ
Laravel は、多くの最新機能と開発に適したツールを提供する人気の PHP 開発フレームワークで、開発者が Web サイトやアプリケーションをより効率的に構築できるようにします。 Webアプリケーションを開発する過程で、クエリ結果をページに表示する必要が生じることがありますが、この記事ではLaravelを使ってページング機能を実装する方法を紹介します。
1. ページングの概要
ページングとは、大量のデータを複数のページに分割して表示する方法のことで、通常は各ページに何件のデータを表示するかを設定します。この値を超えると自動的にページがめくられます。このアプローチにより、ページの読み込み時間と帯域幅の使用量が大幅に削減され、ユーザーはデータの表示と移動が容易になります。
2. Laravel のページング操作
Laravel は、ページング関数を実装するための Paginator クラスを提供します。ページング インスタンスを取得するには、クエリ結果オブジェクトを Paginator の make メソッドに渡し、各ページに表示するデータの量を指定します。インスタンスで render メソッドを呼び出すと、Laravel がページネーション リンクを自動的に生成できます。
具体的なコードの実装を見てみましょう。
- Laravel のインストール
次のコマンドを実行して Laravel をインストールします:
composer create-project --prefer-dist laravel/laravel blog
- Mysql データベース テーブルの作成
データベース テーブルの記事を作成し、サンプル データを挿入します。
CREATE TABLE `articles` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `body` text COLLATE utf8mb4_unicode_ci NOT NULL, `created_at` timestamp NULL DEFAULT NULL, `updated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 1', 'This is article 1 content', '2021-01-01 12:00:00', '2021-01-01 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 2', 'This is article 2 content', '2021-01-02 12:00:00', '2021-01-02 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 3', 'This is article 3 content', '2021-01-03 12:00:00', '2021-01-03 12:00:00');
INSERT INTO `articles` (`title`, `body`, `created_at`, `updated_at`) VALUES ('Article 4', 'This is article 4 content', '2021-01-04 12:00:00', '2021-01-04 12:00:00');
- 記事モデルの定義
app/Models ディレクトリに Article.php ファイルを作成し、次の内容を追加します。 code:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
use HasFactory;
protected $fillable = ['title', 'body'];
public function getDateAttribute()
{
return $this->created_at->format('Y-m-d');
}
}
- ArticlesControllerの定義
app/Http/ControllersディレクトリにArticlesController.phpファイルを作成し、次のコードを追加します:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Article;
class ArticlesController extends Controller
{
public function index(Request $request)
{
$articles = Article::paginate(2);
return view('articles.index', compact('articles'));
}
}- 記事ビューの作成
resources/views ディレクトリに記事ディレクトリを作成し、このディレクトリにindex.blade.php ファイルを作成して、次のコードを追加します:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8">
@foreach($articles as $article)
<div class="card mb-3">
<div class="card-header">
{{ $article->title }}
</div>
<div class="card-body">
<p class="card-text">{{ $article->body }}</p>
</div>
<div class="card-footer text-right">
<small class="text-muted">{{ $article->date }}</small>
</div>
</div>
@endforeach
{{ $articles->links() }}
</div>
</div>
</div>
@endsection
分析:
- まず、foreach ループで各記事を表示します。
- $article->title プロパティと $article->body プロパティを使用して、Article モデルから記事のタイトルと本文を取得します。
- $article->date 属性で記事の公開日を取得します。
- $articles->links() メソッドを呼び出すと、Laravel がページ分割リンクを自動的に生成します。
- ページ スタイルの定義
public/css ディレクトリに app.css ファイルを作成し、次のコードを追加します:
.card {
margin-bottom: 20px;
}
.pagination {
margin-top: 20px;
}
In /views/layouts ディレクトリのファイル app.blade.php に、次のコードを追加します。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<ul class="navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
@yield('content')
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
分析:
- Bootstrap4 CSS スタイルを app.blade.php に追加しました。 。
- Bootstrap 4 の JS ファイルも導入しましたが、Laravel には必要な JS ファイルを public/js/app に自動的にパッケージ化できる Webpack パッケージ化ツールが付属しているため、自分で手動で導入する必要はありません。 .js ファイル。
- ページング機能のテスト
http://127.0.0.1:8000/articles にアクセスすると、記事リストが表示されていることがわかります。ページング リンクを通じて複数のページを切り替えることができます。
ここで注意する必要があるのは、コントローラーで paginate メソッドを呼び出すときに渡されるパラメーター 2 は、ページに表示されるデータの数を表すということです。この値が小さすぎると、 、ページング リンクが多くなり、ページが混乱します。この値が大きすぎると、ページに表示されるデータ量が非常に多くなり、リクエストが長時間ブロックされ、ページを開く速度に影響します。 、メモリオーバーフローなどの問題も発生するため、実際の状況に基づいて慎重に設定されています。
3. 概要
Laravel は、ページング機能を実装するための強力な Paginator クラスを提供しており、少ないコードで簡単に実装できます。この記事では、Paginator を使用して MySQL データベースのデータをページに表示する方法を紹介します。また、ページ分割された結果でモデル プロパティを使用する方法も示しました。 Web サイトやアプリケーションの開発時に大量のデータを表示する必要がある場合、ページングは不可欠な機能であり、ユーザー エクスペリエンスを大幅に向上させるだけでなく、サーバーのオーバーヘッドを効果的に削減できます。
以上がLaravelを使ったページング機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。