Laravelでformを使う方法【初心者向け】

Laravelでformを使う方法について解説します。

フォームはWebアプリケーションを作る上で必要な機能なので、実際にプログラムを書きながら理解していきましょう。

 

なお本記事は、TechAcademyのPHP/Laravel講座の内容をもとに紹介しています。

 

 

formとは

Webアプリケーションにおいてformとは、ユーザーが情報を入力、送信するためのインターフェースです。通常HTMLにおいてはformタグによって記述されます。

 

Laravelのテンプレートの作成方法

Laravel のテンプレート置き場はresouces/views以下になります。

ここに拡張子blade.phpファイルを配備するとコントローラーからviewヘルパーを使ってアクセスすることができるようになります。

 

[PR] PHPのプログラミングで挫折しない学習方法を動画で公開中

Laravelのテーブルの作成方法

Laravelではテーブルをmigrationファイルによって作成します。

これによりデータベースのバージョンを管理していくことができるので、標準的な手法かと思います。migration ファイルはartisanコマンドで作成することができ、そのmigrationを実行することでデータベースが更新されます。

 

実際にLaravelでformを使ってみよう

Laravel5系ではライブラリが標準で含まれなくなりFormファサードが初めからは使えません (新しくLaravelに触る人には関係ないですね)。

今回は標準で使えるものを使ってformによるデータ更新を行ってみましょう、以下のことを行います。

• モデルの作成: 投稿 (Post) モデルを作成します。これはタイトル (title)、本文(body)をフィールドとして持ちます。
• コントローラーの作成: 投稿を操作するコントローラーを作成します。アクションとしてはindex(投稿一覧の表示)、store(投稿の登録)、をもちます。
• ビューの作成: 投稿一覧ページを作成します。この画面は投稿の登録フォームを持っています。(簡単のため一緒の画面にしてしまいます)

では、モデルの作成から始めましょう。artisanコマンドを使ってモデルファイルを作成してしまいましょう。オプションをつけてテーブルを作成するマイグレーションファイルも作成しましょう。

php artisan make:model Post --migration

生成されたファイルを次のように変更します。内容としてはマイグレーションファイルへカラムの追加と、モデルファイルへfilldableフィールドの追加です。

database/migrations/Y_m_d_his_create_posts_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'body'];
}

 

次にコントローラーを作成します。

php artisan make:controller PostsController

作成されたファイルに、index、storeアクションを定義します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator;
use App\Post;

class PostsController extends Controller
{
    public function index()
    {
        return view('posts.index')->with([ 'posts' => Post::all() ]);
    }

    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'title' => 'required|max:255',
            'body' => 'required',
        ]);

        if ($validator->fails()) {
            return back()->withErrors($validator)->withInput();
        }

        Post::create($request->all());
        return redirect('posts');
    }
}

これらのアクションのルートを登録しておきます。routes/web.php に2つのルートを記述してください。

//...
Route::get('posts', 'PostsController@index');
Route::post('posts', 'PostsController@store');
//...

どちらも同じルートですがメソッドが異なります。これによって一覧ページの取得とフォームの送信を区別します。

最後にビューを定義しましょう。投稿一覧ページ (兼投稿の登録ページ)をresources/views/posts/index.blade.phpとして作成しましょう。

<h1>Post</h1>

<h2>All</h2>

<table>
    <tr>
        <th>id</th>
        <th>title</th>
        <th>body</th>
    </tr>
    @foreach ($posts as $post)
        <tr>
            <td>{{ $post->id }}</td>
            <td>{{ $post->title }}</td>
            <td>{{ $post->body }}</td>
        </tr>
    @endforeach
</table>

<h2>Create new post</h2>

@if ($errors->any())
    <div>
        <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
        </ul>
    </div>
@endif

<form action=""/posts"" method=""POST"">
    {{ csrf_field() }}
    <div>
        <label>Title</label><br>
        <input type=""text"" name=""title"" />
    </div>
    <div>
        <label>Body</label><br>
        <textarea name=""body""></textarea>
    </div>
    <div>
        <input type=""submit"" value=""Create"" />
    </div>
</form>

ビューの最下部のフォームについてみていきましょう。

• actionは /postsでmethodはPOSTで行います、これによって先ほど定義したstoreアクションへ処理が流れます
• csrf_field() は CSRF 攻撃への対策として、正しいビューから送信されたリクエストであることを示すトークンフィールドをフォーム内に定義してくれます。これはLaravelのセキュリティ対策です。
• title、body のための入力フィールドを作成しています。またsubmitボタンを表示するためのinputタグを記述しています。これらは特に目新しいことはないでしょう。

以上がLaravelでformを使った処理の記述方法の一例となります。

form はユーザーからの情報を受け取る窓口になるものです。色々な工夫によってユーザーの体験を向上させることで、気持ちよく使ってもらえるアプリケーションが作れるといいですね。

この記事を監修してくれた方 鵜澤峻平（うさわしゅんぺい） 普現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります。普段はRails、Laravel、Node.js等を使ってWeb、モバイルアプリケーションを作成しています。開発実績としては、いくつかのWebサービス、コンシューマー向けモバイルアプリケーション、NPOサイトリニューアル、ロボット用プログラムなどがあります。 TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

 

オンラインのプログラミングスクールTechAcademyではオンラインブートキャンプPHP/Laravelコースを提供しています。

PHPやフレームワークのLaravelを使ってWebアプリケーションの開発を学ぶことができます。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。