6. フォームを使ったリクエスト

今回の目的

--

・「メモを作成する機能」の送信ボタンを作り送信する

・一覧画面を表示させる

作成機能の処理の流れを確認しよう

・今回の目的に向かってコードを書いていく

メモ作成のルーティングを用意しよう

・app.postを使ってメモ作成用ルーティン作成する。

EX.ルーティングの型を知る

 app.post('/create', (req, res) => {
//
//
})

このように書く 

getとpostとは

getとpostの違いとは

app.get

「画面表示」させる

app.post

データベースの変更

このように覚える

フォームを用意しよう

フォームを作る方法

Ex.

<form action= "/crate" method="post">

<input type="text">

<input type="submit" value="ここを押す">

</form>

このように書く

データベースを変更する方法

app.post('/create', (req, res) => {

//

})

このように書く

まとめ

・HTMLにて作成

・<form></form>タグを作る

・action属性・method属性それぞれルーティングに合わせ指定する

参考：

一覧画面を表示しよう

重要 「画面一覧を表示する処理」の方法

app.post('/create' ,(req, res) => {

//メモを追加する処理

//一覧画面を表示する処理

connection.query(

    'SELECT * FORM items',

    (error, results) => {

      res.render('index.ejs', {items: results});

    }

  };

});

  このように書く

以上を踏まえて演習問題を解く

演習問題

• 作成用のルーティングを作る
• 一覧画面を表示するためのコードを書く
• 作成した画面フォームを完成させる。ただし下記を条件とする

　　-送信先には/createを指定
　　-送信方法にはpostを指定

• フォームを完成させたら作成したボタンを押す。
• 一覧画面を表示させる

 注意点

スペル間違い

半角空け

`メモを追加するルーティング'を今一度チェック

本日はここまでになります。

お疲れ様でした。