第 7 回の内容 動的な Web サイト フォーム Web システムの構成

Transcription

1 第 7 回の内容 動的な Web サイト フォーム Web システムの構成

2 動的な Web サイト

3 静的なリソース ファイルシステムのパス / URI のパス a 公開ディレクトリ / b b GET /b HTTP/1.1 c c e d /a/b を送り返す d e

4 静的なリソース ファイルシステムのパス / / URI のパス f b c e GET /g/e HTTP/1.1 d /f/e を送り返す g b c e d

5 動的なリソース 商品を紹介するページに データベースに格納されている在庫情報も表示する ユーザーから送られてきた検索キーワードにマッチする情報の一覧を表示する

6 動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報

7 動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 データベースに記録されているデータ サーバの負荷 処理を行った日時

8 動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 コンテントネゴシエーション用のヘッダ User-Agentヘッダ Refererヘッダ

9 動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報

10 動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 リクエストを処理するプログラム そのプログラムに渡す情報

11 動的なリソースの生成 1 随時変化する Web サーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 3 クエリとして渡された情報を元に 1 データベースを検索した結果を 2 コンテントネゴシエーションにより希望された PNG 画像として提供する

12 フォーム

13 フォームの例

14 フォームの例

15 フォーム ユーザーが情報を入力して送信 コントロール 情報を入力する部品 フォームが指定するURIに遷移 GETメソッドとPOSTメソッドが利用可

16 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

17 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

18 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

19 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール コントロール ラベル

20 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

21 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

22 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

23 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

24 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

25 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

26 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

27 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

28 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

29 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

30 コントロール コントロールボタンチェックボックスラジオボタンメニューテキスト入力ファイル選択隠しコントロール

31 form 要素 <form action="./buy" method="post"> <!-- ここにコントロールや その他の HTML 要素を配置 --> </form>

32 form 要素 <form action="./buy" method="post"> <!-- ここにコントロールや その他の HTML 要素を配置 --> </form> 属性名 action 属性値 フォームデータの送信先 URI

33 form 要素 <form action="./buy" method="post"> <!-- ここにコントロールや その他の HTML 要素を配置 --> </form> 属性名 action method 属性値 フォームデータの送信先 URI フォームデータの送信に用いられるメソッド

34 form 要素 <form action="./buy" method="post"> <!-- ここにコントロールや その他の HTML 要素を配置 --> </form> 属性名 action method enctype 属性値 フォームデータの送信先 URI フォームデータの送信に用いられるメソッド 送信されるフォームデータのメディアタイプ既定値は application/x-www-form-urlencoded

35 フォームの送信 1 送信するデータの特定 2 フォームデータの加工 3 フォームデータの送信

36 送信するデータの特定 送信するデータに含める 送信するデータに含めない

37 フォームの送信 1 送信するデータの特定 2 フォームデータの加工 3 フォームデータの送信

38 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> <br> 会員種別 : <select name="member"> <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form>

39 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> <br> 会員種別 : <select name="member"> <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form>

40 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> テキスト入力 <br> 会員種別 : <select name="member"> <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form>

41 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> テキスト入力 <br> 会員種別 : <select name="member"> メニュー <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form>

42 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> テキスト入力 <br> 会員種別 : <select name="member"> メニュー <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> チェックボックス </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form>

43 フォームの例 <form action="/e" method="post"> <p> 名前 :<input type="text" name="name" value=""> <br> 会員種別 : <select name="member"> <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select> <br> <label><input type="checkbox" name="forum" value="yes"> フォーラム参加 </label> <label><input type="checkbox" name="party" value="yes"> 懇親会参加 </label> <br> <button type="submit"> 送信 </button> <button type="reset"> リセット </button> </p> </form> テキスト入力 メニュー チェックボックス ボタン

44 フォームの例

45 フォームの例

46 フォームへの入力

47 送信するデータの特定

48 フォームデータの加工 名前 name 値 放送太郎 <input type="text" name="name" value="">

49 フォームデータの加工 名前 name 名前 member 値放送太郎値 s <select name="member"> <option value="g"> 一般会員 </option> <option value="s"> 学生会員 </option> <option value="n" selected> 非会員 </option> </select>

50 フォームデータの加工 名前 name 名前 member 名前 forum 値放送太郎値 s 値 yes <input type="checkbox" name="forum" value="yes">

51 フォームデータの加工 名前 name 名前 member 名前 forum 値放送太郎値 s 値 yes

52 フォームデータの加工 1. スペースを + に変換英数字と一部の記号を除いた文字を %XX の形式に変換 2. エスケープした名前と値を = でつなぐ 3. 名前と値のペアを & でつなぐ 名前 name 名前 member 名前 forum 値放送太郎値 s 値 yes

53 フォームデータの加工 1. スペースを + に変換英数字と一部の記号を除いた文字を %XX の形式に変換 2. エスケープした名前と値を = でつなぐ 3. 名前と値のペアを & でつなぐ 放 送 名前 name 名前 member 名前 forum 太 値放送太郎値 s 値 yes 郎 放送太郎 %E6%94%BE%E9%80%81+%E5%A4%AA%E9%83%8E スペース

54 フォームデータの加工 1. スペースを + に変換英数字と一部の記号を除いた文字を %XX の形式に変換 2. エスケープした名前と値を = でつなぐ 3. 名前と値のペアを & でつなぐ 名前 name 名前 member 名前 forum 値放送太郎値 s 値 yes name=%e6%94%be%e9%80%81+%e5%a4%aa%e9%83%8e member=s forum=yes

55 フォームデータの加工 1. スペースを + に変換英数字と一部の記号を除いた文字を %XX の形式に変換 2. エスケープした名前と値を = でつなぐ 3. 名前と値のペアを & でつなぐ 名前 name 名前 member 名前 forum 値放送太郎値 s 値 yes name=%e6%94%be%e9%80%81+%e5%a4%aa%e9%83%8e&member=s&forum=yes

56 フォームの送信 1 送信するデータの特定 2 フォームデータの加工 3 フォームデータの送信

57 フォームデータの送信 form 要素の action 属性値で指定された URI に method 属性値で指定されたメソッドを使ってリクエストを発行 GET メソッド URI のクエリにする POST メソッド メッセージボディに入れて送信

58 GET メソッドによる送信 <form action="/e" method="get"> <button type="submit"> 送信 </button> </form> リクエスト GET /e?name=%e6%94%be%e9%80%81+%e5%a4%aa%e9%83%8e&member=s&fo rum=yes HTTP/1.1

59 POST メソッドによる送信 <form action="/e" method="post"> <button type="submit"> 送信 </button> </form> リクエスト POST /e HTTP/1.1 Content-Type: application/x-www-form-urlencoded Content-Length: 61 name=%e6%94%be%e9%80%81+%e5%a4%aa%e9%83%8e&member=s&forum=yes

60 GET と POST の使い分け GET メソッドはリソースの取得 検索を行い その結果を得る 掲示板への投稿

61 フォームの例

62 GET と POST の使い分け GET メソッドはリソースの取得 検索を行い その結果を得る 掲示板への投稿 データサイズが大きい場合は POST メソッド データを知られにくくするには POST メソッド

63 ブックマーク <form action=" method="get"> </form> %E5%A4%AA%E9%83%8E&member=s&forum=yes

64 Web システムの構成

65 Web サーバソフトウェア リクエストを待ち受け URI で要求されるリソースを返却 コンテントネゴシエーション HTTP 認証 (Basic 認証 Digest 認証 )

66 Common Gateway Interface (CGI) Web サーバ プロセス 1 HTTP リクエスト 2 CGI リクエスト Web ブラウザ Web サーバソフトウェア CGI スクリプト 4 HTTP レスポンス 3 CGI レスポンス HTTP の取り決め範囲 CGI の取り決め範囲

67 同一プロセス内でのリソース生成 リソース生成プログラム Web ブラウザ Web サーバソフトウェア

68 アプリケーションサーバの利用 リソース生成プログラム Web ブラウザ Web サーバソフトウェア アプリケーションサーバ

69 ハードウェアの構成 CL Web AP DB CL Web AP DB CL Web AP DB CL Web AP クライアント (Web ブラウザ ) Web サーバソフトウェア アプリケーションサーバ CL Web AP AP DB DB データベース管理システム

70 第 7 回の内容 動的な Web サイト フォーム Web システムの構成