티스토리 뷰

웹 프로그래밍/JSP

DB를 활용한 회원가입 사이트 만들기 1

박강균 IT 2021. 3. 16. 22:35

밑에 있는 코드는 제가 만든 회원가입 사이트입니다. 

정규식을 바탕으로 작성한 코드인데,  DB를 활용해서 이 안에 있는정보들을 저장해서 사용할 수 있습니다. 

핵심적으로 이해해야하는 내용은 어떤식으로 jsp파일안에 있는 정보들을 데이터베이스와 연동해 사용하는지 라고 

생각하시면 될 것 같습니다. 

joinForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<% request.setCharacterEncoding("UTF-8"); %>
<html>
<head>
<title>회원가입</title>
<style>
td{border:1px solid black;}
th{border:1px solid black;}
table{border:1px solid black;}
#new{
background-color:skyblue;
}
</style>

    <script type="text/javascript">
    function validate(){
        var oID= document.getElementById("my_id");//id값을 받아와서 oID에 저장
        var oPwd1= document.getElementById("my_pwd");// 밑으로 동일
        var oPwd2= document.getElementById("my_pwd2");
        var em=document.getElementById("my_email");
        var mn=document.getElementById("my_name");
        var bd=document.getElementById("my_year");
        var num1 = document.getElementById("unum1");
        var jnumArr = new Array();
        var jnumplus = [2,3,4,5,6,7,8,9,2,3,4,5,1]; // 주민번호 계산할때 쓰이는 배열
        var jnumSum = 0;
        var arrNum1 = new Array(); // 주민번호 앞자리숫자 6개를 담을 배열
        var tempSum=0;


        
        var regul1= /^[a-zA-Z0-9]{4,12}$/;
       //4~12글자 사이에서 영소문자 대문자 혹은 0~9 숫자 값 받아오기
        var regul2= /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/
          //[첫글자는 영어또는숫자][-_.이 하나들어가거나 0개][영어또는 숫자 맘대로 입력가능]@이 붙고뒤에서는 같음
        var regul3= /^[가-힣a-zA-Z]{2,}$/;
        var regul4=/^([0-9]){4,4}$/;

        if((oID.value)==""){
            alert("아이디를 입력해주세요");
            oID.focus();
            return false;
        }
        if (!check(regul1,oID,"아이디는 4~12자의 대소문자와 숫자로만 입력 가능합니다.")) {
            return false;//반환 할 곳 없이 if문 탈출
        }
        if((oPwd1.value)==""){
            alert("비밀번호를 입력해주세요")
            oPwd1.focus();
            return false;
        }
        if((oPwd2.value)==""){
            alert("비밀번호를 확인해주세요")
            oPwd2.focus();
            return false;
        }
        if((oPwd1.value)!=(oPwd2.value)){
            alert("비밀번호가 일치하지 않습니다!")
            oPwd1.focus();
            oPwd2.focus();
            return false;
        }
        if(!check(regul1,oPwd1,"비밀번호의 양식을 지켜주세요")){
            return false
        }
        if((em.value)==""){
            alert("이메일을 입력해주세요 현재 공백입니다.")
            em.focus();
            return false;
        }
        if(!check(regul2,em,"잘못된 이메일 형식입니다.")){
            
            return false;
        }
        if((mn.value)==""){
            alert("이름을 입력해주세요!");
            mn.focus()
            return false;
        }
        if(!check(regul3,mn,"잘못된 이름 형식입니다.")){
            return false;
        }

    
     
        function check(re,what,message){//
        if (re.test(what.value)) {//
        //
            return true;
        }
     
        alert(message);
        what.value = "";
        what.focus();
    }
    for(var i = 0; i<num1.value.length;i++){ // 입력받은 주민번호 jnumArr배열에 넣기
            jnumArr[i] = num1.value.charAt(i);
        }
 
        for(var i = 0; i<num1.value.length-1;i++){ // 입력받은 주민번호 jnumArr배열에 넣기
            jnumSum+=jnumArr[i]*jnumplus[i];
        }
        jnumSum = (11-(jnumSum % 11)) % 10; //주민번호 계산
        
        if(jnumSum != jnumArr[12]){ // 계산되서 나온 결과값(jnumSum)과 입력한 주민번호의 마지막이 맞지 않으면 
            alert("주민번호가 올바르지 않습니다."); //alert 창 띄우기
            
            return false;
        } else{ //형식이 올바르면 생년월일 자동으로 입력하기
            
        }
        if(f.my_intro.value==""){
            alert("자기소개란이 비어있습니다.")
            return false;
        }
        if (jnumArr[6]==1 || jnumArr[6]==2) { // 인덱스 6번째 값이 1900년대는 000000-'1'또는'2'000000 이부분
        var y = parseInt(num1.value.substring(0,2)); //인덱스0<=문자열<인덱스2
        var m = parseInt(num1.value.substring(2,4)); // 인덱스2<=문자열<인덱스4
        var d = parseInt(num1.value.substring(4,6)); // 인덱스4<=문자열<인덱스6

        f.my_year.value = 1900+y; // html의 년도(id,name) 텍스트필드에 년도를 전달하겠다.
        f.month.value = m; // html의 월(id,name)의 셀렉에 월의 값을 전달하겠다.
        f.day.value = d; // html의 일(id,name)의 셀렉에 일의 값을 전달하겠다.

        } else if(jnumArr[6]==3||jnumArr[6]==4){ // 인덱스 6번째 값이 2000년대는 000000-'3'또는'4'000000 이부분
        var y = parseInt(num1.value.substring(0,2)); // 위와 동일. 0 "9" 1 "4" 2 "5" 4 "6" 2,
        var m = parseInt(num1.value.substring(2,4));
        var d = parseInt(num1.value.substring(4,6));
                    
        f.my_year.value = 2000+y;
        f.month.value = m;
        f.day.value = d;
        }


        }
  
     
</script>
</head>
<body>
<form name="f" method="post" onsubmit="return validate()"
action="JoinProcess.jsp">
<table width="1000" height="400" border="0" Cellspacing="0">


<tr Align="center" Bgcolor="7878FF">
<th colspan="2" span style="color:white"><h2> 회원 기본 정보</h2></th>
</tr>
<tr>
<th id="new">아이디:</th>
<td><p><input type="text" name="id" id="my_id" value="" size="12" maxlength="12">4~12자의 영문 대소문자와 숫자로만 입력</p></td>
</tr>
<tr>
<th id="new">비밀번호:</th>
<td><p><input type="password" id="my_pwd" name="pw" value="" minlength="4" maxlength="12">4~12자의 영문 대소문자와 숫자로만 입력</p></td>

</tr>
<tr>
<th id="new">비밀번호확인:</th>
<td><p><input type="password" name="pwck" id="my_pwd2" value="" minlength="4" maxlength="12"></p></td>

</tr>
<tr>
<th id="new">메일주소:</th>
<td><p><input type="text" id="my_email" name="mailadress" value="">ex)abc1234@email.com</p></td>

</tr>
<tr>
<th id="new">이름:</th>

<td><input type="text" id="my_name" name="name" value=""></td>

</tr>
<tr Align="center" Bgcolor="7878FF">
<th colspan="2" span style="color:white"><h2>개인 신상</h2></th>
</tr>
<tr>
<th id="new">주민등록번호:</th>
<td><input type="text" name="s" id="unum1" value=""></td>

</tr>
<tr>
<th id="new">생일:</th>
<td><input type="text" name="years" id="my_year" value="" size="4" maxlength="4" >
<select name="items1" id="month">
<option value="1">1월</option>
<option value="2">2월</option>
<option value="3">3월</option>
<option value="4">4월</option>
<option value="5">5월</option>
<option value="6">6월</option>
<option value="7">7월</option>
<option value="8">8월</option>
<option value="9">9월</option>
<option value="10">10월</option>
<option value="11">11월</option>
<option value="12">12월</option>
</select>
<select name="items1" id="day">
<option value="1">1일</option>
<option value="2">2일</option>
<option value="3">3일</option>
<option value="4">4일</option>
<option value="5">5일</option>
<option value="6">6일</option>
<option value="7">7일</option>
<option value="8">8일</option>
<option value="9">9일</option>
<option value="10">10일</option>
<option value="11">11일</option>
<option value="12">12일</option>
<option value="13">13일</option>
<option value="14">14일</option>
<option value="15">15일</option>
<option value="16">16일</option>
<option value="17">17일</option>
<option value="18">18일</option>
<option value="19">19일</option>
<option value="20">20일</option>
<option value="21">21일</option>
<option value="22">22일</option>
<option value="23">23일</option>
<option value="24">24일</option>
<option value="25">25일</option>
<option value="26">26일</option>
<option value="27">27일</option>
<option value="28">28일</option>
<option value="29">29일</option>
<option value="30">30일</option>
<option value="31">31일</option>
</select>

</td>

</tr>
<tr>
<th id="new">관심분야:</th>

<td><input type="checkbox" name="hobby" value="gym" checked>"운동"
<input type="checkbox" name="hobby" value="reading" checked>"독서"
<input type="checkbox" name="hobby" value="watchmovie">"영화감상"
<input type="checkbox" name="hobby" value="game">"게임"
<input type="checkbox" name="hobby" value="music">"음악감상"</td>
</tr>
<tr>
<th id="new">자기소개:</th>
<td><textarea name="my_intro" cols="100" row"60"></textarea></td>

</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="signup" value="회원가입">
<input type="reset" name="re" value="다시입력"> 
</td>
</tr>
</table>

</form>
</body>
</html>

JoinProcess.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import ="java.sql.*"%>
<%@ page import ="javax.sql.*"%>
<%@ page import ="javax.naming.*"%>
<%
 request.setCharacterEncoding("UTF-8");
 String id = request.getParameter("id");
 String password = request.getParameter("pw");
 String name = request.getParameter("name");
 String email = request.getParameter("mailadress");
 String hobby = request.getParameter("hobby");
 
 Connection conn=null; //DB연결
 PreparedStatement pstmt=null; //SQL문
 ResultSet re = null; //해제
 
 try{
    Context init = new InitialContext();
    DataSource ds =(DataSource)init.lookup("java:comp/env/jdbc/OracleDB");
    conn=ds.getConnection();
    
    pstmt=conn.prepareStatement("Insert into memberinfo values(?,?,?,?,?)");//커넥션풀 방식이다.
    pstmt.setString(1,id);
    pstmt.setString(2,password);
    pstmt.setString(3,email);
    pstmt.setString(4,name);
    pstmt.setString(5,hobby);

  
    int result = pstmt.executeUpdate();
    
    if(result!=0){
       out.println("<script>");
       out.println("location.href='loginForm.jsp'");
       out.println("</script>");
    }else {
       out.println("<script>");
       out.println("location.href='joinForm.jsp'");
       out.println("</script>");
    }
 }catch(Exception e){
    e.printStackTrace();    
    }
 session.setAttribute("id", id); //세션으로 받아와야 한다.
 response.sendRedirect("Main.jsp");
   
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

joinform 에서는 데이터를 작성합니다. 

실제로 입력되는 부분만 기억하시면 데이터를 쉽게 저장할 수 있습니다. 

입력부는 <input type= > 이부분입니다. 

또한 기억해야할 점은 name값이 무엇인지 알아두는 것 입니다. 

이제 그 값을 가지고 submit을 했기때문에, joinprocess부에서 아직 그 값들을 가지고 있습니다. 

그래서 밑과 같이 값들을 가져와 출력하고 싶은 부분들을 출력할 수 있도록 함수를 지정해줍니다. 

 String id = request.getParameter("id");
 String password = request.getParameter("pw");
 String name = request.getParameter("name");
 String email = request.getParameter("mailadress");
 String hobby = request.getParameter("hobby");

이제 이 값들을 데이터 베이스에 저장만 시켜주면 되겠죠? 

    pstmt=conn.prepareStatement("Insert into memberinfo values(?,?,?,?,?)");//커넥션풀 방식이다.
    pstmt.setString(1,id);
    pstmt.setString(2,password);
    pstmt.setString(3,email);
    pstmt.setString(4,name);
    pstmt.setString(5,hobby);

  
    int result = pstmt.executeUpdate();

prepareStatement를 사용하면 편리하게 값을 저장할 수 있습니다. 

핵심적인 부분은 Insert into memberinfo values(?,?,?,?,?) 이부분입니다.

?는 나중에 값을 지정해주겠다 라는 의미로 알면 될 것 같습니다. 

즉 말로 설명하면 Insert into memberinfo = memberinfo라는 테이블안에 집어넣겠다. values(?,?,?,?,?) 

벨류들을 이라고 이해하면 될 것 같습니다. 

벨류를 넣을수 있는 공간이 총 다섯개 있으니 values의 ?갯수도 5개입니다. 

뒤에 따라오는 숫자 1,2,3,4,5도 테이블의 순서에 맞춰서 저장된점들을 알 수 있습니다. 

그 뒤에 업데이트를 시켜주면 입력된 값들이 저장되는 걸 알 수 있습니다. 

일단 기본적으로 데이터들을 저장하는 방법은 이렇습니다. 

생략한 느낌이 없잖아 있지만, 쉬운 이해를 위해서 데이터를 어떤식으로 전송해야 하는지 간략히 적어봤습니다.

2에서는, login form 을 사용해서 login process을 사용해서 로그인을 하는 방법을 작성하도록 하겠습니다. 

 

저작자표시

'웹 프로그래밍 > JSP' 카테고리의 다른 글

에러페이지 처리  (0) 2021.03.08
한글 깨짐처리 GET & POST  (0) 2021.03.08
Servlet 팁: name값 배열로 받기  (0) 2021.03.07
Cookie의 이해  (0) 2021.03.06
Servlet의 기본적인 사용방법 (+ 계산기)  (0) 2021.03.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
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
글 보관함