Transcript 授業の概要と実習環境説明

平成21年度 情報科学III （理系コア科目・２年生）
授業の概要と実習環境説明
担当 岡村耕二
月曜日 ２限
http://okaweb.ec.kyushu-u.ac.jp/lectures/jk3/
本資料の一部は、堀良彰准教授、天野浩文准教授等による
以前の講義資料をもとにしています。
本日の内容
• 授業に関する説明
– 出席システム
• 授業の目標
– php, SQL を使って、サーバサイドプログラミングができるよう
になる。
– HTML, プログラミング言語の基本は前提（希望)
• 使用する計算機資源
– 教育用計算機（単なる端末)
– php, SQL が使えるのは大学院の別のサーバを使用する。
• データベース＆ＰＨＰ概要
• 課題
– bossp で簡単な Web Page を作ってみる。
授業に関する説明
• 出席の取り方 （RAM）
– ＲＡＭ：出席・レポート管理システム with 掲示板
• http://cl.is.kyushu-u.ac.jp/Literacy/RAM/cgi-bin/index.cgi
– 本日登録して下さい。
• 成績評価の方法
– 60% 平常点（出席、レポート）
• 講義中に演習問題を出します。
• 宿題の課題を出します。
– 40% 課題点（最終課題による、試験は行わない。）
授業の目標
• ウェブブラウザを利用したサービスの仕組や問題を理解し，
簡単な情報処理システムを自分で構築できるようになる．
• 具体的には，以下のような処理を行うプログラムを記述でき
るようになる．
– ブラウザからアクセスがあった時点でサーバ上のデータベースにアク
セスし，それから得られたデータを用いて動的にwebページを生成す
る．
– ブラウザに表示されたフォームにキーボードから入力されたデータを
用いて，サーバ上のデータベースを更新する．
• 勉強するプログラミング言語
– PHP (PHP: Hypertext Preprocessor)
• Personal Home Page Tools
– SQL (Structured Query Language)
主に使用する計算機
• bossp.is.kyushu-u.ac.jp
– 今日は一時IDを使う。
– 次週以降は、各人のIDを用意する。
• 学内から利用方法
– ターミナルから ssh でログインする。
• 学外からの利用方法
– ah.s.kyushu-u.ac.jp にまずログインする
– ah.s.kyushu-u.ac.jp から ssh で bossp にログイ
ンできる。
目標達成のために、この講義で具体的に学ぶこと
• webブラウザでアクセスしたサーバに何かの
「仕事」をさせるサーバサイドプログラムのしく
みを理解
• サーバサイドプログラムを作る言語の一例と
してのPHPを学習
• データベース言語SQLの基礎を学習
• サーバに置かれたデータベースにアクセスす
るようなサーバサイドプログラムをマスター
マスターできる技術
情報システムの構成要素
• Webブラウザ(Internet Explorer)
• Webサーバ Apache (PHP4 を処理できるもの)
• MySQL (RDB: リレーショナルデータベース)
コンピュータ（上の）言語
• プログラミング言語 PHP4 (Hypertext Processor
version 4)
注意：プログラミングの基礎、HTMLはある程度知っている
ことを前提に講義を進めます。
Web ブラウザ以外の、apache, MySQL は別に準備した Linux PC で動いています。
本日の演習問題・課題
• bossp で簡単な Web Page を作る
– 教育用システムから ssh でログインする。
• ID/passwd は講義中に伝えます。
– publich_html の下に自分のIDのディレクトリを作成する。
• mkdir
– xemacs で、index.html を作成する。
– 内容はなんでもいい。英語コンテンツでOK。
• 演習問題
– 講義中に作る
• 課題
– 講義後、自力で作れることを確認する。
• レポート
– 演習問題、課題のURLを知らせる。一つのページに、両URLのリンク
を作って、そのURLをレポートする。
導入
学習環境の理解・サーバサイドプログラム
九州大学情報統括本部 教育用計算機システム（１）
サーバ
Windows
XP
UNIX
＋
webサーバ
ファイル
端末室（六本松，箱崎等）
情報基盤研究開発センター
（箱崎地区）
どこの端末室のどの端末からログインしても，自分が前回保存したWindowsファイル（Z
ドライブ）にアクセスできる．
• もちろん，正しくログインできたらの話であるが…
そのようなサービスを提供してくれているサーバのオペレーティングシステムは，実は
Windowsではなく，UNIX（Solaris）である．
九州大学情報統括本部 教育用計算機システム（２）
(2)UNIXにファ
イル転送
(1)Windows
にログオン
（このとき，さらに
UNIXにログインす
る必要がある．）
端末室（六本松，箱崎等）
サーバ
webページ公開
ファイル
情報基盤研究開発センター
（箱崎地区）
自分で作ったHTMLファイルをUNIXサーバ上の適切なディレクトリ（フォルダ）に置けば，
自分のwebページを公開することができる．
• 教育用システムのWindows と UNIXでは，IDとパスワードが共通．
• webページ公開手順の詳細は，「利用の手引き」を参照のこと．
しかし，このサーバには，この講義で必要となる他のソフトウェアが用意されていない．
そこで，今回の講義では…（１）
九州大学
教育用計算機システム
Windows
XP
サーバ
サーバ
UNIX
＋
webサーバ
他
ファイル
ファイル
bossp.is.kyushu-u.ac.jp
大学院 システム情報科学府
計算機室（伊都地区）
端末は九州大学教育用計算機システムのWindows PC を用いるが，システム情報科学
府（伊都地区）に設置された別のサーバ上に，自分のプログラムを作る．
• システム情報のサーバのIDとパスワードは，教育用システムのそれとは連動していな
い．
• OSは，厳密にはUNIXではなくCentOSと呼ばれるものだが，今回の講義ではその差
異を意識する必要はないだろう．
そこで，今回の講義では…（２）
九州大学
教育用計算機システムのPC
Windows
XP
サーバ
システム情報のサーバ
サーバ
ファイル
IDとパスワードはすでに発行済
み
ファイル
UNIX
＋
webサーバ
他
IDとパスワードは
次回以降配布
このサーバには，webサーバの他に
PHP言語処理系
データベース管理システム（MySQL）
がインストールされている．
ただし，出欠を取るときだけは…
九州大学
教育用計算機システム
Windows
XP
システム情報のサーバ
サーバ
出席管理システム
（RAM）
サーバ
ファイル
ファイル
http://cl.is.kyushu-u.ac.jp/Literacy/RAM/cgi-bin/index.cgi
IDとパスワードは
自分で設定する
出欠を取るときには，さらに別のサーバにwebブラウザでアクセスする．
• 出席管理システム（RAM）
• これにもIDとパスワードが必要だが，これも本学の教育用システムやシステム情報
のwebサーバ（前ページ）とは連動していない．
• 初回に，自分のID（教育用システムと同じにする）に対するパスワードを設定する．
したがって…
 今回の講義では，次の3つの計算機システムを使い分けなが
ら作業する．
1. 端末室のPC
• いつも通りにWindowsにログオン
2. システム情報のwebサーバ
• ホスト：bossp.is.kyushu-u.ac.jp
• IDとパスワードの配布は次回以降
3. その回の講義に出席したことを記録するには：
• 以下のURLにブラウザでアクセスし，必要な操作を行
うこと．
– http://cl.is.kyushu-u.ac.jp/Literacy/RAM/cgi-bin/index.cgi
•
初回に，自分で自分のパスワードを設定する．
– IDは，教育用システムと同じものにすること．
サーバサイドプログラミングとは
1.
2.
3.
4.
5.
6.
クライアントサーバモデル
World-Wide Web
HTTPとHTML
さまざまなコンテンツの登場
webページを動的に生成する
WWWサーバにもっと他の仕事をさせる
クライアントサーバモデル（１）
 サーバ（server）と，クライアント（client）によって，システムを構成する方式
– サーバ：あるサービスを提供するもの
– クライアント：そのサービスを受けるもの
 主な用途
– ネットワーク上で動作するアプリケーションや，広域分散処理システム
上のサービスに多く見られる．
• クライアントがサーバにサービスの実行を要求（処理を要求）し，
• サーバがそれに応答する（実行結果を返す）．
– 通常は，ひとつのサーバがネットワーク上に分散する複数の（多数の）
クライアントにサービスを提供することが多い．
• ただし，単一の計算機の内部でサーバプロセスとクライアントプロセ
スが動作する形態もある．
クライアントサーバモデル（２）
 サーバとクライアントが通信するための規約（プロトコル，
protocol）が，サービスごとに定められている．
– この規約に従うことにより，異なる製造元から提供された
サーバとクライアントが通信することも可能になる．
クライアントとサーバの通信の例
 要求と応答
webブラウザ（クライアント）
webサーバ
要求
要求の処理
結果を待つ
応答
要求
結果を待つ
応答
時間
他のクライアントからの
要求を処理してもよい
要求の処理
時間
World-Wide Web（WWW）
 誕生は1989年...
– ヨーロッパの原子核研究機構で，報告書・論文・画像・観測
データなどのさまざまなデータファイルを多くの研究者が
ネットワークで共有するためのサービスとして始まった．
 インターネット上の数百万ものサーバ上の文書を目に見えな
いリンク（ハイパーリンクともいう）で結んだ「ハイパーテキスト
（hypertext）」を共有するしくみ
– 無数の文書がリンクで結ばれている様子を，蜘蛛の巣
（web）にたとえた．
– Webサービスのためのハイパーテキストの文法がHTML
（hypertext markup language）
– クライアントがハイパーテキストの転送を要求したり，サー
バがクライアントにデータを転送するためのプロトコルが
HTTP（hypertext transfer protocol）
URLとURI
 URL（Uniform Resource Locator）
– web上のリソース（データやサービス）の『場所』を一意に識別するもの．
– 絶対URLの例
• http://isabell.cc.kyushu-u.ac.jp/~amano/index-j.html
– 相対URL…すでに指定されたリソースからの相対的な位置を表す．
• 例： /data-engineering/index.html
 URI（Uniform Resorce Identifier）
– URLはリソースが移動されると無効になってしまう．
• そこで，『場所』ではなく普遍的・永続的な『名前』でリソースを識別し
ようという考え方が登場した．
– そうすると URL という名称はおかしいので…
 ただし，今回の講義では，上記の2つを区別して考える必要はないだろう．
HTTP (Hypertext Transfer Protocol) －(1)
 クライアントからサーバに送られる
基本的な4種類のリクエスト
– GET
• サーバ上のファイルを送る
ように要求する．
– POST
• 後ろに続くメッセージボ
ディをサーバ上のファイル
に渡すように要求する．
– PUT
• 後ろに続くメッセージボ
ディを，サーバに受け入れ
るように要求する．
– DELETE
• サーバ上のファイルを削
除するように要求する．
最も単純なリクエストの例
GET /index.html HTTP/1.1
メソッド
URI
プロトコルバージョン
（ここでは相対）
複数行にわたるリクエストの書式
リクエスト行
メッセージヘッダ
（ない場合もある）
（空行）
メッセージボディ
（ない場合もある）
HTTP (Hypertext Transfer Protocol) －(2)
 HTTPレスポンス
HTTPレスポンスの書式
– 最初に，リクエスト受信・処理がうまく
行ったかどうかを示す．
ステータス行
– それに付加的に追加される情報をメッ
メッセージヘッダ
セージヘッダに．
（ない場合もある）
– 空行はメッセージヘッダの終わりを表す．
（空行）
– その後ろがレスポンスメッセージの本体．
メッセージボディ
 メッセージボディが…
（ない場合もある）
– HTMLフォーマットのデータなら：ブラウ
ザは，ウィンドウ内にwebページを表示
する．
– それ以外のフォーマットなら：
• 「ファイルのダウンロード」ダイアログ
が出る．
• アドオン（あるいは，プラグイン，ヘル
パーアプリケーション）が処理する．
ブラウザとサーバのやりとりの一例
ブラウザでURLを入れたりリ
ンクをクリックしたりしているだ
けではわかりにくいが，目に
見えないところで，このような
やりとりが行われている．
メッセージボディを整形して表示
HTTP/1.1 200 OK
Date: Wed, 11 Apr 2007 ...
Server: Apace/1.3.6 (UNIX)
Content-Type: text/html;
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html">
<title>情報科学III(天野浩文)</title>
<body>
...
HTML (Hypertext Markup Language)
 ハイパーテキスト文書の，特に以下のような機能・構成を記述
するための言語
– 文書の構造（骨格）
• 見出し，本文，箇条書き，表，etc.
– 他の文書に移動するためのリンク
• 絶対または相対URIを含む
– 文字列の表示の制御
• 文字サイズ，書体（太字，斜体字，…），etc.
 < と > で囲まれたタグを多用する．
HTTP ＋ HTML でできること
 サーバ上に事前に用意されているHTML文書を，クライアント
からのリクエストに応じてブラウザに転送する．
 HTML文書内の「リンク」から，（ブラウザ上でクリックするだけ
で）他のURIに飛んでいく．
 画像データくらいは，ページ内に埋め込んで表示させることも
できる．
リンク２
クリック！
リンク１
......................
...............
..............
クリック！
................................
.............................
すべて，事前に用意されたHTML文書ファイルと画像ファイル
さまざまなコンテンツの登場
 今や，多くのwebページは，HTML（＋HTTP）だけではなくなっ
た．
– 文字よりも画像主体のページ
• HTMLはページの外枠だけ，などということも
– さまざまなコンテンツへのリンク
• アドオン（プラグイン，ヘルパーアプリケーション）の充実
– 音声・音楽
– 動画
– etc.
 しかし，これらのコンテンツも，事前に作成されてサーバに格
納されているという点では，HTMLファイルと変わらない．
ページの事前準備は本当に必須なのか？
事前に用意
されていなく
ても…
その場で
HTTP/1.1 200 OK
Date: Wed, 11 Apr 2007 ...
Server: Apace/1.3.6 (UNIX)
Content-Type: text/html;
HTML文書として正しければ，
いつ作られたかブラウザには
わからない．
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html">
<title>情報科学III(天野浩文)</title>
<body>
...
Webページを動的に生成するしくみ
 Server-Side Include （SSI）
– HTML文書の一部に，動的な内容（サーバ上のコマンドを
実行したときの出力）を組み込む．
• アクセス日付，時刻
• アクセスカウンタ（ページ内に文字として表示）
– あまりたいしたことはできない．文書の一部が変わるだけ．
 URIの指定するリソースを，静的な文書ファイルではなく，プロ
グラムにしてしまう．
– クライアントからのアクセスが来たら，そのプログラムを実
行する．
– そのプログラムが出力する内容を，ブラウザに表示させる．
• ただし，HTMLにのっとった出力をするようにプログラム
を作っておく．
サーバで実行するか，クライアントで実行するか
ブラウザ
プログラム
の出力
受け取ったものを表示するのみ
ディスクから
プログラムを読
み出してサー
バで実行
ブラウザ
プログラムの
出力を表示
たいていは，送られてきたプログラムを
実行するためのアドオンがブラウザに
インストールされていることが必要
リクエストされた
ファイル
（＝プログラム）
をクライアントに
転送するのみ
動的webページ生成法のいろいろ
実際には，ページ生
成以上のこともいろ
いろ実行可能．
 サーバによる動的Webページ生成
– CGI（Common Gateway Interface）
– PHP（PHP: Hypertext Preprocessor）
– Java Servlet
– JSP（Java Sever Pages），ASP（Active Server Pages）
 クライアントによる動的Webページ生成
– JavaScript
• プログラミング言語 Java とは別物の言語
– Java Applet
• プログラミング言語 Java のサブセット
– Active-X
• 事実上，クライアント上でできることなら何でも実行可能
サーバサイドプログラミング
 クライアントからのリクエストを処理するためにサーバ側で動
作するようなプログラムを作ること．
– ただし，サーバそのものを作るというよりも，サーバの機能
の足りない部分を補うようなプログラムを作ることを指すこ
とが多い．
サーバにもっと他の仕事をさせる
 単にブラウザに表示する内容を動的に生成するだけでなく…
– クライアントから送られてきた情報にしたがって，サーバ内
のデータを検索する．
→『検索エンジン』
– クライアントから送られてきた情報をサーバ側に追記する．
→『掲示板』
– クライアントからの情報に応じて，サーバ側データの内容を
更新していく．
→『座席予約システム』，『オンラインバンキングシステム』
今学期末の課題で作る予定のシステム（最終課題）の構成
SQL
クエリ
ブラウザ
PHPプログラムは，クライア
ントからのリクエストに応じ
てデータベースにアクセス
し，その結果を整形してブ
ラウザに返す．
また，データベースにアク
セスする際には，SQL言語
によるクエリ（問い合わせ，
query）を発行する．
web
サーバ
PHP
プログラム
検索・更新
の結果
データベース
管理システム
（DBMS）
データベース
本日のまとめ
• この講義の目標
– クライアントからのアクセスがあった時にサーバで実行され，ブラウザ
画面での表示を動的に生成するようなプログラムを作る．
• クライアントからの情報に応じて，データベースを検索，更新する．
– SaaS（Software as a Service）。
• 講義・学習環境の説明
– 端末室のPC
– システム情報科学府のサーバ
– 出席管理システム
• サーバサイドプログラミングの理解
• サーバへのログイン
• 課題