본문으로 바로가기

[JSP개발] 회원가입 - 로그인, 로그아웃 구현

category 코딩/JSP 2016. 11. 23. 16:31







1. 개요





 지난 포스팅 : [JSP개발] 회원가입 DB연동



DB 연동으로 회원가입 구현후 로그인, 로그아웃 기능을 구현할 것이다. 지난 포스팅에 이어서 추가된 사항은 아래와 같다.



■ JSP

  • LoginForm.jsp : 로그인 화면

  • LoginPro.jsp : 로그인 화면에서 입력한 아이디와 비밀번호를 가지고 로그인 처리

  • LogoutPro.jsp : 로그아웃 처리

  • MainForm.jsp : 메인화면, 최초 실행시 로그인 화면으로 이동한다. 로그인 성공시 메인화면이 나타난다.


■ img

  • 이미지를 모아두는 폴더




2. 소스코드



아래의 소스는 지난 포스팅과 동일하다.

  • MemberBean.java

  • DBConnection.java

  • join_style.css



■ JoinForm.jsp 


취소 버튼을 클릭 시 로그인 화면으로 이동하도록 하였다.


  • 140 줄

취소 버튼에 onclick 이벤트를 주어 클릭 시 goLoginForm( ) 함수가 실행된다.


  • 33 ~ 35 줄

취소 버튼 클릭 시 location.href에 의해 LoginForm.jsp로 이동된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<html>
<head>
    <title>회원가입 화면</title>
    
    <!-- css 파일 분리 -->
    <link href='../../css/join_style.css' rel='stylesheet' style='text/css'/>
 
    <script type="text/javascript">
    
        // 필수 입력정보인 아이디, 비밀번호가 입력되었는지 확인하는 함수
        function checkValue()
        {
            if(!document.userInfo.id.value){
                alert("아이디를 입력하세요.");
                return false;
            }
            
            if(!document.userInfo.password.value){
                alert("비밀번호를 입력하세요.");
                return false;
            }
            
            // 비밀번호와 비밀번호 확인에 입력된 값이 동일한지 확인
            if(document.userInfo.password.value != document.userInfo.passwordcheck.value ){
                alert("비밀번호를 동일하게 입력하세요.");
                return false;
            }
        }
        
        // 취소 버튼 클릭시 로그인 화면으로 이동
        function goLoginForm() {
            location.href="LoginForm.jsp";
        }
    </script>
    
</head>
<body>
    <!-- div 왼쪽, 오른쪽 바깥여백을 auto로 주면 중앙정렬된다.  -->
    <div id="wrap">
        <br><br>
        <b><font size="6" color="gray">회원가입</font></b>
        <br><br><br>
        
        
        <!-- 입력한 값을 전송하기 위해 form 태그를 사용한다 -->
        <!-- 값(파라미터) 전송은 POST 방식, 전송할 페이지는 JoinPro.jsp -->
        <form method="post" action="../pro/JoinPro.jsp" name="userInfo" 
                onsubmit="return checkValue()">
            <table>
                <tr>
                    <td id="title">아이디</td>
                    <td>
                        <input type="text" name="id" maxlength="50">
                        <input type="button" value="중복확인" >    
                    </td>
                </tr>
                        
                <tr>
                    <td id="title">비밀번호</td>
                    <td>
                        <input type="password" name="password" maxlength="50">
                    </td>
                </tr>
                
                <tr>
                    <td id="title">비밀번호 확인</td>
                    <td>
                        <input type="password" name="passwordcheck" maxlength="50">
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">이름</td>
                    <td>
                        <input type="text" name="name" maxlength="50">
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">성별</td>
                    <td>
                        <input type="radio" name="gender" value="남" checked>남
                        <input type="radio" name="gender" value="여" checked>여
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">생일</td>
                    <td>
                        <input type="text" name="birthyy" maxlength="4" placeholder="년(4자)" size="6" >
                        <select name="birthmm">
                            <option value="">월</option>
                            <option value="01" >1</option>
                            <option value="02" >2</option>
                            <option value="03" >3</option>
                            <option value="04" >4</option>
                            <option value="05" >5</option>
                            <option value="06" >6</option>
                            <option value="07" >7</option>
                            <option value="08" >8</option>
                            <option value="09" >9</option>
                            <option value="10" >10</option>
                            <option value="11" >11</option>
                            <option value="12" >12</option>
                        </select>
                        <input type="text" name="birthdd" maxlength="2" placeholder="일" size="4" >
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">이메일</td>
                    <td>
                        <input type="text" name="mail1" maxlength="50">@
                        <select name="mail2">
                            <option>naver.com</option>
                            <option>daum.net</option>
                            <option>gmail.com</option>
                            <option>nate.com</option>                        
                        </select>
                    </td>
                </tr>
                    
                <tr>
                    <td id="title">휴대전화</td>
                    <td>
                        <input type="text" name="phone" />
                    </td>
                </tr>
                <tr>
                    <td id="title">주소</td>
                    <td>
                        <input type="text" size="50" name="address"/>
                    </td>
                </tr>
            </table>
            <br>
            <input type="submit" value="가입"/>  
            <input type="button" value="취소" onclick="goLoginForm()">
        </form>
    </div>
</body>
</html>
cs



■ MemberDAO.java


로그인할 때 아이디와 비밀번호를 확인하는 메서드를 추가하였다.


  • 105 ~ 149 줄

아이디, 비밀번호 체크 메서드로 로그인 성공시 1을, 비밀번호를 잘못 입력했을 시 0을, 아이디를 잘못 입력했을 시 -1을 반환한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
package jsp.member.model;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Date;
 
import javax.naming.NamingException;
 
import jsp.util.DBConnection;
 
 
/* Data Access Object
 * 테이블 당 한개의 DAO를 작성한다.
 * 
 * JSP_MEMBER 테이블과 연관된 DAO로
 * 회원 데이터를 처리하는 클래스이다.
 */
public class MemberDAO 
{
    private static MemberDAO instance;
    
    // 싱글톤 패턴
    private MemberDAO(){}
    public static MemberDAO getInstance(){
        if(instance==null)
            instance=new MemberDAO();
        return instance;
    }
    
    // String -> Date로 변경하는 메서드
    // 문자열로된 생년월일을 Date로 변경하기 위해 필요
    // java.util.Date클래스로는 오라클의 Date형식과 연동할 수 없다.
    // Oracle의 date형식과 연동되는 java의 Date는 java.sql.Date 클래스이다.
    public Date stringToDate(MemberBean member)
    {
        String year = member.getBirthyy();
        String month = member.getBirthmm();
        String day = member.getBirthdd();
        
        Date birthday = Date.valueOf(year+"-"+month+"-"+day);
        
        return birthday;
        
    } // end stringToDate()
    
    // 회원정보를 JSP_MEMBER 테이블에 저장하는 메서드
    public void insertMember(MemberBean member) throws SQLException
    {
        Connection conn = null;
        PreparedStatement pstmt = null;
        
        try {
            // 커넥션을 가져온다.
            conn = DBConnection.getConnection();
            
            // 자동 커밋을 false로 한다.
            conn.setAutoCommit(false);
            
            // 쿼리 생성한다.
            // 가입일의 경우 자동으로 세팅되게 하기 위해 sysdate를 사용
            StringBuffer sql = new StringBuffer();
            sql.append("insert into JSP_MEMBER values");
            sql.append("(?, ?, ?, ?, ?, ?, ?, ?, sysdate)");        
            stringToDate(member);
            /* 
             * StringBuffer에 담긴 값을 얻으려면 toString()메서드를
             * 이용해야 한다.
             */
            pstmt = conn.prepareStatement(sql.toString());
            pstmt.setString(1, member.getId());
            pstmt.setString(2, member.getPassword());
            pstmt.setString(3, member.getName());
            pstmt.setString(4, member.getGender());
            pstmt.setDate(5, stringToDate(member));
            pstmt.setString(6, member.getMail1()+"@"+member.getMail2());
            pstmt.setString(7, member.getPhone());
            pstmt.setString(8, member.getAddress());
            
            // 쿼리 실행
            pstmt.executeUpdate();
            // 완료시 커밋
            conn.commit(); 
            
        } catch (ClassNotFoundException | NamingException | SQLException sqle) {
            // 오류시 롤백
            conn.rollback(); 
            
            throw new RuntimeException(sqle.getMessage());
        } finally {
            // Connection, PreparedStatement를 닫는다.
            try{
                if ( pstmt != null ){ pstmt.close(); pstmt=null; }
                if ( conn != null ){ conn.close(); conn=null;    }
            }catch(Exception e){
                throw new RuntimeException(e.getMessage());
            }
        } // end try~catch 
    } // end insertMember()
    
    
    // 로그인시 아이디, 비밀번호 체크 메서드
    // 아이디, 비밀번호를 인자로 받는다.
    public int loginCheck(String id, String pw) 
    {
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
 
        String dbPW = ""// db에서 꺼낸 비밀번호를 담을 변수
        int x = -1;
 
        try {
            // 쿼리 - 먼저 입력된 아이디로 DB에서 비밀번호를 조회한다.
            StringBuffer query = new StringBuffer();
            query.append("SELECT PASSWORD FROM JSP_MEMBER WHERE ID=?");
 
            conn = DBConnection.getConnection();
            pstmt = conn.prepareStatement(query.toString());
            pstmt.setString(1, id);
            rs = pstmt.executeQuery();
 
            if (rs.next()) // 입려된 아이디에 해당하는 비번 있을경우
            {
                dbPW = rs.getString("password"); // 비번을 변수에 넣는다.
 
                if (dbPW.equals(pw)) 
                    x = 1// 넘겨받은 비번과 꺼내온 배번 비교. 같으면 인증성공
                else                  
                    x = 0// DB의 비밀번호와 입력받은 비밀번호 다름, 인증실패
                
            } else {
                x = -1// 해당 아이디가 없을 경우
            }
 
            return x;
 
        } catch (Exception sqle) {
            throw new RuntimeException(sqle.getMessage());
        } finally {
            try{
                if ( pstmt != null ){ pstmt.close(); pstmt=null; }
                if ( conn != null ){ conn.close(); conn=null;    }
            }catch(Exception e){
                throw new RuntimeException(e.getMessage());
            }
        }
    } // end loginCheck()
    
    
}
 
 
cs



■ LoginForm.jsp


  • 16 ~ 31 줄

로그인 화면에서 아이디, 비밀번호를 입력하지 않았을 경우 경고 창을 띄운다.


  • 34 ~ 36 줄

로그인 화면에 있는 회원가입 버튼 클릭 시 회원가입 화면으로 이동시키는 함수이다.


  • 46 줄

img 폴더의 이미지를 불러와서 사용한다.


  • 67 ~ 78 줄

입력한 아이디 또는 비밀번호가 잘못되었을 경우 메시지를 표시하는 부분이다. 아이디나 비밀번호를 입력 후 로그인 버튼을 누르면 LoginPro.jsp에서 그 값을 체크한다. 


아이디나 비밀번호가 잘못되었을 경우 LoginForm.jsp으로 이동되며 특정 값을 파라미터로 넘긴다. 이때 LoginForm.jsp에서는 전달된 파라미터 값을 가지고 아이디나 비밀번호가 잘못되었다는 것을 화면에 표시한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<html>
<head>
    <%
        // 인코딩 처리
        request.setCharacterEncoding("euc-kr"); 
    %>
    <title>로그인 화면</title>
    
    <!-- css 파일 분리 -->
    <link href='../../css/join_style.css' rel='stylesheet' style='text/css'/>
    
    <script type="text/javascript">
    
        function checkValue()
        {
            inputForm = eval("document.loginInfo");
            if(!inputForm.id.value)
            {
                alert("아이디를 입력하세요");    
                inputForm.id.focus();
                return false;
            }
            if(!inputForm.password.value)
            {
                alert("비밀번호를 입력하세요");    
                inputForm.password.focus();
                return false;
            }
        }
    
        // 회원가입 버튼 클릭시 회원가입 화면으로 이동
        function goJoinForm() {
            location.href="JoinForm.jsp";
        }    
    </script>
 
</head>
<body>
    <div id="wrap">
        <form name="loginInfo" method="post" action="../pro/LoginPro.jsp" 
                onsubmit="return checkValue()">
        
            <!-- 이미지 추가 -->
            <img src="../../img/welcome.jpg">
            <br><br>
            
            <table>
                <tr>
                    <td bgcolor="skyblue">아이디</td>
                    <td><input type="text" name="id" maxlength="50"></td>
                </tr>
                <tr>
                    <td bgcolor="skyblue">비밀번호</td>
                    <td><input type="password" name="password" maxlength="50"></td>
                </tr>
            </table>
            <br>
            <input type="submit" value="로그인"/>
            <input type="button" value="회원가입" onclick="goJoinForm()" />
        </form>
        
        <% 
            // 아이디, 비밀번호가 틀릴경우 화면에 메시지 표시
            // LoginPro.jsp에서 로그인 처리 결과에 따른 메시지를 보낸다.
            String msg=request.getParameter("msg");
            
            if(msg!=null && msg.equals("0")) 
            {
                out.println("<br>");
                out.println("<font color='red' size='5'>비밀번호를 확인해 주세요.</font>");
            }
            else if(msg!=null && msg.equals("-1"))
            {    
                out.println("<br>");
                out.println("<font color='red' size='5'>아이디를 확인해 주세요.</font>");
            }
        %>    
    </div>    
</body>
</html>
cs



■ LoginPro.jsp


  • 14 ~ 15 줄

LoginForm.jsp 에서 입력한 아이디와 비밀번호를 추출한다.


  • 18 ~ 19 줄

아이디와 비밀번호를 MemberDAO에 전달한다. MemberDAO에서는 일치 여부를 확인하여 특정 값을 반환한다.


  • 24 ~ 37 줄

MemberDAO에서 넘겨받은 값을 가지고 로그인 처리를 한다. 로그인이 성공하였을 경우 아이디를 session에 담고 이동할 페이지를 MainForm.jsp로 지정한다.


비밀번호가 잘못되었을 경우 LoginForm.jsp으로 이동되게 하며, 0 값을 전달한다. 아이디가 잘못되었을 경우 LoginForm.jsp으로 이동되게 하며, -1 값을 전달한다.


  • 41 줄

지정된 경로로 페이지가 이동되게 한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="jsp.member.model.MemberDAO" %>
<html>
<head>
    <title>로그인 처리 JSP</title>
</head>
<body>
    <%
        // 인코딩 처리
        request.setCharacterEncoding("euc-kr"); 
        
        // 로그인 화면에 입력된 아이디와 비밀번호를 가져온다
        String id= request.getParameter("id");
        String pw = request.getParameter("password");
        
        // DB에서 아이디, 비밀번호 확인
        MemberDAO dao = MemberDAO.getInstance();
        int check = dao.loginCheck(id, pw);
        
        // URL 및 로그인관련 전달 메시지
        String msg = "";
        
        if(check == 1)    // 로그인 성공
        { 
            // 세션에 현재 아이디 세팅
            session.setAttribute("sessionID", id);
            msg = "../../MainForm.jsp";
        }
        else if(check == 0// 비밀번호가 틀릴경우
        {
            msg = "../view/LoginForm.jsp?msg=0";
        }
        else    // 아이디가 틀릴경우
        {
            msg = "../view/LoginForm.jsp?msg=-1";
        }
         
        // sendRedirect(String URL) : 해당 URL로 이동
        // URL뒤에 get방식 처럼 데이터를 전달가능
        response.sendRedirect(msg);
    %>
</body>
</html>
cs



■ MainForm.jsp


  • 11 ~ 13줄

로그아웃 버튼 클릭 시 실행되는 부분이다. location.href에 의해 LogoutPro.jsp로 이동된다.


  • 19 ~ 23 줄

최초로 MainForm.jsp 실행시 로그인 되어있지 않다. (session에 아이디 값이 없음) 로그인이 안 되어 있을 때 LoginForm.jsp로 이동시킨다.


  • 24 ~ 36 줄

로그인했을 경우 이 부분이 실행된다. session에 있는 아이디를 가져와 화면에 표시한다. 그리고 로그아웃 버튼을 클릭 시 LogoutPro.jsp가 실행된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
 
<html>
<head>
    <title>메인 화면</title>
    
    <script type="text/javascript">
        
        // 로그아웃 담당 JSP로 이동
        function logoutPro(){
            location.href="member/pro/LogoutPro.jsp";
        }
    </script>
</head>
<body>
    <b><font size="5" color="skyblue">메인화면입니다.</font></b><br><br>
    <%
        if(session.getAttribute("sessionID"== null// 로그인이 안되었을 때
        { 
            // 로그인 화면으로 이동
            response.sendRedirect("member/view/LoginForm.jsp");
        }
        else // 로그인 했을 경우
        {
    %>
    
    <h2>
        <font color="red"><%=session.getAttribute("sessionID"%></font>
        님 로그인되었습니다.
    </h2>
    
    <br><br>
    <input type="button" value="로그아웃" onclick="logoutPro()" />
    
    <%%>    
</body>
</html>
cs



■ LogoutPro.jsp


  • 9 ~ 12줄

로그아웃 처리를 하기 위해 우선 session을 비우는 작업을 한다. invalidate( )를 사용해 세션에 담긴 모든 정보를 삭제시킨다. 그리고 LoginForm.jsp으로 이동시킨다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
 
<html>
<head>
    <title>로그아웃 처리</title>
</head>
<body>
    <%
        session.invalidate(); // 모든세션정보 삭제
        response.sendRedirect("../view/LoginForm.jsp"); // 로그인 화면으로 다시 돌아간다.
    %>
</body>
</html>
cs




3. 실행결과



■ LoginForm.jsp



로그인 화면이다. 아이디와 비밀번호를 입력하지 않고 로그인 버튼을 클릭할 경우 경고 창이 나타난다.



잘못된 아이디를 입력할 경우 경고 메시지가 표시된다.



잘못된 비밀번호를 입력할 경우 경고 메시지가 표시된다.



■ MainForm.jsp



로그인에 성공할 경우 메인화면이다. 로그아웃 버튼 클릭 시 로그인 화면으로 돌아간다.




4. 소스코드 다운로드 (war파일)


JSP_DEV.war


필요한 라이브러리(jar파일) 포함



RSS구독 링크추가 트위터 이메일 구독