てくてくあるく

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

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

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

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

ビューの作成

今回は 追加用の フォームページを作るので 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ボタンが追加されている
  • 追加フォーム が 表示されている
  • エラー時 元の画面に戻される
  • 登録後 インデックスページに 追加されている

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

Related Article

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

詳細へ »

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

詳細へ »

[ はじめて の Laravel ] リンク一覧ページ を 作る No.7 – フラッシュメッセージ

詳細へ »