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

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

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

 

そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、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では、初心者でも最短4週間でPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。