JavaScript は jQuery を使用します。
テンプレート構造
IFRAME 内の処理( req フォルダ内 )が実際の問い合わせ処理になります。メインページの下部に CSS の calc 関数を使用してフィットさせています。
メインの control.py( エントリポイント )
Python の import は PHP の require( または include ) や Ruby の require と違って モジュールを利用する為のメモリ空間の利用方法が厳格です。PHP の require は、単純にソースコードの外部読みこみで、Ruby の require は、仕様としてライブラリを読み込むようになっているのですが、現実としてソースコードレベルの読み込みと考えて問題は無いようです( グローバル変数がソース間で使用可能 )
Python ではソース間のグローバル変数は存在せず、モジュール内の変数を読みこむ側がいかに参照するかというアプローチになります。これに関してもエントリポイントの開始ソースとその他のソースの場合ではモジュール変数の扱いが微妙に違うので注意が必要です( from モジュール import * の動作 )
from settings import * の * で全ての内容をインポートする方法は、Python では推奨されていませんが、ここでは必ずすべて必要になるテンプレートとしての仕様に基づいて使用しています。
import cgitb
cgitb.enable()
# **************************************
# 共有メソッド
# **************************************
from settings import *
set( "base_name", __file__ )
# **************************************
# CGI 初期処理
# **************************************
cgi_init()
import view
settings.py ( 共通処理 )
Python ではソース単位で必要なモジュールは常に import する必要があります。ただ、最終的に実行単位のメモリ空間では同じモジュールは各ソースで共有されるようです。
単純なグローバル変数が使用できないので、settings モジュールに val デイクショナリを作成しておいて、get/set メソッドで値の操作を可能にしてグローバル変数代わりに使用しています。
settings で定義された変数は、settings 内で定義されている メソッド内で global キーワードを使用して参照可能になります( PHP と類似 )
log と pplog はデバッグ用のメソッドで、テキストフアイルに出力する為に使用します。
import cgi
import sys
import io
import pprint
# **************************************
# デバッグログの初期化
# **************************************
with open('debug.log', 'w') as f:
print("開始",end='\n',file=f)
# **************************************
# グローバル変数
# **************************************
pp = None
# **************************************
# 共有ディクショナリ
# **************************************
val = {}
val["pass"] = "1"
val["check_message"] = ""
val["lines"] = ""
# **************************************
# フォーム用変数
# **************************************
fld_names = {}
form = {}
form_data = {}
# **************************************
# CGI 初期処理
# **************************************
def cgi_init():
global pp
global form
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
print("Content-Type: text/html; charset=utf-8")
print( "Expires: Thu, 19 Nov 1981 08:52:00 GMT" )
print( "Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0" )
print( "Pragma: no-cache" )
print()
pp = pprint.PrettyPrinter(indent=4)
form = cgi.FieldStorage()
# **************************************
# データの整形表示
# **************************************
def print_r(data):
global pp
print("<pre>")
pp.pprint(data)
print("</pre>")
# **************************************
# フォームデータの取得
# **************************************
def forms(target, set_data=None):
global fld_names
global form
if set_data is not None:
form_data[fld_names[target]] = set_data
return
result = ""
if form_data.get(fld_names[target]) is not None:
return( form_data[fld_names[target]] )
if not fld_names[target] not in form:
result = form[fld_names[target]].value
return(result)
# **************************************
# フォームフィールド名取得
# **************************************
def fields(target):
return(fld_names[target])
# **************************************
# フォームフィールドセット設定
# **************************************
def set_field_names( field_set ):
global fld_names
fld_names = field_set
# **************************************
# ディクショナリ : set & get
# **************************************
def set( my_key, my_val ):
global val
val[my_key] = my_val
def get( my_key ):
global val
return( val[my_key] )
# **************************************
# ログ出力
# **************************************
def log( message ):
with open('debug.log', 'a') as f:
print(message,end='\n',file=f)
# **************************************
# ログ出力( pprint )
# **************************************
def pplog( obj ):
with open("debug.log", "a") as f:
pprint.pprint(obj, stream=f)
view.py ( メイン画面定義 )
画面定義は、三重クオート文字列と f-string を使用して PHP のヒアドキュメント的に行っています( 変数のパースは {メソッドまたは変数} です )
JavaScript の外部ファイルの読み込み時のキャッシュ制御を行う為、ページが表示された時間を URL に付加しています。
import os
from settings import *
# **************************************
# js 選択
# **************************************
js = "entry.js";
#js = "entry-json.js";
# **************************************
# js キャッシュ用
# **************************************
from datetime import datetime
tm = datetime.now().strftime("%Y%m%d%H%M%S")
# **************************************
# 画面定義
# **************************************
out_client = f"""<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<script src="{js}?{tm}"></script>
<link rel="stylesheet" href="entry.css?{tm}">
</head>
<body>
<div id="head">
<p class="ttl">
氏名で検索
</p>
<p class="entry">
<input
id="cond"
type="text">
<input
class="ml-4 btn btn-success"
id="btn"
type="button"
value="問合せ">
<a
class="ml-4 btn btn-info btn-sm"
href="{os.path.basename(get("base_name"))}">GET 再読み込み</a>
</p>
<p class="line"></p>
<h4 class="text-danger">{get("check_message")}</h4>
</div>
<iframe id="extend" name="extend" class="iframe-option" src="req/control.py"></iframe>
</body>
</html>"""
print(out_client)
entry.js
1) Bootstrap のボタンの表示位置の調整を行っています。
2) 問い合わせの条件を JavaScript 側で作成して IFRAME の src にセットしています。
$(function(){
// ***************************
// ボタン表示位置微調整
// ***************************
$( ".btn" ).css({
"margin-top": "-4px"
});
// ***************************
// IFRAME に問合せを表示
// ***************************
$( "#btn" ).click(function() {
$("#extend").prop("src","req/control.py?nm=" + encodeURIComponent($("#cond").val()));
});
});
entry.css
Python では、CSS 内に書く記述が一部文字列内でエラーになったので .css として利用しています。
/* ブロックを左右に表示 */
.ttl {
display: inline-block;
width: 150px;
}
.entry {
display: inline-block;
}
.line {
margin-bottom: 0;
}
/* IFRAMEコントロール用 */
html,body {
height: 100%;
}
body {
margin: 0;
}
/* IFRAMEコントロール用 */
#head {
padding: 16px;
width: 100%;
height: 100px;
background-color: #e0e0e0;
}
iframe {
display: block;
margin-left: auto;
margin-right: auto;
width: calc( 100% - 3px );
height: calc( 100% - 100px - 2px );
border: solid 2px #c0c0c0;
}
control.py ( 問い合わせのエントリポイント )
単独で動作する問い合わせアプリケーションです。GET メソッドで QueryString を受け取って内部の SQL 処理に引き渡します。セキュリティ上の文字列の処理は省略しています。
mysql.connector は、Oracle が提供している Connector/Python を使用します( インストールが必要です )
※ autocommit がデフォルトで False なので接続時に True に設定しています
set_field_names メソッドは、settings モジュールで定義されており、画面のフィールド名やフィールド値を参照する為の日本語の定義となります。
sys.path.append('..') は、親フォルダにあるモジュールをインポートするパスをシステムに追加しています。
# **************************************
# 親ディレクトリに参照パス追加
# **************************************
import sys
sys.path.append('..')
# **************************************
# CGI
# **************************************
import cgitb
cgitb.enable()
# **************************************
# MySQL
# **************************************
import mysql.connector
# **************************************
# アプリケーションメソッド
# **************************************
from model import *
# **************************************
# 共有メソッド
# **************************************
from settings import *
set( "base_name", __file__ )
# **************************************
# CGI 初期処理
# **************************************
cgi_init()
# **************************************
# フォームフィールドセット設定
# **************************************
set_field_names( {
"条件" : "nm",
"送信ボタン" : "send"
})
# **************************************
# 接続 / 更新兼用
# **************************************
cnn = mysql.connector.connect(
host='localhost',
port=3306,
db='lightbox',
user='root',
passwd='',
charset="utf8",
autocommit='True')
build_table( cnn )
# **************************************
# 接続解除
# **************************************
cnn.close()
import view
view.py ( 問い合わせ用画面 )
table 部分の行データの埋め込み部分に tbody を明示しているのは、行を jQuery で動的に作成した時に tbody が無いと Bootstrap の css が動作しないからです( 他のテンプレートと差異を少なくする為 )。
一番最後に pplog で、ディクショナリの内容を出力していますが、control.py はエントリポイントなので 変数の参照ができないので、処理の最後として view.py の最後で参照しています( エントリポイントでは、エントリポイントのメモリ空間に最初に使った変数が割り付けられるようです / それ以外の場合は from モジュール import * で直接モジュール変数の参照が可能です )
# **************************************
# 親ディレクトリに参照パス追加
# **************************************
import sys
sys.path.append('..')
#import os
# **************************************
# 共有メソッド
# **************************************
from settings import *
# **************************************
# js 選択
# **************************************
js = "entry.js";
#js = "entry-json.js";
# **************************************
# js キャッシュ用
# **************************************
from datetime import datetime
tm = datetime.now().strftime("%Y%m%d%H%M%S")
# **************************************
# 画面定義
# **************************************
out_client = f"""<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" />
<script src="{js}?{tm}"></script>
<link rel="stylesheet" href="entry.css?{tm}">
</head>
<body>
<table class="table table-hover">
<tbody id="tbl">
{get("lines")}
</tbody>
</table>
</body>
</html>"""
print(out_client)
pplog(fld_names)
pplog(val)
entry.css
テーブル表示時のカーソルを常にデフォルトに固定して、テーブルのデータが折り返さないように以下の CSS が追加定義されています
td,th {
cursor: default!important;
white-space: pre;
}
body {
margin: 0;
padding: 16px;
}
model.py ( テーブル作成部分 )
1) 列データの文字列をまずループで作成しています( SQLを変更するだけで違った問い合わせを表現できます )
2) 列データが完成する毎に、行データを作成して全体の文字列に追加していきます。
3) cnn.cursor(dictionary=True) で、結果をディクショナリ(PHP:連想配列/Ruby:ハッシュ)
import mysql.connector
from settings import *
# ***************************
# テーブル作成
# ***************************
def build_table( cnn ):
cursor = cnn.cursor(dictionary=True)
sql = f"""select
社員コード,
氏名,
フリガナ,
所属,
性別,
作成日,
更新日,
給与,
手当,
管理者,
DATE_FORMAT(生年月日,'%Y/%m/%d') as 生年月日
from 社員マスタ
where 氏名 like '%{forms("条件")}%'"""
# デバッグ
log(sql)
cursor.execute(sql)
lines = ""
for row in cursor:
if lines == "":
# タイトル
for col in row.keys():
lines += f"<th>{col}</th>"
cells = ""
for col in row.values():
if col is None:
cells += f"<td></td>"
else:
cells += f"<td>{col}</td>"
lines += f"<tr>{cells}</tr>"
cursor.close()
set("lines",lines)
関連する記事
Ruby + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート
PHP + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート
CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
▼ HTA(HTML アプリケーション) : pcname-from-stdout.hta
▼ IE11 : pcname-from-stdout.html
▼ IE11 : pcname-from-stdout.html
▼ 証明書の更新について
メールの中に以下のように書かれています
▼ IE11
ドキュメントモードは IE10 で
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
