Laravel | Ledger | Delete の実装
ホーム
Todo チュートリアル
BBS チュートリアル
Ledger チュートリアル
サーバーの構築
概要
WEB アプリケーションには、CRUD という機能をつけると良いとされています。
CRUD とは、Create (作成)、Read (読み込み)、Update (更新)、Delete (削除)の頭文字をとったものです。
今回は、Delete (削除) 機能を 詳細ページに作ります。
Show ページの変更
resource / views / n_l_s の中の show.blade.php を次のように変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url('style.css')}}">
<title>Show | Ledger</title>
</head>
<body>
<h1>詳細</h1>
<div id="container">
<div class="a-right">
{{-- ここから --}}
<div class="inline">
<form method="POST" action="{{route('n_l_s.destroy', $n_l_)}}">
@csrf
@method('delete')
<button type="submit" onclick="return confirm('削除してもよろしいですか？');">削除</button>
</form>
</div>
{{-- ここまで変更 --}}
<button type="button">編集</button>
<a href="{{route('n_l_s.index')}}">
<button type="button">戻る</button>
</a>
</div>
<table>
<tr>
<th>氏名</th>
<td>{{$n_l_->name}}</td>
</tr>
<tr>
<th>性別</th>
<td>
@if($n_l_->gender)
男性
@else
女性
@endif
</td>
</tr>
<tr>
<th>学年</th>
<td>{{$n_l_->year}}年</td>
</tr>
<tr>
<th>クラス</th>
<td>{{$n_l_->cls}}組</td>
</tr>
<tr>
<th>得意科目</th>
<td>{{$n_l_->favo}}</td>
</tr>
<tr>
<th>成績</th>
<td>{{$n_l_->grades}}点</td>
</tr>
<tr>
<th>生年月日</th>
<td>{{$n_l_->birth}}</td>
</tr>
<tr>
<th>住所</th>
<td>{{$n_l_->addr}}</td>
</tr>
</table>
</div>
</body>
</html>
コントローラーの変更
App / Http / Controllers の NLController を次のように変更します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\NL;
class NLController extends Controller
{
public function index()
{
$n_l_s = NL::all();
return view('index')->with(['n_l_s'=>$n_l_s]);
}
public function show(NL $n_l_)
{
return view('n_l_s.show')->with(['n_l_' => $n_l_]);
}
public function create()
{
return view('n_l_s.create');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'birth' => 'required',
'gender' => 'required',
'year' => 'required',
'cls' => 'required',
'favo' => 'required',
'grades' => 'required',
'addr' => 'required',
]);
$n_l_ = new NL();
$n_l_->fill($request->all());
$n_l_->save();
return redirect()->route('n_l_s.show', $n_l_);
}
// ここから
public function destroy(NL $n_l_)
{
$n_l_->delete();
return redirect()->route('n_l_s.index');
}
// ここまで追加
}
CSS ファイルの変更
public の中にある style.css を次のように変更してください。
body {
font-family: sans-serif;
color: gray;
}
h1 {
margin: 32px;
font-size: larger;
text-align: center;
}
#container {
width: 90%;
margin: 0 auto;
}
.a-right {
text-align: right;
}
button {
color: gray;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 32px;
}
#table-fixed {
table-layout: fixed;
}
th {
background-color: #dfdfdf;
border: 1px solid;
padding: 8px;
}
td {
border: 1px solid;
padding: 8px;
}
.spc {
display: flex;
border-top: 0;
border-left: 0;
}
.spc>div:nth-child(1) {
width: 50%;
text-align: left;
}
.spc>div:nth-child(2) {
width: 50%;
text-align: right;
}
label {
font-weight: bold;
text-align: left;
padding: 4px;
display: block;
width: 100%;
}
input {
width: 100%;
padding: 8px;
/* margin-bottom: 8px; */
box-sizing: border-box;
}
.error {
font-size: small;
color: red;
}
.radio-btn {
width: 30px;
}
/* ここから */
.inline {
display: inline-flex;
}
/* ここまで追加 */
php artisan serve で Ledger アプリを起動して、localhost:8000 で確認してください。
Index ページで「詳細」ボタンをクリックすると詳細ページが表示されます。 詳細ページで「戻る」ボタンをクリックすると Index ページに戻ります。 詳細ページで「削除」ボタンをクリックすると、「削除してもよろしいですか？」という確認パネルが表示されます。 確認パネルで「キャンセル」をクリックすると、何もせずに、再び詳細ページが表示されます。 確認パネルで「OK」をクリックすると、そのデータは削除されて、Index ページに戻ります。
「編集」ボタンはまだ機能していません。
1103 visits
Posted: Aug. 04, 2025
Update: Aug. 04, 2025