【Laravel チュートリアル】タスク管理アプリ開発:タスク一覧画面

icon by Icons8

PHPのフレームワークLaravelのチュートリアルとして、タスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。

今回はデータベースにあるデータを利用して、タスク一覧画面を作成します。CRUDの「Read:読み込み」です。

CRUDについてはこちらを参考ください

各種ファイルの確認

タスク管理アプリ開発:rootURLの修正」を参考にいただいている場合、web.php , TasksController , index.blade.php は以下のようになっていることを確認してください。

<?php

Route::get('/', 'TasksController@index');
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TasksController extends Controller
{
    // index()というメソッドを記述します。
    public function index()
    {
        // index()メソッドの中身を記述します。
        // tasksフォルダにあるindex.blade.phpファイルをレスポンスとして返します。
        return view('tasks.index');
    }
}
<h1>Hello, Laravel</h1>

タスク一覧の実装

Controllerの実装

TasksController を以下のように実装してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TasksController extends Controller
{
    public function index()
    {
        // Taskモデルを使ってデータを全て取得します。
        $tasks = Task::all();
        return view('tasks.index', ['tasks' => $tasks]);
    }
}

TasksControllerindex アクションで Task Modelを利用してデータベースのデータを全件取得(all メソッド)しています。

Viewにデータを渡すときは、view() の第二引数に配列を追加します。

Viewの実装

tasks ディレクトリにある index.blade.php を以下のように実装します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div>
        <ul>
            @foreach($tasks as $task)
                <li>{{ $task->title }}</li>
            @endforeach
        </ul>
    </div>
</body>
</html>

$tasks は複数のデータが含まれています。複数のデータから1つ1つのデータを取得して表示するために @foreachを使ってループさせます。ループの終わりには @endforeach を使います。

Modelに含まれている属性、今回の場合は title を取得する場合は $task->title と書きます。

サーバを起動して確認する

ターミナルで以下のコマンドを実行してブラウザから http://127.0.0.1:8000/ にアクセスしてみましょう。

$ php artisan serve

以下のように title が箇条書きになっていればOKです。

見た目を整える

ViewファイルとSassファイルを修正して見た目を整えます。LaravelでSassを使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。

LaravelでSassを利用する

お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TaskApp</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <div class="header">
        <h1>タスク一覧</h1>
    </div>
    <div class="main">
        <ul>
            @foreach($tasks as $task)
                <li>{{ $task->title }}</li>
            @endforeach
        </ul>
    </div>
</body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

body {
    width: 700px;
    margin: auto;
    padding-top: 80px;
}

.header {
    padding: 20px 0;

    h1 {
        font-weight: 600;
    }
}

.main {
    ul {
        list-style: none;
        padding-left: 0;
    }

    li {
        list-style: none;
        font-size: 25px;
        line-height: 70px;
        border-bottom: solid 3px #1b1e21;
    }
}

終了👍

git status コマンドで修正されたファイルが表示されているかを確認してください。

git addgit commitを実行してローカルリポジトリに登録し
git pushでリモートリポジトリへ更新履歴を登録してください。