ＳＱＬの窓
<< CSS の calc 関数を… | TOP | Ruby + MySQL + IFR… >>

2018年07月15日


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

 


デモページ


JavaScript は jQuery を使用します。

テンプレート構造

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



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

更新等を行う場合は、ここに入力値のコントロールが入ります。ここでは画面を表示するだけなので、共通処理と画面のみを require_once しています。

※ コメントに # を使用しているのは、Ruby と Python に合わすためです( テンプレート )

<?php
# ***************************
# ソースベースの取り込み
# ***************************
require_once('settings.php');

# ***************************
# 画面定義
# ***************************
require_once('view.php');
?>



settings.php ( 共通処理 )

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

<?php
# ***************************
# 共通処理( UTF8N で保存 )
# ***************************
error_reporting( E_ALL & ~E_NOTICE & ~E_STRICT );
ini_set('display_errors', '1');
ini_set('date.timezone', 'Asia/Tokyo');
ini_set('default_charset', 'utf-8');
session_cache_limiter('nocache');
session_start();
header( "Content-Type: text/html; charset=utf-8" );


foreach( $_REQUEST as $key => $value ) {

	# ここで $_REQUEST 内の(入力された)文字列の処理

}

# ***************************
# デバッグログの初期化
# ***************************
file_put_contents("debug.log", "開始\n" );

# ***************************
# メッセージ
# ***************************
$check_message = "";

# ***************************
# クライアント会話コントロール
# 1 は第一会話
# ***************************
$gpass = "1";

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

	file_put_contents("debug.log", "{$message}\n" , FILE_APPEND );

}

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

	file_put_contents("debug.log", print_r($data, true) , FILE_APPEND );

}
?>



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

画面定義は、PHP の HTML モードでは無くヒアドキュメントで行っています( これも、Ruby と Python に合わす為です )。変数のパースも {} を必ず使用するようにして、Ruby と Python との差異をできるだけ小さくしようとしています。

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

<?php
require_once('view_config.php');

# **************************************
# js キャッシュ用
# **************************************
$tm = mktime();

# **************************************
# 画面定義
# ( Ruby や Python に合わせた画面形式 )
# **************************************
$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="{$view_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: {$view_head_height}px;
	background-color: #e0e0e0;
}
#extend {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: calc( 100% - 3px );
	height: calc( 100% - {$view_head_height}px - 2px );
	border: solid 2px #c0c0c0;
}
</style>
</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="{$_SERVER["PHP_SELF"]}">GET 再読み込み</a>
	</p>
	<p class="line"></p>

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

</div>

<iframe id="extend" name="extend" class="iframe-option" src="req/control.php"></iframe>

</body>
</html>
HTML;

print $out_client;


?>


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

view_config.php ( 画面用定数の定義 )

PHP の変数を使用して、画面に必要な文字列や数値を定義しています。

<?php
# ***************************
# 画面に埋め込む定数用変数
# ***************************
$view_js = "entry.js";

$view_head_height = "100";


?>



entry.js

1) Bootstrap のボタンの表示位置の調整を行っています。
2) 問い合わせの条件を JavaScript 側で作成して IFRAME の src にセットしています。

// ロードイベント
$(function(){

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

	// ***************************
	// IFRAME に問合せを表示
	// ***************************
	$( "#btn" ).click(function() {
		$("#extend").prop("src","req/control.php?nm=" + encodeURIComponent($("#cond").val()));
	});

});



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

単独で動作する問い合わせアプリケーションです。GET メソッドで QueryString を受け取って内部の SQL 処理に引き渡すので、real_escape_string でエスケープして専用の連想配列を作成しています。( オリジナルはそのままです )

データベースの接続に必要な値は、include_path に設定されたディレクトリに config.php を作成してセットします

<?php
$host = "MySQLサーバ";
$user = "ユーザ";
$pass = "パスワード";
$db = "データベース";
?>



<?php
# ***************************
# ソースベースの取り込み
# ***************************
require_once('../settings.php');
require_once('../model.php');
require_once('config.php');

# ***************************
# MySQL 接続
# ***************************
$con = @new mysqli($host, $user, $pass, $db);
$con->set_charset("utf8");

# ***************************
# MySQL 用特殊文字エスケープ
# ***************************
foreach( $_REQUEST as $key => $value ) {
	$_REQUEST["db"][$key] = $con->real_escape_string($value);
}

# ***************************
# テーブル表示
# ***************************
build_table($con);

# ***************************
# MySQL 接続解除
# ***************************
$con->close();

# ***************************
# 画面定義
# ***************************
require_once('view.php');
?>



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

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

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

td,th {
	cursor: default!important;
	white-space: pre;
}



<?php
require_once('view_config.php');

# **************************************
# js キャッシュ用
# **************************************
$tm = mktime();

# **************************************
# 画面定義
# ( Ruby や Python に合わせた画面形式 )
# **************************************
$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="{$view_js}?{$tm}"></script>

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

body {
	margin: 0;
	padding: 16px;
}

#tbl {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

</style>
</head>
<body>

	<table class="table table-hover">
		<tbody id="tbl">
			{$GLOBALS['table']}
		</tbody">
	</table>

</body>
</html>
HTML;

print $out_client;

?>



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

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

<?php
# ***************************
# モデル用関数を定義する
# ***************************

# ***************************
# テーブル表示
# ***************************
function build_table($con) {

	// デバッグ用
	txlog( "build_table:開始" );
	pplog( $con );

	// TR 内の HTML 文字列
	$lines = "";
	$sql= <<<SQL
		select 
			社員コード,
			氏名,
			フリガナ,
			所属,
			性別,
			作成日,
			更新日,
			給与,
			手当,
			管理者,
			DATE_FORMAT(生年月日,'%Y/%m/%d') as 生年月日
		from 社員マスタ
		where 氏名 like '%{$_REQUEST["db"]["nm"]}%'
SQL;

	$rs = $con->query($sql);	// エラー処理省略(本当は必要)
	//  デバッグ用
	pplog( $rs );

	// 列情報を取得( タイトル用 )
	$fields_data = $rs->fetch_fields();
	foreach( $fields_data as $field ){
		$lines .= "<th>{$field->name}</th>";
	}

	// 列データを取得
	while( $row = $rs->fetch_array(MYSQLI_BOTH) ) {
	
		$cells  = "";
		for( $i = 0; $i < $rs->field_count; $i++ ) {
			$cells .= "<td>{$row[$i]}</td>";
		}
	
		$lines .= "<tr>{$cells}</tr>" . "\n";
	}

	// 埋め込み用グローバル変数へセット	
	$GLOBALS['table'] = $lines;

	//  デバッグ用
	txlog( "build_table:終了" );

}

?>



関連する記事

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

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

CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
【PHP + WEBアプリの最新記事】
posted by lightbox at 2018-07-15 12:27 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり