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

この記事は 2021年 11月 25日に書かれた記事です。

前回はテストデータを一覧表示させたので
今回は任意のデータを入力し登録させたいと思います

今回はビューの作成フォームリクエストの作成コントローラの編集ルーティングの設定の順に進めます

ビューの作成

今回は追加用のフォームページを作るので resources / views / links / create.blade.php という名前でテンプレートを作ります

@extends('links.default')

@section('title', 'links.create')

@section('content')
      <section class="my-3 links">
        <header>
          <h2 class="text-center">@yield('title')</h2>
        </header>
        <form action="{{ route('links.store') }}" method="post">

          @csrf

          <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') }}">
            </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') }}">
            </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') }}</textarea>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>

        </form>
      </section>
@endsection

また追加用のフォームページへのリンクをインデックスページ ( 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>
          @endforeach
        </dl>
      </section>
@endsection

フォームリクエストの作成

フォームリクエストではバリデーションのチェックを行います

こちらはコマンドでひな形が作れます

php artisan make:request LinkRequest

すると app / Http / Requests / LinkRequest.php にファイルが生成されるので useの追加 と public function authorize() と public function rules() の中身を書き換えます

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

use Illuminate\Validation\Rule;

class LinkRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        // return false;
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required|max:255',
            'url' => ['required', 'max:255', 'url', Rule::unique('App\Models\Link')->ignore($this->link)],
            'description' => 'max:255',
        ];
    }
}

authorize の return true; を書き換え忘れると動作しません

title, url は入力必須 ( required ) としています

title, url, description には文字数制限 ( max ) を設けており 255文字としています

url は URL形式 ( url ) であるかチェックしています

url はユニークである ( Rule::unique('App\Models\Link') ) かチェックすると同時に自分自身は除外 ( ignore($this->link) ) しています

コントローラの編集

前回作成した app / Http / Controllers / LinkController.php に useの追加 と public function create() と public function store() の中身を書き換えます

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Link;
use App\Http\Requests\LinkRequest;

class LinkController extends Controller

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('links.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(LinkRequest $request)
    {
        $link = new Link();
        $link->title = $request->title;
        $link->url = $request->url;
        $link->description = $request->description;
        $link->save();

        return redirect('/links')->with('success', 'Added successfully !');
    }

public function store(Request $request) を public function store(LinkRequest $request) に変更するのを忘れないようにしてください

今回 useの追加 を行ったので public function index() の中身も書き換えます

    public function index()
    {
        $links = Link::all();
        return view('links.index', ['links' => $links]);
    }

ルーティングの設定

ルーティングは routes / web.php で設定します

今回は app / Http / Controllers / LinkController.php の create と store を追加します

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

ページの確認

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

タイトル下に Addボタンが追加されている
追加フォームが表示されている
エラー時元の画面に戻される
登録後インデックスページに追加されている

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