【４】 ヘッダーとフッターの追加
基本レイアウトになる
resources/views/layouts/layouts.blade.php
を作成
Bootstrap4 を読み込む
<html>
<head>
<title>@yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Bootstrap4 の導入後 。。。
resources/views/posts/index.blade.php
を以下のように変更
@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')
@if (session('message'))
{{ session('message') }}
@endif
<h1>Posts</h1>
@foreach($posts as $post)
<a href="/posts/{{ $post->id }}">{{ $post->title }}</a>
<a href="/posts/{{ $post->id }}/edit">Edit</a>
<form action="/posts/{{ $post->id }}" method="POST" onsubmit="if(confirm('Delete? Are you sure?')) { return true } else {return false };">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit">Delete</button>
</form>
@endforeach
<a href="/posts/create">New Post</a>
@endsection
resources/views/posts/create.blade.php
を以下のように変更
@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')
<form method="POST" action="/posts">
{{ csrf_field() }}
<input type="text" name="title">
<input type="text" name="content">
<input type="submit">
</form>
@endsection
resources/views/posts/show.blade.php
を以下のように編集
@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')
@if (session('message'))
{{ session('message') }}
@endif
{{ $post->title }}
{{ $post->content }}
@endsection
resources/views/posts/edit.blade.php
を修正
@extends('layouts.layouts')
@section('title', 'Simple Board')
@section('content')
<form method="POST" action="/posts/{{ $post->id }}">
{{ csrf_field() }}
<input type="hidden" name="_method" value="PUT">
<input type="text" name="title" value="{{ $post->title }}">
<input type="text" name="content" value="{{ $post->content }}">
<input type="submit">
</form>
@endsection
■ Bootstrap4 を使ってヘッダーを作成する
resources/views/layouts/layouts.blade.php
にコンポーネントを追加
<html>
<head>
<title>@yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
@component('components.header')
@endcomponent
<div class="container">
@yield('content')
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
resources/views/components/header.blade.php
を以下のように作成
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Simple Board</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">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Visual Studio Code ターミナル で
php artisan serve --port=8080を実行
↓↓↓ ブラウザで確認 ↓↓↓
http://ＩＰアドレス:8080/posts
ヘッダーが追加されていれば ＯＫ☆
■ フッターを追加する
resources/views/layouts/layouts.blade.php
にコンポーネントを追加
<html>
<head>
<title>@yield('title')</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
@component('components.header')
@endcomponent
<div class="container">
@yield('content')
</div>
@component('components.footer')
@endcomponent
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
resources/views/components/footer.blade.php
を作成
<footer class="py-3 bg-light">
<div class="container">
<span class="text-muted small">Simple Board by Laravel & Bootstrap 4</span>
</div>
</footer>
Visual Studio Code ターミナル で
php artisan serve --port=8080を実行してローカルサーバーを起動
↓↓↓ ブラウザで確認 ↓↓↓
http://ＩＰアドレス:8080/posts
フッターが追加されていれば ＯＫ☆
※※※ 注意事項 ※※※
Visual Studio Code で simpleboard（ アプリケーション ）
を作成（ Laravel を使用 ）する場合、
routes/web.php から以下を削除(コメントアウト) する！！
// if (env('APP_ENV') === 'local') {
// URL::forceScheme('https');
// } [ 理由 ]
上記の記述内容は、
Cloud9 の場合必要で、ローカル環境で
設定すると CSSが適用されない ため。
↓↓↓ 修正後、ローカルサーバーを起動 ↓↓↓
php artisan serve --port=8080サーバーを起動後、ブラウザで 確認☆
■ GitHub(ギットハブ) で ファイルを保存(コミット)。
Visual Studio Code ターミナル で
下記のコマンドを実行。
git add .
git commit -m “using layouts & add header footer”
次は 。。。
