スライド 1

2

ブラウザソフト HTML言語

画像群

3

ADSL回線 BBルータ スイッチングHUB（１６ポート） １０BASE/100BASE対応 MDI/MDI-X自動認識機能付き

Webプログラミング体験仮想ネットワーク

グループ１ グループ２ Webサーバ DHCPサーバ DNSサーバ SAMBAサーバ メールサーバ 192.168.100.100 192.168.100.20～40 Webサーバ カスケード接続 Webページを参照する場合のURLは以下の通りです。 http://www.server.co.jp

4

閲覧や、遊び目的のWebページから、自前のサーバや、安価 なレンタルサーバなどを使って、仕事で使えるWebページ（グ ループウェア）へと脱皮してみませんか。 インターネット上でのインタラクティブ動作（対話型）や、グロー バルな情報の共有化ができます。 個人のWebページも、Webサーバやデータベースを活用すれ ば、一味も二味も違うものとなります。

１ ２ ３ ４

ホームページ作成ツールからHTMLプログラミングに脱皮しませんか。 HTMLにJavaScriptを組み込むことにより、簡単なゲームソフトや、イン タラクティブなWebページを作成してみませんか。 アニメーションGIFやプラグインで動きのあるページは作れますが、結局は 一方通行（見るだけ）のページでしかありません。 補足１：ホームページとは、サイトが公開している先頭のページの名称で、Webページは、ブラウザ画面に表示される全てのページの総称です。 補足２：インタラクティブなWebページとは、オンラインショップなどで見られる、オペレータとの対話ができるWebページを指します。 操作者の意図による、Web画面のダイナミックな切り替えができます。 インタラクティブ動作（対話）はクライアントの世界に限定されます。 自分だけのオリジナルな カウンタが簡単に作れます。 世界中の何処からでも、どのコンピュータを 使ってでも、自分の情報を参照/更新できます。 データベースとWebページを連携させれば、 データベースの内容がそのままWebページに 反映されます。 _{掲示板などのように、情報の共有化がグロー} バルに実現できます。

5

ドメイン名とIPアドレス

スキーム名 サービスの種類を 表します。ポート番 号は、スキーム名 に登録された番号 となります。

6

ルートサーバ所在地とドメイン名を変換する仕組み

ルートサーバ の所在地

7

IP⇒192.168.0.10 Netmask⇒255.255.255.0 MACドレス⇒xx:xx:xx:yy:yy:yy IP⇒192.168.0.11 Netmask⇒255.255.255.0 MACドレス⇒xx:xx:xx:yy:yy:yy IP⇒192.168.0.12 Netmask⇒255.255.2555.0 MACドレス⇒xx:xx:xx:yy:yy:yy IP⇒１９２．１６８．０．１ Netmask⇒255.255.255.0 MACドレス⇒xx:xx:xx:yy:yy:yy 通信を行う相手のプログラムに付けられる番 号で、予め決められた番号と、ダイナミックに 取得できる番号があります。 例： Webサーバソフト⇒80番 FTPサーバソフト⇒20番 メールサーバソフト⇒25番 通信を行う相手の機器に対して、ユニークな番号 で設定される論理的な番号で、３２ビット（IPｖ４） 仕様と、１２８ビット（IPｖ６）仕様があります。また、 インターネット接続時に使われるグローバルIPア ドレスと、閉じたネットワークで使われるプライベ イトIPアドレスがあります。 例： 192.168.0.100 通信を行うハードウェアに設定される、４８ビッ ト構成の世界でユニークな番号で、製造時に 設定されます。通信処理プログラムは、最終的 には、IPアドレスからMACアドレスを変換して、 相手と通信を行います。 例： 00:12:11:0E:01:03 実際のIPアドレスからMACアドレスへの変換は、通信したい相手のIPア ドレスをネットワーク上に送出し、そのIPアドレスを持っている機器が自 分のMACアドレスを返却する方法で行われます。

ネットワーク通信には、IPアドレスとMACアドレスが必

要

IPアドレスとNetmaskに設定された値でANDを行った結果がネットワークアド レスを表します。またホストアドレスの最大がブロードキャスト用となります。 スイッチングHUB

8

MACアドレスとIPアドレス

MACは世界で一つの番号。 IPアドレスには、世界で一つの グローバルアドレスと、勝手に 使えるローカルアドレスがあり ます。 新しいIPアドレス体系（IP ｖ６）には、この制約はあ りません。

9

IPv4におけるIPアドレスの設定規則

クラスCでネットマスクが、 ２５５．２５５．２５５．２２４

10

Webサーバ （ポート番号：８０）

ブラウザ

（ポート番号： >1023） TCP/UDP IP ネットワーク インターフェース層 （第２層：データリンク層、 第１層：物理層） インターネット層 （第３層：ネットワーク層） トランスポート層 （第４層：トランスポート層） アプリケーション層 （第７層：アプリケーション層、 第６層：プレゼンテーション層、 第５層：セッション層） ネットワーク インターフェース層 インターネット層 ネットワーク インターフェース層 インターネット層 ルーター ルーター 別相手先 別相手先 TCPは、最終相手先と のセグメント単位での 受け渡し確認処理を行 うが、UDPは行わない。 宛先IPアドレスで指定 された回線にデータを 送出する。（回線に 合ったサイズ分割も行 う） 隣接端末間の確実な データ通信を行う。（隣 接する端末間の通信回 線の規格化が行われて いる） 送信側ポート番号 は１０２４以上、宛 先ポート番号は、 規定されたポート 番号として下位層 に渡される。 通信回線の都合 で分割されたデー タを再構築（セグ メント化）して上位 層に渡す。 上位層から受け 取ったデータを、 隣接端末と通信 する為のサイズに 分割して、下位層 に渡される。 隣接端末に対す る確実な送信処 理が行われる。 伝送制御手順 隣接端末からの データを確実に受 信する。 隣接端末からのフ レームデータを上 位層に渡す。 宛先ポート番号で 指定されたアプリ ケーションにデー タを渡す。 隣接端末から、確 実なデータ受信を 行う。 隣接端末からのフ レームデータを上 位層に渡す。 通信回線の都合 で分割されたデー タを再構築（セグ メント化）して上位 層に渡す。 宛先ポート番号で 指定されたアプリ ケーションにデー タを渡す。 送信側ポート番号 を８０番に設定し、 受信データに添付 されていた宛先 ポート番号を宛先 ポート番号に設定 し、下位層に渡さ れる。 上位層から受け 取ったデータを、 隣接端末と通信 する為のサイズに 分割して、下位層 に渡される。 隣接端末に対す る確実な送信処 理が行われる。 TCP/UDP IP 伝送制御手順 ① ② ルータは、宛先IPアドレスにより通信経 路を決定する。また、通信回線に応じて、 フレームに分割/構築を行う。 （ ）：OSI７階層による規定

11

物理層 PT1（ブラウザ） IP１ MC１ IP２ MC２ IP３ MC３ IP４ MAC４ IP５ MC５

データ

データ１ _⇒PT2PT1 データｎ PT1 データ１ _⇒PT2PT1 _⇒IP6IP1 データ１ _⇒PT2PT1 _⇒IP6IP1 _⇒MC2MC1 データ１ _⇒PT2PT1 _⇒IP6IP1 _⇒MC４MC3 データ１ PT1 ⇒PT2 IP１ ⇒IP6 MC5 ⇒MC6 伝送路によって、一回で通信できるデータ長は異なります。 隣接機器との通信形態に応じたデータ分割 と、両末端のポート番号（ソフト番号）の付加 両末端のIPアドレスの付加、及び必要時 における伝送手順に応じたデータ再分割 隣接する機器のMACアドレス を付加（IPアドレスより変換） IPアドレスと、ルータに設定されたルーティングテーブ ルから相手のMACアドレスを得てヘッダーに付加 IPアドレスと、ルータに設定されたルーティングテーブル から相手のMACアドレスを得てヘッダーに付加 注：PT1,IP1、MC1はそれぞれ送信先のポート番号、IPアドレス、およびMACアドレスを示しています。 ルータには、受信用と送信用のプロトコル（物理層からネットワーク層まで）が内蔵されており、リンクバイリンク方式でデータが受け渡されて行きます。 ルータ ルータ

この仕組みが分かればネットワークは分かる

MACアドレスは中継ごと に書き換わります。 次のルータは、相手先IP アドレスとルーティング テーブルで確定されます。 （ 上 位 ） プ ロ ト コ ル の 階 層 （ 下 位 ） ネットワーク上の各通 信ユニットは、回線上 に流れるデータを監視 し、自分宛のデータで あれば上位のプロトコ ルに渡します。 トランスポート層 （TCP、etc) ネットワーク層 （IPｖ４、etc) データリンク層 （CSMA/CD、etc) 物理層

データ

データ１ データｎ データ１ _⇒PT2PT1 データ１ _⇒PT2PT1 _⇒IP6IP1 ポート情報の削除と、分割データの再構築、 及び上位プロトコルへのデータの受け渡し IP情報の削除と、分割データの再構 築と上位プロトコルへのデータに受 け渡し MACアドレスの削除と上位 プロトコルへのデータの受け 渡し （ 上 位 ） プ ロ ト コ ル の 階 層 （ 下 位 ） PT2（Webサーバ） IP６ MC６ （スイッチングHUBは、データ上のMACアドレスを見てその相手だけに信号を流します） アプリケーション層 プレゼンテーション層 セッション層 アプリケーション層 プレゼンテーション層 セッション層

12

TCPヘッダーとIPヘッダー

TCPヘッダー

13

イーサネットヘッダー

14

ベースバンドによる伝送符号方式

光ファイバー、及び

高速ディジタル通信

ISDN,及びディジタ

ル交換網（AMI符号

方式とも言う）

同軸ケーブル、及び

EthernetLAN

15

HTMLは、 必要なプラグイン機能を 定義します

HTML

HyperTextMarkupLanguage HTMLは、 何処に、何を、どのように 描画するかを定義します GIF,JPEG,PND形式

Mpeg,qt,mid,wma,,形式

HTMLは、 表示する文字、 カラー、表示方法 などを定義します 動画や音声などを扱うプログラムなどは、ブラウザに 組み込まれて（プラグイン）動作します。

16

 HTML言語は、画面に何を表示するかを定義する言語であり、入力条件などで処理の内容を変えることはできません。  HTML言語は、対話画面は作れますが、入力された内容をチェックしたり、入力内容に応じて処理を変えるなどの処理はできません。  入力内容をチェックしたり、入力内容により処理を変えたい場合は、クライアント側で動作可能なJavaSCript言語を併用して使います。  HTML言語で書かれたプログラムは、ブラウザソフトがなければ解釈・表示することはできません。 ブラウザソフトとは、 お客様の要求を解釈してサーバに適切な形式で要求を行ったり、サーバから送られたデータを解釈して、その内容を画面に表示してくれるものです。 ブラウザソフトは、プログラムや画像を外部記憶装置から読み込んで表示することも、インターネット上（LAN上）のWebサーバーと交信を行ってWebサーバ上 のプログラムや画像を読み込み、表示することもできます。 ブラウザソフト HTML言語 画像群

プログラムは、テキストエディタで作成します

HTMLプログラム、PHPプログラム 及び参照する画像は、以下のディレ クトリに保存します。 /var/www/html CGIプログラム、及び参照する画像は、 以下のディレクトリに保存します。 /var/www/cgi-bin URLは以下のように指定します。 http://192.168.0.100/cgi-bin/xxx.cgi 注：画像の保存場所や、プログラムの保存場所は任意に決めることができます。 HTMLプログラムは、以下の URLで実行します。 http://192.168.0.100/xxx.html CGIプログラムは、以下のURLで実行します。 http://192.168.0.100/cgi-bin/xxx.cgi WebサーバのIPアドレスを、 192.168.0.100とした場合の例です。

17

テキストエディタ （Terapad,Notepadなど） 画像編集ツール （PhotEditor,Paint、 フリーの動画作成ツール、など） プログラム 画像 ファイル転送ツール （FFFTP、WinSCPなど） FTPサーバー （Ｖｓｆｔｐｄなど） プログラム 画像 遠隔操作ツール （Telnet,SSH、など） Telnet/SSHサーバ （Telnetd,sshdなど） 補足：ツールは様々ですが、自分に合ったツールを選択して、そのツールの最小限の操作だけを覚えれば十分です。 １ ２ ３ ４ ５ ６

プログラム＋画像など

７ ８ ９ １０

_{サーバーマシーンの遠隔操作}

_１１ 補足：番号は処理の流れを表しています。 補足： FTPサーバ、Telnetサーバ、SSHサーバなどなど は無料で手に入れることができるソフトウェアです。

18

プログラム 画像 Webサーバー （Apacheなど） Webサーバー （Apacheなど） スクリプト CGI （Perl,Java,Cなどで作成）

情報

リンクにより行われるページの切り替えは、 ブラウザにより、内部的に新たなURL要求 が発行されます。（１回目と同じ） Webページは、クライアントからのURL要 求毎に新しいWebサーバを起動し、その URLに対してプログラムや画像を送り終 ると、自動的に終了します。 Webプログラムがサーバ側で実行されるス クリプトタイプである場合は、Webサーバー 上で（同じプロセスとして）実行され、その結 果だけがクライアント側に返却されます。 WebプログラムがCGIタイプである場合は、 CGIプログラムは新しいプロセスとして起動 され、その実行結果だけがクライアント側に 返却されます。 ブラウザソフト （IE,NetScape,など） １ ２ ３ ４ ５ ５ ６ ６ ７ ７

HTML+画像など

８ ９ 補足：番号は処理の流れを表しています。 補足： Webサーバ、PHPスクリプト、及びブラウザソフトは 無料で手に入れることができるソフトウェアです。

19

プログラム 画像 Webサーバー （Apacheなど）

HTML

Webサーバー （Apacheなど） スクリプト （PHPで作成） CGI （Perl,Java,Cなどで作成）

情報

Webサーバは、直接データベースをアクセス することはしません。 データベースアクセスは、スクリプトタイプの プログラムかCGIタイプのプログラムから行 われ、クライアント側からのデータベース参 照用であれば、その要求に従って処理を行っ た結果のみがクライアント側に返却されます。 DBMS （Postgresql,Mysqlなど） スクリプトプログラムやCGIプログラムで作 成されるものとして、カウンターや掲示板な どがあります。 サーバ上のスクリプトプログラムやCGIプロ グラムが作成できれば、Webを使った業務 ソフトは簡単に作れます。 データベースは、業務そのものです。 ブラウザソフト （IE,NetScape,など） １ ２ ３ ４ ５ ６ ７ ８ ９ １０ １３ ５ ６ ８ ９ 補足：番号は処理の流れを表しています。 補足： データベースサーバ（PostgreSqlなど）は、無料 で手に入れることができるソフトウェアです。

１２ 画像など

１１ 画像などの要求

20

<HTML> <HEAD> <TITLE> 初めてのWebプログラミング </TITLE> </HEAD> <BODY bgcolor="blue"> <CENTER>

<FONT size="6" color="red"> <BR> <B>初めてのWebプログラミングです</B> <BR> <BR> </FONT> </CENTER> <DIV align="center"> <A href="test2.htm">

<IMG src="test1.jpg" width="256" > </A>

<H4>画像をクリックするとページが変わります</H4> </DIV>

<MARQUEE behavior="scroll"> <FONT size="6" color="white"> <BR> HTMLでのプログラミングは初めてですけど、意外と簡単でした。 </FONT> </MARQUEE> </BODY> </HTML> <HTML> <HEAD> <TITLE> 初めてのWebプログラミング </TITLE> </HEAD> <BODY bgcolor="blue"> <CENTER>

<FONT size="6" color="red"> <BR> <B>2ページ目のページです</B> <BR> <BR> </FONT> </CENTER> <DIV align="center"> <A href="test1.htm">

<IMG src="test2.jpg" width="256"> </A>

<H4>画像をクリックすると最初のページに戻ります</H4> </DIV>

<MARQUEE behavior="scroll"> <FONT size="6" color="white">

<BR>HTMLでページを切り替えるのは、本当に簡単です。 これならHTMLでホームページを作れそうです。 </FONT> </MARQUEE> </BODY> </HTML> 実行前に、300x300程度の画像を２枚作成して、test1.jpg、test2.jpgという名前で登録しておいてください。

21

<HTML>

<BODY>

<CENTER>

<EMBED src=“

asunaro.wma

" autostart="true" hidden="true"

loop="true" ></EMBED>

<object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/c

abs/flash/swflash.cab#version=4,0,0,0" width=300 height=300>

<param name=movie value="

slide.swf

">

<param name=quality value=high>

<embed src="

slide.swf

" quality=high width=300 height=300

type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/shockwave/download

/index.cgi?P1_Prod_Version=ShockwaveFlash">

</embed>

</object>

<BR>

<EMBED src="

sample01.wmv

" autostart="true" hidden="false"

loop="true" width="300" height="300" ></EMBED>

</CENTER>

</BODY>

</HTML>

実行前に、ツールを使って、SWFファイルとｗｍｖファイルを作成し、slide.swf、sample01.wmvという名前で登録しておいてください。 wma：音楽/動画ファイル ｓｗｆ：Flash形式動画ファイル ｗｍｖ：音楽/動画ファイル OBJECT タグは 、画像、他の文書、アプレットなどの「オブジェクト」を文書内に埋め込むた めのタグで、IMG、IFRAME、EMBEDなどの代わりに使用できる汎用タグです。 ＥＭＢＥＤとは、はめ込むという意味を持つタグです。

22

<HTML> <HEAD> <TITLE> 初めてのWebプログラミング </TITLE> </HEAD> <BODY bgcolor="blue"> <CENTER>

<FONT size="6" color="red"> <BR> <B>初めてのJavaScriptプログラミングです</B> <BR><BR> </FONT> </CENTER> <SCRIPT language="JavaScript"> <!--function ImgChange(image){ document.ImgArea.src=image; } //--> </SCRIPT> <FORM> <CENTER>

<INPUT type="button" value="画像1に切り替え" onclick="ImgChange('test1.jpg')">

<INPUT type="button" value="画像2に切り替え" onclick="ImgChange('test2.jpg')">

</CENTER> </FORM>

<DIV align="center">

<A onMouseOver="ImgChange('test2.jpg')"

onMouseout="ImgChange('test1.jpg')"> <IMG src="test1.jpg" width="256" name="ImgArea"> </A>

<H4>画像切り替えボタンで画像が変わります</H4> </DIV>

<MARQUEE behavior="scroll"> <FONT size="6" color="white">

HTMLにJavaScriptを併用するのは、意外と簡単でした。 </FONT> </MARQUEE> </BODY> </HTML>

続きです

test1.htm及びtest2.htmで使用した画像を使用します。

23

<HTML> <HEAD>

<TITLE> ユーアイテクノケアのサンプルソフトです。 </TITLE> <META name="author" content="油井 正明">

</HEAD>

<BODY bgcolor="white" topmargin="100"> <SCRIPT language="JavaScript"> <!--imgNum=1; RepeatFlag=0; function ImgChange(){ InData1=Math.round(9*Math.random()); InData2=Math.round(9*Math.random()); InData3=Math.round(9*Math.random()); document.myImg1.src="image" + InData1 + ".jpg"; document.myImg2.src="image" + InData2 + ".jpg"; document.myImg3.src="image" + InData3 + ".jpg"; if (RepeatFlag==0){ setTimeout("ImgChange()",100); }else { RepeatFlag=0;

if ((InData1==InData2) && (InData2==InData3)){ alert("おめでとうございます。 ^o^ ^o^ "); }else { if ((InData1==InData2)||(InData2==InData3)|| (InData1==InData3)){ alert("惜しかったですね。 ^o^; "); } } } } function ImgEnd(image){ RepeatFlag=1; } //--> </SCRIPT> <CENTER>

<A onMouseOver="ImgChange()" onMouseOut="ImgEnd()" href="test4.htm"> <IMG src="image2.jpg" width="80" height="80" border="0"

name="myImg"> </A>

<IMG src="image1.jpg" width="160" height="160" border="0"

name="myImg1"> <IMG src="image1.jpg" width="160" height="160" border="0"

name="myImg2"> <IMG src="image1.jpg" width="160" height="160" border="0"

name="myImg3"> </CENTER> </BODY> </HTML>

乱数関数を使ったスロットゲーム

続きです 実行前に、160x160程度の画像を１０枚作成して、image0.jpg～image10.jpgという名前で登録しておいてください。

24

<HTML> <HEAD>

<TITLE> JavaScriptサンプル </TITLE>

<meta name="keywords" content="Dynamic HTML"> </HEAD> <SCRIPT language="JavaScript"> <!--posunit=-5; sizeunit=2; xpos=800; ypos=550; wsize=0; endxpos=300; function start(){ image1.width=wsize; image1.style.position="absolute"; image1.style.left=xpos+"px"; image1.style.top=ypos+"px"; wsize=wsize+sizeunit; xpos=xpos+posunit; ypos=ypos+posunit; if (xpos > endxpos){ setTimeout("start()",30); }else{ window.location.href="http://www.yahoo.co.jp"; } } //--> </script>

<BODY bgcolor="white" alink="white" link="white" vlink="white" onload=start()> <DIV >

<IMG src="javascript.jpg" width=0 border="0" name="image1" style="position: absolute;left:500px;top:300px;"> </DIV> </BODY> </HTML> javascript.jpg と い う フ ァ イ ル 名 で 、 500x500サイズ程度の画像を作成してくだ さい。

25

<HTML> <TITLE> PHPプログラムのサンプルです。 </TITLE> <?php $back=$_GET['back']; $font=$_GET['font']; echo <<<phpend <BODY bgcolor=$back> <CENTER>

<FONT size="2" color=$font>

背景色とフォント色をRGB形式（#ffffff)で入力してください。 <FORM method="GET" action=phptest.php>

背景色：<INPUT TYPE="text" NAME="back" size="8" value=$back> フォント色：<INPUT TYPE="text" NAME="font" size="8" value=$font> <INPUT TYPE="submit" VALUE="色の適用">

</FORM> phpend; If (!empty($_GET['back']) or !empty($_GET['font'])) printf("背景色として%sが、フォント色として%sが入力されました。", $_GET['back'],$_GET['font']); ?> </FONT> </CENTER> </BODY> </HTML> FTP サーバー PHPプログラム Web サーバー URLによる実行要求 実行結果の返送 FFTPによる登録要求 ｐｈｐｔｅｓｔ．ｐｈｐを、そのままブラウザソフトで実行しても、データ送信ボタン操作に対する正しい処理は出来ません。 ＦＴＰによりｐｈｐtest.phpプログラムをサーバーの所定の場所に登録します。次に、以下のようにURLにてこのプログラムを実行します。 http://サーバのIPアドレス/PHPtest.php

26

FTP サーバー HTMLプログラム CGIプログラム Web サーバー URLによる実行要求 実行結果の返送 FFTPによる登 録要求 #!/usr/bin/perl

--print "Context-type: text/html¥n¥n"; print "<HTML>";

print "<BODY>";

if (open counterfd, '/usr/tmp/countfile'){ $count=<counterfd>; $count=$count+1; close counterfd;

if (open counterfd, '>/usr/tmp/countfile'){ flock(counterfd,2); print counterfd $count; flock(counterfd,8); close counterfd; }

}else{

open counterfd, '>/usr/tmp/countfile'; flock(counterfd,2); print counterfd "1"; flock(counterfd,8); $count=1; close counterfd; } print "$count"; print "</BODY></HTML>"; _END_ CGItest.htmプログラムは、CGItest1.cgiとCGItest2.cgiプログラムを呼び出します。 CGItest1.cgiプログラムは、呼び出された回数を返却します。 CGItest2.cgiプログラ ムは、”img1.JPG”という名前で登録されている画像を返却します。CGItest.htmプロ グラムは返却された内容を表示します。 URLでは、以下のURLにより、CGItest.htmlプログラムを実行します。 http://サーバのIPアドレス/cgi-bin/CGItest.htm CGIプログラムは、/var/www/cgi-bin ディレクトリに登録します。 #!/usr/bin/perl --$img="img1.JPG"; open(IMG,"$img"); @data_gif = stat($img); $byte = $data_gif[7];

print "Content-type: image/jpg¥n"; print "Content-length: $byte¥n¥n"; print <IMG>;

close(IMG); _END_

<HTML> <HEAD>

<TITLE> CGIプログラムの呼び出し </TITLE> </HEAD>

<BODY bgcolor="white"> <CENTER>

カウンターCGIプログラムの例です。<BR>

<IFRAME src="http://192.168.0.100/cgi-bin/CGItest1.cgi" marginheight="1" marginwidth="1" width=“60" height=“30" scrolling="no" >

</IFRAME> <BR>

<IMG src="http://192.168.0.100/cgi-bin/CGItest2.cgi" marginheight="1" marginwidth="1" width="100" height="100" scrolling="no" > </CENTER> </BODY> </HTML> テキスト型カウンター と画像型カウンターの 例です。 CGIプログラムは、Linux 上で実行権をつけること。 実行前にimg1.JPG（５０ｘ５０程度）という画像を登録しておいてください。

27

<?php session_start(); ?> <HTML> <BODY> <?php $counter=file("counter.txt"); if (empty($_SESSION['enter'])){ $counter[0]++; $fp=fopen("counter.txt","w"); if (flock($fp,LOCK_EX)){ fwrite($fp,$counter[0]); flock($fp,LOCK_UN); } $_SESSION['enter']="entry"; fclose($fp); } print sprintf("<B>%05d</B>",$counter[0]); ?> </BODY> </HTML> <HTML> <HEAD>

<TITLE> CGIプログラムの呼び出し </TITLE> </HEAD>

<BODY bgcolor="white">

<IFRAME src="http://10.110.11.200/counter.php" marginheight="0" marginwidth="1" width=80 height=35 scrolling="no" align=center> </IFRAME>

<BR><BR>

<IFRAME src="http://10.110.11.200/gcounter.php" marginheight="0" marginwidth="1" width=100 height=40 scrolling="no" align=center>

</BODY> </HTML> counter.txt、及びgcounter.txtファイルを作成してサーバに登録後に、FFFTツールを使ってこのファイルを書き込み可とします。 なお、このカウンターは同じブラウザから複数回アクセスしても一回しかカウントアップしません。 注： プログラムの中の、10.110.11.200は、サーバのIPアドレスに置き換えて 指定します。

28

<?php session_start(); $counter=file(“gcounter.txt"); if (!session_is_registered('count')) { session_register('count'); $counter[0]++; $fp=fopen(“gcounter.txt","w"); if (flock($fp,LOCK_EX)){ fwrite($fp,$counter[0]); flock($fp,LOCK_UN); } fclose($fp); } $count=$counter[0]; ?> <HTML> <BODY> <?php $keta2=$count/10; $keta2=(int)$keta2; $count%=10; $keta1=$count/1; $keta1=(int)$keta1; echo <<<eof

<img src="counter/c$keta2.jpg"><img src="counter/c$keta1.jpg"> eof; ?> </BODY> </HTML> １~10のグラフィック文字を作成して、カレントディレ クトリ上のcounterディレクトリに、c0.jpg～c9.jpgの名 前で登録します。

29

PRIMARYキー PRIMARYキー 売上ｄｂ FOREIGN（商品コード） PRIMARYキー（主キー）で宣言された 項目には、重複した内容を登録すること はできなくなります。 FOREGNキー（外部キー）で定義された 項目には、参照先テーブルに登録されて いない内容を登録することは出来なくなり ます。（これがリレーション関係です） 使用するSQLにより、構文が 多少異なる場合があります。 Createdb 売上ｄｂ １ CREATE TABLE 商品テーブル( 商品コード INTEGER, 商品名 CHAR(30), 単価 INTEGER, PRIMARY KEY(商品コード)); ２ CREATE TABLE 売上明細テーブル ( 伝票番号 INTEGER, 商品コード INTEGER, 個数 INTEGER, PRIMARY KEY(伝票番号,商品コード),

FOREIGN KEY(商品コード) REFERENCES 商品テーブル,

FOREIGN KEY(伝票番号) REFERENCES 売上テーブル(伝票番号));

３

INSERT INTO 商品テーブル VALUES(10,'ねぎ',50); INSERT INTO 商品テーブル VALUES(11,'白菜',45); INSERT INTO 商品テーブル VALUES(50,'苗',200);

４

INSERT INTO 売上明細テーブル VALUES(1000,10,100);

INSERT INTO 売上明細テーブル VALUES(1000,11,120);

INSERT INTO 売上明細テーブル VALUES(1010,10,20); ５

SELECT 商品名、SUM(個数*単価） AS 合計金額 FROM 売上明細テーブル、商品テーブル WHERE 売上明細テーブル.商品コード＝30、

GROUP BY 商品コード）； ６

30

 LINUX画面の何も表示されていない場所で右ボタンクリックを行い、「端末を開く」を選択します。

 以下のコマンドによりデータベースを、“sampledb”という名前で作成します。

$createdb

sampledb

 以下のコマンドを使って、データベースが作成されたことを確認します。

$psql

-l

表示されるデータベース一覧表の中に、“

sampledb”があることを確認します。

 以下のコマンドを使って、“sampledb”データベースに売上げテーブルを登録します。

$psql

sampledb

>CREATE

TABLE

membertable(

d_nbr

INTEGER,

d_date

DATE,

d_name

CHAR(20));

 以下のコマンドを使って、実際のデータを登録し、Grant命令を使って、PHPからアクセスできるように設定します。

>INSERT

INTO

membertable

VALUES(1,'2003/10/14',’yamada’);

>INSERT

INTO

pmembertable

VALUES(2,'2003/10/14',’kawada’);

>INSERT

INTO

membertable

VALUES(3,'2003/10/24',’umeda’);

>GRANT

ALL

ON

membertable

TO

apache;

>select * from paytable;

>¥q

先頭の“＄” と“＞”は、入

力勧誘のプ ロンプトです。

31

プログラム概説：

@$con=pg_connect("dbname=sampledb");

⇒データベース（sampledb）を使用可能 状態にします。

$sql="select * from paytable order by paydate"; @$result=pg_query($sql); ⇒「paytable」テーブルから全ての項目を行 毎に配列で取り出します。 $record=pg_fetch_array($result,$i); ⇒「pg_query」コマンドで入力した配列か ら１レコード分（$iで指定されたレコード） のデータを取り出します。 pg_free_result($result); ⇒$resultとして確保された領域を解放し ます。 pg_close($con); ⇒データベースの使用を終了し、解放し ます。 <HTML> <BODY> <?php @$con=pg_connect("dbname=sampledb"); if ($con == false){ print ("データベース接続失敗"); exit; }

$sql="select * from membertable order by d_date"; @$result=pg_query($sql);

if ($result==false){

print("SQL実行に失敗"); exit;

}

echo "<TABLE border=2 align=center>";

echo "<TR><TH>番号</TH><TH>日付け</TH><TH>氏名</TH></TR>"; for ($i=0; $i<pg_num_rows($result); $i++){

$record=pg_fetch_array($result,$i); echo "<TR>"; printf("<TD>%d</TD>",$record['d_nbr']); printf("<TD>%s</TD>",$record['d_date']); printf("<TD>%s</TD>",$record['d_name']); echo "</TR>"; } echo "</TABLE>"; pg_free_result($result); pg_close($con); ?> </BODY> </HTML> DataBase.phpプログラムを実行させると、データベース 上に登録されているデータが抜き出されてクライアント 側に画面に表示されます。 実行前に、“sampledb”という名前でデータベースを作成しておいてください。

32

データベース名：chatdb テーブル名：chattable レコード名：

create table chattable(yymmdd date,hhmm time,name char(10),cont char(200))

チャット <HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </HEAD> <style type="text/css"> <!--TD { font: 14pt/16px "ＭＳ Ｐゴシック" } --> </style> <BODY> <CENTER>

<FORM METHOD=GET ACTION="manchat.php"> <B>投稿メッセージ</B>(日本語で１００文字以内） <BR>

<TEXTAREA rows="2" Cols="100" NAME="cont"> </TEXTAREA>

<INPUT TYPE="text" NAME="name" size=10 VALUE="匿名"> <INPUT TYPE="submit" NAME="record" VALUE="投稿/確認"> </FORM> </CENTER> <HR><HR> <?php $con=pg_connect("dbname=chatdb"); if (!empty($_GET['record'])){ $contents=$_GET['cont']; $name=$_GET['name']; if ($contents <> ""){ $date=getdate(); $yymmdd=$date['year']."-".$date['mon']."-".$date['mday']; $hhmm=$date['hours'].":".$date['minutes'].":".$date['seconds']; $sqlcommand=“INSERT INTO chattable

values('$yymmdd','$hhmm','$name','$contents')"; $result=pg_query($sqlcommand);

} }

$sql="select * from chattable order by yymmdd,hhmm DESC"; $result=pg_query($sql);

if ($result==false){

print("SQL実行に失敗"); exit;

}

for ($i=0; $i<pg_num_rows($result); $i++){

echo "<TABLE border=0 align=center width=900>"; $record=pg_fetch_array($result,$i); echo "<TR>"; printf("<TD width=200>%s <BR>%s %s</TD>",$record['name'],$record['yymmdd'],$record['hhmm']); printf("<TD> %s</TD>",$record['cont']); echo "</TR>"; echo "</TABLE>"; echo "<HR>"; } pg_free_result($result); pg_close($con); ?> </BODY> </HTML> 続きです