[ はじめて の Laravel ] リンク一覧ページ を 作る No.5
この記事は 2021年 11月 27日 に書かれた記事です。
前回は 任意のデータを 入力し 登録させたので
今回は データの編集を 行いたいと思います
大まかには 前回と同様です
今回は ビューの編集 コントローラの編集 ルーティングの設定 の順に 進めます
ビューの編集
今回は 編集用の フォームページを作るので resources / views / links / edit.blade.php という 名前で テンプレートを作ります
@extends('links.default')
@section('title', 'links.edit')
@section('content')
<section class="my-3 links">
<header>
<h2 class="text-center">@yield('title')</h2>
</header>
<form action="{{ route('links.update', $link->id) }}" method="post">
@csrf
@method('PUT')
<div class="row mb-3">
<label for="title" class="col-sm-2 col-form-label">Title</label>
<div class="col-sm-10">
<input id="title" class="form-control" type="text" name="title" placeholder="Title" value="{{ old('title') ? old('title') : $link->title }}">
</div>
</div>
<div class="row mb-3">
<label for="url" class="col-sm-2 col-form-label">URL</label>
<div class="col-sm-10">
<input id="url" class="form-control" type="text" name="url" placeholder="URL" value="{{ old('url') ? old('url') : $link->url }}">
</div>
</div>
<div class="row mb-3">
<label for="description" class="col-sm-2 col-form-label">Description</label>
<div class="col-sm-10">
<textarea id="description" class="form-control" name="description" placeholder="Description">{{ old('description') ? old('description') : $link->description }}</textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>
前回と 異なるところは
action先@method('PUT')が 追加{{ old('~') }}が{{ old('~') ? old('~') : $link->~ }}に 変わった
の 3点 です
また 編集用のフォームページ への リンクを インデックスページ ( resources / views / links / ) に 追加してあげますindex.blade.php
@extends('links.default')
@section('title', 'links.index')
@section('style')
.links dd {
margin-left: 2rem;
word-break: break-all;
}
@endsection
@section('content')
<section class="my-3 links">
<header>
<h2 class="text-center">@yield('title')</h2>
</header>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a class="btn btn-primary" href="{{ url("/links/create") }}">Add</a>
</div>
<dl>
@foreach ($links as $link)
<dt><a href="{{ $link->url }}">{{ $link->title }}</a></dt>
<dd>{{ $link->description }}</dd>
<dd>
<a class="btn btn-success" href="{{ url("/links/{$link->id}/edit") }}">Edit</a>
</dd>
@endforeach
</dl>
</section>
@endsection
コントローラの編集
前回編集した app / Http / Controllers / LinkController.php の public function edit() と public function update() の 中身を書き換えます
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$link = Link::find($id);
return view('links.edit', ['link' => $link]);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(LinkRequest $request, $id)
{
$link = Link::find($id);
$link->title = $request->title;
$link->url = $request->url;
$link->description = $request->description;
$link->save();
return redirect('/links')->with('success', 'Edited successfully !');
}
前回と 大きく異なるところは
editには 引数 ($id) があるので それを元に データを取得し ビューに 値を渡しているupdateにも 引数 ($id) があるので それを元に データを取得し 値を書き換えてsaveしている
の 2点 です
ルーティングの設定
ルーティング は routes / web.php で 設定します
今回は app / Http / Controllers / LinkController.phpedit と update を 追加します
Route::resource('/links', App\Http\Controllers\LinkController::class)->only(['index','create','store','edit','update']);
ページの確認
http://localhost:50000/links/ から 確認します
- リンク一覧に Editボタンが追加されている
- 編集元のデータが入った状態で 編集フォーム が 表示されている
- 登録後 インデックスページに 反映されている
等が 確認できれば 完成です
