【Laravel チュートリアル】タスク管理アプリ開発：タスク削除機能

2020年2月8日 Git Laravel プログラミング

icon by Icons8

PHPのフレームワークLaravelのチュートリアルとして、タスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。

今回はデータベースにあるデータを利用して、タスクの削除機能を作成します。CRUDの「Delete：削除」です。

CRUDについてはこちらを参考ください

【Laravel 入門】タスク管理アプリ開発：タスク詳細画面 で実装したweb.php , TasksController と resources/views/tasks/show.blade.php も修正します。

削除ボタンの実装

今回、削除「画面」は作らずに、ボタンを押すと削除できるような機能を実装します。

そのため、タスク詳細画面に「削除」ボタンを実装します。ボタンを押すとformからデータ送信して、Controllerでデータを削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="header">
        <h1>タスク詳細</h1>
        <a href="/" class="button">一覧に戻る</a>
        <a href="/edit/{{ $task->id }}" class="button">編集</a>

        {{--削除ボタンを実装--}}
        <form action="/{{ $task->id }}" method="POST">
            @method('DELETE')
            @csrf
            <button type="submit">削除</button>
        </form>

    </div>
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        <div class="contents">{!! nl2br(e($task->contents)) !!}</div>
    </div>
</body>
</html>

POST先のURLは削除する id を含んだURLにします（/1 や /2 など）。

今回のHTTPリクエストメソッドは DELETE です。そのためformタグには method="POST" を指定するのですが、formの中で @method('DELETE') を指定する必要があります。

データ送信をするために <input type="submit"> は必須なので忘れないでください。

サーバを起動して確認する

ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/1 などのデータベースに存在するデータの id を指定して、アクセスしてみましょう。

$ php artisan serve

以下のように削除ボタンが表示されていればOKです 👍

削除機能の実装

Routingの実装

web.php を修正し、 /1 や /2 のように削除したいタスクのid を含むURL（ /{id} ）にアクセスしたときに、 TasksController の delete アクションが実行されるようにします。

※ 【Laravel 入門】タスク管理アプリ開発：タスク詳細画面 の web.php と同じように id は 0 ~ 9 の複数桁にしています。

<?php

Route::delete('/{id}', 'TasksController@delete')->where('id', '[0-9]+');

Controllerの実装

TasksController の deleteアクションの引数に int $id を追加します。そうすると delete アクションの中でURLに含まれている id を使用できます。

※ int というは integerの略で数値を表します。 $id は数値ですと明示しています。

delete アクションの中では以下の２つの処理を行います。

  • destroy メソッドを利用してデータを削除
  • 削除したら一覧画面に redirect させる
<?php

namespace App\Http\Controllers;

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

class TasksController extends Controller
{
    ・・・・・
    ・・・・・

    public function delete(int $id)
    {
        Task::destroy($id);
        return redirect('/');
    }
}

destroy メソッドは引数に削除したいデータの id を指定することでデータの削除が可能です。

ボタンを押して削除できるか確認

ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/1 などのデータベースに存在するデータの id を指定して、アクセスしてみましょう。

$ php artisan serve

以下のように削除ボタンをクリックして、一覧にリダイレクトすることを確認してください。

一覧画面からデータが削除されていればOKです 👍

削除していいか確認をする

削除ボタンを押した瞬間にいきなり削除されると、大事なデータを間違って消してしまうかもしれません。

そのため、削除ボタンをクリックした後に、以下のようなポップアップを表示して確認処理を入れたいと思います。

Javascriptの confirm メソッドを利用します。show.blade.php を以下のように変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="header">
        <h1>タスク詳細</h1>
        <a href="/" class="button">一覧に戻る</a>
        <a href="/edit/{{ $task->id }}" class="button">編集</a>
        
        <form action="/{{ $task->id }}" method="POST">
            @method('DELETE')
            @csrf
            {{-- 確認のポップアップを表示 --}}
            <button type="submit" onclick="return confirm('削除します。よろしいですか？')">削除</button>
        </form>
    </div>
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        <div class="contents">{!! nl2br(e($task->contents)) !!}</div>
    </div>
</body>
</html>

削除ボタンを押したときに、ポップアップが表示されていればOKです 👍

見た目を整える

ViewファイルとSassファイルを修正して見た目を整えます。LaravelでSassを使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。

参考：LaravelでSassを利用する

お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。

※ CSSは【Laravel 入門】タスク管理アプリ開発：タスク編集画面 で作ったものをそのまま利用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="header">
        <h1>タスク詳細</h1>
        <a href="/" class="button">一覧に戻る</a>
        <a href="/edit/{{ $task->id }}" class="button">編集</a>

        <form action="/{{ $task->id }}" method="POST">
            @method('DELETE')
            @csrf
            <button class="button delete" type="submit" onclick="return confirm('削除します。よろしいですか？')">削除</button>
        </form>
    </div>
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        <div class="contents">{!! nl2br(e($task->contents)) !!}</div>
    </div>
</body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

・・・・・
・・・・・

.delete {
    color: red;
    border: solid 1px red;
    background-color: rgba(0, 0, 0, 0);
}

終了 👍

git status コマンドで修正されたファイルが表示されているかを確認してください。

git addとgit commitを実行してローカルリポジトリに登録し
git pushでリモートリポジトリへ更新履歴を登録してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です