Eclipse で MVC.

## はじめに
[MVC](https://ja.wikipedia.org/wiki/Model_View_Controller)のサンプルプログラムをEclipseで作ってみよう。

## 開発環境
Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162

## 手順
１．Eclipse Pleiades All in One のインストール
    のちのち他言語でも使いたいので、フルバージョンをインストールします。
　　「Ultimate」：Java以外でも開発可能（C/C++、Python...）
　　「Full Edition」：コンパイラや実行環境を含む

２．動的Webプロジェクトの作成

３．Servletで"Hello World"

４．MVCで"従業員一覧表示"
　　　M（Model）: JavaBeans (Javaクラス)
　　　V（View） : JSP
　　　C（Controller） : サーブレット  (Javaクラス)

## １．Eclipse Pleiades All in One のインストール
### URL

```
http://mergedoc.osdn.jp/
```

### インストール手順
#### 1. 「Eclipse 4.7 Oxygen」クリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/ea025208-792c-346e-c5ed-c6f504d37dc4.png)

#### 2. ミラー・サーバを変更する ( 3.でタイムアウトしてしまう場合があるので。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/03fbf6cb-4240-bd14-db7e-f058d2dc47c6.png)

#### 3. Windws 64bitの「Ultimate」「Full Edition」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/88dc6026-a1ef-316c-3d84-618f0c61afac.png)

#### 4.ダウンロードファイルを作業フォルダーに解凍する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/7a55f705-26ec-4f1e-ec74-c1671ded7b93.png)


## ２．動的Webプロジェクトの作成
### Eclipse起動
#### 1. 「eclipse.exe」ダブルクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/2d73f8fa-4583-a845-b3e2-254a765d7a3f.png)

#### 2. 「起動」ボタンクリック
　　※次回起動時に、このダイアログを表示しないのであれば、「この選択を...」にチェック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/d8017c3f-07af-cb2b-d593-3f8c575d978b.png)

### 新規プロジェクト生成
#### 3. 「ファイル」->「新規」->「その他」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cad13e80-8708-82a1-d43f-2faf9fc95e65.png)

#### 4. 「動的Webプロジェクト」を選択し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/0c2206ab-c0f5-1ee1-cc5c-92f73da609b3.png)

#### 5. 「プロジェクト名」を入力し、「Tomcat8」を選択、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/4fb4e0e4-18b0-1390-ba48-d3f357f53cda.png)

#### 6. 「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/df16ac52-169c-afdc-5154-9f56a818ca76.png)

#### 7. 「web.xmlデプロイメント記述子の生成」をチェックし、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/8f977812-e5e2-8b03-632d-1b1dc9b4ef3c.png)


## ３．Servletで"Hello World"

###　1) Servlet作成

#### 1. 「ファイル」->「新規」->「その他」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cad13e80-8708-82a1-d43f-2faf9fc95e65.png)

#### 2. 「サーブレット」を選択し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/205abe2f-ba29-9bf0-d67f-6f0383f0fac6.png)

#### 3. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/02dfa915-41aa-aaa7-a299-095c9925d6ff.png)

#### 4. 作成したサーブレットクラスを開き、１行追加
``` 
response.getWriter().append("\nHello World !!"); 
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/60c459f8-1141-c51f-4aba-cad95c11e57c.png)


###　2) 動作確認
#### 1. 「実行」->「実行」->「サーバーで実行」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cc3cdb57-dd9a-6fde-53ef-1f8849e4475e.png)

#### 2. 「Tomcat8.0 サーバー」を選択、「このプロジェクトを実行するときは常にこのサーバを使用」にチェックし、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/6206e5be-cf76-795a-5e71-fcc8e427f1e5.png)

#### 3. ブラウザ上にURLを入力
```
http://localhost:8080/SampleMVC/ShowHelloWorld
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/6dda7eda-b1dc-2131-c986-571b907bbe3c.png)

#### 4. URLのパス(http://localhost/SampleMVC/ShowHelloWorld)の定義確認

```
SampleMVC : 使用するサーバー選択時に、プロジェクト名がTomcatの設定ファイルに定義される　
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/29ef5d31-0513-50d4-9cd0-7549d0e912cb.png)

```
ShowHelloWorld : サーブレットJavaファイル作成時のURLマッピングが、@WebServlet("/ShowHelloWorld")と定義される
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/969ac0e6-70e9-e015-86f2-3ee3e20d0acc.png)

## ４．MVCで"従業員一覧表示"
###　0) JSTLダウンロード

#### 1. taglibs-standard-impl-1.2.5.jar、taglibs-standard-jstlel-1.2.5.jar、taglibs-standard-spec-1.2.5.jarのダウンロード

```
http://tomcat.apache.org/download-taglibs.cgi
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/b4a1a7d7-8a56-103b-719f-34e8df2404de.png)

#### 2. プロジェクトのWEB-INF\libにコピー
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/d56bafdb-542a-c703-c141-31a00a6ebeca.png)

###　1) Model（JavaBeans）作成

#### 1. 「ファイル」->「新規」->「クラス」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/745bfa52-040d-baf4-1ef4-4930ff077492.png)

#### 2. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cf7cc545-fea3-b75e-7705-8646df7e832b.png)

#### 3. コード作成
```
package emp;

public class EmployeeBean {
    private String id            = "";
    private String name          = "";
    private String email         = "";

    public void setId(String id){
        this.id = id;
    }

    public String getId(){
        return this.id;
    }

    public void setName(String name){
        this.name = name;
    }

    public String getName(){
        return this.name;
    }

    public void setEmail(String email){
        this.email = email;
    }

    public String getEmail(){
        return this.email;
    }
}
```

###　2) Servlet（Controller）作成

#### 1. 「ファイル」->「新規」->「その他」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cad13e80-8708-82a1-d43f-2faf9fc95e65.png)

#### 2. 「サーブレット」を選択し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/205abe2f-ba29-9bf0-d67f-6f0383f0fac6.png)

#### 3. 「Javaパッケージ」と「クラス名」を入力し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/da82ceb8-b690-c7ce-836f-1997a3e19a13.png)

#### 4. サーブレット配備識別子名を設定し、URLマッピングを確認、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/4d8cc2bb-92a1-6f7f-7e86-17698e11d298.png)


#### 5. コード生成

```
package emp;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * Servlet implementation class EmployeeServlet
 */
@WebServlet(name = "EmpList", urlPatterns = { "/EmpList" })
public class EmployeeServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public EmployeeServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    // Modelの生成
		List<EmployeeBean> employeeList = new ArrayList<EmployeeBean>();
		EmployeeBean bean = new EmployeeBean();
	    bean.setId("00001");
	    bean.setName("Hayako Sato");
	    bean.setEmail("hanako@abc.com");
	    employeeList.add(bean);

	    bean =  new EmployeeBean();
	    bean.setId("00002");
	    bean.setName("Taro Suzuki");
	    bean.setEmail("taro@abc.com");
	    employeeList.add(bean);

	    bean =  new EmployeeBean();
	    bean.setId("00003");
	    bean.setName("Ryo Ikeda");
	    bean.setEmail("ryo@abc.com");
	    employeeList.add(bean);

	    // ViewへModelを渡す
	    request.setAttribute("employeeList", employeeList);

	    // Viewを表示
	    this.getServletContext()
	        .getRequestDispatcher("/employeeList.jsp")
	        .forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// Modelの生成
		Map<String, EmployeeBean> employeeMap = new HashMap<String, EmployeeBean>();
		EmployeeBean bean = new EmployeeBean();
	    bean.setId("00001");
	    bean.setName("Hayako Sato");
	    bean.setEmail("hanako@abc.com");
	    employeeMap.put(bean.getId(), bean);

	    bean =  new EmployeeBean();
	    bean.setId("00002");
	    bean.setName("Taro Suzuki");
	    bean.setEmail("taro@abc.com");
	    employeeMap.put(bean.getId(), bean);

	    bean =  new EmployeeBean();
	    bean.setId("00003");
	    bean.setName("Ryo Ikeda");
	    bean.setEmail("ryo@abc.com");
	    employeeMap.put(bean.getId(), bean);

		String id = request.getParameter("id");
		List<EmployeeBean> employeeList = new ArrayList<EmployeeBean>();
		if (id.isEmpty()) {
			for (Map.Entry<String, EmployeeBean> entry : employeeMap.entrySet()) {
				employeeList.add(entry.getValue());
			}

		}
		else {
			employeeList.add(employeeMap.get(id));
		}

	    // ViewへModelを渡す
		request.setAttribute("employeeList", employeeList);


		// Viewを表示
	    this.getServletContext()
	        .getRequestDispatcher("/employeeList.jsp")
	        .forward(request, response);

	}

}

```

###　3) View（JSP）作成

#### 1. 「ファイル」->「新規」->「その他」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/cad13e80-8708-82a1-d43f-2faf9fc95e65.png)

#### 2. 「JSPファイル」を選択し、「次へ」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/be083ccd-e390-a7d5-129a-22ed7c07e846.png)

#### 4. 「フォルダー」と「ファイル名」を入力し、「完了」ボタンクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/f4978e67-0221-ad10-21da-7d30bda07345.png)

#### 5. コード生成

```
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>従業員一覧</title>
	</head>
	<body>

		<form action="EmpList" method="post">
			<p>
				ID：<input type="text" name="id">
			</p>
			<p>
				<input type="submit" value="送信する">
				<input type="reset" value="入力内容をリセットする">
			</p>
		</form>


		<table>
			<caption>
				<strong>従業員一覧</strong>
			</caption>
			<thead>
				<tr>
					<th>ID</th>
					<th>NAME</th>
					<th>EMAIL</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${employeeList}" var="emp" >
					<tr>
						<th><c:out value="${emp.id}" /></th>
						<td><c:out value="${emp.name}" /></td>
						<td><c:out value="${emp.email}" /></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>

	</body>
</html>

```

###　4) 動作確認
#### 1. 「実行」->「実行」->「サーバで実行」メニュ選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/6a1dcf7f-2b67-c8c7-5afa-8ffb0d7b28ab.png)

#### 2. ブラウザ上にURLを入力
```
http://localhost:8080/SampleMVC/EmpList
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/53057ad4-c357-7c40-1494-5060557d1170.png)

#### 3. IDで検索できる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a9615069-80f0-2652-67c4-0a90551a603d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/9be6bbbc-dad9-e4a8-ea31-317fe461ffd5.png)

#### 4. ID未入力の場合は、全件表示
![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/a31b3fbc-ca0b-823a-81af-e187c56cd388.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/214982/e7c00029-b2a4-fad6-df74-f44cd94b0fca.png)

## おわりに
- EmployeeBean のアクセサ（setXxx()、getXxx()）は、[loｍbok](https://projectlombok.org/)を使って省略できます。

- URL(```http://localhost:8080/SampleMVC/EmpList```)を入力したときは、EmployeeServlet.doGet()メソッドをCallします。

- 「送信」ボタンをクリックしたときは、EmployeeServlet.doPost()メソッドをCallします。

- HashMapクラスは、putした順に要素を取り出すことはできません。LinkedHashMapを使用すると挿入された順番に取り出すことができます。