演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23

(1)

Webデータ管理

CGI (3章)

2011/11/30(水)

(2)

講義で使うフォルダ



演習室のPCのハードディスクには演習で作成したデータは

保管できません。



各PCの「ネットワーク接続」ショートカットからメディア情報セ

ンターのサーバーにアクセスしてください(Zドライブとして使

用できます)。

(3)

CGIとは



CGI とは Common Gateway Interface の略。



通常のページでは、あらかじめ用意されたHTMLページ

を表示するだけだが、CGIを利用することにより、以下

のようなページを作成することができるようになる。

(1)掲示板

(2)カウンター

(3)アンケートフォーム

(4)チャット

(4)

CGIの処理の流れ

Webブラウザ

Webサーバ

xxx.cgi

CGIプログラム

①要求

_②起動

③結果

④結果

(1)ブラウザがWebサーバに要求する

(2)Webサーバが CGI プログラムを起動する

(3) CGI プログラムは結果を返す

(4) CGI プログラムの結果をブラウザに返す

(5)

CGIプログラム



「CGI プログラム」は、環境変数と標準入力を参照

できて、結果を標準出力に書き出せるものであれば

何言語で記述しても構わない。



本講義では、Perlを使用する。



Perlの特長

(1)無料で利用できるインタプリタ言語である

(2)多くの環境下（UNIX、Windows）で利用できる

(3)C言語に似た使いやすい構文を持つ

(4)Basic言語に似た柔軟性に富んだ変数の利用

ができる

(5)CGIの利用に適したモジュールが多く公開され

ている

(6)優れた文字列処理能力がある

(6)

(演習1)掲示板CGIを使ってみよう(1)



インターネットエクスプローラから以下のURLを指定

して、掲示板CGI①にアクセスしてください。

http://10.4.83.51/cgi-bin/wwwboard.cgi



掲示板CGI①にアクセスできたら自由にメッセージ

を書き込んでください。

(7)

(8)

(演習2)掲示板CGIを使ってみよう(2)



インターネットエクスプローラから以下のURLを指定

して、掲示板CGI②にアクセスしてください。

http://10.4.83.51/cgi-bin/keijiban.cgi



掲示板CGI②にアクセスできたら先ほどと同じように

自由にメッセージを書き込んでください。

(9)

(10)

CGIプログラム：keijiban.cgi解説(1)



プログラム全体構成：テキスト92ページ～

#!/usr/local/bin/perl ← Perlプログラム本体の場所を記述

require “jcode.pl”; ← jcode.plライブラリを指定する

# ユーザ設定 $CHARSET = ‘Shift_JIS’; ← 日本語文字コードを指定する $DATAFILE = ‘./log.txt’; ← データファイルを指定する # メインプログラム readFromData(); ← フォームデータを読み込む readDatafile(); ← データファイルを読み込む writeDatafile(); ← データファイルに出力する browsePage(); ← 内容をHTML形式で出力する exit; ← 終了する

(11)

CGIプログラム：keijiban.cgi解説(2)



フォームデータの読み込み(readFromData())①

# フォームデータの読み込み sub readFromData { my ($buffer, $pair); ←ローカル変数を定義

if($ENV{‘REQUEST_METHOD’} eq ‘POST’) { ←POSTの時

read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

} ←標準入力からデータを読み込む

else { ←GETの時

$buffer = $ENV{‘QUERY_STRING’}; ←環境変数からデータを読み込む

(12)

CGIプログラム：keijiban.cgi解説(3)



フォームデータの読み込み(readFromData())②

foreach $pair (split(/&/, $buffer)) { ← $bufferを「&」で分解

my ($name, $value) = split(/=/, $pair); ← $pairを「=」で分解

$value =~ tr/+/ /; ← 「+」を半角スペースに

$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/chr(hex($1))/eg;

← 16進数を文字コードに

$value = jcode::sjis($value); ← シフトJISに変換

$value =~ s/&/&/g; ← 「&」を「&」に

$value =~ s/</</g; ← 「<」を「<」に

$value =~ s/>/>/g; ← 「>」を「>」に

$value =~ s/¥x0D¥x0A/<br>/g; ← 「改行コード」を「<br>」に

$value =~ tr/¥t/ /; ← 「タブコード」を半角スペースに

$FORM{$name} = $value; ← $FORM{$name}に$valueを

} }

(13)

CGIプログラム：keijiban.cgi解説(4)



データファイルの読み込み(readDatafile())

# データファイルの読み込み sub readDatafile

{

open (FILE, “<$DATAFILE”); ← データファイルを入力モードで開く

eval {flock(FILE, 1) }; ← ファイルを共有モードでロックする

@DATA = <FILE>; ← 配列@DATAの要素に展開する

close FILE; ← ファイルを閉じる

(14)

CGIプログラム：keijiban.cgi解説(5)



データファイルへの書き出し(writeDatafile())

# データファイルへの書き出し sub writeDatafile

{

if($FORM{'title'} && $FORM{'author'} && $FORM{'text'}) {

← FORMに全て入力されていたら

unshift @DATA, "$FORM{'title'}¥t$FORM{'author'}¥t$FORM{'text'}¥n";

← 配列@DATAの先頭にFORMの内容を書き込む

open(FILE, “>$DATAFILE”); ← データファイルを出力モードで開く

eval{ flock(FILE, 2) }; ← ファイルを排他モードでロックする

print FILE @DATA; ← 配列@DATAの内容をファイルに書き出す

close FILE; ← ファイルを閉じる

} }

(15)

CGIプログラム：keijiban.cgi解説(6)



掲示板ページの表示(browsePage())①

# 掲示板ページの表示

sub browsePage {

print <<END; ← ENDまで内容を標準出力に書き出す

Content-type: text/html; charset=$CHARSET

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<!--h1 {color; green }

strong {color: bule; font-size: large } em { font-style: italic }

--> </style> </head>

(16)

CGIプログラム：keijiban.cgi解説(7)



掲示板ページの表示(browsePage())②

<body> <h1>私の掲示板</h1> <p> ご自由に書き込んでください。 </p>

<br>

(17)

CGIプログラム：keijiban.cgi解説(8)



掲示板ページの表示(browsePage())③

my ($i); ← ローカル変数$iを定義する

for($i = “0”; $i < @DATA; ++$i) { ← $iを0から@DATAの配列数まで増やす

my ($title, $author, $text) = split(/¥t/, $DATA[$i]);

← @DATA配列の$i番目の要素を抽出する

print "<div><strong>$title</strong><br><em>$author</em><br> <br>$text</div><hr>¥n";

← 抽出した結果をHTML出力する

}

printf <<END; ← ENDまで内容を標準出力に書き出す

</body> </html>

END ← ENDがあるのでここまで標準出力に書き出す

(18)

SSIとは



SSI とは Server Side Include の略。



HTML文書中に以下のようなコメントを挿入することにより、

サーバー側がコメントの場所に実行コマンドの結果などを置

き換えることができる機能。

SSI を使用することにより、例えば次のようなことが可能になる。

(1)すべてのファイルに同じヘッダやフッタを表示することが簡

単になる。

(2)ファイルの最終更新時刻やサイズを自動的に表示できるよ

うになる。

(3)外部コマンドの実行結果をページ中に表示できるようになる。

(4)カウンターをつくれる。

(19)

(演習3)SSIサンプルを動かしてみよう



インターネットエクスプローラから以下のURLを指定

して、SSIサンプルにアクセスしてください。

(20)

(21)

ssisample.shtml解説(1)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

</head> <body>

このページはSSIのテストのためのページです。

<hr>

SSIの処理を開始。現在はです。世界標準時ではです。

<hr>

このファイルの最終更新日時はです。 <hr>

(22)

ssisample.shtml解説(2)

<hr>

counter は、countファイルを用意して、

<h2>あなたのアクセスは、<i></i>番目です。 </h2> というところでしょうか。<br> （注意）このサンプルは jgawk.exe を使っています。 <hr> <p> SSIで利用できる環境変数は以下の通りです。<br> <pre>  </pre> <hr>

SSIの処理終了。現在はです。世界標準時ではです。

</body> </html>

(23)

CGIまとめ



本日の演習内容について復習してください

演習内容作成ファイル演習１掲示板CGIを使ってみよう(1) -演習２掲示板CGIを使ってみよう(2) -演習３ SSIサンプルを動かしてみよう