blade系package(3-2) laravel-form-componentsで編集

でまあ前回

の続きではあるが

    <ul>
    @foreach ($posts as $post)
        <li>
            {{ $post->title }}
            {{ $post->body }}
            ({{ $post->created_at }})
        </li>
    @endforeach
    </ul>

今こんな感じで雑〜にloopさせている。ちょっと見た目を整えてみよう

<x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />
    <x-form action="{{ route('posts.store') }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Post') }}
            </x-form-submit>
        </div>
    </x-form>

    <div class="space-y-4">
        @foreach ($posts as $post)
            <div class="p-4 border rounded-md">
                <div class="text-lg font-semibold">
                    {{ $post->title }}
                </div>
                <div class="text-gray-600 whitespace-pre-line">
                    {{ $post->body }}
                </div>
                <div class="text-sm text-gray-400 mt-2 text-right">
                    {{ $post->created_at }}
                </div>
            </div>
        @endforeach
    </div>


</x-guest-layout>

カード化された記事

編集ボタンを表示

まあデザインは割とどうでもいい

    <div class="space-y-4">
        @foreach ($posts as $post)
            <div class="p-4 border rounded-md">
                <div class="flex justify-between items-center">
                    <div class="text-lg font-semibold">
                        {{ $post->title }}
                    </div>
                    <a href="{{ route('posts.edit', $post) }}" class="bg-white hover:bg-gray-100 text-black text-sm font-semibold py-1 px-2 rounded border border-black hover:border-gray-700">
                        {{ __('Edit') }}
                    </a>
                </div>

                <div class="text-gray-600 whitespace-pre-line mt-2">
                    {{ $post->body }}
                </div>
                <div class="text-sm text-gray-400 mt-2 text-right">
                    {{ $post->created_at }}
                </div>
            </div>
        @endforeach
    </div>

Editボタンが表示された

編集ボタンを押したときの処理

    public function edit(Post $post): View
    {
        return view('posts.edit', [
            'post' => $post,
        ]);
    }

フォーム部分を丸々コピってきたようなやつ

<x-guest-layout>
    <x-form action="{{ route('posts.update', $post) }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Edit') }}
            </x-form-submit>
        </div>
    </x-form>
</x-guest-layout>

とまあ、この状態だと何も入ってないわけだが

編集フォーム

<x-guest-layout>

    @bind($post)
    <x-form action="{{ route('posts.update', $post) }}" class="mb-3">
        <x-form-input name="title" label="{{ __('Title') }}" />
        <x-form-textarea name="body" label="{{ __('Body') }}" />

        <div class="flex items-center justify-end mt-4">
            <x-form-submit class="ml-3">
                {{ __('Edit') }}
            </x-form-submit>
        </div>
    </x-form>
    @endbind

</x-guest-layout>

このように @bind する事で内容が挿入される

Postの内容が自動挿入される

なお

<x-form action="{{ route('posts.update', $post) }}" method="put" class="mb-3">

と書くと

<input type="hidden" name="_method" value="PUT">

としてくれるようだ (Form Method Spoofing)。

update

まあ、あとはupdteメソッドを適当にでっち上げておけば編集自体は可能である。

    public function update(Request $request, Post $post): RedirectResponse
    {
        $request->validate([
            'title' => ['required'],
            'body' => ['required'],
        ]);
        $data = $request->all();
        $post->update($data);
        return redirect(route('posts.index'))
            ->with('status', __('Post updated'));
        ;
    }

その他のform要素

• form-checkbox.blade.php

• form-errors.blade.php

• form-group.blade.php

• form-input.blade.php

• form-label.blade.php

• form-radio.blade.php

• form-select.blade.php

• form-submit.blade.php

• form-textarea.blade.php

が存在していて、太字のものは今(直接的ではないにせよ)指定したので、残りをちょっと見ていってみましょうか。