JSP게시판 만들기 [5] - 회원가입/로그인 화면 구성 및 기능 구현

728x90

이번 시간에는 회원가입/로그인 화면을 구성하고 로그인 기능을 구현해 보도록 하겠습니다.

1. 유저정보 데이터베이스 만들기

CREATE TABLE user (
userID varchar(20) not null,
userPassword varchar(20),
userName varchar(20),
userGender varchar(1),
userDate date,
primary key (userID)
);

Mysql command창에서 BBS 데이터 베이스에 접속 후 "user"라는 테이블을 만들어 줍니다.

user에는 회원가입에 필요한 정보들로 구성을 했습니다.

2. 회원가입 화면 구성

유저 정보관련 jsp파일은 "member"폴더에서 작업을 진행했습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="ko">

<head>
    <!--          meta 선언          -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--          link 선언          -->
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style_join.css">

    <!--          script 선언          -->
    <script src="https://kit.fontawesome.com/e1bd1cb2a5.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script src="../js/script.js"></script>

    <title>
        Jo's
    </title>
</head>

<body>
    <header>
        <div class="header_container">
            <div class="logo_container">
                <a href="../index.jsp">BLOG</a>
            </div>
            <div class="nav_container" id="nav_menu">
                <div class="menu_container">
                    <ul class="menu">
                        <li class="menu_1">
                            <a class="menu_title">메뉴 1</a>
                            <ul class="menu_1_content">
                                <li><a class="menu_index" href="#">메뉴 1 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 1 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 1 - 3</a></li>
                            </ul>
                        </li>
                        <li class="menu_2">
                            <a class="menu_title">메뉴 2</a>
                            <ul class="menu_2_content">
                                <li><a class="menu_index" href="#">메뉴 2 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 2 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 2 - 3</a></li>
                            </ul>
                        </li>
                        <li class="menu_3">
                            <a class="menu_title">메뉴 3</a>
                            <ul class="menu_3_content">
                                <li><a class="menu_index" href="#">메뉴 3 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 3 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 3 - 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="login_container">
                    <ul class="login">
                        <li class="menu_login"><a class="menu_title" href="./login.jsp">로그인</a></li>
                        <li class="menu_join"><a class="menu_title" href="./join.jsp">회원가입</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="join_container">
        <h2>
            회원 가입
        </h2>
        <form method="post" action="./join_Action.jsp">
            <h3>아이디</h3>
            <div class="joinID">
                <input type="text" class="input" style="ime-mode:disabled;" placeholder="아이디" name="userID" title="아이디" maxlength="20">
            </div>
            <h3>비밀번호</h3>
            <div class="joinPassword">
                <input type="password" class="input" placeholder="비밀번호" name="userPassword" title="비밀번호" maxlength="20">
            </div>
            <h3>이름</h3>
            <div class="joinName">
                <input type="text" class="input" placeholder="이름" name="userName" title="이름" maxlength="20">
            </div>
            <h3>생년월일</h3>
            <div class="joinDate">
                <input type="date" class="input" placeholder="생년월일" name="userDate">
            </div>
            <h3>성별</h3>
            <div class="joinGender">
                <input type="radio" name="userGender" value="M" title="성별"> 남자
                <input type="radio" name="userGender" value="F" title="성별"> 여자
            </div>
            <input type="submit" class="bt_join" value="회원가입">
        </form>
    </div>

    <footer>
        <div class="footer_container">
            <div class="footA">
                Jo's
            </div>
            <div class="footB">
                Copyright © Jo's All Rights Reserved.
            </div>
        </div>
    </footer>
</body>

</html>

join.jsp

@charset "UTF-8";

/* 기본 설정: 페이지 전체 */
* {
    margin: 0;
    padding: 0;
}

.join_container {
    display: block;
    margin: 50px auto;
    text-align: center;
}

.join_container h2 {
    font-size: 50px;
    margin-bottom: 50px;
}

.join_container h3 {
    font-size: 25px;
}

.joinID,
.joinPassword,
.joinName,
.joinDate,
.joinGender {
    margin-top: 20px;
    margin-bottom: 30px;
}

.input {
    padding: 5px;
    width: 300px;
    line-height: 30px;
    font-size: 20px;
    border: none;
    border-bottom: solid 1px rgba(0, 0, 0, 1);
}

.bt_join {
    font-size: 20px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border: solid 1px rgba(0, 0, 0, 1);
    cursor: pointer;
}

style_join.css

3. 로그인 화면 구성

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="ko">

<head>
    <!--          meta 선언          -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--          link 선언          -->
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style_login.css">

    <!--          script 선언          -->
    <script src="https://kit.fontawesome.com/e1bd1cb2a5.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <script src="../js/script.js"></script>

    <title>
        Jo's
    </title>
</head>

<body>
    <header>
        <div class="header_container">
            <div class="logo_container">
                <a href="../index.jsp">BLOG</a>
            </div>
            <div class="nav_container" id="nav_menu">
                <div class="menu_container">
                    <ul class="menu">
                        <li class="menu_1">
                            <a class="menu_title">메뉴 1</a>
                            <ul class="menu_1_content">
                                <li><a class="menu_index" href="#">메뉴 1 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 1 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 1 - 3</a></li>
                            </ul>
                        </li>
                        <li class="menu_2">
                            <a class="menu_title">메뉴 2</a>
                            <ul class="menu_2_content">
                                <li><a class="menu_index" href="#">메뉴 2 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 2 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 2 - 3</a></li>
                            </ul>
                        </li>
                        <li class="menu_3">
                            <a class="menu_title">메뉴 3</a>
                            <ul class="menu_3_content">
                                <li><a class="menu_index" href="#">메뉴 3 - 1</a></li>
                                <li><a class="menu_index" href="#">메뉴 3 - 2</a></li>
                                <li><a class="menu_index" href="#">메뉴 3 - 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="login_container">
                    <ul class="login">
                        <li class="menu_login"><a class="menu_title" href="./login.jsp">로그인</a></li>
                        <li class="menu_join"><a class="menu_title" href="./join.jsp">회원가입</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="login_containers">
        <h2>
            로그인
        </h2>
        <form method="post" action="./login_Action.jsp">
            <h3>아이디</h3>
            <div class="loginID">
                <input type="text" class="input" placeholder="아이디" name="userID" maxlength="20">
            </div>
            <h3>비밀번호</h3>
            <div class="loginPassword">
                <input type="password" class="input" placeholder="비밀번호" name="userPassword" maxlength="20">
            </div>
            <input type="submit" class="bt_login" value="로그인">
        </form>
    </div>

    <footer>
        <div class="footer_container">
            <div class="footA">
                Jo's
            </div>
            <div class="footB">
                Copyright © Jo's All Rights Reserved.
            </div>
        </div>
    </footer>
</body>

</html>

login.jsp

@charset "UTF-8";

/* 기본 설정: 페이지 전체 */
* {
    margin: 0;
    padding: 0;
}

.login_containers {
    display: block;
    margin: 100px auto;
    text-align: center;
}

.login_containers h2 {
    font-size: 50px;
    margin-bottom: 80px;
}

.login_containers h3 {
    font-size: 25px;
}

.loginID,
.loginPassword {
    margin-top: 20px;
    margin-bottom: 30px;
}

.input {
    padding: 5px;
    width: 300px;
    line-height: 30px;
    font-size: 20px;
    border: none;
    border-bottom: solid 1px rgba(0, 0, 0, 1);
}

.bt_login {
    font-size: 20px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border: solid 1px rgba(0, 0, 0, 1);
    cursor: pointer;
}

style_login.css

4. 데이터베이스 연동 클래스 작성

데이터베이스 접속에 앞써 데이터베이스에 접속할 수 있는 자바 패키지를 만들어 주어야 합니다.

java resources -> src -> 우클릭 -> new -> package를 순서로 클릭합니다.

이름을 user로 입력하고 Finish를 눌러 java 패키지를 만들어 줍니다.

이제 패키지에 클래스를 추가해 봅시다.

user -> 우클릭 -> new -> class 순으로 눌러줍니다.

클래스 이름을 "UserDAO.java"라 정해주고 Finish를 눌러 클래스를 만들어 줍니다.

package user;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;

public class UserDAO {
	private String userID;
	private String userPassword;
	private String userName;
	private String userGender;
	private String userDate;
	
	private Connection con;
	private ResultSet rs;
	
	public UserDAO() {
		try {
			String dbURL = "jdbc:mysql://localhost:3306/BBS?characterEncoding=UTF-8&serverTimezone=UTC";
			String dbID = "root";
			String dbPassword = "PASSWORD";
			Class.forName("com.mysql.jdbc.Driver");
			con = DriverManager.getConnection(dbURL, dbID, dbPassword);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	// 로그인
	/*
	 * -2: 아이디없음
	 * -1: 서버오류
	 * 0: 비밀번호 틀림
	 * 1: 성공
	 */
	public int login(String userID, String userPassword) {
		try {
			PreparedStatement pst = con.prepareStatement("SELECT userPassword FROM user WHERE userID = ?");
			pst.setString(1, userID);
			rs = pst.executeQuery();
			if (rs.next()) {
				return rs.getString(1).equals(userPassword) ? 1 : 0;
			} else {
				return -2;
			}
		} catch (Exception e) {
			e.printStackTrace();
			return -1;
		}
	}
	
	// 중복여부 확인
	public boolean ID_Check(String userID) {
		try {
			PreparedStatement pst = con.prepareStatement("SELECT * FROM user WHERE userID = ?");
			pst.setString(1, userID);
			rs = pst.executeQuery();
			if (rs.next()) {
				return false;
			} else {
				return true;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return false;
	}
	
	// 회원가입
	/*
	 * -1: 서버오류
	 * 0: 이미 존재하는 아이디
	 * 1: 성공
	 */
	public int join(UserDAO userDAO) {
		if(!ID_Check(userDAO.getUserID())) return 0;
		
		try {
			PreparedStatement pst = con.prepareStatement("INSERT INTO user VALUES (?,?,?,?,?)");
			pst.setString(1, userDAO.getUserID());
			pst.setString(2, userDAO.getUserPassword());
			pst.setString(3, userDAO.getUserName());
			pst.setString(4, userDAO.getUserGender());
			pst.setString(5, userDAO.getUserDate());
			return pst.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
			return -1;
		}
	}
	
	// 유저 데이터 가져오기
	public UserDAO getUser(String userID) {
		try {
			PreparedStatement pst = con.prepareStatement("SELECT * FROM user WHERE userID = ?");
			pst.setString(1, userID);
			rs = pst.executeQuery();
			if (rs.next()) {
				UserDAO userDAO = new UserDAO();
				userDAO.setUserID(rs.getString(1));
				userDAO.setUserPassword(rs.getString(2));
				userDAO.setUserName(rs.getString(3));
				userDAO.setUserGender(rs.getString(4));
				userDAO.setUserDate(rs.getString(5));
				return userDAO;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public String getUserID() {
		return userID;
	}
	public void setUserID(String userID) {
		this.userID = userID;
	}
	public String getUserPassword() {
		return userPassword;
	}
	public void setUserPassword(String userPassword) {
		this.userPassword = userPassword;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getUserGender() {
		return userGender;
	}
	public void setUserGender(String userGender) {
		this.userGender = userGender;
	}
	public String getUserDate() {
		return userDate;
	}
	public void setUserDate(String userDate) {
		this.userDate = userDate;
	}
}

UserDAO.java

private String userID;
private String userPassword;
private String userName;
private String userGender;
private String userDate;

데이터베이스 user테이블의 열과 같게 선언해주어야됩니다.

userID 같은 경우는 varchar(20)으로 만들어주었기 때문에 String형으로 선언을 해주어야 되며

만약 int로 만들어주면 int형으로 선언을 해주어야 됩니다.

public UserDAO() {
  try {
    String dbURL = "jdbc:mysql://localhost:3306/BBS?characterEncoding=UTF-8&serverTimezone=UTC";
    String dbID = "root";
    String dbPassword = "PASSWORD";
    Class.forName("com.mysql.jdbc.Driver");
    con = DriverManager.getConnection(dbURL, dbID, dbPassword);
  } catch (Exception e) {
  	e.printStackTrace();
  }
}

dbID는 제 블로그를 보면서 mysql을 설치하셨다면 "root"로 설정해주시면 됩니다.

dbPassword는 mysql 설치 시 입력했던 비밀번호를 입력해주시면 됩니다.

public int login(String userID, String userPassword) {
	try {
		PreparedStatement pst = con.prepareStatement("SELECT userPassword FROM user WHERE userID = ?");
		pst.setString(1, userID);
		rs = pst.executeQuery();
		if (rs.next()) {
			return rs.getString(1).equals(userPassword) ? 1 : 0;
		} else {
			return -2;
		}
	} catch (Exception e) {
		e.printStackTrace();
		return -1;
	}
}

아이디와 비밀번호를 이용하여 로그인을 하는 함수입니다.

1 : 로그인 성공

0 : 로그인 실패

-1 : 서버 오류

-2 : 아이디 없음

public boolean ID_Check(String userID) {
	try {
		PreparedStatement pst = con.prepareStatement("SELECT * FROM user WHERE userID = ?");
		pst.setString(1, userID);
		rs = pst.executeQuery();
		if (rs.next()) {
			return false;
		} else {
			return true;
		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	return false;
}

회원가입을 할 때 이미 아이디가 존재하는지 확인하는 함수입니다.

public int join(UserDAO userDAO) {
	if(!ID_Check(userDAO.getUserID())) return 0;
	
	try {
		PreparedStatement pst = con.prepareStatement("INSERT INTO user VALUES (?,?,?,?,?)");
		pst.setString(1, userDAO.getUserID());
		pst.setString(2, userDAO.getUserPassword());
		pst.setString(3, userDAO.getUserName());
		pst.setString(4, userDAO.getUserGender());
		pst.setString(5, userDAO.getUserDate());
		return pst.executeUpdate();
	} catch (Exception e) {
		e.printStackTrace();
		return -1;
	}
}

회원가입을 하는 함수입니다.

public UserDAO getUser(String userID) {
	try {
		PreparedStatement pst = con.prepareStatement("SELECT * FROM user WHERE userID = ?");
		pst.setString(1, userID);
		rs = pst.executeQuery();
		if (rs.next()) {
			UserDAO userDAO = new UserDAO();
			userDAO.setUserID(rs.getString(1));
			userDAO.setUserPassword(rs.getString(2));
			userDAO.setUserName(rs.getString(3));
			userDAO.setUserGender(rs.getString(4));
			userDAO.setUserDate(rs.getString(5));
			return userDAO;
		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}

유저의 정보를 얻을 수 있는 함수입니다.

5. 데이터베이스 연동

https://dev.mysql.com/downloads/connector/j/

MySQL :: Download Connector/J

MySQL Connector/J 8.0 is highly recommended for use with MySQL Server 8.0, 5.7, 5.6, and 5.5. Please upgrade to MySQL Connector/J 8.0.

dev.mysql.com

mysql에 접속을 하려면 jdbc driver를 다운을 받아야 합니다.

위 사이트에 접속하거나 구글에 "mysql jdbc driver"을 검색하면 접속할 수 있습니다.

Platform Independent로 설정을 해놓고 다운로드하여줍니다.

다운로드한 압축파일을 풀어주면 폴더 안에 "mysql-connector-java-8.0.16.jar" 파일이 있는데

이 파일을 WWW - WEB-INF - lib폴더 안에 복사하여 넣어줍니다.

프로젝트 -> 우클릭 -> properties를 눌러줍니다.

Java Bulid Path -> Libraries -> Add JARs.. 를 눌러줍니다.

이전에 복사했던 jar파일을 찾아줍니다.

jar파일이 추가가 되었으면 "Apply and Close"를 눌러줍니다.

6. 회원가입/로그인 Action파일 생성

이제 마지막으로 실질적으로 회원가입/로그인은 해주는 jsp파일을 생성해보겠습니다.

"join.jsp"나 "login.jsp"에서 "form"태그를 보면 각각 join_Action.jsp, login_Action.jsp로 데이터가 전송되는 것을 볼 수 있습니다.

6-1. join_Action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>

<!DOCTYPE html>

<html lang="ko">
    <head>
        <meta charset="UTF-8">
        
        <title>
            Jo's
        </title>
    </head>
    
    <body>
        <%
        String userID		= request.getParameter("userID");
        String userPassword = request.getParameter("userPassword");
        String userName		= request.getParameter("userName");
        String userGender	= request.getParameter("userGender");
        String userDate		= request.getParameter("userDate");
        
     	// -1: 서버 오류 / 0: 이미존재하는 아이디 / 1: 성공
        if(userID == null || userPassword == null || userName == null 
        || userGender == null || userDate == null) {
        	PrintWriter script = response.getWriter();
        	script.println("<script>");
        	script.println("alert('빈칸을 확인해 주세요')");
        	script.println("history.back()");
        	script.println("</script>");
        } else {
        	UserDAO userDAO = new UserDAO();
        	
        	userDAO.setUserID(userID);
        	userDAO.setUserPassword(userPassword);
        	userDAO.setUserName(userName);
        	userDAO.setUserGender(userGender);
        	userDAO.setUserDate(userDate);
        	
            int result = userDAO.join(userDAO);
            	
            if(result == -1) {
            	PrintWriter script = response.getWriter();
            	script.println("<script>");
            	script.println("alert('서버오류')");
            	script.println("history.back()");
            	script.println("</script>");
            } else if(result == 0) {
            	PrintWriter script = response.getWriter();
            	script.println("<script>");
            	script.println("alert('이미 아이디가 존재합니다.')");
            	script.println("history.back()");
            	script.println("</script>");
            } else {
            	PrintWriter script = response.getWriter();
            	script.println("<script>");
            	script.println("alert('회원가입을 축하드립니다.')");
            	script.println("location.href = '../index.jsp'");
            	script.println("</script>");
            }
        }
        %>
    </body>
    
</html>

join_Action.jsp

String userID		= request.getParameter("userID");
String userPassword = request.getParameter("userPassword");
String userName		= request.getParameter("userName");
String userGender	= request.getParameter("userGender");
String userDate		= request.getParameter("userDate");

form태그로 전송한 값을 받아옵니다.

if(userID == null || userPassword == null || userName == null 
        || userGender == null || userDate == null) {
        PrintWriter script = response.getWriter();
        script.println("<script>");
        script.println("alert('빈칸을 확인해 주세요')");
        script.println("history.back()");
        script.println("</script>");
}

전송받을 값 중 빈칸이 있는지 확인하는 과정입니다.

만약 스페이스처럼 빈칸을 필터링하고 싶으면 이 부분을 수정하시면 됩니다.

6-2. login_Action.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="user.UserDAO" %>
<%@ page import="java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8"); %>

<!DOCTYPE html>

<html lang="ko">
    <head>
        <meta charset="UTF-8">
        
        <title>
            Jo's
        </title>
    </head>
    
    <body>
        <%
        String userID		= request.getParameter("userID");
        String userPassword = request.getParameter("userPassword");
        
        UserDAO userDAO = new UserDAO();
        int result = userDAO.login(userID, userPassword);
        	
        if(result == 1) {
        	session.setAttribute("userID", userID);
        	PrintWriter script = response.getWriter();
        	script.println("<script>");
        	script.println("alert('로그인 성공')");
        	script.println("location.href = '../index.jsp'");
        	script.println("</script>");
        } else if(result == 0) {
        	PrintWriter script = response.getWriter();
        	script.println("<script>");
        	script.println("alert('비밀번호가 틀립니다.')");
        	script.println("history.back()");
        	script.println("</script>");
        } else if(result == -2) {
        	PrintWriter script = response.getWriter();
        	script.println("<script>");
        	script.println("alert('아이디를 확인해주세요.')");
        	script.println("location.href = './login.jsp'");
        	script.println("</script>");
        } else if(result == -1) {
        	PrintWriter script = response.getWriter();
        	script.println("<script>");
        	script.println("alert('서버 오류 입니다.')");
        	script.println("location.href = '../index.jsp'");
        	script.println("</script>");
        }
        %>
    </body>
    
</html>

login_Action.jsp

String userID		= request.getParameter("userID");
String userPassword = request.getParameter("userPassword");

form태그로 전송한 값을 받아옵니다.

if(result == 1) {
  session.setAttribute("userID", userID);
  PrintWriter script = response.getWriter();
  script.println("<script>");
  script.println("alert('로그인 성공')");
  script.println("location.href = '../index.jsp'");
  script.println("</script>");
}

로그인에 성공을 하면 session을 이용하여 로그인을 한 아이디를 넣어줍니다.

7. 로그인 테스트

회원가입 창에서 새로운 아이디를 등록을 하면 mysql command창에서 정상적으로 데이터베이스에 저장이 되었다는 것을 확인할 수 있습니다.

저작자표시 비영리

'프로젝트 > JSP 게시판 만들기' 카테고리의 다른 글

JSP게시판 만들기 [4] - mysql설치 및 테이블생성 (0)	2020.01.27
JSP게시판 만들기 [3] - 메인 페이지 구성 (0)	2020.01.17
JSP게시판 만들기 [2] - icon 및 폰트 사용법 (0)	2020.01.16
JSP게시판 만들기 [1] - 이클립스,JDK,TOMCAT 설치 (0)	2020.01.13