目次

一覧画面の修正

一覧画面の中に詳細画面に遷移するリンクを仕込みます。

      <script>
      
      
        <!--コントローラーから渡された$dataを取得 -->
        var data = @json($data);
        <!--レコード数分繰り返す -->
        for (var i = 0; i < data.length; i++) {

        <!--イベントを組み立て -->
        var pass =  "toShosaiGamen(" + data[i]['id'] + ")";
        
        <!--trタグのonclickイベント設定 -->
        var tag = "<tr class='border' onclick=" + pass +  ">"
            
            document.write(tag);
                 
                 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>")
        }
        
        <!--詳細画面に遷移 -->
        function toShosaiGamen(id) {
          location.href = "/MemoryMap/public/shosaiGamen/" + id ;
        }
        
      </script>

変数passにメソッド名と引数で渡すIDを設定します。

<!--イベントを組み立て -->
var pass =  "toShosaiGamen(" + data[i]['id'] + ")";

変数tagにtrタグも含めて保存します。

var tag = "<tr class='border' onclick=" + pass +  ">"

変数tagを書きだします。

document.write(tag);

toShosaiGamenメソッドでhrefに詳細画面へのリクエストを設定します。

/shosaiGamen/ + id という形でIDをパラメーターとしてリクエストを投げます。

<!--詳細画面に遷移 -->
function toShosaiGamen(id) {
  location.href = "/MemoryMap/public/shosaiGamen/" + id ;
}

詳細画面の作成

MemoryMap/routes/web.php

/shosaiGamen の場合に次の / 以降をIDとしてコントローラーの shosaiGamen メソッドを呼びます。

Route::get('/shosaiGamen/{id}', 'MemoryMapController@shosaiGamen');

Map/app/Http/Controllers/MemoryMapController.php

    // 詳細画面を返却する
     public function shosaiGamen(Request $request, $id){
     
     // idを条件にTBLをSELECTする 
     $data = gaishutsu_kiroku::where('id', $id)->get();
        
        return view('shosaiGamen',['data' => $data]);
        
    }

メソッドの第2引数でweb.phpから渡ってきたパラメータを取ります。

 public function shosaiGamen(Request $request, $id)

そのIDに該当するレコードをテーブルから取得します。

 $data = gaishutsu_kiroku::where('id', $id)->get();

詳細画面に取得したデータを渡します。

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

次はviewの作成です。

Map/resources/views/shosaiGamen.blade.php

<!DOCTYPE HTML>
<HTML>

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

<BODY>

    <header>
        <p class="head_title">思い出<span>MAP</span></p>
        <nav>
            <ul>
                <li><a href="/MemoryMap/public/displayMap">MAP</a></li>
                <li><a href="/MemoryMap/public/torokuGamen">登録</a></li>
                <li><a href="/MemoryMap/public/ichiranGamen">一覧</a></li>
            </ul>
        </nav>
    </header>
    
    <script>
    var data = @json($data);
    
    var name = data[0]['place_name'];
    var placeDate = data[0]['place_date'];
    var placeComment = data[0]['place_comment'];
    </script>

    <div class="container">
        <div class="inline">

            <h3>{{ $data[0]['place_name'] }}</h3>

              {{ csrf_field() }}

                <div id="map" class="map"></div>

                <table>
                  <tr class="border">
                    <td class="table-title">出かけた日</td>
                    <td>{{ $data[0]['place_date'] }}</td>
                  </tr>
                  <tr class="border">
                    <td class="table-title">コメント</td>
                    <td>{{ $data[0]['place_comment'] }}</td>
                  </tr>
                </table>

        </div>
    </div>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0jk-vadOR5ZWLZjhSrCzK_J2McxzbqNM&callback=initMap"></script>

    <script>
        var map;
        var marker;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: {{ $data[0]['ido'] }}, lng: {{ $data[0]['keido'] }} },
                zoom: 15
            });
                markerLatLng = { lat: {{ $data[0]['ido'] }}, lng:{{ $data[0]['keido'] }} };
                marker = new google.maps.Marker({
                position: markerLatLng,
                map: map
        });
        }

    </script>

</BODY>

</HTML>

ここで渡ってきたデータを変数に格納しています。

<script>
var data = @json($data);

var name = data[0]['place_name'];
var placeDate = data[0]['place_date'];
var placeComment = data[0]['place_comment'];
</script>

動かしてみます。一覧画面から東京スカイツリーをクリックします。

無事詳細画面に遷移しました。

次回は出かけた場所の編集を可能にします。