前回、簡単なWebアプリを作成した。
elsammit-beginnerblg.hatenablog.com
が、、、やはり、、、
・各会議時間や参加人数を保存おきたい
・後で見返せるようにしたい
と思い、サーバーサイドの作成とDBへの登録を実施したので報告!!
※ソースコードは下記に格納しておりますのでご自由に。
github.com
作成した構成はこんなイメージ。
サーバーサイドとして、"nodejs"を用いました。
また、nodejsのフレームワークとして、expressを用いました。
DBにはsqliteを用いました。
nodejsとは、"サーバサイドで動作するjavascript"のこと。
詳しくは下記をどうぞ！！
eng-entrance.com
後expressのセットアップは下記でお願いします。
qiita.com
で、フォルダ構成はこう。
※今回、複数の変数をサーバーサイドからクライアント側に送信したい関係でejsを用いました。
ejsだと<%= 値 %>でクライアント側に送信できるので便利w
"無駄な会議を撲滅しよう!!"のストップボタンを押下した時のクライアントサイドの処理は下記。
ajaxを用いて、post requestでjsonを送信！！
postで送信しているデータは、、、
・会議で発生した金額(money)
・各役職の参加人数(Manager_num、GL_num、Chief_num、Employee_num)
・各役職の月給(Manager_salary、GL_salary、Chief_salary、Employee_salary)
・会議時間(Meeting_time)
・会議名(Meeting_Name)
にしました。
function sendToServer(){
var send_money = document.form_sw.Meeting_Money.value;
return $.ajax({
url:"http://自分のURL/SendMoney",//phpファイルのURL
type: "post",
data: {"money":send_money,
"Manager_num":document.form_salary.Manager_Num.value,
"GL_num":document.form_salary.GL_Num.value,
"Chief_num":document.form_salary.Chief_Num.value,
"Employee_num":document.form_salary.Employee_Num.value,
"Manager_salary":document.form_salary.Manager_salary.value,
"GL_salary":document.form_salary.GL_salary.value,
"Chief_salary":document.form_salary.Chief_salary.value,
"Employee_salary":document.form_salary.Employee_salary.value,
"Meeting_time":document.form_sw.counter.value,
"Meeting_Name":document.form_sw.Meeting_Name.value
},
dataType: 'text',
success: function(){ // 転送成功時.
console.log("success");
},
error: function (XMLHttpRequest, textStatus, errorThrown) { // 転送失敗時.
console.log("error");
}
})
}サーバーサイド側では、クライアントからのjsonを受け取り、DBに登録するための処理を実行。
req.bodyに受信したjsonデータが格納されているため、各々のデータをDBに登録していく。
app.post('/SendMoney',(req,res)=>{ // フロントエンドからの受信.
Set_MeetingList(req.body.money,req.body.Manager_num,req.body.GL_num,req.body.Chief_num,req.body.Employee_num,req.body.Meeting_time,req.body.Meeting_Name);
var Memsalary = [req.body.Manager_salary,req.body.GL_salary,req.body.Chief_salary,req.body.Employee_salary]; // 役職毎の月給配列(部長、課長、係長、社員の順).
Set_Memsalary(Memsalary); // 役職毎の月給をDBへ保存するための関数コール.
res.end()
});今回はここまで！！
サーバサイドでのDBへの登録については後日記載していきます。
