準備
viewsフォルダの中にhelloフォルダを作成します。
その後hello.ejsをhelloフォルダに移動し、index.ejsに名前を変更します。
hello.jsを以下のように修正します。
routes/hello.js
// 変更前
res.render('hello', data);
// 変更後
res.render('hello/index', data);
レコードの新規作成
以下のファイルを追加します。
views/hello/add.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body class="container">
<header>
<h1 class="display-4">
<%= title %>
</h1>
</header>
<div role="main">
<p><%- content %></p>
<form action="/hello/add" method="post">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="mail">MAIL</label>
<td><input type="text" name="mail" id="mail" class="form-control">
</div>
<div class="form-group">
<label for="age">AGE</label>
<td><input type="number" name="age" id="age" class="form-control">
</div>
<input type="submit" value="作成" class="btn btn-primary">
</form>
</div>
</body>
</html>
次に/addの処理を作成します。
routes/hello.js
const express = require('express');
const router = express.Router();
const sqlite3 = require('sqlite3');
// データベースオブジェクトの取得
const db = new sqlite3.Database('mydb.sqlite3');
router.get('/', (req, res, next) => {
db.serialize(() => {
var rows = "";
db.each("select * from mydata", (err, row) => {
// データベースアクセス完了時の処理
if (!err) {
rows += "<tr><th>" + row.id + "</th><td>" + row.name + "</td><td></tr>";
}
}, (err, count) => {
if (!err){
var data = {
title: 'Hello!',
content: rows // 取得したレコードデータ
};
res.render('hello/index', data);
}
});
});
});
router.get('/add', (req, res, next) => {
var data = {
title: 'Hello/Add',
content: '新しいレコードを入力：'
}
res.render('hello/add', data);
});
router.post('/add', (req, res, next) => {
const nm = req.body.name;
const ml = req.body.mail;
const ag = req.body.age;
db.serialize(() => {
// ?(プレースホルダ)の位置に値が代入されます。
// runはデータベースから取り出す必要のない処理で使います。
db.run('insert into mydata (name, mail, age) values (?, ?, ?)', nm, ml, ag);
});
res.redirect('/hello');
});
module.exports = router;
以下のURLからデータの新規作成ができます。
レコードの表示
helloフォルダに以下のファイルを追加します。
views/hello/show.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body class="container">
<header>
<h1 class="display-4">
<%= title %>
</h1>
</header>
<div role="main">
<p><%- content %></p>
<table class="table">
<tr>
<th>ID</th>
<td><%= mydata.id %></td>
</tr>
<tr>
<th>NAME</th>
<td><%= mydata.name %></td>
</tr>
<tr>
<th>MAIL</th>
<td><%= mydata.mail %></td>
</tr>
<tr>
<th>AGE</th>
<td><%= mydata.age %></td>
</tr>
</table>
</div>
</body>
</html>
hello.jsに以下の処理を追加します。
routes/hello.js
router.get('/show', (req, res, next) => {
const id = req.query.id;
db.serialize(() => {
const q = "select * from mydata where id = ?";
// 第2引数は?に渡す値
db.get(q, [id], (err, row) => {
if (!err) {
var data = {
title: 'Hello/show',
content: 'id = ' + id + ' のレコード：',
mydata: row
}
res.render('hello/show', data);
}
});
});
});
以下のURLにアクセスする事で指定したデータを表示できます。
※id=の後に表示したいデータidを指定します。
レコードの編集
edit.ejsを追加します。
views/hello/edit.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body class="container">
<header>
<h1 class="display-4">
<%= title %>
</h1>
</header>
<div role="main">
<p><%= content %></p>
<form action="/hello/edit" method="post">
<input type="hidden" name="id" value="<%= mydata.id %>">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="form-control" value="<%= mydata.name %>">
</div>
<div class="form-group">
<label for="mail">MAIL</label>
<td><input type="text" name="mail" id="mail" class="form-control" value="<%= mydata.mail %>">
</div>
<div class="form-group">
<label for="age">AGE</label>
<td><input type="number" name="age" id="age" class="form-control" value="<%= mydata.age %>">
</div>
<input type="submit" value="更新" class="btn btn-primary">
</form>
</div>
</body>
</html>
次に処理を追加します。
routes/hello.js
router.get('/edit', (req, res, next) => {
const id = req.query.id;
db.serialize(() => {
const q = "select * from mydata where id = ?";
db.get(q, [id], (err, row) => {
if (!err) {
var data = {
title: 'Hello/edit',
content: 'id = ' + id + ' のレコードを編集：',
mydata: row
}
res.render('hello/edit', data);
}
});
});
});
router.post('/edit', (req, res, next) => {
const id = req.body.id;
const nm = req.body.name;
const ml = req.body.mail;
const ag = req.body.age;
// idはuniqueなので指定したデータ一つだけ変更されます。
const q = "update mydata set name = ?, mail = ?, age = ? where id = ?";
db.serialize(() => {
db.run(q, nm, ml, ag, id);
});
res.redirect('/hello');
});
以下のURLから編集が行えます。
↧