【Laravel】掲示板を作成する（3）一覧画面、詳細画面の作成

2020/07/01

Laravelによる掲示板の作成、第３回です。
今回は「一覧画面の作成」と「詳細画面の作成」についてポストしたいと思います。

【目次】
（第1回）1.各種設定
（第1回）2.マイグレーションでDBを作成する
（第2回）3.Eloquent機能を使いモデルのリレーションを設定する
（第2回）4.LaravelのSeed機能とFakerを使ってDBにテストデータを登録する
（今回）5.一覧画面の作成
（今回）6.詳細画面の作成

5.一覧画面の作成

まずは一覧画面を作成します。

コントローラーの作成

以下のコマンドを発行して、コントローラーファイルを生成します。
実行すると app\Http\Controllers\PostsController.php が作成されます。

$ php artisan make:controller PostsController

1	$ php artisan make:controller PostsController

ルーティングの設定

編集ファイル：routes\web.php
開発版の接続先URLは http://localhost:8000/bbs/ となるよう設定。

# 追記
Route::get('bbs', 'PostsController@index');

1 2	# 追記 Route::get('bbs', 'PostsController@index');

Postsコントローラーを編集

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

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;	// ←★忘れず追記

class PostsController extends Controller
{
    public function index()
    {
        $posts = Post::orderBy('created_at', 'desc')->get();
        return view('bbs.index', ['posts' => $posts]);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post; // ←★忘れず追記

class PostsController extends Controller

{

public function index()

{

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

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

}

投稿を作成日時の降順で取得し index.blade にデータを渡してビューを生成する内容です。

Laravelのローカルサーバーを起動するのを忘れずに。

$ php artisan serve

1	$ php artisan serve

ビューの作成

以前作成した「star」ページ用のレイアウトファイルをコピーして bbslayout.blade.php を作成。Bootstrapを使えるようヘッダにCDNのリンクを記述します。

各ビューファイルは以下の様に設置作成します。

# レイアウト用
resources/views/layout/bbslayout.blade.php

# ヘッダ、フッター
resources/views/layout/bbsheader.blade.php
resources/views/layout/bbsfooter.blade.php

# 一覧用
resources/views/bbs/index.blade.php

レイアウト

編集ファイル：resources/views/layout/bbslayout.blade.php

<DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>@yield('title')｜magicmissile.info</title>
<meta name="description" itemprop="description" content="@yield('description')">
<meta name="keywords" itemprop="keywords" content="@yield('keywords')">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<!-- Custom styles for this template -->
<link href="/css/bbs/sticky-footer.css" rel="stylesheet">

@yield('pageCss')
</head>
<body>

@yield('header')

<div class="container">
    @yield('content')
</div><!--//container-->

@yield('footer')

</body>
</html>

<head>

<title>@yield('title')｜magicmissile.info</title>

@yield('pageCss')

</head>

<body>

@yield('header')

@yield('content')

</div>

@yield('footer')

</body>

</html>

ヘッダ

編集ファイル：resources/views/layout/bbsheader.blade.php

@section('header')
<header class="navbar navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="{{ url('/bbs/') }}">LaravelPjt BBS</a>
    </div>
</header>
@endsection

@section('header')

<a class="navbar-brand" href="{{ url('/bbs/') }}">LaravelPjt BBS</a>

</div>

</header>

@endsection

フッタ

編集ファイル：resources/views/layout/bbsfooter.blade.php

@section('footer')
<footer class="footer">
    <div class="container">
        <p class="text-center text-muted">LaravelPjt BBS System by toogie.</p>
    </div>
</footer>
@endsection

@section('footer')

<p class="text-center text-muted">LaravelPjt BBS System by toogie.</p>

</div>

</footer>

@endsection

フッタ用CSSを作成

編集ファイル：public\css\bbs\sticky-footer.css

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 100px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #cdcdcd;
}
 
 
/* Custom page CSS
-------------------------------------------------- */
.container .text-muted {
    margin: 20px 0;
}

/* Sticky footer styles

-------------------------------------------------- */

html {

position: relative;

min-height: 100%;

}

body {

/* Margin bottom by footer height */

margin-bottom: 100px;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

/* Set the fixed height of the footer here */

height: 60px;

background-color: #cdcdcd;

}

/* Custom page CSS

-------------------------------------------------- */

.container .text-muted {

margin: 20px 0;

}

一覧画面

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

@extends('layout.bbslayout')

@section('title', 'LaravelPjt BBS 投稿の一覧ページ')
@section('keywords', 'キーワード1,キーワード2,キーワード3')
@section('description', '投稿一覧ページの説明文')
@section('pageCss')
<link href="/css/bbs/style.css" rel="stylesheet">
@endsection

@include('layout.bbsheader')

@section('content')
<div class="table-responsive">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>カテゴリ</th>
            <th>作成日時</th>
            <th>名前</th>
            <th>件名</th>
            <th>メッセージ</th>
            <th>処理</th>
        </tr>
        </thead>
        <tbody id="tbl">
        @foreach ($posts as $post)
            <tr>
                <td>{{ $post->id }}</td>
                <td>{{ $post->category->name }}</td>
                <td>{{ $post->created_at->format('Y.m.d') }}</td>
                <td>{{ $post->name }}</td>
                <td>{{ $post->subject }}</td>
                <td>{!! nl2br(e(Str::limit($post->message, 100))) !!}
                @if ($post->comments->count() >= 1)
                    <p><span class="badge badge-primary">コメント：{{ $post->comments->count() }}件</span></p>
                @endif
                </td>
                <td class="text-nowrap">
                    <p><a href="" class="btn btn-primary btn-sm">詳細</a></p>
                    <p><a href="" class="btn btn-info btn-sm">編集</a></p>
                    <p><a href="" class="btn btn-danger btn-sm">削除</a></p>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
@endsection

@include('layout.bbsfooter')

@extends('layout.bbslayout')

@section('title', 'LaravelPjt BBS 投稿の一覧ページ')

@section('keywords', 'キーワード1,キーワード2,キーワード3')

@section('description', '投稿一覧ページの説明文')

@section('pageCss')

@endsection

@include('layout.bbsheader')

@section('content')

<thead>

<tr>

<th>メッセージ</th>

</tr>

</thead>

@foreach ($posts as $post)

<tr>

<td>{{ $post->category->name }}</td>

<td>{{ $post->created_at->format('Y.m.d') }}</td>

<td>{{ $post->subject }}</td>

<td>{!! nl2br(e(Str::limit($post->message, 100))) !!}

@if ($post->comments->count() >= 1)

<p><span class="badge badge-primary">コメント：{{ $post->comments->count() }}件</span></p>

@endif

</td>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection

@include('layout.bbsfooter')

foreachでデータをぐるぐる回すのが基本形。
$post->***の形式で、表示させたい項目を指定します。

「カテゴリ」はモデルにてリレーション設定が行われているので、{{ $post->category->name }}で取得（表示）可能です。

メッセージは改行に対応しつつ80文字で省略されるようにしており、コメント数は{{ $post->comments->count() }}で取得できるようです。
このあたりの関数の仕様一覧が見たいところ。

一覧画面キャプチャ

ここまでの内容を実行させると、以下のように50件全件を表示しています。
Bootstrapを使用しているので、レスポンシブに対応。相変わらずボタンの色が少々やかましいのがそれっぽいですね。

掲示板というか管理画面感がありすぎたので、あとで『KENT-WEB』風を目指してみることにしますが、ひとまずはこのまま進めることとします。

6.詳細画面の作成

PHPフレームワーク Laravel実践開発

created by Rinker

秀和システム

では次に投稿の「詳細画面」を実装します。

ルーティングの追加

routes/web.php を開き、showメソッドにルーティングが通るよう設定します。

Route::resource('bbs', 'PostsController', ['only' => ['index', 'show']]);

1	Route::resource('bbs', 'PostsController', ['only' => ['index', 'show']]);

get ではなく resource を使うこととします。
第三引数に only を使うと、ホワイトリストとしてメソッドを指定できます。

Route::resourceについては以下を参照。

Postsコントローラーを編集

showアクションを作成します。

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

/**
 * 詳細
 */
public function show(Request $request, $id)
{
    $post = Post::findOrFail($id);

    return view('bbs.show', [
        'post' => $post,
    ]);
}

/**

* 詳細

public function show(Request $request, $id)

{

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

return view('bbs.show', [

'post' => $post,

]);

}

詳細画面ビューの作成

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

@extends('layout.bbslayout')

@section('title', 'LaravelPjt BBS 投稿の詳細ページ')
@section('keywords', 'キーワード1,キーワード2,キーワード3')
@section('description', '投稿詳細ページの説明文')
@section('pageCss')
<link href="/css/bbs/style.css" rel="stylesheet">
@endsection

@include('layout.bbsheader')

@section('content')
<div class="container mt-4">
    <div class="border p-4">
        <!-- 件名 -->
        <h1 class="h4 mb-4">
            {{ $post->subject }}
        </h1>

        <!-- 投稿情報 -->
        <div class="summary">
            <p><span>{{ $post->name }}</span> / <time>{{ $post->updated_at->format('Y.m.d H:i') }}</time> / {{ $post->category->name }} / {{ $post->id }}</p>
        </div>

        <!-- 本文 -->
        <p class="mb-5">
            {!! nl2br(e($post->message)) !!}
        </p>

        <section>
            <h2 class="h5 mb-4">
                コメント
            </h2>

            @forelse($post->comments as $comment)
                <div class="border-top p-4">
                    <time class="text-secondary">
                        {{ $comment->name }} / 
                        {{ $comment->created_at->format('Y.m.d H:i') }} / 
                        {{ $comment->id }}
                    </time>
                    <p class="mt-2">
                        {!! nl2br(e($comment->comment)) !!}
                    </p>
                </div>
            @empty
                <p>コメントはまだありません。</p>
            @endforelse
        </section>
    </div>
</div>
@endsection

@include('layout.bbsfooter')

@extends('layout.bbslayout')

@section('title', 'LaravelPjt BBS 投稿の詳細ページ')

@section('keywords', 'キーワード1,キーワード2,キーワード3')

@section('description', '投稿詳細ページの説明文')

@section('pageCss')

@endsection

@include('layout.bbsheader')

@section('content')

</h1>

<p><span>{{ $post->name }}</span> / <time>{{ $post->updated_at->format('Y.m.d H:i') }}</time> / {{ $post->category->name }} / {{ $post->id }}</p>

</div>

{!! nl2br(e($post->message)) !!}

</p>

</h2>

@forelse($post->comments as $comment)

{{ $comment->name }} /

{{ $comment->created_at->format('Y.m.d H:i') }} /

</time>

{!! nl2br(e($comment->comment)) !!}

</p>

</div>

@empty

<p>コメントはまだありません。</p>

@endforelse

</section>

</div>

@endsection

@include('layout.bbsfooter')

一覧画面の「詳細ボタン（リンク）」を編集

<p><a href="{{ action('PostsController@show', $post->id) }}" class="btn btn-primary btn-sm">詳細</a></p>

1	<p><a href="{{ action('PostsController@show', $post->id) }}" class="btn btn-primary btn-sm">詳細</a></p>

これで、http://127.0.0.1:8000/bbs/1 というようなURLで詳細が開きます。（なんだか気持ち悪いですねｗ）

リンク作成に関しては下記URLを参照。

詳細ページキャプチャ

一覧ページにページ送り（ページネーション）を追加

現状の投稿一覧だと投稿が増えていくとスクロールが若干大変なので、ページ送りをつけてみます。
PostsControllerのindexメソッド内にて、投稿リストを取得する処理を以下のように変更します。

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

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

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

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

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

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

次に一覧画面用のビューの任意の位置（今回は投稿リストの下の方）にページ送り用のブロックを追記。

編集ファイル： resources/views/posts/index.blade.php

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

</div>

ページングされた一覧画面のキャプチャ

恐ろしく簡単にページ送りが出来てしまった。。。
CakePHPではなかなか苦労したところなんですけどねぇ。Laravel恐るべし。

というところで第３回目はここまでとします。
次回は投稿作成とコメント投稿についての予定です。

-Laravel
-ページ送り, 掲示板

: 【Laravel】掲示板を作成する（4）新規投稿機能、コメント投稿機能

Laravelによる掲示板の作成、第4回です。今回は「新規投稿」機能と「コメント」機能についてポストしたいと思います。

: 【Laravel】フォームでPOST通信してみる

今回はフォーム画面からPOST通信する基礎をさらってみたいと思います。

: 【Laravel】掲示板を作成する（2）Eloquentでのリレーション設定、SeedとFakerでDBにテストデータを登録

Laravel掲示板第２回です。今回はEloquentを使用してのテーブルのリレーションの設定と、SeederとFakerを使ってのテストデータの作成となります。

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

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

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

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

PREV: 【Laravel】掲示板を作成する（2）Eloquentでのリレーション設定、SeedとFakerでDBにテストデータを登録
NEXT: 【Laravel】掲示板を作成する（4）新規投稿機能、コメント投稿機能

【Laravel】掲示板を作成する（3）一覧画面、詳細画面の作成

5.一覧画面の作成

コントローラーの作成

ルーティングの設定

Postsコントローラーを編集

ビューの作成

レイアウト

ヘッダ

フッタ

フッタ用CSSを作成

一覧画面

一覧画面キャプチャ

6.詳細画面の作成

ルーティングの追加

Postsコントローラーを編集

詳細画面ビューの作成

一覧画面の「詳細ボタン（リンク）」を編集

詳細ページキャプチャ

一覧ページにページ送り（ページネーション）を追加

ページングされた一覧画面のキャプチャ

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

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

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

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

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

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