Laravel8 livewireでDBの値を取得して表示する

Laravel8 livewireでDBの値を取得して表示する

Laravel8でPHPを利用してコードを記述するjavascriptのパッケージであるlivewireを使用して、DBの値を取得して表示するまでの手順を記述してます。

環境

  • OS windows10 pro 64bit
  • Composer 1.10.5
  • PHP 7.4.5
  • Laravel Framework 8.5.0

※windows10に Composer のインストールはこちら
※windows10に PHP のインストールはこちら
※windows10に Laravel8 のインストールはこちら

livewireインストール

composerを使用してインストールします。
コマンドプロンプト上から下記のコマンドを実行します。

DB作成

接続するデータを用意します。「.env」にDB接続に必要な情報を記述しておきます。
※ここではmysqlを利用してます。

migrateを実行します。

テーブルが作成されます。

「database\seeders」にある「DatabaseSeeder.php」を以下のように編集して、Seederを使用して5名分のダミーデータを作成します。

以下のコマンドを実行して、作成します。

作成されたので、このデータを使用します。

livewire作成

まずは以下のコマンドで、testという名前で、Livewireを作成します。

「app\Http\Livewire」に「Test.php」と

「resources\views\livewire」に「test.blade.php」が生成されます。

ここでは、デフォルトで作成される「welcome.blade.php」を使用するので、まずは、「resources\views」にある「welcome.blade.php」を以下のように編集します。
※見栄えが悪いのでデフォルトのCSSを利用してます。

「test.blade.php」を以下のように編集します。

「Test.php」を以下のように編集します。

サーバーを起動してなければ起動します。

userテーブルのデータが表示されていることが確認できます。

次に、ボタンを追加してユーザーを削除します。

「test.blade.php」を以下のように編集してボタンを追加します。

「Test.php」にdeleteメソッドを追加します。

ユーザーがリロードせずに削除されていることが確認できます。