1
/
5

LaravelのEditとDelete

こんにちは『三度のメシより筋トレとバス釣りが好き!』最近laravelの勉強をしているSCOUTERでフロントエンドエンジニアをしているhirokinishizawaです!
laravel勉強ブログもVersion4.0.0になりました!

前回投稿した記事

前回は釣りの記録を作成する際にデータベースにレコードを追加できるようにしました。なので今回は編集と削除を出来るようにしました!

はじめに

作成したものの動き

トップページの各記録に編集する
削除する
を追加しました

あとレイアウトとして追加したのが

編集ページと

削除する時の確認ページです


やったこと

1.記録を編集できるようにした

2.Requestファイルを使って作成時と編集時のvalidateを一つにまとめた

3.記録を削除できるようにした

記録を編集

web.php

<?php

Route::get('/posts/{post}/edit', 'PostsController@edit');
Route::patch('/posts/{post}', 'PostsController@update');

PostsController.php

<?php

public function edit(Post $post)
{
return view('posts.edit')->with('post', $post);
}

public function update(PostRequest $request, Post $post)
{
$this->validate($request, [
'fish_name' => 'required',
'year' => 'required|integer|between:1990,2018',
'month' => 'required|integer|between:1,12',
'day' => 'required|integer|between:1,31',
'prefecture' => 'required',
'place' => 'required'
]);
$post->fish_name = $request->fish_name;
$post->year = $request->year;
$post->month = $request->month;
$post->day = $request->day;
$post->prefecture = $request->prefecture;
$post->place = $request->place;
$post->save();
return redirect('/');
}

前回の@postのときとほぼ同じです。違うのは引数でpostを受け取るので$post = new Post();
このように新しくPostを作らなくていいところです。

edit.blade.php作成

コード自体は作成ページと編集ページのレイアウト見てもらうとわかると思いますがほぼかわっていません。変わったのはpostではくupdateするためにメソッドにpatchをを使用しました。

編集ページ

@section('content')
<h1>記録編集ページ<a href="{{ url('/') }}" class="header-menu">戻る</a></h1>

<form method="post" action="{{ url('/posts', $post->id) }}">
{{ csrf_field() }}
{{ method_field('patch') }}
<div class="flex-box">
<div class="column">
魚の名前
</div>
<div>
<input type="text" name="fish_name" placeholder="ブラックバス" value="{{old('fish_name', $post->fish_name)}}">
@if($errors->has('fish_name'))
<span class="error">{{ $errors->first('fish_name') }}</span>
@endif
</div>
</div>...

新規作成ページ

@section('content')
<h1>記録を作成する<a href="{{ url('/') }}" class="header-menu">戻る</a></h1>

<form method="post" action="{{ url('/posts') }}">
{{ csrf_field() }}
<div class="flex-box">
<div class="column">
魚の名前
</div>
<div>
<input type="text" name="fish_name" placeholder="ブラックバス" value="{{old('fish_name')}}">
@if($errors->has('fish_name'))
<span class="error">{{ $errors->first('fish_name') }}</span>
@endif
</div>
</div>...

見比べると編集ページの方には{{ method_field('patch')}}
がありますね。これをformタグの中に書くことによりhttpメソッドのpatchが使えるようになって{{ url('/posts') }}にidを渡すことにより上書きできるようになります。

(後で出てくるdeleteでも似たようなことをしています)

Requestファイル使用

前回postする際に書いたvalidateですがeditでも同じ条件でvalidateを掛けたいのですが下のように重複するのはあまり好ましくないのでRequestファイルに共通部分を書きました。

<?php

public function post(PostRequest $request)
{
$this->validate($request, [
'fish_name' => 'required',
'year' => 'required|integer|between:1990,2018',
'month' => 'required|integer|between:1,12',
'day' => 'required|integer|between:1,31',
'prefecture' => 'required',
'place' => 'required'
]);

$post = new Post();
$post->fish_name = $request->fish_name;
$post->year = $request->year;
$post->month = $request->month;
$post->day = $request->day;
$post->prefecture = $request->prefecture;
$post->place = $request->place;
$post->save();
return redirect('/');
}

public function update(PostRequest $request, Post $post)
{
$this->validate($request, [
'fish_name' => 'required',
'year' => 'required|integer|between:1990,2018',
'month' => 'required|integer|between:1,12',
'day' => 'required|integer|between:1,31',
'prefecture' => 'required',
'place' => 'required'
]);

$post->fish_name = $request->fish_name;
$post->year = $request->year;
$post->month = $request->month;
$post->day = $request->day;
$post->prefecture = $request->prefecture;
$post->place = $request->place;
$post->save();
return redirect('/');
}
php artisan make:request PostRequest

こちらのコマンドでApp\Http\Requestsの下にRequestファイルを作成することが出来ます。

<?php
public function rules()
{
return [
'fish_name' => 'required',
'year' => 'required|integer|between:1990,2018',
'month' => 'required|integer|between:1,12',
'day' => 'required|integer|between:1,31',
'prefecture' => 'required',
'place' => 'required'
];
}

public function messages()
{
return [
'fish_name.required' => '魚の名前を入れてください',
'year.required' => '1990年から2018年の間で記入してください',
'month.required' => '1年の中で1月から12月までしかありませんよ',
'day.required' => '1ヶ月の中で1日から31日までしかありませんよ。',
'prefecture.required' => '情報提供してください',
'place.required' => '情報提供してください',
];
}

rules()は名前の通りルールを書いていきます。

下のmessages()はそのルールを破った時にでてくる文章を作ることが出来ます!

前回は文字の変更のやり方が分からなかったのでとても分かりやすく便利だなと思ったRequestファイルでした!

記録を削除

web.php

<?php
Route::get('/posts/delete', 'PostsController@delete')->name('post.delete');
Route::delete('/posts/remove', 'PostsController@remove')->name('post.remove');

削除の方ではnameを使ってみました。nameについては後で説明します。

PostsController.php

<?php

public function delete(Request $request)
{
$post = Post::find($request->id);
return view('posts.delete')->with('post',$post);
}

public function remove(Request $request)
{
$post = Post::find($request->id);
$post->delete();
return redirect('/');
}

delete.blade.php作成

コードはこのようになっています

@extends('layouts.app')

@section('content')
<h1>本当に削除しますか?<a href="{{ url('/') }}" class="header-menu">戻る</a></h1>

<div class="fishing-record">
<div class="flex-box">
<div class="column">魚種</div>
<div class="text">{{ $post->fish_name }}</div>
</div>
<div class="flex-box">
<div class="column">釣った日付</div>
<div class="text">{{ $post->year }}年{{ $post->month }}月{{ $post->day }}日</div>
</div>
<div class="flex-box">
<div class="column">釣った場所</div>
<div class="text">{{ $post->prefecture }}: {{ $post->place }}</div>
</div>
</div>
<form action='{{ route('post.remove') }}' method='post'>
{{ csrf_field() }}
{{ method_field('delete') }}
<input type='hidden' name='id' value='{{ $post->id }}'><br>
<input type='submit' value='削除'>
</form>
@endsection
  • {{ route('post.remove') }}

    先程のweb.phpで使用したname
    はこのようにrouteとして使用することが出来ます
  • {{ method_field('delete') }}

    編集機能のpatchと同じです。httpメソッドを使用できるようにしています。

躓いた点

今回editやdeleteをするのにid毎にそれぞれページ遷移させるのでidを渡さなければいけませんでした。以前作成ページを作った時は作成するボタン(遷移ボタン)を押したら作成ページに飛ぶだけでルーティングはRoute::get('/posts/create' だったので遷移ボタンのコードを書く時はhref="{{ url('/posts/create') }}" とこのような書き方をしました。ですが今回idを渡すのでルーティングはRoute::get('/posts/{post}/edit' 。遷移先のコードはhref="{{ url('/posts/edit', $post->id) }}" とかいたのですが、遷移した先は/posts/edit/1 になってしまいページがないよと言われました。なので別のページ遷移のやり方を調べhref="{{ action('PostsController@edit', $post) }}" という書き方で無事'/posts/1/edit'となりidごとのeditページやdeleteページに遷移することができました! href="{{ action('PostsController@edit', $post) }}" と同様にhref="{{route('post.edit', $post) }}" とnameを決めてrouteで書いても出来ました!というよりこっちの方が一般的みたいです!

終わりに

前回のデータベースを使って記録の更新
に続きちょっとだけ応用したeditとdeleteですが今回調べるにあたりいろいろな人のブログを見たら大体一緒にやってることが多かったので次回は脱初心者に向けてなにかいいネタないか考えたいと思います(勉強するにあたって何をすればいいかわからないのでネタ提供求めますww)

絶賛エンジニアメンバーを募集しております!ぜひ、弊社メンバーと一緒に『最高プルリクを』追い求めましょう!

フロントエンドエンジニア
最新技術で成長業界の波に乗りたいVue.jsフロントエンドエンジニア募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
株式会社ROXXでは一緒に働く仲間を募集しています
1 いいね!
1 いいね!
同じタグの記事
今週のランキング