【Laravel チュートリアル】タスク管理アプリ開発：タスク詳細画面

2020年1月21日 Git Laravel プログラミング

icon by Icons8

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

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

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

タスク管理アプリ開発：タスク一覧画面 で実装したweb.php , TasksController と resources/views/tasks/index.blade.php を利用します。

まずは id = 1のタスク詳細画面の実装

詳細画面では１つのデータを表示します。つまりControllerでModelを使って１つのデータを取得します。

まずは id = 1 のデータだけを取得してViewに表示していきます。

Routingの実装

web.php を修正し、 /show というURLにアクセスしたときに、 TasksController の show アクションが実行されるようにします。

<?php

Route::get('/show', 'TasksController@show');

Controllerの実装

TasksController の show アクションの中で id = 1 のデータを取得（find メソッド）します。Viewファイルは resources/views/tasks/show.blade.php を指定し、Viewにデータを渡すときは、view() の第二引数に配列を追加します。

<?php

namespace App\Http\Controllers;

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

class TasksController extends Controller
{
    public function index()
    {
        ......
    }

    public function show()
    {
        // Taskモデルを使って id = 1 のデータを取得します。
        // １つのデータのため、変数名は単数形にしています。
        $task = Task::find(1);
        return view('tasks.show', ['task' => $task]);
    }
}

Viewの実装

resources/views/tasks ディレクトリに show.blade.php を新規作成してください。そして TasksController からもらった $task を使ってデータ表示をします。

<!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>
    <p>{{ $task->title }}</p>
    <p>{{ $task->contents }}</p>
</body>
</html>

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

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

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

$ php artisan serve

以下のように title と contents が表示されていればOKです 👍

しかしこれでは常に id = 1 のデータしか表示できません。次にさまざまな id のデータ取得する実装をします

タスク詳細画面の実装

URLに id を含むようにします。そうすることでControllerでURLに含まれている id をもとにデータ取得ができます。

Routingの実装

先ほど実装した web.php を以下のように変更してください。URLに id を追加し、さらに id は 0 ~ 9 の数字で構成される複数桁にしています。

<?php

// 変更前
Route::get('/show', 'TasksController@show');
↓
// 変更後
Route::get('/{id}', 'TasksController@show')->where('id', '[0-9]+');

Controllerの実装

TasksController の showアクションの引数に int $id を追加します。そうすると show アクションの中でURLに含まれている id を使用できます。

※ int というは integerの略で数値を表します。 $id は数値ですと明示しています。

<?php

namespace App\Http\Controllers;

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

class TasksController extends Controller
{
    public function index()
    {
        ......
    }

    public function show(int $id)
    {
        // URLに含まれている id は $id という変数に格納されています
        $task = Task::find($id);
        return view('tasks.show', ['task' => $task]);
    }
}

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

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

$ php artisan serve

id = 1 のデータが表示されていればOKです👍

続いて http://127.0.0.1:8000/2 にアクセスしてみましょう。 id = 2 のデータが表示されていればOKです 👍

一覧画面から詳細画面にリンクさせる

URLに id を含むことで各データの詳細画面を作ることができました。続いて一覧画面に表示されているデータから、詳細画面にリンクさせます。

参考：タスク管理アプリ開発：タスク一覧画面

resources/views/tasks/index.blade.php にリンクをつけていきます。リンク先のURLは $task をつかって /{{ $task->id }} とします。

<!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)
                {{-- aタグで囲みます --}}
                <a href="/{{ $task->id }}"><li>{{ $task->title }}</li></a>
            @endforeach
        </ul>
    </div>
</body>
</html>

ターミナルからサーバを起動してブラウザから http://127.0.0.1:8000 にアクセスしてみましょう。タスク１つ１つがリンクになっており、クリックすると詳細画面に移動できるとOKです 👍

注意点

URLの中に id を含む形で実装が完成しました。しかし存在しない id 、例えば 100 などを指定するとどうなるのでしょうか？

試していただくとわかるのですが、黒い画面でエラーになります。データが存在しないためです。黒いエラー画面を表示しないためには find() ではなく、findOrFail() というメソッドを使いましょう。

<?php

namespace App\Http\Controllers;

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

class TasksController extends Controller
{
    public function index()
    {
        ......
    }

    public function show(int $id)
    {
        // URLに含まれている id は $id という変数に格納されています
        $task = Task::findOrFail($id);
        return view('tasks.show', ['task' => $task]);
    }
}

データベースにない id を指定してみましょう（例えば http://127.0.0.1:8000/100 など）

以下のような404エラーページが表示されます。

※ 404エラーとはデータが無い、探しているページが見つからない時に発生するステータスです。

見た目を整える

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>
        <a href="/" class="button">一覧に戻る</a>
    </div>
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        <div class="contents">{{ $task->contents }}</div>
    </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;
    display: flex;

    h1 {
        font-weight: 600;
        margin-right: 40px;
    }
}

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

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

.button {
    display: inline-block;
    text-align: center;
    line-height: 40px;
    width: 100px;
    height: 40px;
    margin-right: 10px;
    border: solid 1px gray;
    border-radius: 3px;
}

a, a:hover {
    text-decoration: none;
    color: #000000;
}

.title {
    font-size: 32px;
    margin-bottom: 10px;
}

.contents {
    font-size: 20px;
}

終了 👍

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です