Download presentation
Presentation is loading. Please wait.
1
情報アプリケーション１ 2006年 10月 5日 第三回資料 担当 重定 如彦
2
目次 CGIによるHTMLの記述 Perlの基礎知識１４－１６ 占いCGI（HTMLバージョン） アクセスカウンタの仕組み
データの送信とフォーム クイズCGI
3
CGIによるHTMLの記述 先週までの例では、単なるテキストを表示するCGIであったが、一般的なCGIはHTMLを作成する CGIでHTMLを記述するには、print関数を使って、HTMLを順番に出力すれば良い ただし、print関数を普通に使ってはプログラムが以下のように長く、わかりにくくなってしまう print “<HTML>\n”; print “<HEAD>\n”; print “ <TITLE>タイトル</TITLE>\n”; print “</HEAD>\n”; ・・・以下省略
4
Perlの基礎知識１４ ヒアドキュメント（here document） print関数を連続して使用する場合は、ヒアドキュメントと呼ばれる方法を使えばより簡単に、しかもわかりやすく記述できる ヒアドキュメントは以下のように記述する print <<DOCUMENT； 出力したい文字列 （何行でも記述可能） ・・・・・ DOCUMENT ヒアドキュメンはある文字列（上記の例ではDOCUMENT）の間に 記述された文字列がそのまま出力される 通常と異なり、文字列を“”で囲む必要はなく、全角文字も記述可能 改行がそのまま反映されて出力されるので、\nを記述する必要はない 最初のprintの行以外は行の最後に ； を記述しない 赤い文字の部分は任意の文字列を 記述することができるが、必ず同じ 文字列を記述しなければならない 他と区別するため、一般にすべて 大文字で記述する慣習がある
5
Perlの基礎知識１５ ヒアドキュメントの記述例 下記のプログラムは、どちらも全く同じ動作を行う
print <<HTML_DOCUMENT; <HTML> <HEAD> <TITLE>タイトル</TITLE> </HEAD> </HTML> HTML_DOCUMENT print “<HTML>\n”; print ”<HEAD>\n”; print “ <TITLE>タイトル</TITLE>\n”; print “</HEAD>\n”; print “</HTML>\n”;
6
占いCGI１（HTMLバージョン） G:\wwwの｢uranai.cgi」をメモ帳で開き、赤色の部分を追加せよ
#!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; print <<HTML_DOCUMENT; <HTML> <HEAD> <TITLE>占い</TITLE> </HEAD> <BODY> HTML_DOCUMENT print "あなたの運勢は"; $ransuu = int(rand(4)) + 1; この部分は変更なしなので省略 else { print "凶"; } print "です。<BR>\n"; print "</BODY>\n"; print "</HTML>\n"; 注：演習室のコンピュータでは法政大学の ウェブサーバのファイルをG:\wwwから 直接編集可能なので、先週説明した ファイルのアップロード作業は省略する 注：この部分もヒアドキュメントを 使って記述可能だが、このスライド ではスペースの都合上使っていない
7
Perlの基礎知識１６ print文内への変数の埋め込み print文内に変数を記述すると、その変数の中身を出力する 記述例： $text = “大吉”; print “あなたの運勢は$textです\n”; 上記のプログラムを実行すると「あなたの運勢は大吉です」が出力される 変数と文字列がくっつくのが紛らわしくて嫌な人は、以下のように ， で区切って記述しても良い print “あなたの運勢は” , $text , “です\n”;
8
占いCGI２（HTMLバージョン） G:\wwwの｢uranai.cgi」をメモ帳で開き、赤色の部分を変更せよ
#!/usr/local/bin/perl この間は同じなので省略 HTML_DOCUMENT $ransuu = int(rand(4)) + 1; if ($ransuu == 1) { $text = "大吉"; } elsif ($ransuu == 2) { $text = "中吉"; elsif ($ransuu == 3) { $text = "小吉"; else { $text = "凶"; print "あなたの運勢は$textです。<BR>\n"; print "</BODY>\n"; print "</HTML>\n";
9
占いCGI３（HTMLバージョン） ヒアドキュメントの中でも同様に変数を記述することができる G:\wwwの｢uranai.cgi」をメモ帳で開き以下のように変更せよ #!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; $ransuu = int(rand(4)) + 1; if ($ransuu == 1) { $text = "大吉"; } elsif ($ransuu == 2) { $text = "中吉"; elsif ($ransuu == 3) { $text = "小吉"; else { $text = "凶"; ・・・右上に続く・・・ print <<HTML_DOCUMENT; <HTML> <HEAD> <TITLE>占い</TITLE> </HEAD> <BODY> あなたの運勢は$textです。<BR> </BODY> </HTML> HTML_DOCUMENT 先に$textの中身を設定してから 出力しなければならない点に注意！
10
アクセスカウンタの仕組み（１） アクセスカウンタの仕組みは以下の通り
ウェブサーバ内にそのウェブページが何回アクセスされたかを記録するファイルを用意する ウェブページがアクセスされる（=cgiが実行される）とcgiは アクセス回数を記録したファイルを読み込み、その数字に １を足してファイルの中身を更新する 画面にアクセス回数を表示する なお、アクセス回数を記録したファイルはウェブサーバ内に 保存されているので、Javascriptのような、ウェブブラウザ側で プログラムを実行する方法ではアクセスカウンタは作れない
11
アクセスカウンタの仕組み（２） ウェブサーバ 1.CGIにアクセス CGIプログラム ２．ファイルを開き 数字を読み込む
２．ファイルを開き 数字を読み込む counter.cgi ４．１１と書かれた返信 メッセージを作成し、 返信する ３．数字に１を足し、 ファイルに書き込む （１０→１１） １１ １０ count.txt ウェブサーバ
12
Perlの基礎知識１７ ファイル操作 ファイル操作は以下の手順で行う
ファイルの読み書き 後述する方法で、オープンしたファイルの読み書きを行う ファイルのクローズ ウィンドウズで、編集が終了したウィンドウを閉じるのと同様に、 ファイル操作が終了した後はファイルをクローズ（閉じる）する
13
Perlの基礎知識１８ ファイルのオープン ファイルのオープンにはopenという関数を使う open ファイルハンドル, “処理モードとファイルのパス”； ファイルハンドルとは、オープンしたファイルを操作する際に使用 するファイルの別名であり、以後はファイル名ではなく、 ファイルハンドルを使ってファイルの操作を行う 一般に書込み用にオープンした場合は IN を、読み込み用に オープンした場合は OUT を使うことが多い 処理モードとは、オープンしたファイルにどのような操作を行うかを 指定する記号でファイルのパスの直前に次のスライドの記号を書く
14
Perlの基礎知識１９ ファイルのオープン（その２） 処理モードの記号は以下の通り
なお、 ＞ と ＋＞ はファイルオープン時にファイルの中身が空になる 以下のプログラムはcount.txt というファイルを読み込みモードで開く 以後は IN というファイルハンドルを使ってファイルの中身を読み込むことができる open IN, “<count.txt”; ファイルのクローズ close “ファイルハンドル”； と記述することで、ファイルをクローズできる 記号 意味 ＜ 読み出し ＋＜ 読み書き両用 ＞ 書き込み ＋＞ ＞＞ 追加書き込み
15
Perlの基礎知識２０ ファイルの読み込み <ファイルハンドル> と記述することによって、ファイルの中身を最初の行から 順番に１行ずつ読み込むことができる プログラム例： open IN, “<aisatu.txt”; $ichigyoume = <IN>; $nigyoume = <IN>; close IN; 右のような内容のaisatu.txtがある時、 上記のプログラムを実行すると $ichigyoume に こんにちは $nigyoume に こんばんは という文字列が代入される 注：変数名の最初の1文字を数字にすることはできないという決まりが あるため、 $1gyoume という名前の変数を使うことはできない こんにちは こんばんは aisatu.txt
16
ファイル読み込みCGI まず、メモ帳に以下のプログラムを入力し、デスクトップに counter.cgi と
いう名前のファイルで保存すること。次に、ｆｆｆｔｐを使ってウェブサーバに アップロードしファイルの属性を変更すること #!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; open IN, “<count.txt”; $ichigyoume = <IN>; $nigyoume = <IN>; print "一行目は $ichigyoume 二行目は $nigyoume です\n"; close IN； 次に、新しくメモ帳を開き、１行目に「こんにちは」、2行目に「こんばんは」と 入力し、count.txtという名前で保存し、ffftpを使ってアップロードし、 ウェブブラウザでCGIを実行し動作を確認すること
17
Perlの基礎知識２１ ファイルの書込み print ファイルハンドル, 書き込む文字列; と記述することで、指定したファイルの最後に文字列を 追加して書き込むことができる 記述例１ 記述例２ open OUT, “>count.txt”; open OUT, “>>count.txt”; print OUT “おはようございます\n”; print OUT “おはようございます\n”; close OUT; close OUT; こちらは、count.txtの中身を消去して こちらはcount.txtは中身をそのまま から おはようございます を書き込む にして おはようございます を 最後の行に加える
18
アクセスカウンタCGI G:\wwwの counter.cgi をメモ帳で開き、以下のプログラムを入力せよ ・・・右上に続く・・・
#!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; open IN, “<count.txt”; $kaisuu = <IN>; close IN; $kaisuu = $kaisuu + 1; open OUT, “>count.txt”; print OUT $kaisuu; close OUT; ・・・右上に続く・・・ 次に、count.txtを開き、中身を ０ に変更し保存する。次に、ｆｆｆｔｐでcount.txtの 属性変更パネルを開き、すべての「更新」のチェックをONに設定する これは、CGIがcount.txtの内容を変更できるようにするために行う print <<HTML_DOCUMENT; <HTML> <HEAD> <TITLE>アクセスカウンタ</TITLE> </HEAD> <BODY> $kaisuu 回目のアクセスです </BODY> </HTML> HTML_DOCUMENT
19
データの送信とフォーム 掲示板のように、ユーザの入力した内容を使って処理を行うようなCGIを作成するためには、フォームを使用する フォームはHTML文章内に、以下のような方法で記述する <FORM method=“POST” action=“cgiのURL”> この中にフォームのパーツを記述する </FORM> 上記のフォームで表示された送信ボタンをクリックすると、FORMタグのaction属性で記述されたcgiに、フォームに 入力された内容が伝えられ、cgiが実行される CGIの場合、一般にmethodの部分はPOSTと記述する
20
フォームのHTML送信メッセージ POST ・・・・・・ ・・・・・ ・・・・ 送られるデータ
データがウェブサーバに送られる。また、送られるデータは フォームのパーツの名前＝パーツのデータ という形式で送られる POST ・・・・・・ ・・・・・ ・・・・ 送られるデータ 通常のHTML送信メッセージ この部分はヘッダと呼ばれる なお、1行目はPOSTとなる ヘッダとボディの境界を表す空白行 フォームの内容が記されたデータ この部分はボディと呼ばれる
21
フォームのパーツの種類（１） テキストボックス <INPUT TYPE=“text” name=“名前” value=“初期値”> 文字を入力するためのテキストボックス。CGI用のフォームの場合、 name属性で名前を設定する必要がある。フォームが送られると、CGIに 名前=テキストボックスの中身 というデータが送られる。また、value属性を 記述することで、初期値を設定可能。なお、テキストボックスに日本語を入力 した場合の処理方法については次回解説予定 実行ボタン ＜INPUT TYPE=“submit” value=“表示文字列”＞ 実行ボタンをクリックするとFORMタグのaction属性に記述されたURLが 呼び出される。value属性でボタンに表示する文字を設定可能 取り消しボタン ＜INPUT TYPE=“reset” value=“表示文字列”> これによって表示されるボタンをクリックするとそのフォームの内容が すべてリセットされる。value属性でボタンに表示する文字を設定可能
22
フォームのパーツの種類（２） チェックボックス ＜INPUT TYPE=“checkbox” name=“名前”＞ チェックボックスがチェックされている状態で実行ボタンがクリックされて フォームが送られると、CGIに 名前=on というデータが送られる また、チェックされていないボタンについてのデータは送られない ラジオボタン ＜INPUT TYPE=“radio” name=“名前” value=“データ”＞ チェックボックスと似ているが、複数のラジオボタンを記述し、 name属性の値を同じものに設定しておくと、それらのラジオボタンの 中で同時に一つのボタンしかONにならないようになる フォームが送られると、CGIに 名前=データ というデータが送られる テキストエリア ＜TEXTAREA name=“名前”＞初期文章＜/TEXTAREA＞ 複数行入力可能なフォームが作成される テキストエリアタグの開始タグと終了の間に文章を記述することで、 最初にテキストエリア内に表示する文章を設定可能 CGIへのデータの送られ方はテキストボックスとほぼ同じ
23
フォームへのデータの転送例（１） フォームが記述されたHTML文章の作成
まず、メモ帳に以下のHTMLをデスクトップに form.html という名前で ファイルに保存し、ｆｆｆｔｐを使ってウェブサーバにアップロードすること。 <HTML> <HEAD> <TITLE>フォーム</TITLE> </HEAD> <BODY> <FORM method="POST" action="form.cgi"> <INPUT TYPE="text" name="textbox"> <INPUT TYPE="submit" value="送信"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML>
24
フォームへのデータの転送例（２） フォームが転送したデータを表示するCGIの作成
メモ帳を新しく開き、以下のCGIをデスクトップに form.cgi という名前で 保存し、ffftpを使ってウェブサーバにアップロードし、属性を変更すること。 #!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; $clength = $ENV{'CONTENT_LENGTH'}; read(STDIN, $qstring, $clength); print "送られたデータは、「$qstring」です<BR>\n"; 解説： ①$ENV{‘CONTENT_LENGTH’}という変数（詳細は次回で説明）の中にフォームの データのサイズが格納されているので、それを $clength という変数に代入する ②readという関数を使ってフォームのデータを必要なサイズ（$clengthバイト）だけ 読み込んで、 $qstring という変数に代入する ① ②
25
フォームへのデータの転送例（３） 複数の種類のフォームパーツがある場合
G:\wwwの form.html をメモ帳で開き、以下の赤い部分を追加し保存せよ <FORM method="POST" action="form.cgi"> <INPUT TYPE="text" name="textbox"><BR> <INPUT TYPE="checkbox" name="cbox1">チェックボックス１<BR> <INPUT TYPE="checkbox" name="cbox2">チェックボックス２<BR> <INPUT TYPE="radio" name="rbox" value="1">ラジオボタン１<BR> <INPUT TYPE="radio" name="rbox" value="2">ラジオボタン２<BR> <INPUT TYPE="submit" value="送信"> <INPUT TYPE="reset"> </FORM> 複数のフォームのパーツがある場合、それぞれのパーツのデータは 例えば以下のように ＆ 記号で区切って送られる textbox=test&cbox1=on&rbox=2
26
クイズCGI（１） フォームが記述されたHTML文章の作成 まず、メモ帳に以下のHTMLをデスクトップに quiz.html という名前で
ファイルに保存し、ｆｆｆｔｐを使ってウェブサーバにアップロードすること <HTML> <HEAD> <TITLE>クイズ</TITLE> </HEAD> <BODY> <FORM method="POST" action="quiz.cgi"> ボアソナードタワーの最上階は何階？<BR> <INPUT TYPE="radio" name="answer" value="25">２５階<BR> <INPUT TYPE="radio" name="answer" value="26">２６階<BR> <INPUT TYPE="radio" name="answer" value="27">２７階<BR> <INPUT TYPE="submit" value="送信"> <INPUT TYPE="reset"> </FORM> </BODY> </HTML>
27
クイズCGI（２） 答えあわせを行うCGIの作成 解説： 送られたデータを調べることで、 正解かどうかをチェックしている
メモ帳を新しく開き、以下のCGIをデスクトップに quiz.cgi という名前で 保存し、ffftpを使ってウェブサーバにアップロードし、属性を変更すること。 #!/usr/local/bin/perl print "Content-Type: text/html; charset=sjis\n\n"; $clength = $ENV{'CONTENT_LENGTH'}; read(STDIN, $qstring, $clength); print "$qstring<BR>\n"; if ($qstring eq "answer=27") { print "正解です。\n"; } else { print "不正解です。\n"; 解説： 送られたデータを調べることで、 正解かどうかをチェックしている 余裕があればHTMLで答えを表示 するようにプログラムを改造すること
Similar presentations
