ビューについて

2018/10/12

mainvisual

MVCモデルのビューについてみていきます。

LaravelではBladeというテンプレートエンジンを使っているので、まずはBladeについて理解しないといけません。

 

Bladeについて

BladeとはPHPのテンプレートエンジンです。

テンプレートエンジンではHTMLのひな型を元に画面を作成していきます。

有名どころではSmartyがありますね。

Bladeでも共通レイアウトを作成し、それを利用してビューの画面を作成します。

Laravel5.2におけるビュー(Blade)のディレクトリは resources/viewsディレクトリになります。

Laravel5.2のディレクトリ構成について

 

Bladeを使ってビュー画面を作成する流れ

【1】 共通レイアウトを作成

【2】 共通レイアウトを利用してビュー画面の作成

 

【1】 共通レイアウトを作成

共通するパーツをここで指定します。

ページごとに変わる箇所は @yield('content') と記述します。

この箇所が実際のページのコンテンツを流し込む箇所になります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
</head>
<body>

  @yield('content')

</body>
</html>

 

【2】 共通レイアウトを利用してビュー画面の作成

まず冒頭で共通レイアウトを読み込みます。

@extends('layout')

 

共通レイアウトで @yield('content') と記述した箇所にコンテンツを流し込みます。

@section('content') ～ @endsection で囲みます。

@section('content')
  <h1>サンプルページ</h1>
  <p>これはサンプルページです。</p>
@endsection

 
まとめて書くと以下のようになります。

@extends('layout')

@section('content')
  <h1>サンプルページ</h1>
  <p>これはサンプルページです。</p>
@endsection

 

Bladeで変数を表示させる

変数を波括弧で囲うことで表示できます

{{ }}文は、XSS対策としてエスケープしてくれます。

※XSS(クロスサイトスクリプティング)･･･JavaScriptのコードを制作者の意図していない場所に埋め込む悪意のある攻撃手法。

  <p>こんにちは！ {{ $name }}さん！</p>

 
{!! !!}文は、エスケープしません。

  <? $name="<strong>".ララベル."</strong>"; ?>
  <p>こんにちは！ {!! $name !!}さん！</p>

以下のようにレンダリングされます。

<p>こんにちは！ <strong>ララベル</strong>さん！</p>

 
コメント表示

  {{-- コメント --}}

 

制御構造

条件文やループなどの一般的なPHPの制御構文が使えます。

 

If文

@if (count($records) === 1)
  レコードが一つある！
@elseif (count($records) > 1)
  複数のレコードがある！
@else
  レコードが全くない！
@endif

 

繰り返し

一覧表示などでデータベースのレコードを表示させるときに使います。

@foreach ($users as $user)
  <p>これはユーザー {{ $user->id }}</p>
@endforeach

 
Bladeについては以上です。

本庄マサノリ
本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。

>> Twitter をフォローする

 

-基礎知識