第３章　Struts2のログイン機能の実装

#  **Struts2のログイン機能の実装**

***

## **1.画面定義書**

### **（１）画面レイアウト(画面ID:login)**
<br>

<a href="https://i.loli.net/2019/06/27/5d147e5a585e618610.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d147e5a585e618610.jpg" width="40%" /></a>

<br>

### **（２）画面項目説明**

<br>
<table border=1px rules=all>
<tr style="width:600px ;background-color:#C6E0B4 ;text-align:center;">
    <th>項番</th>
    <th>画面表示名</th>
    <th>取得場所</th>
    <th>取得名称</th>
    <th>コントロール</th>
    <th>フォーマット</th>
    <th>初期値</th>
    <th>仕様</th>

</tr>
    <tr>
    <td>1</td>
    <td>ユーザID</td>
    <td>ー</td>
    <td>ー</td>
    <td>メールボックス</td>
    <td>@.com</td>
    <td>Emailアドレスを入力してください</td>
    <td>半角英数字と記号@ _ .</td>
</tr>
<tr>
    <td>2</td>
    <td>パスワード</td>
    <td>ー</td>
    <td>ー</td>
    <td>パスワードボックス</td>
    <td>******</td>
    <td>空白</td>
    <td>6バイト半角英数字</td>
</tr>
</table>

<br>

**入力項目チェック仕様**

<table border=1px rules=all>
<tr style="width:600px ;background-color:#C6E0B4 ;text-align:center;">
    <th>項番</th>
    <th>入力項目</th>
    <th>チェック仕様</th>
    <th>エラー時の対処</br>（出力MSG-ID等）</th>
</tr>
<tr>
<td rowspan="3">1</td>
<td rowspan="3">ユーザID</td>
<td>必須入力のこと</td>
<td>ユーザID(メールアドレス)を入力してください!</td>
</tr>
<tr>
<td>有効なメールアドレスが入力すること</td>
<td>有効なメールアドレスを入力してください！</td>
</tr>
<tr>
<td>DBに存在しないメールアドレス</td>
<td>不正なユーザIDです！</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td rowspan="3">パスワード</td>
<td>必須入力のこと</td>
<td>パスワードを入力してください！</td>
</tr>
<tr>
<td>6桁のパスワードが入力すること</td>
<td>パスワード欄に6桁半角英数字を</br>入力してください！</td>
</tr>
<tr>
<td>DBに存在しないパスワード</td>
<td>不正なパースワードです！</td>
</tr>
</table>
 
<br>

### **（３）機能概要**

ログインユーザ情報を元に、ユーザIDとパスワードを検証されます。</br>
(1)ユーザIDを検証、正確でないとログイン画面に、「不正なユーザIDです！」のメッセージが表示される。</br>
(2)ユーザIDは正確であれば、パスワードを検証、正確ではないとログイン画面に、「パスワードは不正です!」のメッセージが表示されます。 </br>
(3)ユーザIDとパスワードは両方とも正確の場合はsuccess画面に遷移されます。

</br>
</br>

## **2.画面遷移図**

<a href="https://i.loli.net/2019/07/02/5d1b699ed44c451393.jpg" target="_blank">
<img src="https://i.loli.net/2019/07/02/5d1b699ed44c451393.jpg" width="40%" /></a>

</br><br>

## **3.事前準備ーEclipseのDBViewerで、データの作成**

以下の内容を参照して、データベースにデータを入力してください：

<pre>
CREATE DATABASE companydata;
USE companydata;
CREATE TABLE loginuser(
    accountId VARCHAR(255) NOT NULL,
    password CHAR(6) NOT NULL
);
INSERT loginuser(accountId, password)values("111@softusing.com","000001");
INSERT loginuser(accountId, password)values("222@softusing.com","000002");
INSERT loginuser(accountId, password)values("333@softusing.com","000003");
</pre>

<br>

<pre>
USE companydata
SELECT accountId, password FROM loginuser;
</pre>

<br>

このようなコードを実行したら、結果は以下の通りです:

## **4.Struts２ログインのファイル構成**

<a href="https://i.loli.net/2019/06/26/5d1340db1bcf875439.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/26/5d1340db1bcf875439.jpg" width=40%></a>

```
login_Struts1（プロジェクト名）

LoginAction.java（ログインActionクラス）

User.java （JavaBean）

DBUtil.java　      （データベース接続）
LoginDao.java　 （データベースアクセス）

struts.xml(actionとresultの定義)

## **5.Struts 2本体のコピーとweb.xmlの設定**

**（１）** WebContent/WEB-INF/libに下記のjarファイルを導入します。

<a href="https://i.loli.net/2019/06/26/5d130f209712957405.png" target="_blank">
<img src="https://i.loli.net/2019/06/26/5d130f209712957405.png" width=40%></a>

<br>

**（２）** WebContent/WEB-INF/web.xmlを設定します。

```
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	id="WebApp_ID" version="3.1">
	<display-name>login_Struts1</display-name>
	<welcome-file-list>
		<welcome-file>/jsp/login.jsp</welcome-file>
	</welcome-file-list>
	
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>
```
<br><br>

## **6.jspフォルダの作成**

WebContentの配下「jsp」というフォルダを作って、「login.jsp」と「success.jsp」を追加します。

**・login.jsp**
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員管理システム</title>
 
<script type="text/javascript">
	function eraseInfo(){
		document.getElementByName("accountId")[0].placeholder="";
		}
</script>
</head>
<body>
	<h1>社員管理システム</h1>
	<br><hr>
	<div align="center">
		<s:form action="login" method="POST" name="form" theme="simple">
			<table>
				<tr>
					<td><s:text name="ユーザーID"/></td>
				</tr>
				<tr>
					<td><s:textfield name="accountId" 
					placeholder="Emailアドレスを入力してください！"
					onkeydown="eraseInfo();"/></td>
				</tr>
				<tr><td></td></tr>
				<tr>
					<td><s:text name="パスワード" /></td>
				</tr>
				<tr>
					<td><s:password name="password" value="" maxlength="6"/></td>
				</tr>
			</table>
			<s:submit value="ログイン"></s:submit>
		</s:form>
	</div>
	<footer>
		<hr>
		<h4>Softusing.co.jp</h4>
	</footer>
</body>
</html>
```
<br>

####  **ログイン画面：**

<a href="https://i.loli.net/2019/06/27/5d147e5a585e618610.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d147e5a585e618610.jpg" width="40%" /></a>

**・success.jsp**
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登録ページ</title>
</head>
<body>
	${param.accountId}さん、よこそう。
</body>
</html>
```
<br>

####  **成功画面：**
例えば、ユーザIDに「111@softusing.com」、パスワードに「000001」を入力したら、下記の画面が表示されます。

<img src="https://i.loli.net/2019/06/27/5d14824e4be3a78720.jpg" width="40%">

## **7.ログイン機能**

**（１）ログインのシステム構造図**

<a href="https://i.loli.net/2019/06/27/5d145a342852087458.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d145a342852087458.jpg" width=40%></a>

**（２）「struts.xml」ファイル**

srcフォルダにstruts.xmlファイルを書きます。

```
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="login_Struts1" extends="struts-default">
	<action name="login" class="action.LoginAction" method="execute">
		<result name="error">/jsp/login.jsp</result>
		<result name="input">/jsp/login.jsp</result>
		<result name="success">/jsp/success.jsp</result>
	</action>
</package>
</struts>
```

**（３）「User.java」ファイル**

srcフォルダにaction、bean、dao、utilのPackage作って、beanの中に「User.java」クラスを作ります。

<img src="https://i.loli.net/2019/06/26/5d132e32ac5c473945.png" width="30%">

<br>

**・User.java**
```
package bean;

public class User {
	public String accountId;
	public String password;

public String getAccountId() {
		return accountId;
	}

public void setAccountId(String accountId) {
		this.accountId = accountId;
	}

public String getPassword() {
		return password;
	}

public void setPassword(String password) {
		this.password = password;
	}

}
```
<br>

**（４）「DBUtil.java」ファイル**

daoの中に「DBUtil.java」と「LoginDao.java」をつくります

<img src="https://i.loli.net/2019/06/26/5d13315f503a893990.jpg" width="30%">

<br>

**・DBUtil.java**

```
package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtil {
	public static Connection conn;
	public static PreparedStatement ps;
	public static ResultSet rs;

static {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			System.out.println("DBドライバのロード成功！");
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
	}

public static Connection getConnect() {
		String user = "root";
		String password = "root";
		String url = "jdbc:mysql://localhost:3306/companydata?serverTimezone=JST";
		try {
			if (conn == null) {
				conn = DriverManager.getConnection(url, user, password);
				System.out.println("DB接続成功！");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}

public static void disConnect(Connection conn) {
		try {
			if (rs != null) {
				rs.close();
			}
			if (ps != null) {
				ps.close();
			}
			if (conn != null) {
				conn.close();
				System.out.println("DB接続の切断成功！");
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}
```
<br><br>

**（５）「LoginDao.java」ファイル**

データベースからuserを取得するの機能です。
<br>

**・LoginDao.java** 
```
package dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import bean.User;

public class LoginDao {
	private Connection conn;
	private User user = new User();
	private PreparedStatement ps;
	private ResultSet rs;

public User getUser(String id) throws SQLException {

//dao.DBUtilからデータベースへの接続を得る
		conn = DBUtil.getConnect();

//SQLステートメント、オブジェクトの作成
		String sql = "select * from loginuser where accountId=?";
		ps = conn.prepareStatement(sql);
		ps.setString(1, id);

//結果の出力
		rs = ps.executeQuery();
		while (rs.next()) {
			user.setAccountId(rs.getString("accountId"));
			user.setPassword(rs.getString("password"));
			return user;
		}
		return null;
	}
}
```

**（６）「LoginAction.java」ファイル**

actionの中にLoginAction.javaをつくります
<br>

**・LoginAction.java** 
```
package action;

import java.sql.SQLException;
import java.util.Map;

import org.apache.struts2.interceptor.SessionAware;

import com.opensymphony.xwork2.ActionSupport;

import bean.User;
import service.LoginService;

public class LoginAction {
	private String accountId;
	private String password;
	private String errorMessage;
	
	public String getAccountId() {
		return accountId;
	}
	public void setAccountId(String accountId) {
		this.accountId = accountId;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}

public String getErrorMessage() {
		return errorMessage;
	}
	public void setErrorMessage(String errorMessage) {
		this.errorMessage = errorMessage;
	}

public String execute() {
		try {
			LoginDao loginDao = new LoginDao();
			User user =loginDao.getUser(accountId);
			if(user==null) {
				return showMessage("ユーザIDは存在しないので、管理者へ連絡してください！");
			}else if(!password.equals(user.getPassword())) {
				return showMessage("パスワードは不正です！");
			}else {
				return "success";
			}
		}catch(SQLException e) {
			return showExceptionMessage("DBの例外が発生しました、管理者へ連絡してください！");
		}
	}

public String showMessage(String errorMessage) {
		this.errorMessage=errorMessage;
		return "error";
	}

public String showExceptionMessage(String errorMessage) {
		this.errorMessage=errorMessage;
		return "error";
	}
}
``` 
<br><br>

**（７）login.jspに赤枠内のコードを追加します**
```
	<div style="color:red">
		<s:property value="errorMessage"/>
	</div>
```

<a href="https://i.loli.net/2019/06/27/5d14813f994ad92220.png" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d14813f994ad92220.png" width=40%></a>

## **8.実行結果**

**（１）** 入力したユーザIDはデータベースのIDに合ってない場合は：

<a href="https://i.loli.net/2019/06/27/5d148437d525413407.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d148437d525413407.jpg" width=40%></a>
<br>

**（２）** 入力したユーザIDはデータベースのIDに合っても、パスワードは合っていない場合は：

<a href="https://i.loli.net/2019/06/27/5d148437e3d5e33642.jpg" target="_blank">
<img src="https://i.loli.net/2019/06/27/5d148437e3d5e33642.jpg" width=40%></a>
<br>

**（３）** 入力したユーザIDもパスワードも合っている場所は：

<img src="https://i.loli.net/2019/06/27/5d14824e4be3a78720.jpg" width=40%>
<br>
以上、ログイン機能を完成しました。

content

第３章 Struts2のログイン機能の実装

第３章　Struts2のログイン機能の実装