Laravel8で掲示板を作成する②（一覧画面を作成）

今回は以下の動画のようなCRUD機能を作成していくよ。

学生を追加、編集、削除できる掲示板です！

この記事の前に、https://aburasoba.org/laravel8-livewire-1/ をやってみてね

まずは、参考にさせていただいた動画の紹介。
以下、英語ですが非常に分かりやすかったです。

こちらを参考にさせていただきながら、実装しました。
上記の動画ではBootstrap4を使用して、modal等を実装しています。
が、私の方ではLivewireのBlade componentsを活用して実装するように変更してあります。

また、Livewireのドキュメントはこちら。

https://laravel-livewire.com/

一つ目のタコ？が揺れていますね、可愛い。
ドキュメントのトップにはこんなことが書いてありました。

Building modern web apps is hard. Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer’s workflow is insane.

It doesn’t have to be this way…

Ok, I’m listening…

Say hello to Livewire.

Hi Livewire!

https://laravel-livewire.com/

所謂モダンなアプリを作成するのに、VueとかReactとかすごいけど大変だよね！Livewire使ってみようよ！

的な内容ですね。

migration, model を作成

まずは学生のテーブルを作成していきましょう。

bash

% php artisan make:model Student -m

上記のコマンドでマイグレーションファイルとモデルが作成できるので、中身を書き換えていきましょう。

database/migrations/2020_11_10_create_students_table.php


public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('firstname');
            $table->string('lastname');
            $table->string('email');
            $table->string('phone');
            $table->timestamps();
        });
    }

app/Models/Student.php

protected $table = "students";

    protected $fillable = [
        'firstname',
        'lastname',
        'email',
        'phone',
    ];

それではマイグレーション をしてテーブルを作成しましょう。

% php artisan migrate

生徒テーブルにダミーデータをいれる

これはやらなくても良いのですが、ダミーデータを入れていきましょう。

ダミーデータ、シーダーって何？という方は下記の記事もご覧ください。
https://aburasoba.org/laravel-factory-seeder/

Factoryを作成しましょう。

% php artisan make:factory StudentFactory

次に、作成したFactoryでFakerを使用する記述を追加します。

database/factories/StudentFactory.php

public function definition()
    {
        return [
            'firstname' => $this->faker->firstname,
            'lastname' => $this->faker->lastname,
            'email' => $this->faker->email,
            'phone' => $this->faker->phoneNumber,
        ];
    }

次に、コマンドで上記のFactoryが作動するようにDatabaseSeeder.phpにコードを追加していきます。

database/seeders/DatabaseSeeder.php

public function run()
    {
        // \App\Models\User::factory(10)->create();
        \App\Models\Student::factory(10)->create();
    }

今回は使用しない、Userに関してはコメントアウトしてあります。

このまま、php artisan db:seed をしても良いのだけど、

外国の方のダミーデータができてしまうので設定を少し変更しましょう。

config/app.php
    
'faker_locale' => 'ja_JP', //変更

上記でOKです！ではダミーデータを作成していきましょう。

% php artisan db:seed

PHPMYADMIN等で実際にダミーデータの挿入が完了したかを確認しましょう。
その際に、英語名になっていたら
php artisan config:cache
でキャッシュを削除した後、もう一度seedをしてみましょう

Livewireを使う（一覧画面作成）

では、タコ（Livewire）を使っていきます！
ここからは、いつものLaravelでのCRUD作成とは異なってきますので頑張っていきましょう！

% php artisan make:livewire Students

このコマンドを打つことで、Livewire componentが作成されます。
なんぞや…..と思いますが実際に触って慣れていきましょう。

app/http/livewire/Students.php

<?php

namespace App\Http\Livewire;

use App\Models\Student; //追加
use Livewire\Component;

class Students extends Component
{
    public function render()
    {
        $students = Student::orderBy('id', 'DESC')->get(); //追加
        return view('livewire.students.index', compact('students')); //変更
    }
}

Studentを全員取得し、viewに渡してあげましょう。
view は livewire ディレクトリの中に students ディレクトリを作成して整理しておきます。
必須ではないですが、ファイル数が増えると livewire ディレクトリ内がごちゃごちゃになるので未然に防止しましょう。

まずは生徒一覧画面を作成していきます。

bootstrap ではなく tailwindCSS を活用していきます。
https://tailwindcss.com/

resources/views/livewire/students/index.blade.php

<div>
    <div class="rounded overflow-hidden shadow-lg">
        <div class="px-6 py-4">
            <div class="font-bold text-xl mb-2">生徒一覧</div>
        </div>
        <div class="px-6 pt-4 pb-2">
            <table class="table-auto w-full">
                <thead>
                    <tr>
                        <th class="px-4 py-2">名前</th>
                        <th class="px-4 py-2">苗字</th>
                        <th class="px-4 py-2">メールアドレス</th>
                        <th class="px-4 py-2">電話番号</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($students as $student)
                        <tr>
                            <td class="border px-4 py-2">{{ $student->firstname }}</td>
                            <td class="border px-4 py-2">{{ $student->lastname }}</td>
                            <td class="border px-4 py-2">{{ $student->email }}</td>
                            <td class="border px-4 py-2">{{ $student->phone }}</td>
                            <td class="border px-4 py-2">編集</td>
                            <td class="border px-4 py-2">削除</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

blade の書き方に関しては以前の version と変わりはありませんね。
変数が Controller ではなく livewire から渡されている点が変更点になります。

一覧画面を表示する

既存の Dashbord に表示をしていきましょう。
dashboard.blade.php を編集していきます。

resources/views/dashboard.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <livewire:students />
            </div>
        </div>
    </div>
</x-app-layout>

<livewire:students /> と記入することで、 students の Livewire component を呼ぶことができるようです。
app/http/livewire/Students.php の renderメソッドが呼び出されます。

それでは、Dashbordを確認してみましょう！

% php artisan serve

ダミーで入力した生徒一覧が表示されましたね！

では次回は新規投稿機能を作成していきましょう！

もしこの記事をいいねと思ったたり、ご参考になりましたら下記ボタンからサポートしていただけますと、とても励みになります！