본문으로 바로가기

[JSP개발] 회원가입 DB연동

category 코딩/JSP 2016. 11. 22. 20:23







1. 개요





자바빈(JavaBean) 적용에 이어서 DB를 연동하여 회원가입을 구현한다. JNDI와 DBCP 기법을 사용하며 라이브러리 2개가 필요하다. 추가로 작성해야 할 것은 DBConnection.java, MemberDAO.java, join_style.css, web.xml 이다.



■ JSP

  • JoinForm.jsp : 회원가입 화면

  • JoinPro.jsp : 파라미터 값을 넘겨받아 회원가입을 처리하는 JSP


■ Java

  • MemberBean.java : 회원정보를 전달할 자바빈

  • MemberDAO.java : JSP_MEMBER 테이블의 데이터 처리를 담당하는 클래스

  • DBConnection.java : DB 커넥션을 담당하는 클래스


■ CSS

  • join_style.css : JoinForm과 JoinPro는 동일한 CSS를 사용하므로 별도의 파일로 분리하였다.


■ 그 외

  • web.xml : JNDI 리소스 사용 설정을 위한 xml 파일

  • ojdbc6.jar : 오라클 JDBC 드라이버

  • tomcat-dbcp.jar : 커넥션 풀 관련 라이브러리


■ 필요파일 다운로드


ojdbc6.jartomcat-dbcp.jar


두 개의 jar 파일을 다운로드하여 lib 폴더에 집어넣는다.




2. 소스코드



■ JoinForm.jsp


  • 8 줄 

CSS 파일을 사용하기 위해 <link> 태그를 사용하였다.


  • 44 줄 

필수로 입력되어야 할 정보인 아이디와 비밀번호가 입력되지 않는 것을 방지하기 위해 <form> 태그의 onsubmit 속성을 사용하였다. 화면에서 가입 버튼을 누르면 onsubmit에 의해 checkValue() 함수가 실행된다.


  • 13 ~ 30 줄

onsubmit에 의해 실행되는 함수이다. 여기에서는 아이디와 비밀번호가 입력되었는지, 동일한 비밀번호를 입력하였는지를 체크한다. 만약 조건에 만족하지 않으면 false 값을 반환한다. false 값이 반환되면 submit(전송)이 실행되지 않는다.



■ 관련글

    - JSP에서 CSS 파일 불러오기



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
<%@ 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;
            }
        }
    </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="취소">
        </form>
    </div>
</body>
</html>
cs



■ JoinPro.jsp


  • 4 ~ 7 줄

필요한 클래스를 import 한다.


  • 14 줄

CSS 파일을 사용하기 위해 <link> 태그를 사용하였다.


  • 29 ~ 33 줄

입력한 회원 정보를 MemberDAO에 전달한다. 값을 전달할 때 값을 담고 있는 자바빈인 MemberBean을 사용한다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%> 
    
<%-- 자바빈 클래스 import --%>      
<%@ page import="jsp.member.model.MemberBean" %>  
<%-- DAO import --%>   
<%@ page import="jsp.member.model.MemberDAO" %> 
 
<html>
<head>
    <title>회원가입 처리 JSP</title>
    
    <!-- css 파일 분리 -->
    <link href='../../css/join_style.css' rel='stylesheet' style='text/css'/>
    
</head>
<body>
    <%-- JoinForm.jsp에서 입력한 정보를 넘겨 받아 처리한다. --%>
    <% 
        // 한글 깨짐을 방지하기 위한 인코딩 처리
        request.setCharacterEncoding("euc-kr"); 
    %>
    
    <%-- 자바빈 관련 액션태그 사용 --%>
    <jsp:useBean id="memberBean" class="jsp.member.model.MemberBean" />
    <jsp:setProperty property="*" name="memberBean"/>    
    
    <%
        MemberDAO dao = MemberDAO.getInstance();
    
        // 회원정보를 담고있는 memberBean을 dao의 insertMember() 메서드로 넘긴다.
        // insertMember()는 회원 정보를 JSP_MEMBER 테이블에 저장한다.
        dao.insertMember(memberBean);
    %>
    
    <div id="wrap">
        <br><br>
        <b><font size="5" color="gray">회원가입 정보를 확인하세요.</font></b>
        <br><br>
        <font color="blue"><%=memberBean.getName() %></font>님 가입을 축하드립니다.
        <br><br>
        
        <%-- 자바빈에서 입력된 값을 추출한다. --%>
        <table>
            <tr>
                <td id="title">아이디</td>
                <td><%=memberBean.getId() %></td>
            </tr>
                        
            <tr>
                <td id="title">비밀번호</td>
                <td><%=memberBean.getPassword() %></td>
            </tr>
                    
            <tr>
                <td id="title">이름</td>
                <td><%=memberBean.getName() %></td>
            </tr>
                    
            <tr>
                <td id="title">성별</td>
                <td><%=memberBean.getGender()%></td>
            </tr>
                    
            <tr>
                <td id="title">생일</td>
                <td>
                    <%=memberBean.getBirthyy() %>년 
                    <%=memberBean.getBirthmm() %>월 
                    <%=memberBean.getBirthdd() %>일
                </td>
            </tr>
                    
            <tr>
                <td id="title">이메일</td>
                <td>
                    <%=memberBean.getMail1() %>@<%=memberBean.getMail2() %>
                </td>
            </tr>
                    
            <tr>
                <td id="title">휴대전화</td>
                <td><%=memberBean.getPhone() %></td>
            </tr>
            <tr>
                <td id="title">주소</td>
                <td>
                    <%=memberBean.getAddress() %>
                </td>
            </tr>
        </table>
        
        <br>
        <input type="button" value="확인">
    </div>
</body>
</html>
cs



■ join_style.css


JoinForm.jsp과 JoinPro.jsp의 스타일 정보를 갖고있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#wrap{
    width:530px;
    margin-left:auto; 
    margin-right:auto;
    text-align:center;
}
        
table{
    margin-left:auto; 
    margin-right:auto;
    border:3px solid skyblue
}
        
td{
    border:1px solid skyblue
}
        
#title{
    background-color:skyblue
}
cs



■ DBConnection.java


JNDI를 통해 커넥션을 가져오는 역할을 한다. 


■ 관련글

    - JSP에서 DB연동 하기 - JNDI, DBCP(커넥션풀) 이용



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
package jsp.util;
 
import java.sql.Connection;
import java.sql.SQLException;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;
 
// 커넥션을 얻어오는 클래스 - JNDI
public class DBConnection 
{
    public static Connection getConnection() throws SQLException, NamingException, 
    ClassNotFoundException{
            Context initCtx = new InitialContext();
            
            //initCtx의 lookup메서드를 이용해서 "java:comp/env" 에 해당하는 객체를 찾아서 evnCtx에 삽입
            Context envCtx = (Context) initCtx.lookup("java:comp/env");
            
            //envCtx의 lookup메서드를 이용해서 "jdbc/orcl"에 해당하는 객체를 찾아서 ds에 삽입
            DataSource ds = (DataSource) envCtx.lookup("jdbc/orcl");
            
            //getConnection메서드를 이용해서 커넥션 풀로 부터 커넥션 객체를 얻어내어 conn변수에 저장
            Connection conn = ds.getConnection();
            return conn;
    }
}    
cs



■ MemberDAO.java 


DAO란 DB와 관련된 CRUD(등록, 검색, 수정, 삭제) 작업을 처리한다. DAO는 일반적으로 DB 테이블 당 1개를 작성한다.


  • 23 ~ 28 줄

1개의 객체만 유지하기 위해 싱글톤 패턴을 사용하였다.


  • 34 ~ 44 줄

생일의 경우 DB 상에는 DATE(날짜) 타입으로 저장된다. 그런데 현재 화면에서 입력된 값은 String(문자열) 타입이므로 DATE 타입으로 변경해야 한다. 이런 변환 작업을 stringToDate( ) 메서드에서 처리한다.


  • 47 ~ 98 줄

회원 정보를 저장하는 insertMember( ) 메서드이다. 커넥션을 가져와서 DB에 연결하고, 쿼리문을 날려 데이터를 등록한다.


■ 관련글

    - String 타입을 Date 타입으로 변환



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
package jsp.member.model;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
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()
}
 
cs



■ web.xml 


JNDI 리소스 사용 설정을 위한 xml 파일이다.


  • 9 ~ 14 줄

<res-ref-name>, <res-type>, <res-auth> 태그안의 값은 각각 context.xml에 <Resource> 입력된 값과 같아야 한다.


   - res-ref-name : JDBC 이름, <Resource>의 name 부분과 동일하게 입력

   - res-type : <Resource>의 type 부분과 동일하게 입력

   - res-auth : <Resource>의 auth 부분과 동일하게 입력


■ 관련글

    - JSP에서 DB연동 하기 - JNDI, DBCP(커넥션풀) 이용



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xmlns="http://java.sun.com/xml/ns/javaee" 
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
         id="WebApp_ID" version="2.5">
 <display-name>JSP_create</display-name>
 
<resource-ref>
     <description>connection</description>
     <res-ref-name>jdbc/orcl</res-ref-name>
     <res-type>javax.sql.DataSource</res-type>
     <res-auth>Container</res-auth>
</resource-ref>
 
</web-app>
cs




3. 실행 결과



■ JoinForm.jsp




■ JoinPro.jsp




■ JSP_MEMBER 테이블



테이블에 화면에서 입력한 정보가 저장되었다.




4. 소스코드 다운로드



회원가입 DB 연동 - 소스 코드.zip





저작자표시 비영리 변경금지

'코딩 > JSP' 카테고리의 다른 글

[JSP개발] 페이지 모듈화 <jsp:include> 적용  (8) 2016.11.24
[JSP개발] 회원가입 - 로그인, 로그아웃 구현  (10) 2016.11.23
JSP에서 CSS 파일 불러오기  (0) 2016.11.22
[JSP개발] 회원 테이블 생성  (4) 2016.11.21
[JSP개발] 회원가입 - 자바빈(JavaBean) 적용  (10) 2016.11.21
RSS구독 링크추가 트위터 이메일 구독
댓글 , 엮인글
세상의 모든 기록
블로그 이미지 모든기록 님의 블로그 이웃추가
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바