てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

[ はじめて の Laravel ] リンク一覧ページ を 作る No.1

今回は リンク一覧を 表示させるための インデックスページ ( 白紙ページ ) を作成していこうと思います

何から順にやるのが 良いのかわからないのですが まずは ビューを作って コントローラを作って ルーティング の設定 の順に 進めます

テンプレートの作成

laravel は Bladeテンプレート というものがあって .blade.php という ファイル拡張子で resources/views ディレクトリ に 置きます

今回は リンク一覧ページを作るので resources / views / links / template.blade.php という 名前で テンプレートを作ります

<!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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

インデックスページの作成

次に このテンプレートを使って インデックスページ ( resources / views / links / index.blade.php ) を作ります

@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 に 移動してから

php artisan make:controller LinkController --resource

を 叩きます

すると app / Http / Controllers / LinkController.php に ファイルが生成されるので public function index() の 中身を書き換えます

    public function index()
    {
        return view('links.index');
    }

今回は resources / views 以下の links / index.blade.php を 表示させるので 'links.index' になります

ルーティングの設定

ルーティング は routes / web.php で 設定します

今回は app / Http / Controllers / LinkController.php の index を 表示させるので

Route::resource('/links', App\Http\Controllers\LinkController::class)->only(['index']);

と なります

ページの確認

ルーティング で '/links' で ページを表示させるようにしたので

http://localhost:50000/links/ で 確認できます

links.index とだけ 表示されていれば ページの作成はできています

Related Article

[ はじめて の Laravel ] リンク一覧ページ を 作る No.4

詳細へ »

[ はじめて の Laravel ] リンク一覧ページ を 作る No.3

詳細へ »

Docker に Laravel 8 の 開発環境を作る

詳細へ »