必要なビューを定義する
データベースの操作に必要なビューを作成します。必要なビューはbooksテーブル内容一覧、booksテーブル詳細表示、新規作成、更新の四つの画面です。それぞれの画面のソースコードは以下の通りです。
show-books.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books一覧</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Title</th>
<th>詳細</th>
<th>更新</th>
<th>削除</th>
</tr>
@foreach ($books as $book)
<tr>
<td>{{ $book->id }}</td>
<td>{{ $book->title }}</td>
<td><a href="{{ route('books.detail', $book) }}">詳細</a></td>
<td><a href="{{ route('books.edit', $book) }}">更新</a></td>
<td>
<form action="{{ route('books.destroy', $book) }}" method="POST">
@csrf
@method("DELETE")
<button type="submit">削除</button>
</form>
</td>
</tr>
@endforeach
</table>
<a href="{{ route('books.create') }}">新規作成</a>
</body>
</html>コントローラーからbooksテーブルの一覧を取得し、idとtitleを一覧で表示するようにしています。また、新規作成、詳細の表示、更新、削除を行えるようにリンクやボタンを追加しています。
show-detail-book.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books一覧</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>{{ $book->id }}</td>
<td>{{ $book->title }}</td>
<td>{{ $book->author }}</td>
<td>{{ $book->price }}</td>
</tr>
</table>
<a href="{{ route('books.show') }}">一覧に戻る</a>
</body>
</html>コントローラーからデータを取得し、id、title、author、priceを表示します。また、booksテーブルの一覧に戻れるようにリンクを用意しています。
create-book.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booksの新規作成</title>
</head>
<body>
<form action="{{ route('books.store') }}" method="POST">
@csrf
<label for="title">title</label>
<input type="text" name="title" id="title">
<label for="author">author</label>
<input type="text" name="author" id="author">
<label for="price">price</label>
<input type="text" name="price" id="price">
<button type="submit">送信</button>
</form>
<a href="{{ route('books.show') }}">一覧に戻る</a>
</body>
</html>入力フォームにtitle、author、priceを入力できるようにしています。また、booksテーブルの一覧に戻れるようにリンクを用意しています。
edit-book.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booksの更新</title>
</head>
<body>
<form action="{{ route('books.update', $book) }}" method="POST">
@csrf
@method("PATCH")
<label for="title">title</label>
<input type="text" name="title" id="title" value="{{ $book->title }}">
<label for="author">author</label>
<input type="text" name="author" id="author" value="{{ $book->author }}">
<label for="price">price</label>
<input type="text" name="price" id="price" value="{{ $book->price }}">
<button type="submit">更新</button>
</form>
<a href="{{ route('books.show') }}">一覧に戻る</a>
</body>
</html>入力フォームにtitle、author、priceを入力できるようにしています。入力フォームの初期値は、コントローラーから取得した情報を使用しています。また、booksテーブルの一覧に戻れるようにリンクを用意しています。
以上で、必要なビューの定義は終了しました。次回はルーティング設定を行います。