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

平成21年度 情報科学III (理系コア科目・2年生)
授業の概要と実習環境説明
担当 岡村耕二
月曜日 2限
http://okaweb.ec.kyushu-u.ac.jp/lectures/jk3/
本資料の一部は、堀良彰准教授、天野浩文准教授等による
以前の講義資料をもとにしています。
本日の内容
• 授業に関する説明
– 出席システム
• 授業の目標
– php, SQL を使って、サーバサイドプログラミングができるよう
になる。
– HTML, プログラミング言語の基本は前提(希望)
• 使用する計算機資源
– 教育用計算機(単なる端末)
– php, SQL が使えるのは大学院の別のサーバを使用する。
• データベース&PHP概要
• 課題
– bossp で簡単な Web Page を作ってみる。
授業に関する説明
• 出席の取り方 (RAM)
– 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をレポートする。
導入
学習環境の理解・サーバサイドプログラム
九州大学情報統括本部 教育用計算機システム(1)
サーバ
Windows
XP
UNIX
+
webサーバ
ファイル
端末室(六本松,箱崎等)
情報基盤研究開発センター
(箱崎地区)
どこの端末室のどの端末からログインしても,自分が前回保存したWindowsファイル(Z
ドライブ)にアクセスできる.
• もちろん,正しくログインできたらの話であるが…
そのようなサービスを提供してくれているサーバのオペレーティングシステムは,実は
Windowsではなく,UNIX(Solaris)である.
九州大学情報統括本部 教育用計算機システム(2)
(2)UNIXにファ
イル転送
(1)Windows
にログオン
(このとき,さらに
UNIXにログインす
る必要がある.)
端末室(六本松,箱崎等)
サーバ
webページ公開
ファイル
情報基盤研究開発センター
(箱崎地区)
自分で作ったHTMLファイルをUNIXサーバ上の適切なディレクトリ(フォルダ)に置けば,
自分のwebページを公開することができる.
• 教育用システムのWindows と UNIXでは,IDとパスワードが共通.
• webページ公開手順の詳細は,「利用の手引き」を参照のこと.
しかし,このサーバには,この講義で必要となる他のソフトウェアが用意されていない.
そこで,今回の講義では…(1)
九州大学
教育用計算機システム
Windows
XP
サーバ
サーバ
UNIX
+
webサーバ
他
ファイル
ファイル
bossp.is.kyushu-u.ac.jp
大学院 システム情報科学府
計算機室(伊都地区)
端末は九州大学教育用計算機システムのWindows PC を用いるが,システム情報科学
府(伊都地区)に設置された別のサーバ上に,自分のプログラムを作る.
• システム情報のサーバのIDとパスワードは,教育用システムのそれとは連動していな
い.
• OSは,厳密にはUNIXではなくCentOSと呼ばれるものだが,今回の講義ではその差
異を意識する必要はないだろう.
そこで,今回の講義では…(2)
九州大学
教育用計算機システムの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サーバにもっと他の仕事をさせる
クライアントサーバモデル(1)
 サーバ(server)と,クライアント(client)によって,システムを構成する方式
– サーバ:あるサービスを提供するもの
– クライアント:そのサービスを受けるもの
 主な用途
– ネットワーク上で動作するアプリケーションや,広域分散処理システム
上のサービスに多く見られる.
• クライアントがサーバにサービスの実行を要求(処理を要求)し,
• サーバがそれに応答する(実行結果を返す).
– 通常は,ひとつのサーバがネットワーク上に分散する複数の(多数の)
クライアントにサービスを提供することが多い.
• ただし,単一の計算機の内部でサーバプロセスとクライアントプロセ
スが動作する形態もある.
クライアントサーバモデル(2)
 サーバとクライアントが通信するための規約(プロトコル,
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に飛んでいく.
 画像データくらいは,ページ内に埋め込んで表示させることも
できる.
リンク2
クリック!
リンク1
......................
...............
..............
クリック!
................................
.............................
すべて,事前に用意された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
– システム情報科学府のサーバ
– 出席管理システム
• サーバサイドプログラミングの理解
• サーバへのログイン
• 課題