本記事ではLaravelのルーティングを実践的に利用して学ぶチュートリアルを紹介します。
要件・設計を記載しますので、見ながらチュートリアルを進めるもよし、自分で頑張って作成してみるもよし、自分の実力に合わせてご利用ください。
要件
ECサイトを作ろうと思っており、モック（モックアップ）を作りたい。
デザインは作成中なので、出来上がってきたら、それをはめ込むだけでいいように、[TOP]＞[商品一覧]＜＞[商品詳細]の遷移ができるだけの仕組みを作って欲しい。データベースなども今は不要です。
商品一覧画面には複数（3件程度）の商品へのリンクが表示されていて欲しい。
商品詳細画面のURLには商品IDがあり、画面にもそれを表示して欲しい。
設計
サイトマップ
データベース
今回データベースは利用しません。
実装
Controllerを作成
商品情報を取り扱うControllerを以下コマンドで作成します。
php artisan make:controller ItemController次にアクションを作成しますが、ここではRouterを作成するための情報としてアクションのみ作成して、中身は後で作成する仮作成状態とします。
今回はTopページをtop、商品一覧をindex、商品詳細をdetailとします。
以下をControllerのclass内に追加してください。
// TOP
public function top()
{
}
// 一覧
public function index()
{
}
// 詳細
public function detail($id)
{
}Routerを作成
routes/web.phpを上記で作成したControllerに合わせて、以下のように追記しましょう。
use App\Http\Controllers\ItemController;
Route::get('/', [ItemController::class, 'top'])->name('top');
Route::get('/items', [ItemController::class, 'index'])->name('item-list');
Route::get('/items/{id}', [ItemController::class, 'detail'])->name('item-detail');各機能の作成
仮作成したControllerに機能を載せていきます。
TOP画面
Viewを表示する以外の処理はないので、以下のようにtopアクションに追加します。
// TOP
public function top()
{
return view('top');
}続いてViewを作成します。
画面名と商品一覧へのリンクを表示するのみです。
resources/views/top.blade.phpを作成して、中身は以下のようにします。
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>TOP</h1>
<p><a href="{{ route('item-list') }}">商品一覧</a></p>
</body>
</html>商品一覧
商品IDを配列で持たせてViewに渡すようにします。
Controllerに以下のようにindexアクションの中身を追加します。
// 一覧
public function index()
{
$ids = [123, 456, 789];
return view('index', compact('ids'));
}ViewはControllerから渡された配列を利用してリンクや表示を作成します。
resources/views/index.blade.phpを作成して、中身は以下のようにします。
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>商品一覧</h1>
@foreach($ids as $id)
<p><a href="{{ route('item-detail', $id) }}">商品ID: {{ $id }}</a></p>
@endforeach
</body>
</html>商品詳細
URLから取得した商品IDを、そのままViewに渡します。
Controllerに以下のようにdetailアクションの中身を追加します。
// 詳細
public function detail($id)
{
return view('detail', compact('id'));
}Viewは渡された商品IDを表示するのと、商品一覧へ戻るリンクを表示します。
resources/views/detail.blade.phpを作成して、中身は以下のようにします。
<!DOCTYPE html>
<html lang="ja">
<body>
<p>商品ID： {{ $id }}</p>
<a href="{{ route('item-list') }}">商品一覧に戻る</a>
</body>
</html>実行確認
ブラウザでhttp://localhost/へアクセスして確認してみましょう。
以下のような画面になると思います。
Follow me!
コメント