目次
- プロジェクトを作成する
- データベースファイルを作成する
- Visual Studio Code を設定する
- .env を編集して初期設定する
- タイムゾーンと言語を設定する
- Webサーバを起動して終了する
- マイグレーションファイルを生成する
- テスト用データを設定する
- モデルを作成する
- コントローラを作成する
- ルートを定義する
- データベースからデータを取り出す
- トップページにリンクを設置する
- ビューを使ってレコードを表示する
- コメントを個別に表示するページを作成する
- コメント投稿機能を実装する
- 投稿内容を検証する
- 投稿内容を編集する
- 投稿コメントを削除する
- テストの自動化を実現する
- テストカバレッジを計測する
- 複数のLinuxコマンドを実行し，履歴からも実行する
- ビューをレイアウト化する
- Bootstrap を導入する
- SQLite を操作する
- フェイカでシーダを拡張する
- ページネーションを作る
- シーダに登録日時と更新日時を追加する
- 一覧表示を更新日時の降順にする
- フラッシュメッセージを表示する
- スタイルシートでデザインを整える
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 の導入前のデザインです．
Bootstrap を導入するだけで，マージンやフォントなど，デザインが若干ではありますが変化しました．
次に，コメントの一覧ページの表示をカード型にして，タイトルと本文も表示するようにデザインを変更します．
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
一覧表示がカード型のデザインに変化しました．
さらに，投稿フォームのデザインに 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 を追加するだけで，デザインが美しくなりました．
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
さらに編集画面 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
