今話題のPHPフレームワーク「Laravel」を使ってみた（実装編）

2022.03.28

WEB

システム開発

前回記事「今話題のPHPフレームワーク「Laravel」を使ってみた（準備編）」では、Laravelのインストールと設定についてご紹介しました。
今回は公式ドキュメントを元に、簡単なToDoリストを作ってみようと思います。

INDEX

筆者の環境
コントローラの実装
ビューの実装
ToDo追加画面の実装
バリデーションの実装
ストアの実装
ToDo一覧の実装
さいごに

筆者の環境

WSL2
Ubuntu-20.04
DockerDesctop-4.3.2

コントローラの実装

今回はコントローラに単一メソッドの、シングルアクションコントローラで実装していきます。まずはToDo一覧画面を表示するために、ControllersにToDo一覧画面のコントローラを追加しrouteを設定します。

<?php
// app/Http/Controllers/TodoListController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class TodoListController extends Controller
{
    public function __invoke()
    {
        echo 'ToDo一覧画面です。';
    }
}

$ git diff routes/web.php
diff --git a/routes/web.php b/routes/web.php
index b130397..f785371 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,7 @@
 <?php

 use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\TodoListController;

 /*
 |--------------------------------------------------------------------------
@@ -16,3 +17,5 @@
 Route::get('/', function () {
     return view('welcome');
 });
+
+Route::get('/todo', TodoListController::class);

できたらブラウザからアクセスしてみます。

http://localhost/todo

▲しっかり表示できました！

参照

ドキュメント：コントローラ

ビューの実装

現状、文字列を echo しているだけのため、ビューファイルを作成し表示してみます。

<!-- resources/views/todoList.blade.php -->
<html lang="ja">
    <head>
        <title>ToDO一覧</title>
    </head>
    <body>
        <h1>ToDo一覧</h1>
        <!-- request()->getUriForPath('')でbaseURLを取得することができます -->
        <a href="{{ request()->getUriForPath('') }}/todo/add">追加</a>
    </body>
</html>

$ git diff app/Http/Controllers/TodoListController.php
diff --git a/app/Http/Controllers/TodoListController.php b/app/Http/Controllers/TodoListController.php
index 9ec19b3..e4e6211 100644
--- a/app/Http/Controllers/TodoListController.php
+++ b/app/Http/Controllers/TodoListController.php
@@ -8,6 +8,6 @@ class TodoListController extends Controller
 {
     public function __invoke()
     {
-        echo 'ToDo一覧画面です。';
+        return view('todoList');
     }
 }

http://localhost/todo

▲ビューファイルのデータが表示できていますね！

参照

ドキュメント：ビュー

ToDo追加画面の実装

入力画面のコントローラ、ビューは前Stepと同じですので、ファイルの紹介のみしていきます。

<?php
// app/Http/Controllers/TodoAddController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class TodoAddController extends Controller
{
    public function __invoke()
    {
        return view('todoAdd');
    }
}

<!-- resources/views/todoAdd.blade.php -->
<html lang="ja">
    <head>
        <title>ToDo追加</title>
    </head>
    <body>
        <h1>ToDo追加</h1>
        <form action="{{ request()->getUriForPath('') }}/todo/exec" method="post">
            <input type="text" name="title" value="">
            <button type="submit">登録</button>
        </form>
        <a href="{{ request()->getUriForPath('') }}/todo">戻る</a>
    </body>
</html>

$ git diff routes/web.php
diff --git a/routes/web.php b/routes/web.php
index f785371..9d719cc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -2,6 +2,7 @@

 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\TodoListController;
+use App\Http\Controllers\TodoAddController;

 /*
 |--------------------------------------------------------------------------
@@ -19,3 +20,4 @@
 });

 Route::get('/todo', TodoListController::class);
+Route::get('/todo/add', TodoAddController::class);

バリデーションの実装

formタグのエンドポイントを作成し、バリデーションを書いてみます。

<?php
// app/Http/Controllers/TodoExecController.php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

class TodoExecController extends Controller
{
    public function __invoke(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'title' => 'required',
        ]);

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

$ git diff routes/web.php
diff --git a/routes/web.php b/routes/web.php
index 9d719cc..62d14cb 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,7 @@
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\TodoListController;
 use App\Http\Controllers\TodoAddController;
+use App\Http\Controllers\TodoExecController;

 /*
 |--------------------------------------------------------------------------
@@ -21,3 +22,4 @@

 Route::get('/todo', TodoListController::class);
 Route::get('/todo/add', TodoAddController::class);
+Route::post('/todo/exec', TodoExecController::class);

バリデーションに失敗した場合は追加画面にリダイレクトするようにしました。そのため、入力画面でデータの復元をしてあげる必要があります。

また、formタグ内にCSRF対策がなされていない場合、POSTのレスポンスが419エラーになります。
対処方法は簡単で、ToDo追加画面のビューに下記のように@csrfを追記してあげるだけです。

$ git diff resources/views/todoAdd.blade.php
diff --git a/resources/views/todoAdd.blade.php b/resources/views/todoAdd.blade.php
index d5f612a..d46ffb1 100644
--- a/resources/views/todoAdd.blade.php
+++ b/resources/views/todoAdd.blade.php
@@ -5,7 +5,8 @@
     <body>
         <h1>ToDo追加</h1>
         <form action="{{ request()->getUriForPath('') }}/todo/exec" method="post">
-            <input type="text" name="title" value="">
+            @csrf
+            <input type="text" name="title" value="{{ request()->old('title') }}">
             <button type="submit">登録</button>
+            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
         </form>
         <a href="{{ request()->getUriForPath('') }}/todo">戻る</a>

参照

ストアの実装

バリデーションを通ったので、ToDoのデータベースへの登録を実装していきます。
まずはデフォルトで作成されているデータベースにテーブルを追加します。

mysql > USE laravel_example;
mysql > CREATE TABLE todo (id int AUTO_INCREMENT, title text, PRIMARY KEY (id));

データベースの接続設定を記載します。

$ git diff config/database.php
diff --git a/config/database.php b/config/database.php
index 0faebae..5b62cb0 100644
--- a/config/database.php
+++ b/config/database.php
@@ -48,9 +48,9 @@
             'url' => env('DATABASE_URL'),
             'host' => env('DB_HOST', '127.0.0.1'),
             'port' => env('DB_PORT', '3306'),
-            'database' => env('DB_DATABASE', 'forge'),
-            'username' => env('DB_USERNAME', 'forge'),
-            'password' => env('DB_PASSWORD', ''),
+            'database' => env('DB_DATABASE', 'laravel_example'),
+            'username' => env('DB_USERNAME', 'sail'),
+            'password' => env('DB_PASSWORD', 'password'),
             'unix_socket' => env('DB_SOCKET', ''),
             'charset' => 'utf8mb4',
             'collation' => 'utf8mb4_unicode_ci',

コントローラにストアのコードを書いていきます。

$ git diff app/Http/Controllers/TodoExecController.php
diff --git a/app/Http/Controllers/TodoExecController.php b/app/Http/Controllers/TodoExecController.php
index 550e3a6..9b6677b 100644
--- a/app/Http/Controllers/TodoExecController.php
+++ b/app/Http/Controllers/TodoExecController.php
@@ -5,6 +5,7 @@
 use App\Http\Controllers\Controller;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Support\Facades\DB;

 class TodoExecController extends Controller
 {
@@ -19,5 +20,11 @@ public function __invoke(Request $request)
                 ->withErrors($validator)
                 ->withInput();
         }
+
+        DB::table('todo')->insert([
+            'title' => $request->input('title'),
+        ]);
+
+        return redirect('/todo');
     }
 }

mysql> select * from todo;
+----+-------+
| id | title |
+----+-------+
|  1 | aa    |
+----+-------+
1 row in set (0.00 sec)

▲無事登録されていました！

参照

ToDo一覧の実装

ストアで追加したToDoを一覧画面に表示していきます。
前Stepで紹介した内容とほぼ同じになりますので、ファイルの紹介のみしていきます。

$ git diff app/Http/Controllers/TodoListController.php
diff --git a/app/Http/Controllers/TodoListController.php b/app/Http/Controllers/TodoListController.php
index e4e6211..4069afa 100644
--- a/app/Http/Controllers/TodoListController.php
+++ b/app/Http/Controllers/TodoListController.php
@@ -3,11 +3,13 @@
 namespace App\Http\Controllers;

 use App\Http\Controllers\Controller;
+use Illuminate\Support\Facades\DB;

 class TodoListController extends Controller
 {
     public function __invoke()
     {
-        return view('todoList');
+        $data['todos'] = DB::table('todo')->get();
+        return view('todoList', $data);
     }
 }

$ git diff resources/views/todoList.blade.php
diff --git a/resources/views/todoList.blade.php b/resources/views/todoList.blade.php
index 0d174f4..b2cc33b 100644
--- a/resources/views/todoList.blade.php
+++ b/resources/views/todoList.blade.php
@@ -5,5 +5,10 @@
     <body>
         <h1>ToDo一覧</h1>
         <a href="{{ request()->getUriForPath('') }}/todo/add">追加</a>
+        <ul>
+            @foreach($todos as $todo)
+                <li>{{ $todo->title }}</li>
+            @endforeach
+        </ul>
     </body>
 </html>

▲データベースに登録されたToDoを表示できました！

さいごに

簡単にではありますが、ToDoリストの作成をしてきました。
筆者が利用したことのあるフレームワークに例えると「フルスタック版のSlim4」や「Codeigniter4」が近いのかなといった感覚でした。
今後、機会があればプロジェクトに導入していきたいなと思います。

この記事を書いた人

ばねソリューション事業部システムエンジニア: 東京で2年半エンジニアとしての経験を積み、浜松にUターンの後、アーティスへ入社。
ソリューション事業部のWebエンジニアとして、システムの設計・開発・保守・運用からインフラまで幅広く従事している。
フルスタックエンジニア目指して現在も勉強の日々。車が好き。