Laravel | Ledger | Read の実装

ホーム

はじめの一歩

Todo チュートリアル

BBS チュートリアル

Ledger チュートリアル

Cart チュートリアル

サーバーの構築

付録

概要

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

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

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

ここでは、Read (読み込み) 機能を付けます。

インデックスページにデータを渡す

2025年8月14日
class NLController extends Controller としなければいけないところを class PostController extens Controller としていました。修正いたしました。

インデックスページに Post モデルのデータをわたすため、 app / Http / Controllers の NLController.php を次のようにコーディングします。

<?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]);
    }
}

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

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


{{----------------------------
index.blade.php
copyright    : vivacocoa.jp
last modified: Aug. 03, 2025
------------------------------}}
<!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>
            <button type="button">詳細</button>
            </div>
        </td>
    </tr>
    @endforeach
    </table>
    </div>
</body>
</html>

php artisan serve で Ledger アプリを起動して、localhost:8000 で確認してください。

CSS ファイルの作成

インデックスページの表示を整えるため、public フォルダに、次のファイルを style.css というファイル名で作ってください。


/*****************************
style.css
copyright    : vivacocoa.jp
last modified: Aug. 03, 2025
******************************/
body {
    /* font-family: sans-serif; */
    color: gray;
}

h1 {
    margin: 32px;
    font-size: larger;
    text-align: center;
}

#container {
    width: 90%;
    margin: 0 auto;
}

.a-right {
    text-align: right;
}

button {
    color: gray;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 32px;
}

#table-fixed {
    table-layout: fixed;
}

th {
    background-color: #dfdfdf;
    border: 1px solid;
    padding: 8px;
}

td {
    border: 1px solid;
    padding: 8px;
}

.spc {
    display: flex;
    border-top: 0;
    border-left: 0;
}

.spc>div:nth-child(1) {
    width: 50%;
    text-align: left;
}

.spc>div:nth-child(2) {
    width: 50%;
    text-align: right;
}

php artisan serve で Ledger アプリを起動して、localhost:8000 で確認してください。

3322 visits

Posted: Aug. 02, 2025

Update: Aug. 14, 2025

ホーム目次