Laravel 10 入門トップページ

« 戻る 次へ »

目次

  1. プロジェクトを作成する
  2. データベースファイルを作成する
  3. Visual Studio Code を設定する
  4. .env を編集して初期設定する
  5. タイムゾーンと言語を設定する
  6. Webサーバを起動して終了する
  7. マイグレーションファイルを生成する
  8. テスト用データを設定する
  9. モデルを作成する
  10. コントローラを作成する
  11. ルートを定義する
  12. データベースからデータを取り出す
  13. トップページにリンクを設置する
  14. ビューを使ってレコードを表示する
  15. コメントを個別に表示するページを作成する
  16. コメント投稿機能を実装する
  17. 投稿内容を検証する
  18. 投稿内容を編集する
  19. 投稿コメントを削除する
  20. テストの自動化を実現する
  21. テストカバレッジを計測する
  22. 複数のLinuxコマンドを実行し，履歴からも実行する
  23. ビューをレイアウト化する
  24. Bootstrap を導入する
  25. SQLite を操作する
  26. フェイカでシーダを拡張する
  27. ページネーションを作る
  28. シーダに登録日時と更新日時を追加する
  29. 一覧表示を更新日時の降順にする
  30. フラッシュメッセージを表示する
  31. スタイルシートでデザインを整える

Laravel によるコメント掲示板の開発

Bootstrap を導入する

ビューのレイアウト化ができたので，ここで Bootstrap を導入して，ページのデザインを美しく整えるとともに，スマートフォン等にも対応したレスポンシブ Web デザインにします．Bootstrap のトップページから「Docs」リンクをクリックし，[Get started with Bootstrap] の「Quick start」 - 「2. Include Bootstrap’s CSS and JS.」 にあるコードを利用すると良いでしょう．なお，直前のリンクはバージョン 5.3.2 ですので，最新のバージョンを利用すると良いでしょう． 

Quick start のテンプレート
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

すでにテンプレート化ができているため，resources/views/layouts/default.blade.php ファイルに数行のコードを加える（Quick start のコードをコピーする）だけで可能です．あるいは，Quick start のコードの中に，必要な要素を書き加えても構いません．その際は <html lang="en"> の部分を <html lang="ja"> に書き換えてください． 

resources/views/layouts/default.blade.php
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
    @yield('content')
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap の導入前のデザインです．

laravel10-2023-comment-28.png

Bootstrap を導入するだけで，マージンやフォントなど，デザインが若干ではありますが変化しました．

laravel10-2023-comment-44.png

次に，コメントの一覧ページの表示をカード型にして，タイトルと本文も表示するようにデザインを変更します． 

resources/views/comments/index.blade.php
@extends('layouts.default')

@section('title', 'コメントの一覧')

@section('content')
<h1 class="my-5">コメント一覧</h1>

@foreach ($comments as $comment)
    <div class="card mb-3">
        <div class="card-body">
            <h5 class="card-title">
                <a href="{{ route('comments.show', ['comment_id' => $comment->id]) }}">
                    {{ $comment->title }}
                </a>
            </h5>
            <p class="card-text">{{ $comment->body }}</p>
        </div>
    </div>
@endforeach


<h1 class="my-5">コメント投稿</h1>
<div>
    <form method="post" action="{{ route('comments.store') }}">
        @csrf
        <p>
            <label for="title">Title: </label>
            <input type="text" name="title" id="title" value="{{ old('title') }}" >
            @if ($errors->has('title'))
                <span class="error">{{ $errors->first('title') }}</span>
            @endif
        </p>

        <p>
            <label for="body">Body: </label>
            <textarea name="body" id="body" rows="4" cols="50">{{ old('body') }}</textarea>
            @if ($errors->has('body'))
                <span class="error">{{ $errors->first('body') }}</span>
            @endif
        </p>
        <p>
            <input type="submit" value="投稿">
        </p>
    </form>
</div>
@endsection

一覧表示がカード型のデザインに変化しました．

laravel10-2023-comment-45.png

さらに，投稿フォームのデザインに Bootstrap を導入します．Bootstrap フォームのデザイン方法はこちらを参照してください． 

resources/views/comments/index.blade.php（抜粋）
<h1 class="my-5">コメント投稿</h1>
<div>
    <form method="post" action="{{ route('comments.store') }}">
        @csrf
        <p>
            <label for="title">Title: </label>
            <input type="text" name="title" id="title" value="{{ old('title') }}" class="form-control">
            @if ($errors->has('title'))
                <span class="error">{{ $errors->first('title') }}</span>
            @endif
        </p>

        <p>
            <label for="body">Body: </label>
            <textarea name="body" id="body" rows="4" cols="50" class="form-control">{{ old('body') }}</textarea>
            @if ($errors->has('body'))
                <span class="error">{{ $errors->first('body') }}</span>
            @endif
        </p>
        <p>
            <button type="submit" class="btn btn-primary">投稿</button>
        </p>
    </form>
</div>

フォームに Bootstrap の class を追加するだけで，デザインが美しくなりました．

laravel10-2023-comment-46.png

index と同じように show.blade.php にも Bootstrap のカードを適用します． 

resources/views/comments/show.blade.php
@extends('layouts.default')

@section('title', 'コメント')

@section('content')
<h1 class="my-5">コメント</h1>

<div class="card mb-3">
    <div class="card-header">
        ID : {{ $comment->id }}
    </div>
    <div class="card-body">
        <p class="card-text">Title : </p>
        <h5 class="card-title">{{ $comment->title }}</h5>
        <p class="card-text">Body : </p>
        <p class="card-text">{{ $comment->body }}</p>
    </div>
    <div class="card-footer">
        Created at : {{ $comment->created_at }}<br>
        Updated at : {{ $comment->updated_at }}
    </div>
</div>
<p>
    <a href="{{ route('comments.edit', ['comment_id' => $comment->id]) }}">
        ［編集］
    </a>
</p>
<div>
    <form action="{{ route('comments.destroy', ['comment_id' => $comment->id]) }}" method="post">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger">コメントの削除</button>
    </form>
</div>
@endsection
laravel10-2023-comment-47.png

さらに編集画面 edit.balde.php にも適用します． 

resources/views/comments/edit.blade.php
@extends('layouts.default')

@section('title', 'コメント編集')

@section('content')
<h1 class="my-5">コメント編集</h1>
<div>
    <form method="post" action="{{ route('comments.update') }}" enctype='multipart/form-data'>
        @csrf
        @method('PATCH')
        <input type="hidden" name="comment_id" value="{{ $comment->id }}">
        <p>
            <label for="title">Title: </label>
            <input type="text" name="title" id="title" value="{{ $comment->title }}{{ old('title') }}" class="form-control">
            @if ($errors->has('title'))
                <span class="error">{{ $errors->first('title') }}</span>
            @endif
        </p>
        <p>
            <label for="body">Body: </label>
            <textarea name="body" id="body" rows="4" cols="50" class="form-control">{{ $comment->body }}{{ old('body') }}</textarea>
            @if ($errors->has('body'))
                <span class="error">{{ $errors->first('body') }}</span>
            @endif
        </p>
        <p>
            <button type="submit" class="btn btn-primary">更新</button>
        </p>
    </form>
</div>
@endsection
laravel10-2023-comment-48.png

目次に戻る

« 戻る 次へ »