* 第8回 動的なWebページの作成 [#f5944013] CENTER:本日アクセス: &counter(today); 件 ** 目次 [#gf7f388b] #contents ** 課題の提出について [#vf316e6f] - 本日は課題が6個ありますが、途中でいちいち提出せずにどんどん進めてください(分からない課題があったら、後回しにしてもよいです)。 - 実験の時間の最後に、課題1〜6のうちできあがったものをメールで報告してください。 - それぞれの課題について以下を書いてください。 -- ページのURL -- どういう手法で作ったかの詳しい説明 - 送り先は report@fig.ele.eng.tamagawa.ac.jp です。 ** アクセスカウンタとSSI [#v4c041f6] *** カウンタとは [#o7ac0697] - Webページには,既に用意した情報を提示するだけでなく,ブラウザからのリクエストに応じて、さまざまな動的な情報を表示するページがあります.カウンタはその非常に簡単な例です. - このページの上には簡単なカウンタが付いており、新しいブラウザからアクセスがあると数字があがっていきます. *** 課題1:外部のカウンタを設置する [#mc15b325] + 世の中には,フリーでカウンタ機能を提供してくれるところもあります. + サーチエンジンで検索して、カウンタつきのWebページを作成してください。 -- 「無料 カウンタ」「フリー カウンタ」等で検索するとよいでしょう。 + カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい. *** 課題2:C言語の自作カウンタを設置する [#m1e636d4] + 前々回の課題でC言語でカウンタのプログラムを作る課題がありました. + そこで作ったプログラムをすこし改造し、カウンタつきのWebページを作成してください。 + Webサーバの「SSI」という機能を使うと比較的簡単にカウンタを設置することができます。 <!--#exec cmd="実行ファイル名"--> -- 「SSI」「shtml」「テキストカウンタ」などのキーワードで検索してください。 + できあがったら、カウンタのついているページのURLをメールで教員に連絡して下さい. + カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい. ** CGIプログラミング [#g9833976] *** CGIとは [#w986b5a8] - CGIとはWebサーバにプログラムを組み込んで、ブラウザ(ユーザ)からのリクエストによって、その場に応じた情報を表示するページを実現する技術です。 - つまり、ブラウザからのリクエストをプログラムで処理して、定められた手順(プロトコル)に従って応答を返すことになります。 - CGIを作成するためには、まずHTTPについて学ぶ必要があります。 *** HTTP(ハイパーテキスト・トランスファー・プロトコル) [#rd560677] + Webサーバとブラウザの間の通信手順(プロトコル)を見てみましょう。 + 下記のコマンドで、Webサーバ vilab.org にHTTP用のポートで接続することができます。telnetコマンドにはこのような機能があります。 telnet vilab.org http + すると、下記のように表示されてサーバに接続されると思います。 Trying 202.253.197.203... Connected to vilab.ele.eng.tamagawa.ac.jp. Escape character is '^]'. + ここで、Webページ http://vilab.org/test.html を取得するためのHTTPのコマンドを打ち込みます。下記のように入力してください。(入力は表示されないかもしれません) GET /test.html HTTP/1.0[改行] [改行] + すると、サーバから応答が得られます。 HTTP/1.1 200 OK Date: Mon, 13 Jun 2005 15:36:31 GMT Server: Apache/1.3.33 (Debian GNU/Linux) …途中省略… DAV/1.0.3 Last-Modified: Mon, 13 Jun 2005 15:36:07 GMT ETag: "2841b2-7c-42ada7e7" Accept-Ranges: bytes Content-Length: 124 Connection: close Content-Type: text/html <html> <head> <title>viLab</title> </head> <body> <h1>Visual Interface Laboratory</h1> This is a test page. </body> </html> -- この1行目の「''HTTP/1.1 200 OK''」は、Webサーバから成功したかどうかの応答。 -- 2行目から空行までの「''属性名: 値''」というのは、HTTPヘッダ。 -- そして、空行以降が test.html 本体のHTMLとなっています。 + 以上は、通常Netscape NavigatorやInternet ExplorerなどのWebブラウザが行っていることを、手動でやってみたわけです。 *** 課題3:単純なCGIプログラム [#me9354c2] - CGIでは上でも例に示したHTTPのうち、「''Content-Type:''」以下を標準出力に出力するプログラムを作成すればいいです。たとえば以下のような出力をするプログラムを作成すればよいことになります。 Content-Type: text/html <html> <head><title>Hello</title></head> <body> Hello, world! </body> </html> - これをたとえばシェルスクリプトで作成すると以下のようになります。 echo "Content-Type: text/html" echo echo "<html>" echo "<head><title>Hello</title></head>" echo "<body>" echo "Hello, world!" echo "</body>" echo "</html>" - C言語なら以下のようになります。 #include <stdio.h> int main(void) { printf("Content-Type: text/html"); printf("\n"); printf("<html>\n"); printf("<head><title>Hello</title></head>\n"); printf("<body>\n"); printf("Hello, world!\n"); printf("</body>\n"); printf("</html>\n"); return 0; } - 上のプログラムをコンパイルして、CGIとして動かしてみてください。 - CGIを動かすためにはapacheの設定が必要かもしれません。ちゃんと動くようにするのが課題です。 -- 「apache CGI Linux」等で検索して調べてください。 *** 課題4:接続情報を表示するCGI [#u506cf02] - 接続情報を表示するCGIを作成してください。 - 最低限、下記の環境変数の内容を表示すればいいです。 -- ブラウザやOSの種類(環境変数 HTTP_USER_AGENT) -- ブラウザのIPアドレス(環境変数 REMOTE_ADDR) - できあがったら、どういう手法で作ったかを説明したページも作成してください。 *** 課題5:時刻を表示するCGI [#daabebdc] - 現在時刻を表示するCGIを作成してください。 - dateコマンドを利用するのが一番楽でしょう。 - できあがったら、どういう手法で作ったかを説明したページも作成してください。 ** 認証つきページ [#b62226f8] *** 課題6:認証つきページ [#a1c9b0e0] - アクセスにパスワードが必要なページを作ってください。apacheの設定できるはずです。 - 方法はインターネットで検索してください。「BASIC認証」「.htaccess」などのキーワードで検索するといいでしょう。 - ユーザ名「vine」, パスワード「linux」でアクセスできるようにしてください。 ** 第5回レポート [#l24235f8] *** 課題の提出を忘れずに [#vf316e6f] - 実験の時間の最後に、課題1〜6のうちできあがったものをメールで報告してください。 - それぞれの課題について以下を書いてください。 -- ページのURL -- どういう手法で作ったかの詳しい説明 - 送り先は report@fig.ele.eng.tamagawa.ac.jp です。