課題管理表をNode.jsとSQLiteで作る②

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

## 登録画面の作成

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

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

```html
<!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として新規作成します。

```javascript
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/
にアクセスし、トップ画面が表示されるはずです。
ここで新規追加をクリックしてみましょう。
![kadai1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620300/913d71f4-c168-858f-2392-1dbd998f924b.png)

登録フォームに遷移出来たら、課題を入力してみましょう。
![kadai2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620300/c0eb3a83-b16a-0bab-645b-ca61a3811150.png)


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

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

![kadai3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620300/abfe7914-fa00-5855-bc35-e8be41f0c6c4.png)


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

![kadai4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620300/380dc3b9-50c9-1cbb-8ba9-fca440331e40.png)

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

![kadai5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620300/2d8f42dd-cb45-51ae-a5a7-37cd7ed25fb7.png)

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

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

お役に立てば幸いです。