Servlet 入門 (2) 入力フォームをつかった Web アプリ
description
Transcript of Servlet 入門 (2) 入力フォームをつかった Web アプリ
CreW
Creative Workspace
Servlet 入門 (2) 入力フォームをつかった Web アプリ
20042004 年年 55 月月 2020 日発表日発表有田 直弘
CreWCreative Workspace
前回までの復習
Web アプリケーションの様々な概念を学んだWeb アプリケーションWeb アプリケーションサーバTomcatServlet
Web アプリケーション作成の流れを学んだアプリケーションディレクトリ作成場所フォルダ構成サーブレット作成・コンパイル・配置
CreWCreative Workspace
前回のイメージ
WebBrowser
21 番ポート :FTP Server25 番ポート :SMTP Server80 番ポート :HTTP Server8080 番ポート :Tomcat Server
サーバ1.Tomcat Server の seminar の HelloCreW を要求
2. 要求に対して返答する ("HelloCreW" と表示する )
中で何をしているのだろう ?
CreWCreative Workspace
今回の目標 ( その 1)
要求から返答までの Tomcat Server での処理の流れを説明できる
CreWCreative Workspace
要求と返答の詳細 (1)
21 番ポート :FTP Server25 番ポート :SMTP Server80 番ポート :HTTP Server8080 番ポート :Tomcat Server
サーバ
拡大します
Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container
CreWCreative Workspace
要求と返答の詳細 (2)
1. ブラウザが Web サーバに接続し、 HTTP リクエストを送信する
WebBrowser
8080 番ポート :Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container
Http Request GET /seminar/servlet/HelloCreW HTTP/1.0
1. 要求
CreWCreative Workspace
要求と返答の詳細 (3)
2.Tomcat Server はリクエストを受け取り、 Servlet Container に処理を委託する
WebBrowser
8080 番ポート :Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container2. 委託
Http Request GET /seminar/servlet/HelloCreW HTTP/1.0
1. 要求
CreWCreative Workspace
要求と返答の詳細 (4)
3.Servlet Container は指定された Servlet を Request , Response オブジェクトを引数に指定し,実行する
WebBrowser
8080 番ポート :Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container
3. 実行
2. 委託
Http Request GET /seminar/servlet/HelloCreW HTTP/1.0
1. 要求
CreWCreative Workspace
要求と返答の詳細 (5)
4. Servlet は Request オブジェクトを介して要求を受け取り,処理をし,結果を Response オブジェクトを通して Web Server に返す
WebBrowser
8080 番ポート :Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container
3. 実行
4. 結果
2. 委託
Http Request GET /seminar/servlet/HelloCreW HTTP/1.0
1. 要求
CreWCreative Workspace
要求と返答の詳細 (6)
WebBrowser
8080 番ポート :Tomcat Server
Seminar
OPASIRC
HelloCreW.class
Servlet Container
3. 実行
4. 結果
5.Web サーバは処理結果をレスポンスとしてブラウザに返す
Http ResponseHeader+Body(<html>…<h1>11:45 JST</h1>…</html>)
5. 結果
2. 委託
Http Request GET /seminar/servlet/HelloCreW HTTP/1.0
1. 要求
CreWCreative Workspace
要求と返答のまとめ
1. ブラウザが Web サーバに接続し、 HTTP リクエストを送信する
2.Tomcat Server はリクエストを受け取り、 Servlet Container に処理を委託する
3.Servlet Container は指定された Servlet を Request , Response オブジェクトを引数に指定し,実行する
4. Servlet は Request オブジェクトを介して要求を受け取り,処理をし,結果を Response オブジェクトを通して Web Server に返す
5.Web サーバは処理結果をレスポンスとしてブラウザに返す
CreWCreative Workspace
HelloCreW の欠点
この HelloCreW って Web アプリですか?
他の Web アプリケーションにあって, HelloCreW にないものは何でしょう ?
CreWCreative Workspace
人を幸せにする Web アプリ
コンセプトを付けるユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなものにする
CreWCreative Workspace
今回の目標 ( その 2)
「入力→処理→出力」をする Web アプリケーションが作れるようになる
フォーム (* 注 ) を使って入力する仕組みを作れるようになるフォームから送信された入力情報を, Servlet で取得できるようになるWeb アプリケーションにおける「入力→処理→出力」の流れが説明できるようになる今回,「処理」の部分はそれほどやりません
* 注 ) フォーム (form) は「記入用紙」の意味で, Web 関係ではユーザからの入力を受け付けるテキストフィールドやチェックボックス,ラジオボックス,ボタン等のことを言います
CreWCreative Workspace
題材:「サブゼミ支援 Web アプリ」
名前 : 「サブゼミ疑問解決掲示板」コンセプト : 授業外で生じた疑問をみんなで共有・解決し、
授業の理解を深めて、よりよいサブゼミにする。
概要: 授業外で生じた疑問を質問として掲示板に投稿。投稿者の疑問を解決できると思う人が回答を投稿する。
対象: 研究会のみんな
運営: 実際に、サブゼミを支援するために公開します。みんなでいいものを作ろう!
CreWCreative Workspace
画面遷移図
index.html
Web アプリの顔トップページ
toukou.html
投稿画面
ToukouServlet
投稿の結果が表示される
メッセージの送信
CreWCreative Workspace
投稿者 : 杉浦 学タイトル : web.xml の冒頭宣言に関する質問内容: web.xml の冒頭宣言はなんであんなに
長いんですか??ちょっと気になったので質問してみました。
利用シナリオ
デモを見てみよう !!
CreWCreative Workspace
シナリオの流れ
WebBrowser
ToukouServlet.class
ApplicationServer
toukou.html
GET toukou.html
<html> <head><title> 投稿画面 </title>…
杉浦 学
GET ToukouServlet投稿者 =“ 杉浦学”…
<html> <head>…<h2>杉浦学さんの投稿 </h2> …
CreWCreative Workspace
実際に動かしてみよう !
サブゼミ支援アプリケーションを作成するTomcat を起動するサブゼミ支援アプリケーションのトップページを表示する何か疑問を投稿してみよう !
CreWCreative Workspace
Web アプリの構造(復習)Web アプリのディレクトリ構造を作って関連ファイルを入れましょう( Web アプリ名は題材の例なので、自分のものに変えてもかまいません)
seminar
WEB-INF
classes
web.xml
index.html
html
ToukouServlet.class
toukou.html
src ToukouServlet.java
CreW
Creative Workspace
メッセージ送信編
CreWCreative Workspace
メッセージの入力から送信まで
WebBrowser ApplicationServer
toukou.html
GET toukou.html
<html> <head><title> 投稿画面 </title>…
杉浦学
GET ToukouServlet投稿者 =“ 杉浦学”…
CreWCreative Workspace
送信時に必要な情報 (1)
送信時に入力した情報は何ですか ?( 具体的に )
これら 3 つの情報を Server 側が受け取った時に,どれが投稿者の情報なのか分かりません.どうしたら解決できるでしょう ?
杉浦 学 web.xml の冒頭宣言に関する質問
web.xml の冒頭宣言はなんであんなに長いんですか??ちょっと気になったので質問してみました。
CreWCreative Workspace
送信時に必要な情報 (2)
複数の情報を識別するためにデータ名 (Key) を付けます.また, Key に対する具体的な値をこれからは Value と呼びます.
Key 投稿者
Value 杉浦 学
Key タイトル
Value web.xml の冒頭宣言に関する質問
Key 内容
Value web.xml の冒頭宣言はなんであんなに長いんですか??ちょっと気になったので質問してみました。
この概念はフォームの入力部品を作成するときに重要になります
CreWCreative Workspace
メッセージを送信する HTML フォーム
HTML フォームを作成するには主に 3 つの設定をします
1. フォームを宣言する
2. 入力部品を作る
3. 送信のための部品を作る
CreWCreative Workspace
HTML フォームを使う (1)
HTML フォームの宣言方法
<form method=“get” action=“../servlet/ToukouServlet”>
</form>
フォームの情報の送信先
<form> タグ内に各部品を設定する
CreWCreative Workspace
HTML フォームを使う (2)
<input type= " text " name= " contributor " size= " 20 " />
<textarea name= " content " cols="50" rows="10" />
メッセージを入力するための部品の作成方法
Key contributor( 投稿者 )
Value
Key content( 内容 )
Value
CreWCreative Workspace
HTML フォームを使う (3)
<input type= " reset " value= " リセット " >
<input type= " submit " value= " 投稿 " >
"submit" ボタンは, <form> タグに書かれた action 先へフォームの情報を送信します.
"reset" ボタンは,フォームの情報を消去します.
メッセージを送信するための部品
情報を消去する部品 ( 任意に設定します )
CreW
Creative Workspace
メッセージ送信編 終了
質問どうぞ~
CreW
Creative Workspace
メッセージ受信編
CreWCreative Workspace
メッセージの受信から返答まで
WebBrowser
ToukouServlet.class
ApplicationServer
杉浦学
GET ToukouServlet投稿者 =“ 杉浦学”
<html> <head>…<h2>杉浦学さんの投稿 </h2> …
CreWCreative Workspace
送られてきたメッセージ
Key contributor
Value 杉浦 学
Key title
Value web.xml の冒頭宣言に関する質問
Key content
Value web.xml の冒頭宣言はなんであんなに長いんですか??ちょっと気になったので質問してみました。
Tomcat には以下の情報が送信されます. Tomcat はこの情報から Key と Value の対応表を作成します.
CreWCreative Workspace
ハッシュテーブルとは鍵鍵 (Key)(Key) と値と値 (Value)(Value) からなるからなる表です ( 詳しい説明は省略します )
KeyKey から特定の ValueValue を取得できます今回の場合…
<input> タグで指定した name の値が Key になりますテキストフィールド等に入力された文字列が Value になります
Key Valuecontributor 杉浦 学
title web.xml の冒頭宣言
content web.xml の冒頭宣言はなんで…
CreWCreative Workspace
メッセージを受け取る部分
HTML を生成する部分
サーブレットの説明 // 送信されたメッセージが格納されたハッ…request.setCharacterEncoding("Shift_JIS");String contributor = request.getParameter("contributor");String title = request.getParameter("title");String content = request.getParameter("content");
// 結果を出力するresponse.setContentType("text/html;charset=Shift_JIS"); PrintWriter out = response.getWriter();out.println("<html>");out.println("<body>");out.println("<hr>");out.println("<b><font size=4>" + contributor + " さんの投稿 </font></b>");out.println("( 投稿時刻: " + new Date() + ")");out.println("<br/>");out.println("<p><font size=5>" + title + "</font></p>"); out.println("<hr>");out.println("<p>" + content + "</p>");out.println("<hr>");out.println("</body>");out.println("</html>");out.close();
CreWCreative Workspace
送信された文字のエンコーディング
ブラウザから入力された情報で,日本語のような 2 バイト文字を取得する場合にはエンコーディングが必要ですこれにより文字化けを防ぐことができます
request.setCharacterEncoding("Shift_JIS");
CreWCreative Workspace
メッセージの取得方法
送信されたメッセージが格納されたハッシュテーブルから, Key を指定して Value を取得し,変数に代入する例えば,変数 contributor には " 杉浦 学 " といった値が代入されます
String contributor = request.getParameter("contributor");String title = request.getParameter("title"); String content = request.getParameter(“content");
Key Valuecontributor 杉浦 学title web.xml の冒頭宣言content web.xml の冒頭宣言
はなんで…
CreWCreative Workspace
送信される文字のエンコーディング
ブラウザへの出力に,日本語のような 2 バイト文字を出力する場合にはエンコーディングが必要ですこれにより文字化けを防ぐことができます
response.setContentType("text/html;charset=Shift_JIS");
CreWCreative Workspace
ブラウザに出力する
PrintWriter out = response.getWriter();out.println("<html>");out.println("<body>");out.println("<hr>");out.println("<b><font size=4>" + contributor + " さんの投稿 </font></b>");out.println("( 投稿時刻: " + new Date() + ")");out.println("<br/>");out.println("<p><font size=5>" + title + "</font></p>"); out.println("<hr>");out.println("<p>" + content + "</p>");out.println("<hr>");out.println("</body>");out.println("</html>");
Response クラスの getWriter() メソッドによって,出力するための PrintWriter オブジェクトを取得できます
CreW
Creative Workspace
メッセージ受信編 終了
質問どうぞ~
CreWCreative Workspace
今回の目標 ( その 3)
GET と POST の違いが説明できるようになる
CreWCreative Workspace
現在の掲示板の欠点
現在の掲示板に,大量の文字を入力して送信して下さい.何が起こるでしょうか.
大量の文字を送信できない原因は, Tomcatへの送信方法に問題があります.現在は, GET という方法によって送信しています.
CreWCreative Workspace
GET とは ?
GET はリクエストのメソッドの 1 つですGET はブラウザから指定したファイルを得るために, Server に問合わせる際に使用します便利な場合があるので, GET によってファイルを得る際に,多少情報を付加して Server に問合わせることができますただし, GET によって送れるデータ量には限界があります ( データ量は Server やクライアントに依存します )
CreWCreative Workspace
POST とは ?
ブラウザ側からサーバへ,データ量に制限なく送るために POST がありますそれでは,実際に掲示板を POST に変更して,大量の文字を投稿しましょう
送信方法を POST にするために, <form> タグの method="get" を method="post" に変更しますサーブレットが POST に対して処理を行うために,doGet() メソッドを doPost() メソッドに変更します
CreWCreative Workspace
GET と POST の違い
GET は,サーバへ送信できるデータ量に制限がある (POST は制限がない )
GET は,送信されるデータが URL に加わり送信される (POST は加わらない )
移動する URL をユーザに知らせたくない場合に POST が用いられる→セキュリティ強化
CreWCreative Workspace
では,実習ですテキストボックス、テキストエリア以外の HTMLフォーム部品を掲示板に加えてください。投稿結果画面にも反映させてください(例: Web アプリに「質問」、「回答」選択欄)
CreWCreative Workspace
補足資料 ~HTML フォーム部品~text- テキストボックスtextarea- テキストエリアradio- ラジオボタンcheckbox- チェックボックスselect- リストボックスsubmit- 送信ボタンreset- リセットボタンその他 password 、 hidden
* 「とほほ WWW 入門」に詳細な HTML リファレンスがあります http://tohoho.wakusei.ne.jp/www.htm
CreWCreative Workspace
お疲れ様でした!!!
今後は、今回作った Web アプリを拡張していきます。次回は投稿をファイルに保存する方法を学びます。わくわく o( ^ -^ )o