更新処理の流れを確認しよう
目的：フォーム送信と一覧画面をつくる
流れを理解する：
- 更新用のルーティング作成
- 編集用フォームから値を送信
- 更新用フォームの完成
このように覚える。
更新に必要な情報を確認しよう
UPDEATEクエリを覚える
point
フォームの値（name ='指定された値'）とメモのid（id = 指定された値）を入力すること
更新のルーティングに必要なクエリ
UPDETE item SET name = '指定された値' WHERE id = 3
このように書く。
ルーティングにルートパラメーターを使おう
２、ルートパラメータを使った更新ルーティングを用意する
EJSとJSを使用する
EJS
<form>を用いる
--
<form action="/update/<%=item.id%>" method="post">
</form>
JS
--
app.post('/update/:id', (req, res) => {
res.redirect('/index');
});
このように書く。
フォームの値を送信しよう
point
name属性(name="itemName")を追加後、フォームの値を送信
EJS
<form action="/update/<%=item.id %>" method="post"> ←フォームの送信先及びメソッドの指定
<input name="itemName" value=" ..."type="...">
js
app.post('/update/:id', (req, res) => {
res.redirect('/index');
});
このように書く。
演習問題
上記手順をもう一度確認しよう
メモを更新するルーティングは書けているか
-
第２引数に指定するルーティングは
req resそれぞれの引数をとっているか
-
一覧画面にリダイレクトするようにコーディング出来ているか
EJS
編集画面からのフォーム値を送信できるようになっているか
フォームを送信する値には「input要素にname属性を指定」しているか
<input type="text" name="itemName" value="<%= item.name %>">
今回は以上になります。お疲れ様でした。