Tenra Katsuno
軌跡

Laravelでパンくず機能実装してみる

2021.01.18

見出し画像

今回はlaravelでパンくずリストを実装していきます。初めて実装しましたが簡単に実装出来るイメージです。

大まかな流れを。

インストール

パンくずリストを作成

html画面で見れるか確認

見た目を自分好みにしたい場合

ざっとこんな感じです。特に難しいことはしてません。

目次

  1. 前提
  2. インストール
  3. パンくずリストを作成
  4. html画面で見れるか確認
  5. 見た目を自分好みにしたい場合
  6. 参考にさせて頂いたサイト
  7. まとめ

前提

ユーザー管理機能が実装されている前提で進めていきます。

インストール

とりあえず、githubを参考にインストールしましょう。

composer require davejamesmiller/laravel-breadcrumbs:5.x

パンくずリストを作成

上記のインストールが完了したらroutes/breadcrumbs.phpを作成して、そこにリストを作っていきます。

// ホーム
Breadcrumbs::for('home', function ($trail) {
   $trail->push('ホーム', url('/'));
});

// ユーザー系______________________________

// ホーム > ユーザー詳細
Breadcrumbs::for('user_show', function ($trail, $user) {
 $trail->parent('home');
 $trail->push('ユーザー詳細', route('my_page', $user->id));   1
});

// ホーム > ユーザー詳細 > ユーザー編集
Breadcrumbs::for('user_edit', function ($trail, $user) {
 $trail->parent('user_show', $user);                        2
 $trail->push('ユーザー編集', route('user_edit', $user->id));
});

// ホーム > ユーザー詳細 > ユーザー編集 > メール編集
Breadcrumbs::for('user_edit_email', function ($trail, $user) {
 $trail->parent('user_edit', $user);
 $trail->push('メール編集', route('emailchange_before', $user->id));
});

// ホーム > ユーザー詳細 > ユーザー編集 > パスワード編集
Breadcrumbs::for('user_edit_password', function ($trail, $user) {
 $trail->parent('user_edit', $user);
 $trail->push('パスワード編集', route('passwordchange_before', $user->id));
});

1, route()を使うとweb.phpに設定しているルートのnameを呼び出して使用できます。引数も忘れずに設定です。

2, parent()を設定する時でも呼び出されている側が引数を求めている場合は引数をparent()にも設定する必要があります。

html画面で見れるか確認

パンくずを表示したいところにコードを追加していく。

@yield('breadcrumbs')

見た目を自分好みにしたい場合

php artisan vendor:publish --provider="DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider"

上記のコマンドを実行するとconfig/breadcrumbs.phpが作成されます。以下のコードを記載します。

@if(count($breadcrumbs))
 <ul class="breadcrumb">
   @foreach($breadcrumbs as $breadcrumb)
     @if($breadcrumb->url && !$loop->last)
       <li class="breadcrumb-item"><a href="{{$breadcrumb->url}}">{{$breadcrumb->title}}</a></li>
     @else
       <li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
     @endif
   @endforeach
 </ul>
@endif

上記のファイルは.php拡張子で生成されますが、viewとして使用する場合には.blade.phpに変更しないとviewとして使用出来ません。

以上で実装できるかと思います。

参考にさせて頂いたサイト

参考サイト

まとめ

インストールして、ファイルを作成し、viewで表示する。

カスタムする場合は、コマンドを使ってファイルの設定をする。この場合はphp拡張子ではなく、viewとして使うので、blade.phpに変更する必要がある。

そこまで難しく無い実装かと思いますし、ユーザー側にとっても便利な機能だと思います、手軽に出来るので良いです。

今回はこんな感じで！

以上！

programing-note