平成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
© Copyright 2024 ExpyDoc
