フリーランス　技術調査ブログ

フリーランス/エンジニア　Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

Laravel 問い合わせフォームを作成する②

Laravel

はじめに

  • 以前、作成したLaravel問い合わせフォームの作成の続きです。DB登録処理まで今回は実装する px-wing.hatenablog.com

ルーティングの設定

  • 会員のみアクセスできる問い合わせフォームを作成した場合の指定。
Route::group(['prefix'=> 'contact', 'middleware' => 'auth'], function () {
    Route::get('/index', [ContactFormController::class, 'index'])->name('contact.index');
    Route::get('/create', [ContactFormController::class, 'create'])->name('contact.create');
    Route::post('/store', [ContactFormController::class, 'store'])->name('contact.store');
});

コントローラーの設定

  • お問い合わせフォームで利用するモデルとDBふぁ## はじめに
  • 以前、作成したLaravel問い合わせフォームの作成の続きです。DB登録処理まで今回は実装する px-wing.hatenablog.com

ルーティングの設定

  • 会員のみアクセスできる問い合わせフォームを作成した場合の指定。
Route::group(['prefix'=> 'contact', 'middleware' => 'auth'], function () {
    Route::get('/index', [ContactFormController::class, 'index'])->name('contact.index');
    Route::get('/create', [ContactFormController::class, 'create'])->name('contact.create');
    Route::post('/store', [ContactFormController::class, 'store'])->name('contact.store');
});

コントローラーの設定

  • お問い合わせフォームで利用するモデルとDBファザードを追加する
use App\Models\ContactForm;
use Illuminate\Support\Facades\DB;
  • 一覧画面では登録したされた問い合わせフォームのデータを取得してViewに渡す
    public function index()
    {
        //
        $contacts = DB::table('contact_forms')->select('id','name','subject','created_at')->get();
        return view('contact.index', compact('contacts'));
    }
  • POSTで渡ってきたデータをDBに登録する
    public function store(Request $request)
    {
        //
        $contact = new ContactForm;

        $contact->name = $request->input('name');
        $contact->email = $request->input('email');
        $contact->url = $request->input('url');
        $contact->sex = $request->input('sex');
        $contact->age = $request->input('age');
        $contact->subject = $request->input('subject');
        $contact->description = $request->input('description');
        $contact->save();

        return redirect('contact/index');
    }
  • 全体のコード
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\ContactForm;
use Illuminate\Support\Facades\DB;

class ContactFormController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        $contacts = DB::table('contact_forms')->select('id','name','subject','created_at')->get();
        return view('contact.index', compact('contacts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        return view('contact.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $contact = new ContactForm;

        $contact->name = $request->input('name');
        $contact->email = $request->input('email');
        $contact->url = $request->input('url');
        $contact->sex = $request->input('sex');
        $contact->age = $request->input('age');
        $contact->subject = $request->input('subject');
        $contact->description = $request->input('description');
        $contact->save();

        return redirect('contact/index');
    }

Viewの設定

  • DBに登録されているデータを一覧で表示するためのView
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    <form method="get" action={{ route('contact.create') }}>
                        <button type="submit" class="btn btn-primary">
                            新規登録
                        </button>
                    </form>
                    <table class="table">
                    <thead>
                        <tr>
                        <th scope="col">#</th>
                        <th scope="col">名前</th>
                        <th scope="col">件名</th>
                        <th scope="col">作成日</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($contacts as $contact)
                        <tr>
                            <td>{{$contact->id}}</td>
                            <td>{{$contact->name}}</td>
                            <td>{{$contact->subject}}</td>
                            <td>{{$contact->created_at}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
  • フォーム画面
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
                    
                    {{ __('Createです') }}
                    <form method="POST" action="{{route('contact.store')}}">
                        @csrf
                        氏名<input type="text" name="name"><br>
                        メールアドレス<input type="email" name="email"><br>
                        性別<input type="radio" name="sex" value="0">男性<input type="radio" name="sex" value="1">女性<br>
                        年齢<select name="age">
                            <option value="">選択してください</option>
                            <option value="1">～19歳</option>
                            <option value="2">20～29歳</option>
                            <option value="3">30～39歳</option>
                            <option value="4">40～49歳</option>
                            <option value="5">50～59歳</option>
                            <option value="6">60歳～</option>
                            </select>
                        <br>
                        URL<input type="url" name="url"><br>
                        件名<input type="text" name="subject"><br>
                        お問い合わせ内容<textarea name="description"></textarea><br>
                        <input type="checkbox" name="caution" value="1">注意事項に同意する<br>
                        <input class="btn btn-info" type="submit" value="登録する">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

サンプル画面

  • 一覧画面 f:id:PX-WING:20201020082616p:plain
  • 登録フォーム f:id:PX-WING:20201020082652p:plain

DB登録されていることを確認する

mysql> select * from contact_forms\G
*************************** 1. row ***************************
         id: 1
       name: 山田太郎
      email: yamada.taro@test.com
        url: http://www.yahoo.co.jp
        sex: 0
        age: 5
description: こちらはテストです。
    subject: テスト
 created_at: 2020-10-20 00:14:23
 updated_at: 2020-10-20 00:14:23
*************************** 2. row ***************************
         id: 2
       name: 鈴木一郎
      email: suzuki.ichiro@test.co.jp
        url: http://www.test.com
        sex: 0
        age: 2
description: いいいいい
いいいいいいいいいい
    subject: ああああああ
 created_at: 2020-10-20 00:15:29
 updated_at: 2020-10-20 00:15:29
2 rows in set (0.00 sec)