①に続いて今度はDBへの登録画面を作っていきます。

登録画面の作成

まずviewsにDB書き込みフォームとなるwrite.ejsを新規作成します。

中身はこんな感じで必要最低限の項目とDBへの登録ボタンを用意します。

<!DOCTYPE html>
<html>
  <head>
    <title>登録</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
      <h1>新規課題登録</h1>
        <form action="/write" method="POST">
            <table>
                <tr>
                    <th>課題</th>
                    <td>
                        <textarea name="kadai"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>理想の姿</th>
                    <td>
                        <textarea name="risou"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>理想の姿とのギャップ</th>
                    <td>
                        <textarea name="gyappu"></textarea>
                    </td>
                </tr>
                <tr>                
                    <th>解決策</th>
                    <td>
                        <textarea name="kaiketsu"></textarea>
                    </td>
                </tr>
                    <th></th>
                    <td>
                        <button type="submit">投稿</button>
                    </td>
                </tr>
        </table>
        </form>
  </body>
</html>

テキストエリアのサイズ等はお好みでCSSかタグに記述して調整してください。

なおテーブル定義で作成したIDについては自動採番されるので、登録項目には不要です。

次にwrite.ejsで利用するDB登録用のjavascriptをroutesの中にwrite.jsとして新規作成します。

var express = require('express');
var sqlite3 = require('sqlite3');
var router = express.Router();

var db = new sqlite3.Database('./kadai.db');
router.get('/', (req, res, next) => res.render('write'));

router.post('/', (req, res, next) => {
    // 登録内容をフォームから引っこ抜く
    const kadai = req.body.kadai;
    const risou = req.body.risou;
    const gyappu = req.body.gyappu;
    const kaiketsu = req.body.kaiketsu;
 
    // DBに登録する
    db.run(
        'insert into kadaitable (kadai,risou,gyappu,kaiketsu) values (?, ?, ?, ?)',
        kadai,risou,gyappu,kaiketsu,
    );
    // 登録したら一覧に戻る
    res.redirect('/');
});

module.exports = router;

最後に作成したDBをkadaiフォルダに設置したら作成完了です。

完成

npm startを実行してみてください。

http://localhost:3000/
にアクセスし、トップ画面が表示されるはずです。
ここで新規追加をクリックしてみましょう。

登録フォームに遷移出来たら、課題を入力してみましょう。

なお項目のNULLチェックなどは実装していませんので、そのあたり作り込みたい人は是非挑戦してみてください。

試しにこんな内容で登録してみます。

登録を実行してトップページに遷移し、登録内容が表示されれば成功です。

あとはガンガン追加していくだけです。

この状態だとシンプルでちょっとさみしいですが、bootstrapを利用しているので、デザインに凝ったり、色々カスタマイズしてみてはいかがでしょうか？

普段ExcelやWordで使っている簡単なものからWEB化してみると楽しいですよ。

お役に立てば幸いです。