パソコン・インターネット

2010年1月31日 (日)

脱C/Sプログラマー計画 その3

■メニュー

MySQLの第一段です。
初めてのMySQLの方対象です。
この回では以下の4ステップを学習します。

1.MySQLの環境を設定
2.データベースの作成
3.テーブルの作成
4.PHPでテーブル内容を表示

■MySQLをインストールする

さてMySQLをWindows XP SP2以上にインストールします。
下記をダウンロードしてすべてデフォルトでインストール
します。(20010/1/22)

MySQL本体                 : mysql-essential-5.1.42-win32.msi
MySQL Workbench(GUI) : mysql-workbench-oss-5.2.14-beta-win32.msi

私がインストール設定したログをPDF+ZIP化しましたのでダウンロードして参照ください。

MySQ設定                    : mysql.zip
MYSQL WorkBentch設定 : mysql_workbentch.zip

WorkBenchはGUIでMySQLを操作するツールです。
とりあえず基本を覚えるためにコマンドライン中心です。

インストールの詳細はネットで検索してください。

■MySQLとPHPで検索

HTMLで書くのが大変なので、これ以降は下記PDFを参考にして、
ください。時間を短縮してよい学習教材を提供していきます。

この学習をマスターすると下記のような画面をブラウザーに表示できる能力が身につきます。

その3テキスト

Ws000005

| | コメント (0) | トラックバック (0)

2010年1月24日 (日)

脱C/Sプログラマー計画 その2-4

2-3からの続き

■サーバサイドの受信結果を表示するPHP
いよいよPHPのコードを書きます。
画面に出力するためにHTMLコードの中でPHPのコードを書きます。
Ws000020

<?phpと?>の間にコーディングされたコードがPHPになります。
ここで重要なのが$_POST[‘エレメント名’]です。連想配列といいます。サーバへPOSTされた値が設定されていてかつグローバルに参照できます。
PHPのコード内変数は$変数名で定義され参照できます。
$_POST配列から$userと$passに値を代入して、print関数で出力します。文字列を連結するためには、print関数の場合’.’ドットを使います。HTMLなので改行コードを文字列の最後に付けます
<br/>。echoもブラウザーへ文字列を出力しますが、決定的な違いは、echoは実行結果に戻り値がありません、printは戻り値があります。また複数の文字を出力する場合、echoは’,’カンマで区切ります。

ファイル名をsample2.phpでC:/WWW/htdocsに保存します。

さてこれですべてのコードの準備ができたので、実行してみましょう。

■コード実行

Ws000021

ブラウザーのURLへhttp://localhost/を入力して上記画面を表示させます。
マウスでsample2.htmlをクリックします。
Ws000022

ログイン画面が表示されます。
フォーカスはUserのテキストボックスにありますか?
なにも入力しない状態でLoginボタンをクリックしてみてください。
Ws000023

Userを入力してくださいとエラーメッセージが表示されます。
何か文字をUserに入力後Enterキーを押下してください。
Ws000024

当然パスワードを入力していないのでエラーメッセージが表示されます。OKをクリックすると下記画面のようにPasswordのテキストボックスにフォーカスがあります。

Ws000025

それではパスワードを入力してLoginボタンをクリックしてみましょう

Ws000026

ブラウザーに下記のように入力したUserとPasswordが表示されればOKです。

Ws000027

次回はMySQLというDBシステムに対して問い合わせ処理を行う画面を作成する予定です。

このその2のテキストをPDF化しました。ご自由にダウンロードしてお使いください。

脱C/Sプログラマー計画第2回テキスト

| | コメント (0) | トラックバック (0)

脱C/Sプログラマー計画 その2-3

2-2からの続き

■キー入力制御JavaScript

3つの関数を作成します。
1.FirstFocus関数  Pageをロードした時に最初のコントロールにフォーカス設定。
2.NextFocus関数   テキストボックスなどでEnterキーを入力した時に次のコントロールにフォーカス設定。
3.CheckSubmit関数 入力値のチェックを行い、エラーのない場合、サーバへ入力値をsubmitします。

□FirstFocus()
JavaScriptについて詳細は説明しません。ネット検索すればいくらでも参考になるサイトを発見できます。
Ws000016_2

formsオブジェクトのform1のエレメントの0番目にフォーカスを設定するコーディングです。
JavaScriptの構造は下記のようになります。

Function 関数名 (引数1,引数2、・・・) {
    スクリプト1;
    スクリプト2;
    スクリプト3;
    続く…
}

スクリプトの最後が;で終わるコーディングはC系の言語と同じでCプログラマーであれば簡単に習得可能です。
return 戻り値;を関数内にコーディングすることで戻り値を設定することも可能です。

□NextFocus()

Ws000018

eventオブジェクトのkeyCodeプロパティからEnterキー(Chr(13))が押されたかをif文で判断します。
自分のエレメント番号を引数で受け取り、自番号の次番号のエレメントへフォーカスを設定します。

□CheckSubmit()
Ws000019 

19行目varでformオブジェクトの宣言を短くします。
コーディング内で何度も参照する変数は短くしたほうがコーディングしやすくなります。
同じように20行目から21行目の宣言では、フォームの二つのテキストボックスの値を変数に代入しています。
このuserとpassはHTMLでテキストボックスにnameプロパティで指定したエレメント名です。
次にuserとpassの入力がブランクの場合にエラーメッセージを表示してエラーのあるエレメントにフォーカスを設定する判定を入れます。エラーメッセージはalertで出力します。(24,27行目)
いずれのテキストボックスもブランクでない場合、submit関数でサーバへ入力値をPOSTします。

ファイル名をkeyhandler.jsでC:/WWW/htdocsに保存します。

ここまででクライアント側で処理するスクリプトの準備が終わりました。一般の企業で必要なオンラインシステムの画面を作成する上で必要な基本はこの内容で取得できます。後は枝葉を学んでいけばいいのです。

2-4へ続く...

| | コメント (0) | トラックバック (0)

脱C/Sプログラマー計画 その2-2

  2-1からの続き

たとえばよく見かける例としてGoogleの地図情報を自分のコンテンツで利用して提供するサービスです。
これはあらたに地図データを作成する必要はなく、自分のコンテンツ内でGoogleのコンテンツにAPIを使用して問い合わせを行い、結果を自分のコンテンツに表示させるだけです。つまり世界中のWebサーバへ問い合わせを行い、情報収集結果を取得する事ができるのです。キーワードはURL(Uniform Resource Locator)です。

【コラム PHPが実行できない】
よくApach+PHPで"http://localhost/XXXX.php"は実行できるのですが、HTMLで入力した結果をPOSTして別のPHPを実行させると「真っ白画面」、「PHPコードがそのままブラウザーに表示される」などの現象Q&Aを見かけます。 "http://localhost/XXX.php"が正常に実行できるのであれば、コードに誤りがないかぎり確実にPHPソースは動作します。localhost のURLでPHPが動作しているということは、Apachのサーバが正常にPHPのモジュールをロードできているからです。上記の現象はApachがPOSTされた結果のPHPを処理していません。

Ws000007

ApachはWebサーバです。URLを正しく指定しないとうまく処理できません。最初のHTMLはエクスプローから起動していませんか?
URLの入力にC:\WWW\htdocs\sample2.htmlとディレクトリーパスが表示されていた場合、これはURLではありません。Apachでは処理できません。Apachはhtt://サーバ/で入力された場合、その指定したURLのコンテンツを実行します。つまり起動にはURLを指定する必要があります。

■ログイン画面を作る

さてクライアントサイドのログイン画面を作成します。
HTMLについての詳細な情報はネット上で検索をして調べてください。
各タグセクションについて解説します。

□<head></head>
ヘッダーではページタイトルとキー制御のJavaScriptの指定を行います。
Ws000008

Scriptに外部のJavaScriptを指定しています。これはキー入力制御を共通で処理するようにするためです。ここに直接コーディングすることも可能ですが、それですとクライアント側にしょぼいコードを公開することになるので止めます。

□<body>
Ws000009_2

Pageが初期ロードされた時の処理をonloadイベントで指定します。これは<head>で指定したJacaScriptの関数を指定します。(FirstFocus())
他のbody属性指定はページのカラーを指定しています。
スタイルシートを利用してもよいかもしれません。
私のコーディングスタイルですが、たくさんの属性を指定する場合、<>の>を改行します。コードの見易さもありますが、この講座の最後の方でExcelのVBAを利用した自動フォーム作成ではこの属性1つに1行というコードの記述方法が重要になってきます。

□<body>内の<script>

Ws000011_2

<head>で指定したJavaScriptで記述したキー入力制御関数をコーディングします。JavaScriptは後述で説明します。

□<form>

Ws000012

formの名前を指定します。デフォルトでform1にします。これはJavaScriptの関数で利用する共通の名前です。actionプロパティに画面のボタンがクリックされた時に処理するPHPを指定します。
methodプロパティにはサーバに対する動作を指定します。サーバへ向けて上り(送信)ですから”post”を指定します。

□<table></table>
入力用テキストボックスと入力した結果をサーバへPOSTするためのボタンのコントロールを定義します。

1.User入力

formの名前を指定します。デフォルトでform1にします。これはJavaScriptの関数で利用する共通の名前です。actionプロパティに画面のボタンがクリックされた時に処理するPHPを指定します。
methodプロパティにはサーバに対する動作を指定します。サーバへ向けて上り(送信)ですから”post”を指定します。

□<table></table>
入力用テキストボックスと入力した結果をサーバへPOSTするためのボタンのコントロールを定義します。

1.User入力

Ws000013_2

ログイン画面なのでオートコンプリートをOFFにします。
また入力長を制限するためmaxlengthで入力テキストの数を指定します。onkeydownイベントではEnterキーを入力した場合に次のコントロールへフォーカスが移動する制御を指定します。これもJavaScriptで作成した関数NextFocus()を指定します。
NextFocus(this)のthisはフォームオブジェクトインスタンスを関数へ引継ぎます。onfocusイベントはこのテキストボックスにフォーカスが設定された場合の動作を指定しています。this.select()はテキストボックスに文字が入力されている場合、全選択します。

2.Password入力
Ws000014

パスワード用のテキストボックスのため入力文字をマスクします。typeプロパティにpasswordを指定します。
後の指定はUserのテキストボックスと同じです。

3.Loginボタン
Ws000015_2

Typeにbuttonを指定します。
Onclikイベントにボタンをクリックした時に実行するJavaScriptの関数を指定します。(CheckSubmit())

以上でHTMLのコードが完成しました。
ファイル名をsample2.htmlでc:/WWW/htdocsに保存します。(apachのコンテンツを格納するディレクトリー)
次にキー制御のJavaScriptをコーディングします。

2-3へ続く...

| | コメント (0) | トラックバック (0)

脱C/Sプログラマー計画 その2-1

■メニュー

今回は3つのコードを書きます。

1.クライアントサイドのログインHTML    sample2.html
2.画面キー入力制御JavaScript          keyhandler.js 
3.サーバサイドの受信結果を表示するPHP sample2.php

それぞれのソースは各番号のソース名にリンクしていますので、ダウンロードして内容を確認の上、自由にお使いください。※ファイル名で右クリックして対象をファイルに保存を選択して保存してください。

3つのコードでブラウザーにログイン画面を表示して、入力した結果をブラウザーに表示するまでの手順を紹介します。

もちろん色々な手順があります。ツールを使用して作成するのがもっとも簡単なように思えますが、一番単純な方法、エディターやメモ帳とExcelだけでWebシステムを組めれば、どんな環境でもこのアプローチで問題を解決できるはずです。

私を含めて長年C/S型のシステム開発従事してきた開発者にとって一番得意な開発手法に持ち込めれば、ずいぶんと理解しやすいはずです。

     プラットホーム非依存

WebサーバにApachを選択した時点で、完全にC/Sシステムというプラットーホーム依存システムから卒業できます。もちろんサーバのApachWindowsまたはUnixOS上で稼動させる必要がありますが、それを使用するクライアントがどのOSからでもアクセスが可能となった時点でプラットホーム非依存となります。

いままで特定のOSに依存していたプログラムは世界中の色々なブラウザーの上で稼動することが可能となります。

     WebシステムとC/Sシステムの違い

もちろん開発言語や開発のスタイルに違いはあります、決定的な違い、それはC/Sシステムではディレクトリーに格納したプログラムやファイルを指定して処理を実行します。(Fig3)一方のWebシステムは処理させるHTMLJavaPHPなどのリソースはブラザーにURLを指定することで処理を行うところに決定的な違いがあります。(Fig4)Ws000000_3

(Fig1)

上記のアドレスhttp://localhost/を指定することでApachでドキュメントフォルダーに指定したディレクトリーに格納されたリソースが表示されます。(私の場合はC:/WWW/htdocs

前回作成したphpexec.vbsを参照すると、エクスプロラーから起動したディレクトリー付のPHPソースからファイル名を取り出して、

URLhttp://localhost/と組み合わせてブラウザーを起動させています。(18行目)

Ws000004

Ws000000

(fig3)

Ws000005

(Fig4)

WebシステムではURLによって参照するWebのコンテンツがそれぞれ複雑に絡み合った状態で利用することができます。

2-2へ続く...

| | コメント (0) | トラックバック (0)

2010年1月22日 (金)

脱C/Sプログラマー計画 その1

■前提

  この内容を理解するには
  下記のモジュールをWindows XP SP2以上のOSにインストールしなければ
  なりません。(2010/01/22)
  Apach2
apache_2.2.14-win32-x86-no_ssl.msi
  PHP     php-5.3.1-Win32-VC9-x86.msi
  インストールhttpd.confとphp.iniについては下記URLが最高でしょう。
  Apach
http://www.phppro.jp/phpmanual/install_win32_1.php#apache
  PHP    http://www.phppro.jp/phpmanual/install_win32_2.php

■PHPは簡単

    Cプログラマーなら
     <?php
        ~ C ミックス VB 同等のコーディング
     ?>
    でなんとプログラムが動きます。

    サーバーサイドとかクライアントサイドなんか気にしない。
    C/Sプログラマーだからしょうがないか(^◇^)
    とりあえずブラウザーから検索文字を入力して、DB(MySQL)を検索して
    結果をブラウザーに表示するまでを説明しようよとしています。
    無駄な知識は極力説明しません。疑問に思った事は逆に自分で調べる。
    といういい加減な説明です。
    この内容で何か問題が発生し場合、ご容赦をお願いいたします。
    一切当方で責任を負いかねます。あくまでも自己責任でお願いします。

■サンプル1

    おきまりの Hollow Worldをローカルブラウザーに表示してみましょう。

    <?php
        $var = "Hollow World";
        echo $var;
    ?>

    テキストエディター(メモ帳など)を起動して上記をコピペーして
    ファイル名をsample1.phpで保存してください。
    ちなみに私はPHPのドキュメントはc:/WWW/htpdocs/以下に格納しています。
    (通常ディレクトリーはWIN系は\で記述しますが/で記載します。)
    Apachのhttpd.confに定義してあります。その前提で説明していきます。

    そしてブラウザーを起動して、URLに http://localhost/sample1.php
    入力するとなんと下記のようにブラウザに表示されます。
    ピピンときましたか?

Sample1_2

    実際、コーディングしたPHPを都度ブラウザーにURL入力して実行する
    のは効率的でないので、エクスプローラーからPHPを即実行な仕掛を
    作ります。

■PHP起動バッチとWSHでPHP起動ラッパーVBS作成

    【バッチ】
     テキストエディターを起動してコーディング内容をコピーペの後、
    下記名前でc:/WWW/htpdocs/に保存します。

     名前 : phpexec.bat

     コーディング : cscript //nologo phpexec.vbs %1

     【WSH】
      phpをブラウザー実行するラッパーを作成します。
      作成方法はバッチと同じ。

      名前 : phpexec.vbs

      コーディング :
      ↓------------------------------------------↓
      Option Explicit

      Dim args
      Dim objFSO
      Dim strFile
      Dim strURL
      Dim objShell

      Set args = WScript.Arguments

      If args.Count <> 1 Then
          WScript.Echo "引数が正しくありません。"
          WScript.Quit()
      End If

      Set objFSO = WScript.CreateObject("Scripting.FileSystemObject")
      strFile =  objFSO.GetFileName(args(0))
      strURL  =  "
http://localhost/" & strFile

      WScript.Echo strURL

      Set objShell = CreateObject("Wscript.Shell")
      objShell.Run(strURL)
      ↑------------------------------------------↑

      この二つのファイルを作成したらPHPファイルのファイル関連付けを
      上記のphpexec.batに行います。

      エクスプローラーでsample1.phpを選択⇒マウス右
      ⇒プロパティ⇒変更⇒参照でphpexec.batを選択します。

      これでエクスプローラーでsample1.phpをダブルクリックすると
      DOSプロンプト画面が表示されてさきほどブラウザーでURLを入力
      して表示した同じHollow Worldが表示されます。

     これで常にPHPはエクスプローラーから即実行可能になります。

     もちろんApachのサービスが動いている必要があります。

■謝辞
      ApachとPHPの開発に携わるすべての開発者に感謝します。

| | コメント (0) | トラックバック (0)