Laravel | Ledger | Show の実装

ホーム

はじめの一歩

Todo チュートリアル

BBS チュートリアル

Ledger チュートリアル

サーバーの構築

付録

概要

このページは、2025年8月3日15時30分に書き換えました。データが一つ増えています。

WEB アプリケーションには、CRUD という機能をつけると良いとされています。

CRUD とは、Create (作成)、Read (読み込み)、Update (更新)、Delete (削除)の頭文字をとったものです。

さきほどは Index ページに Read (読み込み) 機能を付けました。Index ページではデータを一覧できる Read 機能をつけます。そして、個々のデータの詳細については Show ページで表示するのが一般的です。

Show ページの作成

resource / views の中に「n_l_s」というフォルダを作り、その中に「show.blade.php」というファイルを作ってください。
そして「show.blade.php」を次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{url('style.css')}}">
    <title>Show | Ledger</title>
</head>
<body>

<h1>詳細</h1>
<div id="container">
<div class="a-right">
    <button type="button">削除</button>
    <button type="button">編集</button>
<a href="{{route('n_l_s.index')}}">
    <button type="button">戻る</button>
</a>
</div>
<table>
    <tr>
        <th>氏名</th>
        <td>{{$n_l_->name}}</td>
    </tr>
    <tr>
        <th>性別</th>
        <td>
        @if($n_l_->gender)
        男性
        @else
        女性
        @endif
        </td>
    </tr>
    <tr>
        <th>学年</th>
        <td>{{$n_l_->year}}年</td>
    </tr>
    <tr>
        <th>クラス</th>
        <td>{{$n_l_->cls}}組</td>
    </tr>
    <tr>
        <th>得意科目</th>
        <td>{{$n_l_->favo}}</td>
    </tr>
    <tr>
        <th>成績</th>
        <td>{{$n_l_->grades}}点</td>
    </tr>
    <tr>
        <th>生年月日</th>
        <td>{{$n_l_->birth}}</td>
    </tr>
    <tr>
        <th>住所</th>
        <td>{{$n_l_->addr}}</td>
    </tr>
</table>
</div>

</body>
</html>

コントローラーの変更

App / Http / Controllers の NLController を次のように変更します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\NL;

class NLController extends Controller
{
    public function index()
    {
        $n_l_s = NL::all();
        return view('index')->with(['n_l_s'=>$n_l_s]);
    }
    
    // ここから
    public function show(NL $n_l_)
    {
        return view('n_l_s.show')->with(['n_l_' => $n_l_]);
    }
    // ここまで追加します。
}

インデックスページの変更

resources / views / index.blade.php を次のように書きかえてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{url('style.css')}}">
    <title>Ledger</title>
</head>
<body>
    <h1>生徒台帳</h1>
    <div id="container">
    <div class="a-right">
        <button type="button">追加</button>
    </div>
    <table id="table-fixed">
    <tr>
        <th>氏名</th>
        <th>性別</th>
        <th>学年</th>
        <th>得意科目</th>
        <th>成績</th>
    </tr>
    @foreach ($n_l_s as $n_l_)
    <tr>
        <td>{{$n_l_->name}}</td>
        <td>
        @if($n_l_->gender)
        男性
        @else
        女性
        @endif
        </td>
        <td>{{$n_l_->year}}年</td>
        <td>{{$n_l_->favo}}</td>
        <td class="spc">
            <div>
            {{$n_l_->grades}}点
            </div>
            <div>
            <!-- ここから -->
            <a href="{{route('n_l_s.show', $n_l_)}}">
            <button type="button">詳細</button>
            </a>
            <!-- ここまで変更 -->
            </div>
        </td>
    </tr>
    @endforeach
    </table>
    </div>
</body>
</html>

php artisan serve で Ledger アプリを起動して、localhost:8000 で確認してください。
Index ページで「詳細」ボタンをクリックすると詳細ページが表示されます。詳細ページで「戻る」ボタンをクリックすると Index ページに戻ります。そのほかのボタンはまだ機能していません。

1114 visits

Posted: Aug. 03, 2025

Update: Aug. 03, 2025

ホーム目次