16
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

連番を自動生成し、DB(MySQL)に登録しよう!

Posted at

はじめに

今回は下記メンバーをサイト画面(test.ejs)からDB(MySQL)に登録する際、
IDを連番(1002、1003・・・)で自動生成する方法についてお伝えします。

ID クラス
1001 キム ウソク  A
キム シフン  A
ナム ドヒョン D
カン ヒョンス A

image.png

image.png

image.png

サイト画面(test.ejs)に入力した情報をDB(MySQL)に登録し、
DB情報を画面(top.ejs)に反映させる方法については下記サイトを参考にさせていただきました。
今回は連番生成に重点をおいているため、
Node.js や DB(MySQL)の設定から始める方は、まずは下記サイトから設定をお願いいたします。

DB(MySQLの作成)

テーブル作成

まずはデータベース(test)内にテーブル(member)を作成します。

image.png

続いて、テーブルに下記項目を作成します。
 ID:id
 姓:last_name
 名:first_name
 クラス:class

image.png

テーブルに情報追加

memberテーブルの項目作成ができたら、「挿入」から1人目の情報を入力し、
「実行」をクリックするとmemberテーブルに情報が追加されます。

image.png

image.png

ファイルの作成

それぞれのファイルは下記構造で作成します。

.
├─ views
|  └─ test.ejs
|  └─ top.ejs
│  
├─ app.js
.

入力画面(test.ejs)の作成

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 して連番を生成します。

app.js

//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)を作成します。

top.ejs
<html>
  <body>

    <h1>top.ejsです。</h1>

    <!-- memberテーブルの情報を全て表示 -->
    <% memberTable.forEach((member) => { %>
        <div>
            <p>
                <span>ID:<%= member.id %></span>&emsp; <!-- &emsp;は全角スペース -->
                <span>名前:<%= member.last_name %></span>&nbsp; <!-- &nbsp;は半角スペース -->
                <span><%= member.first_name %></span>&emsp;
                <span>クラス:<%= member.class %></span>
            </p>
        </div>
     
    <% }) %>

  </body>
</html>

動作確認

ブラウザで localhost:3000/test と入力し、入力画面(test.ejs)を開きます。

image.png

続いて、2人目の「キム シフン」さんの情報を入力していきます。

ID クラス
1001 キム ウソク  A
キム シフン  A
ナム ドヒョン D
カン ヒョンス A

入力ができたら「登録」をクリックします。

image.png

すると「キム シフン」さんのIDが連番で生成され、
登録完了画面(top.ejs)にDBの情報が表示されます。

image.png

DBでも「キム シフン」さんのIDが連番で生成され、
入力情報がmemberテーブルに追加されていることがわかります。

image.png

他のメンバーも入力画面(test.ejs)から情報を入力し、
登録完了画面(top.ejs)とにDB表示されればOKです!

image.png

image.png

16
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?