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