YukisRoom 「ホームページ作成講座」 CGI活用講座

HTML基礎講座

HTML活用講座

CGI基礎講座

CGI活用講座

CGI活用講座第4回、CGIテスト編(2)です。

CGI活用講座、第4回は、テスト編です。

CGIはHTMLの知識が無いと、扱えない物と思ってください、 HTMLをPerlで記述すると思っていただいて良いと思います。
使用ソフトは、TeraPadとFFFTPのみ、

その他、必要な物は、CGI&Perlが使えるサーバーですね。

出来れば、自宅にサーバ環境を構築して、Perlをインストールし、ローカルでテスト出来る環境が望ましい。

では、CGI活用講座第4回の開始です。

今回は、入力フォームのテスト、
Download出来る様にしておきます、 教材DownLoad Pageです」

ダウンロードした教材は、アップロード用です、基礎講座を参考に、Perlのパスをサーバにあわせてください。
HTML活用講座第6回とほぼ同じ教材になりますが、多少違いがありますので、別にご準備願います。

alphaEDIT

ファイル名「katuyou4.html」
HTMLタグは、大文字・小文字を区別しません。
途中のスペースも適当で大丈夫なんですが、
もっと大きなプログラムでは、見易さを意識するようになりますね。
何処で、改行しても、HTMLに変化が出ないことも確認できます。

3行目、<FORM action="katuyou4.cgi" method="GET">お名前<INPUT type="text" name="name">
フォームの最初の部分です、最初から、FORMタグ+actionは起動するCGIファイルを指定、methodは転送方式の指定、
2項目目、お名前は、そのまま表示される部分、INPUTタグ+typeは入力形式の指定、name="name"は、keyの設定、入力内容を"key"に関連付けて転送します。

4行目、性別<INPUT type="radio" name="sex" value="男"> 男 / <INPUT type="radio" name="sex" value="女">女<BR>
性別は、そのまま表示される部分、INPUTタグ+type="radio"は、ラジオボタンの設定、name="sex"は、keyの設定、value="男"は内容を"男"に指定してます。
”男/”は、そのまま表示、後半は、同じ事の繰り返し。

5行目、<INPUT type="submit" value="送信"> <INPUT type="reset" value='クリア"'></FORM><br>
INPUTタグ+type="submit"は送信ボタンの意味、value="送信"はボタンに表示する内容です。、後半は”クリアボタン”です。

7行目以降も、同じような物ですが、一箇所だけ違いがあり、method="GET"がmethod="POST"に変わっています。

"GET"は、URL転送とでも言うのでしょうか、実際URLの後につけて転送されます、転送容量は少ない。

"POST"は、標準入力を使います、転送容量が大きい。
転送方法が違えば受信方法も変わるわけですね。



alphaEDIT

では、受信側のCGIを入力してください。
ファイル名「katuyou4.cgi」

こちらは、Perlで書いたCGIファイルなので、大文字・小文字に注意して入力してください。

じつは、このプログラムは、小生が勉強中にDownloadして物が原型です。

其のままでは、動かなかったので、あちこち弄って、動くようになった時には、誰の物かわからない状態に、原文に心当たりがある場合は、ご連絡下さい。

本題に戻りますが、このファイルはCGIの原型ともいえる総ての要素が入ってますから、順に説明をしていきます。

1行目、#!C:/Perl/bin/perl
「perl.exe」の場所を指定するだけなんですが、改行コードにも注意が必要。

下にも、一行空の行が必要、見かけが同じでも要注意。



3行目、require "jcode.pl";
”jcode.pl”ライブラリの使用宣言

5行目、print "Content-type: text/html; charset=EUC-JP?n?n";
CGIファイルのヘッダー、使用Codeとテキスト形式の指定

9行目から、if ($ENV{'REQUEST_METHOD'} eq "POST") {read(STDIN,$buffer, $ENV{'CONTENT_LENGTH'});}
転送形式がPOSTなら、標準入力から読み込み。
サーバの環境変数から、取得方法を決めます。


alphaEDIT

12行目から、else {$buffer = $ENV{'QUERY_STRING'};}
先ほどの続きで、POSTで無い場合は、GETですから、環境変数から入力できます。

18行目、@pairs = split(/&/,$buffer);
$bufferを"&"で切り分けて、配列@pairsに代入します。

20行目、foreach $pair (@pairs) {
@pairsから1行を取り出し、$pairsに代入、@pairsが空になるまで、以下の処理を繰り返す。とても便利なコマンド。

23行目、($name, $value) = split(/=/, $pair);
$pairsを"="で切り分けて、$name&$valueに代入します。

26行目、$value =? tr/+/ /;
'$valueの(+)を( )スペースに置き換え



29行目、$value =? s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$valueを16進数に分解して、日本語Codeに変換します。
33行目から、&jcode'convert(*name,'euc');&jcode'convert(*value,'euc');
上段の*nameは、中身が半角英文字ですから、Code変換の意味は無いが、汎用化して有るようです。
下段、*valueは、ブラウザからの転送時に変換されてますから、"euc"に再変換します。

この変換は、表示したいCodeにあわせるもので、小生は全体を"euc-jp"を指定していますから、ここでも"euc"変換します。

ちなみに、jcode.plでは、JIS, EUC, シフトJISの3種に対応しています。

$fome{$name} = $value;
$fomeはハッシュ配列の要素指定時の表記方法、要素は「name」と「sex」が作られます。

23行目で$nameと$valueに代入してあります。
37行目、@num[$i] = $value; $i=$i +1;
配列変数の@num($i)に、$valueから代入します。

42行目、print <<"end";
"end"があるまで、連続print、とても便利な機能です。
後は、HTMLの標準タグを出力するだけですね。

呼び出しは「http://localhost/cgi/katuyou4.html」をアドレスバーに入れます。

ローカルにサーバが無い方は、前回同様の書き換え&アップロードが必要です。
これで、CGI活用講座第4回終了ですが、ライブラリのダウンロード方法を書いておきます。

「jcode.pl」のダウンロードは、以下のリンクから、「jcode.pl-2.13」を右クリックから名前をつけて保存、ファイル名「jcode.pl」で保存してください。
ftp://ftp.sra.co.jp/pub/lang/perl/sra-scripts/

「cgi-lib.pl」のダウンロードは、以下のリンクから、「Version 2.18」を右クリックから名前をつけて保存、ファイル名「jcgi-lib.pl」で保存してください。
http://cgi-lib.berkeley.edu/

どちらも簡単ではありませんが、これもハードルになりますか?

CGI活用講座、第4回を終了します。

前のページ ページトップ 次のページ
お問い合わせはこちらに、 小生宛のMail
Copyright© 2010 YukisRoom 葵Yuki. All Rights Reserved