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

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

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

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

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

タスクの保存

routes/web.phpの/taskルートに、TODOとして残してあるタスクの作成処理を追加します。

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

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

        $task = new Task;
        $task->name = $request->name;
        $task->save();

        return redirect('/');
    });

タスクを作成するには、Taskインスタンスを作成し、nameを設定し、そしてsave()メソッドを実行するだけです。

これだけのコーディングで、データベースに保存する所まで済んでしまいます。

そして、’/’ルートにリダイレクトします。

タスクの表示

次にタスクを表示できるようにします。まずは、route/web.phpを編集して、’/’ルートからviewにタスクのデータを渡します。

view関数の第2引数に配列を渡すと、配列のキー名を変数名としてビュー中で使用できるようになります。

Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();
    
    return view('tasks', [
        'tasks' => $tasks
    ]);
});

Task::orderBy(…)->get() で、ソート済みのタスクをデータベースから取得します。

取得したタスク$tasksをtasks.blade.phpビューに渡します。

追記: Class ‘Task’ not foundエラーが出る場合には、route/web.phpの冒頭にuse App\Task;が書いてあるか確認してください。その1「routeの定義」を参照してください。

 

tasks.blade.phpビューにTODOとして残した部分に、foreachディレクティブを使用して$tasksを表示する処理を追加します。

@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>
	    
	    <!-- Current Tasks -->
	    @if (count($tasks) > 0)
		<div class="panel panel-default">
		    <div class="panel-heading">
			Current Tasks
		    </div>
		    
		    <div class="panel-body">
			<table class="table table-striped task-table">
			    <thead>
				<th>Task</th>
				<th>&nbsp;</th>
			    </thead>
			    <tbody>
				@foreach($tasks as $task)
				    <tr>
					<td class="table-text"><div>{{ $task->name }}</div></td>
					<!-- TODO: Task Delete Button -->
					<td>&nbsp;</td>
				    </tr>
				@endforeach
			    </tbody>
			</table>
		    </div>
		</div>
	    @endif
	</div>
    </div>
	
@endsection

これで、入力値の検査・エラー表示・タスク追加の機能が実装できました。

タスク削除ボタン

あとは、タスクを削除できるようにして完成です。

<!-- TODO: Task Delete Button -->

の部分に削除ボタンを追加します。

<tr>
  <!-- Task Name -->
  <td class="table-text">
    <div>{{ $task->name }}</div>
  </td>

  <!-- Delete Button -->
  <td>
    <form action="{{ url('task/'.$task->id) }}" method="POST">
      {{ csrf_field() }}
      {{ method_field('DELETE') }}

      <button type="submit" class="btn btn-danger">
        <i class="fa fa-trash"></i> Delete
      </button>
    </form>
  </td>
</tr>

ここで、{{ method_field(‘DELETE’) }}と記述することにより、次のフィールドが生成されます。

<input type="hidden" name="_method" value="DELETE">

Laravelは、このhiddenフォームを認識すると、POSTではなくDELETEリクエストであるとして処理をします。

こうして、タスクを削除するルートが読み込まれることになります。

 

タスクのデータベースからの削除

タスク削除ルートを次のように変更します。

Route::delete('/task/{task}', function (Task $task) {
  $task->delete();

  return redirect('/');
});

 

ここで、$task->delete()が突然呼ばれていますが、これでタスクの削除が完了します。

{task}と$taskの名前が一致している場合には「暗黙の結合」という機能によって、自動的に{task}のidを持つタスクが読み込まれ $taskに代入されます。もし一致するidが見つからない場合は、404ページが生成されます。

 

これで作業は全て完了し、タスクリストのWebアプリケーションが完成しました。

ここまでのまとめ

ここまでで次の作業を行いました。

  • 入力値検査に通ったタスクを保存する処理を追加。
  • ‘/’ルートでタスクリストを表示する処理を追加。
  • タスク削除ボタンを設置。
  • タスク削除処理を記述。

出来上がったタスクリスト

次のようなものが出来上がりました。

まとめ

いかがでしたでしょうか。

Laravel 5.5 LTSでは、5.2と一部のファイルの場所は異なりますが、それさえクリアすれば後半はほぼチュートリアル通りに進めることができたと思います。

Laravelを使えば少ない記述量でWebサービスを作成できる、ということを体感できたでしょうか。

Laravelを使うには幅広い知識が必要な上、さらにLaravelのドキュメントを読み込む必要がありますが、一回覚えてしまえば、Laravelが無かったときよりも短期間で開発がサクサクできるようになると思います。

 

Laravelをもう少し覚えてみよう、と思った方は、是非ドキュメントや市販の書籍を読み込んでみてくださいね。

以上、Laravel 5.5 入門として「基本のタスクリスト」を作成する [その3]でした。

PHPフレームワーク Laravel入門

「Laravel 5.5 入門として「基本のタスクリスト」を作成する [その3]」への5件のフィードバック

  1. はじめまして。ララベルを勉強し始めサイトを参考にさせて頂いています。
    チュートリアル通りにやってみたのですが、localhost:8000にアクセスするとエラーページに「Class ‘Task’ not found」とでます。routes\web.phpのRoute::getの部分を指しているようなのですが、Taskというクラスを見つけることができませんでした。
    ちなみに最初にアクセスする場所は上記のlocalhost:8000で良かったでしょうか。
    教えて頂けると幸いです。宜しくお願い致します。

    1. ご利用いただきありがとうございます。Taskクラスが見つけられないということですが、ご提供頂いた情報の範囲では、なぜ見つけられないのかはこちらでもわかりません。
      まず確認していただくとよいのは、app/Task.phpに、Taskクラスが大文字小文字も含め正確に定義されているかということです。
      アクセスする場所については環境によって異なりますが、Route::getまでは読みに行けていることから問題ないと思われます。
      うまくいくことをお祈りしています。

  2. 横から失礼致します。
    私も同様に「Class ‘Task’ not found」になったので公式のmodel使用例を参考にしてroute/web.phpのTaskの指定書式を変えたらエラーが解消しました。
    ご参考まで。
    NG $tasks = Task::orderBy(‘created_at’,’asc’)->get();
           ↓
    OK $tasks = App\Task::orderBy(‘created_at’,’asc’)->get();

    1. アドバイス頂きましてありがとうございます。
      田中さんもこれで問題が解決したらよいのですが。

      route/web.php 冒頭の use App\Task; を書いていないため「Class ‘Task’ not found」なるようですね。
      記事その1「routeの定義」項に記載がありますが、分かりにくくてすみません。
      useの代わりに、OK例のようにしていただいても構いません。
      名前空間については、laravelというよりphpの仕様ですので、phpのドキュメントも参考になると思います。

  3. こんなチュートリアル探してました!
    ありがとうございました。

コメントは受け付けていません。