【Laravel チュートリアル】タスク管理アプリ開発：タスク新規作成画面

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

icon by Icons8

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

今回はデータベースにあるデータを利用して、タスクの新規作成画面を作成します。CRUDの「Create：新規作成」です。

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

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

Form画面を実装

新規作成画面にはデータを登録するためのformが必要です。まずはformを表示するための画面を実装します。

Routingの実装

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

<?php

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

Controllerの実装

TasksController の create アクションの中では view() を使って resources/views/tasks/create.blade.php を表示します。

<?php

namespace App\Http\Controllers;

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

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

    public function show(int $id)
    {
        ......
    }

    public function create()
    {
        return view('tasks.create');
    }
}

Viewの実装

resources/views/tasks ディレクトリ配下に create.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>
        <form action="/create" method="post">
            @csrf
            <p>タイトル：<input type="text" name="title"></p>
            <p>内容：<textarea name="contents" cols="50" rows="10"></textarea></p>
            <p>
                <input type="submit" value="登録">
            </p>
        </form>
    </body>
</html>

formの action にはPOST先のURLを指定します。method はPOSTを指定します。データ送信をするために <input type="submit"> は必須なので忘れないでください。

formのinputタグ の name はデータベースのカラム名を指定しておくと登録が楽に実装できます。

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

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

$ php artisan serve

以下のようにフォームが表示されていればOKです👍

FormをPOSTするURLを実装

画面の表示が完了したら、続いてデータを送信するPOST先のURLと、データ登録の実装をしていきます。

Routingの実装

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

※ POST先のURLを作成するので Route::post となっていることに注意してください。GETとPOSTは違うリクエストなので同じURLでも問題ありません。

<?php

Route::post('/create', 'TasksController@store');

Controllerの実装

TasksController の store アクションの引数には新規作成画面から送信された Request $request を書きます。

store アクションの中では大きく分けて以下３つの実装をします。

  1. 送信されたデータが正しいかを判断するvalidation
  2. データベースに登録
  3. 画面表示するURLにリダイレクト
<?php

namespace App\Http\Controllers;

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

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

    public function show(int $id)
    {
        ......
    }

    public function create()
    {
        ......
    }

    public function store(Request $request)
    {
        // validation
        $validate = $request->validate([
            'title'    => 'required',
            'contents' => 'nullable'
        ]);

        // データベースに登録
        Task::create($validate);
        
        // 画面表示するURLにリダイレクト
        return redirect('/');
    }
}

送信されたデータが正しいかを判断するvalidation

validate() の引数に連想配列を持たせて送信されたデータをvalidationかけることができます。上記の例は以下のvalidationルールを表しています。

  • title → 必須
  • contents → データが無くてもOK

連想配列のキーはformの inputタグ の name を指定してください。

データベースに登録

create() を使うとデータベースへの登録が可能です。validationをした結果を create() の引数に追加してください。

画面表示するURLにリダイレクト

redirect() を使って特定のURLにリダイレクトさせます。redirect() の引数には web.php に登録されているURLを指定します。

上記の例では / のURLにアクセスします。

Modelの実装

今回は title と contents の２つのデータを登録します。複数のデータを一度に登録する場合は、Modelを以下のように変更してください。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['title', 'contents'];
}

新規作成してみる

http://127.0.0.1:8000/create にアクセスして、データを新規登録しましょう。登録後、タスク一覧画面が表示されて、データ追加されていれば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>
            <a href="/" class="button">一覧に戻る</a>
        </div>
        <div class="main">
            <form action="/create" method="post" class="create-form">
                @csrf
                <label>タイトル（必須）</label>
                <input type="text" name="title">
                <label>内容</label>
                <textarea name="contents" cols="50" rows="10"></textarea>
                <button type="submit" class="submit-button">登録</button>
            </form>
        </div>
    </body>
</html>
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

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

.....
.....

.create-form {
    form {
        margin: auto 20px;
        width: 80%;
    }

    label {
        display: block;
        font-size: 20px;
    }

    input {
        width: 100%;
        line-height: 40px;
        border: solid 1px #d3d3d3;
        border-radius: 5px;
        padding: 0px 10px;
        margin-bottom: 20px;

        &:focus {
            outline: none;
        }
    }

    textarea {
        width: 100%;
        line-height: 25px;
        border: solid 1px #d3d3d3;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 20px;

        &:focus {
            outline: none;
        }
    }

    .submit-button {
        font-size: 16px;
        width: 100px;
        background-color: #4287f5;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        border-radius: 5px;
        border: none;
    }
}

また index.blade.php と show.blade.php にも修正を加えます。

<!DOCTYPE html>
<html lang="ja">
・・・・・
・・・・・
<body>
    <div class="header">
        <h1>タスク一覧</h1>
        {{-- 新規作成画面へのリンクを追加 --}}
        <a href="/create" class="button">新規作成</a>
    </div>

    ・・・・・
    ・・・・・
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
・・・・・
・・・・・
<body>
    ・・・・・
    ・・・・・
    <div class="main">
        <div class="title">{{ $task->title }}</div>
        {{-- 内容に改行をそのまま表示します --}}
        <div class="contents">{!! nl2br(e($task->contents)) !!}</div>
    </div>
</body>
</html>

終了 👍

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

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

コメントを残す

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