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

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