テレビ朝日メディアプレックス

MENU

BLOGブログ

「Laravel 5」を使って簡単な投稿フォームを作成する

フレームワークを使った開発には、開発スピードの向上やソースコードの統一など多くの利点があります。
今回は現在注目を浴びている「Laravel」というPHPフレームワークを使って
簡単な投稿フォームを作成する方法をご紹介したいと思います。

 

◆Laravelとは

Laravelは、2012年頃に登場し、現在国内外で人気急上昇中のPHPフレームワークです。
その普及スピードは凄まじく、海外では既に人気１、２位を争う程です。
これは間違いなく”いま最もホットな”PHPフレームワークのひとつと言えますね。

それでは、早速Laravelを使ってみましょう。

 

◆Laravelのインストール

※Laravelを使用するにはいくつかのシステム要件を満たす必要があります。
今回は、下記の要件を満たしていることを前提に進めて行きます。

  • PHP >= 5.6.4
  • PDO PHP拡張
  • Tokenizer PHP拡張
  • OpenSSL PHP拡張
  • Mbstring PHP拡張
  • XML PHP拡張

Laravelのインストールは至って簡単。5分あれば完了です。

  1. composerのインストール
    Laravelでは、ライブラリの依存関係をcomposerで管理しているため、予めcomposerをインストールしておく必要があります。

    $ curl -sS https://getcomposer.org/installer | php
$ mv composer.phar /usr/local/bin/composer
  2. laravelのインストール
    composer経由でLaravelフレームワークのプロジェクトを作成します。
    ※–prefer-distオプションを付けるとリリース版をインストールできます。
    （執筆時点でver.5.4.15）

    $ composer create-project --prefer-dist laravel/laravel myproject

これでmyprojectという名前のプロジェクトが作成されました。
Webブラウザで「 {LaravelプロジェクトまでのURL}/myproject/public 」へアクセスし、
Laravelのデフォルト画面が表示されれば、無事にインストール完了です。

 

◆今回実装するもの

今回は、下記のようなユーザー情報をWebサイトから投稿しデータベースへ登録するといった、至ってシンプルな投稿フォームを実装します。
※本来ならば、入力画面から確認画面を経て登録完了画面へ遷移するというフローが望ましいですが、
今回は簡易化のため確認画面は実装しないこととします。(決して手抜きではありません…)

[laravel]フォーム入力画面

 

◆開発準備

  1. 初期設定
    タイムゾーンや言語の設定を行います。 config/app.php

        'timezone' => 'Asia/Tokyo',
    'locale' => 'ja',
  2. パーミッションの設定
    下記ディレクトリはWebサーバが読み書きを行えるようにパーミッションを変更しておく必要があります。

    ・storage ・bootstrap/cache

  3. Laravel Debugbarのインストール
    こちらは必須ではありませんが、とても便利なデバッグツールですので是非インストールしておくことをお勧めします。インストール方法に関しては、下記サイトをご参照ください。 参考：https://github.com/barryvdh/laravel-debugbar

 

◆ルーティングの設定

Laravel5.2までは、app/Http/routes.phpでルーティング設定を行っていましたが、
Laravel5.3以降では、新しくroutesディレクトリが追加され、その中のファイルでルーティングが管理されるようになりました。
アプリケーション開発で主に使うwebアクセス用のルーティングは、routes/web.phpに記載します。
URL・メソッド・コントローラ・アクションなどを指定し、下記のようにグルーピングすることもできます。

    Route::group(['as' => 'form::'], function() {

        // 入力画面
        Route::get('/input', ['as' => 'input', 'uses' => 'FormController@input']);
        // 完了画面
        Route::post('/save', ['as' => 'save', 'uses' => 'FormController@save']);

    });



 


◆Controllerの作成


Controllerはapp/Http/Controllersの配下に設置します。

下記コマンドで、Controllerを自動生成してくれます。


$ php artisan make:controller FormController



画面を表示するだけなら、下記のようにテンプレートを指定するだけでOKです。


app/Http/Controllers/FormController.php


    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class FormController extends Controller
    {

        /**
         * 入力画面
         *
         * @return string
         */
        public function input()
        {
            return view('form.input');
        }

        /**
         * 完了画面
         *
         * @return string
         */
        public function save()
        {
            return view('form.complete');
        }

    }



 


◆テンプレートの作成


テンプレートはresources/viewsの配下に設置します。

先程のControllerで設定したテンプレートは下記の２つになります。


resources/views/
　└─ form/
　　　├─ input.blade.php     ：入力画面用テンプレート
　　　└─ complete.blade.php  ：完了画面用テンプレート



こちらでは入力画面用テンプレートのみご紹介します。

bootstrapを使った一般的なフォームの入力画面です。


resources/views/form/input.blade.php


@extends('layouts.common')
@section('content')
<div class="container">
    <h3>Laravelで簡単なフォームを作ってみる</h3>

    <form method="POST" action="{{ route('form::save') }}">
        <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

        <div class="form-group">
            <label>氏名</label><span class="label label-danger">必須</span>
            <input type="text" class="form-control" name="name" placeholder="氏名を入力してください">
        </div>
        <div class="form-group">
            <label>電話番号</label><span class="label label-danger">必須</span>
            <input type="text" class="form-control" name="tel" placeholder="電話番号を入力してください">
        </div>
        <div class="form-group">
            <label>メールアドレス</label><span class="label label-danger">必須</span>
            <input type="text" class="form-control" name="email" placeholder="メールアドレスを入力してください">
        </div>
        <div class="form-group">
            <label>性別</label><span class="label label-danger">必須</span>
            <div class="form-check form-check-inline">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="1">男性
                </label>
            </div>
            <div class="form-check form-check-inline">
                <label class="form-check-label">
                    <input class="form-check-input" type="radio" name="gender" value="2">女性
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>内容</label>
            <textarea class="form-control" name="content" rows="3" placeholder="内容を入力してください"></textarea>
        </div>
        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">確認する</button>
            </div>
        </div>
    </form>
</div>
@endsection



 


◆バリデーション


投稿フォームに必ず必要なバリデーションも、Laravelでは簡単に実装することができます。


    

  1. フォームリクエストを作成 バリデーション機能を実装する方法は幾つかありますが、今回はフォームリクエストを採用します。
    
フォームリクエストは、バリデーションロジックを含んだカスタムリクエストクラスです。
    
下記コマンドで、フォームリクエストを生成してくれます。
    

    $ php artisan make:request PostRequest

    

    2. 

  2. バリデーションルールを作成 先程生成したフォームリクエストにバリデーションルールを登録していきます。
    
Laravelには多くのルールが用意されており、基本的なバリデーションに関してはスクラッチで作らずとも簡単に登録できます。
    
もし、より煩雑なバリデーションルールを使いたい場合は、カスタムバリデーションとして拡張させることも可能です。 app/Http/Requests/PostRequest.php
    

     /**
  * Get the validation rules that apply to the request.
  *
  * @return array
  */
  public function rules()
  {
      return [
          'name' => 'required|max:100',
          'tel' => 'required|max:255',
          'email' => 'required|email',
          'gender' => 'required|in:1,2',
          'content' => 'max:1000'
      ];
  }

  public function messages()
  {
      return [
          'name.required' => '氏名を入力してください。',
          'name.max' => '氏名は指定文字数以内で入力してください。',
          'tel.required' => '電話番号を入力してください。',
          'tel.max' => '電話番号は指定文字数以内で入力してください。',
          'email.required' => 'メールアドレスを入力してください。',
          'email.email' => 'メールアドレスは正しいメールアドレス形式で入力してください。',
          'gender.required' => '性別を選択してください。',
          'gender.in' => '性別を正しく選択してください。',
          'content.max' => '内容は指定文字数以内で入力してください。',
      ];
  }

    

    3. 

  3. Controllerへ組み込み 完了画面へ遷移したタイミングでバリデーションをかける場合、
    
Controller内のsaveアクションへ下記のような設定をします。
    

    use App\Http\Requests\PostRequest;

class FormController extends Controller
{
・・・
    /**
    * 完了画面
    *
    * @return string
    */
    public function save(PostRequest $request)
    {

    

    4. 

  4. エラーの表示 エラーが発生した場合は、前の画面(入力画面)へ戻してくれます。 その場合、変数$errorsにエラー内容を渡してくれるため、それをユーザへ知らせることができます。
    
具体的には、入力画面用のテンプレートへ下記のような記述をすることで実現できます。
    
resources/views/form/input.blade.php
    

        @if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    

    5. 



そうすると、バリデーションエラーが発生した場合の画面は下記のようになります。 [laravel]フォーム入力画面(エラー)


 


◆データベース登録


    

  1. テーブルの準備 投稿されたデータを、「laravel」データベースの「members」テーブルへ登録します。 テーブル定義は下記の通りです。 [laravel]テーブルの準備
    2. 

  2. 接続設定 環境設定ファイル.envに、データベースの接続情報を記載します。 今回はローカルの開発環境へ繋げているので、下記のような形になります。 .env

    DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

    

    3. 

  3. Modelの作成 下記コマンドで、Modelを生成してくれます。

    $ php artisan make:model Member

    

    生成されたModel内で下記のようにテーブル名を定義します。 app/Member.php
    

    namespace App;

use Illuminate\Database\Eloquent\Model;

class Member extends Model
{

    /**
    * The table associated with the model.
    *
    * @var string
    */
    protected $table = 'members';

}

    

    4. 

  4. データベース登録ロジック 今回はControllerに直接登録ロジックを書くパターンのご紹介です。
    
リポジトリパターンを採用するとテストもしやすくなりますので、次回以降ご紹介できればと思います。 Eloquent ORMというLaravelのデータ操作の実装方法を使うと、sqlを書かずともデータの参照・登録・更新・削除など様々な機能を簡単に実装することができます。
    
また、Eloquent ORMではupdated_at(更新時間), created_at(作成時間)カラムは自動的に更新することができます。
    

        /**
    * 完了画面
    *
    * @return string
    */
    public function save(PostRequest $request)
    {
        // データベース登録
        $member = new Member;
        $member->name = $request->name;
        $member->tel = $request->tel;
        $member->email = $request->email;
        $member->gender = $request->gender;
        $member->content = $request->content;
        $member->save();
      
        // リロード等による二重送信防止
        $request->session()->regenerateToken();
      
        return view('form.complete');
    }

    

    5. 



ここまでで、実装完了です。

実際に入力画面へアクセスして投稿すると… [laravel]テーブルの投稿データ データベースへデータが登録されました！


 


◆まとめ


如何でしたでしょうか。今回はミニマム設計の投稿フォームを実装してみましたが、

使い方次第でもっと複雑なことも汎用的に書くことができます。

スクラッチで開発するよりも、断然効率よく実装することができるので興味を持ってくださった方は、是非一度お試しいただけたら幸いです。

関連する記事

記事を書いた人

kuriyama

そろそろPHP以外の言語にも手を伸ばしたいと思い始めました。 まずは朝活からスタートしたいと思います。
記事の一覧を見る