やろやろCGI

いらっしゃいませ。

１．データのやり取りを確認する。

下のようなtest.ｈｔｍｌファイルを作ります。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#00D500"> <FORM METHOD="POST" ACTION="http://www.geocities.co.jp/SiliconValley/3516/test.cgi"> 名前<INPUT NAME="name" SIZE="20" MAXLENGTH="20"><INPUT TYPE="SUBMIT" VALUE="送信"> </FORM> </BODY>  </HTML>

ここからが、test.cgi のなかみです。 #!/usr/local/bin/perl print <<EOF; Content-type: text/html\n\n <html><head><title>test</title></head> <body bgcolor="#000000" text="#ffffff"> $ENV{'QUERY_STRING'} </body> </html> EOF exit;

このふたつのファイルを、サーバの同じフォルダ内に転送します。
CGIのファイルは、かならずテキストモードで転送してください。そして、パーミッションは、705に設定してください。
あとは、ブラウザで test.html を実行すると、下のような表示になります。このフォームも実行できます。
サンプル１

テキストボックスに名前を入力して、送信ボタンを押すと、

name=（入力した名前）

という画面になりましたか？
これは、テキストフォームに「name」という名前をつけて、入力データとセットにして送った内容を、表示しています。

２．データを別のファイルに保存する。

logfile.dat（名前は何でもいい）というファイルを作ります。このファイルをサーバに転送しておいてください。

test.cgiを、下のように書き換えてください。
ＧＥＴとＰＯＳＴの自動判別や、データの出し入れは、フォームのデータが複数になった時に役立ちます。 #!/usr/local/bin/perl #####ＧＥＴとＰＯＳＴの自動判別 if ($ENV{'REQUEST_METHOD'} eq 'POST') { read(STDIN,$str,$ENV{'CONTENT_LENGTH'}); }else{ $str = $ENV{'QUERY_STRING'}; }; @hairetu = split('&', $str); #####取り出したデータを連想配列に代入 foreach $i (@hairetu) { ($name, $value) = split('=', $i); $rensou{$name} = $value; } #####ファイルを開いてデータを格納 open(FILEIN, ">logfile.dat"); print FILEIN "$rensou{'name'}\n"; close(FILEIN); #####格納したデータを取り出す。 open(FILEIN, "<logfile.dat"); $itigyou = <FILEIN>; close(FILEIN); #####ｈｔｍｌで$itigyouを表示する。 print <<EOF; Content-type: text/html\n\n <html><head><title>test</title></head> <body bgcolor="#000000" text="#ffffff"> $itigyou </body> </html> EOF exit;

サンプル２

テキストボックスに名前を入力して、送信ボタンを押すと、

（入力した名前）

という画面になりましたか？
最初の入力画面では、データをそのまま表示していましたが、今回は、データを生成してファイルに保存して、またそれを取り出して出力するという方法をとっています。
logfile.datのなかみを見てみると、入力した名前が書き込まれているはずです。

３．データを追加保存して、きれいに表示する。

ファイルにデータを保存できたのはいいけど、前回のデータに上書きしてしまっています。そこで、追加保存をして、しかもｈｔｍｌではきれいに表示しようと思います。

test.cgi の「#####ファイルを開いてデータを格納（スクリプトの真ん中あたり）」以下４行を下のように書き換えてください。 #####名前データに改行文字（\n）をくっつける。 $data = "$rensou{'name'}\n"; #####ファイルの内容を配列（log）に移す open(FILEIN, "logfile.dat"); @log = <FILEIN>; close(FILEIN); #####前回までのデータ（@log）に、新データ（$data）を追加する。 #####unshift は、@log の左側に $data を追加します。 unshift(@log,$data); #####追加したデータを、デコードしながら格納する。 #####foreach(@log){ s/ +//g; print FILEIN "$_";}を、そのまま読むと、 #####配列(@log)をひとつずつ読み込む間、一個以上（+）のスペース（）をすべて（g）削除（//の間が空だから） #####して、FILEIN(logfile.dat)に書き込む。 #####読み込まれたデータは、$_ に格納されている。 open(FILEIN, ">logfile.dat"); foreach(@log){ s/ +//g; print FILEIN "$_";} close(FILEIN); 「#####格納したデータを取り出す。」の項目４行を削除してください。
「#####ｈｔｍｌで$itigyouを表示する。」の行から、EOF の行までを下のように書き換えてください。
print文を使用する場合は、「"」で囲ったり、「\n」「\」「;」、を付けなければなりません。 print "Content-type: text/html\n\n"; print "<html><head><title>test</title></head>\n"; print "<body bgcolor=\"#000000\" text=\"#ffffff\">\n"; print "<H3>書き込まれたデータリスト</H3>\n"; foreach(@log){ $i++; print "お名前$i　：　$_<BR>\n"; } #####ここから下の５行は、適当に書き換えてください。 print "<div align=\"right\"><a href=../../../../www.geocities.jp/server-errors/not_found.html>\n"; print "<img src=../../mail_i.gif/" alt=\"メール\" align=\"right\"\n"; print " width=\"69\" height=\"55\" border=\"0\"></a>\n"; print "<strong><br>作者へメールを送るには、<br></strong>\n"; print "<a href=../../../../www.geocities.jp/server-errors/not_found.html>ここ</a>\n"; print "<strong>をクリックしてください。</strong>\n"; print "</BODY></HTML>\n";

サンプル３

書き込まれたデータリストお名前1　：　ichiro お名前2　：　tasaki お名前3　：　tasaki お名前4　：　test お名前5　：　teruyo お名前6　：　tasaki こんな感じで表示されるはずです。データ以外の部分は、どんどんアレンジしてください。

４．日本語を、使えるようにする。

今回は、jcode.pl というスクリプトを使用して、日本語が使えるようにしてみたいと思います。前回のフォームで日本語を入力すると「%82%C4%82%E9%82%E6」というような内容のデータが表示されてしまいます。

まず、　test.cgi の#####ＧＥＴとＰＯＳＴの自動判別（３行目）の上の行に「require './jcode.pl';」という１行を追加してください。これは、jcode.pl というファイルを使いますよ。と宣言しています。

次に、 #####取り出したデータを連想配列に代入 foreach $i (@hairetu) { ($name, $value) = split('=', $i); $rensou{$name} = $value; } test.cgi のなかの上の５行を、下の１０行に書き換えてください。 #####取り出したデータを連想配列に代入 foreach $i (@hairetu) { ($name, $value) = split('=', $i); $value =~ tr/+/ /; #スペースのデコード $value =~ s/%([0-9a-fA-F][0-9a-fA-F])/pack("C",hex($1))/eg; &jcode'convert(*value, 'sjis'); #日本語は、SJISに統一。ここで、jcode.pl を使用する。 $value =~ s/</</g; #タグの処理 $value =~ s/>/>/g; #タグの処理 $rensou{$name} = $value; #配列に保管 } 追加されたものは、デコード処理をするものです。

jcode.pl を名前を付けて保存をしてください。全て選択して、エディタに貼り付けてもいいです。ファイル名は「jcode.pl」にして、test.cgi と同じディレクトリに転送してください。

書き込まれたデータリストお名前1　：　%82%BD%82%B3%82%AB お名前2　：　てるよお名前3　：　てるよお名前4　：　%82%C4%82%E9%82%E6 お名前5　：　louis お名前6　：　test お名前7　：　ichiro お名前１と、お名前４は、サンプル３から送信したものです。サンプル４から送信すると、お名前２、３のようになります。

　 サンプル４

《つづく》

作者へメールを送るには、
ここをクリックしてください。

このホームページのホストはです。無料ホームページをどうぞ！

やろやろCGI

１．データのやり取りを確認する。

２．データを別のファイルに保存する。

３．データを上書き保存して、きれいに表示する。

４．日本語を使えるようにする。

１．データのやり取りを確認する。

２．データを別のファイルに保存する。

３．データを追加保存して、きれいに表示する。

４．日本語を、使えるようにする。