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