暇なときに予定を探せるアプリyoteiPickerをリリースしました。
Laravelで詳細画面の表示について解説していきます。
開発環境
Docker 20.10.7
PHP 7.4.22
Laravel 8.53.1
mySQL 5.7
データベースのツール phpmyadmin
※bootstrapを導入しています。
以下の記事の続きになります。
【Laravel実務に使える】マイグレーションの作成から一覧画面表示まで
【Laravel8】レイアウト共通化 layoutsファイルのapp.blade.phpのコード例
【Laravel】画面遷移させる方法 例：一覧画面から登録画面に遷移
【実務で使えるLaravel】登録画面フォームの作成と新規登録処理を解説
#本記事の流れ
詳細画面を表示させる。
①詳細ボタンの設置
②ルーティングの設定
③コントローラーの編集
④詳細画面の作成
⑤詳細ページを作り込む
⑥一覧画面の詳細ボタンからそれぞれの詳細ボタンに画面遷移させる
#事前準備
本を管理するアプリを想定しています。
users,books,categoryテーブルがあり、以下のように一覧画面があります。
設計の詳細は以下で確認してください。
【Laravel実務に使える】マイグレーションの作成から一覧画面表示まで：https://qiita.com/kamome_susume/items/4013dfcc9c0b93db7ce1
#実際に詳細画面を表示させていこう
事前準備が確認できたところで、現在は一覧画面があるのみなので、詳細ページに遷移できるように設定しましょう。
##①詳細ボタンの設置
作成日の横に詳細ボタンを設置します。
現在は以下のようになっています。
resources>views>book>index.php
@extends('layouts.app')
@section('content')
<h1>本を管理</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ブックナンバー</th>
<th>ブック名</th>
<th>作成日</th>
</tr>
</thead>
<tbody>
@foreach ($books as $book)
<tr>
<td>{{ $book->book_id }}</td>
<td>{{ $book->book_name }}</td>
<td>{{ $book->created_at }}</td>
</tr>
@endforeach
</tbody>
</table>
<a href="{{ route('book.create') }}">本の登録へ</a>
@endsection
resources>views>book>index.phpに詳細ボタンを設置するためのコードを追加してください。
@extends('layouts.app')
@section('content')
<h1>本を管理</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ブックナンバー</th>
<th>ブック名</th>
<th>作成日</th>
</tr>
</thead>
<tbody>
@foreach ($books as $book)
<tr>
<td>{{ $book->book_id }}</td>
<td>{{ $book->book_name }}</td>
<td>{{ $book->created_at }}</td>
<td><a href="" class="btn btn-primary">詳細</a></td>
</tr>
@endforeach
</tbody>
</table>
<a href="{{ route('book.create') }}">本の登録へ</a>
@endsection
このように詳細ボタンが設置できました。
※まだ詳細ページやルーティング、リンクの設定をしていないため、詳細ボタンをクリックしても何も変化はありません。
##②ルーティングの設定
次にルーティングの設定をしていきましょう。
routes>web.phpを以下のように編集してください。
// 一覧画面の表示
Route::get('/', [BookController::class, 'index'])->name('book.index');
// 本の登録画面の表示
Route::get('/create', [BookController::class, 'create'])->name('book.create');
// 本の登録処理
Route::post('/store', [BookController::class, 'store'])->name('book.store');
// 本の詳細
Route::get('/show/{id}', [BookController::class, 'show'])->name('book.show');←追加
##③コントローラーの編集
次に、詳細ページを表示できるようにコントローラーを編集しましょう。
app>Http>controllers>BookController.phpを編集します。
※詳細画面の表示の処理は一番したの処理にあります。
<?php
namespace App\Http\Controllers;
use App\Models\Book;
use Illuminate\Http\Request;
class BookController extends Controller
{
public function __construct()
{
$this->book = new Book();
}
/**
* 一覧画面
*/
public function index()
{
$books = $this->book->findAllBooks();
return view('book.index', compact('books'));
}
/**
* 登録画面
*/
public function create(Request $request)
{
return view('book.create');
}
/**
* 登録処理
*/
public function store(Request $request)
{
$registerBook = $this->book->InsertBook($request);
return redirect()->route('book.index');
}
/**
* 詳細画面の表示
*/
public function show($id)
{
$book = Book::find($id);
return view('book.show', compact('book'));
}
}
##④詳細画面の作成
次に詳細画面ページを作成します。
resources>views>bookの下にshow.blade.phpを作成してください。
resources>views>book>show.blade.phpを編集します。
まずは以下のように画面遷移ができるかどうか確認してから詳細ページを作り込んでいきます。
<h1>詳細確認</h1>
これで、URLにshow/3みたいに打ち込んでみて、ページに遷移できたらひとまずルーティングやコントローラの設定の成功です。
URLに/show/1とかshow/3とか打ち込んでみる。
URLが/show/1で詳細確認にページ遷移できたらOK
##⑤詳細ページを作り込む
簡易的に画面遷移のテストが確認できたところで、詳細画面を作り込んでいきます。
resources>views>book>show.blade.phpを以下のように編集しましょう。
@extends('layouts.app')
@section('content')
<h1>詳細確認</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ブックナンバー</th>
<th>ブック名</th>
<th>作成日</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $book->book_id }}</td>
<td>{{ $book->book_name }}</td>
<td>{{ $book->created_at }}</td>
</tr>
</tbody>
</table>
@endsection
$bookについて
コントローラーで$bookを定義し、compact関数で'book'と渡していましたね。
これにより、show.blade.phpに渡された'book'は$bookで使うことができます。
$bookには、1つ分のレコードの情報が格納されています。
例：
$book->book_idとか$book->book_nameとすれば、データベースに格納されてるカラムの情報にアクセスできるのがLarabelで必須のポイントです。
詳細画面は以下のようにできました。
##⑥一覧画面の詳細ボタンからそれぞれの詳細ボタンに画面遷移させる
最後に、一覧画面から詳細ページに遷移できるように、詳細ボタンのリンクを追記します。
追記する箇所は、resources>views>book>index.blade.phpです。
<td><a href="" class="btn btn-primary">詳細</a></td>
以下のように編集しましょう。
<td><a href="{{ route('book.show', ['id'=>$book->book_id]) }}" class="btn btn-primary">詳細</a></td>
完成するindex.blade.php
@extends('layouts.app')
@section('content')
<h1>本を管理</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ブックナンバー</th>
<th>ブック名</th>
<th>作成日</th>
</tr>
</thead>
<tbody>
@foreach ($books as $book)
<tr>
<td>{{ $book->book_id }}</td>
<td>{{ $book->book_name }}</td>
<td>{{ $book->created_at }}</td>
<td><a href="{{ route('book.show', ['id'=>$book->book_id]) }}" class="btn btn-primary">詳細</a></td>
</tr>
@endforeach
</tbody>
</table>
<a href="{{ route('book.create') }}">本の登録へ</a>
@endsection
詳細ボタンをクリックしてみると、それぞれの詳細ページに遷移できます。
最後までありがとうございます。
もし質問などがありましたら、コメントにてお願いします。
参考になりましたら、LGTMをお願いします。
暇なときに予定を探せるアプリyoteiPickerをリリースしました。