登録した外出記録を一覧で表示する画面を作成します。

データの取得

ルートの設定。　MemoryMap/routes/web.php

Route::get('/ichiranGamen', 'MemoryMapController@ichiranGamen');

コントローラーの設定。　MemoryMap/app/Http/Controllers/MemoryMapController.php

// 一覧画面を返却する
public function ichiranGamen(){
     
  //インスタンス化
  $data = gaishutsu_kiroku::orderBy('place_date', 'asc')->get();

  return view('ichiranGamen', ['data' => $data]);
}

以下の記載でgaishutsu_kirokuテーブルを’place_date’の昇順（’asc’）で取得しています。

$data = gaishutsu_kiroku::orderBy('place_date', 'asc')->get();

取得したデータを’ichiranGamen’ビューファイルに渡します。

return view('ichiranGamen', ['data' => $data]);

取得したjsonデータをテーブルにセットする

MemoryMap/resources/views/ichiranGamen.blade.php

<!DOCTYPE HTML>
<HTML>

<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <TITLE>思い出ＭＡＰ</TITLE>
    <link rel="stylesheet" type="text/css" href="css/ichiranGamen.css" media="all">
</HEAD>

<BODY>

    <header>
        <p class="head_title">思い出<span>ＭＡＰ</span></p>
        <nav>
            <ul>
                <li><a href="/MemoryMap/public/displayMap">ＭＡＰ</a></li>
                <li><a href="/MemoryMap/public/torokuGamen">登録</a></li>
                <li><a href="/MemoryMap/public/ichiranGamen">一覧</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
      <div class="inline">
      <table>
      <thead>
        <tr>
          <th class='hidden'></th>
          <th >出かけた日</th>
          <th >出かけた場所</th>
        </tr>
      </thead>
      <tbody>
      <script>
        <!--コントローラーから渡された$dataを取得 -->
        var data = @json($data);
        
        <!-- dataの数分繰り返し処理を実施しテーブルにセットする -->  
        for (var i = 0; i < data.length; i++) {
            
            document.write("<tr class='border'>");
                 
                 document.write("<td class='hidden'>");
                 document.write(data[i]['id']);
                 document.write("</td>");
                 
                 document.write("<td>");
                 document.write(data[i]['place_date']);
                 document.write("</td>");
                 
                 document.write("<td>");
                 document.write(data[i]['place_name']);
                 document.write("</td>");
                 
                 document.write("</tr>")
            }
      </script>
      </tbody>
      </table>
      </div>
    </div>
</BODY>
</HTML>

tableタグの中でjavascriptのfor分を実行しています。取得したデータの分処”理を繰り返”します”。

“document.write” を記載することでHTMLタグを出力できます。

※今の段階では生のjavascriptで書いていますが今後フレームワーク（vue.js）を利用する予定です。

テーブルのデザインも解説します。MemoryMap/public/css/ichiranGamen.css

.container{
  text-align: center;
  margin-top: 30px;
 }

 table {
   width: 50%;
   margin: auto;
   font-weight: bold;
   border-collapse:  collapse; /* セルの線を重ねる */
   table-layout: fixed;        /* セルの幅計算指定 */
}

th{
  background-color:ghostwhite;
  border-bottom: solid 3px #ffc107;
  font-size: 20px;
  padding: 10px;
}

tr:hover {
  background-color: #ffa; /* マウスオーバー時の設定 */
}

tr:nth-child(odd) {
	background: ghostwhite; /* 偶数のtrタグの背景色を変える */
}

tr:nth-child(odd):hover {
	background: #ffa;/* マウスオーバー時の設定 */
}

.border{
  height: 100px;
  border: 1px solid #ccc;
}

.hidden{
  display: none;
}

画面を表示すると以下の様なレイアウトになります。DBから取得したデータを一覧表示できました。

マウスを重ねると色が変わります。

次回は一覧画面から外出先の詳細画面に遷移できるようにします。