19.05.07 회원가입 및 로그인 페이지 만들기

Back-End/JSP 2019. 5. 7. 12:16
728x90
반응형



-소스 목록-


JSP

 * login.jsp (로그인 페이지)

 * loginProc.jsp (로그인 처리 페이지)

 * logout.jsp (로그아웃 처리 페이지)

 * member.jsp (회원가입 페이지)

 * memberProc.jsp (회원가입 처리 페이지)

 * idCheck.jsp (중복 아이디 체크 페이지)

 * zipSearch.jsp (우편번호 검색 페이지)

 기타

 * script.css (스타일 시트 파일)

 * script.js (자바스크립트 처리 파일)

 자바빈즈

 1. MemberBean.java (회원가입 및 자바빈즈)

 2. ZipcodeBean.java (우편번호 및 주소 자바빈즈)

 3. MemberMgr.java (회원 인증 및 가입과 우편번호 처리 자바 파일)

 4. DBConnectionMgr.java (데이터베이스 연결 connectionpool 자바 파일) (컴파일 순서 : 1->2->3->4)




  회원인증 및 가입의 기능


 * 회원가입 폼으로 회원의 정보를 회원테이블에 저장

 * 회원 가입 시 ID 중복 검사 기능이 있습니다.

 * 주민등록번호 인증 검사 기능이 있습니다.

 * 이메일 형식 확인 기능이 있습니다.

 * 우편번호 검색 후 자동으로 주소 저장 기능이 있습니다.

 * 회원인증 (로그인) 후 회원만의 제한적인 기능을 이용할 수 있습니다.


 

-예제 및 출력결과-

 

 

-회원 테이블 만들기-

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE tblMember(
id CHAR(20) NOT NULL,
pwd CHAR(20) NOT NULL,
name CHAR(20) NOT NULL,
gender CHAR(1) NOT NULL,
birthday CHAR(6) NOT NULL,
email CHAR(30) NOT NULL,
zipcode CHAR(5) NOT NULL,
address CHAR(50) NOT NULL,
hobby CHAR(5) NOT NULL,
job CHAR(20) NOT NULL,
PRIMARY KEY (id)
);
 cs

 

 

-우편번호 테이블 만들기-

 
 
 cs
1
2
3
4
5
6
CREATE TABLE tblZipcode (
zipcode CHAR(5) NOT NULL,
AREA1 CHAR(10) DEFAULT NULL,
AREA2 CHAR(20) DEFAULT NULL,
AREA3 CHAR(30) DEFAULT NULL)
ENGINE=InnoDB DEFAULT CHARSET=UTF8; #한글깨짐 방지 코드(문자셋 설정)
 cs

 


member.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
145
146
147
148
149
150
151
152
153
154
155
156
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>회원가입</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 회원가입 디자인 설정 -->
<!-- 자바 스크립트 문법을 사용하기 위해 타입설정 -->
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
    function idCheck(id) { //idCheck(id) 함수는 id중복확인 버튼을 클릭하면 호출되는 함수
        frm = document.regFrm; //버튼을 클릭했을 때 회원가입 폼에 아이디 값이 없으면 경고 메시지가 뜨지만 정상적으로 입력하면
        //ID 중복체크(idCheck.jsp)로 아이디 값과 함께 넘어간다.
        if (id == "") {
            alert("아이디를 입력해 주세요.");
            frm.id.focus();
            return;
        }
        url = "idCheck.jsp?id=" + id;
        window.open(url, "IDCheck", "width=300,height=150");
    }
 
    function zipCheck() //zipCheck()는 우편번호찾기 버튼을 클릭하면 호출되는 함수입니다. 버튼을 클릭하면 우편번호검색
    { //(zipSearch.jsp) 페이지의 새로운 창이 만들어지면서 y라는 check값을 가지고 넘어갑니다.
        url = "zipSearch.jsp?check=n";
        widow.open(url, "ZipCodeSearch", "width=500,height=300,scrollbars=yes");
    }
</script>
</head>
<body bgcolor="FFFFCC" onLoad="regFrm.id.focus()">
    <!-- 페이지 로딩 및 새로고침이 발생되면 포커스가 ID입력란으로 위치합니다. -->
    <div align="center">
        <br /> <br />
        <form name="regfrm" method="post" action="memberProc.jsp">
            <!--memberProc.jsp파일에 regfrm이라는 폼으로 post방식으로 값을 전달한다. -->
            <table align="center" border="0" cellspacing="0" cellpadding="5">
                <!-- cellspacing는 테이블의 외곽과 셸의 경계면의 두께를 설정, cellpadding는 셸과 내용의 사이를 지정하는 태그 -->
 
 
                <tr>
                    <td align="center" valign="middle" bgcolor="#FFFFCC">
                        <table border="1" cellspacing="0" cellpadding="2" align="center"
                            width="600">
                            <tr align="center" bgcolor="#996600">
                                <td colspan="3"><font color="#FFFFFF"><b>회원 가입</b></font></td>
                            </tr>
 
 
                            <tr>
                                <td width="20%">아이디</td>
                                <td width="50%"><input name="id" size="15"> <input
                                    type="button" value="ID중복확인"
                                    onClick="idCheck(this.form.id.value)"></td>
                                <!-- onClick로 입력한 아이디가 중복된 값인지 확인 -->
                                <td width="30%">아이디를 적어 주세요.</td>
                            </tr>
 
                            <tr>
                                <td>패스워드</td>
                                <td><input type="password" name="pwd" size="20"></td>
                                <td>패스워드를 적어주세요.</td>
                            </tr>
 
                            <tr>
                                <td>패스워드 확인</td>
                                <td><input type="password" name="repwd" size="20"></td>
                                <td>패스워드를 확인합니다.</td>
                            </tr>
 
                            <tr>
                                <td>이름</td>
                                <td><input name="name" size="15"></td>
                                <td>이름을 적어주세요.</td>
                            </tr>
 
                            <tr>
                                <td>성별</td>
                                <td>남<input type="radio" name="gender" value="1"
                                    checked="checked"> 여<input type="radio" name="gebder"
                                    value="2"></td>
                                <td>성별을 선택 하세요.</td>
                            </tr>
 
                            <tr>
                                <td>생년월일</td>
                                <td><input name="birthday" size="10"> ex)830815</td>
                                <td>생년월일을 적어 주세요.</td>
                            </tr>
 
                            <tr>
                                <td>Email</td>
                                <td><input name="email" size="30"></td>
                                <td>이메일을 적어 주세요.</td>
                            </tr>
 
                            <tr>
                                <td>우편번호</td>
                                <td><input name="zipcode" size="5" readonly> <input
                                    type="button" value="우편번호찾기" onClick="zipCheck()"> <!-- zipCheck()함수를 사용해 우편번호와 주소를 검색한다. -->
                                </td>
                                <td>우편번호를 검색하세요.</td>
                            </tr>
 
                            <tr>
                                <td>주소</td>
                                <td><input name="address" size="45"></td>
                                <td>주소를 적어 주세요.</td>
                            </tr>
 
                            <tr>
                                <td>취미</td>
                                <td>인터넷<input type="checkbox" name="hobby" value="인터넷">
                                    여행<input type="checkbox" name="hobby" value="여행"> 게임<input
                                    type="checkbox" name="hobby" value="게임"> 영화<input
                                    type="checkbox" name="hobby" value="영화"> 운동<input
                                    type="checkbox" name="hobby" value="운동"></td>
                                <td>취미를 선택 하세요.</td>
                            </tr>
 
 
                            <tr>
                                <td>직업</td>
                                <td><select name=job>
                                        <option value="0" selected>선택하세요.
                                        <option value="회사원">회사원
                                        <option value="연구전문직">연구전문직
                                        <option value="교수학생">교수학생
                                        <option value="일반자영업">일반자영업
                                        <option value="공무원">공무원
                                        <option value="의료인">의료인
                                        <option value="법조인">법조인
                                        <option value="종교,언론,예술인">종교/언론/예술인
                                        <option value="농,축,수산,광업인">농/축/수산/광업인
                                        <option value="주부">주부
                                        <option value="무직">무직
                                        <option value="기타">기타
                                </select></td>
                                <td>직업을 선택 하세요.</td>
                            </tr>
 
                            <tr>
                                <td colspan="3" align="center"><input type="button"
                                    value="회원가입" onclick="inputCheck()"> &nbsp; &nbsp; <input
                                    type="reset" value="다시쓰기"> &nbsp; &nbsp; <input
                                    type="button" value="로그인"
                                    onClick="javascript:location.href='login.jsp'"></td>
                            </tr>
 
                        </table>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
cs



memberProc.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
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%
    request.setCharacterEncoding("EUC-KR");
%>
<jsp:useBean id="mgr" class="ch14.MemberMgr" />
<!-- 회원가입을 위한 insertMember()메소드를 사용위해 객체 생성 -->
<jsp:useBean id="bean" class="ch14.MemberBean" />
<!-- 유즈빈을 사용하여 자바빈을 사용 -->
<jsp:setProperty property="*" name="bean" />
<!-- 자바빈 객체의 프로퍼티값 변경 -->
<%
    boolean result = mgr.insertMember(bean);
    String msg = "회원가입에 실패 하였습니다.";
    String location = "member.jsp";
    if (result) {
        msg = "회원가입을 하였습니다.";
        location = "login.jsp";
    }
%>
<script>
    alert("<%=msg%>");
    location.href = "<%=location%>
    ";
</script>
cs



script.js (자바스크립트 처리 파일)

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
function inputCheck() // 회원가입버튼을 누르면 호출되는 함수 입력하지 않은값이 있으면 경고창이 뜨고 정상적으로 입력하면
                        // 회원가입이 이루어진다.
{
    if (document.regFrm.id.value == "") {
        alert("아이디를 입력해 주세요.");
        document.regFrm.id.focus();
        return;
    }
 
    if (document.regFrm.pwd.value == "") {
        alert("비밀번호를 입력해 주세요.");
        document.regFrm.pwd.focus();
        return;
    }
 
    if (document.regFrm.pwd.value == "") {
        alert("비밀번호를 확인해 주세요.");
        document.regFrm.pwd.focus();
        return;
    }
 
    if (document.regFrm.pwd.value != document.regFrm.repwd.value) // 입력한 비밀번호와
                                                                    // 확인 비밀번호가
                                                                    // 맞지 않으면 경고
                                                                    // 메시지 출력
    {
        alert("비밀번호가 일치하지 않습니다.");
        document.regFrm.repwd.value = "";
        document.regFrm.id.focus();
        return;
    }
 
    if (document.regFrm.name.value == "") {
        alert("이름을 입력해 주세요");
        document.regFrm.name.focus();
        return;
    }
 
    if (document.regFrm.birthday.value == "") {
        alert("생년월일을 입력해주세요.");
        document.regFrm.birthday.focus();
        return;
    }
 
    if (document.regFrm.email.value == "") {
        alert("이메일을 입력해 주세요.");
        document.regFrm.email.focus();
        return;
    }
 
    var str = document.regFrm.email.value;
    var atPos = str.indexOf('@');
    var atLastPos = str.lastIndexOf('@');
    var dotPos = str.indexOf('.');
    var spacePos = str.indexOf('');
    var commaPos = str.indexOf(',');
    var eMailSize = str.length;
    if (atPos > 1 && atPos == atLastPos && dotPos > 3 && spacePos == -1
            && commaPos == -1 && atPos + 1 < dotPos && dotPos + 1 < eMailSize)
        ;
    else {
        alert('E-mail 주소 형식이 잘못되었습니다. /n/r 다시 입력해주세요!');
        document.regFrm.email.focus();
        return;
        // 이메일 형식을 검사하는 부분입니다.
    }
 
    if (document.regFrm.zipcode.value == "") {
        alert("우편번호를 검색해 주세요.");
        return;
    }
 
    if (document.regFrm.job.value == "") {
        alert("직업을 선택해 주세요");
        document.regFrm.job.focus();
        return;
    }
 
    document.regFrm.submit();
}
 
function win_close() {
    self.close();
}
 
cs



zipSearch.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
<%@page import="ch14.ZipcodeBean"%>
<%@page import="java.util.Vector"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
 
<%
    //우편번호 검색 페이지
    request.setCharacterEncoding("EUC-KR");//얻어온 파라미터값을 출력하기 위해 문자셋 설정
    String check = request.getParameter("search"); //검색결과를 얻어 check변수에 저장
    String area3 = null;
    Vector<ZipcodeBean> vlist = null;
    if (check.equals("y")) //체크한 값이 y(yes)와 같으면
    {
        area3 = request.getParameter("area3");
        vlist = mMgr.zipcodeRead(area3);
    }
%>
<html>
<head>
<title>우편번호 검색</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 디자인을 설정하기 위해 css파일을 불러옴 -->
<script type="text/javascript">
    function loadSearch() //loadSearch()함수는 입력된 도로명 값을 가지고 자신의 페이지 (zipSearch.jsp)를 호출합니다
    {
        frm = document.zipFrm;
        if (frm.area3.value == "")// area3(도로명 쓰는칸)에 아무값도 입력이 되지 않으면
        {
            alert("도로명을 입력하세요.");
            frm.area3.focus();
            return;
        }
        frm.action = "zipSearch.jsp";
        frm.submit();
 
    }
 
    function sendAdd(zipcode, adds) //sendAddress() 함수는 도로명으로 검색된 우편번호와 주소의 값들을 가지고 자신을 오픈 시킨 페이지(member.jsp)로 넘어가면서 창을 닫는 자바스크립트 함수.
    {
        opener.document.regFrm.zipcode.value = zipcode;
        opener.document.regFrm.address.value = adds;
        self.close();
 
    }
</script>
</head>
<body bgcolor="#FFFFCC">
    <div align="center">
        <br />
        <form name="zipFrm" method="post">
            <table>
                <tr>
                    <td><br />도로명 입력 : <input name="area3"> <input
                        type="button" value="검색" onclick="loadSearch();"> <!-- 도로명을 검색할수 있도록 검색 버튼 만듬 -->
                    </td>
                </tr>
                <!-- 검색결과 시작 -->
                <%
                    if (search.equals("y")) {
                        if (vlist.isEmpty()) {
                %>
                <tr>
                    <td align="center"><br />검색된 결과가 없습니다.</td>
                </tr>
 
                <%
                    } else {
                %>
                <tr>
                    <td aling="center"><br />검색 후, 아래 우편번호를 클릭하면 자동으로 입력됩니다.</td>
 
                </tr>
                <%
                    for (int i = 0; i < vlist.size(); i++) //for문을 사용해서 우편번호와 주소값을 ZipcodeBean타입으로 반환하고 있다. 
                                                                    //원래Vector의 반환타입은 오브젝트 타입이지만 Vector<ZipcodeBean>타입으로 
                                                                    //제네릭 선언을 해서 변환없이 바로 ZipcodeBean 타입으로 변환한다.
                            {
                                ZipcodeBean bean = vlist.get(i);
                                String rZipcode = bean.getZipcode();
                                String rArea1 = bean.getArea1();
                                String rArea2 = bean.getArea2();
                                String rArea3 = bean.getArea3();
                                String adds = rArea1 + " " + rArea2 + " " + rArea3 + " "; //우편번호와 주소값을 adds변수에 저장
                %>
                <tr>
                    <!-- 검색한 결과의 우편번호화 주소를 표현식으로 페이지에 출력하고 출력된 주소값을 자바 스크립트 함수 sendAdd() 함수를 호출하여 우편번호와
        주소를 member.jsp페이지의 우편번호란과 주소란에 자동으로 입력합니다. 입력된 후에는 zipSearch.jsp 페이지가 자동으로 닫힙니다.-->
                    <td><a href='#'
                        onclick="javascript:sendAdd('<%=rZipcode%>', '<%=adds%>')"> <%=rZipcode%>
                            <!-- 자바스크립트 함수의 매개변수의 표현식은 작은 따움표로 묶어야됨 --> <%=adds%></a></td>
                </tr>
                <%
                    } //for
 
                        } //if
 
                    } //if
                %>
                <!-- 검색결과 끝 -->
                <tr>
                    <td align="center"><br /> <a href="#" onClick="self.close()">닫기</a></td>
                </tr>
            </table>
            <input type="hidden" name="search" value="y">
        </form>
    </div>
</body>
</html>
cs



logout.jsp (로그아웃 처리 페이지)

1
2
3
4
5
6
7
8
<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<%
    session.invalidate();
%>
<script>
    alert('로그아웃 되었습니다.');
    location.href = "login.jsp";
</script>
cs



idCheck.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
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<jsp:useBean id="mMgr" class="ch14.MemberMgr" />
 
<%
    request.setCharacterEncoding("EUC-KR"); //한글이 깨지지 않도록 문자셋 지정
    String id = request.getParameter("id"); //id를 파라미터로 얻어와서 id변수에 넣는다.
    boolean result = mMgr.checkId(id); //아이디가 중복되었는지 체크하는 변수
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ID 중복체크</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 디자인을 설정하기위해 css파일을 불러온다. -->
</head>
<body bgcolor="#FFFFCC">
    <div align="center">
        <br /> <b><%=id%></b>
        <%
            if (result) //result가 참이면 중복된 아이디, 거짓이면 사용할 수 있는 아이디
            {
                out.println("는 이미 존재하는 ID입니다.<p/>");
            } else {
                out.println("는 사용 가능 합니다.<p/>");
            }
        %>
        <a href='#' onClick="self.close()">닫기</a>
        <!-- 현재의 창을 닫는다 -->
 
    </div>
</body>
</html>
cs



ZipcodeBean.java (우편번호 및 주소 자바빈즈)

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
package ch14;
 
public class ZipcodeBean { // 우편번화 및 주소를 저장하는 자바빈즈
 
    private String zipcode;
    private String area1;
    private String area2;
    private String area3;
 
    public String getZipcode() {
        return zipcode;
    }
 
    public void setZipcode(String zipcode) {
        this.zipcode = zipcode;
    }
 
    public String getArea1() {
        return area1;
    }
 
    public void setArea1(String area1) {
        this.area1 = area1;
    }
 
    public String getArea2() {
        return area2;
    }
 
    public void setArea2(String area2) {
        this.area2 = area2;
    }
 
    public String getArea3() {
        return area3;
    }
 
    public void setArea3(String area3) {
        this.area3 = area3;
    }
 
}
 
cs



MemberBean.java (회원가입 자바빈즈)

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
package ch14;
 
public class MemberBean { // 회원가입의 내용 저장하는 자바빈즈 클래스
 
    private String id;
    private String pwd;
    private String name;
    private String gender;
    private String birthday;
    private String eamil;
    private String zipcode;
    private String address;
    private String hobby[];
    private String job;
 
    public String getId() {
        return id;
    }
 
    public void setId(String id) {
        this.id = id;
    }
 
    public String getPwd() {
        return pwd;
    }
 
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public String getGender() {
        return gender;
    }
 
    public void setGender(String gender) {
        this.gender = gender;
    }
 
    public String getBirthday() {
        return birthday;
    }
 
    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }
 
    public String getEamil() {
        return eamil;
    }
 
    public void setEamil(String eamil) {
        this.eamil = eamil;
    }
 
    public String getZipcode() {
        return zipcode;
    }
 
    public void setZipcode(String zipcode) {
        this.zipcode = zipcode;
    }
 
    public String getAddress() {
        return address;
    }
 
    public void setAddress(String address) {
        this.address = address;
    }
 
    public String[] getHobby() {
        return hobby;
    }
 
    public void setHobby(String[] hobby) {
        this.hobby = hobby;
    }
 
    public String getJob() {
        return job;
    }
 
    public void setJob(String job) {
        this.job = job;
    }
 
}
 
cs



728x90
반응형
저작자표시

'Back-End > JSP' 카테고리의 다른 글

19.05.08 JSP 게시판 - 시스템 구조 및 게시판 만들기 (~동영상 43강)  (0) 2019.05.08
19.05.07 세션 사용 로그인 (동영상 38강~39강)  (0) 2019.05.07
19.05.06 파일 업로드  (0) 2019.05.06
19.05.05 커넥션풀을 사용한 데이터베이스 연결 (동영상)  (0) 2019.05.05
19.05.05 Cookie & Session (책+동영상)  (0) 2019.05.05
:

티스토리툴바