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

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

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

はじめに

  • 前回の続きで、問い合わせフォームのデータを編集・削除機能を追加する 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');

    ## 前回の続きで下記のルーティングを設定する
    Route::get('/show/{id}', [ContactFormController::class, 'show'])->name('contact.show');
    Route::get('/edit/{id}', [ContactFormController::class, 'edit'])->name('contact.edit');
    Route::post('/update/{id}', [ContactFormController::class, 'update'])->name('contact.update');
    Route::post('/destroy/{id}', [ContactFormController::class, 'destroy'])->name('contact.destroy');
});

コントローラー

  • updateとdelete処理をコントローラーに追加する
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
        $contact = ContactForm::find($id);
        $sex = $contact->gender === 1 ? '男性' : '女性';
        if ($contact->age === 1) { $age = '~19歳';};
        if ($contact->age === 2) { $age = '20歳~29歳';};
        if ($contact->age === 3) { $age = '30歳~39歳';};
        if ($contact->age === 4) { $age = '40歳~49歳';};
        if ($contact->age === 5) { $age = '50歳~59歳';};
        if ($contact->age === 6) { $age = '60歳~';};
        return view('contact.show', compact('contact','sex','age'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
        $contact = ContactForm::find($id);
        return view('contact.edit', compact('contact'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
        //
        $contact = ContactForm::find($id);

        $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');        
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
        $contact = ContactForm::find($id);
        $contact->delete();
        
        return redirect('contact/index');        
    }

View

  • show用の画面
@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
                    
                    {{ __('SHOWです') }}
                    {{ $contact->name}}
                    {{ $contact->email}}
                    {{ $contact->subject}}
                    {{ $contact->description}}
                    {{ $sex}}
                    {{ $age}}
                    {{ $contact->url}}
                    {{ $contact->created_at}}
                    {{ $contact->updated_at}}
                    <form method="GET" action="{{ route('contact.edit',['id' => $contact->id]) }}">
                        @csrf
                        <input class="btn btn-info" type="submit" value="変更する">
                    </form>

                    <form method="POST" action="{{ route('contact.destroy',['id' => $contact->id]) }}" id="delete_{{ $contact->id }}">
                        @csrf
                    <a href="#" class="btn btn-danger" data-id="{{$contact->id}}" onClick="deleteContact(this)">削除する</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function deleteContact(e){
        console.log(e.dataset.id);

        if (confirm('本当に削除していいですか?')){
            $('#delete_' + e.dataset.id).submit();
        }
    }
</script>

@endsection
  • 上記のViewの画面イメージ f:id:PX-WING:20201021084857p:plain

  • 編集用の画面

@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
                    
                    {{ __('EDITです') }}
                    <form method="POST" action="{{route('contact.update',['id'=> $contact->id])}}">
                        @csrf
                        氏名<input type="text" name="name" value="{{$contact->name}}"><br>
                        メールアドレス<input type="email" name="email" value="{{$contact->email}}"><br>
                        性別<input type="radio" name="sex" value="0" @if($contact->sex === 0) checked @endif>男性<input type="radio" name="sex" value="1" @if($contact->sex === 1) checked @endif>女性<br>
                        年齢<select name="age">
                            <option value="">選択してください</option>
                            <option value="1" @if($contact->age === 1) selected @endif>~19歳</option>
                            <option value="2" @if($contact->age === 2) selected @endif>20~29歳</option>
                            <option value="3" @if($contact->age === 3) selected @endif>30~39歳</option>
                            <option value="4" @if($contact->age === 4) selected @endif>40~49歳</option>
                            <option value="5" @if($contact->age === 5) selected @endif>50~59歳</option>
                            <option value="6" @if($contact->age === 6) selected @endif>60歳~</option>
                            </select>
                        <br>
                        URL<input type="url" name="url" value="{{$contact->url}}"><br>
                        件名<input type="text" name="subject" value="{{$contact->subject}}"><br>
                        お問い合わせ内容<textarea name="description">{{$contact->description}}</textarea><br>
                        <input class="btn btn-info" type="submit" value="更新する">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
  • 上記のViewの画面イメージ f:id:PX-WING:20201021084932p:plain