3 復習 -- サーバーと対話 HTTP リクエスト / レスポンスは複数回行われる. 無論,JS も使えるが. サーバー側のデータが使えるので, 例えば, 端末を変えても処理が継続できる. 途中まで大学でやって, あとは家の PC でやるとか. ブラウザ JS プログラム web storage 等選択肢を送る結果が返ってくる入力画面準備サーバープログラムサーバー側のデータ 3

4 復習 HTTP の詳細 Hyper Text Transfer Protocol 基本的に以下のやりとりの対となるクライアント ( ブラウザ ) 側からリクエストを送るサーバー側からレスポンスがくるレスポンス, リクエストともに内容はテキストファイルである. よって, 直接, 人間が目視で読むことが可能. HTTP レベルでは, リクエストに対するレスポンスが対応付いているだけである. 同じブラウザからの連続したリクエストである等の一連の処理 ( セッション ) の識別はプログラムによって, プログラマが管理しないといけない. 4

5 復習もっとも基本的な例ブラウザが見たいページをリクエストして, そのページのデータがレスポンスとして返ってくる. ブラウザリクエスト : あるページを指定レスポンス : ページの内容 5

6 復習リクエストの種類以下の 5 つがあるが, 最初の 2 つがよく使われる. GET サーバー側にある情報をクライアントが取得 (get) する POST サーバー側にクライアントが情報を送る (post) HEAD PUT DELETE 6

7 復習リクエストの構造以下の 3 つのパートからなる. リクエストラインどんなリクエストを送るかを示した部分. メッセージヘッダメッセージ送り元であるクライアントの特性等のデータ群. Host のデータは必須. 表示可能な言語, ブラウザの種類, 受信可能なデータの種類等を含む. メッセージボディ送るメッセージの内容, 必ず空行が一行いる. GET の場合は空行一行のみ. ヘッダとボディの間には空行がある. 7

8 復習リクエストの例 GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/ Firefox/32.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Cookie: ながいので略全日空のサイト Connection: keep-alive GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:32.0) Gecko/ Firefox/32.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: 長いので略 Connection: keep-alive 神大のサイト Cache-Control: max-age=0 8

復習ブラウザ上の表示との対応 GET / HTTP/1.1 Host: www.kanagawa-u.ac.jp User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.

9 復習ブラウザ上の表示との対応 GET / HTTP/1.1 Host: User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: 長いので略 Connection: keep-alive 9

10 復習リクエストライン等の構造 GET /~kaiya/wa/ HTTP/1.1 Host: www0.info.kanagawa-u.ac.jp GET /webstation/index.html HTTP/1.1 Host: 10

11 復習レスポンスの構造以下の 3 つのパートからなるステータスラインリクエストが成功したか否かの情報. メッセージヘッダーサーバー側の情報等メッセージボディレスポンスの中身.GET の場合,HTML のページデータが入る. HTML だけでなく, プログラムも封入される場合がある. ボディとヘッダーの間には空行があり. 11

12 復習レスポンスの例 HTTP/ OK Date: Mon, 15 Sep :00:06 GMT Server: Apache/ (Scientific Linux) Last-Modified: Thu, 28 Aug :46:13 GMT Etag: "a1b81-686d-501b924552e21" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: text/html 神大のサイト <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 以下, 長いので略 12

13 復習レスポンスの結果の種類 200 リクエストが成功した 304 ページは更新されてない 400 リクエストが不正 403 アクセスが禁止されている 404 そんなページは無い 13

14 復習サーバーにデータを送付する POST 等に代表されるリクエストとともにサーバーにデータを送付する方法については, 中盤以降に解説します. とりあえずは,GETに代表されるページデータを取得する仕組みを理解しておいてください. なお, ブラウザでなくても,TCP を理解するプログラムであれば, 直接, リクエストをウエブサーバーに送り, ページデータを取得することができる. たとえば,telnet コマンド等. wget コマンドも, そのように作られている. 14

15 復習 JSP からの request/response へのアクセス request, response ともに暗黙オブジェクトとしてアクセスできる. それぞれに型は以下の通り javax.servlet.http.httpservletrequest request javax.servlet.http.httpservletresponse response 上記インタフェースで実装が要請されるメソッドは実装されている. それぞれ詳細は API マニュアルを見ること. 15

16 復習ステートレス ( 状態が無い ) http はリクエストとレスポンスの対からなる. あるブラウザから連続してリクエスト / レスポンスを行っても, それらの間を関係付けるものは無い. このような特徴をステートレスと呼ぶ. 一連処理という意識は無いブラウザ JS プログラム web storage 等選択肢を送る結果が返ってくる入力画面準備サーバープログラムサーバー側のデータ 16

17 ステートレスの例以下のような状態遷移図に従う HTML ページ群を作成することは可能である. サンプル中の vendor0/ 下の HTML ファイル参照. しかし, 単なるばらばらの HTML ファイル群なので, 状態遷移に沿わないでページにアクセスすることができる. 例えば, 金を払わず Coke や Fanta を得られる. 50JPY start 100JPY dropfanta fanta morecoin 50JPY showmenu coke dropcoke 17

18 状態をウエブアプリで使うには? ブラウザが状態を示す値 ( 状態変数 ) を記憶し, 毎回, サーバーにその値を送信する. ウエブストレージやクッキー (Cookie) が利用可能. ブラウザが一連の処理を示す識別子を記憶し, 毎回, サーバーにその値を送信する. この一連の処理をセッション (session) と呼ぶ. この識別子をセッション ID と呼ぶ. 具体的な状態を示す値は, サーバー側で, セッション ID と対応付けて記録する. 18

19 クッキーによる状態継承クッキーは Web Storage 同様, クライアントに保持できる小さな key-value である. request の際に, クライアントからサーバーにクッキーを送ることができる. サーバーが cookie を get できる. response の際に, クライアントにクッキーを設定することができる. サーバーが cookie をクライアントに set できる. この情報のやりとりを用いて, 状態を連続した処理に継続的に保持することができる. 値に日本語は保持できません. 19

20 request と response の実例 GET /tomcat/vendor2/morecoin.jsp HTTP/1.1 Host: User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: state=start; JSESSIONID=876E480D259455FC25423F70292BB1F3 Connection: keep-alive HTTP/ OK Date: Thu, 27 Nov :24:24 GMT Set-Cookie: state=morecoin; Expires=Thu, 27-Nov :24:24 GMT Content-Type: text/html;charset=utf-8 Content-Length: 193 Connection: close 20

21 具体的なプログラミング javax.servlet.http.cookie クラスを用いる. 暗黙オブジェクト request に cookie 情報は封入されている. request.getcookies() メソッド暗黙オブジェクト response を通して, クライアントに, 特定の cookie を書き込むことができる. response.addcookie(cookie) メソッド他,API マニュアル参照 21

22 具体例サンプルコード中の vendorcjsp/*.jsp start.jsp から開始する. いきなり showmenu.jsp を実行しようとしても, 実行できないようになっている. ページ遷移前の状態名をクッキーに保持しており, 下記の遷移から逸脱していると, ページ表示をしないようにしてある. 50JPY start 100JPY dropfanta fanta morecoin 50JPY showmenu coke dropcoke 22

23 Cookie を用いた問題点状態を表す値そのものがクライアントに保持されるため, 改ざんが容易である. 最初の簡単な自動販売機の例なら, 状態を表す変数を, 利用者が改ざんすれば, 遷移を無視した自由が移動ができてしまう. 利用者名やメールアドレス等を簡単に詐称して, なりすましができてしまう. 状態を表す値が HTTP リクエストやレスポンスに含まれるため, 情報漏えいが容易におきる. HTTP の通信は, とても簡単に傍受できる. 23

24 セッション session 一連の request/response 列で状態値群を継承する手段. 直接, クライアントの Cookie に値群を記録するのではなく, クライアントでは, セッション ID という識別番号のみを記録する. クライアントは request の際に, この ID を毎回送付する. サーバーはこの ID に対応付けられた key-value( 属性名と属性値 ) を記憶しておく. これによって, 一連の処理を通して値を継続的に利用することが可能となる. 24

25 具体的なプログラミング暗黙オブジェクト session に対して操作を行う. session の型は javax.servlet.http.httpsession である. 使えるメソッドは API を見て調べてください, 授業ページにリンクあり. 主なメソッド void session.setattribute(string key, Object val) session に名前 key の値 val を関連付けて記憶させる. Object session.getattribute(string key) session に関連付けられている key の値を返す. 1. セッション開始時点等に setattribute で値を覚えさせて, 続く処理で getattribute でその値を取り出す. 2. これによって, 処理間で値を継続して利用更新できる. 3. 値自体はサーバー側に保持されているので, 一応, 安全. 25

26 具体例サンプルコード中の vendorsjsp/*.jsp start.jsp から開始する. いきなり showmenu.jsp を実行しようとしても, 実行できないようになっている. 状態遷移における状態の名前を attribute として保持して, 以下の遷移からの逸脱を排除している. start 100JPY dropfanta 50JPY fanta showmenu morecoin 50JPY coke dropcoke 26

27 セッション ID の寿命どこまでが一連の処理かを明示するため, この ID を破棄するメソッドが存在する. session.invalidate() 明示的に新セッションを立ち上げるメソッドはなさそう. セッションに対しては寿命を設定できる. 長いこと次の処理を行わないと, 一連の処理をみなされなくなる. デフォルトでは30 分間隔があくと寿命がつきるが, この数値も設定変更できる. session. setmaxinactiveinterval(int interval) 詳細はAPIマニュアルと例題を見てください. 27

28 GET /tomcat/vender1/start.jsp HTTP/1.1 Host: Cookie: JSESSIONID=464A2BA2C688DC521E37F7DAD7A6EC0A Connection: keep-alive セッションに関する HTTP ヘッダー 1/2 HTTP/ OK Date: Wed, 26 Nov :21:55 GMT Set-Cookie: JSESSIONID=C04DBD6627B0E5874A AC9; Path=/tomcat/ Content-Type: text/html;charset=utf-8 Content-Length: 226 Connection: close GET /tomcat/vender1/morecoin.jsp HTTP/1.1 Host: Referer: Cookie: JSESSIONID=C04DBD6627B0E5874A AC9 Connection: keep-alive HTTP/ OK Date: Wed, 26 Nov :23:12 GMT Content-Type: text/html;charset=utf-8 Content-Length: 193 Connection: close JSESSIONID= C04DBD6627B0E5874A AC9 がクライアントに発行される. JSESSIONID= C04DBD6627B0E5874A AC9 をサーバーに送る. 28

29 GET /tomcat/vender1/morecoin.jsp HTTP/1.1 Host: Referer: Cookie: JSESSIONID=C04DBD6627B0E5874A AC9 Connection: keep-alive HTTP/ OK Date: Wed, 26 Nov :23:12 GMT Content-Type: text/html;charset=utf-8 Content-Length: 193 Connection: close GET /tomcat/vender1/showmenu.jsp HTTP/1.1 Host: Referer: Cookie: JSESSIONID=C04DBD6627B0E5874A AC9 Connection: keep-alive セッションに関する HTTPヘッダー 2/2 JSESSIONID= C04DBD6627B0E5874A AC9 をサーバーに送る. HTTP/ OK Date: Wed, 26 Nov :23:47 GMT Content-Type: text/html;charset=utf-8 Content-Length: 224 Connection: close JSESSIONID= C04DBD6627B0E5874A AC9 をサーバーに送る. 29

30 他の例題サンプルコード中の eshop/ を参照. 簡単なオンライン買い物サイトビール限定ちゃんと購入物の累積情報がページ間で継承されている. session の attribute としてオブジェクト ( インスタンス ) を使ってみた. start 商品の追加 shopping checkout 名前カード住所入力 receipt 30

31 ブラウザにおける Cookie 設定ブラウザでは Cookie を受け取らない設定にすることができる. コレをすると,session も使えなくなるので, 注意が必要. 設定法については, 個々のブラウザについて調べてください. 31

32 DB との連携の必要性ウエブブラウザ側では多量なデータは保持できない. 多くのアプリでは永続的にデータを保持する必要がある. googleの保持する多量の検索元データ買物サイトの保持する商品や取引の情報 dotcampusが保持するレポートや授業コンテンツの情報一昔前は,OS のファイルシステムに, ウエブサーバーが直接にアクセスしデータを利用していた. 今はパフォーマンス, セキュリティ, ポータビリティ等の観点から, データベース管理システム (DBMS) とウエブサーバーが連携をとるのが普通になった. 32

33 復習ウエブアプリが便利な例 2/2 他マシンのあるデータ内を検索したい巨大なデータ検索も他マシンに任せましょう! 検索依頼検索結果のみ受信検索処理巨大なデータ 33

34 SQL 自体について第 7 回後半のデータベース解説を参照. SQLでのデータベースの直接操作 wa07db.pdf 34

35 tomcat6 と mysql の連携次頁の ( 毎度の ) 図にあるように,tomcat6 と mysql もプロセス間通信を行っている. tomcat 側は 3306 番ポートで外部プログラムと通信を行う. tomcat6 側は JDBC という接続用クラスを介して, mysql と通信を行う. JDBC の設定を変えれば, ウエブアプリの方の変更無しで,DBMS は他のもの ( 例えば postgressql 等 ) に置き換え可能. 35

36 復習 ++ セットアップしてほしい構成 3306 ポートで, 外部からの接続を待っている. Lenovo : クライアント Firefox 等 : ウエブブラウザ HTTP JDBC に関するクラスが間に入り, 通信を一般化. MySQL 5.1 : データベース CentOS 6.5 : サーバー apache 2.2 : ウエブサーバー PHP 5.3 : モジュール JSP(Java) 側からは,DBMS の種類によらない API を用いて DBMS に接続が可能. Tomcat6 : アプリケーションサーバー JVM : モジュール 36

37 mysql 接続設定アプリケーション毎に設定する. この授業の場合,/var/lib/tomcat6/webapps/ の下のそれぞれのフォルダが個別のアプリとなっている. 設定ファイルは, アプリの下の META-INF/context.xml というファイルに設定を書く. 内容は後述. 通信のための JDBC クラス群は, この授業の場合, /usr/share/java/tomcat6/mysql-connector-java.jar においた. 37

38 content.xml ( 青字は解説 ) <Context> <Resource name = "jdbc/test1" test1 は使うデータベースの名前にする auth = "Container" データベースアクセスではこのまま type = "javax.sql.datasource" 同上 maxactive = "100" 事前に用意する接続箇所数 maxidle = "30" 待機時に最低維持する接続数 maxwait = "100000" 接続に対する最大待ち時間 ( ミリ秒 ) username = "kaiya" 接続のためのユーザー名 password = "nanikakotoba" 上記パスワード driverclassname = "com.mysql.jdbc.driver" 接続使うクラス url /> </Context> = "jdbc:mysql:// :3306/test1" 接続するデータベース DBMS が動くマシンが他なら, このアドレスを変える. 上記は同じマシンで動作する設定操作対象の DB の名前 38

39 JSP(Java) からの SQL の利用 java.sql, javax.sql, javax.naming パッケージに含まれるクラス群を利用する. 接続と切断情報の照会 (query) 情報の更新メタデータの取得 ( 参考 ) 39

40 接続と切断基本, 以下の様式. ただし,test1 は扱うデータベースの名前. mysql に接続するためのユーザー名等は前述のようにファイル context.xml に書いておく. page import="javax.sql.*,javax.naming.*,java.sql.*" %> Context context = new InitialContext(); // javax.context.naming // javax.sql.datasource DataSource ds=(datasource)context.lookup("java:comp/env/jdbc/test1"); // java.sql.connection Connection db= ds.getconnection(); // この辺で db に対して処理を行う, 具体例は後述 db.close(); 40

41 結果が返る SQL 実行 (select) java.sql.statement 型のクラスをつかい照会を行う. 結果は,java.sql.ResultSet 型として受け取れる. Iterator っぽい振る舞いをする型. 以下, 典型的なコードの例.(import は略 ) 最初に配布した tomcat01/db2.jsp 中. // db は DataSource.getConnection() で取得したもの Statement stmt = db.createstatement(); ResultSet rs = stmt.executequery("select * from nameage"); while(rs.next()){ out.println(rs.getstring("name")); // name はフィールド名 out.println(rs.getstring("age")); // age もフィールド名 } 41

42 結果の無い SQL 実行 insert, update, delete 等は実行の成否は返るが, データを取得するものでは無い. そのような SQL 命令は java.sql.preparestatement 型のオブジェクトを用いて実行する. 以下, 典型的な例. 最初に配布した tomcat01/db2.jsp 中の一部 // db は DataSource.getConnection() で取得したもの String insert="insert into nameage values(?,?)"; PreparedStatement ps=db.preparestatement(insert); ps.setstring(1,"eric"); ps.setint(2,55); int result=ps.executeupdate(); 42

43 プレースホルダについて PreparedStatement を作成する際に使う SQL 命令中の? はプレースホルダと呼ばれる. お察しの通り, 後から setstring() 等のを使って? の部分に実際の値を設定できる. ノリは printf 文の % に近い感じ. // db は DataSource.getConnection() で取得したもの String insert="insert into nameage values(?,?)"; PreparedStatement ps=db.preparestatement(insert); ps.setstring(1,"eric"); ps.setint(2,55); int result=ps.executeupdate(); 43

44 メタデータ ( 参考 ) Javaを通してデータベース自体に関する各種の情報を以下のように取得できる. 最初に配布した tomcat01/db1.jsp の中 java.sql.databasemetadata 型で情報を取得できる. 取得できるデータはこのインタフェースのマニュアルを参照. // db は DataSource.getConnection() で取得したもの DatabaseMetaData metadata = db.getmetadata(); out.println("databaseproductname: " + metadata.getdatabaseproductname()); out.println("databaseproductversion: " + metadata.getdatabaseproductversion()); out.println("drivername: " + metadata.getdrivername()); out.println("driverversion: " + metadata.getdriverversion()); out.println("url: " + metadata.geturl()); out.println("username: " + metadata.getusername()); 44

45 例外処理前述の例題について, 例外処理は書かなかった. 実際には,API のマニュアルを見て, 例外処理を対処するのが望ましい. 例えば, DataSource.getConnection() メソッドは SQLException という例外を投げる. preparestatement, executeupdate 等も同様. 実践的な Java プログラミングにおいては, 必ず, API マニュアルを参照しながら行ってほしい. 45

46 演習 14: 注意事項次頁で指定する JSP のプログラムを作成してください. 提供したファイル群 (in wa14poem.zip) を改造して作成してください. 提出先は dotcampus です. ファイルの名は変更せず, 全ての jsp ファイルを zip でまとめて,poem.zip として提出してください. かならず, 自分以外 ( 友人等 ) のブラウザからアクセス確認を行ってください. 今回も JavaScript は使わないでください. 46

47 演習 14: 問題以下の状態遷移図にそったページ遷移を行う jsp ページ群を提供したテンプレートを修正することで完成せよ. 各状態がページに対応している. 以下の遷移以外の方法で JSP ページに到達できないようにすること.(login.jsp 以外 ) login.jsp で入力した name との値が, 他の全てのページで表示されること.( 提供したファイル群ではダミーが表示されるようになっている.) logout.jsp で session は破棄されること. サーバーのアドレス /tomcat/poem/login.jsp からアクセスできるのが望ましい. login logout menu poem1 poem2 左記は, 詩の閲覧サービスで 3 つの詩が閲覧できます. 別に詩の中身を自分のヤツにかきかえてもよいですよ. poem3 47

48 以上 48

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/ dotcampus ショートコード 212834 ウエブアプリケーション ( 主に情報 3 年生向け ) 2017/9/21 海谷治彦 1 目次まえおき概要ウエブアプリケーションとは? 普通のアプリやクライアントサーバーとの違い HTTP ウエブアプリケーションを支える言語等 HTML5, CSS3, JavaScript