과제 관리표를 Node.js와 SQLite로 만든다②

9557 단어 자바스크립트ExpressNode.js
①에 이어 이번에는 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화해 보면 즐거워요.

도움이 되면 다행입니다.
과제 관리표를 Node.js와 SQLite로 만드는 ①
Windows 10 에서 express, nodist, node, yarn

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage