Laravel | Ledger | Update の実装
ホーム
Todo チュートリアル
BBS チュートリアル
Ledger チュートリアル
Cart チュートリアル
サーバーの構築
概要
WEB アプリケーションには、CRUD という機能をつけると良いとされています。
CRUD とは、Create (作成)、Read (読み込み)、Update (更新)、Delete (削除)の頭文字をとったものです。
今回は、Update (機能) 機能を作ります。
Edit ページの作成
resources / views / n_l_s の中に edit.blade.php というファイルを作って、次のように記述してください。
{{----------------------------
edit.blade.php
copyright : vivacocoa.jp
last modified: Aut. 04, 2025
------------------------------}}
<!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>Update | Ledger</title>
</head>
<body>
<h1>編集</h1>
<div id="container">
<form method="POST" action="{{route('n_l_s.update', $n_l_)}}">
@csrf
@method('patch')
<div class="a-right">
<button type="submit">保存</button>
<a href="{{route('n_l_s.show', $n_l_)}}"><button type="button">戻る</button></a>
</div>
<div>
<label>氏名</label>
<input type="string" name="name" value="{{$n_l_->name}}">
@error('name')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label>性別</label>
<input class="radio-btn" type="radio" name="gender" value="1" {{$n_l_->gender == "1" ? 'checked' : ''}}>男性
<input class="radio-btn" type="radio" name="gender" value="0" {{$n_l_->gender == "0" ? 'checked' : ''}}>女性
@error('gender')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label>学年</label>
<input type="number" name="year" value="{{$n_l_->year}}" min="1" max="3" placeholder="1 から 3">
@error('year')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label for="product-name">クラス</label>
<input type="string" name="cls" value="{{$n_l_->cls}}" pattern="[A-D]" maxlength="1" placeholder="A から D">
@error('cls')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label for="product-name">得意科目</label>
<select name="favo">
<option value="">選択してください</option>
<option value="国語" @if('国語'==$n_l_->favo) selected @endif>国語</option>
<option value="英語" @if('英語'==$n_l_->favo) selected @endif>英語</option>
<option value="数学" @if('数学'==$n_l_->favo) selected @endif>数学</option>
<option value="理科" @if('理科'==$n_l_->favo) selected @endif>理科</option>
<option value="社会" @if('社会'==$n_l_->favo) selected @endif>社会</option>
<option value="体育" @if('体育'==$n_l_->favo) selected @endif>体育</option>
<option value="音楽" @if('音楽'==$n_l_->favo) selected @endif>音楽</option>
<option value="美術" @if('美術'==$n_l_->favo) selected @endif>美術</option>
</select>
@error('favo')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label>成績</label>
<input type="number" name="grades" value="{{$n_l_->grades}}" min="0" max="100" placeholder="0 から 100">
@error('grades')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label>生年月日</label>
<input type="date" name="birth" value="{{$n_l_->birth}}">
@error('birth')<p class="error">{{ $message }}</p>@enderror
</div>
<div>
<label>住所</label>
<input type="text" name="addr" value="{{$n_l_->addr}}">
@error('addr')<p class="error">{{ $message }}</p>@enderror
</div>
</form>
</div>
</body>
</html>
Show ページの変更
resource / views / n_l_s の中の show.blade.php を次のように変更してください。
{{----------------------------
show.blade.php
copyright : vivacocoa.jp
last modified: Aug. 04, 2025
------------------------------}}
<!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>
{{-- ここから --}}
<div class="inline">
<form method="GET" action="{{route('n_l_s.edit', $n_l_)}}">
@csrf
<button type="submit">編集</button>
</form>
</div>
{{-- ここまで変更 --}}
<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
/*********************************
* NLController.php
* copyright. : vivacocoa.jp
* last modified : Aug. 04, 2025
********************************/
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');
}
// ここから
public function edit(NL $n_l_)
{
return view('n_l_s.edit')->with(['n_l_'=>$n_l_]);
}
public function update(Request $request, NL $n_l_)
{
$n_l_->name = $request->name;
$n_l_->gender = $request->gender;
$n_l_->year = $request->year;
$n_l_->cls = $request->cls;
$n_l_->favo = $request->favo;
$n_l_->grades = $request->grades;
$n_l_->birth = $request->birth;
$n_l_->addr = $request->addr;
$n_l_->save();
return redirect()->route('n_l_s.show', $n_l_);
}
// ここまで追加
}
php artisan serve で Ledger アプリを起動して、localhost:8000 で確認してください。
Index ページで「詳細」ボタンをクリックすると詳細ページが表示されます。 詳細ページで「戻る」ボタンをクリックすると Index ページに戻ります。 詳細ページで「編集」ボタンをクリックすると、編集ページが表示されます。 編集ページで「戻る」ボタンをクリックすると詳細ページに戻ります。 編集ページで各項目を編集して、「保存」ボタンをクリックすると、新しい値で書き換えらた詳細ページが表示されます。
3298 visits
Posted: Aug. 04, 2025
Update: Aug. 04, 2025