Java Java Todo Webアプリ開発

【JavaでTodoアプリ】ログイン機能の追加

uhablog

こんにちは、大学時代にプログラミングの勉強を始め現在はエンジニアをしているuhablogです。
当ブログでは現役エンジニアがプログラミング初学者の方向けにプログラミングの学習法を発信しています。

前回の記事

現在Java(サーブレット・jsp) x PostgreSQLを使ってTodoアプリを作成しています。現時点での機能は次のとおりです。

そして今回はログイン機能を追加していきます。

今回は以下のような流れで開発を進めていきます。

  1. PostgreSQLのtododbにusersテーブルを追加しユーザーを登録する
  2. データベースに接続するLoginDAOの作成
  3. DAOを呼び出してログイン認証を行うLoginServletの作成
  4. ログイン画面の作成

その他の機能はこちらにまとめています。

usersテーブルの作成

まずはPostgreSQLでuserstーブルの作成を行います。

すでにtododbを作成しているので、そこにusersテーブルを新しく追加していきます。

ターミナル等で以下のコマンドを使ってデータベースにログインします。先頭の$は入力しなくて大丈夫です。

$ psql -U yourUserName tododb

次に以下のコマンドでusersテーブルの作成を行います。

今回のusersテーブルはidとパスワードのみを持つシンプルなものにしました。

なお先頭の(tododb=>)はPostgreSQL内でコマンドを実行していることを表しているので、入力する必要はありません。

tododb=> create table users (id varchar(50) primary key, password varchar(50));

作成したテーブルにデータを追加してみます。

uha-blog, keisuke, ikezakiという3人のユーザーを追加しました。

tododb=> insert into users values ('uha-blog', 'uha-pass'), ('keisuke', 'professional'), ('ikezaki', 'justice');

追加したユーザーをSELECT文で取得してみます。

上手く追加されているようです。

tododb=> select * from users;
    id    |   password
----------+--------------
 uha-blog | uha-pass
 keisuke  | professional
 ikezaki  | justice
(3 rows)

LoginDAOの作成

LoginDAOではログイン認証を行うためのデータベース接続を行います。

LoginAuthenticateメソッドを作成します。

このメソッドではidとパスワードを引数として受け取り、それに一致する情報を持つユーザーの取得を行います。

ユーザーが存在する場合はidを返却します。

存在しない場合は空文字を返却します。

LoginDAOは以下のようになります。

package model.dao;

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

import model.DBConnection;

/**
 * ログイン認証を行うためにデータベースに接続するクラス
 *
 * @author yuhablog
 */
public class LoginDAO {

    /**
     * idとパスワードによるログイン認証を行う
     * @param id
     * @param password
     * @return 成功: id / 失敗: 空文字
     * @throws SQLException
     * @throws ClassNotFoundException
     */
    public String LoginAuthenticate(String id, String password) throws SQLException, ClassNotFoundException {
        // 返却用変数
        String resId = "";
        // SQL作成
        StringBuilder sql = new StringBuilder();
        sql.append(" SELECT ");
        sql.append("	id ");
        sql.append(" FROM ");
        sql.append("	users ");
        sql.append(" WHERE ");
        sql.append("	id = ? ");
        sql.append(" AND ");
        sql.append("	password = ? ");

        // DBに接続しユーザー情報を取得する
        try (Connection con = DBConnection.getConnection();
                PreparedStatement pstmt = con.prepareStatement(sql.toString())) {
            pstmt.setString(1, id);
            pstmt.setString(2, password);

            // SQLの実行
            ResultSet res = pstmt.executeQuery();

            // idとパスワードが一致するユーザーが存在した時の処理
            if(res.next()) {
                // 返却用変数にデータベースから取得したユーザーIDを設定する
                resId = res.getString("id");
            }
        }
        return resId;
    }
}

LoginServletの作成

次にリクエストを受け取り、LoginDAOを使ってログイン認証を行うLoginServletを作成します。

パッケージはsrc.servlet内に作成します。

LoginServletではdoGetメソッドとdoPostメソッドを作成します。

doGetメソッドの作成

まずはdoGetメソッドです。

こちらはログイン画面を表示するのみです。

login.jspは後ほど作成します。

/**
 * GETメソッドでリクエストを受け付けた時はログイン画面を表示する
 * login.jspを画面に表示
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.getRequestDispatcher("login.jsp").forward(request, response);
}

doPostメソッドの作成

次にdoPostメソッドです。

login.jspで入力されたidとパスワードを受け取り、ログイン認証を行います。

リクエストパラメータのidとパスワードを受け取り、LoginDAOのLoginAuthenticateメソッドを呼び出します。

LoginAuthenticateメソッドは認証に成功するとidを失敗すると空文字を返却するので、それを利用してログイン成功か失敗か判定します。

ログインに成功した場合はセッションにログインしたユーザーのidを保持させておきます。

また一覧画面に遷移します。失敗した場合はログイン画面に戻します。

/**
 * POSTメソッドでリクエストを受け付けた時はログイン認証を行う
 * 成功した時はTodo一覧画面に遷移
 * 失敗した時はログイン画面に戻す
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // リクエストからidとパスワードを取得する
    String id = request.getParameter(Parameters.LOGIN_ID);
    String password = request.getParameter(Parameters.LOGIN_PASSWORD);

    // ログインユーザーのid
    String loginId = "";

    LoginDAO dao = new LoginDAO();

    // データベースに接続し、ログイン認証を行う
    try {
        loginId = dao.LoginAuthenticate(id, password);
    } catch (SQLException | ClassNotFoundException e) {
        e.printStackTrace();
    }

    // 遷移先のパスを保持する
    String path = "";
    // loginIdが空文字かどうかでログインの成否を判定する
    if (loginId != "") {
        // セッションにログインIDを保持する
        HttpSession session = request.getSession();
        session.setAttribute(SessionInfo.LOGIN_USER_ID, loginId);
        path = "list-servlet";
    } else {
        path = "login.jsp";
    }

    // 設定されているパスに遷移する
    request.getRequestDispatcher(path).forward(request, response);
}

Parameters.javaの編集

LoginSerlvetを作成していく中で、パラメータのやりとりがあるので、パラメータ名をParameters.javaに追加します。

/**
 * ログイン時に使用するidのパラメータ名
 */
public static final String LOGIN_ID = "loginId";

/**
 * ログイン時に使用するパスワードのパラメータ名
 */
public static final String LOGIN_PASSWORD = "lodinPassword";

SessionInfoの設定

セッションにデータを設定したり、取得したりするときの文字列を定数として持たせます。

package constant;

/**
 * セッション情報の文字列を管理するためのクラス
 *
 * @author uhablog
 */
public class SessionInfo {

    /**
     * ログインユーザーのidを取得・設定する時に使用する定数
     */
    public static final String LOGIN_USER_ID = "loginUserId";
}

ログイン画面の作成

loginn.jspを作成します。簡単なフォームを設置します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="constant.Parameters" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- ログインフォーム。ユーザーIDとパスワードの入力を行う -->
<form action="LoginServlet" method="post">
    <input type="text" name="<%=Parameters.LOGIN_ID %>">
    <input type="password" name="<%=Parameters.LOGIN_PASSWORD %>">
    <input type="submit" value="ログイン">
</form>
</body>
</html>

動作確認

ここまできたら動作確認します。サーバーを立ち上げ、ログイン画面を表示します。

idとパスワードを入力して一覧画面に遷移したら成功です。

またusersテーブルに登録していないidもしくはパスワードを入力するとログイン画面に戻ってきます。

次の記事

プログラミング学習はUdemyがおすすめ

私はプログラミングの学習はUdemyで行うのが一番おすすめです。
Udemyでは動画講座でプログラミングなどのスキルを身につけることができます。
現役エンジニアがUdemyをオススメする理由は
・動画で好きなときに学べる
・一流の講師に学ぶことができる
・講師の方に質問ができる
・返金保証もある
・セールを頻繁に開催している
といったたくさんの理由があります。

現在Udemyではセールを開催しています!
通常時1万円から2万円前後の価格で講座が販売されていますが、セール時には1500円前後(ランチ代くらい)で一つの講座を購入することができます。
UdemyにはサーブレットでWebアプリ開発が学べる講座iconもあるので、JavaでWebアプリ開発する方法を学んでみたい!という方は今がチャンスです!

\\今ならセール開催中!//

Udemyでサーブレット&jspを学ぶ!!

返金保証付き

独学が不安な人へ

独学で学んでいく意志がある方にはUdemyなどで学習するのがおすすめですが、プログラミングを独学するにはそれなりにハードルがあります。

  • プログラミングで一度挫折した経験がある
  • 一人で学習する自信がないので、サポートが欲しい

という方にはプログラミングスクールを検討してみるのがおすすめです。

-Java, Java Todo Webアプリ開発
-, , , , ,