PHPフレームワーク「Laravel」Bladeテンプレートを利用する
前回はLaravelのテンプレート機能でPHPテンプレートの利用を解説しました。
今回はBladeテンプレートの利用について解説します。
Bladeテンプレートとは？
BladeテンプレートとはLaravel独自のテンプレートエンジンです。
フォームの送信をセキュアに行ったり、PHPのスクリプトも独自の記述方法で行います。
また、便利な機能も搭載されているので、Laravelを利用するには必ず理解しておく必要があります。
Bladeテンプレートを利用する
PHPでは通常変数の値などを出力する場合は <?php echo $msg;?> などと記述しますがBladeテンプレートで同様のことを行う場合は、{{$msg}} と記述するだけで出力されます。
PHPスクリプトではHTMLタグと同様に<>を利用するため、コードが混在して利用するツールによってはレイアウトが崩れたりしますが、Bladeテンプレートではこれを回避するため<>は利用しません。
Bladeテンプレートを作る
それでは、前回作成した「resources」→「views」→「hello」の中に「index.blade.php」を作成してください。
作成したindex.blade.phpのソースは以下のような内容にしています。
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Hello/Blade</title> </head> <body> <h1>Hello / index</h1> <p>これはHelloのindex.bladeファイルです。</p> <p>値：{{$msg1}}</p> <p>値：{{$msg2}}</p> </body> </html> |
前回作成したindex.phpの内容を少し変更しています。
| index.php（変更前） | index.blade.php（変更後） |
|---|---|
| <?php echo $msg1;?> | {{$msg1}} |
| <?php echo $msg2;?> | {{$msg2}} |
アクションをは前回のものをそのまま利用
アクションは前回利用したものをそのまま利用します。
1 2 3 4 5 6 7 8 9 | public function index(Request $request){ $data = [ 'msg1' => '値の受け渡し1' ,'msg2' => '値の受け渡し2' ]; return view( 'hello.index' ,$data ); } |
この状態で、http://〇〇/hello にアクセスしてみます。
{{$msg1}}、{{$msg2}}のそれぞれ設定した値が表示されていることがわかります。
ここで、疑問に思うことがあります。
それは、前回作成した「index.php」は削除せずそのまま残していますが、テンプレートは「index.blade.php」が表示されていることです。
Laravelでは、テンプレート利用時、Bladeテンプレートを優先する仕様となっているのでこのような振る舞いとなります。
Bladeテンプレートにフォームを設置
それではBladeテンプレートにフォームを設置してみます。
index.blade.phpを以下のように変更してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title>Hello/Blade</title> </head> <body> <h1>Hello / index</h1> <p>これはHelloのindex.bladeファイルです。</p> <p>値：{{$msg1}}</p> <p>値：{{$msg2}}</p> <form method="post" action="/hello"> @csrf <input type="text" name="msg1"> <input type="submit" value="送信"> </form> </body> </html> |
@csrfとは？
今回記述した<form>内に「@csrf」の記述がありますが、これはCSRF対策で、フォームの送信ものとが正常な送信もとかを確認するための記述となります。
実際ソースコードでは「type=”hidden”」でトークンが埋め込まれていることがわかります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title>Hello/Blade</title> </head> <body> <h1>Hello / index</h1> <p>これはHelloのindex.bladeファイルです。</p> <p>値：値の受け渡し1</p> <p>値：値の受け渡し2</p> <form method="post" action="/hello"> <input type="hidden" name="_token" value="iCz0giStDXhPlS507HAeMrTDb8f1nLZdk6Fwxa59"> <input type="text" name="msg1"> <input type="submit" value="送信"> </form> </body> </html> |
アクションの修正
フォームの設定が完了したらアクションを修正します。
以前のHelloControllerにpost()関数を追加しました。
masg1はフォームから受け取った値を格納し、msg2は「値の受け渡し2」から「値の受け渡し4」へ値を変更しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | class HelloController extends Controller { public function index(){ $data = [ 'msg1' => '値の受け渡し1' ,'msg2' => '値の受け渡し2' ]; return view( 'hello.index' ,$data ); } public function post(Request $request){ $msg1 = $request->msg1; $data = [ 'msg1' => $msg1 ,'msg2' => '値の受け渡し4' ]; return view( 'hello.index' ,$data ); } } |
ルートの設定 Route::post
アクションに追加したpost関数を呼び出すためのルートの設定を行います。
今回はフォームからPOST送信された値を受け取るので
Route::post を利用します。
上段が通常時、下段がPOST送信時のルート設定となります。
1 2 | Route::get( 'hello', 'App\Http\Controllers\HelloController@index' ); Route::post( 'hello', 'App\Http\Controllers\HelloController@post' ); |
設定が完了したら、http://〇〇/hello にアクセスし、文字を入力し送信してみます。
アクセス時はRoute::get()、フォーム送信時はRoute::post()が実行されていることがわかります。
エスケープ処理
Bladeテンプレートを利用し、値を出力する{{変数など}}は自動でHTMLエスケープ処理を行ってくれます。
試しにJavaScriptをフォームに記述し送信すると内容がそのまま表示されていることがわかります。
実際のソースを確認してわかりますが、エスケープ処理が行われています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title>Hello/Blade</title> </head> <body> <h1>Hello / index</h1> <p>これはHelloのindex.bladeファイルです。</p> <p>値：<script>alert('aa')</script></p> <p>値：値の受け渡し4</p> <form method="post" action="/hello"> <input type="hidden" name="_token" value="iCz0giStDXhPlS507HAeMrTDb8f1nLZdk6Fwxa59"> <input type="text" name="msg1"> <input type="submit" value="送信"> </form> </body> </html> |
エスケープ処理を行いたくない場合は？
HTMLエスケープを行わない場合は {{変数など}} ではなく {!!変数など!!}} と記述することで送信内容をエスケープすることなくHTMLなどを表示することができます。
セキュリティーに関しても利用するメリットがある
LaravelのBladeテンプレートを利用するだけで、CSRF対策やXSS対策が行われるため、PHPで処理を記述する必要がありません。
