◀ 5.

LaravelのBladeテンプレート(ビュー/レイアウト)とは

▶

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

LaravelにはBladeというテンプレートエンジンがある。

Bladeテンプレートとは？

Bladeテンプレートを使うとと、共通部分（ヘッダー、サイドバー、フッター等）は親ビューに記述し、各ページのコンテンツは親ビューを継承した小ビューに記述するというようなことができる。

また、ディレクティブ（@～）を使用することで「if」や「for」を簡潔に記述することが出来る。

テンプレートの拡張子は「.blade.php」とする。

ビューとは

ビューはアプリケーションのフロントエンドを担当する。

Laravelでは、表示用のテンプレートをあらかじめ用意し、それを利用して画面表示を行うことが可能。(Bladeテンプレート)

テンプレートは、「resources」フォルダ内にある「views」フォルダの中に配置する。また、PHPファイルとして作成する。

レイアウトという大枠を作ってそこにビューを組み込むのが一般的なやり方。

レイアウトの定義

以下の様に、レイアウトは大枠を定義する。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Laravel Quickstart - Basic</title>

</head>

@yield('content')
</body>
</html>

「@yield('content')」にビューを組み込んで内容を表示させる。

@yield('content')

ビューの定義

以下の様に画面に入力項目やボタンを追加する。

@extends('layouts.app')

@section('content')

<div class="panel-body">

<form action="{{ url('task') }}" method="POST" class="form-horizontal">
{{ csrf_field() }}

<div class="form-group">
<label for="task" class="col-sm-3 control-label">タスク</label>

<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-default">
<i class="fa fa-plus"></i> タスク追加
</button>
</div>
</div>
</form>
</div>
@endsection

「@extends('layouts.app')」は先ほどの「resources/views/layouts/app.blade.php」レイアウトを使用するという意味。

「@section('content')」から「@endsection」の内容を、先ほどのレイアウトで定義した「@yield('content')」の部分に挿入する。