HomePage講座     Yukiの休息所
 Yukiの休息所(趣味の部屋)
 ホームページ講座
 CGI活用講座
次の項目へ>>
<<前の項目へ

 CGIとPerlの知識を蓄えよう

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

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

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

 出来れば、自宅にサーバ環境を構築して、Perlをインストールし、 ローカルでテスト出来る環境が望ましい。
 
 では、CGI活用講座第4回の開始です。

    
 CGI,活用講座、第4回 
 今回は、入力フォームのテスト、
 Download出来る様にしておきます、 「http://pc-sup.com/sub/index.html」、 旅の思いで写真集「当講座の教材Pageです」

 ダウンロードした教材は、アップロード用です、基礎講座を参考に、 Perlのパスをサーバにあわせてください。
 HTML活用講座第6回とほぼ同じ教材になりますが、 多少違いがありますので、別にご準備願います。
 
 
 ファイル名「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"は、標準入力を使います、転送容量が大きい。
 転送方法が違えば受信方法も変わるわけですね。
 
 では、受信側の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なら、標準入力から読み込み。
 サーバの環境変数から、取得方法を決めます。
 
 
 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回を終了します。