shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

7.更新のルーティング

 

 

更新処理の流れを確認しよう

目的:フォーム送信と一覧画面をつくる

 

流れを理解する:
  1. 更新用のルーティング作成
  2. 編集用フォームから値を送信
  3. 更新用フォームの完成

 

このように覚える。

 

 

 

更新に必要な情報を確認しよう

 

UPDEATEクエリを覚える


point

フォームの値(name ='指定された値')とメモのid(id = 指定された値)を入力すること


更新のルーティングに必要なクエリ

UPDETE item SET name = '指定された値' WHERE id = 3


このように書く。

 

 

 

ルーティングにルートパラメーターを使おう

 

2、ルートパラメータを使った更新ルーティングを用意する


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

 

このように書く。

 

 

演習問題

上記手順をもう一度確認しよう


メモを更新するルーティングは書けているか

  -
  第2引数に指定するルーティングは
  req resそれぞれの引数をとっているか
  
  -
  一覧画面にリダイレクトするようにコーディング出来ているか

 

EJS

編集画面からのフォーム値を送信できるようになっているか


フォームを送信する値には「input要素にname属性を指定」しているか


<input type="text" name="itemName" value="<%= item.name %>">

 

 

 

今回は以上になります。お疲れ様でした。