ログイン画面の作成

まず、ログイン画面の実装を通じて、Servletの基本要素を学習していきましょう。

プロジェクトの作成

まず、Tomcatプロジェクトを作成します。
Tomcatプロジェクトを作成することで、コンテキストパス以下のファイル構造を作成し、 容易にTomcatに配備することができます。

コンテキストパス以下のファイル構造は以下のようにする必要があります。

webappディレクトリ構成

WEB-INFディレクトリはWEBアプリケーションの構成情報やクラスファイルなどを格納するために利用されます。 このディレクトリ以下にあるファイルは直接ブラウザから参照することはできません。
WEB-INFディレクトリ以外のファイルは、CSSファイル、JSファイルなど、ブラウザから参照する必要がある場合に配置します。 ここに配置されたファイルは、http://(サーバ名):(ポート番号)/(コンテキストパス)/(コンテキストパス内でのパス)の形で参照することができます。

ログイン画面は、以下のようなファイル構造とします。

パス 内容
/WEB-INF/classes/test/TodoServlet.class クラスtest.TodoServletのバイトコード
(GETリクエストのactionパラメータがloginの場合に/WEB-INF/jsp/login.jspに転送。それ以外はエラー。)
/WEB-INF/jsp/login.jsp ログイン画面のJSPファイル
(TodoServletから転送。直接参照できないようにWEB-INF以下に配置。)
/login.js todoサーブレットが出力したログイン画面から参照するJavaScriptファイル
/todo.css todoサーブレットが出力したログイン画面から参照するCSSファイル


では、Tomcatプロジェクトを作成し、ログイン画面を実装していきましょう。

  1. Eclipseの「Package Explorer」上で右クリックし、「New」-「Project...」を選択します。

  2. 「Java」-「Tomcatプロジェクト」を選択します。

    WEBアプリケーション作成(1)

  3. 「Project name」に「todotest」と入力し、「Finish」を押します。

    WEBアプリケーション作成(2)

  4. 以下のようなプロジェクトがPackage Explorer上にあらわれれば成功です。

    WEBアプリケーション作成(3)

Servletクラスの作成

Servletクラスを作成していきましょう。

Servletクラスはjavax.servlet.http.HttpServletクラスを継承する必要があり、 目的に応じて以下のメソッドをオーバーライドします。
(他にもいくつかのメソッドがあります。)

用途 オーバーライドすべきメソッド
GETリクエストへの応答 protected void doGet(HttpServletRequest req,HttpServletResponse resp)
POSTリクエストへの応答 protected void doPost(HttpServletRequest req,HttpServletResponse resp)


Servletのメソッドの処理の中で、リクエストに関する情報を取得したい場合にはjavax.servlet.http.HttpServletRequestオブジェクトを使用します。
ここではサンプルに使用するメソッドのみ説明します。

機能 実現方法
クエリ中のパラメータの取得 String HttpServletRequest.getParameter(String)を使用する。
引数にパラメータ名を指定することで、パラメータの値を取得することが可能。
JSPファイルへの転送 javax.servlet.RequestDispatcher HttpServletRequest.getRequestDispatcher(String)を使用する。
引数にJSPファイルのパスを指定し、RequestDispatcherを取得した後、
RequestDispatcher.forward(HttpServletRequest, HttpServletResponse)を呼び出す。


Servletのメソッドの処理の中で、レスポンスに関する情報を設定したい場合にはHttpServletResponseオブジェクトを使用します。
ここでは、JSPファイルによってレスポンスの内容を生成しますので、Servletの処理内では特に操作しません。

  1. Servletクラスを作成します。

    「WEB-INF/src」上で右クリックし、「New...」-「Class」を選択します。
    以下のダイアログが表示されたら、「Package」「Name」「Superclass」のフィールドに 以下のように値を設定します。

    WEBアプリケーション作成(4)

  2. TodoServletクラスを作成します。

    ここでは、GETリクエストに対する処理として、以下のような処理を記述します。

    ダウンロード TodoServlet.java
    37~50行目:
     37:     protected void doGet(HttpServletRequest req, HttpServletResponse resp)
     38:             throws ServletException, IOException {
     39:         // 要求からactionパラメータを取得
     40:         String action = req.getParameter("action");
     41: 
     42:         String forward = null;
     43:         if("login".equals(action)) {
     44:             // ログイン画面の処理
     45:             // login.jspへフォワードする
     46:             forward = JSP_BASE + "login.jsp";
     47:         }else{
     48:             // 不正なアクションの場合
     49:             throw new ServletException("不正なリクエストです");
     50:         }

    パラメータの解析処理。
    getParameter("action")によりactionパラメータに指定された値を取得し、 loginが指定された場合に転送先としてWEB-INF/jsp/login.jspを指定しています。
    (実際の転送処理は後述)

    また、actionパラメータが指定されていない場合や、認識できないactionパラメータが指定された場合、 ServletException例外をスローしてエラー終了しています。
    (この場合、Tomcatのエラー画面が表示されてしまいます。次のセクションで自分が作成したエラー画面へと差し替えます。)
    52~55行目:
     52:     // JSPへのフォワード
     53:     RequestDispatcher dispatcher = req.getRequestDispatcher(forward);
     54:     dispatcher.forward(req, resp);
     55: }

    JSPファイルへの転送処理。
    先の処理で転送先として指定されたJSPファイルへと転送をおこないます。


JSPファイルの作成

次に、JSPファイルを作成していきましょう。
先に作成したlogin.js.htmlをベースとし、JSPファイルとして処理するために必要ないくつかの記述を追加していきます。

  1. todotestプロジェクト/WEB-INFディレクトリ以下にjspディレクトリを作成します。

  2. JSPファイルを作成します。
    先に作ったindex.js.htmlをlogin.jspにリネームし、WEB-INF/jspディレクトリにコピーします。

  3. 先に作ったCSS,JavaScriptファイルをstruts2todoプロジェクト直下にコピーします。

    ダウンロード todo.css login.js

  4. JSPファイルに以下の修正を加えます。

    ダウンロード login.jsp
    1行目:
      1: <%@ page language="java" contentType="text/html; charset=utf-8" %>

    JSPファイルの1行目にJSPファイルに関する属性情報を追加。
    15~16行目:
     15: <form action="todo" method="post">
     16:     <input type="hidden" name="action" value="login_action">

    フォームの送信先がServletになるように変更。
    また、送信メソッドとactionパラメータを設定します。


設定ファイルの作成

  1. 最後に、WEB-INFフォルダ以下にweb.xmlファイルを作成します。

    ダウンロード web.xml
    web.xml
      1: <?xml version="1.0" encoding="ISO-8859-1"?>
      2: <web-app xmlns="http://java.sun.com/xml/ns/j2ee"
      3:  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      4:  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
      5:  version="2.4">
      6:     <servlet>
      7:         <servlet-name>
      8:             todo
      9:         </servlet-name>
     10:         <servlet-class>
     11:             test.TodoServlet
     12:         </servlet-class>
     13:     </servlet>
     14:     
     15:     <servlet-mapping>
     16:         <servlet-name>
     17:             todo
     18:         </servlet-name>
     19:         <url-pattern>
     20:             /todo
     21:         </url-pattern>
     22:     </servlet-mapping>
     23:     
     24: </web-app>

    7~13行目:
    Servletクラスの情報を定義します。
    15~22行目:
    Servletクラスのパスを定義します。
    servlet要素の定義とはservlet-name要素の値を通じて関連付けられます。


ここまでのファイル

ここまででプロジェクトディレクトリの内容は以下のようになります。
正しく作成できているか、確認してください。

ダウンロード todotest_1.zip


デバッグ・動作確認

  1. 「Tomcat起動」ボタンを押します。

    Tomcat起動

  2. まず、何もクエリを指定せず、意図的にエラーを起こしてみましょう。
    Servletに何もクエリを指定しなければ、action名が取得できず、エラーが発生するはずです。
    ブラウザで以下のURLを開きます。

    http://localhost:8080/todotest/todo

    以下のエラー画面があらわれれば正しくServletは動作しています。

    TodoServlet(エラー)

  3. 次に、デバッガの使用方法の確認もかねて、パラメータを指定して実行してみましょう。
    コンソールアプリケーションと同じ要領で、TodoServlet.javaのdoGetのはじめにブレークポイントを設定します。

  4. ブラウザで以下のURLを開きます。
    http://localhost:8080/todotest/todo?action=login

    以下のようにEclipseのデバッガが起動します。
    (以下の画面構成にならない場合は、 Eclipseメニューの「Window」-「Open Perspective」-「Debug」を実行してください)

    TodoServletデバッグ
    デバッグ実行完了後、ブラウザに以下の画面があらわれれば成功です。

    Login画面