
icon by Icons8
PHPのフレームワークLaravelのチュートリアルとして、タスク管理アプリを開発する手順をまとめていきます。Gitを使ったバージョン管理も行なっていきます。
今回はデータベースにあるデータを利用して、タスクの新規作成画面を作成します。CRUDの「Create:新規作成」です。
タスク管理アプリ開発:タスク一覧画面 で実装した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
アクションの中では大きく分けて以下3つの実装をします。
- 送信されたデータが正しいかを判断するvalidation
- データベースに登録
- 画面表示する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
の2つのデータを登録します。複数のデータを一度に登録する場合は、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を使ってスタイルを反映させる方法は以下の記事にまとまっていますのでご参考ください。
お好きなように実装していただいて問題ありませんが、私が実装した結果を掲載しておきます。実装した画面は以下になります。
※ 一覧画面に戻るためのボタンを追加しました

<!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
でリモートリポジトリへ更新履歴を登録してください。