【Laravel】プロジェクト：TEST6　データの表示　画面編

データの表示
ToDo

データの表示

今回はデータの表示部分を実装。最終的に、登録 -> 検索 -> 表示 -> 変更・削除。

運用想定は、担当者の方の何かしらのデータを、日付で検索できる形を想定。
（詳細は追々詰めていきます。特に想定があるわけでないので。）
f:id:tk49:20210910030943p:plain

（これが私の画面設計書です！）

メニュー修正

まずはメニュー修正。
以下を追加。

<!-- データ検索-->
<a class="nav-link" href="/search">
<i class="fas fa-fw fa-search"></i>
<span>データ検索</span></a>

データ検索が追加されました。
f:id:tk49:20210910031320p:plain

小ネタ：
fa-search は、テンプレの上にあったので拝借。
使いたいものを探す場合は、font-awsomeで検索です。
fontawesome.com

search.blade.phpを追加 / web.phpを修正

取り合えずいつものテストページ作成。

構成
　views
　　└ search
　　　└ search.blade.php　← 追加

@extends('welcome')
@section('content')
検索画面
@endsection

// 検索画面
Route::get('/search', function () { return view('search\search'); }); //追加

OK。
f:id:tk49:20210910032034p:plain

search.blade.phpの中身を実装

項目定義としては、以下。

担当者（プルダウン）
日付From（カレンダー）
日付To（カレンダー）
検索ボタン（ボタン）

で、サンプル見てみると、ボタンは発見。

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
    <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
        <i class="fas fa-download fa-sm text-white-50"></i> Generate Report
    </a>
</div>

なので、拝借。

とりあえずほんとにイメージ。
f:id:tk49:20210912125008p:plain

<div class="row">
    <div class="col-xl-4 col-md-2 mb-4 text-center">
        担当者名
        <select class="mb-4" id="sel01" name="sel01">
            <option value="1">氏名1</option>
            <option value="2">氏名2</option>
        </select>
    </div>
    <div class="col-xl-4 col-md-2 mb-4 text-center">
        <input type="date" name="birthday" id="birthday">
        ～
        <input type="date" name="birthday" id="birthday">
    </div>
    <div class="col-xl-3 col-md-3 mb-4 text-center">
        <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
            <i class="fas fa-sm text-white-50"></i>検索
        </a>
    </div>
</div>

col-xl-2とは？md-4とは？とか本当に前提知識がなさすぎる…

12レーンのうち、いくつ使うかとのこと。
下記サイト、参考にさせていただきました。
websae.net