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

動的な Web サイト

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

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

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

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

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

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

動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 http://www.example.ac.jp:8080/path/to/resource?qt=%e3%81%82&page=1#r5

動的なリソースの生成 1 随時変化するWebサーバ上の情報 2 メッセージヘッダで渡される情報 3 クエリやメッセージボディで渡される情報 http://www.example.ac.jp:8080/path/to/resource?qt=%e3%81%82&page=1#r5 リクエストを処理するプログラムそのプログラムに渡す情報

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

フォーム

フォームの例

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

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

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

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

form 要素 <form action="./buy" method="post">  </form>

form 要素 <form action="./buy" method="post">  </form> 属性名 action 属性値フォームデータの送信先 URI

form 要素 <form action="./buy" method="post">  </form> 属性名 action method 属性値フォームデータの送信先 URI フォームデータの送信に用いられるメソッド

form 要素 <form action="./buy" method="post">  </form> 属性名 action method enctype 属性値フォームデータの送信先 URI フォームデータの送信に用いられるメソッド送信されるフォームデータのメディアタイプ既定値は application/x-www-form-urlencoded

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

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

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

フォームの例 <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>

フォームの例 <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>

フォームの例 <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>

フォームの例 <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>

フォームの例

フォームへの入力

送信するデータの特定

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

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

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

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

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

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

フォームデータの加工 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

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

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

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

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

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

フォームの例

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

ブックマーク <form action="http://www.example.ac.jp/e" method="get"> </form> http://www.example.ac.jp/e?name=%e6%94%be%e9%80%81+ %E5%A4%AA%E9%83%8E&member=s&forum=yes

Web システムの構成

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

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

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

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

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

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

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

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