SQLの窓 イラストAC フリー素材

2019年08月23日

下半分が IFRAME なページ【 height: calc( 100% - 120px ) 】

デモページ

関連する記事

下半分がスクロールするページ【 height: calc( 100% - 120px ) 】

<!DOCTYPE html>
<html>
<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">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section-iframe.css">
</head>
<body>
	<div id="head">
	</div>

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

</body>
</html>



two-section-iframe.css
@charset utf-8;


/* ****************************
 上下エリア
 フィットコントロール用
******************************/
html,body {
	height: 100%;
}
/* ****************************
 それぞれのエリアの特性
******************************/
/* 基本枠 */
body {
	margin: 0;
}
/* 上固定部分 */
#head {
	padding: 16px;
	display: block;
	margin: auto;
	width: 100%;							/* 幅 */
	height: 120px;							/* 高さ */
	background-color: #e0e0e0;
}
/* 下スクロール部分 */
#extend {
	display: block;
	margin: auto;
	width: calc( 100% - 3px );				/* 幅 */
	height: calc( 100% - 120px - 2px );		/* 高さ */
	border: solid 2px #c0c0c0;
}





posted by at 2019-08-23 08:28 | CSS | このブログの読者になる | 更新情報をチェックする

2019年08月22日

JScript( WSH ) : fake sendmail for windows でメールを送信する

関連する記事

fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信 : Gmail なので ssl(465)
VBScript : JavaScript のライブラリを呼び出して、Base64 エンコードを行う

ソースコードを読んだら、標準入力に -t は必要無くて、引数にファイルを指定して実行可能でした。

JScript で実行する以上、標準入力に直接アクセスして処理しています。

テストすると、今時の WEB メーラでは本文は普通に UTF-8 で利用可能でした。有名どころの WEB メーラですと、Subject も そのままで可能でしたが、まだ対応されていない業者もあったので、JavaScript の Base64 変換ライブラリを使用しています。
<JOB>
<SCRIPT language="JScript" src="https://winofsql.jp/base64.js"></SCRIPT>
<SCRIPT language="JScript">

WshShell =  new ActiveXObject("WScript.Shell");

// ファイルを作成して引数で渡しても実行可能
var oExec = WshShell.Exec("\"C:\\pleiades\\xampp\\sendmail\\sendmail.exe\"");

var mail_text = getResource("mail_data");


// 先頭の空白文字列を取り去る
mail_text = mail_text.replace(/^[ \s]+/, "");

// http://logicalerror.seesaa.net/article/151155394.html
var subject = Base64.encode("日本語の表示");

// UTF8 文字列を BASE64 に変換したものをセット
mail_text = mail_text.replace(/--UTF8TEXT--/, subject);

// 本文を渡す
oExec.StdIn.Write( mail_text );

// 標準入力を終了
oExec.StdIn.Write(String.fromCharCode(0x1a));

// 実行が終わるまで待つ
while (oExec.Status != 1) {

	WScript.Sleep(2000);
}
</SCRIPT>
<RESOURCE id="mail_data">
From: a@yourdomain.jp
To: 送り先メールアドレス
Subject: =?utf-8?B?--UTF8TEXT--?=

mail testing

abcdef

あいうえお
</RESOURCE>

</JOB>


base64.js のオリジナルサイト



posted by at 2019-08-22 14:56 | WSH( JScript ) | このブログの読者になる | 更新情報をチェックする

JSP で単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )

C:\pleiades\xampp\tomcat\lib\mysql-connector-java-5.1.47.jar を使用しています。

関連する記事

Java : 単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )
<%@ page
	language="java"
	import="java.io.*"
	import="java.text.*"
	import="java.util.*"

	import="java.text.SimpleDateFormat"
	import="com.mysql.jdbc.*"
	import="java.sql.DriverManager"
	import="java.sql.ResultSet"
	import="java.sql.SQLException"

	contentType="text/html;charset=utf-8" %>
<%!
// *********************************************************
// ローカル関数
// *********************************************************
public String getData( HttpServletRequest request,String name ) {

	String strGet = request.getParameter(name);
	if ( strGet == null ) {
		strGet = "";
	}

	return strGet;
}
%>
<%
// *********************************************************
// 入力値の表示
// GET で setCharacterEncoding を有効にするには
// sever.xml => Connector で useBodyEncodingForURI="true"
// *********************************************************
request.setCharacterEncoding("utf-8");	// 入力値のエンコーディング

// GET 入力
String strGet = getData( request, "InputGet" );

// POST 入力
String strPost = getData( request, "InputPost" );

%>
<!DOCTYPE html>
<html>
<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">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
.result {
	display: inline-block;
	width: 400px;
	border: 1px solid #c0c0c0;
	padding: 10px;
}
</style>
</head>
<body>
	<div id="head">
		<div class="result">InputGet = <%= strGet %> </div><div class="result"> InputPost = <%= strPost %></div>
	</div>

	<div id="extend">

		フォーム : GET( InputGet )
		<form method="get">
			<input type="text" name="InputGet" value="<%= strGet %>">
			<input class="btn btn-primary" type="submit" name="send_get" value="GET">
		</form>
		
		フォーム : POST( InputPost )
		<form method="post">
			<input type="text" name="InputPost" value="<%= strPost %>">
			<input class="btn btn-primary" type="submit" name="send_post" value="POST">
		</form>

		<hr>

<%

// データベース用変数
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;

try {

	Class.forName("com.mysql.jdbc.Driver");
	// MySQL Connector/J 接続
	conn = (Connection) DriverManager.getConnection(
		"jdbc:mysql://localhost/lightbox?user=root&password="
	);

	stmt = (Statement) conn.createStatement();

	if ( getData( request, "send_post" ).equals( "POST" ) ) {
		// % は %% で表現
		rs = stmt.executeQuery( String.format( "select * from 社員マスタ where 氏名 like '%%%s%%'", strPost) );
	}
	else {
		rs = stmt.executeQuery("select * from 社員マスタ");
	}

	// select の結果の列情報の取得
	ResultSetMetaData rsmd = (ResultSetMetaData) rs.getMetaData();

	// 列数
	int columnCount = rsmd.getColumnCount();

	// 列名
	for( int i = 1; i <= columnCount; i++) {
		out.println(rsmd.getColumnName(i));
	}
	out.println("\n<br>");

	// 日付フォーマット
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");
	while( rs.next() ) {

		for( int i = 1; i <= columnCount; i++) {

			if ( i != 1 ) {
				out.println(",");
			}

			// 日付型の列
			if ( rsmd.getColumnTypeName(i).equals("DATETIME") ) {
				out.println( sdf.format(rs.getDate(i)) );
			}
			// それ以外
			else {
				out.println( rs.getString(i) );
			}


		}
		out.println("\n<br>");
	}

	rs.close();
	stmt.close();
	conn.close();

} catch (SQLException ex) {
	// handle any errors
	out.println("SQLException: " + ex.getMessage());
	out.println("SQLState: " + ex.getSQLState());
	out.println("VendorError: " + ex.getErrorCode());
}

%>

	</div>

</body>
</html>






posted by at 2019-08-22 11:42 | Java | このブログの読者になる | 更新情報をチェックする

Java : 単純な MySQL アクセス ( mysql-connector-java-5.1.47.jar )

C:\pleiades\java\8\jre\lib\mysql-connector-java-5.1.47.jar を使用しています。

※ mysql-connector-java-8.0.11 で serverTimezone=JST が必要

import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.Statement;

public class Main {

	public static void main(String[] args) {

		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;

		String connectionString = "jdbc:mysql://localhost/lightbox?user=root&password=";

		try {
			// 接続文字列で接続
			conn = (Connection) DriverManager.getConnection(connectionString);

			String query = "select * from 社員マスタ";

			stmt = (Statement) conn.createStatement();
			rs = stmt.executeQuery(query);

			String scode;
			String sname;
			while( rs.next() ) {

				scode = rs.getString(1);
				sname = rs.getString(2);

				System.out.print(String.format("番号 : %s,%s / ", scode, sname));

				scode = rs.getString("社員コード");
				sname = rs.getString("氏名");

				System.out.println(String.format("列名 : %s,%s", scode, sname));


			}


			rs.close();
			stmt.close();
			// 接続を閉じる
			conn.close();

		} catch (SQLException e) {
			// TODO 自動生成された catch ブロック
			e.printStackTrace();
		}


		System.out.println("終了");
	}

}




posted by at 2019-08-22 10:29 | Java | このブログの読者になる | 更新情報をチェックする

2019年08月21日

一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする

PHP における標準的なテスト用アップロードのテンプレート に対してアップロードしています。

ファイルのアップロードの PHP 側のインターフェイスに合わせてデータを用意して実行します。
PHP では、エラーの場合ページに文字列が出力されるたけなので、その文字列を検索して結果を判断します。

FileReader を使用して、選択したファイルが画像の場合は img 要素で表示し、それ以外ならば FileReader 由来のファイル名と MIME を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>

<script>

$(function(){

	// ***************************
	// form 送信イベント
	// ***************************
	$("#frm").on("submit", function(event){

		// 本来の処理をキャンセル
		event.preventDefault();

		// 新規送信用オブジェクト
		var formData = new FormData();

		// テストの為、約100K の制限
		formData.append("MAX_FILE_SIZE", 1048576);

		// ファイル
		var uploadData = $("#target").get(0);

		formData.append("target", uploadData.files[0]);

		// オリジナルファイル名
		console.log( uploadData.files[0].name );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "http://localhost/php/upload/php-upload-basic.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );

			// ajax 対応のページでは無いので、ページ上の文字列を検索して判断する
			if ( data.search(/失敗/) != -1 ) {
				alert("アップロードに失敗しました");
			}

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

			// エラーメッセージを表示
			alert("システムエラーです");

		})
		.always(function() {
		})
		;

	});

	// *************************************
	// ファイル選択 <input type="file">
	// *************************************
	$("#target").on("change", function(){

		$("#extend").html("");

		var reader = new FileReader();

		reader.name = this.files[0].name;
		reader.type = this.files[0].type;
		
		console.dir(reader);

		reader.refid = "image";

		// FileReader に画像が読み込まれた時のイベント
		$(reader).on("load", function () {
		
			if ( this.type.indexOf("image/") == 0 ) {
				$("<img>").appendTo("#extend")
					.prop( {"src": this.result, "title": this.name, "id": this.refid } )	// title にはオリジナルファイル名
					.css( {"width": "100px", "margin": "10px" } );
			}
			else {
				$("<div>").appendTo("#extend")
					.html( this.name + "<br>" + this.type );
			}
			
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (this.files[0]) {
			reader.readAsDataURL(this.files[0]);
		}

	});
	

});

</script>

</head>
<body>
	<div id="head">
		<form
			id="frm">
		
			<div>
				<input id="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="/php/upload/php-upload-basic.php">GET 再読み込み</a>
			</div>
		 
		</form>
	</div>

	<div id="extend">

	</div>

</body>
</html>





posted by at 2019-08-21 20:00 | jQuery | このブログの読者になる | 更新情報をチェックする

PHP における標準的なテスト用アップロードのテンプレート

1) 一度にアップロードできるファイルは一つです。
2) PHP とおなじ場所にファイルをアップロードします( 本来は場所を変えるべきです )
3) アップロードできる最大サイズは 1048576 バイトです
4) アップロードするファイル名の日本語対応をしないので、uniqid() 関数でファイル名を作成しています
5) 拡張子は、アップロードされたファイルとおなじものを使用しています
6) PHP が $_FILE にセットする MIME が画像の場合は、HTML で画像を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>
</head>
<body>
	<div id="head">
		<form 
			enctype="multipart/form-data"
			method="POST">
		
			<div>
				<input name="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="<?= $_SERVER["PHP_SELF"] ?>">GET 再読み込み</a>

				<input type="hidden" name="MAX_FILE_SIZE" value="1048576">
			</div>
		 
		</form>
	</div>

	<div id="extend">

<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {

	// 拡張子を得る為に pathinfo
	$path_parts = pathinfo($_FILES['target']['name']);
	$file_name = uniqid() . ".{$path_parts['extension']}";

	// アップロード先の パス
	$upload = realpath("./");
	$upload .= DIRECTORY_SEPARATOR . $file_name;

	// アップロード先の パス の表示
	print "$upload\n";

	// PHP のアップロード処理( 一時ファイルを移動 )
	if ( move_uploaded_file($_FILES['target']['tmp_name'], $upload ) ) {
		print "<p>アップロードに成功しました</p>\n";
	}
	else {
		print "<p>アップロードに失敗しました</p>\n";
	}

	// アップロード情報の表示
	print_r( $_FILES );

	// 画像の場合は HTML で表示
	if ( stristr($_FILES['target']['type'],'image' ) != false  ) {
		print "<img src='{$file_name}'>";
	}
}

?>
	</div>

</body>
</html>





posted by at 2019-08-21 18:22 | PHP | このブログの読者になる | 更新情報をチェックする