Blade テンプレート ( 1 )

July 25, 2019

Blade テンプレートについて

Laravel に用意されている Blade テンプレートエンジンを用いることにより、効率的に Web ページのレイアウトを作成することができる。
具体的には、テンプレートを継承し、新たなテンプレートを定義したり、レイアウトの一部をセクションとしてはめこんで利用することが可能となる。
本エントリでは基本的なテンプレートの利用方法について記載する。

Form の作成

まずはじめに基本的な Form 送信を行ってみる。
これによりなんとなく Blade テンプレートの使い方を肌で感じてみることにする。

1. プロジェクトの作成

最初に form というプロジェクトを作成する。

$ laravel new form
Crafting application…
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 80 installs, 0 updates, 0 removals

...

2. Blade テンプレートの作成

form 用のコンテンツを配置するディレクトリを作成し、そこに index.blade.php というファイルを作成する。

$ mkdir resources/views/form

index.blade.php

<html>
    <head>
        <title>Form Test</title>
        <style>
         body {
             font-size: 16pt;
             color: #6504a0;
         }
         h1 {
             color: #6594e0;
             border-bottom: dashed 2px #6594e0;
         }
        </style>
    </head>
    <body>
        <h1>Form の利用</h1>
        <p>{{$text}}</p>
        <form method="POST" action="/laravel/blog/form/public/form">
              {{ csrf_field() }}
            <input type="text" name="text">
            <input type="submit">
        </form>
    </body>
</html>

4. コントローラの作成

コントローラを作成し、作成したコントローラにアクションを用意する。今回は FormController という適当なコントローラを作成し、そこに get() メソッドと post() メソッドを作成することで、GET/POST リクエストに対応する。

まずはコントローラの作成。

$ php artisan make:controller FormController
Controller created successfully.

次に、作成された app/Http/Controllers/FormController.php を以下のように編集する。

app/Http/Controllers/FormController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FormController extends Controller
{
    public function get() {
        $data = [
            'text' => '何か入力してください。',
        ];
        
        return view('form.index', $data);
    }

    public function post(Request $request) {
        $text = $request->text;
        $data = [
            'text' => $text . ' と入力されました。',
        ];
        
        return view('form.index', $data);
    }
}

5. Route の設定

最後に get() メソッドと post() メソッドをそれぞれ GET/POST リクエストに対応させるために、route/web.php を以下のように編集する。

route/web.php

<?php

Route::get('form', 'FormController@get');
Route::post('form', 'FormController@post');

確認

実際に Web ページにアクセスし、GET 時と POST 時の挙動が正しいか確認してみましょう。

[ GET 時 ]

[ POST 時 ]