2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

基礎Webアプリケーション作成 Servlet/JSP(ログイン機能)

Posted at

#はじめに
ServletとJSPで掲示板のような投稿ができるようなWEBアプリケーションを作成します。
まずはJDBC,DB,Mysqlは使用せずに作成していきます。

##実行環境

  • Eclipse4.16
  • Tomcat9
  • Java11

#機能について
今回実装する機能について考えます。
掲示板のようなアプリを作成するので以下のような機能を作成します。

  • 1.ログイン機能
  • 2.ログアウト機能
  • 3.投稿機能
  • 4.投稿閲覧機能

今回はSevletとJSPを使用してWebアプリケーションの作成に慣れることを目標にするため簡単な構成にします。

#ログイン機能作成
この記事ではログイン機能を作成します。

##1. ユーザーのModel作成
ログイン機能にはユーザーが必要なのでユーザーモデルを作成します。
作成するユーザーモデルは名前とパスワードの二つの情報を持っていることとします。

User.java
package model;

import java.io.Serializable;

public class User implements Serializable {

	private String name;
	private String password;

        public User() {}

	public User(String name,String password) {
		this.name = name;
		this.password = password;
	}

	public String getName(){     // 1. ユーザー名取得
		return this.name;
	}

	public String getPassword(){   // 2. パスワード取得
		return this.password;
	}
}

メンバ変数name(ユーザー名)とpassword(パスワード)は他クラスから参照できないようにアクセス修飾子はprivateにします。
またコンストラクタでセットした値を取得するための1と2のメソッドを作成します。

##2.トップページのView作成
モデルは作成したのでユーザーがログインするためのビューをJSPで作成します。
まずは簡単なビューを作成します。

top-page.jsp
<form action="./login" method="post">
  <div>
    <label>ユーザー名</label>
    <input type="text" name="userName">
  </div>
  <div>
    <label>パスワード</label>
    <input type="text" name="userPassword">
  </div>
  <div>
    <input type="submit" value="登録">
  </div>
</form>

##3.ログインに関する処理を行うModel作成

LoginProcess.java
package model;

public class LoginProcess {
	public boolean execute(User user) {
		if (user.getPassword().equals("hoge")) {
			return true;
		}
		return false;
	}
}

登録実行されたパスワードがhogeだった場合trueを返すログイン処理。

##4.ログインに関するリクエストを処理するコントローラー作成

login.java
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");  // 1
		String name = request.getParameter("userName");
		String password = request.getParameter("userPassword");
		User user = new User(name,password);  // 2

		LoginProcess loginProcess = new LoginProcess();
		boolean isLogin = loginProcess.isLogin(user);  // 3

		if(isLogin) {
			request.getSession().setAttribute("loginUser",user);  // 4
		}

		request.getRequestDispatcher("/WEB-INF/view/login-result.jsp").forward(request, response);  // 5
	}

  1. リクエストパラメータを取得
  2. 取得したパラメータをUserクラスのnameとpasswordをセットする
  3. パスワードが正しいかの処理をし真偽値を初期化
  4. セッションスコープにUserクラスの情報をセット
  5. ログイン結果を表すビューlogin-result.jspにフォワード

##5.ログイン結果を表すビューの作成
セッションスコープで指定したloginUserをもとにjspを作成します。
※今回はJSTLを使用します。

login-result.jsp
<c:choose>
  <c:when test="${loginUser != null}">  // 1
    <p>ログインが完了しました。</p>
    <p>こんにちは!<c:out value="${loginUser.name}"/>さん</p> //2
  </c:when>
  <c:otherwise>  // 3
    <p>ログインに失敗しました。</p>
    <p>もう一度ログインをやり直してください。</p>
    <a href="./login">ユーザーログイン</a>  //4
  </c:otherwise>
</c:choose>
  1. loginUserがnullではない場合(パスワードの入力値が"hoge"である場合)
  2. loginUser.nameでUserクラスのnameを出力
  3. 1以外の条件の場合
  4. ユーザー登録画面のリンク

##6.実行
ユーザーログイン画面でパスワードにhogeかそれ以外かを入力してログイン結果がしっかり表示されれが成功です。

#最後に
次回は投稿画面でのログインしているかしていないかの確認やしていない場合の処理について行います。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?