クライアントからサーバーにアクセスしてデータベース、MySQLを操作するクライアントプログラムとサーバー側のプログラムをテストで作ってみた。
接続、取り出しのテストが目的なので、微細なチェック機能や表示の体裁は手抜きしているのと、HTMLとCSSのコードは割愛している。
開発環境
テストとはいえ、少なくてもクライアントからサーバーにアクセスが必須なので
サーバーが必要となる。
サーバー
仮想サーバーを簡単に構築できるXAMPPを使用。
XAMPPのインストールの方法はネット上に多く公開されているので
「XAMPP」等で検索すれば、簡単に見つかるはず。
MySQL
XAMPPをインストールすると同時に、MariaDBがインストールされる。
MariaDBは旧MySQLなので、MySQLだと思って間違いない。
Node.js
サーバー側で動作するJavaScript、Node.jsをインストールする。
Node.jsをインストーすると同時にNPMツールもインストールされる。
NPMはモジュールをインストール時等に必要なツール。
開発フォルダ
開発を進めるフォルダを準備する。
C:\xampp\htdocs直下にmydbSQLフォルダを作る。
必要なモジュールやサーバー側プログラムをここに作る。
先に作成したmydbSQLの直下にWebフォルダを作る。
クライアント側プログラムをここに作る。
開発フォルダ初期化
初期化はnpmツールを使用する。
コマンドプロンプト起動。
カレントフォルダをモジュールをインストールするフォルダにする。
「C:\xampp\htdocs\mydbSQL>」
「npm init」を実行。
数回、問い合わせがあるが
全てEnterで続ければOK。
開発フォルダにモジュールインストール
必要モジュールは「express」と「mysql」だ。
早々、インストールしよう。
コマンドプロンプト起動。
初期化した開発フォルダをカレントフォルダにする。
「C:\xampp\htdocs\mydbSQL>」
「npm install express mysql -s」を実行。
時に何もしなくてOK！！。
モジュールexpressとは？
Node.jsで利用できるWebアプリケーションフレームワーク。
Webアプリケーションとは、インターネット上で利用するサービスを動かすシステム。
モジュールmysqlとは？
Node.jsでMySQLのデータベースを操作するモジュール。
Node.jsを使って簡単にmySQLの操作が可能になる。
サーバー側プログラム
サーバー側プログラムを開発するフォルダ直下に「server.js」ファイルを作る。
「C:\xampp\htdocs\mydbSQL\server.js」
定数やモジュール読み込み
プログラムの最初にコーディングする。
const mysql = require("mysql");
const express = require("express");
const bodyparser = require("body-parser");
const app = express();
const CONSTHOST = "localhost";
const CONSTUSER = "root";
const CONSTDATABASE = "sssproduct";
const CONSTURLYES = "/yes";
const CONSTURLNO = "/no";
const CONSTPORT = 3000;
app.use(bodyparser.json());
app.use(express.static("web"));
各モジュールを読み込む。
プログラム内部で使用する定数を定義。
ミドルウェアを生成。
mySQLに接続
// ************************************************
// mySql接続
// ************************************************
function mySQLconnect()
{
var connection = mysql.createConnection(
{
host : CONSTHOST,
user : CONSTUSER,
database : CONSTDATABASE
});
return(connection);
}
呼ばれる関数なので、取得したオブジェクトを返す。
クライアントから受信
app.postでクライアントから受信する。
SQLを実行 テーブルの内容を返す
// ************************************************
// SQLでテーブルの内容を返す
// ************************************************
app.post(CONSTURLYES,(req,res) =>
{
// MySQL接続
const connection = mySQLconnect();
// sql実行
connection.query(req.body.sql, function (err, rows, fields)
{
// エラー処理
if (err)
{ console.log('err --> ' + err); }
// レコードを返す
res.json(rows);
});
// mysql解放
connection.end();
});
クライアントがURL”/yes”でサーバーに送信してきた。
送信してきたSQLはres.body.sqlで取り出せる。
取り出したテーブルの内容をクライアントに送る。
SQLを実行 テーブルの内容を返さない
// ************************************************
// SQLを実行するが内容は返さない
// ************************************************
app.post(CONSTURLNO,(req,res) =>
{
// MySQL接続
const connection = mySQLconnect();
// sql実行
connection.query(req.body.sql, function (err, rows, fields)
{
// エラー処理
if (err)
{ console.log('err --> ' + err); }
// レコードを返す
res.json(rows);
});
// mysql解放
connection.end();
});
基本的にはテーブルの内容を返す処理と同じである。
アクセスを区別するために分けただけ。
ポートを指定
// ************************************************
// ポート3000でサーバを立てる
// ************************************************
app.listen(CONSTPORT, () => console.log("Listening on port " + CONSTPORT));
このプログラムがサーバーのポート300で待ち受ける。
プログラムを実行
コマンドプロンプトを起動。
server.jsが格納されているディレクトリをカレントにする。
node server.jsをタイプして実行。
サーバーでserver.jsが常駐。
終了はCtrl+C。
クライアント側プログラム
クライアント側プログラムを作成するディレクトリに「index.js」ファイルを作成。
C:\xampp\htdocs\mydbSQL\Web\index.js
定数定義
const ExecuteReaderPath = "/yes"; const ExecuteNonQueryPath = "/no";
プログラム内部で使用する定数を定義。
アクセスするURLを定義している。
テーブルの値を取り出す
// ***************************************************
// 表示ボタンクリック
// ***************************************************
function rcddsp()
{
var sql = sqldsp();
var data = {sql: sql};
fetch(ExecuteReaderPath,
{
method: 'POST',
body: JSON.stringify(data),
headers:
{
'Content-Type': 'application/json'
}
})
.then((res) => res.json())
.then((json) =>
{
const records = json;
tbldsp(records);
})
.catch(error => console.error('Error:', error));
}
HTMLのボタンをクリックしたら動作するファンクション。
sqldsp関数でSQLを生成。
dataオブジェクトのsql:にSQLをセット。
ExecuteReaderPathのURLでサーバーにアクセス。
POSTでbodyにdataオブジェクトをセット。
テーブルの値が戻るのでJSON形式にしHTMLに表示。
テーブルの行を削除
// ***************************************************
// 削除ボタンクリック
// ***************************************************
function rcddel()
{
var sql = sqldel();
var data = {sql: sql};
fetch(ExecuteNonQueryPath,
{
method: 'POST',
body: JSON.stringify(data),
headers:
{
'Content-Type': 'application/json'
}
})
.then((res) => res.json())
.then((json) =>
{
const records = json;
})
.catch(error => console.error('Error:', error));
}
HTMLのボタンをクリックしたら動作するファンクション。
sqldsp関数でSQLを生成。
dataオブジェクトのsql:にSQLをセット。
ExecuteNonQueryPathのURLでサーバーにアクセス。
POSTでbodyにdataオブジェクトをセット。
SQL生成
テーブルの値を取り出すSQL
// ***************************************************
// 表示用sql生成
// ***************************************************
function sqldsp()
{
var sql = ""
sql = sql + "SELECT ";
sql = sql + " TBLPEOPLE_PEOPLEID, ";
sql = sql + " CONCAT(TBLPEOPLE_FAMILYNAMERUBY,TBLPEOPLE_FIRSTNAMERUBY) AS TBLPEOPLE_NAMERUBY, ";
sql = sql + " CONCAT(TBLPEOPLE_FAMILYNAME,TBLPEOPLE_FIRSTNAME) AS TBLPEOPLE_NAME, ";
sql = sql + " TBLPEOPLE_GENDERID, ";
sql = sql + " TBLPEOPLE_BIRTHDAY, ";
sql = sql + " TBLPEOPLE_PREFECTUREID, ";
sql = sql + " TBLPEOPLE_POSTALCODE, ";
sql = sql + " TBLPEOPLE_PHONENUMBER, ";
sql = sql + " TBLPEOPLE_MAILADDRESS ";
sql = sql + " FROM ";
sql = sql + " TBLPEOPLE ";
return(sql);
}
作成したSQLを呼び出し元に返す。
テーブルの行を削除するSQL
// ***************************************************
// レコード削除のsql生成
// ***************************************************
function sqldel()
{
var sql = "";
sql = sql + "DELETE ";
sql = sql + " FROM ";
sql = sql + " TBLPEOPLE ";
sql = sql + " WHERE ";
sql = sql + " TBLPEOPLE_PEOPLEID > 100 ";
return(sql);
}
作成したSQLを呼び出し元に返す。
取得したテーブルの内容をHTMLに表示
// ***************************************************
// テーブルの内容をhtmlに表示
// ***************************************************
function tbldsp(records)
{
var elm = document.getElementById("tbody");
// 子要素を削除
elm.innerHTML = "";
// テーブル見出し
var tblline = "";
tblline = tblline + "<tr>";
tblline = tblline + "<th class='peopleid'>個人コード</th>";
tblline = tblline + "<th class='peoplenameruby'>氏名（フリガナ）</th>";
tblline = tblline + "<th class='peoplename'>氏名（漢字）</th>";
tblline = tblline + "<th class='peoplegenderid'>性別</ht>";
tblline = tblline + "<th class='peoplebirthdsy'>生年月日</th>";
tblline = tblline + "<th class='peopleprefectureid'>県コード</th>";
tblline = tblline + "<th class='peoplepostalcode'>郵便番号</th>";
tblline = tblline + "<th class='peoplephonenumber'>電話番号</th>";
tblline = tblline + "<th class='peoplemailaddress'>メールアドレス</th>";
tblline = tblline + "</tr>";
elm.insertAdjacentHTML('beforeend', tblline);
// レコードを表示
for ( i in records )
{
tblline = "";
tblline = tblline + "<tr>"
tblline = tblline + "<td class='peopleid txr'>" + records[i].TBLPEOPLE_PEOPLEID + "</td>";
tblline = tblline + "<td class='peoplenameruby txl'>" + records[i].TBLPEOPLE_NAMERUBY + "</td>";
tblline = tblline + "<td class='peoplename txl'>" + records[i].TBLPEOPLE_NAME + "</td>";
tblline = tblline + "<td class='peoplegenderid txc'>" + records[i].TBLPEOPLE_GENDERID + "</td>";
tblline = tblline + "<td class='peoplebirthdsy txc'>" + records[i].TBLPEOPLE_BIRTHDAY + "</td>";
tblline = tblline + "<td class='peopleprefectureid txc'>" + records[i].TBLPEOPLE_PREFECTUREID + "</td>";
tblline = tblline + "<td class='peoplepostalcode txc'>" + records[i].TBLPEOPLE_POSTALCODE + "</td>";
tblline = tblline + "<td class='peoplephonenumber txc'>" + records[i].TBLPEOPLE_PHONENUMBER + "</td>";
tblline = tblline + "<td class='peoplemailaddress txl'>" + records[i].TBLPEOPLE_MAILADDRESS + "</td>";
tblline = tblline + "<tr>"
elm.insertAdjacentHTML('beforeend', tblline);
}
}
コメント