顧客マスタのメイン画面を作ってみる
顧客マスタの新規入力画面ができたので、メイン画面の一覧をつくっていきます。
Bladeファイルの編集
メイン画面は、顧客IDと顧客名の検索ボックスを配置し、検索するとその下に顧客マスタデータ一覧が出るようにします。また一覧は5行ずつのページネーションを付けます。
メイン画面の"mst_customer_list.blade.php"はまだ、Cardのヘッダーに新規とホームへ戻るボタンしか配置してませんので、上の機能が実現できるようにCardのボディーを以下のように記述します。
<div class="card-body"> <form class="row" method="POST" action="/mst_customer_search"> @csrf <div class="form-group col-6"> <label for="search_customer_id">顧客ID</label> <input name="search_customer_id" type="number" class="form-control" id="search_customer_id" value="{{ isset($search_customer_id)?$search_customer_id:"" }}"> </div> <div class="form-group col-6"> <label for="search_customer_nm">顧客名</label> <input name="search_customer_nm" type="text" class="form-control" id="search_customer_nm" value="{{ isset($search_customer_nm)?$search_customer_nm:"" }}"> </div> <div class="form-group col-12"> <button type="submit" class="btn btn-primary btn-sm">検索</button> <button type="reset" class="btn btn-primary btn-sm">クリア</button> </div> </form> <br/> <table class="table table-sm table-bordered table-striped"> <thead> <tr> <th class="bg-light">顧客ID</th> <th class="bg-light">顧客名</th> <th class="bg-light">住所</th> <th class="bg-light">TEL</th> <th class="bg-light">FAX</th> </tr> </thead> <tbody> @if(isset($customers)) @foreach ($customers as $customer) <tr> <td class="col-1">{{ $customer->customer_id }}</td> <td class="col-2"><div class="text-truncate" style="max-width: 150px;">{{ $customer->customer_nm }}</div></td> <td class="col-4"><div class="text-truncate" style="max-width: 200px;">{{ $customer->customer_addr }}</div></td> <td class="col-2">{{ $customer->customer_tel }}</td> <td class="col-2">{{ $customer->customer_fax }}</td> </tr> @endforeach @endif </tbody> </table> @if(isset($customers)) {{ $customers->withPath('mst_customer_search')->appends(['search_customer_id'=>"$search_customer_id",'search_customer_nm'=>"$search_customer_nm"])->links() }} @endif </div>
検索部分についてはPostリクエストするため、"@csrf"をつけないとLaravelではセキュリティー対策からエラーがでます。
ところどころisset関数つかってますが、これは、最初画面を開いた際、変数が存在していないため、そのエラー対策です。
一覧表示については、"@foreach"ディレクティブ使ってループし表示させる想定です。この辺りは複雑になりがちかつ、よく利用するので、別途ファサードやコンポーネント化しておくのもひとつかもしれません。
最後にページネーションつけてます。Laravelを利用するとかなり簡単に実装できます。
尚、Laravel8だと標準ではBootstrapのページネーションが適用されないようです。ページネーションはカスタマイズを今後したいと思っているので、今は初期のままにしときます。
ルート設定
次に、検索ボタンを押したときと、ページネーションのリンクをクリックした時のルートを以下のようにweb.phpに記述します。
Route::post('/mst_customer_search', [App\Http\Controllers\MstCustomerController::class, 'search'])->name('mst_customer_search'); Route::get('/mst_customer_search', [App\Http\Controllers\MstCustomerController::class, 'page'])->name('mst_customer_page');
コントローラの設定
"MstCustomerController.php"に以下ファンクションを記述します。
public function search(Request $request) { $search_customer_id = $request->input('search_customer_id'); $search_customer_nm = $request->input('search_customer_nm'); $customer = new Customer(); $customers = $customer->mst_customer_list($search_customer_id,$search_customer_nm); return view('mst_customer_list',compact('search_customer_id','search_customer_nm','customers')); } public function page(Request $request) { $search_customer_id = $request->input('search_customer_id'); $search_customer_nm = $request->input('search_customer_nm'); $page = $request->input('page'); $customer = new Customer(); $customers = $customer->mst_customer_list($search_customer_id,$search_customer_nm); return view('mst_customer_list',compact('search_customer_id','search_customer_nm','customers','page')); }
尚、上の、二つの関数は共通したDBへのアクセスロジックがあるため、"Customer.php"モデルファイルに共通ロジックを切り出ししました。‘
public function mst_customer_list($search_customer_id,$search_customer_nm) { $query = Customer::query(); $query->where('status', 1); if(!empty($search_customer_id)) { $query->where('customer_id','like',"$search_customer_id%"); } if(!empty($search_customer_nm)) { $query->where('customer_nm','like',"%$search_customer_nm%"); } $query->orderBy('id', 'asc'); return $query->paginate(5); }
以上で、メイン画面の完了です。だいぶ開発に慣れてきた？かなという感じですが、今後、この画面に、削除ボタンや編集ボタンを付けたりしていく予定です。
