Laravel 5.5 入門として「基本のタスクリスト」を作成する [その2]

Laravelに入門する方を対象に、「基本のタスクリスト」チュートリアルをLaravel 5.5で行う方法を順を追って紹介しています。

この記事は、次の記事に続く2つ目の記事です。

Laravel 5.5 入門として「基本のタスクリスト」を作成する [その1]

前回次の作業を行い、作成したところまでの動作をhttpサーバを起動して確認しました。

アプリケーションで使用する空のデータベースhomesteadを作成
タスクを保存するTasksテーブルをマイグレーションファイルに定義
マイグレーション
空のTaskモデルを定義
3つの空のルートを作成

次の作業へ進みましょう。

1 ビューの表示
2 ビューのレイアウト
3 タスクの追加処理
4 エラー表示
5 ここまでのまとめ

ビューの表示

空のルートの中身を作成していきます。

まずは、’/’にアクセスされた場合に、全タスクをリスト表示するようにHTMLテンプレートを作成します。

また、そのテンプレートには新しいタスクを追加するフォームも含めることにします。

LaravelのHTMLテンプレートは、resources/views/以下に置きます。

次のようにroute (routes/web.php) にviewヘルパを使用することで、viewsディレクトリに置かれたHTMLテンプレートを表示することができます。

Route::get('/', function () {
　　return view('tasks');
});

この場合は、resources/views/tasks.blade.phpが読み込まれます。

ビューのレイアウト

Laravelでは、Bladeというテンプレートエンジンが用意されています。

他のPHPテンプレートエンジンと異なり、ビューの中にphpを直接記述します。

ビューファイルの拡張子が.blade.phpの場合に、Bladeテンプレートエンジンが使用されます。

まずはレイアウトの共通部分を、resources/views/layouts/app.blade.phpに用意しましょう。ナビバーを共通部分とすることにします。

次のように、layouts/app.blade.phpを作成します。

<!DOCTYPE html>
<html lang="en">
      <head>
	  <title>Laravel Quickstart - Basic</title>

	  <!-- Fonts -->
	  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>

	  <!-- Styles -->
	  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      </head>

      <body>

	  <nav class="navbar navbar-default">
	      <div class="container">
		  <!-- navbar  -->
		  <div class="navbar-header">
		      <a class="navbar-brand" href="{{ url('/')  }}">
			  Task List
		      </a>
		  </div>
	      </div>
	  </nav>


	  @yield('content')

	  <!-- JavaScripts -->
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </body>
</html>

この例ではcssフレームワークとしてbootstrapを使用しています。もちろんBulmaなどの他のCSSを使用しても構いません。

ここで、@yield(‘content’)は、Bladeのディレクティブです。この部分に、子ページの内容が挿入されます。

次に、子ページとして全タスクをリスト表示するtasks.blade.phpを次のように作成します。

@extends('layouts.app')
@section('content')
  <div class="container">
    <div class="col-sm-offset-2 col-sm-8">
	<div class="panel panel-default">
	    <div class="panel-heading">
		New Task
	    </div>

	    <div class="panel-body">
		<!-- Display Validation Errors -->
		@include('common.errors')

		<!-- New Task Form -->
		<form action="{{ url('task')  }}" method="POST" class="form-horizontal">
		    {{ csrf_field() }}

		    <!-- Task Name  -->
		    <div class="form-group">
			<label for="task-name" class="col-sm-3 control-label">Task</label>
			<div class="col-sm-6">
			    <input type="text" name="name" id="task-name" class="form-control">
			</div>
		    </div>

		    <!-- Add Task Button -->
		    <div class="form-group">
			<div class="col-sm-offset-3 col-sm-6">
			    <button type="submit" class="btn btn-default">
				<i class="fa fa-btn fa-plus"></i>Add Task
			    </button>
			</div>
		    </div>
		</form>
	    </div>
	</div>

	<!-- TODO: Current Tasks -->
    </div>
  </div>
@endsection

冒頭の@extends(‘layouts.app’)によって、親ページ layouts/app.blade.phpが呼ばれます。

そして、親ページapp.blade.php の @yield(‘content’) の位置に、子ページ tasks.blade.phpの@section(‘content’)から、@endsectionまでの内容が挿入されます。

つまり、’/’ルートからresources/views/tasks.blade.phpが呼ばれると、layout/app.blade.php に tasks.blade.php が挿入されて表示されることになります。

@includeディレクティブは、他のbladeビューを取り込みます。

ここでは@include(‘common.errors’)を使用しています。これにより、入力値エラー表示をcommon.errorsに共通化します。

common.errorsは後ほど作成します。

波括弧{{ }}で囲まれたデータは、phpのhtmlentities関数を通して表示されます。

その他Bladeのディレクティブについては、こちらのページを参考にしてください。

タスクの追加処理

現状では、タスクの追加ボタンを押すと、空の/taskページに飛ばされるだけで、タスクの追加処理が行われません。

ここで、タスクをデータベースに追加する/taskルートのコードを追加しましょう。

タスク名(name)のフィールドを一つ持つフォームを作成します。

nameの条件は、入力が必須で、255文字以下であることとします。

条件を満たさない場合は、’/’にリダイレクトし、エラー内容をセッションにフラッシュデータとして保存します。

フラッシュデータとは、次のリクエストの処理が終わった後にlaravelによって消されるセッション情報です。次のリクエスト処理まで持ち越したい情報を保存したいときに使います。

routes/web.phpの/taskルートに次のようにコードを追加します。


Route::post('/task', function (Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required|max:255',
    ]);

    if($validator->fails()){
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }

    //TODO: Add New Task
    
});

functionの引数がRequest $requestとなっています。このように記述するとサービスプロバイダによって、$requestに現在のHTTPリクエストインスタンスが代入されます。

Requestクラスの解説はこちらのページです。

Validator::makeメソッドの第１引数は、バリデーションを行うデータです。第２引数はそのデータに適用するバリデーションルールです。

$validator->fails() で入力値が無効か確認しています。

無効であった場合は、エラーを保存して、’/’ルートを返します。

->withErrors($validator)で、$validatorインスタンスのエラーをセッションに保存します。すると、全てのビューから$errors変数としてアクセスできるようになります。

->withInput()は、全ての入力内容をセッションに保存します。

バリデーションについてはこちらのページの「バリデータの生成」項を参考にしてください。

タスクの作成部は、ここではTODOとして残しておきます。

エラー表示

エラーを表示するためにtask.blade.phpに@include(‘common.errors’)ディレクティブを記述していました。

resources/views/common/errors.blade.phpに、次のように記述しましょう。

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Whoops! Something went wrong!</strong>

        <br><br>

        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@で始まる行は、Bladeのディレクティブです。

$errorsが一つ以上存在する場合に、エラーをリスト表示します。