Ruby + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート : logical　error

Google

<< PHP + MySQL + IFRA… | TOP | Python + MySQL + I… >>

2018年07月16日

Ruby + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート





JavaScript は jQuery を使用します。

テンプレート構造

IFRAME 内の処理( req フォルダ内 )が実際の問い合わせ処理になります。メインページの下部に CSS の calc 関数を使用してフィットさせています。



メインの control.rb( エントリポイント )

更新等を行う場合は、ここに入力値のコントロールが入ります。ここでは画面を表示するだけなので、Ruby を実行する為の基本的な設定と、画面の読み込みを行っています。

Encoding.default_internal='utf-8'
# カレントフォルダを require 参照パスに追加
$:.unshift File.dirname(__FILE__)
require 'cgi'
require 'mysql'
require 'pp'
require 'json'
require 'settings'
require 'model'

txlog( "Script Encoding : " << __ENCODING__.to_s )
txlog( "Default external Encoding : " << Encoding.default_external.to_s )
txlog( "Default internal Encoding : " << Encoding.default_internal.to_s )

# **************************************
# グローバル変数
# **************************************
$error_flg = 0
$error_msg = ""
$base_path = __FILE__

# **************************************
# フィールド参照の定義
# **************************************
$fld_names = {
	"条件" => "nm",
	"送信" => "send"
}

require 'view'

冒頭の Encoding.default_internal='utf-8' は、Ruby にかかわるエンコーディングを utf-8 に揃える為に行っています。( Encoding.default_external はインストール時に設定しています )



▼ デバッグログ
開始
Script Encoding : UTF-8
Default external Encoding : UTF-8
Default internal Encoding : UTF-8

# **************************************
# フィールド参照の定義
# **************************************
$fld_names = {
	"条件" => "nm",
	"送信" => "send"
}

$fld_names は、settings.rb で定義されている forms メソッドと fields メソッドで使用する為のハッシュです。

ソースコード上の呼び名を日本語で定義して、画面(ヒアドキュメント)の INPUT 要素に埋め込んだり、値を参照する為に用意しています。
<input
	data-pass="2i"
	type="text"
	name="#{fields("氏名")}" 
	value="#{forms("氏名")}">

settings.rb ( 共通処理 )

Ruby の cgi としての設定( メソッド定義を含む )と、アプリとしての初期設定と、デバッグ用のログ関数の定義を行っています。この処理は、問い合わせ処理側( req フォルダ内 )からも読み込まれて使用されます。

# ***************************
# 共通処理
# ***************************
$cgi = CGI.new
 
puts "Content-Type: text/html; charset=utf-8"
puts  "Expires: Thu, 19 Nov 1981 08:52:00 GMT"
puts "Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
puts "Pragma: no-cache"
puts
 
$params = $cgi.params


# ここで $params 内の文字列のセキュリティ上の処理


# デバッグログの初期化
File.open("debug.log", "w"){ |f| f.puts "開始" }

# デバッグ用メッセージ
$check_message = "";

# クライアントコントロール
$pass = "1";


# **************************************
# FORM 用変数の参照と設定
# **************************************
def forms( target, setter=nil )

	result = ""

	key = $fld_names[target]

	if not setter.nil? then
		$params[key][0] = setter
		return
	end

	if not $params[key].empty? then
		result = $params[key][0]
	end

	return result

end

# **************************************
# フィールド用文字列の参照
# **************************************
def fields( target )

	return $fld_names[target]

end

# ***************************
# デバッグログ関数(テキスト)
# ***************************
def txlog(message)

	File.open("debug.log", "a"){ |f| f.puts message + "\n" }

end

# ***************************
# デバッグログ関数
# (オブジェクト等)
# ***************************
def pplog(data)

	File.open("debug.log", "a"){ |f| f.puts data.pretty_inspect }

end


以下は、pplog の pretty_inspect で、$cgi.params の結果を表示したものです。
{"nm"=>["川"], "send"=>["問合せ"]}

view.rb ( メイン画面定義 )

画面定義はヒアドキュメントで行っています。変数のパースは #{メソッドまたは変数} です。

JavaScript の外部ファイルの読み込み時のキャッシュ制御を行う為、ページが表示された時間を URL に付加しています。

# **************************************
# js 選択
# **************************************
$js = "entry.js";
#$js = "entry-json.js";

# **************************************
# js キャッシュ用
# **************************************
$tm = Time.now.to_f.to_s.gsub(/[.]/,"")

# **************************************
# 画面定義
# **************************************
$out_client = <<HTML
<!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>

<style>
/* ブロックを左右に表示  */
.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;
}
#extend {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );
	height: calc( 100% - 100px - 2px );
	border: solid 2px #c0c0c0;
}
</style>
</head>
<body>

<div id="head">
	<input type="hidden" value="#{$pass}" id="pass">

	<form method="post" action="req/control.rb" target="extend">
		<p class="ttl">
			氏名検索
		</p>
		<p class="entry">

			<input
				class="ml-4"
				name="#{fields("条件")}"
				id="cond"
				type="text">
			<input
				class="ml-4 iframe-option btn btn-success"
				id="btn"
				name="#{fields("送信")}"
				type="submit"
				value="問合せ">

			<a
				class="ml-4 btn btn-info btn-sm"
				href="#{File.basename($base_path)}"
				title="1:#{ENV["SCRIPT_NAME"]}, 2:#{$cgi.script_name}">GET 再読み込み</a>


		</p>
		<p class="line"></p>

	</form>

	<h4 class="text-danger">#{$check_message}</h4>

</div>

<iframe id="extend" name="extend" src="req/control.rb"></iframe>

</body>
</html>
HTML

print $out_client


※ 画面上のスペーシングに Bootsrtap のクラスである ml-4( margin-left: 1.5rem !important; ) を使用しています。
※ btn btn-success、btn btn-info btn-sm は、ボタン用の Bootsrtap のクラス

entry.js

Bootstrap のボタンの表示位置の調整を行っています。

$(function(){

	// ***************************
	// ボタン表示位置微調整
	// ***************************
	$( ".btn" ).css({
		"margin-top": "-4px"
	});

});


control.rb ( 問い合わせのエントリポイント )

単独で動作する問い合わせアプリケーションです。GET メソッドで QueryString を受け取って内部の SQL 処理に引き渡します。セキュリティ上の文字列の処理は省略しています。

MySQL の処理を行う為に最も容易な Ruby/MySQL を使用しています。

Encoding.default_internal='utf-8'
# カレントフォルダを require 参照パスに追加
$:.unshift File.dirname(__FILE__)
require 'cgi'
require 'mysql'
require 'pp'
require 'json'
require '../settings'
require '../model'

txlog( "Script Encoding : " << __ENCODING__.to_s )
txlog( "Default external Encoding : " << Encoding.default_external.to_s )
txlog( "Default internal Encoding : " << Encoding.default_internal.to_s )

# **************************************
# グローバル変数
# **************************************
$error_flg = 0
$error_msg = ""
$base_path = __FILE__

# **************************************
# フィールド参照の定義
# **************************************
$fld_names = {
	"条件" => "nm"
}

# ***************************
# MySQL 接続
# http://www.tmtm.org/ruby/mysql/
# ***************************
begin
	$con = Mysql.connect("127.0.0.1", "root", "", "lightbox")
rescue => ex
	print "<pre>"
	print format("%d エラーが発生しました\n%s\n",ex.errno,ex.error)
	# 接続エラーの場合は終了
	exit
end

build_table()

# **************************************
# 接続解除
# **************************************
$con.close

require 'view'


view.rb ( 問い合わせ用画面 )

テーブル表示時のカーソルを常にデフォルトに固定して、テーブルのデータが折り返さないように以下の CSS が追加定義されています

table 部分の行データの埋め込み部分に tbody を明示しているのは、行を jQuery で動的に作成した時に tbody が無いと Bootstrap の css が動作しないからです( 他のテンプレートと差異を少なくする為 )。

# **************************************
# js 選択
# **************************************
$js = "entry.js";
#$js = "entry-json.js";

# **************************************
# js キャッシュ用
# **************************************
$tm = Time.now.to_f.to_s.gsub(/[.]/,"")

# **************************************
# 画面定義
# **************************************
$out_client = <<HTML
<!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>

<style>
td {
	cursor: default!important;
	white-space: pre;
}

body {
	margin: 0;
	padding: 16px;
}
</style>
</head>
<body>

	<table class="table table-hover">
		<tbody id="tbl">
			#{$lines}
		</tbody>
	</table>

</body>
</html>
HTML

print $out_client

print pplog( $params )


model.rb ( テーブル作成部分 )

1) 列データの文字列をまずループで作成しています( SQLを変更するだけで違った問い合わせを表現できます )
2) 列データが完成する毎に、行データを作成して全体の文字列に追加していきます。

※ Ruby/MySQL ではデータを取得時に日本語の列名を扱えなかったので、SQL で別名として英字を使用しています

# ***************************
# テーブル表示
# ***************************
def build_table()

	$lines = "";

	sql = <<-SQL
		select
			社員コード as scode,
			氏名 as shimei,
			フリガナ as furi,
			所属 as syozoku,
			性別 as seibetu,
			作成日 as create_date,
			更新日 as update_date,
			給与 as kyuyo,
			手当 as teate,
			管理者 as kanri,
			DATE_FORMAT(生年月日,'%Y/%m/%d') as birthday
		from 社員マスタ
		where 
			氏名 like '%#{forms("条件")}%'
	SQL

	txlog( sql )

	begin
		result = $con.query(sql)

		# 列の名前でタイトル作成
		fields = result.fetch_fields()
		fields.each do |field|
			$lines << "<th>#{field.name}</th>\n"
		end

		result.each do |fld|
			len = fld.length
			cells  = ""
			for data in fld do
				# 文字列追加
				cells << "<td>#{data}</td>"
			end
			# 次の行の為改行( 文字列追加 )
			$lines << "<tr>#{cells}</tr>\n"
		end
	# エラー処理
	rescue => ex
		pplog( ex )
		$check_message = "SQL に問題があります"
	end

end


関連する記事

PHP + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート

Python + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート

CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる

【Ruby 2018の最新記事】

posted by lightbox at 2018-07-16 13:09 | Ruby 2018 |

Seesaa ブログ

	SQLServer の BCP で INT IDENTITY 列に csv からリストアする
	MySQL に PIPES_AS_CONCAT を設定して、CSV を出力する SQL
	Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
	PL/SQL : 最も簡単な CSV 出力の記述
	VBScript を『管理者として実行する』には、Shell の runas ( 右クリックメニューの実行と同等 ) で実現します / Jscript も追加
	fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信
	TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定
	JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
	TCPDF をダウンロードして、フリーフォントを埋め込み型で使用する方法
	汎用型 : JSON データより履歴書のフォームを出力するサンプル
	ChatGPT でトップまでスクロールするブックマークレット
	Replit : cs-list
	Replit : js-web-speech
	Replit : js-csv-read-utf8
	Replit : text-editor
	指定した位置でレジストリエディタを開く為の VBScript をダウンロードします
	JScript / VBScript : 指定したフォルダ内のフォルダ毎の使用済みサイズを読める範囲でレポートする
	デスクトップを部分キャプチャした時に切り取り&スケッチを起動してキャプチャ画像に枠線を付加させる。
	#Zoom の必殺技 : 相手に自分の Zoom 関連のウインドウを見せる
	GAS でユーザ作成 : 組織は "orgUnitPath": "/組織名A/組織名B"

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error

2018年07月16日

Ruby + MySQL + IFRAME + Bootstrap : 問い合せ WEB アプリテンプレート

logical　error