16編集機能を実装する
編集機能ですが以下の流れで実装していきます。
- 編集ボタンをクリック
- 編集ページに移動
- 編集ページでテキストを編集し、編集完了ボタンをクリック
- DBが上書きされる
まずは編集ボタンがクリックされると編集ページに移動する処理を書いていきましょう。
resource/viewsの中に新しくedit.blade.phpを作成し以下のコードをコピペしてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>メモ帳|編集</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div class="container">
<div class="memo_area">
<div class="memo_form">
<h2>メモを編集</h2>
<form>
@csrf
<input class="memo_text" type="text" name="edit_memo" value="">
<input type="submit" value="追加">
</form>
</div>
</div>
</div>
</body>
</html>home.blade.phpを編集
<div class="edit_form">
<form action="{{ asset('/edit/'.$memo->id) }}" method="get">
@csrf
<input type="submit" value="編集">
</form>
</div>web.php
Route::get('edit/{edit_id}', 'App\\Http\\Controllers\\MemoController@getEdit');MemoController.php
public function getEdit($edit_id)
{
return view('edit');
}ではページを読み込んで編集ボタンをクリックしてみましょう。
無事に編集画面に遷移することができました！
ここまでのコードを解説します。
まずはhome.blade.phpについてです。
action="{{ asset('/edit/'.$memo->id) }}"この部分ですが、action属性に「/edit/メモのid」というURLを指定しています。
‘/edit/’という文字列と$memo→idでえられるidを「.」で文字列結合しています。
実際にURLを見てみましょう。
デベロッパーツールからURLを確認してみましょう。
「localhost:800/edit/3」というURLになっていますね。
続いてルートファイルの'edit/{edit_id}’この部分についてです。
先ほどしたURLは/edit/の部分は定数ですが、後ろのメモのidの部分は変数になっています。
ルートでは変数を受け取ることができます。コードにもある通り、{edit_id}と記述するとコントローラで$edit_idとして使うことができます。
続いて、コントローラです。
public function getEdit($edit_id)メソッドの引数に$edit_idを入れることで、ルートで設定された変数を受け取ることができます。
現状ではテキストボックスに編集したいメモの内容が入っていないので、次はテキストボックスにメモの中身を表示させましょう。
MemoControllerのgetEditメソッドに以下のコードを追記してください。
public function getEdit($edit_id)
{
$memo_info = Memo::find($edit_id); // 追記
return view('edit')
->with('memo_info', $memo_info); // 追記
}edit.blade.php
<form action="{{asset('/update')}}" method="post">
@csrf
<input type="hidden" name="edit_id" value="{{$memo_info->id}}">
<input class="memo_text" type="text" name="edit_memo" value="{{$memo_info->content}}"> // 編集
<input type="submit" value="追加">
</form>先ほど説明した通り、コントローラでpublic function getEdit($edit_id)メソッドの引数に$edit_idを入れることで、ルートで設定された変数を受け取ることができます。
受け取った$edit_id を用いて対象のメモ情報を取得します。
$memo_info = Memo::find($edit_id);この部分でfind()メソッドを用いて対象のメモ情報を取得しています。
その後、取得した情報を->with('memo_info', $memo_info);でedit.blade.phpに送信しています。
続いてブレードファイルの説明です。
追記したのは以下の部分です。
<input class="memo_text" type="text" name="edit_memo" value="{{$memo_info->content}}">テキストボックスに初期入力したい場合は、inputタグのvalue属性に初期入力したい値を設定します。
今回テキストボックスに表示させたいのはメモの内容なので、コントローラから送信された$memo_infoの中に入っているメモ内容を設定します。具体的には$memo_info→contentで取得できます。
それでは画面を読み込んでメモの編集ボタンをクリックしましょう。
無事にメモ内容が入っていますね！
次は更新処理です。
ここでは、編集された内容を受け取り、テーブルをアップデートする処理を書いていきましょう。
以下のコードを追記してください。
web.php
Route::post('update', 'App\\Http\\Controllers\\MemoController@postEdit');MemoController.php
public function postEdit(Request $request)
{
$edit_id = $request->edit_id;
$edit_memo = $request->edit_memo;
Memo::where('id', $edit_id)->update(['content' => $edit_memo]);
return self::show();
}メソッドを新たに１つ追加しました。
updateのURLにpost通信でアクセスされると実行されるメソッドです。
edit.blade.phpで<form action="{{asset('/update')}}" method="post">とupdateにデータを送信するように設定しているので、postEditが実行されます。
postEditメソッドでは、まず、
$edit_id = $request->edit_id;
$edit_memo = $request->edit_memo;この部分でフォームから取得した、メモのidと編集後のメモ内容を取得し、それぞれ「$edit_id」「$edit_memo」という変数に格納しています。
続いて、Memo::where('id', $edit_id)->update(['content' => $edit_memo]);この部分についてです。
whereメソッドは、SQLのWHERE句のことです。第一引数にカラム名、第二引数に値を設定することで絞り込むことができます。
今回はwhere('id', $edit_id)になっているので、idが$edit_idのレコードを絞り込んでいます。
その後、updataメソッドで、カラムを上書きしています。
updateメソッドは、引数に連想配列でデータを渡すことで、対象のカラムを上書きできます。
updata(
[
'カラム名' => '上書きしたいデータ',
'カラム名２' => '上書きしたいデータ２',
]
)今回は、contentというカラムを上書きしたいのでupdataメソッドの引数は['content' => $edit_memo]にしています。
今回はupdateメソッドを使用していますが、データの更新にsaveメソッドを用いることもできます。
コメントを残す