Java で作る Webアプリケーション 開発 入門

0 件のコメント

Eclipse を使った Webアプリケーション を開発の入門として、 HelloWorld アプリ の作成をしてみます。 良く作られる MVC (Model-View-Control) のカタチとして最低限のものを作ってみます。

目次

概要

今回作成する Webアプリケーション は単純に画面に "Hello World !" を表示させるだけです。 ただ、これから作る Webアプリケーション のひな形になれるよう、 MVC のカタチをとってみます。

MVC とは アプリケーションの作り方で、 Model、View、Control の 3機能 に分割してアプリケーションを作る作り方です。 今回の Java (Apache + Tomcat) であれば Model は JavaBeans (Javaクラス)、 View は JSP、Control は サーブレット になります。

プロジェクトの作成

Webアプリケーションプロジェクトの骨組みを作ります。

  1. [File]-[New]-[Dynamic Web Project] を選択。

  2. Project name に任意の名前を入力。

  3. [New Runtime] を押下。
    (Eclipse インストール後の初回起動の場合ターゲットランタイムの設定が必要です。一度設定されているようであればこの手順はスキップ。)

  4. インストールした Tomcat のバージョン、[Create a new local server]を選択して [Next] を押下。

  5. Tomcat を インストールしたディレクトリ(CATALINA_HOME)を指定して [Finish] を押下。
    (デフォルトインストール先の場合 "C:\Program Files\Apache Software Foundation\Tomcat 8.0")

  6. [Next] を押下。

  7. デフォルト設定のまま [Next] を押下。

  8. [Generate web.xml deployment descriptor] を選択して [Finish] を押下。

    (web.xml は Webアプリケーション構成を記述するファイルです。)

実装

実装では Servlet、JavaBeans、JSP の 3ファイル を作成します。

Servlet (Controller)

  1. 新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[Servlet] を選択。

  2. 追加するサーブレットの設定をして [Finish] を選択。

    Projcet
    WebApplication1 (追加先プロジェクト名を選択)
    Sorce folder
    \WebApplication1\src (プロジェクト配下の src を指定)
    Java package
    sample.controllers (いわゆる名前空間の指定)
    Class name
    HelloWorldController (クラス名を指定)
    Superclass
    javax.servlet.http.HttpServlet (必ず HttpServlet を継承)
  3. 以下のコードをコピー&ペースト。

    package sample.controllers;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import sample.models.HelloWorldModel;
    
    /**
     * Servlet implementation class HelloWorldController
     */
    @WebServlet("/HelloWorld")
    public class HelloWorldController extends HttpServlet {
      private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public HelloWorldController() {
            super();
        }
    
      /**
       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
       */
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // Modelの生成
        HelloWorldModel model = new HelloWorldModel();
        model.setMessage("Hello World !");
    
        // ViewへModelデータを渡す準備
        request.setAttribute("model", model);
        
        // Viewを表示
        this.getServletContext()
            .getRequestDispatcher("/WEB-INF/sample/views/HelloWorldView.jsp")
            .forward(request, response);
      }
    }
    

L14: このサーブレットを呼び出すときのURLを指定します。ここで指定した値は "http://サーバー名/プロジェクト名/○○" の "○○" に相当する部分になります。

L34: JSPへデータを渡す準備をします。第1引数で指定した文字列を使ってJSP側でデータを取り出します。

L37~L39: JSPへ処理を転送させます。 JAVAではフォワードと呼ぶそうです。

JavaBeans (Model)

  1. 新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[Class] を選択。

  2. 追加するクラスの設定をして [Finish] を選択。

    Sorce folder
    \WebApplication1\src (プロジェクト配下の src を指定)
    Package
    sample.models (いわゆる名前空間の指定)
    Name
    HelloWorldModel (クラス名を指定)
  3. 以下のコードをコピー&ペースト。

    package sample.models;
    
    public class HelloWorldModel {
        private String message = "";
        
        public void setMessage(String value){
            this.message = value;
        }
        
        public String getMessage(){
            return this.message;
        }
    }
    

JSP (View)

  1. 新規作成したプロジェクト [WebApplication1] を右クリック、[New]-[JSP File] を選択。

  2. 追加するJSPの設定をして [Finish] を選択。

    Enter or select the parent folder
    WebApplication1/WebContent/WEB-INF/sample/views (JSP配置先を選択)
    File name
    HelloWorldView.jsp (任意のファイル名)
  3. 以下のコードをコピー&ペースト。

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HelloWorldサンプル</title>
    </head>
    <body>
      <p>${requestScope["model"].message }</p>
    </body>
    </html>
    

L9: サーブレットでセットされたデータを取り出します。単純に ${model.message} といった記載もできます。

実行

実行環境準備

  1. [Servers]タブへ移動。

  2. 追加されている [Tomcat v8.0 Server at localhost] を右クリック、[Add and Remove] を選択。

  3. [Add All] を選択してすべてのプロジェクトを実行できるよう設定、[Finish] を選択。

テスト実行

  1. [Run]ボタン を押下。

  2. 内部ブラウザを起動。

  3. "http://localhost:8080/WebApplication1/HelloWorld" へアクセス。