【Laravel】【Vue.js3】で【CRM(顧客管理システム)】をつくってみよう【Breeze(Inertia)】

この講座ではLaravel Breeze (vue) をインストールして進めていきますので, laravel breeze, inertiaについて開設した後に実際のインストール方法を開設しています。

2023年1月頃、Inertia v1.0にアップデートされたことに伴い、ライブラリ、記述方法が変更になりましたので、

動画撮影時の状態に合わせる方法をご紹介しています。

フロント側は Viteの簡易サーバー機能を使いますので npm run devや npm run build の表示・実行確認をしています。

今回はVue.js3を扱うためインストールしておくと便利な拡張機能を紹介しています。

動画制作時からコンポーネント名が変更になっていますので補足になります。

Laravel breeze (vue)をインストールし、生成されたファイルを確認します。併せて Inertia::render() の使い方も開設しています。

HTMLのaタグとLinkコンポーネントの違いを解説しています。

Linkコンポーネントで名前付きルートを使う方法について解説しています。

Linkコンポーネントでルートパラメータを使う方法について解説しています。

Linkコンポーネントで使える属性を実際に使うための練習として、store処理を実装しています。

モデル、マイグレーション作成後、コードの解説まで。

Linkコンポーネントで使える属性を実際に使うための練習として、store処理を実装しています。

ビュー、ルート、コントローラ、DB保存まで。

CompositionAPIやscript setupなど Vue.js3の概要について解説しています。

フォームを作るにあたり、Vue.jsのイベント、メソッド、InertiaのInertia.postなどを解説しています。

Create.vueを作成しフォームタグを含むコードを書いています。

Laravelのバリデーションを使いつつ definePropsで受け取りView側で表示する方法を解説しています。

LaravelでInertiaを使うと自動的にCSRF対策がされているのでその内容を解説しています。

Inertia用のミドルウェアを使う事で簡単にフラッシュメッセージを使う事ができるのでその方法を解説しています。

Vue.jsのv-forを使ってデータベース内の情報をリスト表示する方法を解説しています。

削除ボタンを押したときに 「本当に削除しますか？」と表示させる対応の解説と、事前準備を解説しています。

onBeforeを使い 本当に削除しますか、と表示させてから削除するように対応しています。

Vue.jsにはコンポーネントの中に別のコンポーネントを差し込むスロットという機能がありますので、その使い方について解説しています。

import、slot、definePropsなどを使い、他のコンポーネントをインポートして使う方法を解説しています。

子コンポーネントから親コンポーネントへ値を渡す際に使われるEmitについて解説しています。

Inertia、Vue.jsの解説は一旦ここまでということで、git push しておきます。

MA・SFA・CRMやLTVについて概要を解説しています。

要件定義、基本設計や今回扱う資料について解説しています。

.envにアプリ名を記入し、ロゴを変更する方法を解説しています。

商品情報を登録するためのItemsを作成していきます。各ファイル雛形を作成し、マイグレーションファイルを設定しています。

下準備として モデルに $fillableを設定し、 ルートファイルに Route::resourceを設定しています。

ログイン用のユーザーをダミーデータで登録し、ログイン後のロゴサイズも調整しています。

商品情報のダミーデータを投入し、ナビゲーションにリンクを追加しています。

商品一覧ページをつくっています。

一覧ページに下線を引き、販売中という文字を表示するように調整しています。

Linkコンポーネントを追加しItems/Create.vueが表示できるようにしています。

Createコンポーネントのレイアウトを調整し、

reactive、v-model、などの機能を追加しています。

まずはバリデーションなしで保存できるところまでつくっていきます。

2023年2月現在、ValidationErrorsコンポーネントがなくなっておりますので、その対策方法を解説しています。

カスタムリクエスト、ValidationErrorsコンポーネントを使ってバリデーション対応しています。

フラッシュメッセージをコンポーネント化し、statusも持たせるように追記しています。

商品詳細画面を作成しています。

PHPの場合は 改行する場合 bl2brメソッドを使いますが、JSにはないので、自作して対応する方法を解説しています。

definePropsで受け取り、computedで監視する方法を解説しています。

販売中・停止中のradioボタンを追記し、reactiveになっていることを確認します。

更新処理の作成方法を解説しています。

CRUD最後の対応として削除処理の方法を解説しています。

Factory、Fakerなどの機能を使って1000件のダミーデータを登録しています。

ダミーデータから電話番号のハイフンを消し、住所内の郵便番号をカットする方法を解説しています。

顧客一覧のページを表示する方法を解説しています。

ページネーションをVue.js、Inertiaで対応する方法を解説しています。

Paginationコンポーネントを作成し、表示されることを確認します。

前回作成したページネーションを Customers/Index.vueに組み込んで表示確認をしています。

カナと電話番号で顧客情報を検索する機能をつくっています。(クエリスコープを作成しLaravel側で動作確認しています。)

顧客検索機能 のVue.js側を対応し、検索機能を実装しています。

顧客情報を新規作成するためのフォームを作成しています。

保存、バリデーションについて解説しています。

郵便番号から住所を取得する機能を実装しています。

顧客が商品を購入した時の情報を記録するためにPurchaseというモデル・テーブルなどを作成していきます。

購入情報と商品を紐づけるための中間テーブルを作成し設定していきます。

購入情報に紐づく中間テーブルのダミーデータを設定していきます。

商品・サービスを購入する際の情報登録 画面を作成していきます。

商品を購入する日を入力できるようにinputタグを設定し、JSのDateオブジェクトを使って当日の日付を取得しています。

会員情報をselectboxで表示させるよう対応していきます。

商品情報を表示し、数量を変更すると小計も計算されるように対応しています。

Vue.jsのcomputedを使って各商品の金額*数量を足した合計金額をリアルタイムで表示する方法を解説しています。

顧客id、商品情報などをPost通信でControllerまで届いている事を確認します。

Purchaseテーブル、ItemPurchaseテーブル2箇所に保存する必要があるのでまずは保存する処理を作っていきます。

続いてトランザクションを追記し、２つのテーブルに保存できない場合はロールバックできるように対応しておきます。

Items/Create.vueなどを参考に購入画面のレイアウトを調整していきます。

会員を選ぶ際にモーダルウィンドウを使うという事で、ライブラリをインストールし表示確認までしています。

顧客情報をAPI通信で取得するために、Sanctumの設定をし、動作テストとしてログインユーザー情報をaxiosで取得しています。

async-awaitでaxiosを使い顧客情報を取得する方法を解説しています。

Ajax通信で取得した顧客情報をモーダルウィンドウに組み込んでいきます。

MicroModalで顧客情報をクリックすると 親コンポーネントに情報を渡すために emit を設定しています。

大量データで表示確認したいということで今回は3万件投入して表示確認していくことにします。

購入履歴や解析のために4つのテーブルを紐づける必要があるので、事前に紐づける方法を解説しています。

4つのテーブルをjoinし小計を出した状態のモデルを作りたいという事で、グローバルスコープを設定しています。

小計をsumした合計金額を取得した後に、一覧画面に表示していきます。

dayjsを使い購入日のフォーマットを変更し、ナビゲーションも追加しています。

小計と合計それぞれのクエリを発行し表示確認をしています。

詳細画面のレイアウトと、必要な情報を表示できるように調整しています。

編集できるようにするための準備をおこなっています。

CreateをベースにVue側の調整をしつつ、キャンセル済みであれば編集できないようにPurchases/Showにv-ifで判定を追加しています。

Vue側にリンクを貼り、コントローラにデータが渡っているところまでを確認しています。

syncメソッドを使い中間テーブルの情報を更新する方法を解説しています。

データ分析用のページを追加するために、ルート、コントローラ、ビュー、ナビゲーションを対応しています。

いつからいつまで、という期間指定をできるようにするためにローカルスコープを作成し表示確認をしています。

コンポーネントをつくり formタグやreacitveなどの準備をしています。

ファットコントローラ防止のため クエリを切り離しサービスファイルへ移しておきます。

月別・年別分析もできるようコードを追加していきます。

デシル分析の概要と、手順1,2を解説しています。

手順3,4 として 連番を振り必要な変数を取得しています。

手順5としてcase文で10グループに分ける準備をしています。

手順6,7として グループ毎の平均、合計、構成比を算出しています。

デシル分析はテーブル表記が少し変わるという事で、事前にテーブルをコンポーネントに分離することにします。

デシル分析結果をView側に表示できるように対応していきます。

RFM分析の概要とRFMに必要な情報を取得するところまで解説しています。

RFMランクを仮でつけつつ、ランクの調整方法も解説しています。

RとFの軸を使って2次元のテーブルを作れるように情報を取得していきます。

インプットボックスでRFMランクを編集し人数を取得できるようにクエリを編集していきます。

RFMランクを調整できるようにinputタグをつくりView側に表示していきます。

コードが長いこともありサービスに分離しておきます。

API通信で取得した結果を表に描画するよう対応しています。

期間が短い場合にエラーがでていたのでデバッグをし、対策として外部結合で対応するため、新たにテーブルを作成していきます。

外部結合を追加しデータが存在しないときに 0 として表示するようにしています。

ボーナスレクチャーはudemy講座内で唯一 宣伝を行っていい場所になっております。