授業の概要と実習環境説明
Download
Report
Transcript 授業の概要と実習環境説明
平成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