Laravel - livewire - sqlite

(2024-05-10)

livewireがまだ全く理解できないのですが、form を作ってデータを sqlite に記録してみたいと思います。

プロジェクト作成

composer create-project --prefer-dist laravel/laravel livewire-example

プロジェクトディレクトリに移動します。

cd livewire-example

livewireのインストール。

composer require livewire/livewire

.env の編集。

DB_CONNECTION=sqlite
DB_DATABASE=/home/user/livewire-example/database/database.sqlite

SQLiteデータベースファイルの作成。

touch database/database.sqlite

モデルとマイグレーションの作成。

php artisan make:model Item -m

migration テーブルの編集

database/migrations/xxxxx_create_items_table.php
<?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->timestamps();
        });
    }


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

マイグレーションの実行。

php artisan migrate

model の編集

app/Models/Item.php を編集します

app/Models/Item.php
<?php


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


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

Livewireコンポーネントの作成と設定

Livewireコンポーネントの作成。

php artisan make:livewire ItemCreate

app/Livewire に ItemCreate.php　が作成されるので以下のように編集。

app/Livewire/ItemCreate.php
<?php


namespace App\Livewire;


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


class ItemCreate extends Component
{
    public $name;


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


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


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


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

resources/views/livewire にある item-create.blade.php を以下のように編集。

resources/views/livewire/item-create.blade.php
<div>
    <form wire:submit.prevent="saveItem">
        <input type="text" wire:model="name" placeholder="アイテム名">
        @error('name') <span>{{ $message }}</span> @enderror
        <button type="submit">保存</button>
    </form>
</div>

resources/views/welcome.blade.php を以下のように編集。

resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire Example</title>
    @livewireStyles
</head>
<body>
    <livewire:item-create />
    @livewireScripts
</body>
</html>

sqlite 関連で「could not find driver」が表示されたら

sqlite3 のインストール。

sudo apt update
sudo apt install sqlite3

PHP SQLite3拡張機能のインストール。

sudo apt install php-sqlite3

Apache の再起動。

sudo systemctl restart apache2

サーバーの立ち上げと実行

php artisan serve

アドレスバーから http://localhost:8000 にアクセスします。

そうするとデータ入力画面が表示されるので、データを入力して保存ボタンを押すと sqlite に記録されます。