一覧ページの作成

---

前章で投稿したデータをデータベースに保存するところまで完了しました。

今回は保存したデータを一覧で表示していきます。

index アクションの追加

---

一覧を表示するために、TodoController の index アクションの処理を追加していきます。

TodoController の冒頭に このように追記してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Todo; //追記

index アクションを追加していきます。

以下のように追加してください。

public function index(Request $request) {
    $cond_title = $request->cond_title;
    if ($cond_title != '') {
        // 検索されたら検索結果を取得する
        $todos = Todo::where('title', $cond_title)->get();
    } else {
        // それ以外はすべて取得する
        $todos = Todo::all();
    }
    return view('todo.index', ['todos' => $todos, 'cond_title' => $cond_title]);
    }

ここで出てきた $cond_title について説明します。

ここにはユーザーがタイトルから検索してきた値が入ります。

ユーザーから送られてきた $cond_title の値をもつデータがあればそれを表示して、

検索がされなければ、全てのデータを表示するという簡単な if 分になっています。

View を追加

---

次に、TodoController の index アクションで取ってきたデータを表示する View (index.blade.php) を作成していきます。

下記の内容で resources/views/todo/index.blade.php を新規作成して下さい。

@extends('layouts.layouts')
@section('title', 'todos一覧')

@section('content')
    <div class="container">
        <div class="row">
            <h2>Todos一覧</h2>
        </div>
        <div class="row">
            <div class="col-md-4">
                <a href="{{ action('Admin\TodoController@add') }}" role="button" class="btn btn-primary">新規作成</a>
            </div>
            <div class="col-md-8">
                <form action="{{ action('Admin\TodoController@index') }}" method="get">
                    <div class="form-group row">
                        <label class="col-md-2">タイトル</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" name="cond_title" value="{{ $cond_title }}">
                        </div>
                        <div class="col-md-2">
                            {{ csrf_field() }}
                            <input type="submit" class="btn btn-primary" value="検索">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="list-news col-md-12 mx-auto">
                <div class="row">
                    <table class="table table-dark">
                        <thead>
                            <tr>
                            <th>ID</th>
                            <th>タイトル</th>
                            <th>場所</th>
                            <th>期限</th>
                            <th colspan="2">重要度</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($todos as $todo)
                                <tr>
                                <td>{{ $todo->id }}</td>
                                <td>{{ str_limit($todo->title, 100) }}</td>
                                <td>{{ str_limit($todo->space, 100) }}</td>
                                <td>{{ str_limit($todo->deadline, 100) }}</td>
                                <td>{{ str_limit($todo->priority, 100) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

 

ここでは foreach が出てきています。

@foreach($todos as $todo)
....
@endforeach

これは先ほど TodoController の index アクションで取ってきたデータが配列形式になっているのでそれを foreach で一つ一つ表示しているだけです。

Routing の実装

---

ここまでできたらRouting を実装して表示してみましょう。

web.php に追記してください。

Route::get('todo', 'TodoController@index'); // 追記

サーバーを起動して確認してみましょう。

こんな感じになっていれば OK です。