WEB アプリケーションには、CRUD という機能をつけると良いとされています。 CRUD とは、Create (作成)、Read (読み込み)、Update (更新)、Delete (削除)の頭文字をとったものです。 今回は、Delete (削除) 機能をつけていきます。
resources / views / index.blade.php を次のように書きかえてください。
途中に出てくる h-layout は、x-layout から名前を変更したものです。注意してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task</title>
<link rel="stylesheet" href="{{ url('style.css') }}">
</head>
<body>
<div class="container">
<h1>Task</h1>
<form method="POST" action="{{ route('tasks.store')}}">
@csrf
<div class="h-layout">
<input type="text" name="body"><button class="btn-black">Create</button>
</div>
</form>
<p class="error">
@error('body')
{{ $message }}
@enderror<br></p>
@forelse ($tasks as $task)
<!-- ここから -->
<form method="Get" action="{{ route('tasks.show', $task) }}">
@csrf
<div class="h-layout-2">
<p class="task">{{ $task->body }}</p>
<button class="btn-white">Edit</button>
</div>
</form>
<!-- ここまで変更になっています -->
@empty
<p class="task">No task!</p>
@endforelse
</div>
</body>
</html>
show は一般的に項目の詳細を表示するページです。今回はこのページに Delete (削除)機能を追加します。
resources / views の中に tasks というフォルダを作り、の中に show.blade.php というファイルを作ります。そして show.blade.php に次のように記述してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit | Task</title>
<link rel="stylesheet" href="{{ url('style.css') }}">
</head>
<body>
<div class="container">
<h1>Edit</h1>
<div class="h-layout">
<input type="text" name="body" value="{{ old('body', $task->body) }}">
</div>
<form method="POST" action="{{ route('tasks.destroy', $task) }}">
@csrf
@method('delete')
<p class="h-right">
<button class="btn-black" onclick="return confirm('Sure？');">Delete</button>
</p>
</form>
<p class="h-right">
<a href="{{ route('tasks.index')}}"><button class="btn-black">Back</button></a>
</p>
</div>
</body>
</html>
app / Http / Controllers の TaskController.php に show メソッドと destroy メソッドを追加します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Task;
class TaskController extends Controller
{
public function index()
{
$tasks = Task::all();
return view('index')->with(['tasks' => $tasks]);
}
public function store(Request $request)
{
$request->validate([
'body'=>'required|max:30',
]);
$task = new Task();
$task->body = $request->body;
$task->save();
return redirect()->route('tasks.index');
}
// ここから
public function show(Request $request, Task $task)
{
return view('tasks.show')->with(['task'=>$task]);
}
public function destroy(Task $task)
{
$task->delete();
return redirect()->route('tasks.index');
}
// ここまで追加されています
}
インデックスページの表示を整えるため、public フォルダに、次のファイルを style.css というファイル名で作ってください。
途中に出てくる h-layout は、x-layout から名前を変更したものです。注意してください。
body {
background-color: #efefef;
}
.container {
width: 500px;
margin: 16px auto;
}
h1 {
font-size: 20px;
}
.task {
height: 80px;
width: 100%;
border-radius: 4px;
padding: 0px 8px;
line-height: 80px;
box-sizing: border-box;
background-color: white;
margin-bottom: 0px;
}
.h-layout {
display: flex;
}
input {
height: 25px;
width: 100%;
padding: 4px;
border: solid 0px #efefef;
border-radius: 4px;
}
.btn-black {
background-color: black;
width: 60px;
color: white;
border-radius: 4px;
}
.error {
margin-bottom: 0px;
color: red;
font-size: xx-small;
}
/* ここから */
.h-layout-2 {
display: flex;
position: relative;
}
.btn-white {
background-color: white;
border: solid 1px lightgray;
border-radius: 4px;
color: gray;
width: 50px;
height: 30px;
position: absolute;
right: 4px;
bottom: 4px;
}
.h-right {
text-align: right;
padding: 0px;
margin: 0px;
}
/* ここまで追加します */
php artisan serve で Task アプリを起動して、localhost:8000 で確認してください。