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

2021年07月01日

2021年 前期試験問題( 10 ) : 13

php でデータベースに対して処理する場合、PDOと言うクラスを使用します。このクラスを使用する事によって、MySQL のみでは無く他のを利用する場合にコードの移行が容易になります。

利用するには、クラスである為、new キーワードを使用してを実行してインスタンスを生成して変数にセットして使用します。
try {
    $pdo = new PDO( $GLOBALS["connect_string"], $GLOBALS["user"], $GLOBALS["password"] );
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (PDOException $e) {
    print "エラー : {$e->getMessage()}";
    exit();
}
PDO の標準的な利用方法は、まず用意した SQL 文字列をメソッドに渡して実行の準備をします。この際、SQL 文字列の中に名前付きパラメータを用いて、SQLの内容を変数によって置換する準備をしておきます。
SELECT * FROM 社員マスタ WHERE 社員コード = :scode
その後、メソッドを使用してSQL 文を完成させ、メソッドで SQL文を実行します。SQL 文が SELECT によりデータの読み出しの場合は、さらにメソッドによって列名による連想配列を行単位で取得して使用し、SQL が更新の場合は、SQL を実行する事によって更新が完了します。

SQL が更新の場合、PHP の変数から名前付きパラメータで設定する場合、データベースの列定義に対して一般的に型か型かで変換方法を決めます。但し、その二つの型以外にデータベースではという値をセットする時に注意が必要です。

SELECT を使用する SQL 文でデータを読み出す際、型の列には注意が必要です。MySQL が標準で返すフォーマットでは、画面表示やコントロールがうまく行かない場合があります。

この場合、たいていにおいて * を使わずに全ての列名を記述し、対象の列に対してはフォーマットを設定するを使用します。そして、SQL の 句で別名を設定し、PHP 側で利用する為の正しい列名を付け直します。

データベースから画面上のコンボボックスを作る場合も注意して下さい。コンボボックスは何もしなければ一覧の先頭が選択されて表示されます。画面表示時に正しくコンボボックスの内容を選択する為には、コンボボックスの一覧を読み込むループ時に、HTML の属性を設置して正しく選択できるようにしてください。



posted by at 2021-07-01 11:24 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年06月27日

2021年 前期試験問題( 9 ) : 13

ブラウザで表示されるWEBアプリケーションの画面は、通常タブ単位で表示されています。その際一つのウインドウから他のウインドウを開いて、相互に JavaScript でアクセスする事が可能です。

この場合、window オブジェクトメソッドを使用します。

このメソッドの戻り値は開いた新しいウインドウオブジェクトが取得され、新しく開いたウインドウから元のウインドウの window オブジェクトを参照するには、オブジェクトを使用して参照します。
<script>
var wnd;
function win_open_01(){
	wnd = window.????( "about:blank" );
}
</script>
<input id="btn" name="btn" type="button" value="実行" onclick="win_open_01()">
開かれたウインドウを閉じるには、開かれたウインドウ側で window オブジェクトメソッドを使用して行います。

また、現在のウインドウ内の中に要素を設置して、必要な時に参照ウインドウを開く事ができます。この場合初期設定として参照ウインドウ用の要素のスタイルに : を設定して非表示にしておきます。そして必要な時にそのスタイルのプロパティを設定して表示させます。



また参照ウインドウを閉じる場合は、参照ウインドウ内の処理で元のウインドウをオブジェクトで参照して、スタイルを設定して非表示にします。さらに、元のウインドウから参照ウインドウ内にアクセスするには、参照ウインドウ用の HTML 要素をオブジェクトとして作成し、プロパティを使用します。このプロパティの値が、参照ウインドウ内の window オブジェクトとなります。

但し、この参照ウインドウを埋め込む方法はレイアウト上 PC 環境のみで有効であり、スマホ画面では前述の window オブジェクトメソッドを使用します。

このような二つのウインドウを一つのアプリケーションとして連携する場合、お互いの参照方法を知ったうえでリロード処理を使う必要も出できます。その場合、オブジェクトのメソッドを使用するか、プロパティに URL をセットし直す方法を試してみるといいでしょう。


posted by at 2021-06-27 18:12 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 8 ) : 16

jQuery はフリーのライブラリです。しかし、WEBアプリケーションにおける必要な JavaScript の処理を殆ど簡易化する事ができる優秀なライブラリです。JavaScript の HTML 要素参照はとても面倒ですが、jQuery ならばタイプ量が格段に少なくなります。ただ、注意すべきは画面上のコントロールが全て後に、HTML要素を特定して処理記述をまとめて行うという記述方式になれる必要があるところです。
<script> $(function(){ // ここに処理を記述 }); </script>
例えば、ボタンの処理を記述する場合、HTML には オブジェクトを取得する為の 属性を指定し、値が btn だとします。この場合の jQuery での処理記述は以下のようになります。
$("").on("", function() { alert("ボタンがクリックされました"); });
jQuery では HTML 要素の単独のオブジェクトを特定する為に、JavaScript と同じ属性を使用しますが、その値の使用方法がにおける指定方法と同じになります。その選択方法は『セレクタ』と呼ばれ、参照方法のバリエーションも多岐に渡る事になります。この場合、対象となるオブジェクトは一つだけですが、jQuery では HTML の構造や属性や HTML要素の種類そのものも利用して対象を複数として考えて一括で処理する事を想定しています。 たとえば、FORM 要素の中にある INPUT 要素の背景色を全てピンクにするには以下のように記述します。
$("").css("", "");
また、jQuery の殆どのメソッド( ここでは css ) では、結果の値が再び参照していたオブジェクトそのものになるので、追加で全ての対象に値として 山田太郎 とセットする場合には以下のように記述できます。
$("記述不要") .css("記述不要", "記述不要") .("山田太郎");
この例では、css メソッドでスタイルを指定し、メソッドの引数に値をセットしています。値を取得したい場合は引数無しで使用すると戻り値として入力値を取得できます。( その場合は単独のオブジェクトを特定して使用します ) これ以外にも良く使用するメソッドして、HTML 要素の属性値を取得・設定するメソッドがあります。 そして、jQuery を使うと容易に新しい HTML 要素を新規に作成する事もできます。その際の仕様上、画面上に既に存在する特定の要素に追加する必要があるのでその要素の属性の値をareaとして特定するとして、その中に INPUT 要素を追加するには以下のようになります。
$("").appendTo("");
posted by at 2021-06-27 13:15 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 7 ) : 12

WEB アプリケーションを作成する上で、PHP はサーバ側のに情報を登録するという大きな役割があります。それに対して JavaScript画面をコントロールするという役割があります。その為に必要な知識は多岐にわたり、HTMLの知識も必要です。

まず、画面上の要素を特定する為に HTML ではという属性を定義する必要があります。通常、画面上のデータをサーバに送信する為に必要な属性は属性なので、この二つの属性は同じ値を設定すると混乱せずに済みます。そして、その属性の値を使用して要素そのものである『オブジェクト』を参照する為に使用するのが、document オブジェクトのメソッドのです。( JavaScript のメソッドでは正確に大文字小文字を区別して記述してください )

このメソッドで取得されたオブジェクトは、その対象となる HTML要素そのものです。よって、通常 HTML で記述可能な属性は、このオブジェクトのプロパティとして存在します。ですから、INPUT 要素の入力された値は、プロパティを参照して取得する事になります。

HTML 要素の参照方法は他にもあって、前述の FORM 内のデータ入力に必ず設定する属性を使用するメソッドは、属性の値が 画面内に同一で複数存在する事を許されているので、取得できたオブジェクトが配列になります。ですから、特定の HTML 要素を参照するには、オブジェクトに [0] を付加して先頭のオブジェクトを参照します。

この方法は、よく似たメソッドである document.getElementsByTagName を例に取ると以下のようになります。
var obj = document.getElementsByTagName("input")[0];
画面上の値を取得したり設定する事は、HTML 要素のオブジェクトのブロパティを操作する事で可能ですが、その操作をいつ行うかが重要な知識です。PHP は、ソースが呼び出されたらソースコードの先頭より実行されていきますが、HTML の画面では通常表示されればユーザの入力待ちになります。

このような場合、JavaScript が実行されるきっかけはユーザの処理に委ねられます。そして、殆どの場合それはユーザがボタンをした時に実行される事になります。

そのような処理を JavaScript で記述する為に、HTML 要素には『』という属性が用意されています。この属性の頭2文字は on です。単純なボタン処理を記述すると以下のようになります。
<script> function myaction() { alert("ボタンがクリックされました"); } </script> <input type="button" value="実行" on="myaction()">
この例よりも解るように、この属性の値は JavaScript を記述する事ができます。そして、一般的には関数を作成してその関数を呼び出させてその中で目的の処理を行います。上記例では、単純なボタンを使用しましたが WEB アプリケーションで実際に使用する場面では、FORM の属性を使用します。
<script> function myaction() { if ( !confirm( "送信しますか?" ) ) { return false; } return true; } </script> <form id="frm" on="return myaction()"> </form>
このような処理を作成する事によって、ユーザが入力を正しく完了したかどうかを検証し、入力しなおす場合はキャンセルする事ができます。
posted by at 2021-06-27 10:59 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年06月26日

2021年 前期試験問題( 6 ) : 11

WEB アプリケーションの処理の構成要素は大きく分けて3つあります。その一つは画面表示で、二つ目はデータベースの更新です。しかし、この二つの構成要素は比較的単純な事が多く、残りの要素が最も負荷の高いとなります。

当然この内容はアプリケーション毎に違ったものなり、画面の要素によってもいろいろな注意が必要となります。そして、画面表示の一部ではありますが、ユーザの入力によって起きる不具合をユーザに知らせるためのの表示が必要となります。

この処理は基本的にはサーバ側で行われますが、WEBアプリのテクノロジを総動員するとブラウザ側での処理として実装する事も最近は少なくありません。

最も簡単な方法としては、HTML 要素に直接記述する属性によって、簡易的な制限を加える事ができます。その代表的な属性がという属性で、未入力をしないようにする方法です。ただ、この方法は完全では無く、スペースや漢字スペースを受け入れてしまうので実際は正規表現を用いた属性のほうが現実的です。

しかし、この方法ではユーザに対するメッセージが具体的なものでは無く、製品に利用するのは避けるべきでしょう。せめて、を使用した入力単位の検査を作成してリアルタイムに問題の提示を迅速に行えるようにするべきです。さらに言えば、jQuery 等のライブラリを使用して、プログラマの負担の少ない標準化を行うべきです。

PHP で未入力がどうかを検査する場合、空白( 漢字の空白も含む )を未入力としてチェックする為に、関数を使用して正規表現で入力文字列の両側の空白を排除して空文字であればエラーとします。また、PHP は画面単位で送信を行うので、サーバへ送られたデータに対して全て検査を行い、問題のある結果もまた全てブラウザへ返して表示すべきです。

具体的には、文字列追加連結演算子のを使用して検査の結果を変数にまとめて保存して画面部分に埋め込みます。そして、可能ならば問題の出た最初の画面上のコントロールにをセットしましょう。

しかし、ブラウザ側でチェックするのであればコントロール毎に問題を迅速にユーザに知らせるほうが良い場合もあります。
var name = $("#name").val();
name = name.replace(/^[\s]+/, "");
name = name.replace(/[\s]+$/, "");
if ( name == "" ) {
    $("#message").text("名前が入力されていません");
    $("#name").val( "" );
    $("#name").focus();
    $("#name").select();

    event.preventDefault();
    return;
}
いずれにしても、画面に投入されるデータの整合性をプログラミングでチェックする場合、多くの場面で正規表現が有効です。簡単な例で言えば、0〜9 の文字の入力のみ許すのであれば HTML であれば正規表現を記述する属性の値としてと書きます。

また、処理として PHP で記述するのであれば  関数を使用し、JavaScriptであれば文字列に対してメソッドを使用しますが、その場合最初から最後まで 0〜9 である事を確かめる為に、^を最初に、$を最後に加えます。

そして、PHP の場合は、"/正規表現/" を引数に与え、JavaScript では /正規表現/ を引数に与えます。


posted by at 2021-06-26 21:18 | 講師生活 | このブログの読者になる | 更新情報をチェックする

2021年 前期試験問題( 5 ) : 12

PHP に対してデータを送る役割は FORM 要素ですが、この要素そのものが持つ属性が WEBアプリケーションにとって重要である事は言うまでもありません。

まず、属性によってサーバへのデータの送り方が大きく分けて2通りに分けられ、この属性を省略すると実行される通信方法を仮に『アドレスバー方式』と呼ぶことにします。この方式では、データは URL の一部として作成され、その URLそのものがサーバに到達します。この際、データ部分はと呼ばれ、データとデータの間は & で区切られます。

つまり、その URL は A 要素の属性で指定可能なもので、データ部分が外部に容易に露出する事になるデータ通信方法です。

それに反してもう一つの通信方法は、ブラウザが直接サーバへデータを送る方法で、『アドレスバー方式』との大きな違いは送信可能なデータ量に対する制限が無い事です。この場合、FORM 要素の属性に enctype を使用して、値にを指定するとファイルのアップロードが可能になります。また、送信されたデータがアドレスバーに残る事も無く、確実にサーバへデータを送る事ができます。

そして、次に重要な属性はです。この属性を省略すると、データの送り先は現在表示している URL に対して送られます。つまり、省略せずに他の PHP ファイルを指定すれば、その PHP にデータを送信可能になります。こうする事によって、PHP で記述する処理を単純化する事が可能になり、プログラミングのコストを抑える可能性も大きくなります。

さらに、プログラムの処理そのものにはさほど影響は与えませんが、属性を使用する事によって、ブラウザ上のどの部分に表示するかを決める事ができます。例えば要素をページ内に埋め込んで、PHP の送信結果をその中に表示する事が可能になります。また、この属性に値としてを指定すると、送信のたびに新しいタブを開いてそのウインドウ内に結果が表示されるでしょう。

ここまでは、画面定義として決められた基本機能の指定方法ですが、WEB アブリケーションとして完成度を高くするには、このデータ送信機能を実行する前に入力チェックを行う必要があります。たとえ入力チェックが必要無い簡単な送信でも、ユーザの間違いを避ける為に確認ダイアログを表示して送信のキャンセルをする事ができるようにする必要があります。

その為の重要な FORM 要素の属性がです。このような属性は、他の要素でも同様で、頭に on が付き、JavaScript への橋渡しをするための属性です。よって、属性の値は JavaScript そのものが記述されます。

そして、FORM 要素のこの属性は送信のキャンセルを実現する為に最初にステートメントを指定して、他で定義した関数の戻り値をシステムに返す事になっています。この他で定義した関数が返す値がの場合にサーバへの送信はキャンセルされます。
function check(){

    if ( !confirm("更新してもよろしいですか?") ) {
        return false;
    }

    return true;
}
</script>
confirm メソッドは、オブジェクトのメソッドで、OK と キャンセルのボタンを持っており、ユーザが選択できます。JavaScript では、このトップに存在するオブジェクトは省略してメソッドのみを記述する事となっています。


posted by at 2021-06-26 19:10 | 講師生活 | このブログの読者になる | 更新情報をチェックする