servlet 2 web n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Servlet 入門 (2) 入力フォームをつかった Web アプリ PowerPoint Presentation
Download Presentation
Servlet 入門 (2) 入力フォームをつかった Web アプリ

Loading in 2 Seconds...

play fullscreen
1 / 47

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


  • 90 Views
  • Uploaded on

Servlet 入門 (2) 入力フォームをつかった Web アプリ. 2004 年 5 月 20 日発表 有田 直弘. 前回までの復習. Web アプリケーションの様々な概念を学んだ Web アプリケーション Web アプリケーションサーバ Tomcat Servlet Web アプリケーション作成の流れを学んだ アプリケーションディレクトリ作成場所 フォルダ構成 サーブレット作成・コンパイル・配置. 前回のイメージ. 1.Tomcat Server の seminar の HelloCreW を要求. サーバ. Web Browser.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Servlet 入門 (2) 入力フォームをつかった Web アプリ' - jadyn


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
servlet 2 web

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

2004年5月20日発表

有田直弘

slide2
前回までの復習
  • Webアプリケーションの様々な概念を学んだ
    • Webアプリケーション
    • Webアプリケーションサーバ
    • Tomcat
    • Servlet
  • Webアプリケーション作成の流れを学んだ
    • アプリケーションディレクトリ作成場所
    • フォルダ構成
    • サーブレット作成・コンパイル・配置
slide3
前回のイメージ

1.Tomcat ServerのseminarのHelloCreWを要求

サーバ

Web

Browser

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

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

slide4
今回の目標(その1)
  • 要求から返答までのTomcat Serverでの処理の流れを説明できる
slide5

Tomcat Server

Servlet Container

OPAS

IRC

Seminar

HelloCreW.class

要求と返答の詳細(1)

サーバ

拡大します

slide6

1.要求

Http Request

GET /seminar/servlet/HelloCreW HTTP/1.0

8080番ポート:Tomcat Server

Servlet Container

IRC

OPAS

Seminar

HelloCreW.class

要求と返答の詳細(2)

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

Web

Browser

slide7

1.要求

Http Request

GET /seminar/servlet/HelloCreW HTTP/1.0

8080番ポート:Tomcat Server

2.委託

Servlet Container

IRC

OPAS

Seminar

HelloCreW.class

要求と返答の詳細(3)

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

Web

Browser

slide8

1.要求

Http Request

GET /seminar/servlet/HelloCreW HTTP/1.0

8080番ポート:Tomcat Server

2.委託

Servlet Container

IRC

OPAS

3.実行

Seminar

HelloCreW.class

要求と返答の詳細(4)

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

Web

Browser

slide9

1.要求

Http Request

GET /seminar/servlet/HelloCreW HTTP/1.0

8080番ポート:Tomcat Server

2.委託

Servlet Container

IRC

OPAS

3.実行

Seminar

4.結果

HelloCreW.class

要求と返答の詳細(5)

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

Web

Browser

slide10

1.要求

Http Request

GET /seminar/servlet/HelloCreW HTTP/1.0

8080番ポート:Tomcat Server

5.結果

2.委託

Servlet Container

Http Response

Header+

Body(<html>…

<h1>11:45 JST</h1>

…</html>)

IRC

OPAS

3.実行

Seminar

4.結果

HelloCreW.class

要求と返答の詳細(6)

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

Web

Browser

slide11
要求と返答のまとめ

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

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

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

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

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

hellocrew
HelloCreWの欠点
  • このHelloCreWってWebアプリですか?

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

slide13
人を幸せにするWebアプリ
  • コンセプトを付ける
  • ユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなものにする
slide14
今回の目標(その2)
  • 「入力→処理→出力」をするWebアプリケーションが作れるようになる
    • フォーム(*注)を使って入力する仕組みを作れるようになる
    • フォームから送信された入力情報を,Servletで取得できるようになる
    • Webアプリケーションにおける「入力→処理→出力」の流れが説明できるようになる
    • 今回,「処理」の部分はそれほどやりません

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

slide16

投稿の結果が

表示される

投稿画面

メッセージの送信

toukou.html

ToukouServlet

画面遷移図

Webアプリの顔

トップページ

index.html

slide17
利用シナリオ

投稿者: 杉浦 学

タイトル: web.xmlの冒頭宣言に関する質問

内容:web.xmlの冒頭宣言はなんであんなに

長いんですか??

ちょっと気になったので質問してみました。

デモを見てみよう!!

slide18

GET toukou.html

<html> <head>

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

GET ToukouServlet

投稿者=“杉浦学”…

<html> <head>…

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

シナリオの流れ

ApplicationServer

WebBrowser

toukou.html

杉浦 学

ToukouServlet.class

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

seminar

WEB-INF

classes

ToukouServlet.class

ToukouServlet.java

src

web.xml

toukou.html

html

index.html

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

GET toukou.html

<html> <head>

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

GET ToukouServlet

投稿者=“杉浦学”…

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

ApplicationServer

WebBrowser

toukou.html

杉浦学

slide23
送信時に必要な情報(1)
  • 送信時に入力した情報は何ですか?(具体的に)

杉浦 学

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

web.xmlの冒頭宣言はなんであんなに長いんですか??

ちょっと気になったので質問してみました。

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

slide24
送信時に必要な情報(2)
  • 複数の情報を識別するためにデータ名(Key)を付けます.また,Keyに対する具体的な値をこれからはValueと呼びます.

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

slide25
メッセージを送信するHTMLフォーム
  • HTMLフォームを作成するには主に3つの設定をします

1.フォームを宣言する

2.入力部品を作る

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

html 1
HTMLフォームを使う(1)
  • HTMLフォームの宣言方法

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

</form>

フォームの情報の送信先

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

html 2
HTMLフォームを使う(2)
  • メッセージを入力するための部品の作成方法

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

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

html 3
HTMLフォームを使う(3)
  • メッセージを送信するための部品

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

"submit"ボタンは,<form>タグに書かれたaction先へ

フォームの情報を送信します.

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

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

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

slide31

GET ToukouServlet

投稿者=“杉浦学”

<html> <head>…

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

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

ApplicationServer

WebBrowser

杉浦学

ToukouServlet.class

slide32
送られてきたメッセージ
  • Tomcatには以下の情報が送信されます.Tomcatはこの情報からKeyとValueの対応表を作成します.
slide33
ハッシュテーブルとは
  • 鍵(Key)と値(Value)からなる表です(詳しい説明は省略します)
  • Keyから特定のValueを取得できます
  • 今回の場合…
    • <input>タグで指定したnameの値がKeyになります
    • テキストフィールド等に入力された文字列がValueになります
slide34
サーブレットの説明

//送信されたメッセージが格納されたハッ…

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を生成する

部分

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

request.setCharacterEncoding("Shift_JIS");

slide36
メッセージの取得方法
  • 送信されたメッセージが格納されたハッシュテーブルから,Keyを指定してValueを取得し,変数に代入する
  • 例えば,変数contributorには"杉浦 学"といった値が代入されます

String contributor = request.getParameter("contributor");

String title = request.getParameter("title");

String content = request.getParameter(“content");

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

response.setContentType("text/html;charset=Shift_JIS");

slide38
ブラウザに出力する
  • 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>");

slide40
今回の目標(その3)
  • GETとPOSTの違いが説明できるようになる
slide41
現在の掲示板の欠点
  • 現在の掲示板に,大量の文字を入力して送信して下さい.何が起こるでしょうか.

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

slide42
GETとは?
  • GETはリクエストのメソッドの1つです
  • GETはブラウザから指定したファイルを得るために,Serverに問合わせる際に使用します
  • 便利な場合があるので,GETによってファイルを得る際に,多少情報を付加してServerに問合わせることができます
  • ただし,GETによって送れるデータ量には限界があります(データ量はServerやクライアントに依存します)
slide43
POSTとは?
  • ブラウザ側からサーバへ,データ量に制限なく送るためにPOSTがあります
  • それでは,実際に掲示板をPOSTに変更して,大量の文字を投稿しましょう
    • 送信方法をPOSTにするために,<form>タグのmethod="get"をmethod="post"に変更します
    • サーブレットがPOSTに対して処理を行うために,doGet()メソッドをdoPost()メソッドに変更します
get post
GETとPOSTの違い
  • GETは,サーバへ送信できるデータ量に制限がある(POSTは制限がない)
  • GETは,送信されるデータがURLに加わり送信される(POSTは加わらない)
    • 移動するURLをユーザに知らせたくない場合にPOSTが用いられる→セキュリティ強化
slide45
では,実習です
  • テキストボックス、テキストエリア以外のHTMLフォーム部品を掲示板に加えてください。投稿結果画面にも反映させてください(例:Webアプリに「質問」、「回答」選択欄)
slide46
補足資料 ~HTMLフォーム部品~
  • text-テキストボックス
  • textarea-テキストエリア
  • radio-ラジオボタン
  • checkbox-チェックボックス
  • select-リストボックス
  • submit-送信ボタン
  • reset-リセットボタン
  • その他password、hidden

*「とほほWWW入門」に詳細なHTMLリファレンスがあります

http://tohoho.wakusei.ne.jp/www.htm

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