Laravel - livewire - sqlite その2

(2024-05-11)

次は、sqlite に記録されたデータを表示してみます。
前回、作成したプロジェクトを少し変更します。

sqlite に記録するフィールドを name, comment にする

migration table を以下のように変更して migration をやり直します。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateItemsTable extends Migration
{
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('comment');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('items');
    }
}

migration します。

php artisan migrate:rollback
php artisan migrate

Model の編集

<?php

namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class Item extends Model
{
    protected $fillable = ['name','comment'];
}

livewire component の編集

app/Livewire/ItemCreate.php を編集します。

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Item;

class ItemCreate extends Component
{
    public $name;
    public $comment;

    public function render()
    {
        return view('livewire.item-create');
    }

    public function saveItem()
    {
        $this->validate([
            'name' => 'required',
            'comment' => 'required',
        ]);

        Item::create([
            'name' => $this->name,
            'comment' => $this->comment,
        ]);

        $this->reset('name');
        $this->reset('comment');
    }
}

resources/views/livewire/item-create.blade.php を編集します。

<div>
    <form wire:submit.prevent="saveItem">
        name : <input type="text" wire:model="name"><br>
        @error('name') <span>{{ $message }}</span> @enderror
        comment : <input type="text" wire:model="comment"><br>
        @error('comment') <span>{{ $message }}</span> @enderror
        <button type="submit">保存</button>
    </form>
</div>

サーバーを起動して、 http://localhost:8000 にアクセスして、データをいくつか保存します。

データ表示のための livewire component 作成

php artisan make:livewire ItemList

app/Livewire/ItemList.php を編集します。

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Item;

class ItemList extends Component
{
    public $items;

    public function mount()
    {
        // データベースからアイテムを取得し、$itemsプロパティに代入
        $this->items = Item::all();
    }

    public function render()
    {
        // items.blade.phpビューを描画し、$itemsを渡す
        return view('livewire.item-list', ['items' => $this->items])->layout('layouts.base');
    }
}

resources/views/livewire/item-list.blade.php を編集します。

<div>
    <h1>Items</h1>

    <ul>
        @foreach ($items as $item)
            <li>{{ $item->name }} : {{ $item->comment }}</li>
        @endforeach
    </ul>
</div>

resources/views/layouts/base.blade.php を新規作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
</head>
<body>
    <div class="container">
        {{ $slot }}
    </div>
    @livewireScripts
</body>
</html>

routing

<?php

use App\Livewire\ItemList;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/items', ItemList::class);

サーバーを起動して、 http://localhost:8000/items にアクセスします。