Laravel

Laravel と Livewire をインストールして、複数ファイルをアップロードするサンプルプログラムを作成する手順。 プロジェクト名（uploa2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、uploadコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.upload は呼び出されます。 生成された uploadコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Upload.php ↑ファイルアップロードフォームを作成る場合、WithFileUploadsトレイト を使います。 resources/views/livewire/upload.blade.php formsコンポーネント のクラスとビューを作成します。 app/Http/Livewire/Forms.php resources/views/livewire/forms.blade.php ↑ここポイントです。for のループで同じ livewireタグ を生成する場合、 wire:key属性 に $i を指定します。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.phpファイル を作成します。 routes/web.php に Livewireコンポーネント […]

Laravel と Livewire をインストールする。ブレード側でアクションを呼び出し、コントローラー側のアクションではモデル（クラス）で受け取る手順。 プロジェクト名（rating2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、ratingコンポーネント を生成します。 次の 2つ のファイルが生成されます。 ※因みに、renderメソッド を定義しなくても livewire.rating は呼び出されます。 生成された Ratingコンポーネント のクラスとビューを次のように置き換えます。 app/Http/Livewire/Rating.php ↑上の「public function update(LiveData $data)」のアクションメソッドは大注目です。ブレード側で配列で渡した値を LiveDataクラス で受け取っています。 resources/views/livewire/rating.blade.php ↑上のポイントは「@this.emitSelf(‘update’,Livewire.data())」です。ここでアクションの updateメソッド に渡しているのは、クラスでは無く配列です。 LiveRelationトレイト を作成します。 public/liveext.js を作成します。 resources/views/index.blade.php ファイル を作成します。 routes/web.php に Livewireコンポーネント のルートを追加します。 ブラウザで確認します。 イベント、アクションボタンを押したときに、updateメソッド が呼び出されます。updateメソッドで

Laravel と Livewire をインストールして、LiveRelationトレイトを使う手順。 プロジェクト名（oyako4）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 今回のメイン。LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Counter.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/counter.blade.php ↑のポイントは２行目の「bind=”count2:count”」です。ここで 親コンポーネントの count2プロパティ と 子コンポーネントの countプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/Child.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child.blade.php ↓下は旧書き方です。@this.increment で Livewire.data() を渡しています。 ↑のポイントは２行目の「bind=”count”」です。ここで 子コンポーネントのcountプロパティ と 孫コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの孫コンポーネントを作成します。app/Http/Livewire/GrandChild.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの孫コンポーネントのビューを作成します。resources/views/livewire/grand-child.blade.php ↑孫コンポーネントはプロパティの紐づけはしません。 public/liveext.js を作成します。 resources/views/index.blade.php を作成します。

Laravel と Livewire をインストールして、アクション、$emit、$emitSelf の動作の違いについて確認する手順。 プロジェクト名（liveevent2）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 次のコマンドを実行して、eventコンポーネント を生成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Event.php resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスして、動作の違いを確認してみましょう。

Laravel と Livewire をインストールして、LiveRelationトレイトを使う手順。 プロジェクト名（oyako3）を決めて以下のコマンドを実行します。 インストール時にプロジェクト名のディレクトリが作成されます。 インストールの最後に sudo でパスワードの入力を求められます。 ↓下のメッセージが表示されてインストールは終わります。 sail のエイリアスを定義します。 Laravel のインストールはここまで。 「sail up」でコンテナを起動します。 ララベルのトップディレクトリで、Livewireパッケージ をインストールします。 Livewire のクラスとビューを作成するため、ディレクトリを作成します。 今回のメイン。LiveRelationトレイト を作成します。 ライブワイヤーの親コンポーネントを作成します。app/Http/Livewire/Counter.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの親コンポーネントのビューを作成します。resources/views/livewire/counter.blade.php ↑のポイントは２行目の「bind=”count2:count”」です。ここで 親コンポーネントのcount2プロパティ と 子コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの子コンポーネントを作成します。app/Http/Livewire/Child.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの子コンポーネントのビューを作成します。resources/views/livewire/child.blade.php ↑のポイントは２行目の「bind=”count”」です。ここで 子コンポーネントのcountプロパティ と 孫コンポーネントのcountプロパティ を紐づけています。 ライブワイヤーの孫コンポーネントを作成します。app/Http/Livewire/GrandChild.php ↑「use LiveRelation;」でトレイトを使います。 ライブワイヤーの孫コンポーネントのビューを作成します。resources/views/livewire/grand-child.blade.php resources/views/index.blade.php を作成します。 routes/web.php にルートを定義します。 ブラウザでアクセスしてみましょう。 孫コンポーネントのテキストボックスに何か入力すると、「子のプロパティ」と「親のCOUNT2」のプロパティを変更することができます。