SQLの窓

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;
}

</style>
</head>
<body>

	<table class="table table-hover">
		<tbody id="tbl">
			{$GLOBALS['table']}
		<tbody id="tbl">
	</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 アプリテンプレート

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




posted by lightbox at 2018-07-15 12:27 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

2017年05月19日


Windows で Laravel を試す際、PHP の Windows バージョンが 5.6.30 なので、Laravel 5.2 をインストールします

おそらくは、5.4 でも動作するのでは無いかと思いますが、世の中の情報がそれほど最新に対応してるわけでも無く、最新だと、ルーティングするファイルも違うので Laravel 5.2 でテストを行いました。

Laravel 5.2 公式ページ(英文)
バージョン対象PHP バージョンBladeテンプレートルーティングリリース
5.4PHP >= 5.6.4OKroutes/web.php2017/1/24
5.3PHP >= 5.6.4OKroutes/web.php2016/8/23
5.2PHP >= 5.5.9OKapp/Http/routes.php2015/12/21
5.1PHP >= 5.5.9OKapp/Http/routes.php2015/6/9
5.07 > PHP >= 5.4なしapp/Http/routes.php2015/2/4
Laravel 5.2 日本語ドキュメントページ

composer global ... による Laravel のインストール

試してみましたが、これは最新の Larvel がインストールされるため、laravel new ... でプロジェクトを作成する方法はできません。以下のように Composer で行う必要があります。
composer create-project --prefer-dist laravel/laravel プロジェクト名 "5.2.*"
※ プロジェクト名は英数字 上記コマンドは長いので、以下のようなバッチファイルにして php がインストールされているフォルダに保存するといいでしょう ( Composer のインストールで、php インストールフォルダにパスが通っているはずなので )
@echo off
composer create-project --prefer-dist laravel/laravel %1 "5.2.*"

※ laravelx.bat だとすると、laravelx プロジェクト名 で実行できます

それ以降は、一般的な情報通りに、プロジェクトディレクトリでコマンドプロンプトを開いて、以下のコマンドを実行します。
php artisan serve
※ Larvel のインストールされたバージョンの確認は、php artisan -V で確認 ※ Composer のインストールで、PHP のディレクトリが検索パスに追加されています Larvel 5.2 のドキュメントでは、php artisan serve の記述がなくなっていますが、5.3 では復活しています。5.3 では、Homestead も使えますよと一行だけ書かれていますが、Homestead が主流にはなりえなかったのでしょう。 関連する記事 Laravel を試す為に Windows に Composer をインストール
タグ:PHP Laravel
posted by lightbox at 2017-05-19 09:34 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

2017年05月09日


Laravel を試す為に Windows に Composer をインストール

Composer をインストールする

ちゃんと、『プログラムと機能』に登録されるのをインストール後に確認して下さい。



ダウンロード

ダウンロードは、Dependency Manager for PHP からダウンロードボタンをクリックして Composer-Setup.exe よりダウンロードします。



インストール事前チェック

インストーラを実行前に、php の場所を確認して、php.ini の extension=php_openssl.dll を有効にしておいてください。





インストール後チェック

インストール終了すると、システム用パス環境変数の最後にインストール場所が追加されているので確認して下さい。(後々の都合上、php のパスも登録されるので、既に登録している場合はどちらかを削除するといいです)

ユーザのほうにも登録されますが、vendor\bin というフォルダは最初は存在しません。しかし、Conposer でインストールした Laravel がここにインストールされる予定(最新版しかここには登録できないようなので、Laravel のインストールは毎回 Conposer を使うしかありません)です。

※ pathx コマンドはこちらを参照して下さい



C:\ProgramData\ComposerSetup\bin にインストールされ、composer.bat と composer.phar と composer という3つのファイルが保存され、composer.bat が windows から呼び出されます。

最終確認

コマンドプロンプトを開いて、composer と入力して以下のようになれば OK です



関連する記事

Windows で Laravel を試す際、PHP の Windows バージョンが 5.6.30 なので、Larvel 5.2 をインストールします




タグ:PHP Laravel Conposer
posted by lightbox at 2017-05-09 21:50 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

2016年11月05日


スマホ対応、サーバインデックス表示パッケージ( jQuery + Bootstrap(css) + mmenu + PHP )



 

こちらからアクセスできます



左は通常のログイン前の表示で、右はログイン後の表示です。ログイン後は、フォルダから下の全てのファイルを zip 書庫でダウンロード可能になります。また、下部のパスが、ドキュメントルートからの表示になります。( logout と入力するとログアウトされます )

インストールは、好きな場所に保存して、このインデックスを表示したい最上位フォルダに .htaccess を置いて
DirectoryIndex /toolbox/data2/index/files.php
のように、保存したパスを DirectoryIndex で指定するだけです
実行するカレントフォルダは保存した場所となりますが、呼び出されるのは各フォルダから呼び出されるので、$_SERVER['REQUEST_URI'] となり、その場所を使ってフォルダ・ファィルの一覧を表示しています。
files.php ログインパスワードは、files.php に以下のように指定します
<?php
session_cache_limiter('nocache');
session_start();
$GLOBALS['pass'] = 'パスワード';

require_once("view_main.php");
?>


session_cache_limiter('nocache') は、キャッシュを使用しないヘッダをブラウザに返すようにする処理です。

セッションを使ったログインの処理は、new FormData() で作成した FormData オブジェクトを使用して、jQuery の $.ajax で呼び出しています。

戻りの JSON オブジェクトは、json_encode($_POST) によって、view_main.php が返しています。そして、ログインが成功したら、location.reload(true) でページをリロードしてセッションの処理を有効化します。

view_main.php
<?php
// REQUEST_URI は呼び出し元のパス
$GLOBALS['path'] = explode("?", $_SERVER['REQUEST_URI']);
require_once("download.php");

// *************************************
// フォルダ内を全て zip でダウンロード
// *************************************
if ( $_GET['download'] != "" ) {
	if ( $_SESSION['login'] == 'yes' ) {
		$result = download();
	}
	else {
		header( "Content-Type: text/html; charset=utf-8" );
		print "ログインされていません";
	}
	exit();
}

// *************************************
// ログイン処理
// 1) ダウンロード可能
// 2)パスを DOCUMENT_ROOT で表示
// *************************************
if ( $_GET['login'] == "yes" ) {
	header( "Content-Type: application/json; charset=utf-8" );
	if ( $_POST['pass'] == $GLOBALS['pass'] && $GLOBALS['pass'] != "" ) {
		$_SESSION['login'] = 'yes';
		$_POST['login'] = 'yes';
	}
	else {
		// ログアウト
		if ( $_POST['pass'] == 'logout' ) {
			// セッションをクリア
			$_SESSION = array();
			$_POST['login'] = 'logout';
		}
		else {
			$_POST['login'] = 'no';
		}
	}
	// ブラウザへ JSON 文字列で結果を返す
	print json_encode($_POST);
	exit();
}

header( "Content-Type: text/html; charset=utf-8" );

// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "インデックス";
$GLOBALS['comment'] = $_SERVER['DOCUMENT_ROOT'] . rtrim($GLOBALS['path'][0],"/");
$GLOBALS['root_script'] = "files.php";

// 表示するファイルの一覧は DOCUMENT_ROOT + REQUEST_URI
$handle = @opendir($GLOBALS['comment']);
$files = array();	// 全ての一覧をソートしたものが入る
$files2 = array();	// ファイルのみが入る
while( $target = readdir( $handle ) ) {
	$files[] = $target;
}
sort($files);
foreach ( $files as $file ) {

	// 対象外は読み飛ばし
	if ( $file == '.' || $file == '..' ) {
		continue;
	}
	if ( $file == ".htaccess" ) {
		continue;
	}
	// フォルダ
	if ( is_dir($GLOBALS['comment'] . "/" .$file) ) {

		// ダウンロード用のフォルダパス
		$path = urlencode($_SERVER['REQUEST_URI']);

		if ( $_SESSION['login'] == 'yes' ) {
			$GLOBALS["data"] .= <<< FILES

				<tr>
					<td><a class="link" href="./{$file}/">[{$file}]</a></td>
					<td></td>
					<td><a class="link" href="./?download={$file}">ダウンロード</a></td>
				</tr>

FILES;
		}
		else {
			$GLOBALS["data"] .= <<< FILES

				<tr>
					<td><a class="link" href="./{$file}/">[{$file}]</a></td>
					<td></td>
					<td></td>
				</tr>

FILES;
		}
	}
	else {
		$files2[] = $file;
	}
}

// ファイルのタイプの取得用
$finfo = finfo_open(FILEINFO_MIME_TYPE);
foreach ( $files2 as $file ) {

	$size = filesize($GLOBALS['comment'] . "/" . $file);
	$type = finfo_file($finfo, $GLOBALS['comment'] . "/" . $file);

	// urlencode されたファイル名の対応(元々は日本語ファイル名)
	$file_e = urlencode($file);

	// ファイル一覧用 HTML
	$GLOBALS["data"] .= <<< FILES

			<tr>
				<td><a href="{$file_e}">{$file}</a></td>
				<td>{$size}</td>
				<td>{$type}</td>
			</tr>

FILES;

}
finfo_close($finfo);



?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title><?= $GLOBALS['title'] ?></title>

<?php require_once("std/libs.php") ?>

<?php require_once("std/css.php") ?>

<style>
legend {
	font-size: 18px;
	padding-left: 6px;
}

.table-responsive td, .table-responsive th {
	white-space: nowrap;
}

#data {
	margin-bottom: 20px;
}
#comment {
	word-break: break-all;
}

#pass {
	padding: 20px;
	margin: 40px;
}
#system {
	width: 200px;
	margin-right: 8px;
}
</style>

<script>
<?php require_once("std/js.php") ?>

$(function(){

	// スマホでロード時の処理のチラつき防止用
	$("#wrapper").css("visibility","visible");

	$("#system_login").on("click", function(){
		var formData = new FormData();
		formData.append("pass", $("#system").val() );
		$.ajax({
			url: "./?login=yes",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			if ( data.login == 'yes' || data.login == 'logout' ) {
				location.reload(true);
			}

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );

		})
	});
	

	// **************************************
	// mmenu
	// **************************************
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});


});

</script>
</head>
<body>

<div id="wrapper">
<script>
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css( "visibility", "hidden" );
</script>

	<div id="head">
		<?php require_once("std/view_hamburger.php") ?>
		<div id="title"><?= $GLOBALS['title'] ?></div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<div style='margin:10px;'>
				<a href="../">親フォルダ</a>
			</div>

			<div id="data" class="table-responsive">

				<table class="table table-condensed table-hover">
					<tr>
						<th style='width:200px;'>ファイル名</th>
						<th style='width:80px;'>サイズ</th>
						<th>MIME</th>
					</tr>

					<?= $GLOBALS["data"] ?>

				</table>
			</div>

			<fieldset>
				<legend></legend>
				<table class="table table-condensed">

					<tr><td class="fields result error" id="erow1"><?= $GLOBALS['error'] ?></td></tr>
					<tr><td class="fields result error" id="erow2"></td></tr>

				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
<?php
if ( $_SESSION['login'] == 'yes' ) {
	print $GLOBALS['comment'];
}
else {
	print str_replace($_SERVER['DOCUMENT_ROOT'],"",$GLOBALS['comment']);
}

?>
	</div>

	<div id="pass" class="input-group">
		<input type="password" id="system" class="form-control">
		<input type="button" value="管理者" id="system_login" class="btn">
	</div>

</div>


<?php require_once("unit_menu.php") ?>


</body>
</html>



download.php

ログインしていないと、download 関数が呼ばれる事はありません。

recursionFiles は再帰関数です。glob でフォルダが無くなるまで全ての階層を展開して、戻り値にその値を返して親でマージするので、戻って来た内容はだんだん多くなり、最後に全てのファイルのパスが取得されます。

$zip->addFile で追加する場合、第二引数で書庫内のパスを対象とするフォルダとする為、$rpath_exclude にあらかじめ対象フォルダの realpath をセットしておいて、その部分を消去して $zip->addFile に渡しています。
<?php

// ***********************************************
// フォルダを全て書庫化してダウンロード
// ***********************************************
function download() {

	$_GET['download'] = str_replace('/','',$_GET['download']);
	$_GET['download'] = str_replace('..','',$_GET['download']);
	$_GET['download'] = str_replace('.','',$_GET['download']);
	$rpath = $_SERVER['DOCUMENT_ROOT']  . rtrim($GLOBALS['path'][0],"/") . "/" . $_GET['download'];
	$rpath_exclude = $rpath . "/";

	if ( rtrim($GLOBALS['path'][0],"/") == '' ) {
		print "REQUEST_URI is Incorrect";
	}

	// ファイルは対象外(存在チェックも行う)
	if ( !is_dir($rpath) ) {
		print rtrim($GLOBALS['path'][0],"/") . "/" . $_GET['download'] . " not found or not dir";
		return false;
	}

	// ***********************************************
	// readfile 用、バッファ解除
	// ***********************************************
	ob_end_clean();

	// ***********************************************
	// 対象フォルダ名
	// ***********************************************
	$target_dir = $rpath;

	// ***********************************************
	// 書庫ファイル名
	// ***********************************************
	$zipname = basename( $target_dir );

	// ***********************************************
	// 一時ファイルを作成 ( temp/oooooo.tmp )
	// ***********************************************
	$file = tempnam( sys_get_temp_dir(), "zip" ); 

	// ***********************************************
	// ZIP 書庫作成
	// ***********************************************
	$zip = new ZipArchive(); 

	$zip->open($file, ZIPARCHIVE::CREATE | ZIPARCHIVE::OVERWRITE ); 

	$targets = recursionFiles( $target_dir );

	foreach( $targets as $target ) {
		$zip->addFile( $target, str_replace($rpath_exclude,"", $target) );
	}

	$zip->close(); 

	// ***********************************************
	// ダウンロードさせる為の処理
	// ***********************************************
	header("Content-Type: application/zip"); 
	header("Connection: close");
	header("Content-Length: " . filesize($file)); 
	header("Content-Disposition: attachment; filename=\"{$zipname}.zip\""); 
	readfile($file); 


	// ***********************************************
	// 一時ファイルを削除
	// ***********************************************
	unlink($file); 

	return true;

}


// ***********************************************
// 再帰によるファイル一覧作成
// ***********************************************
function recursionFiles( $target ) {

	$files = glob( "{$target}/*" );
	$result = array();

	foreach ( $files as $file ) {
		// ファイル
		if (is_file($file)) {
			if ( basename($file) != "files.php" ) {
				$result[] = $file;
			}
		}
		// フォルダ
		else {
			$result = array_merge($result, recursionFiles($file));
		}
	}

	return $result;
}


?>




posted by lightbox at 2016-11-05 21:29 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

2016年05月29日


超簡易掲示板 : 保存タイプは CSV





board.php、model.php、view.php の 3 ファイルで動作します。json.php が同梱されていますが、出力ファイルである board.csv を JSON 形式で取得する為のコードです。( JavaScript からアクセスする場合は、header( "Access-Control-Allow-Origin: *" ); を追加して下さい )

他のアプリケーションからのアクセスを簡単にテストできる仕様になっています。

board.php
<?php
// **************************************
// php.ini の output_buffering をチェックして
// 有効になっていた場合は、header の前に出力可能です
// **************************************

// **************************************
// 通常の HTML として出力します
// **************************************
header( "Content-Type: text/html; Charset=utf-8" );

// **************************************
// キャッシュを無効にするヘッダ
// ※ いろいろあるのは念のため
// **************************************
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

// **************************************
// 関数の定義を読み込みます
// **************************************
require_once("model.php");

// **************************************
// $_POST['send'] != "" は送信ボタンが
// クリックされた事を示します
// さらに、テキストエリアに何か入力され
// た場合に処理を行います
// **************************************
$_POST['text'] = preg_replace( "/^[ \s]+/u", "", $_POST['text'] );
$_POST['text'] = preg_replace( "/[ \s]+$/u", "", $_POST['text'] );
if ( $_POST['send'] != "" && $_POST['text'] != "" ) {

	// データの書き込み処理
	post_data();

}

// *************************************
// データの表示処理
// *************************************
disp_data();


// **************************************
// ▼ 以下は画面です。$log_text を
//    埋め込んでいます
// **************************************
require_once("view.php");
?>


model.php
<?php

// **************************************
// データの書き込み処理
// **************************************
function post_data() {

	// データを一括読み込み
	$log_text = @file_get_contents("board.csv");

	// **************************************
	// 本文中の改行コードを "\n" という
	// 文字列に変換しています
	// **************************************
	$_POST['text'] = str_replace("\r\n","\\n",$_POST['text']);
	$_POST['text'] = str_replace("\n","\\n", $_POST['text'] );
	$_POST['text'] = str_replace("\r","\\n", $_POST['text'] );

	// HTML 要素を無効にする
	$_POST['text'] = str_replace("<","&lt;",$_POST['text']);
	$_POST['text'] = str_replace(">","&gt;",$_POST['text']);

	// HTML 要素を無効にする
	$_POST['subject'] = str_replace("<","&lt;",$_POST['subject']);
	$_POST['subject'] = str_replace(">","&gt;",$_POST['subject']);
	$_POST['name'] = str_replace("<","&lt;",$_POST['name']);
	$_POST['name'] = str_replace(">","&gt;",$_POST['name']);

	// シングルクォートとダブルクォートとカンマ
	$_POST['text'] = str_replace("'","&#39;",$_POST['text']);
	$_POST['text'] = str_replace("\"","&#34;",$_POST['text']);
	$_POST['text'] = str_replace(",","&#44;",$_POST['text']);

	// シングルクォートとダブルクォートとカンマ
	$_POST['subject'] = str_replace("'","&#39;",$_POST['subject']);
	$_POST['subject'] = str_replace("\"","&#34;",$_POST['subject']);
	$_POST['subject'] = str_replace(",","&#44;",$_POST['subject']);
	$_POST['name'] = str_replace("'","&#39;",$_POST['name']);
	$_POST['name'] = str_replace("\"","&#34;",$_POST['name']);
	$_POST['name'] = str_replace(",","&#44;",$_POST['name']);

	$log_wk = "{$_POST['text']},{$_POST['subject']},{$_POST['name']},{$_POST['datetime']}";

	// **************************************
	// 前回データとの境界に改行コードを
	// 設定しています
	// **************************************
	$log_text = $log_wk . "\n" . $log_text;

	// 書き込み
	file_put_contents("./board.csv", $log_text );

	// GET メソッドで再表示します
	header( "Location: board.php" );
	exit();


}

// **************************************
// データの表示処理
// **************************************
function disp_data() {

	// 埋め込み用データを global 宣言
	global $log_text;

	// データを一括読み込み
	$rows = @file("./board.csv");
	// ファイルが存在しない場合
	if ( $rows === false ) {
		$log_text = "ここに投稿データが表示されます";
		return;
	}

	// 表示用の埋め込みに使用される文字列変数
	$log_text = "";
	foreach( $rows as $v ) {

		$data = explode(",", $v);

		// **************************************
		// 本文の改行は br 要素で表現します
		// **************************************
		$row = str_replace("\\n", "<br>\n", $data[0] );

		// **************************************
		// 行毎に表示 HTML を作成
		// **************************************
		$row = "<h3>{$data[1]}</h3>{$row}<br><span class='sb'>({$data[2]} : {$data[3]} )</span><br>";

		// **************************************
		// 記事の境界を hr 要素で表現します
		// **************************************
		$row .= "<hr>\n";

		// **************************************
		// 表示画面全体 を作成
		// **************************************
		$log_text .= $row;
	
	}


}

?>


行データの作成は、以下のように置き換えるとメンテナンスしやすくなります。また、この部分を別ファイルにして require するともっと使いやすくなるでしょう。
		// **************************************
		// 行毎に表示 HTML を作成
		// **************************************
		$row = <<<HTML
		<h3>{$data[1]}</h3>
		{$row}<br>
		<span class='sb'>({$data[2]} : {$data[3]} )</span><br>
HTML;


view.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<style>
* {
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
}
body {
	margin: 5px;
}
form {
	padding-right: 5px;
}
.sb {
	font-size: 8px;
}
#text {
	height: 100px;
	width: 500px;
}
#subject,#name {
	width: 400px;
}

@media screen and (max-width:479px) {

	#text {
		width: 100%;
	}
	#subject,#name {
		width: 230px;
	}
	#line_control {
		display: none;
	}
}

</style>

<script>

$( function(){
	$("form").on("submit", function(){

		var dateNow = new Date();
		var dateString = 
			dateNow.getFullYear() + "/" + 
			("0"+(dateNow.getMonth()+1)).slice(-2)+ "/" + 
			("0"+(dateNow.getDate())).slice(-2);
		var timeString = 
			("0"+(dateNow.getHours())).slice(-2) + ":" + 
			("0"+(dateNow.getMinutes())).slice(-2) + ":" + 
			("0"+(dateNow.getSeconds())).slice(-2);

		$("#datetime").val( dateString + " " + timeString );

	});
});

</script>
</head>

<body>
<h3><a href="board.php" style="color:black;">超簡易掲示板 ( CSV )</a></h3>

<form method="POST">
	タイトル <input
		type="text"
		id ="subject"
		name="subject">
	<br>
	名  前 <input
		type="text"
		id ="name"
		name="name">
	<br>
	<textarea
		id ="text"
		name="text"></textarea>
	<input type="hidden"
		id="datetime"
		name="datetime">
	<br>
	<input
		type="submit"
		name="send"
		value="送信">
</form>
<br>

<?= $log_text ?>

</body>
</html>


json.php
<?php
// **************************************
// 通常の HTML として出力します
// **************************************
header( "Content-Type: application/json; charset=utf-8" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

// データを一括読み込み
$rows = @file("./board.csv");
// ファイルが存在しない場合
if ( $rows === false || $rows[0] == "" ) {
	print '{ "error": "ファイルが存在しません" }';
	exit();
}

// 全ての行用の JSON 用クラス作成
$json = new stdClass;
// 行データを格納する配列を作成
$json->item = array();

foreach( $rows as $v ) {

	$data = explode(",", $v);

	// 新しい行用のクラス作成
	$board_data = new stdClass;

	// text プロパティに 本文をセット
	$board_data->text = $data[0];
	// subject プロパティに タイトルをセット
	$board_data->subject = $data[1];
	// name プロパティに 名前をセット
	$board_data->name = $data[2];
	// subject プロパティに タイトルをセット
	$board_data->datetime = $data[3];

	// 配列の最後に投稿データをセット
	array_push ($json->item, $board_data);


}

print json_encode($json, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

?>




posted by lightbox at 2016-05-29 22:21 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする

2016年04月26日


超簡易掲示板 ( JSON ) : PHP





保存データを行単位で区切り文字で分けて投稿データを保存する方法は古くからありますが、JSON 形式で保存しておくと、投稿データ内の改行やクォートなどのデータを自分で処理する必要がなくなる上に、新しい項目も追加するのが容易になります。さらに、データが JSON で作られるので、そのまま http で他のアプリケーションからアクセスする事も容易になります

一応、MVC にのっとり、M(model.php) / V(view.php) / C(board.php) になっています

board.php

error_reporting(E_ALL & ~E_NOTICE); は、$_POST 等の変数の参照時に未定義(ブラウザから送られていない)時にでも、空文字列が入っているとみなして処理できるようにするものです。逆に、全てのエラーを出力するようにした場合、代入されていな い値を使用した場合は、警告を発生します( 必要であれば、php.ini で設定します )

<?php
error_reporting(E_ALL & ~E_NOTICE);
// **************************************
// php.ini の output_buffering をチェックして
// 有効になっていた場合は、header の前に出力可能です
// **************************************

// **************************************
// 通常の HTML として出力します
// **************************************
header( "Content-Type: text/html; Charset=utf-8" );

// **************************************
// キャッシュを無効にするヘッダ
// ※ いろいろあるのは念のため
// **************************************
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

// **************************************
// 関数の定義を読み込みます
// **************************************
require_once("model.php");

// **************************************
// $_POST['send'] != "" は送信ボタンが
// クリックされた事を示します
// さらに、テキストエリアに何か入力され
// た場合に処理を行います
// **************************************
$_POST['text'] = preg_replace( "/^[ \s]+/u", "", $_POST['text'] );
$_POST['text'] = preg_replace( "/[ \s]+$/u", "", $_POST['text'] );
if ( $_POST['send'] != "" && $_POST['text'] != "" ) {

	// データの書き込み処理
	post_data();

}

// データの表示処理
disp_data();


// **************************************
// ▼ 以下は画面です。$log_text を
//    埋め込んでいます
// **************************************
require_once("view.php");
?>

FORM は一般的な POST メソッドで送信されます。なので、書き込んだ直後にリダイレクトして GET メソッドで呼び出しなおすという処理が入っています。タイトルの『超簡易掲示板 ( JSON )』をクリックすると、GET メソッドでの呼び出しであるリンクとなっています。

投稿データの表示内容は、いったん文字列で作成して後から view.php の該当部分に埋め込む形式です。最新のデータは、array_unshift によって、データの先頭に追加されます。

HTML 要素を無効にする方法としては、htmlentitieshtmlspecialchars がありますが、初心者向けとして最低限の置き換えを str_replace で実装しています。

json_encode による、オブジェクトから文字列の変換では、オプションの JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT でデバッグしやすいように可読性に重点を置いています。

model.php
<?php

// **************************************
// データの書き込み処理
// **************************************
function post_data() {

	// データを一括読み込み
	$log_text = @file_get_contents("board.log");

	$json = json_decode( $log_text );
	// 空のファイルかまたは、JSON データでは無い場合
	if ( $json === null ) {

		// JSON 用クラス作成
		$json = new stdClass;
		// 行データを格納する配列を作成
		$json->item = array();

	}

	// 改行コードを \n のみ(1バイト)にする
	$_POST['text'] = str_replace("\r","",$_POST['text']);

	// HTML 要素を無効にする
	$_POST['text'] = str_replace("<","&lt;",$_POST['text']);
	$_POST['text'] = str_replace(">","&gt;",$_POST['text']);

	// HTML 要素を無効にする
	$_POST['subject'] = str_replace("<","&lt;",$_POST['subject']);
	$_POST['subject'] = str_replace(">","&gt;",$_POST['subject']);
	$_POST['name'] = str_replace("<","&lt;",$_POST['name']);
	$_POST['name'] = str_replace(">","&gt;",$_POST['name']);

	// 新しい投稿用のクラス作成
	$board_data = new stdClass;

	// text プロパティに 入力された本文をセット
	$board_data->text = $_POST['text'];
	// subject プロパティに 入力されたタイトルをセット
	$board_data->subject = $_POST['subject'];
	// name プロパティに 入力された名前をセット
	$board_data->name = $_POST['name'];
	// subject プロパティに 入力されたタイトルをセット
	$board_data->datetime = $_POST['datetime'];

	// 配列の先頭に 新しい投稿データをセット
	array_unshift($json->item, $board_data);

	// 全ての投稿データを JSON として一括書き込み
	file_put_contents("./board.log", json_encode( $json, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT ) );

	// GET メソッドで再表示します
	header( "Location: {$_SERVER["PHP_SELF"]}" );
	exit();


}

// **************************************
// データの表示処理
// **************************************
function disp_data() {

	// 埋め込み用データを global 宣言
	global $log_text;

	// データを一括読み込み
	$log_text = @file_get_contents("./board.log");
	// ファイルが存在しない場合
	if ( $log_text === false ) {
		$log_text = "ここに投稿データが表示されます";
		return;
	}

	$json = json_decode( $log_text );
	// 空のファイルかまたは、JSON データでは無い
	if ( $json === null ) {
		$log_text = "ここに投稿データが表示されます";
		return;
	}

	// 表示用の埋め込みに使用される文字列変数
	$log_text = "";
	foreach( $json->item as $v ) {
	
		// **************************************
		// 本文の改行は br 要素で表現します
		// **************************************
		$v->text = str_replace("\n", "<br>\n", $v->text );

		// **************************************
		// 記事の境界を hr 要素で表現します
		// **************************************
		$v->text .= "<hr>\n";

		// **************************************
		// 行毎に表示 HTML を作成
		// **************************************
		$log_text .= "【{$v->subject}】( {$v->name} : {$v->datetime} ) <br>" . $v->text;
	
	}


}

?>


投稿時の日付データは、ブラウザ側でセットするようにしています。特に日付に関しては JavaScript ではスマートな方法が無いので、学習のきっかけ用としてこのようになっています。また、送信時のイベント処理としても重要なサンプルとなり、jQuery の基本サンプルでもあります。

※ jQuery は、Google のホスティングを使用しています。

view.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=1280,initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
* {
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
}
</style>

<script>

$( function(){
	$("form").on("submit", function(){

		var dateNow = new Date();
		var dateString = 
			dateNow.getFullYear() + "/" + 
			("0"+(dateNow.getMonth()+1)).slice(-2)+ "/" + 
			("0"+(dateNow.getDate())).slice(-2);
		var timeString = 
			("0"+(dateNow.getHours())).slice(-2) + ":" + 
			("0"+(dateNow.getMinutes())).slice(-2) + ":" + 
			("0"+(dateNow.getSeconds())).slice(-2);

		$("#datetime").val( dateString + " " + timeString );

	});
});

</script>
</head>

<body>
<h3><a href="board.php" style="color:black;">超簡易掲示板 ( JSON )</a></h3>

<form method="POST">
	タイトル <input type="text"
		name="subject"
		style="width:400px;">
	<br>
	名  前 <input type="text"
		name="name"
		style="width:400px;">
	<br>
	<textarea name="text"
		style="width:500px;height:100px;"></textarea>
	<input type="hidden"
		name="datetime" id="datetime">
	<br>
	<input type="submit"
		name="send"
		value="送信">
</form>
<br>

<?= $log_text ?>

</body>
</html>


JSON は、item プロパティが配列になり、複数項目の投稿データが格納されます。

JSON データ
{
    "item": [
        {
            "text": "最低限の機能を持った掲示板です。\nデータ形式は JSON でとても拡張しやすく便利です。",
            "subject": "こんにちは",
            "name": "山田 タロウ",
            "datetime": "2016\/04\/25 17:52:17"
        }
    ]
}




タグ:掲示板 PHP
posted by lightbox at 2016-04-26 12:21 | PHP + WEBアプリ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり