６．選択されたメモの表示
メモの内容を表示する流れを確認しよう
point
前選択されたメモの内容を、フォームに表れている状態になっていない。
この状態を改善する。
app.postメソッド・formメソッドを駆使し、メモの編集画面を完成させよう。
メモを取得しよう
取得コードは以下の通り
取得結果をEJSに渡そう
取得結果をEJSに渡す
クエリの取得結果は件数に関わらず配列になるため
Ex.
配列resultsから1件目の要素を取り出し、
edit.ejsにitemプロパティを渡す状態にする
app.get('/edit/:id', (req, res) => {
connection.query(
'SELECT * FROM items WHERE id = ?', [ req.params.id ],
(error,results) => {
res.render('edit.ejs',{item: results[0]});
}
);
このように書く
point
res.render('edit.ejs',{item: results[0]});
results[0] は取引結果の１番目を表す
このように覚える
フォームに値を表示しよう
・フォームに初期値を表示する
条件
- ejsに書くこと
- <form></form>形式で書く
- formの中には'フォームの送信ボタン'も作成すること
- value属性に値を指定する
value属性を指定する場所
取得メモの内容に値を指定する
このように覚える
Ex.フォームに初期値を表示
<form>
<input value="<%= item.name %>" type="text">
<input type="submit" value="YOU更新しちゃいなよ">
</form>
このように書く
これでメモの編集画面を表示させる事に成功しました。おめでとう。
演習問題にて確認作業を行います。
演習問題
app.getメソッドを使う
・query.connectionを使う
・query.connectionの第一引数には、SQLを使ったメモ取得の為のクエリを書く。この時、WHEREidには?を使用する。？に数値をいれるクエリを書くため。指定されたテーブル名も忘れずに。
・query.connectionの第二引数には、配列を指定する。
・query.connectionの第三引数にはクエリ実行後の処理方法を書く。
ただし、引数「error」「results」をそれぞれ持つように設定する。・クエリ実行後の処理（取得結果）をEJSに渡す処理設定をする。
コードの書き方をしっかりと覚えること。
EJSファイルに書き込む内容
・EJSにおいて、input要素にvalue属性を追加する
・value属性には必ず=を用いる。
・value属性に指定する値に関してはダブルクォーテーションを使う。
・value属性には<%= %>を用いる。受け取ったメモの値を指定する。
迷った時は、下部のボタン作成のvalue属性の書き方を参考にする。
今回は以上になります。お疲れ様でした。
