Laravelでタスク管理アプリを作る~タスク登録・表示機能~

Laravelでタスク管理のWebアプリを作ってみました！
今回はタスク名と期限を入れるような簡単なものです。

完成イメージはこんな感じです。 f:id:aym413:20190621144219g:plain:w400

Laravelの環境構築とDBのマイグレーションはこちらの記事を参考にしてください。 coxcox.hatenablog.com

coxcox.hatenablog.com

MVCモデルを使ってタスクの表示・追加ができるようにしていきます。

MVCモデルとは？

Model・View・Controllerの頭文字をとったもので、プログラミングの処理を3つの役割に分けて実装する方法です。

f:id:aym413:20190621193115p:plain:w500

タスク一覧を表示できるようにする

ルーティングを追加する

タスク一覧を表示できるようにするためGETメソッドのルーティングを設定します。

/routes/web.php

<?php

// タスクの一覧を取得する
Route::get('/', 'TaskController@index');

これで、第一引数にある / というパスへのリクエストを、第二引数のTaskControllerのindexメソッドにルーティングします。

モデルを作成する

Tasksテーブルに対応するモデルを作成します。
モデルの作成はartisanコマンドで作成できます。
Laradockのコンテナ上で実行します。

$ cd laradock
$ docker-compose exec --user=laradock workspace bash
/var/www$ php artisan make:model Models/Task
Model created successfully.

/app/Models/Task.phpが生成されていると思います。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    //
}

モデルの中身は変えずにそのままで。

コントローラーを作成する

モデルと同様artisanコマンドでコントローラーを作成します。

$ docker-compose exec --user=laradock workspace bash
/var/www$ php artisan make:controller TaskController
Controller created successfully.

コントローラーにコードを追加していきます。
最初にTaskモデルを読み込み、ルーティングで定義したindexメソッドを追加します。
indexメソッドでは、Task::all();でDBに登録されているタスク一覧を取得し、view('tasks.index', [ 'tasks' => $tasks ]);で結果をタスク一覧表示用のビュー渡します。

<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    /**
     * タスクの一覧を取得する
     */
    public function index()
    {
        $tasks = Task::all();

        return view('tasks.index', [
            'tasks' => $tasks
        ]);
    }
}

ビューを作成する

ブラウザに表示するためのビューを作成します。
モデルやコントローラーの様にartisanコマンドは使えないので、resources/views/tasks配下にindex.blade.phpを追加します。
レイアウトをいい感じにするためにBootstrapを使いました！
getbootstrap.com Bootstrapはheadの中にlinkタグを入れるだけで使うことができます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

index.blade.phpの中身はこちらです。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="card" style="max-width: 500px; margin: 10% auto;">
        <h5 class="card-header">タスクの一覧</h5>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">タイトル</th>
                <th scope="col">期限日</th>
            </tr>
            </thead>
            <tbody>
            @foreach($tasks as $task)
                <tr>
                    <th scope="row">{{ $task->id }}</th>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->deadline }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <a class="btn btn-primary" href="/add" role="button" style="margin: 20px;">タスクを追加する</a>
    </div>
</div>
</body>
</html>

タスクの一覧表示できるかテストしてみる！

コンテナを起動して、DBにテストデータを入れます。

$ docker-compose up -d nginx mysql workspace

ブラウザから「http://localhost」にアクセスしてみます。
テストデータが表示できればOKです！
f:id:aym413:20190621214845p:plain:w400

一覧表示ができるようになったら、タスクを追加できるようにします！

タスクを追加できるようにする

ルートを追加する

タスクを追加する画面を表示するGETメソッドとDBにタスクを追加するPOSTメソッドのルーティングを追加します。

/routes/web.php

<?php

// タスクを作成する
Route::get('/add', 'TaskController@showAddPage');
Route::post('/add', 'TaskController@addTask');

タスク追加画面のビューを作成する

resources/views/tasks配下にadd_task.blade.phpを追加します。
Laravelではフォームを作る際は必ずCSRF対策をする必要があります。
フォーム内に@csrfを追加すれば大丈夫です。この1行がないと419のエラーになります。
また、フォームのデータをコントローラーに送るにはname属性が必要になるので、お忘れなく！

add_task.blade.phpの中身はこちらです。

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <form action="/add" method="POST">
        @csrf
        <div class="card" style="max-width: 500px; margin: 10% auto;">
            <h5 class="card-header">タスクの追加</h5>
            <div class="card-body">
                <div class="form-group">
                    <label for="title">タイトル</label>
                    <input type="text" name="title" class="form-control">
                </div>
                <div class="form-group">
                    <label for="deadline">期限日</label>
                    <input type="text" name="deadline" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary">追加</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

コントローラーにメソッドを追加する

先ほど作成したTaskControllerにメソッドを追加します。

ビューから送られてきたデータはRequestクラスで受け取ることができます。
タスクのタイトルと期限日を$task->titleと$task->deadlineに代入します。
saveメソッドで新しいレコードがデータベースに挿入されます。saveが呼び出された時にcreated_atとupdated_atのタイムスタンプは自動的に設定されるので、わざわざ設定する必要はありません！
データをDBに登録したあとは、タスク一覧画面に戻るようredirectさせます。

    /**
     * タスクを登録する
     *
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
     */
    public function addTask(Request $request)
    {
        $task = new Task;
        $task->title = $request->title;
        $task->deadline = $request->deadline;

        $task->save();

        return redirect('/');
    }