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