目的
- ヘッダーをベースレイアウトファイルに記載して反映する方法をまとめる
実施環境
- 筆者の実施環境を記載する。
- ハードウェア環境
| 項目 | 情報 |
|---|---|
| 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をインストールする |
| Laravel バージョン | 8.6.0 | commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする |
| Node.jsバージョン | v12.14.1 | Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする |
前提条件
- 下記の記事の作業が完了していること。
前提情報
- 作成するアプリ名は「laravel8_crud」とする。
- 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
- 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
概要
- ベースレイアウトファイルの作成
- ビューファイルの編集
- 確認
詳細
- ベースレイアウトファイルの作成
-
laravel8_crudディレクトリで下記コマンドを実行してベースレイアウトファイルを開く。
$ vi resources/views/layouts/app.blade.php -
下記の内容をベースレイアウトファイルに記載する。
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>
-
- ビューファイルの編集
-
laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
$ vi resources/views/contents/output.blade.php -
下記のように編集する。
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 -
laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
$ vi resources/views/contents/input.blade.php -
下記のように編集する。
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 -
laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
$ vi resources/views/contents/edit.blade.php -
下記のように編集する。
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 -
laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
$ vi resources/views/contents/detail.blade.php -
下記のように編集する。
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
-
- 確認
-
laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。
$ php artisan serve -
ブラウザで下記にアクセスする。
-
ヘッダーが表示されていることを確認し、ユーザ名をクリックする。
-
下記のように「home」「input」「output」ページヘのリンクが表示されていれば本記事の内容は完了である。
-