• 検索結果がありません。

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義

N/A
N/A
Info
ダウンロード
Protected

Academic year: 2021

シェア "演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義"

Copied!
6
0
0

読み込み中.... (全文を見る)

今ダウンロードする ( 6 ページ )

全文

(1)

Web

Web

Web

Webプログラミング

プログラミング

プログラミング

プログラミング1

1

1

1

CGI(3章) 2012/6/12(水) 1/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

講義で使うフォルダ

講義で使うフォルダ

講義で使うフォルダ

講義で使うフォルダ

2/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

保管できません。

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

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

用できます)。

CGI

CGI

CGI

CGIとは

とは

とは

とは

CGI とは

Common Gateway Interface の略。

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

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

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

(1)掲示板

(2)カウンター

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

(4)チャット

CGI

CGI

CGI

CGIの処理の流れ

の処理の流れ

の処理の流れ

の処理の流れ

Webブラウザ

Webサーバ

xxx.cgi

CGIプログラム

①要求

②起動

③結果

④結果

(1)

(1)

(1)

(1)ブラウザが

ブラウザが

ブラウザが

ブラウザがWeb

Web

Webサーバに要求する

Web

サーバに要求する

サーバに要求する

サーバに要求する

(2)Web

(2)Web

(2)Web

(2)Webサーバが

サーバが

サーバが

サーバが

CGI

CGI

CGI

CGI プログラムを起動する

プログラムを起動する

プログラムを起動する

プログラムを起動する

(3) CGI

(3) CGI

(3) CGI

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

プログラムは結果を返す

プログラムは結果を返す

プログラムは結果を返す

(4) CGI

(4) CGI

(4) CGI

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

プログラムの結果をブラウザに返す

プログラムの結果をブラウザに返す

プログラムの結果をブラウザに返す

(2)

CGI

CGI

CGI

CGIプログラム

プログラム

プログラム

プログラム

5/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

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

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

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

Perlの特長

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

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

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

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

ができる

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

ている

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

(

(

(

(演習

演習

演習

演習1)

1)

1)

1)掲示板

掲示板CGI

掲示板

掲示板

CGI

CGI

CGIを使ってみよう

を使ってみよう

を使ってみよう

を使ってみよう(1)

(1)

(1)

(1)

6/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

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

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

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

を書き込んでください。

(

(

(

(演習

演習

演習

演習1)

1)

1)

1)結果

結果

結果

結果

(

(

(

(演習

演習2)

演習

演習

2)

2)

2)掲示板

掲示板

掲示板

掲示板CGI

CGIを使ってみよう

CGI

CGI

を使ってみよう

を使ってみよう

を使ってみよう(2)

(2)

(2)

(2)

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

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

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

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

(3)

(

(

(

(演習

演習

演習

演習2)

2)

2)

2)結果

結果

結果

結果

9/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(1)

(1)

(1)

(1)

10/23

湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

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

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

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

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(2)

(2)

(2)

(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’}; ←環境変数からデータを読み込む }

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(3)

(3)

(3)

(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/</&lt;/g; ← 「<」を「&lt;」に

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

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

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

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

} }

(4)

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(4)

(4)

(4)

(4)

13/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

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

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

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

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

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

}

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(5)

(5)

(5)

(5)

14/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

データファイルへの書き出し(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; ← ファイルを閉じる } }

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(6)

(6)

(6)

(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>

<meta http-equiv="Content-Type" content="text/html"; charset=shift_jis"> <title>掲示板サンプル</title>

<style type="text/css">

<!--h1 {color; green }

strong {color: bule; font-size: large } em{ font-style: italic } --> </style> </head>

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(7)

(7)

(7)

(7)

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

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

<form action="./keijiban.cgi" method="post"><div> 題名<input type="text" name="title" size="60"><br> 名前<input type="text" name="author" size="20"><br> 本文<br>

<textareacols="60" rows="5" name="text"></textarea><br> <input type="submit" value="送信">

<input type="reset" value="リセット"> </div></form>

<br>

(5)

CGI

CGI

CGI

CGIプログラム：

プログラム：

プログラム：

プログラム：keijiban.cgi

keijiban.cgi

keijiban.cgi

keijiban.cgi解説

解説

解説

解説(8)

(8)

(8)

(8)

17/23

湘南工科大学講義資料Webプログラミング1(2013) 阿倍

掲示板ページの表示(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/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

SSI

SSI

SSI

SSIとは

とは

とは

とは

SSI とは

Server Side Include の略。

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

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

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

<!--#exec cmd="/bin/ls" -->

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

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

単になる。

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

うになる。

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

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

(

(

(

(演習

演習

演習

演習3)SSI

3)SSI

3)SSI

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

サンプルを動かしてみよう

サンプルを動かしてみよう

サンプルを動かしてみよう

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

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

http://10.4.83.51/SSI/ssisample.shtml

(

(

(

(演習

演習

演習

演習3)

3)

3)

3)結果

結果

結果

結果

(6)

ssisample.shtml

ssisample.shtml

ssisample.shtml

ssisample.shtml解説

解説

解説

解説(1)

(1)

(1)

(1)

21/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

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

<html lang="ja"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>SSI test</title>

</head> <body>

<h2>SSI Test Page</h2> <hr>

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

<!--#configtimefmt="%Y年%m月%d日%H時%M分%S秒" -->

<hr>

SSIの処理を開始。現在は<!--#echo var="DATE_LOCAL" -->です。 世界標準時では<!--#echo var=“DATE_GMT” -->です。 <hr> このファイルの最終更新日時は<!--#echo var="LAST_MODIFIED" -->です。 <hr>

ssisample.shtml

ssisample.shtml

ssisample.shtml

ssisample.shtml解説

解説

解説

解説(2)

(2)

(2)

(2)

22/23 湘南工科大学講義資料Webプログラミング1(2013) 阿倍 <!--#exec cmd="./ssitest.bat" --> <hr> counter は、countファイルを用意して、

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

SSIの処理終了。現在は<!--#echo var="DATE_LOCAL" -->です。 世界標準時では<!--#echo var="DATE_GMT" -->です。 </body> </html>

CGI

CGI

CGI

CGIまとめ

まとめ

まとめ

まとめ

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

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

参照

今ダウンロードする ( PDF - 6 ページ - 660.06 KB )

関連したドキュメント

子どもの生活リズムと健康 学習習慣に関する調査 2021 ダイジェスト版 研究背景 睡眠や体内時計についての基礎研究が進み 規則正しい生活習慣の重要性が科学的に証明されつつあります その一方で 子どもの夜ふかしやデジタル機器の使い過ぎ 不規則な食 睡眠習慣が問題になり 健康や学業成績への影響が懸念さ

1-1 睡眠習慣データの基礎集計 ……… p.4-p.9 1-2 学習習慣データの基礎集計 ……… p.10-p.12 1-3 デジタル機器の活用習慣データの基礎集計………

A Web Web 6 B

東京都は他の道府県とは値が離れているように見える。相関係数はこう

各位 2022 年 9 月 29 日 会社名ポーターズ株式会社代表者名代表取締役社 西森康二 ( コード番号 : 東証グロース市場 ) 問合せ先取締役 Corporate Group マネージャー天野竜人 (TEL ) 東京証券取引所グロース市場への上場に伴う

サーバー費用は、Amazon Web Services, Inc.が提供しているAmazon Web Servicesのサーバー利用料とな

web-abstracts.indb

（4） 現地参加者からの質問は、従来通り講演会場内設置のマイクを使用した音声による質問となり ます。WEB 参加者からの質問は、Zoom

株式会社資生堂資生堂ジャパン株式会社 マキアージュから まつげケアまでできる美容液マスカラ & 目もとケアまでできるまつげ美容液 誕生 ~2022 年 11 月 21 日 ( 月 ) 発売 ~ 資生堂は トータルメイクアップブランド マキアージュ から まつげケアまでできる美容液マス

―自まつげが伸びたかのようにまつげ 1 本 1 本をグンと伸ばし、上向きカ ールが 1 日中続く ※3. ※3

第１回

それでは資料 2 ご覧いただきまして、1 の要旨でございます。前回皆様にお集まりいただ きました、昨年 11

Webセミナー参加の前に

Webカメラ とスピーカー 、若しくはイヤホン

フィッシング対策ガイドライン 2022 年度版 フィッシング対策協議会

すべての Web ページで HTTPS でのアクセスを提供することが必要である。サーバー証 明書を使った HTTPS