【Laravel 入門】blade テンプレートの使い方

Laravel

laravel が採用している MVC モデルの中でも、
今回は View にあたる blade テンプレートの使い方や、コントローラとの値の受け渡し方法など解説していきます(^_^)


参考書

blade テンプレート

laravel には、blade という独自のテンプレートが用意されています。

ファイル名を、○○.blade.php とすることでテンプレートファイルを作ることができます。


では、「resources/views」内に「sample」というフォルダを作り、その中に「index.blade.php」というファイルを作りましょう。


そして、そのファイルに以下のように書いてみます。

<p>これはbladeテンプレートです</p>


コントローラとルートは以下のようになります。

<?php
//SampleController.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function index() {
        return view('sample.index');
    }
}
//web.php

Route::get('/sample', 'App\Http\Controllers\SampleController@index');



すると、ブラウザには「これはbladeテンプレートです」と表示されます。


※view メソッドのファイル指定について

今回のように、「views」内のフォルダの中の「テンプレート名.blade.php」を参照したい場合、

view( ‘ フォルダ名 . テンプレート名 ‘ );

という形で呼び出します。

値をテンプレートに渡す

次は、テンプレートに値を渡して動的なページを作る方法を見てみましょう。

view( ‘ テンプレート ‘,  連想配列 );


この配列に入れた値がテンプレートに渡されることになります。

例えば、コントローラを以下のように書いてみます。

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SampleController extends Controller
{
     public function index() {
        $data = [
            'name'=> '山田太郎',
            'mail'=> 'yamada@sample.com'
        ];
        return view('sample.index', $data);
    }
}


そして、blade テンプレート側では、{{ $変数 }} と書くことで埋め込むことができます。

<p>{{$name}}</p>
<p>{{$mail}}</p>



ブラウザには以下のように表示されます。

クエリ―文字列の利用

クエリ―文字列とは、アドレスの後ろに「?○○=××」という形でつけられる部分のことです。

この文字列の「××」を受け取るには、コントローラを以下のように書きます。

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function index(Request $request) {
        $data = [
            'name'=> $request->name,
            'mail'=> $request->name.'@sample.com'
        ];
        return view('sample.index', $data);
    }
}



ここでは、Request インスタンスの $request をアクションの引数として渡し、
$request->name で値を取り出しています。

この name が、「?○○=××」の「○○」にあたるわけですね。


では、アドレスを以下のように入力してブラウザで確かめてみます。

http://127.0.0.1:8000/sample?name=yamada


クエリー文字列が取得できていることが確認できました。

フォームの利用

次は、フォームを使ってユーザーの入力内容をテンプレートに反映させてみましょう。

blade テンプレートを以下のように書きます。

<body>
    <p>{{$msg}}</p>
    <form method="POST" action="/sample">
        @csrf
        <input type="text" name="name">
        <input type="submit">
    </form>
</body>


@csrf について
blade テンプレートにある「@~」ディレクティブと呼び、テンプレートに決まったコードを生成する働きをもちます。

@csrf は、CSRF対策のために用意されたディレクティブです。
CSRFは、「Cross Site Request Forgery」というWebサイト攻撃の一つであり、外部から悪意のあるコンテンツをフォームに送り付けたりすることに用いられます。

laravel では、CSRF対策がなされていないフォームの送信は受け付けられないようになっているため、必ず@csrf をフォーム内に用意する必要があります。



では、コントローラを以下のように書きます。

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function index() {
        $data = [
            'msg'=>'お名前を入力してください'
        ];
        return view('sample.index', $data);
    }

    public function post(Request $request) {
        $data = [
            'msg'=>'こんにちは、'.$request->name.'さん'
        ];
        return view('sample.index', $data);
    }
}


ここでは post アクションを追加しています。これは「/sample」に POST送信されたときの処理です。

テンプレートの name 属性で指定しているフィールドの値を、$request->○○で取得することができます。
(今回は name=”name” としているため、$request->name で入力内容を取得しています)



では最後に、POSTのルートを設定します。
POST送信は、Route::post というメソッドで設定します。

web.php に、以下のルートを追加しましょう。

Route::post('/sample', 'App\Http\Controllers\SampleController@post');


これで、「/sample」にPOST送信がなされたときに、SampleController の post アクションが実行されるようになります。


ブラウザでの挙動↓

ディレクティブ

blade には、「@」から始まる様々なディレクティブが用意されていますが、その中でもよく使うものをここでは紹介します。

if ディレクティブ

@if (条件A)
    出力内容A
@elseif (条件B)
    出力内容B
@else
    出力内容C
@endif

それぞれの条件に応じて、出力内容を変えることができます。

条件Aが成立する場合は出力内容Aが、
条件Bが成立する場合は出力内容Bが、
それ以外の場合は出力内容Cが表示されるようになります。

繰り返しのディレクティブ

@for

@for ( 初期化; 条件; 後処理 )
    繰り返す表示
@endfor

@foreach

@foreach ( $配列 as $変数 )
    繰り返す処理
@endforeach

@while

@while ( 条件 )
    繰り返す処理
@endwhile



では、@foreach を使ってサンプルを作ってみます。

//テンプレート

<body>
    <ol>
        @foreach ($fruits as $fruit)
        <li>{{$fruit}}</li>
        @endforeach
    </ol>
</body>
//コントローラ

    public function index() {
        $fruits = [
            'りんご', '桃', 'バナナ', 'いちご', 'メロン'
        ];
        return view('sample.index', ['fruits'=>$fruits]);
    }


ブラウザの表示↓

配列 fruits から値がひとつずつ取り出されて変数 fruit に入り、<li>で描画されています。





今回は以上になります。
ご覧いただきありがとうございました(^^)


参考書


続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました