Coding Note

[JSP, DB] DB 연동 - 회원가입_유효성 검사 및 조회하기 본문

Web/Jsp

[JSP, DB] DB 연동 - 회원가입_유효성 검사 및 조회하기

jinnkim 2022. 2. 7. 11:00

 

 

DB 연동해서 회원가입 및 회원 리스트 조회하기!

 

 

1. DataBase - Member 테이블 생성 및 데이터 입력

  1-1. 생성

      - create table '테이블 명' (컬럼 작성); 

 

 

 

  1-2. 입력

       - insert into '테이블 명' (컬럼) values (데이터 작성);

 

 

 

 

2. 회원가입 폼

 

 

2-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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입폼</title>
    <style type="text/css">
        .wrap {
            border: 5px solid #CEE3F6; 
            padding: 30px;
            width: 275px;
            height: 170px;
        }
        .btn {
            border: 2px solid #CEE3F6;
            background-color: #CEE3F6;
            border-radius: 5px;
            width: 70px;
            float: right;
            margin: 20px 5px 0 0;
        }
    </style>
    <script type="text/javascript">
        function vaildMember(){
            var frmMember = document.frmMember;
            
            var id = frmMember.id.value;
            var pwd = frmMember.pwd.value;
            var name =frmMember.name.value;
            var tel = frmMember.tel.value;        //유효성 검사
            
            if(id.length==0 || id ==""){
                
                alert("아이디는 필수입니다.");
            }
            else if(pwd.length==0 || pwd==""){
                alert("비밀번호는 필수입니다.")
            }
            else if(name.length==0 || name==""){
                alert("이름은 필수입니다.")
            }
            else if(tel.length==0 || tel==""){
                alert("전화번호는 필수입니다.")
            }
            else{
                frmMember.method = "post";        
                frmMember.action= "member.jsp";    
                frmMember.submit();                //서블릿으로 전송함.
            }
        }
    </script>
</head>
<body>
<div class="wrap">
    <form name="frmMember" method="post" action="member.jsp">
        <table >
            <th>회원가입창</th>
            <tr>
                <td>아이디</td>
                <td><input type="text" name="id"></td>    
            </tr>
                <tr>
                <td>비밀번호</td>
                <td><input type="password" name="pwd"></td>
            </tr>
                <tr>
                <td>이름</td>
                <td><input type="text" name="name"></td>
            </tr>
                <tr>
                <td>전화번호</td>
                <td><input type="text" name="tel"></td>
            </tr>
        </table>
    
    <input type="button" value="가입하기" onclick="vaildMember()" class="btn">
    <input type="reset" value="다시입력" class="btn">
    <input type="hidden" name = "command" value="addMember">
    </form>
</div>
</body>
</html>
cs

 

 

 

3. 멤버 리스트 조회하기

    - 등록된 회원이 없을 경우

 

 

- 회원 리스트 조회

 

 

코드

- list.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
<%@page import="java.util.List"%>
<%@page import="kr.co.loginDB.MemberVO"%>
<%@page import="kr.co.loginDB.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("utf-8");
%>
    
<%
    String id = request.getParameter("id");
    String pwd = request.getParameter("pwd");
    String name = request.getParameter("name");
    String tel = request.getParameter("tel");
    
    MemberVO memberVO = new MemberVO(id, pwd, name, tel);
    MemberDAO memberDAO = new MemberDAO();
    memberDAO.addMember(memberVO);
    List<MemberVO> membersList = memberDAO.listMembers();
    
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원 목록 출력</title>
</head>
<body>
    <table align="center" width="100%">
        <tr align="center" bgcolor="#CEE3F6">
            <td width="7%">아이디</td>
            <td width="7%">비밀번호</td>
            <td width="5%">이름</td>
            <td width="11%">전화번호</td>
            <td width="5%">가입일</td>
        </tr>
        <%
            if(membersList.size() == 0) {
        %>
            <tr>
                <td colspan="5">
                    <p align="center">
                        <b><span style="font-size: 9pt">등록된 회원이 없습니다.</span></b>
                </td>
            </tr>
        <%
            }
            else {
                for(int i = 0; i<membersList.size(); i++) {
                    MemberVO bean = membersList.get(i);
        %>
                    <tr align="center">
                        <td><%=bean.getId() %></td>
                        <td><%=bean.getPwd() %></td>
                        <td><%=bean.getName() %></td>
                        <td><%=bean.getTel() %></td>
                        <td><%=bean.getRegDate() %></td>
                    </tr>
        <%
                }
            }
        %>
                    <tr height="1" bgcolor="#CEE3F6">
                        <td colspan="5"></td>
                    </tr>
    </table>
</body>
</html>
cs

 

 

 

- MemberVO (Member 테이블 칼럼 값과 동일하게 작성)

 

 

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
public class MemberVO {
    
    private String id;
    private String pwd;
    private String name;
    private String tel;
    private Date regDate;
    
    public MemberVO() {
        // TODO Auto-generated constructor stub
    }
    
    public MemberVO(String id, String pwd, String name, String tel) {
        this.id = id;
        this.pwd = pwd;
        this.name = name;
        this.tel = tel;
    }
 
    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 getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }
    public Date getRegDate() {
        return regDate;
    }
    public void setRegDate(Date regDate) {
        this.regDate = regDate;
    }
}
 
cs

 

 

 

- MemberDAO

 

 

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
public class MemberDAO {
 
    //DB연결
    private Connection con;
    private PreparedStatement pst;
    private DataSource dataFactory;
    
    public MemberDAO() {
        try {
            Context ctx = new InitialContext();
            Context envContext = (Context)ctx.lookup("java:/comp/env");
            dataFactory = (DataSource)envContext.lookup("jdbc/oracle");
        } 
        catch (NamingException e) {
            e.printStackTrace();
        }
    }
    
    //멤버 조회
    public List<MemberVO> listMembers() {
        List<MemberVO> list = new ArrayList<>();
        
        try {
            con = dataFactory.getConnection();
            
            String query = "SELECT * FROM t_joinMember order by regDate desc"; //가입 최신순으로 조회
            System.out.println(query);
            
            pst = con.prepareStatement(query);
            ResultSet rs = pst.executeQuery();
            
            while(rs.next()) {
                
                String id = rs.getString("id");
                String pwd = rs.getString("pwd");
                String name = rs.getString("name");
                String tel = rs.getString("tel");
                Date regDate = rs.getDate("regDate");
                
                MemberVO memberVO = new MemberVO();
                
                memberVO.setId(id);
                memberVO.setPwd(pwd);
                memberVO.setName(name);
                memberVO.setTel(tel);
                memberVO.setRegDate(regDate);
                
                list.add(memberVO);
                //설정된 MemberVO 객체를 ArrayList에 저장
            }
            rs.close();
            pst.close();
            con.close();
            
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }
cs

 

 

 

 

'Web > Jsp' 카테고리의 다른 글

[JSP] JQuery ajax 공부하기  (0) 2022.02.11
[JSP, DB] DB 연동 - 회원가입_추가하기  (0) 2022.02.08
[JSP] JDBC 연동 - DB 로그인, 로그아웃하기_2  (0) 2022.02.06
[JSP] JDBC 연동 - DB 로그인, 로그아웃하기_1  (0) 2022.02.06
[JSP] ForwardActionTag 로그인 - 환영합니다!  (0) 2022.02.05
'Web/Jsp' Related Articles more
Comments