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

Servlet入門(2)入力フォームをつかったWebアプリServlet入門(2)入力フォームをつかったWebアプリ 2004年5月20日発表有田直弘

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

前回のイメージ 1.Tomcat ServerのseminarのHelloCreWを要求サーバ Web Browser 2.要求に対して返答する("HelloCreW"と表示する) 中で何をしているのだろう?

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

Tomcat Server Servlet Container OPAS IRC Seminar HelloCreW.class 要求と返答の詳細(1) サーバ拡大します

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

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

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

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

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

要求と返答のまとめ 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アプリ • コンセプトを付ける • ユーザからのメッセージを受け取り、何らかの処理をして結果を返すインタラクティブなものにする

今回の目標(その2) • 「入力→処理→出力」をするWebアプリケーションが作れるようになる • フォーム(*注)を使って入力する仕組みを作れるようになる • フォームから送信された入力情報を，Servletで取得できるようになる • Webアプリケーションにおける「入力→処理→出力」の流れが説明できるようになる • 今回，「処理」の部分はそれほどやりません *注)フォーム(form)は「記入用紙」の意味で，Web関係ではユーザからの入力を受け付けるテキストフィールドやチェックボックス，ラジオボックス，ボタン等のことを言います

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

投稿の結果が 表示される投稿画面メッセージの送信 toukou.html ToukouServlet 画面遷移図 Webアプリの顔トップページ index.html

利用シナリオ 投稿者: 杉浦学タイトル: web.xmlの冒頭宣言に関する質問内容：web.xmlの冒頭宣言はなんであんなに長いんですか？？ちょっと気になったので質問してみました。デモを見てみよう!!

GET toukou.html <html> <head> <title>投稿画面</title>… GET ToukouServlet 投稿者=“杉浦学”… <html> <head>… <h2>杉浦学さんの投稿</h2> … シナリオの流れ ApplicationServer WebBrowser toukou.html 杉浦学 ToukouServlet.class

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

seminar WEB-INF classes ToukouServlet.class ToukouServlet.java src web.xml toukou.html html index.html Webアプリの構造（復習） • Webアプリのディレクトリ構造を作って関連ファイルを入れましょう（Webアプリ名は題材の例なので、自分のものに変えてもかまいません）

メッセージ送信編

GET toukou.html <html> <head> <title>投稿画面</title>… GET ToukouServlet 投稿者=“杉浦学”… メッセージの入力から送信まで ApplicationServer WebBrowser toukou.html 杉浦学

送信時に必要な情報(1) • 送信時に入力した情報は何ですか?(具体的に) 杉浦学 web.xmlの冒頭宣言に関する質問 web.xmlの冒頭宣言はなんであんなに長いんですか？？ちょっと気になったので質問してみました。これら3つの情報をServer側が受け取った時に，どれが投稿者の情報なのか分かりません．どうしたら解決できるでしょう?

送信時に必要な情報(2) • 複数の情報を識別するためにデータ名(Key)を付けます．また，Keyに対する具体的な値をこれからはValueと呼びます．この概念はフォームの入力部品を作成するときに重要になります

メッセージを送信するHTMLフォーム • HTMLフォームを作成するには主に3つの設定をします 1.フォームを宣言する 2.入力部品を作る 3.送信のための部品を作る

HTMLフォームを使う(1) • HTMLフォームの宣言方法 <form method=“get”action=“../servlet/ToukouServlet”> </form> フォームの情報の送信先 <form>タグ内に各部品を設定する

HTMLフォームを使う(2) • メッセージを入力するための部品の作成方法 <input type= " text " name= " contributor " size= " 20 " /> <textarea name= " content " cols="50" rows="10" />

HTMLフォームを使う(3) • メッセージを送信するための部品 <input type= " submit " value= "投稿" > "submit"ボタンは，<form>タグに書かれたaction先へフォームの情報を送信します．情報を消去する部品(任意に設定します) <input type= "reset " value= "リセット" > "reset"ボタンは，フォームの情報を消去します．

質問どうぞ～ メッセージ送信編　終了

メッセージ受信編

GET ToukouServlet 投稿者=“杉浦学” <html> <head>… <h2>杉浦学さんの投稿</h2> … メッセージの受信から返答まで ApplicationServer WebBrowser 杉浦学 ToukouServlet.class

送られてきたメッセージ • Tomcatには以下の情報が送信されます．Tomcatはこの情報からKeyとValueの対応表を作成します．

ハッシュテーブルとは • 鍵(Key)と値(Value)からなる表です(詳しい説明は省略します) • Keyから特定のValueを取得できます • 今回の場合… • <input>タグで指定したnameの値がKeyになります • テキストフィールド等に入力された文字列がValueになります

サーブレットの説明 //送信されたメッセージが格納されたハッ… 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を生成する部分

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

メッセージの取得方法 • 送信されたメッセージが格納されたハッシュテーブルから，Keyを指定してValueを取得し，変数に代入する • 例えば，変数contributorには"杉浦学"といった値が代入されます String contributor = request.getParameter("contributor"); String title = request.getParameter("title"); String content = request.getParameter(“content");

送信される文字のエンコーディング • ブラウザへの出力に，日本語のような2バイト文字を出力する場合にはエンコーディングが必要です • これにより文字化けを防ぐことができます response.setContentType("text/html;charset=Shift_JIS");

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

質問どうぞ～ メッセージ受信編　終了

今回の目標(その3) • 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

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