Laravel8 CRUD処理を使った投稿アプリを作成する その8 ベースレイアウトの作成と反映

# 目的

- ヘッダーをベースレイアウトファイルに記載して反映する方法をまとめる

# 実施環境

- 筆者の実施環境を記載する。
- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 8.6.0 | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |
| Node.jsバージョン | v12.14.1 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでNode.jsをインストールする](https://qiita.com/miriwo/items/73d1546220f1c091a7d5) |

# 前提条件

- 下記の記事の作業が完了していること。
    - [Laravel8 CRUD処理を使った投稿アプリを作成する その7 投稿を表示するページの作成](https://qiita.com/miriwo/items/ef917ae06aae66deab61)

# 前提情報

- 作成するアプリ名は「laravel8_crud」とする。
- 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
- 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
    - [https://github.com/miriwo0104/laravel8_crud/tree/No08](https://github.com/miriwo0104/laravel8_crud/tree/No08)

# 概要

1. ベースレイアウトファイルの作成
1. ビューファイルの編集
1. 確認

# 詳細

1. ベースレイアウトファイルの作成
    1. laravel8_crudディレクトリで下記コマンドを実行してベースレイアウトファイルを開く。

        ```terminal
        $ vi resources/views/layouts/app.blade.php
        ```
    1. 下記の内容をベースレイアウトファイルに記載する。

        ```laravel8_crud/resources/views/layouts/app.blade.php
        <!doctype html>
        <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        
            <!-- CSRF Token -->
            <meta name="csrf-token" content="{{ csrf_token() }}">
        
            <title>{{ config('app.name', 'Laravel') }}</title>
        
            <!-- Scripts -->
            <script src="{{ asset('js/app.js') }}" defer></script>
        
            <!-- Fonts -->
            <link rel="dns-prefetch" href="//fonts.gstatic.com">
            <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
        
            <!-- Styles -->
            <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        </head>
        <body>
            <div id="app">
                <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
                    <div class="container">
                        <a class="navbar-brand" href="{{ url('/') }}">
                            {{ config('app.name', 'Laravel') }}
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                            <span class="navbar-toggler-icon"></span>
                        </button>
        
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <!-- Left Side Of Navbar -->
                            <ul class="navbar-nav mr-auto">
        
                            </ul>
        
                            <!-- Right Side Of Navbar -->
                            <ul class="navbar-nav ml-auto">
                                <!-- Authentication Links -->
                                @guest
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                    </li>
                                    @if (Route::has('register'))
                                        <li class="nav-item">
                                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                        </li>
                                    @endif
                                @else
                                    <li class="nav-item dropdown">
                                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                            {{ Auth::user()->name }}
                                        </a>
        
                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                                            <a class="dropdown-item" href="{{ route('logout') }}"
                                               onclick="event.preventDefault();
                                                             document.getElementById('logout-form').submit();">
                                                {{ __('Logout') }}
                                            </a>
                                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                                @csrf
                                            </form>
        
                                            {{-- 下記を追記する --}}
                                            <a class="dropdown-item" href="{{ route('home') }}">home</a>
                                            <a class="dropdown-item" href="{{ route('input') }}">input</a>
                                            <a class="dropdown-item" href="{{ route('output') }}">output</a>
                                            {{-- 上記までを追記する --}}
                                        </div>
                                    </li>
                                @endguest
                            </ul>
                        </div>
                    </div>
                </nav>
        
                <main class="py-4">
                    @yield('content')
                </main>
            </div>
        </body>
        </html>
        ```
1. ビューファイルの編集
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

        ```terminal
        $ vi resources/views/contents/output.blade.php
        ```
    1. 下記のように編集する。

        ```laravel8_crud/resources/views/contents/output.blade.php
        {{-- 下記を追記する --}}
        @extends('layouts.app')
        
        @section('content')
        {{-- 上記までを追記する --}}
        
        <h1>output</h1>
        
        @foreach ($items as $item)
        <hr>
        <p>{{$item['content']}}</p>
        <a href="{{route('detail', ['content_id' => $item['id']])}}">詳細</a>
        <a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
        @endforeach
        
        {{-- 下記を追記する --}}
        @endsection
        ```
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

        ```terminal
        $ vi resources/views/contents/input.blade.php
        ```
    1. 下記のように編集する。

        ```laravel8_crud/resources/views/contents/input.blade.php
        {{-- 下記を追記する --}}
        @extends('layouts.app')
        
        @section('content')
        {{-- 上記までを追記する --}}
        
        <h1>input</h1>
        
        <form action="{{route('save')}}" method="post">
            @csrf
            <textarea name="content" cols="30" rows="10"></textarea>
            <input type="submit" value="送信">
        </form>
        
        {{-- 下記を追記する --}}
        @endsection
        ```
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

        ```terminal
        $ vi resources/views/contents/edit.blade.php
        ```
    1. 下記のように編集する。

        ```laravel8_crud/resources/views/contents/edit.blade.php
        {{-- 下記を追記する --}}
        @extends('layouts.app')
        
        @section('content')
        {{-- 上記までを追記する --}}
        
        <h1>input</h1>
        
        <!-- 下記を修正 -->
        <form action="{{route('save')}}" method="post">
            @csrf
            <textarea name="content" cols="30" rows="10"></textarea>
            <input type="submit" value="送信">
        </form>
        
        {{-- 下記を追記する --}}
        @endsection
        ```
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

        ```terminal
        $ vi resources/views/contents/detail.blade.php
        ```
    1. 下記のように編集する。

        ```laravel8_crud/resources/views/contents/detail.blade.php
        {{-- 下記を追記する --}}
        @extends('layouts.app')
        
        @section('content')
        {{-- 上記までを追記する --}}
        
        <h1>detail</h1>
        
        <p>投稿ID: {{$item['id']}}</p>
        <p>投稿内容: {{$item['content']}}</p>
        <p>投稿時間: {{$item['created_at']}}</p>
        <a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
        <form action="{{route('delete')}}" method="post">
            @csrf
            <input type="hidden" name="id" value="{{$item['id']}}">
            <input type="submit" value="削除">
        </form>
        
        {{-- 下記を追記する --}}
        @endsection
        ```
1. 確認
    1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

        ```terminal
        $ php artisan serve
        ```
    1. ブラウザで下記にアクセスする。
        - [http://127.0.0.1:8000/output](http://127.0.0.1:8000/output)
    1. ヘッダーが表示されていることを確認し、ユーザ名をクリックする。

        ![laravel8_crud_と_（2_）_Colla_さんが__社員紹介_であなたをメンションしました_🔔.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6f1d326e-a6c8-c9f1-1a53-10c623b80cbb.png)

    1. 下記のように「home」「input」「output」ページヘのリンクが表示されていれば本記事の内容は完了である。

        ![laravel8_crud.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e403a4ce-15bb-ae03-b717-ad3027e471eb.png)