Ｒｅ：ＳＡＬＯＯＮ　＆　ＶＢＡ

Node.js／Oracle版　読書履歴管理システム②

2018年07月23日 22時10分56秒

Node.js／Oracle版　読書履歴管理システムからの続き

■routes/updbook.js =================================
//★1 Expressのライブラリをロード
let express = require('express');
//★2 Routerオブジェクトの作成
let router = express.Router();
/* GET tell page. */
//★3 GETされた時のルート情報を登録する
router.get('/:id', function(req, res, next) {
　 let IsbnNo = req.params.id;
　 let oracledb = require('oracledb');
　 oracledb.getConnection(
　　　{
　　　　　user　　　　　: 'TESTUSER',
　　　　　password　　　: 'TESTPWD',
　　　　　connectString : 'localhost/PDBORCL'
　　　},(err, conn) =＞ {
　　　　　if (err) {
　　　　　　 console.error(err.message);
　　　　　　 return;
　　　　　}
　　　let query = "SELECT booklog.*,to_char(GetDate,'YYYY-MM-DD') GDATE,"
　　　query += "to_char(IssueDate,'YYYY-MM-DD') IDATE,"
　　　query += "to_char(ReadDate,'YYYY-MM-DD') RDATE FROM booklog";
　　　query += " Where ISBN13 = '" + IsbnNo + "'";
　　　　　conn.execute(query,(err, result) =＞ {
　　　　　　 if (err) {
　　　　　　　　console.error(err.message);
　　　　　　　　console.log(query);
　　　　　　　　return;
　　　　　　 }
　　　　　　 res.render('updbook', { books : result.rows });
　　　　　});
　　　});
});
//★5 exportsにrouterを設定
module.exports = router;

■routes/bookupd.js =================================
//★1 Expressのライブラリをロード
let express = require('express');
//★2 Routerオブジェクトの作成
let router = express.Router();
let bodyParser = require('body-parser');
let app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
//★3 POSTで受け取る(formのmethodがpostなので)
router.post('/',(req, res) =＞ {
　 res.setHeader('Content-Type', 'text/plain');
　 let oracledb = require('oracledb');
　 oracledb.getConnection(
　　　{
　　　　　user　　　　　: 'TESTUSER',
　　　　　password　　　: 'TESTPWD',
　　　　　connectString : 'localhost/PDBORCL'
　　　},(err, conn) =＞ {
　　　　　if (err) {
　　　　　　 console.error(err.message);
　　　　　　 return;
　　　　　}
　　　　　let query = "";
　　　　　if (req.body.action == "DEL") {
　　　　　　 // DELETE処理
　　　　　　 query = "DELETE FROM booklog ";
　　　　　} else {
　　　　　　 // UPDATE処理
　　　　　　 query = "UPDATE booklog SET ";
　　　　　　 query += "ISBN10 = '"　　+ req.body.amazonno　+ "',";
　　　　　　 query += "BookName = '"　+ req.body.honmei　　+ "',";
　　　　　　 query += "Author = '"　　+ req.body.sakusya　 + "',";
　　　　　　 query += "Publisher = '" + req.body.honya　　 + "',";
　　　　　　 query += "Genre = '"　　 + req.body.bunrui　　+ "',";
　　　　　　 if (req.body.hakkoubi == "") {
　　　　　　　　query += "IssueDate = NULL,";
　　　　　　 } else {
　　　　　　　　query += "IssueDate = to_date('" + req.body.hakkoubi + "','YYYY-MM-DD'),";
　　　　　　 }
　　　　　　 if (req.body.iritebi == "") {
　　　　　　　　query += "GetDate = NULL,";
　　　　　　 } else {
　　　　　　　　query += "GetDate = to_date('" + req.body.iritebi　 + "','YYYY-MM-DD'),";
　　　　　　 }
　　　　　　　if (req.body.yondahi == "") {
　　　　　　　　query += "ReadDate = NULL,";
　　　　　　 } else {
　　　　　　　　query += "ReadDate = to_date('" + req.body.yondahi　+ "','YYYY-MM-DD'),";
　　　　　　 }
　　　　　　 if (req.body.shoyuu == "true") {
　　　　　　　　query += "Ownership = 1,";
　　　　　　 } else {
　　　　　　　　query += "Ownership = 0,";
　　　　　　 }
　　　　　　 query += "Purchase　　　= "　+ req.body.hondai　　+ ",";
　　　　　　 query += "Library　　　 = '" + req.body.tosyokan　+ "',";
　　　　　　 query += "Overview　　　= '" + req.body.gaiyou　　+ "',";
　　　　　　 query += "Impressions　 = '" + req.body.kansou　　+ "',";
　　　　　　 query += "State　　　　 = '" + req.body.jyokyo　　+ "',";
　　　　　　 query += "CoverImg　　　= '" + req.body.gazoufile + "'";
　　　　　}
　　　　　query += " WHERE ISBN13 = '" + req.body.honno + "'";
　　　　　conn.execute(query,(err, result) =＞ {
　　　　　　 if (err) {
　　　　　　　　console.error(err.message);
　　　　　　　　console.log(query);
　　　　　　　　return;
　　　　　　 }
　　　　　　 try {
　　　　　　　　// COMMIT
　　　　　　　　conn.commit();
　　　　　　 } catch(e) {
　　　　　　　　console.error(e.message);
　　　　　　 }
　　　　　　 //★4 トップページにリダイレクト
　　　　　　 res.redirect('/booklog');
　　　　　})
　　　})
});
//★5 exportsにrouterを設定
module.exports = router;

■views/updbook.ejs =================================
＜!doctype html＞
＜html lang="ja"＞
＜head＞
＜meta charset="utf-8"＞
＜title＞読書履歴更新＜/title＞
＜script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"＞＜/script＞
＜script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"＞＜/script＞
＜script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"＞＜/script＞
＜link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.min.css" /＞
＜script＞
$(function() {
　var userAgent = window.navigator.userAgent.toLowerCase();
　if(userAgent.indexOf('msie') != -1 ||
　　 userAgent.indexOf('trident') != -1 ||
　　 userAgent.indexOf('edge') != -1) {
　　$('#hakkoubi').datepicker({ dateFormat: 'yy-mm-dd' });
　　$('#iritebi').datepicker({ dateFormat: 'yy-mm-dd' });
　　$('#yondahi').datepicker({ dateFormat: 'yy-mm-dd' });
　}
});
＜/script＞
＜style＞
　body{
　　width :1120px ;
　　background-color:#008b00;
　　background:linear-gradient(to right, #008b00, #80ff80);
　　font-family: "メイリオ";
　　font-size:12pt;
　}
　.valueCstr{color:"#000077";font-size:12pt;font-style:normal;text-align="center";}
　.ministr　{color:"#000077";font-size:8pt ;font-style:normal;}
　.inpstr1　{color:"#000077";font-size:11pt;font-style:normal;text-align="center";width:105px;border:none;font-family:"メイリオ";ime-mode: inactive;}
　.inpstr1D {color:"#000077";font-size:11pt;font-style:normal;text-align="center";width:140px;border:none;font-family:"メイリオ";ime-mode: inactive;}
　.inpstr1L {color:"#000077";font-size:12pt;font-style:normal;text-align="left";　width:155px;border:none;font-family:"メイリオ";ime-mode: inactive;}
　.inpstr1R {color:"#000077";font-size:12pt;font-style:normal;　　　　　　　　　　width:70px ;border:none;font-family:"メイリオ";ime-mode: inactive;}
　.inpstr1A {color:"#000077";font-size:12pt;font-style:normal;text-align="left";　width:140px;border:none;font-family:"メイリオ";ime-mode: active;}
　.inpstr2　{color:"#000077";font-size:12pt;font-style:normal;text-align="left";　width:360px;border:none;font-family:"メイリオ";ime-mode: active;}
　.inpstr3　{color:"#000077";font-size:12pt;font-style:normal;text-align="left";　width:620px;border:none;font-family:"メイリオ";ime-mode: active;}
　.inpstr4　{color:"#000077";font-size:12pt;font-style:normal;text-align="left";　width:620px;border:none;font-family:"HGｺﾞｼｯｸM";ime-mode: active;}
　.inpbox　 {color:"#000077";font-size:11pt;font-style:normal;text-align="left";　　　　　　　border:none;font-family:"HGｺﾞｼｯｸM";}
　.selbox　 {color:"#000077";font-size:12pt;font-style:normal;text-align="center";width:80px ;border:none;font-family:"メイリオ";}
　A:　　　　{text-decoration: none }
　A:link　　{color:"#000077"}
　A:active　{color:steelblue}
　A:visited {color:"#000077"}
　A:hover　 {color:steelblue}
＜/style＞
＜script type="text/javascript"＞
　＜!--
　 function check(){
　　 if (document.formU.action.value == "DEL") {
　　　　var msg = "削除してもいいですか？";
　　 } else {
　　　　var msg = "更新してもいいですか？";
　　 }
　　 if (window.confirm(msg)){　　　　　　　　　 // 確認ダイアログを表示
　　　　return true;　// 「OK」時は送信を実行
　　 } else {　　　　 // 「キャンセル」時の処理
　　　　window.alert('キャンセルされました');　　// 警告ダイアログを表示
　　　　return false; // 送信を中止
　　 }
　 };
　 function check2(elm) {　
　　　if (/4000000000/.test(elm.value)) {
　　　　 elm.setCustomValidity('その番号は使えません');
　　　} else {
　　　　 elm.setCustomValidity('');
　　　}
　 };
　// --＞
＜/script＞
＜/head＞
＜body＞
＜% var bookItem = books[0]; %＞
＜form name="formU" method="post" action="/bookupd" onSubmit="return check()"＞
　　＜input type="button" value="一覧に戻る" onClick="location.href='http://localhost:3000/booklog'" style="width: 8%; padding: 6px;"＞
　　＜button type="submit" value="UPD" name="action" style="width: 8%; padding: 6px;"＞更新する＜/button＞
　　＜button type="submit" value="DEL" name="action" style="width: 8%; padding: 6px;"＞削除する＜/button＞
　＜p＞
　＜table border="0" bgcolor="#008b00" align="center" valign="center" width="98%" height="95%"＞
　＜tr valign="top"＞
　　＜td＞
　　＜table width="98%" border="2" align="center" valign="center" bordercolor="#008b00"
　　　　cellspacing="2" cellpadding="2" align="left" style="margin:20px 0px;" bgcolor="#008b00"＞
　　　＜tr height="15px" bgcolor="#FFFFFF" bordercolor="#008b00"＞
　　　＜td bgcolor="#E8FFE0" width="10%" align="center" style="font-size:11pt"＞＜b＞ISBN-13＜font size="1" color="#FF3366"＞※＜/b＞＜/font＞＜/td＞
　　　＜td align="center"＞＜b＞＜%= bookItem[0] %＞＜/b＞
　　　　＜input type="hidden" name="honno" VALUE="＜%= bookItem[0] %＞"＞
　　　＜/td＞
　　　＜td bgcolor="#E8FFE0" width="9%" align="center"＞＜a href="https://www.amazon.co.jp/dp/＜%= bookItem[1] %＞" target="_blank"＞ISBN-10＜/a＞＜font size="1" color="#FF3366"＞＜/td＞
　　　＜td width="14%"＞　＜input id="amazonno" name="amazonno" type="text" class="inpstr1" value="＜%= bookItem[1] %＞" pattern="\d{10}" title="数字10桁" onchange='check2(this);' /＞＜/td＞
　　　＜td bgcolor="#E8FFE0" width="9%" align="center"＞状　　況＜/td＞
　　　＜td＞　＜select name="jyokyo" class="selbox"＞
　　　＜% if (bookItem[14] === '未読') { %＞
　　　　＜option value="未読" selected＞未読＜/option＞
　　　　＜option value="読書中"＞読書中＜/option＞
　　　　＜option value="読了"＞読了＜/option＞
　　　＜% } else if (bookItem[14] === '読書中') { %＞
　　　　＜option value="未読"＞未読＜/option＞
　　　　＜option value="読書中" selected＞読書中＜/option＞
　　　　＜option value="読了"＞読了＜/option＞
　　　＜% } else { %＞
　　　　＜option value="未読"＞未読＜/option＞
　　　　＜option value="読書中"＞読書中＜/option＞
　　　　＜option value="読了" selected＞読了＜/option＞
　　　＜% } %＞
　　　　　＜/select＞＜/td＞
　　　＜td bgcolor="#DDFFEE" width="10%" align="center"＞画　　像＜/td＞
　　　＜td align="left" width="18%"＞　＜input id="gazoufile" name="gazoufile" type="text" class="inpstr1L" value="＜%= bookItem[15] %＞"＞＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#E8FFE0" align="center"＞書　名＜font size="1" color="#FF3366"＞※＜/b＞＜/td＞
　　　＜td colspan="5" align="left"＞　＜input id="honmei" name="honmei" type="text" class="inpstr3" value="＜%= bookItem[2] %＞" required＞＜/td＞
　　　＜td rowspan="8" colspan="2" align="center"＞
　　　　＜% if (bookItem[15] !== "") { %＞
　　　　＜img width="250" src="../images/＜%= bookItem[15] %＞"＞
　　　　＜% } %＞
　　　＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#E8FFE0" align="center"＞著　　者＜/td＞
　　　＜td colspan="3" align="left"＞　＜input id="sakusya" name="sakusya" type="text" class="inpstr2" value="＜%= bookItem[3] %＞"＞＜/td＞
　　　＜td bgcolor="#E8FFE0" align="center"＞ジャンル＜/td＞
　　　＜td align="left"＞　＜input id="bunrui"　name="bunrui"type="text" class="inpstr1A" value="＜%= bookItem[5] %＞"＞＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#E8FFE0" align="center"＞出版社＜/td＞
　　　＜td colspan="5" align="left"＞　＜input id="honya" name="honya" type="text" class="inpstr3" value="＜%= bookItem[4] %＞"＞＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#EEFFDD" align="center"＞発行日＜/td＞
　　　＜td align="center"＞＜input id="hakkoubi" name="hakkoubi" type="date" class="inpstr1D" value="＜%= bookItem[17] %＞" pattern="\d{4}-\d{2}-\d{2}" title="YYYY-MM-DD"＞＜/td＞
　　　＜td bgcolor="#E8FFE0" align="center"＞入手日＜/td＞
　　　＜td align="center"＞＜input id="iritebi" name="iritebi" type="date" class="inpstr1D" value="＜%= bookItem[16] %＞" pattern="\d{4}-\d{2}-\d{2}" title="YYYY-MM-DD"＞＜/td＞
　　　＜td bgcolor="#EEFFDD" align="center"＞読了日＜/td＞
　　　＜td align="center"＞＜input id="yondahi" name="yondahi" type="date" class="inpstr1D" value="＜%= bookItem[18] %＞" pattern="\d{4}-\d{2}-\d{2}" title="YYYY-MM-DD"＞＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#DFDFFF" align="center"＞概　　要＜/td＞
　　　＜td colspan="5" align="left"＞　＜input id="gaiyou" name="gaiyou" type="text" class="inpstr3" value="＜%= bookItem[12] %＞"＞＜/td＞＜/tr＞
　　　＜tr bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#DFDFFF" align="center"＞感　　想＜/td＞
　　　＜td colspan="5" align="center"＞
　　　　＜textarea name="kansou" cols="85" rows="12" class="inpbox"＞＜%= bookItem[13] %＞＜/textarea＞＜/td＞＜/tr＞
　　　＜tr height="15px" bgcolor="#FFFFFF"＞
　　　＜td bgcolor="#E8FFE0" align="center"＞図書館＜/td＞
　　　＜td align="left"＞　＜input id="tosyokan" name="tosyokan" type="text" class="inpstr1A" value="＜%= bookItem[11] %＞"＞＜/td＞
　　　＜td bgcolor="#E8FFE0" align="center"＞所　　有＜/td＞
　　　＜td＞　＜select name="shoyuu" class="selbox"＞
　　　＜% if (bookItem[9] === 1) { %＞
　　　　　　＜option value=true selected＞購入＜/option＞
　　　　　　＜option value=false＞非購入＜/option＞
　　　＜% } else { %＞
　　　　　　＜option value=true＞購入＜/option＞
　　　　　　＜option value=false selected＞非購入＜/option＞
　　　＜% } %＞
　　　　　＜/select＞＜/td＞
　　　＜td bgcolor="#EEFFDD" align="center"＞購入金額＜/td＞
　　　＜td align="left"＞　\ ＜input id="hondai" name="hondai" type="number" class="inpstr1R" value="＜%= bookItem[10] %＞" style="text-align: right;"＞-＜/td＞
　　　＜/tr＞
　　＜/table＞
　　＜/td＞
　＜/tr＞
　＜tr＞
　　＜td align="right"＞
　　＜font class="ministr"＞＜font color="#FF3366"＞※＜/font＞＜font color="#FFFFFF"＞の項目は入力必須項目です。＜/font＞
　　＜/td＞
　＜/tr＞
　＜/table＞
＜/form＞
＜/body＞
＜/html＞