LaravelでToDoアプリに挑戦！データの一覧表示編

2024-06-082024-08-24

このページにはプロモーションが含まれています。

はじめに

はなまる

ご覧いただきありがとうございます！
Webアプリ開発勉強中の「はなまる」と申します。
よろしくお願いします！

Laravelの基礎学習の復習として、ToDoアプリを作りました。

記事でお伝えするのは、CRUD機能のみの基本的でシンプルなアプリです。

今回はToDoデータの一覧表示についてお伝えします。

環境構築編などの関連記事も、ぜひあわせてご覧ください。

ToDo一覧ページを作る

ルートの設定

routes

Route::get('post', [PostController::class, 'index']);

コントローラを作る

appHttp/Controllers

public function index()
    {
        $posts = Post::all();
        return view('post.index', compact('posts'));
    }

ビューファイルを作る

resources内にindex.blade.phpを作成します。

ToDo本文と作成した日付日時を表示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDo一覧ページ</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>ToDo一覧ページ</h1>
    @foreach($posts as $post)
        <p>{{$post->body}}</p>
        <p>{{$post->created_at}}</p>
    @endforeach
</body>
</html>