[Laravel] CRUD 一覧画面

概要

よくあるCRUDの個人メモ。
一覧画面を表示するまでの過程をまとめる。

環境

• MacOS
• Laravel 6.18.40
• MySQL(docker)
  • DB名: tasklist

前提条件

以下の事前準備が完了していること。

マイグレーション

テーブル名をtasksとし、マイグレーションファイルを作成する。
以下コマンドにより、YYYY_MM_DD_*_create_tasklist_table.phpが作成される。

$ php artisan make:migration create_tasklist_table --create=tasks
Created Migration: 2020_09_29_130736_create_tasklist_table

作成されたマイグレーションファイルにテーブル定義を行う。
今回は、taskカラムを追加する。

database/migrations/2020_09_29_130736_create_tasklist_table.php

        Schema::create('tasks', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('task');
            $table->timestamps();
        });

カラムの定義後、マイグレーションを実行する。

$ php artisan migrate

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.23 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.22 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.08 seconds)
Migrating: 2020_09_26_173743_create_tasklist_table
Migrated:  2020_09_26_173743_create_tasklist_table (0.07 seconds)

tasksテーブルが作成されていることを確認する。

mysql> show tables;
+--------------------+
| Tables_in_tasklist |
+--------------------+
| failed_jobs        |
| migrations         |
| password_resets    |
| tasks              |
| users              |
+--------------------+
5 rows in set (0.00 sec)

モデル

Taskモデルの作成を行う。
出力先はapp/配下。

$ php artisan make:model Task
Model created successfully.

Routing

routes/web.phpにルーティングの定義を行う。デフォルトで記載されている定義は削除して問題ない。
今回はRESTfulにルーティングさせる。

routers/web.php

Route::get('/', 'TasksController@index');
Route::resource('tasks', 'TasksController');

Controllerの作成

Controllerの作成を以下コマンドで行う。

$ php artisan make:controller TasksController --resource
Controller created successfully.

Controller作成後、RESTfulなルーティング定義となっていることを確認してみる。

$ php artisan route:list                                                               
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+
| Domain | Method    | URI               | Name          | Action                                       | Middleware   |
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+
|        | GET|HEAD  | /                 |               | App\Http\Controllers\TasksController@index   | web          |
|        | GET|HEAD  | api/user          |               | Closure                                      | api,auth:api |
|        | GET|HEAD  | tasks             | tasks.index   | App\Http\Controllers\TasksController@index   | web          |
|        | POST      | tasks             | tasks.store   | App\Http\Controllers\TasksController@store   | web          |
|        | GET|HEAD  | tasks/create      | tasks.create  | App\Http\Controllers\TasksController@create  | web          |
|        | GET|HEAD  | tasks/{task}      | tasks.show    | App\Http\Controllers\TasksController@show    | web          |
|        | PUT|PATCH | tasks/{task}      | tasks.update  | App\Http\Controllers\TasksController@update  | web          |
|        | DELETE    | tasks/{task}      | tasks.destroy | App\Http\Controllers\TasksController@destroy | web          |
|        | GET|HEAD  | tasks/{task}/edit | tasks.edit    | App\Http\Controllers\TasksController@edit    | web          |
+--------+-----------+-------------------+---------------+----------------------------------------------+--------------+

本投稿では一覧画面を表示させることが目的のため、Controllerのindexメソッドの編集とモデルの定義のみを行う。
テーブルに格納された値を全て取得し、viewの tasks.index に値を渡す処理。

App/Http/Controllers/Tasks/Controller.php

//使用するモデルを定義
use App\Task;

    public function index()
    {
        $tasks = Task::all();

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

viewの作成

tasks/index.blead.phpを作成後、ファイルを編集する。
データが1件以上ある場合、id と task カラムの値を出力させる。

resources/views/tasks/index.blead.php

<body style="background-color: #FFFFEE;" >
  <div>
    @if (count($tasks) > 0)
      @foreach ($tasks as $task)
        {{ $task->id }}
        {{ $task->task }}
      @endforeach
    @endif
  </div>
</body>

現在テーブルに1件もデータがないため、適当な値を追加しておく。

mysql> INSERT INTO tasks (task) VALUES ('Hello World!');

内部サーバの起動

デフォルトで付属しているサーバを起動させ、動作を確認する。

$ php artisan serve --host=127.0.0.1 --port=8080
Laravel development server started: http://127.0.0.1:8080

ブラウザからhttp://127.0.0.1:8080へアクセスすると、データが表示されている。

画面の体裁

上記の表示では一覧画面とは言えないため、簡単に体裁を整える。

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <title>Task List</title>
</head>
<body>
  <div class="container">
    @yield('content')
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
</body>
</html>

tasks/index.blade.php

@extends('layouts.app')
@section('content')
  @if (count($tasks) > 0)
    <table class="table table-striped">
      <thead>
        <tr>
          <th>id</th>
          <th>タスク</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($tasks as $task)
        <tr>
          <td>{{ $task->id }}</td>
          <td>{{ $task->task }}</td>
        </tr>
        @endforeach
      </tbody>
    </table>
  @endif
@endsection

以上

---