10/12日 3限

情報アプリケーション１
2006年 10月 12日第四回資料
担当重定如彦
目次
•
•
•
•
データの送信とフォーム
クイズCGI
複数のパーツのデータの分割方法
配列変数
データの送信とフォーム
掲示板のように、ユーザの入力した内容を使って処理を行う
ようなCGIを作成するためには、フォームを使用する
フォームはHTML文章内に、以下のような方法で記述する
<FORM method=“POST” action=“cgiのURL”>
この中にフォームのパーツを記述する
</FORM>
上記のフォームで表示された送信ボタンをクリックすると、
FORMタグのaction属性で記述されたcgiに、フォームに
入力された内容が伝えられ、cgiが実行される
CGIの場合、一般にmethodの部分はPOSTと記述する
フォームのHTML送信メッセージ
フォームをPOSTメソッドで送った場合、以下のような
データがウェブサーバに送られる。また、送られるデータは
フォームのパーツの名前＝パーツのデータ
という形式で送られる
POST ・・・・・・
・・・・・
・・・・
・・・・
通常のHTML送信メッセージ
この部分はヘッダと呼ばれる
なお、1行目はPOSTとなる
ヘッダとボディの境界を表す空白行
送られるデータ
・・・・・
・・・・・
フォームの内容が記されたデータ
この部分はボディと呼ばれる
フォームのパーツの種類（１）
• テキストボックス
<INPUT TYPE=“text” name=“名前” value=“初期値”>
文字を入力するためのテキストボックス。CGI用のフォームの場合、
name属性で名前を設定する必要がある。フォームが送られると、CGIに
名前=テキストボックスの中身というデータが送られる。また、value属性を
記述することで、初期値を設定可能。なお、テキストボックスに日本語を入力
した場合の処理方法については次回解説予定
• 実行ボタン
<INPUT TYPE=“submit” value=“表示文字列”>
実行ボタンをクリックするとFORMタグのaction属性に記述されたURLが
呼び出される。value属性でボタンに表示する文字を設定可能
• 取り消しボタン
<INPUT TYPE=“reset” value=“表示文字列”>
これによって表示されるボタンをクリックするとそのフォームの内容が
すべてリセットされる。value属性でボタンに表示する文字を設定可能
フォームのパーツの種類（２）
• チェックボックス
<INPUT TYPE=“checkbox” name=“名前”>
チェックボックスがチェックされている状態で実行ボタンがクリックされて
フォームが送られると、CGIに名前=on というデータが送られる
また、チェックされていないボタンについてのデータは送られない
• ラジオボタン
<INPUT TYPE=“radio” name=“名前” value=“データ”>
チェックボックスと似ているが、複数のラジオボタンを記述し、
name属性の値を同じものに設定しておくと、それらのラジオボタンの
中で同時に一つのボタンしかONにならないようになる
フォームが送られると、CGIに名前=データというデータが送られる
• テキストエリア
<TEXTAREA name=“名前”>初期文章</TEXTAREA>
複数行入力可能なフォームが作成される
テキストエリアタグの開始タグと終了の間に文章を記述することで、
最初にテキストエリア内に表示する文章を設定可能
CGIへのデータの送られ方はテキストボックスとほぼ同じ
フォームへのデータの転送例（１）
•
フォームが記述された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>
フォームへのデータの転送例（２）
•
フォームが転送したデータを表示する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 という変数に代入する
フォームへのデータの転送例（３）
•
複数の種類のフォームパーツがある場合
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
クイズ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>
クイズ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で答えを表示
するようにプログラムを改造すること
複数のパーツのデータの分割方法
form.cgiのように複数のパーツがある場合、
textbox=abc&cbox1=on&rbox=2
フォームのパーツのデータは上記のように1行にまとめて送られる
それぞれのパーツのデータは＆記号で区切られている
Perlでは、splitという関数を使うことで文字列を特定の文字で
分割することができる。splitは以下のように記述する
split（/分割する文字/, 分割する文字列）;
例えば
split（/&/, “textbox=abc&cbox1=on&rbox=2”）;
上記のプログラムが実行されると、2つ目の引数の文字列が
「textbox=abc」、「cbox1=on」、「rbox=2」の３つに分割される
配列変数（１）
Perlではsplitによって分割された文字列データを配列変数と
呼ばれる種類の変数に格納することができる
配列変数の特徴は以下の通り
• 変数名の前に＄ではなく＠記号を付ける
• 配列変数の中には複数のデータを格納することができる
splitによって分割されたデータを配列変数に格納するには、
以下のように＝記号で代入すればよい。
@pdata = split（/&/, “textbox=abc&cbox1=on&rbox=2”）;
配列変数（２）
@pdata = split（/&/, “textbox=abc&cbox1=on&rbox=2”）;
と記述することで、という配列変数に「textbox=abc」、
「cbox1=on」、「rbox=2」の３つの文字列が保存される。
@pdata
textbox=abc
cbox1=on
rbox=2

Download Report