[ はじめて の Laravel ] リンク一覧ページ を 作る No.1
この記事は 2021年 11月 22日 に書かれた記事です。
今回は リンク一覧を 表示させるための インデックスページ ( 白紙ページ ) を作成していこうと思います
何から順にやるのが 良いのかわからないのですが まずは ビューを作って コントローラを作って ルーティング の設定 の順に 進めます
テンプレートの作成
laravel は Bladeテンプレート というものがあって .blade.php という ファイル拡張子で resources/views ディレクトリ に 置きます
今回は リンク一覧ページを作るので resources / views / links / template.blade.php という 名前で テンプレートを作ります
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!doctype html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>@yield('title')</title> <style>@yield('style') </style> <script>@yield('script') </script> </head> <body> <main class="container">@yield('content') </main> <!-- Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body></html> |
インデックスページの作成
次に このテンプレートを使って インデックスページ ( resources / views / links / index.blade.php ) を作ります
01 02 03 04 05 06 07 08 09 10 11 | @extends('links.default')@section('title', 'links.index')@section('content') <section class="my-3 links"> <header> <h2 class="text-center">@yield('title')</h2> </header> </section>@endsection |
テンプレートの選択
ここで出てくる @extends('links.default') が 使用する テンプレートの指定になります
今回は resources / views 以下に links / template.blade.php を 置いたので 名前が 'links.default' になります
テンプレートのセクション
Bladeテンプレート には セクションという 機能が あって テンプレートの内容を 書き換える事ができます
今回の場合 テンプレート側の @yield(‘title’) が @section(‘title’, ‘links.index’) によって 書き換えられ links.index と 表示されます
同名のセクションがあった場合 一番最初に読み出された セクションのみが 反映されます
コントローラの作成
コントローラは コマンドから 雛形を作ります
example-app に 移動してから
1 | php artisan make:controller LinkController --resource |
を 叩きます
すると app / Http / Controllers / LinkController.php に ファイルが生成されるので public function index() の 中身を書き換えます
1 2 3 4 | public function index(){ return view('links.index');} |
今回は resources / views 以下の links / index.blade.php を 表示させるので 'links.index' になります
ルーティングの設定
ルーティング は routes / web.php で 設定します
今回は app / Http / Controllers / LinkController.phpindex を 表示させるので
1 | Route::resource('/links', App\Http\Controllers\LinkController::class)->only(['index']); |
と なります
ページの確認
ルーティング で '/links' で ページを表示させるようにしたので
http://localhost:50000/links/ で 確認できます
links.index とだけ 表示されていれば ページの作成はできています