【Laravel】掲示板を作成する（6）投稿・編集画面のカテゴリーをプルダウンメニュー化、特定カテゴリーの記事を検索して表示

2020/07/25

Laravelによる掲示板の作成、第6回です。
今回は投稿・編集画面のカテゴリーを「プルダウン」にする方法と「特定カテゴリー投稿を表示」する方法についてポストします。

【目次】
（第1回）1.各種設定
（第1回）2.マイグレーションでDBを作成する
（第2回）3.Eloquent機能を使いモデルのリレーションを設定する
（第2回）4.LaravelのSeed機能とFakerを使ってDBにテストデータを登録する
（第3回）5.一覧画面の作成
（第3回）6.詳細画面の作成
（第4回）7.新規投稿機能の作成
（第4回）8.コメント投稿機能の作成
（第5回）9.投稿編集機能の作成
（第5回）10.投稿の物理削除機能の作成
（今回）11.投稿・編集画面のカテゴリーをプルダウンメニュー化する
（今回）12.特定カテゴリーの記事を検索して表示する

11.投稿・編集画面のカテゴリーをプルダウンメニュー化する

カテゴリーの入力にセレクトボックスを使えるようにします。
Categoriesテーブルのレコードを取得してセット出来るようにします。

モデルファイルに一覧取得用のメソッドを追加

編集ファイル：app\Category.php

/**
 * カテゴリーの一覧を取得
 */
public function getLists()
{
    $categories = Category::orderBy('id','asc')->pluck('name', 'id');

    return $categories;
}

/**

* カテゴリーの一覧を取得

public function getLists()

{

$categories = Category::orderBy('id','asc')->pluck('name', 'id');

return $categories;

}

検索時にpluckメソッドを使用することで、任意のキーのみを取得します。

Postsコントローラーを編集

編集ファイル：app\Http\Controllers\PostsController.php

use App\Post, App\Category;  // 「App\Category」を追記

1	use App\Post, App\Category; // 「App\Category」を追記

createメソッド

/**
 * 投稿フォーム
 */
public function create()
{
    $category = new Category;
    $categories = $category->getLists()->prepend('選択', '');

    return view('bbs.create', ['categories' => $categories]);
}

/**

* 投稿フォーム

public function create()

{

$category = new Category;

$categories = $category->getLists()->prepend('選択', '');

return view('bbs.create', ['categories' => $categories]);

}

↑ prependメソッドで、作成した配列の先頭に任意の項目（選択というテキスト）を先頭に追加しています。

editメソッド

投稿編集用画面にもカテゴリーのプルダウンを追加します。

/**
 * 編集フォーム
 */
public function edit($id)
{
    $category = new Category;
    $categories = $category->getLists();

    $post = Post::findOrFail($id);
    return view('bbs.edit', ['post' => $post, 'categories' => $categories]);
}

/**

* 編集フォーム

public function edit($id)

{

$category = new Category;

$categories = $category->getLists();

$post = Post::findOrFail($id);

return view('bbs.edit', ['post' => $post, 'categories' => $categories]);

}

ビューを編集

新規投稿フォーム

編集ファイル：resources\views\bbs\create.blade.php

<select 
    id="category_id"
    name="category_id"
    class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}"
    value="{{ old('category_id') }}"
>
    @foreach($categories as $id => $name)
        <option value="{{ $id }}">{{ $name }}</option>
    @endforeach
</select>}

<select

id="category_id"

name="category_id"

class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}"

value="{{ old('category_id') }}"

@foreach($categories as $id => $name)

@endforeach

</select>}

投稿編集画面

編集ファイル：resources\views\bbs\edit.blade.php

<select 
    id="category_id"
    name="category_id"
    class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}"
>
    @foreach($categories as $id => $name)
        <option value="{{ $id }}" 
            @if ($post->category_id == $id) 
                selected
            @endif
        >{{ $name }}</option>
    @endforeach
</select>

<select

id="category_id"

name="category_id"

class="form-control {{ $errors->has('category_id') ? 'is-invalid' : '' }}"

@foreach($categories as $id => $name)

<option value="{{ $id }}"

@if ($post->category_id == $id)

selected

@endif

>{{ $name }}</option>

@endforeach

</select>

編集画面キャプチャ

12.特定カテゴリーの記事を検索して表示する

PHPフレームワーク Laravel入門第2版

created by Rinker

一覧ページにカテゴリーを絞るためのボタンを設け、同一カテゴリのみの一覧を作成してみます。

ビューの編集

カテゴリーのリンクを追加

編集ファイル：resources\views\bbs\index.blade.php

indexビューに以下を追加。
ついでに、何件の投稿が表示されるのかをカウントするメッセージも付けてみます。

<div class="mt-4 mb-4">
    <p>{{ $posts->total() }}件が見つかりました。</p>
</div>

<div class="mt-4 mb-4">
    @foreach($categories as $id => $name)
    <span class="btn"><a href="{{ route('bbs.index', ['category_id'=>$id]) }}" title="{{ $name }}">{{ $name }}</a></span>
    @endforeach
</div>

<p>{{ $posts->total() }}件が見つかりました。</p>

</div>

@foreach($categories as $id => $name)

<span class="btn"><a href="{{ route('bbs.index', ['category_id'=>$id]) }}" title="{{ $name }}">{{ $name }}</a></span>

@endforeach

</div>

ページ送りを編集

カテゴリーのを指定しながらページ送りが出来るよう修正します。

<div class="d-flex justify-content-center mb-5">
    {{ $posts->appends(['category_id' => $category_id])->links() }}
</div>

</div>

Postsコントローラーを編集

リンクを作成するためのカテゴリマスターをindexメソッドでも取得するようにし、投稿を取得する部分にWHEREを使ってみます。

indexメソッドの引数にrequestを追加し、カテゴリーを指定している / してしないをif文で分けています。

編集ファイル：app\Http\Controllers\PostsController.php

/**
 * 一覧
 */
public function index(Request $request)
{
    // カテゴリ取得
    $category = new Category;
    $categories = $category->getLists();

    $category_id = $request->category_id;
    if (!is_null($category_id)) {
        $posts = Post::where('category_id', $category_id)->orderBy('created_at', 'desc')->paginate(10);
    } else {
        $posts = Post::orderBy('created_at', 'desc')->paginate(10);
    }

    return view('bbs.index', [
        'posts' => $posts, 
        'categories' => $categories, 
        'category_id'=>$category_id
    ]);
}

/**

* 一覧

public function index(Request $request)

{

// カテゴリ取得

$category = new Category;

$categories = $category->getLists();

$category_id = $request->category_id;

if (!is_null($category_id)) {

$posts = Post::where('category_id', $category_id)->orderBy('created_at', 'desc')->paginate(10);

} else {

$posts = Post::orderBy('created_at', 'desc')->paginate(10);

}

return view('bbs.index', [

'posts' => $posts,

'categories' => $categories,

'category_id'=>$category_id

]);

}

一覧画面キャプチャ

全件表示

ひとまずここまでの結果をキャプチャします。

「WEBサービス」で絞った場合

↑ ページ送りで2ページ目に入っても、WEBサービスカテゴリーはきちんと保持されています。

ローカルスコープを使ってみる

このままでも良さそうですが、せっかくなのでLaravel（Eloquent）の機能である「ローカルスコープ」を使ってみます。

モデルファイルへ『"scope" + アクション名』という形のメソッドを作成します。
引数（$category_id）が空の場合は何もせず return させます。

Postモデルを編集

編集ファイル：app\Post.php

/**
 * 任意のカテゴリを含むものとする（ローカル）スコープ
 * 
 */
public function scopeCategoryAt($query, $category_id)
{
    if (empty($category_id)) {
        return;
    }

    return $query->where('category_id', $category_id);
}

/**

* 任意のカテゴリを含むものとする（ローカル）スコープ

public function scopeCategoryAt($query, $category_id)

{

if (empty($category_id)) {

return;

}

return $query->where('category_id', $category_id);

}

Postコントローラーを編集

編集ファイル：app\Http\Controllers\PostsController.php

if (!empty($category_id)) {
    $posts = Post::where('category_id', $category_id)->orderBy('created_at', 'desc')->paginate(10);
} else {
    $posts = Post::orderBy('created_at', 'desc')->paginate(10);
}

↓↓↓↓↓ 以下に変更 ↓↓↓↓↓

// scopeを利用した検索
$posts = Post::orderBy('created_at', 'desc')
	->categoryAt($category_id) // ←★これ
	->paginate(10);

if (!empty($category_id)) {

$posts = Post::where('category_id', $category_id)->orderBy('created_at', 'desc')->paginate(10);

} else {

$posts = Post::orderBy('created_at', 'desc')->paginate(10);

}

↓↓↓↓↓ 以下に変更 ↓↓↓↓↓

// scopeを利用した検索

$posts = Post::orderBy('created_at', 'desc')

->categoryAt($category_id) // ←★これ

->paginate(10);

ifの判定がなくなったのと、チェーンメソッド形式なので見やすくなった気がしますね。

-Laravel
-プルダウン, ローカルスコープ

: 【Laravel】テンプレートエンジン「Blade」の構文

LaravelのBladeテンプレートの基本構文をまとめます。

: 【Laravel】掲示板を作成する（7）クエリーの調整（Eagerロード）、キーワード検索機能

Laravelによる掲示板の作成、第7回です。今回は『N+1』問題を解決するEagerロードというクエリーの調整方法と、一覧画面にキーワード検索機能を追加してみたいと思います。

: 【Laravel】フォームリクエストを使ったバリデーション方法

「フォームリクエスト」とは、バリデーション処理を外部クラスにまとめることができる機能。任意のリクエストで呼び出すことが可能で、外部フィルとすることでコントローラー内のコードもスッキリさせることができます。

: 【Laravel】掲示板を作成する（5）投稿編集機能、投稿の物理削除

Laravelによる掲示板の作成、第5回です。今回は「投稿修正」機能と「投稿の物理削除」機能についてポストしたいと思います。物理削除ではリレーション設定により、関連するコメントも一緒に削除するようにします。

: LaravelでphpMyAdminの設定と、Breezeで認証をできるようにまでしてみる

Laravel Sailを使って新規プロジェクトを立ち上げ、「phpMyAdmin」の稼働と、「Breeze」で認証の仕組みまでを作ってみるテストです。

PREV: 【VSCode】Laravelのweb.phpに表示される「Undefined type 'Route'」のエラーメッセージを消す方法
NEXT: 【SQL】縦方向に保存されている進捗の様なレコードを条件づけて抽出する方法

【Laravel】掲示板を作成する（6）投稿・編集画面のカテゴリーをプルダウンメニュー化、特定カテゴリーの記事を検索して表示

11.投稿・編集画面のカテゴリーをプルダウンメニュー化する

モデルファイルに一覧取得用のメソッドを追加

Postsコントローラーを編集

createメソッド

editメソッド

ビューを編集

新規投稿フォーム

投稿編集画面

編集画面キャプチャ

12.特定カテゴリーの記事を検索して表示する

ビューの編集

カテゴリーのリンクを追加

ページ送りを編集

Postsコントローラーを編集

一覧画面キャプチャ

全件表示

「WEBサービス」で絞った場合

ローカルスコープを使ってみる

Postモデルを編集

Postコントローラーを編集

【DIY】2x4や1x4など、SPF材サイズ早見表 (563,574)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,406)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,025)

【歴史】江戸幕府歴代将軍一覧 (143,287)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (130,127)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (129,522)