てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

前回は 任意のデータを 入力し 登録させたので
今回は データの編集を 行いたいと思います

大まかには 前回と同様です

今回は ビューの編集 コントローラの編集 ルーティングの設定 の順に 進めます


ビューの編集


今回は 編集用の フォームページを作るので 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.phppublic 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.phpeditupdate を 追加します

Route::resource('/links', App\Http\Controllers\LinkController::class)->only(['index','create','store','edit','update']);

ページの確認


http://localhost:50000/links/ から 確認します

  • リンク一覧に Editボタンが追加されている
  • 編集元のデータが入った状態で 編集フォーム が 表示されている
  • 登録後 インデックスページに 反映されている

等が 確認できれば 完成です

Related Article

[ はじめて の Laravel ] リンク一覧ページ を 作る No.6

詳細へ »

[ はじめて の Laravel ] リンク一覧ページ を 作る No.4

詳細へ »

[ はじめて の Laravel ] リンク一覧ページ を 作る No.1

詳細へ »