授業の概要と実習環境説明 担当 岡村耕二 月曜日 ２限 平成20年度 情報科学III （理系コア科目・２年生）

Presentation on theme: "授業の概要と実習環境説明 担当 岡村耕二 月曜日 ２限 平成20年度 情報科学III （理系コア科目・２年生）"— Presentation transcript:

1 授業の概要と実習環境説明 担当 岡村耕二 月曜日 ２限 平成20年度 情報科学III （理系コア科目・２年生）
本資料の一部は、堀良彰准教授、天野浩文准教授等による 以前の講義資料をもとにしています。

2 本日の内容 授業に関する説明 使用する計算機資源 計算機環境 データベース＆ＰＨＰ概要 利用者登録作業とその確認

3 授業に関する説明 授業の目標 出席の取り方 （RAM） 成績評価の方法 「全学教育科目 出席カード」の記入・提出
ＲＡＭ：出席・レポート管理システム with 掲示板 成績評価の方法 50% 平常点（出席、レポート） 50% 課題点（最終課題による、試験は行わない。）

4 授業の目標 ウェブブラウザを利用したサービスの仕組や問題を理解し，簡単な情報処理システムを自分で構築できるようになる．
具体的には，以下のような処理を行うプログラムを記述できるようになる． ブラウザからアクセスがあった時点でサーバ上のデータベースにアクセスし，それから得られたデータを用いて動的にwebページを生成する． ブラウザに表示されたフォームにキーボードから入力されたデータを用いて，サーバ上のデータベースを更新する． 勉強するプログラミング言語 HTML (HyperText Markup Language) PHP (PHP: Hypertext Preprocessor) Personal Home Page Tools SQL (Structured Query Language)

5 目標達成のために、この講義で具体的に学ぶこと
webブラウザでアクセスしたサーバに何かの「仕事」をさせるサーバサイドプログラムのしくみを理解 サーバサイドプログラムを作る言語の一例としてのPHPを学習 データベース言語SQLの基礎を学習 サーバに置かれたデータベースにアクセスするようなサーバサイドプログラムをマスター

6 マスターできる技術 情報システムの構成要素 Webブラウザ(Internet Explorer)
Webサーバ Apache (PHP4 を処理できるもの) MySQL (RDB: リレーショナルデータベース) コンピュータ（上の）言語 ページ記述言語 HTML プログラミング言語 PHP4 (Hypertext Processor version 4) Web ブラウザ以外の、apache, MySQL は別に準備した Linux PC で動いています。

7 講義計画 07 06/09 SQL 概要 08 06/16 SQL データベースアクセスのための文法 01 04/14 導入
5% × 10 = 50% 07 06/09 SQL 概要 08 06/16 SQL データベースアクセスのための文法 06/21 休講 09 06/23 PHP と SQL (MySQL) の連携　その1 10 07/07 PHP と SQL (MySQL) の連携　その2 11 07/14 サーバサイドプログラムとセキュリティ、まとめ、最終課題の説明 05/05, 07/21 は休日 01 04/14 導入 02 04/21 サーバでのファイルの扱い 03 04/28 PHP 概要 04 05/12 PHP 文法 05/19 休講 05 05/26 PHP プログラムの実行 06 06/02 PHP プログラムの実行: データ入力

8 導入 学習環境の理解・サーバサイドプログラム

9 九州大学情報統括本部 教育用計算機システム（１）
九州大学情報統括本部　教育用計算機システム（１） UNIX ＋ webサーバ サーバ Windows XP ファイル 端末室（六本松，箱崎等） 情報基盤研究開発センター （箱崎地区） どこの端末室のどの端末からログインしても，自分が前回保存したWindowsファイル（Zドライブ）にアクセスできる． もちろん，正しくログインできたらの話であるが… そのようなサービスを提供してくれているサーバのオペレーティングシステムは，実はWindowsではなく，UNIX（Solaris）である．

10 九州大学情報統括本部 教育用計算機システム（２）
九州大学情報統括本部　教育用計算機システム（２） (2)UNIXにファイル転送 サーバ (1)Windowsにログオン webページ公開 （このとき，さらにUNIXにログインする必要がある．） ファイル 端末室（六本松，箱崎等） 情報基盤研究開発センター （箱崎地区） 自分で作ったHTMLファイルをUNIXサーバ上の適切なディレクトリ（フォルダ）に置けば，自分のwebページを公開することができる． 教育用システムのWindows と UNIXでは，IDとパスワードが共通． webページ公開手順の詳細は，「利用の手引き」を参照のこと． しかし，このサーバには，この講義で必要となる他のソフトウェアが用意されていない．

11 そこで，今回の講義では…（１） 九州大学 教育用計算機システム サーバ UNIX ＋ webサーバ 他 ファイル
Windows XP ファイル サーバ ファイル bossp.is.kyushu-u.ac.jp 大学院 システム情報科学府 計算機室（伊都地区） 端末は九州大学教育用計算機システムのWindows PC を用いるが，システム情報科学府（伊都地区）に設置された別のサーバ上に，自分のプログラムを作る． システム情報のサーバのIDとパスワードは，教育用システムのそれとは連動していない． OSは，厳密にはUNIXではなくCentOSと呼ばれるものだが，今回の講義ではその差異を意識する必要はないだろう．

12 そこで，今回の講義では…（２） 九州大学 教育用計算機システムのPC システム情報のサーバ サーバ UNIX ＋ webサーバ 他
Windows XP ファイル サーバ UNIX ＋ webサーバ 他 サーバ IDとパスワードは 次回以降配布 ファイル IDとパスワードはすでに発行済み このサーバには，webサーバの他に 　　PHP言語処理系 　　データベース管理システム（MySQL） がインストールされている．

13 ただし，出欠を取るときだけは… 九州大学 教育用計算機システム システム情報のサーバ 出席管理システム （RAM）
ファイル サーバ 出席管理システム （RAM） Windows XP ファイル サーバ IDとパスワードは 自分で設定する 出欠を取るときには，さらに別のサーバにwebブラウザでアクセスする． 出席管理システム（RAM） これにもIDとパスワードが必要だが，これも本学の教育用システムやシステム情報のwebサーバ（前ページ）とは連動していない． 初回に，自分のID（教育用システムと同じにする）に対するパスワードを設定する．

14 したがって… 今回の講義では，次の3つの計算機システムを使い分けながら作業する． 端末室のPC いつも通りにWindowsにログオン
システム情報のwebサーバ ホスト：bossp.is.kyushu-u.ac.jp IDとパスワードの配布は次回以降 その回の講義に出席したことを記録するには： 以下のURLにブラウザでアクセスし，必要な操作を行うこと． 初回に，自分で自分のパスワードを設定する． IDは，教育用システムと同じものにすること．

15 サーバサイドプログラミングとは クライアントサーバモデル World-Wide Web HTTPとHTML さまざまなコンテンツの登場
WWWサーバにもっと他の仕事をさせる

16 クライアントサーバモデル（１） サーバ（server）と，クライアント（client）によって，システムを構成する方式
サーバ：あるサービスを提供するもの クライアント：そのサービスを受けるもの 主な用途 ネットワーク上で動作するアプリケーションや，広域分散処理システム上のサービスに多く見られる． クライアントがサーバにサービスの実行を要求（処理を要求）し， サーバがそれに応答する（実行結果を返す）． 通常は，ひとつのサーバがネットワーク上に分散する複数の（多数の）クライアントにサービスを提供することが多い． ただし，単一の計算機の内部でサーバプロセスとクライアントプロセスが動作する形態もある．

17 クライアントサーバモデル（２） サーバとクライアントが通信するための規約（プロトコル，protocol）が，サービスごとに定められている．
この規約に従うことにより，異なる製造元から提供されたサーバとクライアントが通信することも可能になる．

18 クライアントとサーバの通信の例 要求と応答 webブラウザ（クライアント） webサーバ 要求 結果を待つ 要求の処理 応答
他のクライアントからの 要求を処理してもよい 要求 結果を待つ 要求の処理 応答 時間 時間

19 World-Wide Web（WWW） 誕生は1989年...
ヨーロッパの原子核研究機構で，報告書・論文・画像・観測データなどのさまざまなデータファイルを多くの研究者がネットワークで共有するためのサービスとして始まった． インターネット上の数百万ものサーバ上の文書を目に見えないリンク（ハイパーリンクともいう）で結んだ「ハイパーテキスト（hypertext）」を共有するしくみ 無数の文書がリンクで結ばれている様子を，蜘蛛の巣（web）にたとえた． Webサービスのためのハイパーテキストの文法がHTML（hypertext markup language） クライアントがハイパーテキストの転送を要求したり，サーバがクライアントにデータを転送するためのプロトコルがHTTP（hypertext transfer protocol）

20 URLとURI URL（Uniform Resource Locator）
web上のリソース（データやサービス）の『場所』を一意に識別するもの． 絶対URLの例 相対URL…すでに指定されたリソースからの相対的な位置を表す． 例： /data-engineering/index.html URI（Uniform Resorce Identifier） URLはリソースが移動されると無効になってしまう． そこで，『場所』ではなく普遍的・永続的な『名前』でリソースを識別しようという考え方が登場した． そうすると URL という名称はおかしいので… ただし，今回の講義では，上記の2つを区別して考える必要はないだろう．

21 HTTP (Hypertext Transfer Protocol) －(1)
クライアントからサーバに送られる基本的な4種類のリクエスト GET サーバ上のファイルを送るように要求する． POST 後ろに続くメッセージボディをサーバ上のファイルに渡すように要求する． PUT 後ろに続くメッセージボディを，サーバに受け入れるように要求する． DELETE サーバ上のファイルを削除するように要求する． 最も単純なリクエストの例 GET /index.html HTTP/1.1 メソッド URI （ここでは相対） プロトコルバージョン 複数行にわたるリクエストの書式 リクエスト行 メッセージヘッダ （ない場合もある） （空行） メッセージボディ （ない場合もある）

22 HTTP (Hypertext Transfer Protocol) －(2)
HTTPレスポンス 最初に，リクエスト受信・処理がうまく行ったかどうかを示す． それに付加的に追加される情報をメッセージヘッダに． 空行はメッセージヘッダの終わりを表す． その後ろがレスポンスメッセージの本体． メッセージボディが… HTMLフォーマットのデータなら：ブラウザは，ウィンドウ内にwebページを表示する． それ以外のフォーマットなら： 「ファイルのダウンロード」ダイアログが出る． アドオン（あるいは，プラグイン，ヘルパーアプリケーション）が処理する． HTTPレスポンスの書式 ステータス行 メッセージヘッダ （ない場合もある） （空行） メッセージボディ （ない場合もある）

23 ブラウザとサーバのやりとりの一例 GET /index.html HTTP/1.1
ブラウザでURLを入れたりリンクをクリックしたりしているだけではわかりにくいが，目に見えないところで，このようなやりとりが行われている． GET /index.html HTTP/1.1 メッセージボディを整形して表示 HTTP/ OK Date: Wed, 11 Apr Server: Apace/1.3.6 (UNIX) Content-Type: text/html; <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title>情報科学III(天野浩文)</title> <body> ...

24 HTML (Hypertext Markup Language)
ハイパーテキスト文書の，特に以下のような機能・構成を記述するための言語 文書の構造（骨格） 見出し，本文，箇条書き，表，etc. 他の文書に移動するためのリンク 絶対または相対URIを含む 文字列の表示の制御 文字サイズ，書体（太字，斜体字，…），etc. < と > で囲まれたタグを多用する．

25 HTTP ＋ HTML でできること サーバ上に事前に用意されているHTML文書を，クライアントからのリクエストに応じてブラウザに転送する．
HTML文書内の「リンク」から，（ブラウザ上でクリックするだけで）他のURIに飛んでいく． 画像データくらいは，ページ内に埋め込んで表示させることもできる． リンク１ リンク２ クリック！ クリック！ すべて，事前に用意されたHTML文書ファイルと画像ファイル

26 さまざまなコンテンツの登場 今や，多くのwebページは，HTML（＋HTTP）だけではなくなった． 文字よりも画像主体のページ
さまざまなコンテンツへのリンク アドオン（プラグイン，ヘルパーアプリケーション）の充実 音声・音楽 動画 etc. しかし，これらのコンテンツも，事前に作成されてサーバに格納されているという点では，HTMLファイルと変わらない．

27 ページの事前準備は本当に必須なのか？ GET /index.html HTTP/1.1
事前に用意されていなくても… GET /index.html HTTP/1.1 その場で HTTP/ OK Date: Wed, 11 Apr 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文書として正しければ，いつ作られたかブラウザにはわからない．

28 Webページを動的に生成するしくみ Server-Side Include （SSI）
HTML文書の一部に，動的な内容（サーバ上のコマンドを実行したときの出力）を組み込む． アクセス日付，時刻 アクセスカウンタ（ページ内に文字として表示） あまりたいしたことはできない．文書の一部が変わるだけ． URIの指定するリソースを，静的な文書ファイルではなく，プログラムにしてしまう． クライアントからのアクセスが来たら，そのプログラムを実行する． そのプログラムが出力する内容を，ブラウザに表示させる． ただし，HTMLにのっとった出力をするようにプログラムを作っておく．

29 サーバで実行するか，クライアントで実行するか
受け取ったものを表示するのみ ディスクから プログラムを読み出してサーバで実行 ブラウザ プログラムの出力 リクエストされたファイル （＝プログラム）をクライアントに転送するのみ ブラウザ プログラムの 出力を表示 たいていは，送られてきたプログラムを実行するためのアドオンがブラウザにインストールされていることが必要

30 動的webページ生成法のいろいろ サーバによる動的Webページ生成 CGI（Common Gateway Interface）
実際には，ページ生成以上のこともいろいろ実行可能． サーバによる動的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 事実上，クライアント上でできることなら何でも実行可能

31 サーバサイドプログラミング クライアントからのリクエストを処理するためにサーバ側で動作するようなプログラムを作ること．
ただし，サーバそのものを作るというよりも，サーバの機能の足りない部分を補うようなプログラムを作ることを指すことが多い．

32 サーバにもっと他の仕事をさせる 単にブラウザに表示する内容を動的に生成するだけでなく…
クライアントから送られてきた情報にしたがって，サーバ内のデータを検索する． →『検索エンジン』 クライアントから送られてきた情報をサーバ側に追記する． →『掲示板』 クライアントからの情報に応じて，サーバ側データの内容を更新していく． →『座席予約システム』，『オンラインバンキングシステム』

33 今学期末の課題で作る予定のシステム（最終課題）の構成
PHP プログラム SQL クエリ web サーバ ブラウザ データベース 管理システム （DBMS） 検索・更新の結果 PHPプログラムは，クライアントからのリクエストに応じてデータベースにアクセスし，その結果を整形してブラウザに返す． また，データベースにアクセスする際には，SQL言語によるクエリ（問い合わせ，query）を発行する． データベース

34 本日のまとめ この講義の目標 講義・学習環境の説明 サーバサイドプログラミングの理解 来週（予定）
クライアントからのアクセスがあった時にサーバで実行され，ブラウザ画面での表示を動的に生成するようなプログラムを作る． クライアントからの情報に応じて，データベースを検索，更新する． 講義・学習環境の説明 端末室のPC システム情報科学府のサーバ 出席管理システム サーバサイドプログラミングの理解 来週（予定） サーバへのログイン ファイルの扱い方の理解（システムのより詳しい理解のためのちょっと高度な勉強） 課題開始