Servlet 入門 (2) 入力フォームをつかった Web アプリ

CreW

Creative Workspace

Servlet 入門 (2) 入力フォームをつかった Web アプリ

20042004 年年 55 月月 2020 日発表日発表有田直弘

CreWCreative Workspace

前回までの復習

Web アプリケーションの様々な概念を学んだWeb アプリケーションWeb アプリケーションサーバTomcatServlet

Web アプリケーション作成の流れを学んだアプリケーションディレクトリ作成場所フォルダ構成サーブレット作成・コンパイル・配置


前回のイメージ

WebBrowser

21 番ポート :FTP Server25 番ポート :SMTP Server80 番ポート :HTTP Server8080 番ポート :Tomcat Server

サーバ1.Tomcat Server の seminar の HelloCreW を要求

2. 要求に対して返答する ("HelloCreW" と表示する )

中で何をしているのだろう ?


今回の目標 ( その 1)

要求から返答までの Tomcat Server での処理の流れを説明できる


要求と返答の詳細 (1)

21 番ポート :FTP Server25 番ポート :SMTP Server80 番ポート :HTTP Server8080 番ポート :Tomcat Server

サーバ

拡大します

Tomcat Server

Seminar

OPASIRC

HelloCreW.class

Servlet Container



1. ブラウザが Web サーバに接続し、 HTTP リクエストを送信する

WebBrowser

8080 番ポート :Tomcat Server

Seminar

OPASIRC

HelloCreW.class

Servlet Container

Http Request GET /seminar/servlet/HelloCreW HTTP/1.0

1. 要求



2.Tomcat Server はリクエストを受け取り、 Servlet Container に処理を委託する

WebBrowser


Seminar

OPASIRC

HelloCreW.class

Servlet Container2. 委託


1. 要求



3.Servlet Container は指定された Servlet を Request ， Response オブジェクトを引数に指定し，実行する

WebBrowser


Seminar

OPASIRC

HelloCreW.class

Servlet Container

3. 実行

2. 委託


1. 要求



4. Servlet は Request オブジェクトを介して要求を受け取り，処理をし，結果を Response オブジェクトを通して Web Server に返す

WebBrowser


Seminar

OPASIRC

HelloCreW.class

Servlet Container

3. 実行

4. 結果

2. 委託


1. 要求



WebBrowser


Seminar

OPASIRC

HelloCreW.class

Servlet Container

3. 実行

4. 結果

5.Web サーバは処理結果をレスポンスとしてブラウザに返す

Http ResponseHeader+Body(<html>…<h1>11:45 JST</h1>…</html>)

5. 結果

2. 委託


1. 要求


要求と返答のまとめ

1. ブラウザが Web サーバに接続し、 HTTP リクエストを送信する

2.Tomcat Server はリクエストを受け取り、 Servlet Container に処理を委託する

3.Servlet Container は指定された Servlet を Request ， Response オブジェクトを引数に指定し，実行する

4. Servlet は Request オブジェクトを介して要求を受け取り，処理をし，結果を Response オブジェクトを通して Web Server に返す

5.Web サーバは処理結果をレスポンスとしてブラウザに返す


HelloCreW の欠点

この HelloCreW って Web アプリですか？

他の Web アプリケーションにあって， HelloCreW にないものは何でしょう ?


人を幸せにする Web アプリ

コンセプトを付けるユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなものにする



「入力→処理→出力」をする Web アプリケーションが作れるようになる

フォーム (* 注 ) を使って入力する仕組みを作れるようになるフォームから送信された入力情報を， Servlet で取得できるようになるWeb アプリケーションにおける「入力→処理→出力」の流れが説明できるようになる今回，「処理」の部分はそれほどやりません

* 注 ) フォーム (form) は「記入用紙」の意味で， Web 関係ではユーザからの入力を受け付けるテキストフィールドやチェックボックス，ラジオボックス，ボタン等のことを言います


題材：「サブゼミ支援 Web アプリ」

名前 : 「サブゼミ疑問解決掲示板」コンセプト : 授業外で生じた疑問をみんなで共有・解決し、

授業の理解を深めて、よりよいサブゼミにする。

概要：授業外で生じた疑問を質問として掲示板に投稿。投稿者の疑問を解決できると思う人が回答を投稿する。

対象：研究会のみんな

運営：実際に、サブゼミを支援するために公開します。みんなでいいものを作ろう！


画面遷移図

index.html

Web アプリの顔トップページ

toukou.html

投稿画面

ToukouServlet

投稿の結果が表示される

メッセージの送信


投稿者 : 杉浦学タイトル : web.xml の冒頭宣言に関する質問内容： web.xml の冒頭宣言はなんであんなに

長いんですか？？ちょっと気になったので質問してみました。

利用シナリオ

デモを見てみよう !!


シナリオの流れ

WebBrowser

ToukouServlet.class

ApplicationServer

toukou.html

GET toukou.html

<html> <head><title> 投稿画面 </title>…

杉浦学

GET ToukouServlet投稿者 =“ 杉浦学”…

<html> <head>…<h2>杉浦学さんの投稿 </h2> …


実際に動かしてみよう !

サブゼミ支援アプリケーションを作成するTomcat を起動するサブゼミ支援アプリケーションのトップページを表示する何か疑問を投稿してみよう !


Web アプリの構造（復習）Web アプリのディレクトリ構造を作って関連ファイルを入れましょう（ Web アプリ名は題材の例なので、自分のものに変えてもかまいません）

seminar

WEB-INF

classes

web.xml

index.html

html

ToukouServlet.class

toukou.html

src ToukouServlet.java

CreW

Creative Workspace

メッセージ送信編


メッセージの入力から送信まで

WebBrowser ApplicationServer

toukou.html

GET toukou.html

<html> <head><title> 投稿画面 </title>…

杉浦学

GET ToukouServlet投稿者 =“ 杉浦学”…


送信時に必要な情報 (1)

送信時に入力した情報は何ですか ?( 具体的に )

これら 3 つの情報を Server 側が受け取った時に，どれが投稿者の情報なのか分かりません．どうしたら解決できるでしょう ?

杉浦学 web.xml の冒頭宣言に関する質問

web.xml の冒頭宣言はなんであんなに長いんですか？？ちょっと気になったので質問してみました。


送信時に必要な情報 (2)

複数の情報を識別するためにデータ名 (Key) を付けます．また， Key に対する具体的な値をこれからは Value と呼びます．

Key 投稿者

Value 杉浦学

Key タイトル

Value web.xml の冒頭宣言に関する質問

Key 内容

Value web.xml の冒頭宣言はなんであんなに長いんですか？？ちょっと気になったので質問してみました。

この概念はフォームの入力部品を作成するときに重要になります


メッセージを送信する HTML フォーム

HTML フォームを作成するには主に 3 つの設定をします

1. フォームを宣言する

2. 入力部品を作る

3. 送信のための部品を作る


HTML フォームを使う (1)

HTML フォームの宣言方法

<form method=“get” action=“../servlet/ToukouServlet”>

</form>

フォームの情報の送信先

<form> タグ内に各部品を設定する



<input type= " text " name= " contributor " size= " 20 " />

<textarea name= " content " cols="50" rows="10" />

メッセージを入力するための部品の作成方法

Key contributor( 投稿者 )

Value

Key content( 内容 )

Value



<input type= " reset " value= " リセット " >

<input type= " submit " value= " 投稿 " >

"submit" ボタンは， <form> タグに書かれた action 先へフォームの情報を送信します．

"reset" ボタンは，フォームの情報を消去します．

メッセージを送信するための部品

情報を消去する部品 ( 任意に設定します )

CreW

Creative Workspace

メッセージ送信編　終了

質問どうぞ～

CreW

Creative Workspace

メッセージ受信編


メッセージの受信から返答まで

WebBrowser

ToukouServlet.class

ApplicationServer

杉浦学

GET ToukouServlet投稿者 =“ 杉浦学”

<html> <head>…<h2>杉浦学さんの投稿 </h2> …


送られてきたメッセージ

Key contributor

Value 杉浦学

Key title

Value web.xml の冒頭宣言に関する質問

Key content

Value web.xml の冒頭宣言はなんであんなに長いんですか？？ちょっと気になったので質問してみました。

Tomcat には以下の情報が送信されます． Tomcat はこの情報から Key と Value の対応表を作成します．


ハッシュテーブルとは鍵鍵 (Key)(Key) と値と値 (Value)(Value) からなるからなる表です ( 詳しい説明は省略します )

KeyKey から特定の ValueValue を取得できます今回の場合…

<input> タグで指定した name の値が Key になりますテキストフィールド等に入力された文字列が Value になります

Key Valuecontributor 杉浦学

title web.xml の冒頭宣言

content web.xml の冒頭宣言はなんで…


メッセージを受け取る部分

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();


送信された文字のエンコーディング

ブラウザから入力された情報で，日本語のような 2 バイト文字を取得する場合にはエンコーディングが必要ですこれにより文字化けを防ぐことができます

request.setCharacterEncoding("Shift_JIS");


メッセージの取得方法

送信されたメッセージが格納されたハッシュテーブルから， 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 の冒頭宣言

はなんで…


送信される文字のエンコーディング

ブラウザへの出力に，日本語のような 2 バイト文字を出力する場合にはエンコーディングが必要ですこれにより文字化けを防ぐことができます

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>");

Response クラスの getWriter() メソッドによって，出力するための PrintWriter オブジェクトを取得できます

CreW

Creative Workspace

メッセージ受信編　終了

質問どうぞ～



GET と POST の違いが説明できるようになる


現在の掲示板の欠点

現在の掲示板に，大量の文字を入力して送信して下さい．何が起こるでしょうか．

大量の文字を送信できない原因は， Tomcatへの送信方法に問題があります．現在は， GET という方法によって送信しています．


GET とは ?

GET はリクエストのメソッドの 1 つですGET はブラウザから指定したファイルを得るために， Server に問合わせる際に使用します便利な場合があるので， GET によってファイルを得る際に，多少情報を付加して Server に問合わせることができますただし， GET によって送れるデータ量には限界があります ( データ量は Server やクライアントに依存します )


POST とは ?

ブラウザ側からサーバへ，データ量に制限なく送るために POST がありますそれでは，実際に掲示板を POST に変更して，大量の文字を投稿しましょう

送信方法を POST にするために， <form> タグの method="get" を method="post" に変更しますサーブレットが POST に対して処理を行うために，doGet() メソッドを doPost() メソッドに変更します


GET と POST の違い

GET は，サーバへ送信できるデータ量に制限がある (POST は制限がない )

GET は，送信されるデータが URL に加わり送信される (POST は加わらない )

移動する URL をユーザに知らせたくない場合に POST が用いられる→セキュリティ強化


では，実習ですテキストボックス、テキストエリア以外の HTMLフォーム部品を掲示板に加えてください。投稿結果画面にも反映させてください（例： Web アプリに「質問」、「回答」選択欄）


補足資料 ~HTML フォーム部品~text- テキストボックスtextarea- テキストエリアradio- ラジオボタンcheckbox- チェックボックスselect- リストボックスsubmit- 送信ボタンreset- リセットボタンその他 password 、 hidden

* 「とほほ WWW 入門」に詳細な HTML リファレンスがあります　 http://tohoho.wakusei.ne.jp/www.htm


お疲れ様でした！！！

今後は、今回作った Web アプリを拡張していきます。次回は投稿をファイルに保存する方法を学びます。わくわく o( ＾ -＾ )o

Documents

Servlet 入門 (2) 入力フォームをつかった Web アプリ