一覧画面の修正
一覧画面の中に詳細画面に遷移するリンクを仕込みます。
<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]);
}メソッドの第２引数で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>思い出ＭＡＰ</TITLE>
<link rel="stylesheet" type="text/css" href="/MemoryMap/public/css/shosaiGamen.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>
<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>動かしてみます。一覧画面から東京スカイツリーをクリックします。
無事詳細画面に遷移しました。
次回は出かけた場所の編集を可能にします。