はじめに
今回は下記メンバーをサイト画面（test.ejs）からDB（MySQL）に登録する際、
IDを連番（1002、1003・・・）で自動生成する方法についてお伝えします。
| ID | 姓 | 名 | クラス |
|---|---|---|---|
| 1001 | キム | ウソク | A |
| キム | シフン | A | |
| ナム | ドヒョン | D | |
| カン | ヒョンス | A |
サイト画面（test.ejs）に入力した情報をDB（MySQL）に登録し、
DB情報を画面（top.ejs）に反映させる方法については下記サイトを参考にさせていただきました。
今回は連番生成に重点をおいているため、
Node.js や DB（MySQL）の設定から始める方は、まずは下記サイトから設定をお願いいたします。
DB（MySQLの作成）
テーブル作成
まずはデータベース（test）内にテーブル（member）を作成します。
続いて、テーブルに下記項目を作成します。
ID：id
姓：last_name
名：first_name
クラス：class
テーブルに情報追加
memberテーブルの項目作成ができたら、「挿入」から1人目の情報を入力し、
「実行」をクリックするとmemberテーブルに情報が追加されます。
ファイルの作成
それぞれのファイルは下記構造で作成します。
.
├─ views
| └─ test.ejs
| └─ top.ejs
│
├─ app.js
.
入力画面（test.ejs）の作成
test.ejs に入力フォームを記載します。
<html>
<body>
<h1>test.ejsです。</h1>
<!--送信フォーム-->
<!--action属性（送信後の遷移場所）-->
<form action="/top" method="post">
<p>姓</p>
<input type="text" name="LastName">
<p>名</p>
<input type="text" name="FirstName">
<p>クラス</p>
<input type="text" name="Class">
<input class="btn" type="submit" value="登録">
</form>
</body>
</html>
app.ejs の作成
'SELECT MAX(id) AS max_id FROM member', でmemberテーブルから
一番大きいIDを取得し、
Id = maxId +1; で取得したIDに +1 して連番を生成します。
//expressを読み込み
const express = require('express');
//expresssを使用するための準備
const app = express();
//MySQLを使うためのインストールしたmysqlを呼び出す
const mysql = require('mysql');
//フォームの値を受け取るために必要な典型文
app.use(express.urlencoded({extended: false}));
//定数connectionに、createConnectionを使って接続するデータベースの情報を格納
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'test'
});
//「localhost:3000/test」にアクセスすると「test.ejs」が表示される。
app.get('/test', (req, res) => {
res.render('test.ejs');
});
//test.ejsから値をデータベースに追加し、top.ejsのページに遷移する記述
app.post('/top', (req, res) => {
//🌼memberテーブルから一番値が大きいIdを取得
connection.query(
'SELECT MAX(id) AS max_id FROM member',
(error, results) => {
if (error) throw error;
const maxId = results[0].max_id;
//🌼取得したidに+1
Id = maxId +1;
//新しく生成したidと、test.ejsで入力した情報をmemberテーブルに追加
connection.query(
'INSERT INTO member(id, last_name, first_name, class) VALUES(?,?,?,?)',
[Id, req.body.LastName, req.body.FirstName, req.body.Class],
(error,results)=>{
//値を追加した状態で、再度データベースの情報を取得し、top.ejsを画面に表示させる。
connection.query(
'SELECT * FROM member',
(error, results) => {
res.render('top.ejs',{memberTable:results});
}
);
}
)
}
)
});
app.listen(3000);
登録完了画面（top.ejs）の作成
最後に、DBから取得した情報を表示させる登録完了画面（top.ejs）を作成します。
<html>
<body>
<h1>top.ejsです。</h1>
<!-- memberテーブルの情報を全て表示 -->
<% memberTable.forEach((member) => { %>
<div>
<p>
<span>ID：<%= member.id %></span>  <!--  は全角スペース -->
<span>名前：<%= member.last_name %></span> <!-- は半角スペース -->
<span><%= member.first_name %></span> 
<span>クラス：<%= member.class %></span>
</p>
</div>
<% }) %>
</body>
</html>
動作確認
ブラウザで localhost:3000/test と入力し、入力画面（test.ejs）を開きます。
続いて、2人目の「キム シフン」さんの情報を入力していきます。
| ID | 姓 | 名 | クラス |
|---|---|---|---|
| 1001 | キム | ウソク | A |
| キム | シフン | A | |
| ナム | ドヒョン | D | |
| カン | ヒョンス | A |
入力ができたら「登録」をクリックします。
すると「キム シフン」さんのIDが連番で生成され、
登録完了画面（top.ejs）にDBの情報が表示されます。
DBでも「キム シフン」さんのIDが連番で生成され、
入力情報がmemberテーブルに追加されていることがわかります。
他のメンバーも入力画面（test.ejs）から情報を入力し、
登録完了画面（top.ejs）とにDB表示されればOKです！
