やろやろCGI

いらっしゃいませ。

1.データのやり取りを確認する。

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

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

4.日本語を使えるようにする。


1.データのやり取りを確認する。

下のようなtest.htmlファイルを作ります。 <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#00D500"> <FORM METHOD="POST" ACTION="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 を実行すると、下のような表示になります。 このフォームも実行できます。
サンプル1
名前

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

name=(入力した名前)

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

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

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

test.cgiを、下のように書き換えてください。
GETとPOSTの自動判別や、データの出し入れは、フォームのデータが複数になった時に役立ちます。 #!/usr/local/bin/perl #####GETとPOSTの自動判別 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); #####htmlで$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;
サンプル2
名前

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

(入力した名前)

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

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

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

test.cgi の「#####ファイルを開いてデータを格納(スクリプトの真ん中あたり)」以下4行を下のように書き換えてください。 #####名前データに改行文字(\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); 「#####格納したデータを取り出す。」の項目4行を削除してください。
「#####htmlで$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"; } #####ここから下の5行は、適当に書き換えてください。 print "<div align=\"right\"><a href=\"mailto:oteru\@geocities.co.jp\">\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=\"mailto:teruyo\@mvg.biglobe.ne.jp\">ここ</a>\n"; print "<strong>をクリックしてください。</strong>\n"; print "</BODY></HTML>\n";
サンプル3
名前

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

4.日本語を、使えるようにする。

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

まず、 test.cgi の#####GETとPOSTの自動判別(3行目)の上の行に「require './jcode.pl';」という1行を追加してください。これは、jcode.pl というファイルを使いますよ。と宣言しています。

次に、 #####取り出したデータを連想配列に代入 foreach $i (@hairetu) { ($name, $value) = split('=', $i); $rensou{$name} = $value; } test.cgi のなかの上の5行を、下の10行に書き換えてください。 #####取り出したデータを連想配列に代入 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/</&lt;/g; #タグの処理 $value =~ s/>/&gt;/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 お名前1と、お名前4は、サンプル3から送信したものです。サンプル4から送信すると、お名前2、3のようになります。
  サンプル4
名前


《つづく》
mail
作者へメールを送るには、
ここをクリックしてください。
mite

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