L-3. PDOオブジェクトを使う

2022.11.06

PDOオブジェクトって何？

PDO(PHP Data Objects) : データベースアクセスのためのクラス

PHPでは様々なデータベースに接続させるための命令が用意されています。PDOを利用すれば同じ命令で複数のデータベースに接続が可能になるので開発が容易にできるようになります。PDOは、Laravelで使うことができます。

MySQLで利用した命令文を基本として利用します。そのため、複雑なデータ取得方法（JOINやバルクインサートなど）は、MySQLで利用した命令文を使用します。

コードの例

まずは、どんなものか確認しておきましょう！

MySQLデータベースに接続するコードの例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
try {
 
  // データベースに接続する命令文　ホスト名とユーザ名　パスワードを記述
  $pdo = new PDO('mysql:charset=UTF8;dbname=test;host=localhost', 'username', 'password');
 
} catch(PDOException $e) {
 
  // 接続が失敗したときのエラーメッセージを出力
  echo $e->getMessage();
 
} finally {
 
  // エラーでもエラーでなくても実行される処理＝データベースの接続解除
  $pdo = null;
}

try-catch-finallyの参考サイト

トランザクションを使って接続する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
 
// (1) 更新する値の例
$id = 1;
$email = 'sato@gray-code.co.jp';
$tel = '090-11xx-xxxx';
 
 
try {
 
  // (2) データベースに接続
  $pdo = new PDO('mysql:charset=UTF8;dbname=test;host=localhost', 'username', 'password');
 
  // (3) トランザクション開始
  $pdo->beginTransaction();
 
  // (4) ★ここでデータを更新するSQL
  $stmt = $pdo->prepare('UPDATE users SET email = :email, tel = :tel WHERE id = :id');
 
  // (5) 更新したい値をセットする
  $stmt->bindParam( ':id', $id, PDO::PARAM_INT);
  $stmt->bindParam( ':email', $email, PDO::PARAM_STR);
  $stmt->bindParam( ':tel', $tel, PDO::PARAM_STR);
 
  // (6) SQL実行
  $res = $stmt->execute();
 
  // (7) コミット
  if( $res ) {
    $pdo->commit();
  }
 
} catch(PDOException $e) {
 
  // (8) エラーメッセージを出力
  echo $e->getMessage();
  
  // (9) 更新失敗したら保存しないでもどす（ロールバック）
  $pdo->rollBack();
 
} finally {
 
  // (10) データベースの接続解除
  $pdo = null;
}

登録する処理の例

テーブルにデータを登録する場合の例
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
 
// (1) 例えば以下の登録する値がある場合
$first_name = '太郎';
$last_name = '佐藤';
$email = 'sato@gray-code.com';
$tel = '080-xxxx-xxxx';
 
try {
 
  // (2) データベースに接続
  $pdo = new PDO('mysql:charset=UTF8;dbname=test;host=localhost', 'username', 'password');
 
  // (3) トランザクション開始
  $pdo->beginTransaction();
 
  // (4) ★データを登録するSQL内容
  $stmt = $pdo->prepare('INSERT INTO users (
    first_name, last_name, email, tel
  ) VALUES (
    :first_name, :last_name, :email, :tel
  )');
 
  // (5) 値をセット
  $stmt->bindParam( ':first_name', $first_name, PDO::PARAM_STR);
  $stmt->bindParam( ':last_name', $last_name, PDO::PARAM_STR);
  $stmt->bindParam( ':email', $email, PDO::PARAM_STR);
  $stmt->bindParam( ':tel', $tel, PDO::PARAM_STR);
 
  // (6) SQL実行
  $res = $stmt->execute();
 
  // (7) コミット
  if( $res ) {
    $pdo->commit();
  }
 
} catch(PDOException $e) {
 
  // (8) エラーメッセージを出力
  echo $e->getMessage();
  
  // (9) 書き込み失敗したらロールバック
  $pdo->rollBack();
 
} finally {
 
  // (10) データベースの接続解除
  $pdo = null;
}

データベースの取得

条件に合うデータを取得
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
//　idが２をこえて telが登録されていない場合を選択する取得例
 
try {
 
  // (1) データベースに接続
  $pdo = new PDO('mysql:charset=UTF8;dbname=test;host=localhost', 'username', 'password');
 
  // (2) データを取得するSQL　
  $stmt = $pdo->prepare('SELECT * FROM users WHERE 2 < id AND tel IS NOT NULL');
 
  // (3) SQL実行　　$resに結果が配列で渡されます
  $res = $stmt->execute();
  // var_dump($res);
 
  // (4) データを先頭から順に出力
  while($data = $stmt->fetch()) {
    var_dump($data['first_name']);
  }
 
} catch(PDOException $e) {
 
  // (5) データが取得できなかったら、エラーメッセージを出力
  echo $e->getMessage();
 
} finally {
 
  // (6) データベースの接続解除
  $pdo = null;
}

参考

課題

手順を追いながら、ToDoリストを作ろう！

以上のPDOを利用してLaravelでデータを保存表示させてください。
少し長いさぎょうになるため、四つの作業（小課題1-4）に分けて作業していただきます。

  • タスク追加(小課題-1)
  • 未完了タスク表示(小課題-2)
  • タスクのステータス更新、タスク編集(小課題-3)
  • タスクの削除(小課題1-4)

コマンドを実行する（課題の準備）

テーブル準備
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//以下のコマンドを実行
php artisan make:migration create_tasks_table
 
//database/migrationsフォルダ内に
日付_create_tasks_table.php　作成される
以下の定義を記載
 
Schema::create('tasks', function (Blueprint $table) {
  $table->id();
  $table->string('name', 100);
  $table->boolean('status')->default(false);
  $table->timestamp('updated_at')->useCurrent()->nullable();
  $table->timestamp('created_at')->useCurrent()->nullable();
});
//定義の意味を理解しておきましょう。

データをマイグレートする

1
2
3
4
//以下のコマンドを実行する
php artisan migrate
 
// tasks テーブルが作成される。

テーブルが作成されたことを確認してください。

モデルをつくる

1
2
//以下のコマンドを実行する
php artisan make:model Task

app/Models/Task.phpが作成されていることを確認してください。

コントローラーを作る

CRUD操作を簡単なコードでコントローラーに割りあてる仕組みがあります

1
2
3
4
5
6
7
8
9
10
//  routes/web.phpに以下の内容を下位に追記してください。
 
Route::get('/',[TaskController::class,'index']);  //一覧表示用のURLとコントローラ場所
Route::post('/create',[TaskController::class,'create']);  //タスク追加用のURLとコントローラ場所
Route::post('/edit',[TaskController::class,'edit']);  //タスク更新用
Route::post('/delete',[TaskController::class,'delete']);  //タスク削除用
 
// 追記したら以下のコマンドを実行する
php artisan make:controller TaskController --resource

app/Http/Controllersに、「TaskController.php」が作成されていることを確認してください。

ルート情報を追記
routes/web.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;  ←これを追加
 
：
省略
：
 
//Route::get( アドレス , [コントローラーの名前::class , メソッド名] );
Route::get('/list', [\App\Http\Controllers\TodoListController::class, 'index']);
 
Route::get('/',[TaskController::class,'index']);//一覧表示
Route::post('/create',[TaskController::class,'create']);//タスク追加
Route::post('/edit',[TaskController::class,'edit']);//タスク更新
Route::post('/delete',[TaskController::class,'delete']);//タスク削除
 
Route::resource('tasks', TaskController::class);  ←これを追加　タスクのコントローラ

TaskController.php内の各メソッドが使用できる設定にしました。これらのメソッドを呼び出すURIがあらかじめ決めています。確認のため以下のコマンドを実行してみよう。

1
2
// 以下の実行してルーティング一覧を確認してください。
php artisan route:list
php artisan route:list　実行結果

例えば、GET tasks/{task}の意味は、「/tasks/2」でGETアクセスしたら、showメソッドが呼ばれて、IDの2のタスクを表示します。

ビューを作成する　（画面の表示）
index.blade.phpに以下を記載する
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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">
    <title>Todo</title>
 
    @vite('resources/css/app.css')
</head>
 
<body class="flex flex-col min-h-[100vh]">
    <header class="bg-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="py-6">
                <p class="text-white text-xl">Todoアプリ</p>
            </div>
        </div>
    </header>
//
//ここにいろいろ記載
//
    <footer class="bg-slate-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="py-4 text-center">
            <p class="text-white text-sm">Todoアプリ</p>
        </div>
    </div>
    </footer>
</body>
 
</html>

resources/viewsのフォルダ直下にファイルを作成も可能ですが、ここでは、viewsフォルダ直下に「tasks」フォルダを作成して、その中にindex.blade.phpを作成します。

app/Http/Controllers/TaskController.php　にする。[/tasks]にアクセスしたとき、indexを表示する意味。

PHP
1
2
3
4
5
6
7
// index 関数に以下を記入
 
public function index()
{
　　// viewの中のtasksの中のindexを表示すろの意味
    return view('tasks.index');
}

表示確認

ここで表示を確認してみましょう。

1
2
3
4
5
6
// 以下のコマンドを実行
php artisan serve
 
ブランザを表示してください。
//
http://127.0.0.1:8000/tasks

ブラウザを実行すると以下のような表示になりますが、、

Xamppなどローカルで開発すると「Vite manifest not found at」とエラーがでると思います。

実行結果

※「Vite manifest not found at」エラーの対応

エラー解消のために、Node.jsをインストールしてください。

バージョンによりインストールして失敗する場合があります。

その場合、エラーの箇所 @vite(‘resources/css/app.css’) を削除してもかまいません。

Node.jsダウンロード先 （←Google Chromeで開きましょう！）

1
2
3
4
//以下の　npm　をコマンドでインストールしてください。
//実行先は、Laravelを実行した同じフォルダで実行してください。
 
npm install

Larav参考　LaravelでVite manifest not found at が出る原因と対策参考

ターミナルで以下を実行したままにしておく。実行先は、Laravelを実行した同じフォルダで実行してください。

npm run devのコマンドを実行

参考

さらにターミナルを開いて以下を実行してください。

1
2
3
4
5
6
// 以下のコマンドを実行
php artisan serve
 
ブランザを表示してください。
//
http://127.0.0.1:8000/tasks

詳細の作成

以下のindex.blade.phpに入力します。

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!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">
    <title>Todo</title>
    <!--　headタグの中で以下の記述により、Tailwind CSSを読み込でおきます  -->
    <!-- 実装したい方はこちらで、https://reffect.co.jp/html/tailwindcss-for-beginners -->
<!-- V2の場合 -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
<!-- V3の場合 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- @vite('resources/css/app.css') -->
 
</head>
 
<body class="flex flex-col min-h-[100vh]">
<header class="bg-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="py-6">
            <p class="text-white text-xl">Todoアプリ</p>
        </div>
    </div>
</header>
 
<main class="grow">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="py-[100px]">
            <p class="text-2xl font-bold text-center">今日は何する？</p>
            <!-- ここのフォームで　tasksのデータpostで、Controllerに送ってます。 -->
            <form action="/tasks" method="post" class="mt-10">
                @csrf
                <div class="flex flex-col items-center">
                    <label class="w-full max-w-3xl mx-auto">
                        <input
                            class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-4 pl-4 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
                            placeholder="何かをする..." type="text" name="task_name" /><!-- 送られるデータです -->
                    </label>
 
                    <button type="submit" class="mt-8 p-4 bg-slate-800 text-white w-full max-w-xs hover:bg-slate-900 transition-colors">
                        追加する
                    </button>
                </div>
 
            </form>
{{-- 追記 --}}
<!-- のちにリスト表示にするときに使う場所-->
  {{-- 追記ここまで --}}
 
        </div>
    </div>
</main>
<footer class="bg-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="py-4 text-center">
            <p class="text-white text-sm">Todoアプリ</p>
        </div>
    </div>
</footer>
</body>
 
</html>

※Laravelでフォームをつくる場合は、セキュリティ対策のCSRF対策として、必ず「@csrf」というディレクティブが必要だそうです。

小課題ー１

タスクをMysqlテーブルに登録する

TaskController.php　追記内容
PHP
1
2
3
4
5
6
7
8
    public function store(Request $request)
    {
        //クライアントから受け取った内容が　$requestにあります。
        //その中にinput　された'task_name'　を取得します。
        $task_name = $request->input('task_name');
        // dd の関数で確認します。　※関数内容はこちらにあります。→vendor/symfony/var-dumper/Resources/functions/dump.php
        dd($task_name);//　受け取れたことを確認します。
    }

上記の内容記載して、ブラウザ画面のテキストボックスに文字をいれて

受け取れていることを確認してください。

Eloquentのクエリスコープについて

データベースのレコード処理を簡素化するオブジェクト関係マッピング（ORM）で、データベースのレコードをまるでPHPのオブジェクトのように扱える仕組みです。

Userというクラスにアクセスして、1番のユーザーを取得場合、以下のように表します。

Oracle PL/SQL
1
2
3
4
5
6
7
通常、SQLでデータを取得する場合：
SELECT * FROM users WHERE id = 1;
 
と記載します。
Eloquentの場合、PHPで以下のように書けます：
 
$user = User::find(1);

テーブルに登録

以下のように書き換えてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
use App\Models\Task;　// ←７行目あたりに追加
 
 
 
public function store(Request $request)
{
  //クライアントから受け取った内容が　$requestにあります。
  
  //モデルをインスタンス化　初期呼び出し
  $task = new Task;
  //その中にinput　された'task_name'　を取得します。
  //モデル->カラム名 = 値 で、データを割り当てる
  $task->name = $request->input('task_name');
  
  //var_dump($task); //バーダンプして表示を確認してみよう。
  //exit;  //ここでストップさせる
  //データベースに保存
  $task->save();
  //リダイレクトして　tasksにもどる
  return redirect('/tasks');
}

小課題－２

上記の内容を記載して、ブラウザ画面のテキストボックスに文字をいれて

MySQLデータに保存されているか確認してみてください。

バリデーションチェックしておく

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
use Illuminate\Support\Facades\Validator;//←　８行目あたりに追記
 
 
 
public function store(Request $request)
{
//↓↓↓↓↓storeメソッド内を以下のように追加-------------------
//バリデーションのリールを記載
  $rules = [
    'task_name' => 'required|max:100',
  ];
  //エラー時のメッセージ
  $messages = ['required' => '必須項目です', 'max' => '100文字以下にしてください。'];
  //バリデーションのエラーならここで処理をします。
  Validator::make($request->all(), $rules, $messages)->validate();
  //↑↑↑↑↑-------------------------------------------
  
  //モデルをインスタンス化
  $task = new Task;
  //モデル->カラム名 = 値 で、データを割り当てる
  $task->name = $request->input('task_name');
  //データベースに保存
  $task->save();
  //リダイレクト
  return redirect('/tasks');
}

resources/views/tasks/index.blade.phpの箇所で、

labelの中にあるinputタグの下に以下を追記してください。

resources/views/tasks/index.blade.php
1
2
3
4
5
6
7
@error('task_name')
  <div class="mt-3">
      <p class="text-red-500">
          {{ $message }}
      </p>
  </div>
@enderror

表示されるか確認してください。何も入力しないで追加ボタンを押してください。

タスクリストの表示

app/Http/Controllers/TaskController.php
PHP
1
2
3
4
5
6
7
8
    public function index()
    {
        //Task　テーブルのデータを全部取得する
        $tasks = Task::all();
        //dd($tasks);
        // 'tasks'=> $tasks 引数で渡している。
        return view('tasks.index', ['tasks'=> $tasks]);
    }

詳細の作成の中に記載した

1
2
3
{{-- 追記 --}}
<!-- のちにリスト表示にするときに使う場所-->
{{-- 追記ここまで --}}

を以下の内容を追記してください。

resources/views/tasks/index.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{{-- 追記 --}}
  @if ($tasks->isNotEmpty())
      <div class="max-w-7xl mx-auto mt-20">
          <div class="inline-block min-w-full py-2 align-middle">
              <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                  <table class="min-w-full divide-y divide-gray-300">
                      <thead class="bg-gray-50">
                          <tr>
                              <th scope="col"
                                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">
                                  タスク</th>
                              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                                  <span class="sr-only">Actions</span>
                              </th>
                          </tr>
                      </thead>
                      <tbody class="divide-y divide-gray-200 bg-white">
                          @foreach ($tasks as $item)
                              <tr>
                                  <td class="px-3 py-4 text-sm text-gray-500">
                                      <div>
                                          {{ $item->name }}
                                      </div>
                                  </td>
                                  <td class="p-0 text-right text-sm font-medium">
                                      <div class="flex justify-end">
                                          <div>
                                              <form action="/tasks/{{ $item->id }}"
                                                  method="post"
                                                  class="inline-block text-gray-500 font-medium"
                                                  role="menuitem" tabindex="-1">
                                                  @csrf
                                                  @method('PUT')
 
　　　　　　　　　　　　　　　　　　　　　　　　　{{-- 完了ボタンの追記します。 --}}
 
　　　　　　　　　　　　　　　　　　　　　　　　　{{-- 完了ボタンの追記します。 --}}
                                                  <button type="submit"
                                                      class="bg-emerald-700 py-4 w-20 text-white md:hover:bg-emerald-800 transition-colors">完了</button>
                                              </form>
                                          </div>
                                          <div>
                                              <a href="/tasks/{{ $item->id }}/edit/"
                                                  class="inline-block text-center py-4 w-20 underline underline-offset-2 text-sky-600 md:hover:bg-sky-100 transition-colors">編集</a>
                                          </div>
                                          <div>
                                              <form action="/tasks/{{ $item->id }}" method="post"
                                                  class="inline-block text-gray-500 font-medium"
                                                  role="menuitem" tabindex="-1">
                                                  @csrf
                                                  @method('DELETE')
                                                  <button type="submit"
                                                      class="py-4 w-20 md:hover:bg-slate-200 transition-colors">削除</button>
                                              </form>
                                          </div>
                                      </div>
                                  </td>
                              </tr>
                          @endforeach
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  @endif
  {{-- 追記ここまで --}}

それぞれ何をしているかを理解しておきましょう。

var_dump(関数値);　dd($tasks);を使って何が表示されているかを確認しましょう。

タスクの編集

１行のタスクを編集する場合の処理

TaskController.php
PHP
1
2
3
4
5
6
7
8
  public function edit($id)
  {
        // idから$taskを取得
        $task = Task::find($id);
        //dd($task);//何がでているか確認しよう。
        //var_dump($task);//何がでているか確認しよう。
        return view('tasks.edit', ['task'=> $task]);
  }

resources/views/tasks/edit.blade.phpを作成して以下のように追記します。

resources/views/tasks/edit.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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">
      <title>Todo</title>
      <!-- headタグの中で以下の記述により、Tailwind CSSを読み込でおきます  -->
      <!-- 実装したい方はこちらで、https://reffect.co.jp/html/tailwindcss-for-beginners -->
      <!-- V2の場合 -->
      <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
      <!-- V3の場合 -->
      <script src="https://cdn.tailwindcss.com"></script>
      <!-- @vite('resources/css/app.css') -->
 
  </head>
 
  <body class="flex flex-col min-h-[100vh]">
      <header class="bg-slate-800">
          <div class="max-w-7xl mx-auto px-4 sm:px-6">
              <div class="py-6">
                  <p class="text-white text-xl">Todoアプリ-編集画面</p>
              </div>
          </div>
      </header>
 
      <main class="grow grid place-items-center">
          <div class="w-full mx-auto px-4 sm:px-6">
              <div class="py-[100px]">
                  <form action="/tasks/{{ $task->id }}" method="post" class="mt-10">
                      @csrf
                      @method('PUT')
 
                      <div class="flex flex-col items-center">
                          <label class="w-full max-w-3xl mx-auto">
                              <input
                                  class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md py-4 pl-4 shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
                                  type="text" name="task_name" value="{{ $task->name }}" />
                              @error('task_name')
                                  <div class="mt-3">
                                      <p class="text-red-500">
                                          {{ $message }}
                                      </p>
                                  </div>
                              @enderror
                          </label>
 
                          <div class="mt-8 w-full flex items-center justify-center gap-10">
                              <a href="/tasks" class="block shrink-0 underline underline-offset-2">
                                  戻る
                              </a>
                              <button type="submit"
                                  class="p-4 bg-sky-800 text-white w-full max-w-xs hover:bg-sky-900 transition-colors">
                                  編集する
                              </button>
                          </div>
                      </div>
 
                  </form>
 
              </div>
          </div>
      </main>
      <footer class="bg-slate-800">
          <div class="max-w-7xl mx-auto px-4 sm:px-6">
              <div class="py-4 text-center">
                  <p class="text-white text-sm">Todoアプリ</p>
              </div>
          </div>
      </footer>
  </body>
 
  </html>
更新
TaskController.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    public function update(Request $request, $id)
    {
        //バリデーションです
        $rules = [
            'task_name' => 'required|max:100',
        ];
 
        $messages = ['required' => '必須項目です', 'max' => '100文字以下にしてください。'];
 
        Validator::make($request->all(), $rules, $messages)->validate();
 
 
        //該当のタスクを検索　取得する
        $task = Task::find($id);
 
        //モデル->カラム名 = 値 で、データnameを割り当てる（更新する）
        $task->name = $request->input('task_name');
 
        //データベースに保存
        $task->save();
 
        //リダイレクト
        return redirect('/tasks');
    }

タスクを完了させる

完了ボタンでを設置しているformタグの中身が以下になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="/tasks/{{ $item->id }}"
    method="post"
    class="inline-block text-gray-500 font-medium"
    role="menuitem" tabindex="-1">
    @csrf
    @method('PUT')
 
    {{-- 完了ボタンの追記します。 --}}
    <input type="hidden" name="status" value="{{$item->status}}">
    {{-- 完了ボタンの追記します。 --}}
 
    <button type="submit"
        class="bg-emerald-700 py-4 w-20 text-white md:hover:bg-emerald-800 transition-colors">完了</button>
</form>
TaskController.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    public function update(Request $request, $id)
    {
 
        //「編集する」と完了ボタンをおしたとき ifで分けることにします。
        if ($request->status === null) {
 
            //バリデーションです
            $rules = [
                'task_name' => 'required|max:100',
            ];
 
            $messages = ['required' => '必須項目です', 'max' => '100文字以下にしてください。'];
 
            Validator::make($request->all(), $rules, $messages)->validate();
 
 
            //該当のタスクを検索　取得する
            $task = Task::find($id);
 
            //モデル->カラム名 = 値 で、データnameを割り当てる（更新する）
            $task->name = $request->input('task_name');
 
            //データベースに保存
            $task->save();
        }else {
            //「完了」ボタンを押したとき
 
            //該当のタスクを検索
            $task = Task::find($id);
 
            // statusを　trueにして完了に変えます。
            //モデル->カラム名 = 値 で、データを割り当てる
            $task->status = true; //true:完了、false:未完了
 
            //データベースに保存
            $task->save();
        }
 
        //リダイレクト
        return redirect('/tasks');
    }

小課題－３

完了したとき、データベースでstatusが１になっていることを確認しましょう！
※なぜstatusが1になるかはこちら

完了は非表示にする

TaskController.php
PHP
1
2
3
4
5
6
7
8
9
10
11
    public function index()
    {
        //Task　テーブルのデータを全部取得する
        //$tasks = Task::all();
        // status がfalseのときのデータをすべて取得する
        $tasks = Task::where('status', false)->get();
        
        //dd($tasks);
        //return view('tasks.index', compact('tasks'));
        return view('tasks.index', ['tasks'=> $tasks]);
    }

タスクの削除

タスクの削除をするボタンの部分に以下を修正します。

resources/views/tasks/index.blade.php
PHP
1
2
3
4
5
6
7
8
9
10
11
<div>
  <form onsubmit="return deleteTask();"
      action="/tasks/{{ $item->id }}" method="post"
      class="inline-block text-gray-500 font-medium"
      role="menuitem" tabindex="-1">
      @csrf
      @method('DELETE')
      <button type="submit"
          class="py-4 w-20 md:hover:bg-slate-200 transition-colors">削除</button>
  </form>
</div>

Javascriptを使って削除する前に、警告表示をつけます。

</footer>下に設置しました。

resources/views/tasks/index.blade.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<footer class="bg-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="py-4 text-center">
            <p class="text-white text-sm">Todoアプリ</p>
        </div>
    </div>
</footer>
 
<script>
    function deleteTask() {
        if (confirm('本当に削除しますか？')) {
            return true;
        } else {
            return false;
        }
    }
</script>

小課題－４

削除処理をdestroy関数にいれてください。

ヒント：Task::find(値)->delete();　で削除され、return 戻すようにしてください。

   

小課題1から4すべて完了したら、動作を確認して、GitHubにプッシュしてプルリクエストを投げてください。

ヒント

文字、行の量が多いため、追記部分に漏れがありエラーが起きる可能性があります。漏れがないかしっかりチェックすること。
MVCパターンをしっかり理解して、役割を分けること。

参考

課題・復習用検索キーワード

検索例
🔍php PDO Laravel
🔍php Laravel MVCパターン
🔍Mysql　命令文
🔍Laravel　Todoアプリ機能一覧