Laravel | Todo | Read の実装

ホーム  

概要

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

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

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


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

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Task;  // Task モデルを使えるようにしています

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all(); // Task モデルのすべてのデータを読み込んでいます

        // 次のコードで with() を使って、tasks という名前で
        // Task モデルのデータを index.blade.php にわたしています

        return view('index')->with(['tasks' => $tasks]);
    }
}


インデックスページの作成

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">
  <title>Task</title>
  <link rel="stylesheet" href="{{ url('style.css') }}">
</head>
<body>
<div class="container">
  <h1>Task</h1>
  @forelse ($tasks as $task)
    <p class="task">{{ $task->body }}</p>
  @empty
    <p class="task">No task!</p>
  @endforelse
</div>
</body>
</html>

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


CSS ファイルの作成

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

body {
    background-color: #efefef;
}

.container {
    width: 500px;
    margin: 16px auto;
}

h1 {
    font-size: 20px;
}

.task {
    height: 80px;
    width: 100%;
    border-radius: 4px;
    padding: 0px 8px;
    line-height: 80px;
    box-sizing: border-box;
    background-color: white;
    margin-bottom: 0px;
}

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



1110 visits
Posted: Jul. 24, 2025
Update: Jul. 25, 2025

ホーム   目次