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」を参照したい場合、
という形で呼び出します。
値をテンプレートに渡す
次は、テンプレートに値を渡して動的なページを作る方法を見てみましょう。
この配列に入れた値がテンプレートに渡されることになります。
例えば、コントローラを以下のように書いてみます。
<?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>で描画されています。
今回は以上になります。
ご覧いただきありがとうございました(^^)
参考書
続きはこちら↓
コメント