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

平成22年度 情報科学III （理系コア科目・２年生）
授業の概要と実習環境説明
担当 岡村耕二
月曜日 ２限
http://okaweb.ec.kyushu-u.ac.jp/lectures/jk3/
本資料の一部は、堀良彰准教授、天野浩文准教授、菅沼明准
教授等による以前の講義資料をもとにしています。
この講義について



全学教育・理系コア科目
月曜2限・1602番教室
この講義で学ぶこと：
サーバサイドプログラミング

webブラウザでアクセスしたサーバに何かの「仕
事」をさせるサーバサイドプログラムのしくみ
 サーバサイドプログラムを作る言語の一例として
のPHP
 データベース言語SQLの基礎
 サーバに置かれたデータベース(SQL)にアクセス
するようなサーバサイドプログラムを PHP で作成
する。
2
本日の内容
• 授業に関する説明
– 出席システム
• 授業の目標
– php, SQL を使って、サーバサイドプログラミングができるよう
になる。
– HTML, プログラミング言語の基本は前提（希望)
• 使用する計算機資源
– 教育用計算機（単なる端末)
– php, SQL が使えるのは大学院の別のサーバを使用する。
• データベース＆ＰＨＰ概要
• 課題
– rupus で簡単な Web Page を作ってみる。
授業に関する説明
• 出席の取り方 （RAM）
– ＲＡＭ：出席・レポート管理システム with 掲示板
– http://ghost.i.kyushu-u.ac.jp/RAM/cgi-bin/index.cgi
– 本日登録して下さい。
• 成績評価の方法
– 60% 平常点（出席、レポート）
• 講義中に演習問題を出します。
• 宿題の課題を出します。
– 40% 課題点（最終課題による、試験は行わない。）
出席管理システム
RAMの使用法
RAMのトップページ
最初に自分を登
録してもらう
RAMの受講登録画面（学生）
この部分を記入する
最後に「登録」をクリック
登録内容の確認（学生）
UIDとパスワード，名前
が正しいかを確認して
「登録実行」をクリック
出席届けの提出（学生）
受講登録が終わっ
たら出席届けを提
出します
この部分を記
入
最後に「入室」をクリック
2回目以降の講義
のときには，この作
業だけでOKです
出席届けの提出後（学生）
今日，出席している学
生のリストが表示され
ます
自分の出席が登録さ
れていることを確認で
きます
授業の目標
• ウェブブラウザを利用したサービスの仕組や問題を理解し，
簡単な情報処理システムを自分で構築できるようになる．
• 具体的には，以下のような処理を行うプログラムを記述でき
るようになる．
– ブラウザからアクセスがあった時点でサーバ上のデータベースにアク
セスし，それから得られたデータを用いて動的にwebページを生成す
る．
– ブラウザに表示されたフォームにキーボードから入力されたデータを
用いて，サーバ上のデータベースを更新する．
• 勉強するプログラミング言語
– PHP (PHP: Hypertext Preprocessor)
• Personal Home Page Tools
– SQL (Structured Query Language)
主に使用する計算機
• rupus.i.kyushu-u.ac.jp
– 今日は一時ID (test100412) を使う。
– 次週以降は、各人のIDを用意する。
目標達成のために、この講義で具体的に学ぶこと
• webブラウザでアクセスしたサーバに何かの
「仕事」をさせるサーバサイドプログラムのしく
みを理解
• サーバサイドプログラムを作る言語の一例と
してのPHPを学習
• データベース言語SQLの基礎を学習
• サーバに置かれたデータベースにアクセスす
るようなサーバサイドプログラムをマスター
マスターできる技術
情報システムの構成要素
• Webブラウザ(Internet Explorer)
• Webサーバ Apache (PHP4 を処理できるもの)
• MySQL (RDB: リレーショナルデータベース)
コンピュータ（上の）言語
• プログラミング言語 PHP4 (Hypertext Processor
version 4)
注意：プログラミングの基礎、HTMLはある程度知っている
ことを前提に講義を進めます。
Web ブラウザ以外の、apache, MySQL は別に準備した Linux PC で動いています。
本日の演習問題・課題
• rupus で簡単な Web Page を作る
– 教育用システムから ssh でログインする。
• ID/passwd は講義中に伝えます。
– publich_html の下に自分のIDのディレクトリを作成する。
• mkdir
– emacs で、index.html を作成する。
– 内容はなんでもいい。英語コンテンツでOK。
• 演習問題
– 講義中に作る
• 課題
– 講義後、自力で作れることを確認する。
• レポート
– 演習問題、課題のURLを知らせる。一つのページに、両URLのリンク
を作って、そのURLをレポートする。
作業環境
16
使用する計算機資源
情報システムの構成要素
 Webブラウザ(Safari)
 Webサーバ Apache (PHP4 を処理できるもの)
 MySQL (RDB: リレーショナルデータベース)
コンピュータ（上の）言語
 ページ記述言語 HTML
 プログラミング言語 PHP4 (PHP Hypertext
Processor version 4)
Web ブラウザ以外の，apache, MySQL は別に準備した Linux PC で動いています．
17
九州大学 教育情報システム（１）
サーバ
Mac OS X
UNIX
＋
webサーバ
ファイル
端末室（伊都，箱崎等）
情報基盤研究開発センター
（箱崎地区）
どこの端末室のどの端末からログインしても，自分が前回保存したファイルにアクセスで
きる
• もちろん，正しくログインできたらの話であるが…
そのようなサービスを提供してくれているサーバのオペレーティングシステムは，UNIX
である
18
九州大学 教育情報システム（２）
(1)Macにロ
グオン
(2)UNIXにファ
イル転送
（このとき，さらに
UNIXにログインす
る必要がある．）
端末室（伊都，箱崎等）
サーバ
webページ公開
ファイル
情報基盤研究開発センター
（箱崎地区）
自分で作ったHTMLファイルをUNIXサーバ上の適切なディレクトリ（フォルダ）に置けば，
自分のwebページを公開することができる
• 教育情報システムのMacでも同じフォルダが見えている
しかし，このサーバでは，この講義で必要となる他のソフトウェアが一般に公開されてい
ない
19
そこで，今回の講義では…（１）
九州大学
教育情報システム
Mac OS X
サーバ
サーバ
UNIX
＋
webサーバ
他
ファイル
ファイル
システム情報科学府
計算機室（伊都地区）
端末は九州大学教育情報システムのMac を用いるが，システム情報科学府（伊都地
区）に設置された別のサーバ上に，自分のプログラムを作る
• システム情報のサーバのIDとパスワードは，教育情報システムのそれとは連動して
いない
• OSは，厳密にはCentOSと呼ばれるものを使用する
20
そこで，今回の講義では…（２）
九州大学
教育情報システムのPC
Mac OS X
システム情報のサーバ
サーバ
サーバ
ファイル
IDとパスワードはすでに発行済
み
ファイル
UNIX
＋
webサーバ
他
IDとパスワードは
次回以降配布
このサーバには，webサーバの他に
PHP言語処理系
データベース管理システム（MySQL）
がインストールされている
21
ただし，出欠を取るときだけは…
九州大学
教育情報システム
Windows
XP
システム情報のサーバ
サーバ
出席管理システム
（RAM）
サーバ
ファイル
ファイル
IDとパスワードは
自分で設定する
出欠を取るときには，さらに別のサーバにwebブラウザでアクセスする
• 出席管理システム（RAM）
• これにもIDとパスワードが必要だが，これも本学の教育情報システムやシステム情
報のwebサーバ（前ページ）とは連動していない
• 初回に，自分のID（教育情報システムと同じにする）に対するパスワードを設定する
22
したがって…

今回の講義では，次の3つの計算機システムを使い
分けながら作業する

端末室のMac


システム情報のwebサーバ



いつも通りにMac OS Xにログオン
ホスト：rupus.i.kyushu-u.ac.jp
IDとパスワードの配布は次回以降
その回の講義に出席したことを記録するには：

以下のURLにブラウザでアクセスし，必要な操作を行うこと
• http://ghost.i.kyushu-u.ac.jp/RAM/cgi-bin/index.cgi

初回に，自分で自分のパスワードを設定する
後でゆっくり時間を取るので，今あわててやらないこと．
23
サーバサイドプログラミングとは
1.
2.
3.
4.
5.
6.
クライアントサーバモデル
World-Wide Web
HTTPとHTML
さまざまなコンテンツの登場
webページを動的に生成する
WWWサーバにもっと他の仕事をさせる
24
コンピューティングのアプローチ

コンピュータが行っていること
データを流す
 蓄える
 値を変える


（考え方）
コンピューティングの真髄はデータのフロー

CPUや各種デバイスは，フローの本流または支
流に割り込んで，データを修正（変化）させる，利
用する
 ディスプレイメモリ上のデータが変化すると画像が
変化する
25
データのフローが存在する場所

古典的PCの使われ方


データのフローはPCの筐体内でのみ or それに
近い形で取り扱っていた
現在のPCの使われ方

データのフローはPCの筐体内に留まらない


例）インターネット接続されたPCで，ウェブブラウザを
開いてウェブページを見る
インターネット中のサーバから，自分のPCへウェブ
ページデータの流れが発生するともいうことが出来る
26
クライアントサーバモデル（１）

サーバ（server）と，クライアント（client）によって，シス
テムを構成する方式



サーバ：あるサービスを提供するもの
クライアント：そのサービスを受けるもの
主な用途

ネットワーク上で動作するアプリケーションや，広域分散処
理システム上のサービスに多く見られる



クライアントがサーバにサービスの実行を要求（処理を要求）し，
サーバがそれに応答する（実行結果を返す）
通常は，ひとつのサーバがネットワーク上に分散する複数
の（多数の）クライアントにサービスを提供することが多い

ただし，単一の計算機の内部でサーバプロセスとクライアントプロ
セスが動作する形態もある
27
クライアントサーバモデル（２）

サーバとクライアントが通信するための規約（プロトコ
ル，protocol）が，サービスごとに定められている

この規約に従うことにより，異なる製造元から提供された
サーバとクライアントが通信することも可能になる
28
クライアントとサーバの通信の例

要求と応答
webブラウザ（クライアント）
webサーバ
要求
要求の処理
結果を待つ
応答
要求
結果を待つ
応答
時間
他のクライアントからの
要求を処理してもよい
要求の処理
時間
29
ウェブクライアントとウェブサーバ


複数のコンピュータを使用した分散処理におけるモデ
ルのひとつ・・・クライアント・サーバモデル
あるサービスについて，




サービスを提供する側・・・サーバ
サービスを利用する側（サービスを提供される側）・・・クラ
イアント
ウェブクライアント・・・例）パソコン上のブラウザ
（ Safari，Internet Explorer，FireFox，Opera)
ウェブサーバ・・・例）apache
30
ウェブ（World Wide Web）の仕組み


ブラウザが，ウェブサーバにコンテンツを要求
ウェブサーバは要求に応じて，結果（コンテン
ツ）を送信
静的な場合・・・ウェブサーバに蓄積された情報を
そのままブラウザに送る
 動的な場合・・・ウェブサーバはプログラムなどで
データを処理し，その結果をブラウザに送る


ブラウザは利用者にデータを提示（表示）
31
ウェブの経験


ウェブは，シンプルで必要な機能のみの標準
化に力を注いで作られた
技術者・利用者ともにウェブの威力を目の当た
りにした


「標準化」は重要
従来以上に標準化に気を配るようになった
32
URLとURI

URL（Uniform Resource Locator）


web上のリソース（データやサービス）の『場所』を一意に
識別するもの
絶対URLの例


相対URL…すでに指定されたリソースからの相対的な位
置を表す


例： /data-engineering/index.html
URI（Uniform Resorce Identifier）

URLはリソースが移動すると無効になってしまう



http://rupus.i.kyushu-u.ac.jp/~test100412/index.html
そこで，『場所』ではなく普遍的・永続的な『名前』でリソースを識
別しようという考え方が登場した
そうすると URL という名称はおかしいので…
ただし，今回の講義では，上記の2つを区別して考え
る必要はないだろう
33
HTTP (Hypertext Transfer Protocol) －(1)

クライアントからサーバに送
られる基本的な4種類のリク
エスト

GET




サーバ上のファイルを送る
ように要求する
後ろに続くメッセージボディ
をサーバ上のファイルに渡
すように要求する
PUT

GET /index.html HTTP/1.1
メソッド
POST

最も単純なリクエストの例
後ろに続くメッセージボディ
を，サーバに受け入れるよ
うに要求する
URI
プロトコルバージョン
（ここでは相対）
複数行にわたるリクエストの書式
リクエスト行
メッセージヘッダ
（ない場合もある）
（空行）
メッセージボディ
（ない場合もある）
DELETE

サーバ上のファイルを削
除するように要求する
34
HTTP (Hypertext Transfer Protocol) －(2)

HTTPレスポンス





最初に，リクエスト受信・処理がうまく
行ったかどうかを示す
それに付加的に追加される情報をメッ
セージヘッダに
空行はメッセージヘッダの終わりを表
す
その後ろがレスポンスメッセージの本
体
HTTPレスポンスの書式
ステータス行
メッセージヘッダ
（ない場合もある）
（空行）
メッセージボディ
（ない場合もある）
メッセージボディが…


HTMLフォーマットのデータなら：ブラウ
ザは，ウィンドウ内にwebページを表示
する
それ以外のフォーマットなら：


「ファイルのダウンロード」ダイアログ
が出る
アドオン（あるいは，プラグイン，ヘル
パーアプリケーション）が処理する
35
ブラウザとサーバのやりとりの一例
ブラウザで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>九州大学__Kyushu University__
</title></head>
<body>
...
36
HTML (Hypertext Markup Language)

ハイパーテキスト文書の，特に以下のような機
能・構成を記述するための言語

文書の構造（骨格）


他の文書に移動するためのリンク


絶対または相対URIを含む
文字列の表示の制御


見出し，本文，箇条書き，表，etc.
文字サイズ，書体（太字，斜体字，…），etc.
< と > で囲まれたタグを多用する
37
HTTP ＋ HTML でできること

サーバ上に事前に用意されているHTML文書を，クライアント
からのリクエストに応じてブラウザに転送する

HTML文書内の「リンク」から，（ブラウザ上でクリックするだけ
で）他のURIに飛んでいく

画像データくらいは，ページ内に埋め込んで表示させることも
できる
リンク２
クリック！
リンク１
......................
...............
..............
クリック！
................................
.............................
すべて，事前に用意されたHTML文書ファイルと画像ファイル
38
さまざまなコンテンツの登場

今や，多くのwebページは，HTML（＋HTTP）
だけではなくなった

文字よりも画像主体のページ


HTMLはページの外枠だけ，などということも
さまざまなコンテンツへのリンク

アドオン（プラグイン，ヘルパーアプリケーション）の充
実
• 音声・音楽
• 動画
• etc.

しかし，これらのコンテンツも，事前に作成され
てサーバに格納されているという点では，
HTMLファイルと変わらない
39
ページの事前準備は本当に必須なのか？
事前に用意
されていなく
ても…
その場で
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>九州大学__Kyushu University__
</title></head>
<body>
...
40
Webページを動的に生成するしくみ

Server-Side Include （SSI）

HTML文書の一部に，動的な内容（サーバ上のコマンドを
実行したときの出力）を組み込む



あまりたいしたことはできない


アクセス日付，時刻
アクセスカウンタ（ページ内に文字として表示）
文書の一部が変わるだけ
URIの指定するリソースを，静的な文書ファイルでは
なく，プログラムにしてしまう


クライアントからのアクセスが来たら，そのプログラムを実
行する
そのプログラムが出力する内容を，ブラウザに表示させる

ただし，HTMLにのっとった出力をするようにプログラムを作って
おく
41
サーバで実行するか，クライアントで実行するか
ブラウザ
プログラム
の出力
受け取ったものを表示するのみ
ディスクから
プログラムを読
み出してサー
バで実行
ブラウザ
プログラムの
出力を表示
たいていは，送られてきたプログラムを
実行するためのアドオンがブラウザに
インストールされていることが必要
リクエストされた
ファイル
（＝プログラム）
をクライアントに
転送するのみ
42
動的webページ生成法のいろいろ

サーバによる動的Webページ生成





実際には，ページ生
成以上のこともいろ
いろ実行可能．
CGI（Common Gateway Interface）
PHP（PHP: Hypertext Preprocessor）
Java Servlet
JSP（Java Sever Pages），ASP（Active Server Pages）
クライアントによる動的Webページ生成

JavaScript


Java Applet


プログラミング言語 Java とは別物の言語
プログラミング言語 Java のサブセット
Active-X

事実上，クライアント上でできることなら何でも実行可能
43
サーバサイドプログラミング

クライアントからのリクエストを処理するために
サーバ側で動作するようなプログラムを作るこ
と

ただし，サーバそのものを作るというよりも，サー
バの機能の足りない部分を補うようなプログラム
を作ることを指すことが多い
44
サーバにもっと他の仕事をさせる

単にブラウザに表示する内容を動的に生成す
るだけでなく…
クライアントから送られてきた情報にしたがって，
サーバ内のデータを検索する
→『検索エンジン』
 クライアントから送られてきた情報をサーバ側に
追記する
→『掲示板』
 クライアントからの情報に応じて，サーバ側データ
の内容を更新していく
→『座席予約システム』，『オンラインバンキングシ
ステム』

45
今学期末の課題で作る予定のシステムの構成
SQL
クエリ
ブラウザ
PHPプログラムは，クライア
ントからのリクエストに応じ
てデータベースにアクセス
し，その結果を整形してブ
ラウザに返す
また，データベースにアク
セスする際には，SQL言語
によるクエリ（問い合わせ，
query）を発行する
web
サーバ
PHP
プログラム
検索・更新
の結果
データベース
管理システム
（DBMS）
データベース
46
まとめ

この講義の目標

クライアントからのアクセスがあった時にサーバで
実行され，ブラウザ画面での表示を動的に生成す
るようなプログラムを作る


クライアントからの情報に応じて，データベースを検索，
更新する
作業環境
端末室のPC
 システム情報科学府のサーバ
 出席管理システム


サーバサイドプログラミングとは
47