顧客マスタ新規登録画面を作ってみる

顧客マスタ用のテーブルもできたので、ようやく画面の開発に移りたいと思います。

まず、顧客マスタのメイン画面のベースを”home.blade.php”をコピーし、"mst_customer_list.blade.php"というファイル名にリネームして作成します。メイン画面は登録した顧客情報の検索及び一覧を表示できるようにすることを想定してますが、今回は、新規登録画面を先に開発を考えており、新規登録画面へのリンクを張るのみにしておきます。

尚、マスタに関しては、一般の画面と区分けしやすいように、Bladeファイル名の頭に"mst"をつけることにします。とはいえ、今のところマスタ画面しか作る予定ないですが。

次に、前に作った、マスタメニューに配置した"顧客マスタ"ボタンから、先ほどのメイン画面に飛ぶように、web.phpに以下のようにルートを記述します。

Route::view('/mst_customer_list', 'mst_customer_list');

次にメイン画面のCardのヘッダに新規登録画面に遷移するボタンを以下のように記述します。尚、ホームへ戻るボタンも記述しておきます。ボタンがないとホームに戻るには直接URL叩くしかないので。

<div class="card-header d-flex justify-content-between">
    顧客情報検索
    <div>
        <a class="btn btn-primary btn-sm text-white" href="/mst_customer_create">新規</a>
        <a class="btn btn-dark btn-sm text-white" href="/home">Dashboardへ戻る</a>
    </div>
</div>

次に、"home.blade.php"をコピーして”mst_customer_list.blade.php”とリネームし新規登録画面のベースを作成し以下のように画面の内容を記述します。

<div class="card-header d-flex justify-content-between">
    顧客情報登録
    <div>
        <a class="btn btn-dark btn-sm text-white" href="/mst_customer_list">戻る</a>
    </div>
</div>

<div class="card-body">

    <form class="row" method="POST" action="/mst_customer_store">
    @csrf
    <div class="form-group col-12">
        <label for="customer_id">顧客ID</label>
        <input name="customer_id" type="number" class="form-control @error('customer_id') is-invalid @enderror" id="customer_id" placeholder="顧客IDを入力してください" value="{{ old('customer_id') }}" required>
        @error('customer_id')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>
    <div class="form-group col-12">
        <label for="customer_nm">顧客名</label>
        <input name="customer_nm" type="text" class="form-control" id="customer_nm" placeholder="顧客名を入力してください" value="{{ old('customer_nm') }}" required>
    </div>
    <div class="form-group col-12">
        <label for="customer_addr">住所</label>
        <input name="customer_addr" type="text" class="form-control" id="customer_addr" value="{{ old('customer_addr') }}" placeholder="住所を入力してください">
    </div>
    <div class="form-group col-6">
        <label for="customer_tel">TEL</label>
        <input name="customer_tel" type="text" class="form-control" id="customer_tel" value="{{ old('customer_tel') }}" placeholder="TELを入力してください">
    </div>
    <div class="form-group col-6">
        <label for="customer_fax">FAX</label>
        <input name="customer_fax" type="text" class="form-control" id="customer_fax" value="{{ old('customer_fax') }}" placeholder="FAXを入力してください">
    </div>
    <div class="form-group col-12">
        <label for="remarks">備考</label>
        <textarea name="note" class="form-control" rows="5">{{ old('note') }}</textarea>
    </div>
    <div class="form-group col-12">
        <button type="submit" class="btn btn-primary btn-sm">登録</button>
    </div>
    </form> 

</div>

上が新規画面のBladeファイルになり今回の目玉商品ですが、少し補足しておくと、エラー等で、画面を戻す際、一度入力した内容を再セットできるように、入力タグのvalue等にold関数を記述してます。ただし、バリデーションでのエラー想定ですので、他の方法でエラーのロジック組む場合はそれに合わせて変更する必要あります。

一応、顧客IDのところは何かしらのバリデーションをかませる予定にしており、その時のための記述してます。ここではあまり深く考えてません。

次に、メインメニューに配置した新規ボタンから、新規入力画面に飛ぶように、web.phpに以下のようにルートを記述します。

Route::view('/mst_customer_create', 'mst_customer_create');

次にPostしたデータを保存する等の処理を記述するコントローラーファイルを以下Artisanコマンドで作成します。

#php artisan make:controller MstCustomerController --resource

"--resource"をつけると、標準のメンバ関数をデフォルトで記述してくれます。今回は一応つけときます。不要であれば消せばいいだけなので。

作成したコントローラーにPostしたデータをDBに保存できるようにstore関数を以下のように記述します。

public function store(Request $request)
{
    $customer = new Customer();

    $customer->customer_id = $request->customer_id;
    $customer->customer_nm = $request->customer_nm;
    $customer->customer_addr = $request->customer_addr;
    $customer->customer_tel = $request->customer_tel;
    $customer->customer_fax = $request->customer_fax;
    $customer->note = $request->note;
    $customer->status = 1;
    $customer->save();

    return view('mst_customer_list');
}

DB操作関連のロジックは今後、バリデーションをかませる等、いろいろと拡張する予定ですが、今回はシンプルにしておきます。むしろこれだけの記述でDBに保存できることがすごいです。

最後に、新規登録画面の"登録"ボタンをクリックすると、store関数に飛ぶように以下のようにweb.phpにルートを記述します。

Route::post('/mst_customer_store', [App\Http\Controllers\MstCustomerController::class, 'store'])->name('mst_customer_store');

今までの、ただ、viewに遷移するだけのルートと違い、少し、複雑になりますが、Postしたデータをstore関数に渡していることはお分かりいただけるかと思います。

これで、とりあえず、新規登録画面から顧客情報入力し"登録"ボタンをクリックするとDBにデータが反映されます。

備忘録代わりに掲載しているだけとはいえ、小生、本当に文章力ないなと改めて感じる今日この頃ですが、今回までで、基本的なLaravelの開発の流れは見えてきたかなといった感じです。

今日はここまでにしたいと思います。

Laravelで業務システム

Laravel関連の記事掲載してます

顧客マスタ新規登録画面を作ってみる