Laravel5.6 入力画面から完了画面までの流れ

公開日：2018-06-16 更新日：2019-05-13

1. 概要

入力画面、確認画面、完了画面と遷移して、データをDBに登録する簡易データ登録画面を、Laravel の新規プロジェクトの作成から行います。



2. Laravel の新規プロジェクトの作成

cd C:\pleiades\xampp\htdocs
laravel new laravel_sample
http://localhost/laravel_sample/public/ にアクセスすると、デフォルトの画面が表示されます。

3. データベースの作成

mysql -u roor -p
CREATE DATABASE db_sample DEFAULT CHARACTER SET utf8mb4;

4. .env の修正

.env を環境に合わせて変更します。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_sample
DB_USERNAME=root
DB_PASSWORD=root

5. テーブルの作成

テーブル作成に必要な migration を以下のコマンドで作成します。
cd C:\pleiades\xampp\htdocs\laravel_sample
php artisan make:migration create_articles_table

作成された laravel_sample/database/migrations 配下のファイルを修正します。
ファイル名の先頭のタイムスタンプは省略しています。

2番目の引数に 191 を指定します。

create_users_table.php
$table->string('email', 191)->unique();

create_password_resets_table.php
$table->string('email', 191)->index();

「追加」と書いてある行を追加します。
create_articles_table.php抜粋
public function up()
{
  Schema::create('articles', function (Blueprint $table) {
    $table->increments('id');
    $table->string('data1'); //追加
    $table->string('data2'); //追加
    $table->timestamps();
  });
}

以下のコマンドを実行します。
php artisan migrate
成功すると、db_sample のテーブルは以下のようになります。
MariaDB [(none)]> use db_sample;
Database changed
MariaDB [db_sample]> show tables;
+---------------------+
| Tables_in_db_sample |
+---------------------+
| articles            |
| migrations          |
| password_resets     |
| users               |
+---------------------+

5. モデムの作成

php artisan make:model Article

app/Article.php を修正します。「追加」と書いてある行を追加します。
Article.php抜粋
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
  protected $fillable = ['data1', 'data2']; //追加
}

6. ログイン画面の追加

php artisan make:auth
http://localhost/laravel_sample/public/home/ にアクセスすると、ログイン画面になります。
画面右上の Register でユーザ登録を行います。
ユーザ登録を行うと、users テーブルに1レコード追加されます。
パスワードは暗号化されるため、登録時のパスワードを忘れないようにしてください。

7. web.app の修正

routes/web.app の最後に、以下を追加します。
Route::get ('/test'         , 'TestController@input');
Route::post('/test/confirm' , 'TestController@confirm');
Route::post('/test/update'  , 'TestController@update');
Route::get ('/test/complete', 'TestController@complete');

8. コントローラーの作成

php artisan make:controller TestController
app/Http/Controllers/TestController.php が作成されます。

クラスに、use と メソッドを追加します。

TestController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

use App\Article;

class TestController extends Controller
{
  public function __construct()
  {
    $this->middleware('auth');
  }
  
  public function input() {
    return view('input');
  }
  
  public function confirm(Request $request) {
    //入力値の取得
    $article = new Article($request->all());
    
    //入力チェック
    $this->validate($request, [
      'data1' => 'required|max:5|alpha',
      'data2' => 'required|max:5|alpha',
    ]);
    
    //セッションに保存
    $request->session()->put('article', $article);
    
    //ビューの表示
    return view('confirm', compact('article'));
  }
  
  public function update(Request $request) {
    //セッションから取得
    $article = $request->session()->get('article');
    
    //DBの更新
    $article->save();
    
    //ビューの表示
    return redirect('test/complete');
  }
  
  public function complete(Request $request) {
    return view('complete');
  }
}

9. ビューの作成

resources/views 配下に、以下3つのファイルを作成します。

入力画面
input.blade.php
@extends('layouts.app')

@section('content')
<form method="POST" action="{{action('TestController@confirm')}}" >
  @csrf
  <input type="text" name="data1" value="{{ old('data1') }}">
  @foreach ($errors->get('data1') as $errorMsg)
  {{ $errorMsg }}
  @endforeach
  
  <br /><br />
  
  <input type="text" name="data2" value="{{ old('data2') }}">
  @foreach ($errors->get('data2') as $errorMsg)
  {{ $errorMsg }}
  @endforeach
  
  <br />
  
  <input type="submit" value="確認">
</form>

@endsection

確認画面
confirm.blade.php
@extends('layouts.app')

@section('content')
<form method="POST" action="{{action('TestController@update')}}">
  @csrf
  data1：{{$article->data1}}<br />
  data2：{{$article->data2}}<br />
  <input type="submit" value="送信">
</form>
@endsection

完了画面
complete.blade.php
@extends('layouts.app')

@section('content')
完了したよ！
@endsection

10. 実行

http://localhost/laravel_sample/public/test/ にアクセスします。
ログイン画面が出るため、登録したメールアドレスとパスワードでログインします。
あとは入力画面で値を入力して、確認ボタン、送信ボタンをクリックすると、
articles テーブルに入力値が追加されます。

11. 補足

1. レイアウト

@extends('layouts.app') で、
resources/views/layouts/app.blade.php を使用することを宣言しています。
app.blade.php の下の方に、@yield('content') と言う箇所があります。
ここに、作成したビューの @section('content') と @endsection に挟まれた部分が出力されます。

2. 入力チェック

$this->validate() で入力チェックを行っています。
もし入力チェックエラーがあった場合は、自動的に前画面へリダイレクトされます。
前画面に戻った場合、エラーは $errors、前回の入力値は old('data1') のようにして取得できます。


Tag

New Article