削除・編集機能を作ろう
2. 削除ボタンの準備
ルーティングを用意しよう
メモを削除するためのルーティングを用意しましょう。データベースを変更する処理なのでpostを用います。
削除ボタンを用意しよう
各メモごとに削除ボタンを作りましょう。ボタンはフォームで作成します。ルーティングに合わせてフォームのaction属性とmethod属性を指定しましょう。
フォームの使いどころ
前のスライドで説明した通り、削除ボタンはリンクでなくフォームで作成します。postでリクエストする時は入力する項目がなくてもフォームを使うと覚えておきましょう。
リダイレクトしよう
フォーム送信後には一覧画面を表示します。削除機能はデータベースを変更する処理なので、リダイレクトを用いて一覧画面を表示しましょう。
app.js
// メモを削除するルーティングを作成してください
app.post(‘/delete’, (req, res) => {
res.redirect(‘/index’);
});
index.ejs
<!– formタグを追加してください –>
<form action=”/delete” method=”post”>
<input type=”submit” value=”削除”>
</form>
3. 削除するidの受け渡し
削除するidの受け渡し
URLで値を渡そう
メモのidを受け渡すにはURLを利用します。リクエストするURLは/delete/3のようにidを含めるようにし、ルーティングのURLは/delete/:idのように指定します。これでURLに含まれたidを取得できるようになります。/:idの部分をルートパラメータと呼びます。
ルートパラメータを使おう
ルートパラメータを使ってみましょう。また、ルーティングに合わせてフォームの送信先URLにメモのidを含めましょう。
ルートパラメータの値を受け取ろう
req.params.ルートパラメータ名でルートパラメータの値を受け取ることができます。console.logで出力して内容を確認してみましょう。
// ルーティングにルートパラメータを指定してください
app.post(‘/delete/:id’, (req, res) => {
// ルートパラメータで受け取った値を出力してください
console.log(req.params.id);
res.redirect(‘/index’);
});
<div class=”item-menu”>
<!– action属性にitemのidプロパティの値を追加してください –>
<form action=”/delete/<%= item.id %>” method=”post”>
<input type=”submit” value=”削除”>
</form>
</div>
4. DELETEクエリの実行
app.post(‘/delete/:id’, (req, res) => {
// データベースのデータを削除する処理を書いてください
connection.query(
‘DELETE FROM items WHERE id = ?’,
[req.params.id],
(error,results)=>{
res.redirect(‘/index’);
}
);
});
5. メモ更新の準備
ルーティングを作成しよう
一覧画面に編集ボタンを作成し、そのリンクのURLにメモのidを含めるようにします。ルーティングにはルートパラメータを使用してそのメモのidを受け取れるようにしましょう。idは選択されたメモ情報を取得するときに使います。
編集画面を表示できるようにしましょう。
手順は以下の通りです。
①編集画面を表示するルーティングを用意
②編集画面を表示
③ビューファイルを用意
// 編集画面を表示するルーティングを作成してください
app.get(‘/edit/:id’, (req, res) => {
res.render(‘edit.ejs’);
});
6. 選択されたメモの表示
取得結果をEJSに渡そう
クエリの取得結果は件数に関わらず配列になります。配列resultsから1件目の要素を取り出し、edit.ejsにitemプロパティを渡しましょう。
フォームに値を表示しよう
value属性に値を指定すると、フォームに初期値を表示できます。取得したメモの内容をvalue属性に指定しましょう。
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]});
}
);
// 下記のコードを削除してください
});
7. 更新のルーティング
app.js
// メモを更新するルーティングを作成してください
app.post(‘/update/:id’, (req, res) => {
res.redirect(‘/index’);
});
edit.ejs
<!– フォームの送信先とメソッドを指定してください –>
<form action=”/update/<%= item.id %>” method=”post”>
<!– name属性を指定してください –>
<input type=”text” name=”itemName” value=”<%= item.name %>”>
<input type=”submit” value=”更新する”>
</form>
8. 選択されたメモの更新
情報の受け渡し方を確認しよう
ルートパラメータの値はparamsオブジェクトで、フォームの値はbodyオブジェクトで受け取ります。ここでしっかりと復習しておきましょう。
メモを更新しよう
受け取ったidとフォームの値を用いてメモを更新しましょう。クエリに複数の値を入れる時は配列の要素を増やします。配列の要素の順番通りに？に入れることができます。
app.post(‘/update/:id’, (req, res) => {
// 選択されたメモを更新する処理を書いてください
connection.query(
‘UPDATE items SET name = ? WHERE id = ?’,
[req.body.itemName, req.params.id],
(error, results) => {
res.redirect(‘/index’);
}
);
// 以下の一覧画面へリダイレクトする処理を削除してください
});