『Laravel』を使ってカンタンなお問い合わせフォームを作ってみた

エリカ

2017.09.08

こんにちは、エリカです。

Laravel をさらっと使って、カンタンなお問い合わせフォームを作ってみます。

環境は、Laradock + Laravel です。前回の記事を参考にセットアップしてください

PHPフレームワーク「Laradock」で、手軽にLaravel+Dockerな開発環境を構築する

エリカ

2017.08.11

Laravel ではもはや Model という言葉があまり出てこないのですが、便宜的におなじみ MVC な感じで進めていきます。

お問い合わせ用モデルクラスの作成

今回はデータベース抜きで話を進めますが、まずは「お問い合わせ」というモデルクラスを作ります。したがって、ビューやコントローラでは、この「お問い合わせ」というモデルを主に取り扱います。

また、今回は言語設定も省いていますので、全て英語で処理していきます。後ほど、日本語の対応方法なども紹介していければと思います。

というわけで「 Contact 」という名前でモデルを作ります。

まずは、各種 docker コンテナを起動してください。

laradockディレクトリに入って、以下のコマンドでしたね。

$ docker-compose up -d nginx mysql

そして「 workspace 」コンテナに入ります。

$ docker-compose exec workspace bash

ここで、artisan を使ってモデルを作成します。

$ artisan make:model Contact

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Contact extends Model
{
    //
}

このような app/Contact.php というファイルが作成されていると思いますので、この中身を編集します。

「名前」「メールアドレス」「メッセージ」といった内容を扱うお問い合わせフォームにしておきます。

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Contact extends Model
{
    protected $fillable = [
        'name',
        'email',
        'message',
    ];
}

ひとまず以上です。

お問い合わせ用コントローラクラスの作成

artisan を使ってコントローラを作ります。

$ artisan make:controller ContactController

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class ContactController extends Controller
{
    //
}

app/Http/Controllers/ContactController.php

こんなファイルができます。

アクションは、入力画面の表示、確認画面の表示、完了画面の表示になります。

メソッドを生やします。

<?php

namespace AppHttpControllers;

use AppContact;
use IlluminateHttpRequest;

class ContactController extends Controller
{
    public function form()
    {
        return view('form');
    }
    public function confirm(Request $request)
    {
        $contact = new Contact($request->all());

        return view('confirm', compact('contact'));
    }
    public function process(Request $request)
    {
        return view('complete')
    }
}

次にRouteを設定します。

routes/web.php

Route::get('/contact', 'ContactController@form');
Route::post('/contact/confirm', 'ContactController@confirm');
Route::post('/contact/process', 'ContactController@process');

入力画面はGET。それ以外はPOSTになります。

お問い合わせ用ビューの作成

ビュー作ります。

laravel標準では、ビューの保存場所は、resources/views になります。

ここに、こんな感じでファイルを用意します。

入力画面 – form.blade.php

<form action="{{action('ContactController@confirm')}}" method="post">

<input type="text" name="name">

<input type="text" name="email">

<textarea name="message"></textarea>

<input type="submit" value="Confirm">
</form>

確認画面 – confirm.blade.php

<form action="{{action('ContactController@process')}}" method="post">

{{$contact->name}}

{{$contact->email}}

{{$contact->message}}

<input type="submit" value="Submit">

@foreach($contact->getAttributes() as $key => $value)
<input type="hidden" name="{{$key}}" value="{{$value}}">
@endforeach
</form>

完了画面 – complete.blade.php

Complete

ブラウザから /contact にアクセスしてみます。

入力画面が表示されるので、適当に入力して、確認画面に進むと、入力内容が表示されます。

完了画面への遷移も行えると思います。

これでベースができました。Laravelの機能を使って肉付けしていきます。

バリデーションの実装

バリデーションを実装します。

名前は必須。

メールアドレスは必須で、形式のチェックもしたいですね。

ContactControllerのconfirmメソッドの中身を変更します。

public function confirm(Request $request)
{
    $this->validate($request, [
        'name'  => 'required',
        'email' => 'required|email',
        'message' => 'present',
    ]);

    $contact = new Contact($request->all());

    return view('confirm', compact('contact'));
}

$this->validate()

素晴らしいことに、このメソッドだけで、バリデーションを実施し、要件を満たさなければ、自動で元の画面へ戻します。また、その際に入力内容を復元できるようにしておいてくれます。

それでは、form.blade.phpも編集し、バリデーションエラー時はメッセージを表示するようにし、元の入力内容を復元するようにします。

エラーメッセージは $errors に格納されています。

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


<form action="{{action('ContactController@confirm')}}" method="post">

{{csrf_field()}}

<input type="text" name="name" value="{{old('name')}}">

<input type="text" name="email" value="{{old('email')}}">

<textarea name="message">{{old('message')}}</textarea>

<input type="submit" value="Confirm">
</form>

また、old() は、元の入力内容を取り出してくれます。

それでは、エラーを発生させてみてください。

各種バリデーションの標準エラーメッセージが表示されたかと思います。

なお、バリデーションのもう少し詳しい説明については、以前紹介しているのでそちらをご覧ください。

「入力画面へ戻る」を実装する

確認画面を出した時に大変なのは、「入力画面へ戻る」の実装ですよね。

まずは、ビューに戻るボタンを用意します。

送信ボタンの前にもう一つボタンを用意します。

name属性を、例えば「action」として、valueをそれぞれ、「Back」と「Submit」にしておきます。クリックされた方の値がPOSTされるんですよね、たしか。

<input type="submit" name="action" value="back">

<input type="submit" name="action" value="submit">

あとは、コントローラ側で、クリックされたボタンに応じた処理を実行します。

public function process(Request $request)
{
        // ※要バリデーション

        $action = $request->get('action', 'back');
        // 二つ目は初期値です。

        $input = $request->except('action');
        // そして、入力内容からは取り除いておきます。

        if($action === 'submit') {

            // メール送信処理などを実装

        return view('complete');
        } else {

            // 戻る

            return redirect()->action('ContactController@form')
->withInput($input);
    }
}

これで、戻るボタンを押した場合は、入力内容を保持した入力画面へ遷移するようになります。

そして、入力画面のビューでは、バリデーション実装時にすでに、入力内容を復元するように準備してあるので、そのまま、入力内容が復元されます。

送信ボタンを押せば、そのままこれまで通りに完了画面ですね。

あとは、完了画面表示前に、メール送信なりデータの保存なりを実装するだけですが、次回に詳しくご紹介できればと思います。