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

この講義について 全学教育・理系コア科目 月曜2限・1602番教室 この講義で学ぶこと： サーバサイドプログラミング 2007/4/11 この講義について 全学教育・理系コア科目 月曜2限・1602番教室 この講義で学ぶこと： サーバサイドプログラミング webブラウザでアクセスしたサーバに何かの「仕事」をさせるサーバサイドプログラムのしくみ サーバサイドプログラムを作る言語の一例としてのPHP データベース言語SQLの基礎 サーバに置かれたデータベース(SQL)にアクセスするようなサーバサイドプログラムを PHP で作成する。 情報科学III（１）

本日の内容 授業に関する説明 授業の目標 使用する計算機資源 データベース＆ＰＨＰ概要 課題 出席システム 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のトップページ 最初に自分を登録してもらう

情報処理演習　担当者説明会　資料 RAMの受講登録画面（学生） この部分を記入する 最後に「登録」をクリック

情報処理演習　担当者説明会　資料 登録内容の確認（学生） UIDとパスワード，名前が正しいかを確認して「登録実行」をクリック

出席届けの提出（学生） 受講登録が終わったら出席届けを提出します 2回目以降の講義のときには，この作業だけでOKです この部分を記入 情報処理演習　担当者説明会　資料 出席届けの提出（学生） 受講登録が終わったら出席届けを提出します 2回目以降の講義のときには，この作業だけでOKです この部分を記入 最後に「入室」をクリック

出席届けの提出後（学生） 今日，出席している学生のリストが表示されます 自分の出席が登録されていることを確認できます 情報処理演習　担当者説明会　資料 出席届けの提出後（学生） 今日，出席している学生のリストが表示されます 自分の出席が登録されていることを確認できます

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

主に使用する計算機 rupus.i.kyushu-u.ac.jp 今日は一時ID (test100412) を使う。

目標達成のために、この講義で具体的に学ぶこと 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をレポートする。

2007/4/11 作業環境 情報科学III（１）

使用する計算機資源 情報システムの構成要素 Webブラウザ(Safari) Webサーバ Apache (PHP4 を処理できるもの) 2007/4/11 使用する計算機資源 情報システムの構成要素 Webブラウザ(Safari) Webサーバ Apache (PHP4 を処理できるもの) MySQL (RDB: リレーショナルデータベース) コンピュータ（上の）言語 ページ記述言語 HTML プログラミング言語 PHP4 (PHP Hypertext Processor version 4) Web ブラウザ以外の，apache, MySQL は別に準備した Linux PC で動いています． 情報科学III（１）

九州大学 教育情報システム（１） UNIX ＋ webサーバ サーバ Mac OS X ファイル 端末室（伊都，箱崎等） 2007/4/11 九州大学　教育情報システム（１） UNIX ＋ webサーバ サーバ Mac OS X ファイル 端末室（伊都，箱崎等） 情報基盤研究開発センター （箱崎地区） どこの端末室のどの端末からログインしても，自分が前回保存したファイルにアクセスできる もちろん，正しくログインできたらの話であるが… そのようなサービスを提供してくれているサーバのオペレーティングシステムは，UNIXである 情報科学III（１）

九州大学 教育情報システム（２） (2)UNIXにファイル転送 サーバ (1)Macにログオン webページ公開 2007/4/11 九州大学　教育情報システム（２） (2)UNIXにファイル転送 サーバ (1)Macにログオン webページ公開 （このとき，さらにUNIXにログインする必要がある．） ファイル 端末室（伊都，箱崎等） 情報基盤研究開発センター （箱崎地区） 自分で作ったHTMLファイルをUNIXサーバ上の適切なディレクトリ（フォルダ）に置けば，自分のwebページを公開することができる 教育情報システムのMacでも同じフォルダが見えている しかし，このサーバでは，この講義で必要となる他のソフトウェアが一般に公開されていない 情報科学III（１）

そこで，今回の講義では…（１） 九州大学 教育情報システム サーバ UNIX ＋ webサーバ 他 ファイル システム情報科学府 2007/4/11 そこで，今回の講義では…（１） 九州大学 教育情報システム UNIX ＋ webサーバ 他 サーバ Mac OS X ファイル サーバ ファイル システム情報科学府 計算機室（伊都地区） 端末は九州大学教育情報システムのMac を用いるが，システム情報科学府（伊都地区）に設置された別のサーバ上に，自分のプログラムを作る システム情報のサーバのIDとパスワードは，教育情報システムのそれとは連動していない OSは，厳密にはCentOSと呼ばれるものを使用する 情報科学III（１）

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

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

したがって… 今回の講義では，次の3つの計算機システムを使い分けながら作業する 端末室のMac システム情報のwebサーバ 2007/4/11 したがって… 今回の講義では，次の3つの計算機システムを使い分けながら作業する 端末室のMac いつも通りにMac OS Xにログオン システム情報のwebサーバ ホスト：rupus.i.kyushu-u.ac.jp IDとパスワードの配布は次回以降 その回の講義に出席したことを記録するには： 以下のURLにブラウザでアクセスし，必要な操作を行うこと http://ghost.i.kyushu-u.ac.jp/RAM/cgi-bin/index.cgi 初回に，自分で自分のパスワードを設定する 後でゆっくり時間を取るので，今あわててやらないこと． 情報科学III（１）

サーバサイドプログラミングとは クライアントサーバモデル World-Wide Web HTTPとHTML さまざまなコンテンツの登場 2007/4/11 サーバサイドプログラミングとは クライアントサーバモデル World-Wide Web HTTPとHTML さまざまなコンテンツの登場 webページを動的に生成する WWWサーバにもっと他の仕事をさせる 情報科学III（１）

コンピューティングのアプローチ コンピュータが行っていること （考え方） コンピューティングの真髄はデータのフロー データを流す 蓄える 2007/4/11 コンピューティングのアプローチ コンピュータが行っていること データを流す 蓄える 値を変える （考え方） コンピューティングの真髄はデータのフロー CPUや各種デバイスは，フローの本流または支流に割り込んで，データを修正（変化）させる，利用する ディスプレイメモリ上のデータが変化すると画像が変化する 情報科学III（１）

データのフローが存在する場所 古典的PCの使われ方 現在のPCの使われ方 2007/4/11 データのフローが存在する場所 古典的PCの使われ方 データのフローはPCの筐体内でのみ or それに近い形で取り扱っていた 現在のPCの使われ方 データのフローはPCの筐体内に留まらない 例）インターネット接続されたPCで，ウェブブラウザを開いてウェブページを見る インターネット中のサーバから，自分のPCへウェブページデータの流れが発生するともいうことが出来る 情報科学III（１）

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

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

クライアントとサーバの通信の例 要求と応答 webブラウザ（クライアント） webサーバ 要求 結果を待つ 要求の処理 応答 2007/4/11 クライアントとサーバの通信の例 要求と応答 webブラウザ（クライアント） webサーバ 要求 結果を待つ 要求の処理 応答 他のクライアントからの 要求を処理してもよい 要求 結果を待つ 要求の処理 応答 時間 時間 情報科学III（１）

ウェブクライアントとウェブサーバ 複数のコンピュータを使用した分散処理におけるモデルのひとつ・・・クライアント・サーバモデル 2007/4/11 ウェブクライアントとウェブサーバ 複数のコンピュータを使用した分散処理におけるモデルのひとつ・・・クライアント・サーバモデル あるサービスについて， サービスを提供する側・・・サーバ サービスを利用する側（サービスを提供される側）・・・クライアント ウェブクライアント・・・例）パソコン上のブラウザ（ Safari，Internet Explorer，FireFox，Opera) ウェブサーバ・・・例）apache 情報科学III（１）

ウェブ（World Wide Web）の仕組み 2007/4/11 ウェブ（World Wide Web）の仕組み ブラウザが，ウェブサーバにコンテンツを要求 ウェブサーバは要求に応じて，結果（コンテンツ）を送信 静的な場合・・・ウェブサーバに蓄積された情報をそのままブラウザに送る 動的な場合・・・ウェブサーバはプログラムなどでデータを処理し，その結果をブラウザに送る ブラウザは利用者にデータを提示（表示） 情報科学III（１）

ウェブの経験 ウェブは，シンプルで必要な機能のみの標準化に力を注いで作られた 技術者・利用者ともにウェブの威力を目の当たりにした 2007/4/11 ウェブの経験 ウェブは，シンプルで必要な機能のみの標準化に力を注いで作られた 技術者・利用者ともにウェブの威力を目の当たりにした 「標準化」は重要 従来以上に標準化に気を配るようになった 情報科学III（１）

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

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

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

ブラウザとサーバのやりとりの一例 GET /index.html HTTP/1.1 2007/4/11 ブラウザとサーバのやりとりの一例 ブラウザでURLを入れたりリンクをクリックしたりしているだけではわかりにくいが，目に見えないところで，このようなやりとりが行われている． GET /index.html HTTP/1.1 メッセージボディを整形して表示 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> ... 情報科学III（１）

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

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

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

ページの事前準備は本当に必須なのか？ GET /index.html HTTP/1.1 2007/4/11 ページの事前準備は本当に必須なのか？ 事前に用意されていなくても… GET /index.html HTTP/1.1 その場で 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> ... HTML文書として正しければ，いつ作られたかブラウザにはわからない． 情報科学III（１）

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

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

動的webページ生成法のいろいろ サーバによる動的Webページ生成 クライアントによる動的Webページ生成 2007/4/11 動的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 事実上，クライアント上でできることなら何でも実行可能 実際には，ページ生成以上のこともいろいろ実行可能． 情報科学III（１）

サーバサイドプログラミング クライアントからのリクエストを処理するためにサーバ側で動作するようなプログラムを作ること 2007/4/11 サーバサイドプログラミング クライアントからのリクエストを処理するためにサーバ側で動作するようなプログラムを作ること ただし，サーバそのものを作るというよりも，サーバの機能の足りない部分を補うようなプログラムを作ることを指すことが多い 情報科学III（１）

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

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

まとめ この講義の目標 作業環境 サーバサイドプログラミングとは 2007/4/11 まとめ この講義の目標 クライアントからのアクセスがあった時にサーバで実行され，ブラウザ画面での表示を動的に生成するようなプログラムを作る クライアントからの情報に応じて，データベースを検索，更新する 作業環境 端末室のPC システム情報科学府のサーバ 出席管理システム サーバサイドプログラミングとは 情報科学III（１）