Front-End/JSP

[JSP] 자바빈즈로 회원가입 페이지 구현하기 (useBean 액션 사용, 미사용 버전 2가지)

현기 2022. 9. 21. 19:31

저번에 만든 회원가입 유효성 검사 페이지에 자바 빈즈를 추가하여 구현해 봤다.

액션 태그를 사용한 버전과, 사용하지 않은 버전 2가지다.

 

📝JoinFrom.jsp

회원의 정보를 입력하는 회원가입 페이지다.

유효성 검사가 구현되어 있다.

 

📝JoinCheck.jsp

회원이 입력한 정보를 보여주는 페이지다.

회원이 1페이지에서 입력한 정보를 자바 클래스에 저장하고

저장된 정보를 화면에 표시해준다.

 

📝 BeanTest.java

유저가 입력한 데이터를 클래스의 필드에 저장한다.

 

빈즈 클래스도 자바 클래스 이므로 기본적으로는 자바 클래스 규격을 따른다.

멤버 변수는 private로 선언하며

DB 테이블의 컬럼 이름, HTML form이름과 일치하는 것이 좋다.

getter / setter 메서드는 당연히 가지고 있어야 한다.

 

📝 JoinFrom.jsp

 

https://hyunki99.tistory.com/45

 

[JS] 회원가입 페이지 사용자 입력 유효성 검사 (정규식, 비정규식)

회원가입 시에 사용자가 데이터를 제대로 입력하도록 유효성 검사를 구현 해야한다. 정규식을 사용하는 방법과, 정규식을 사용하지 않는 2가지 버전으로 구현했다. HTML 회원 기본 정보 아이디: 4

hyunki99.tistory.com

 

⦁ 변경점

동일하지만 필요없는 배경 이미지, 음악을 제거했다.

코드를 그대로 가져왔더니, JSP에서 온클릭 이벤트(submit)가 제대로 실행되지 않는 이슈가 있었다.

Form 태그에 onsubmit="return Validation();" 속성을 추가해줬더니 문제없이 동작했다.

 

🧾 소스코드

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<title>회원가입</title>
<script type="text/javascript">
// 유효성 검사 메서드
function Validation() {
    // 변수에 저장
    var uid = document.getElementById("uid")
    var pw = document.getElementById("pw")
    var cpw = document.getElementById("cpw")
    var mail = document.getElementById("mail")
    var name = document.getElementById("uname")
    var year = document.getElementById("year")
    var hobby = document.getElementsByName("hobby")
    var me = document.getElementById("me")

    //아이디 확인
    if(uid.value.length <4){
        alert("아이디를 4글자 이상 입력하세요.")
        uid.focus();
        return false;
    }
    //아이디 영어 대소문자 확인
    else if(!checkEngNumber(uid.value)){
        alert("영문 대소문자, 숫자만 입력하세요.")
        uid.focus();
        return false;
    }

    //비밀번호 확인
    if(pw.value.length <4){
        alert("비밀번호를 4글자 이상 입력하세요.")
        pw.focus();
        return false;
    }
    //비밀번호 영어 대소문자 확인
    else if(!checkEngNumber(pw.value)){
        alert("영문 대소문자, 숫자만 입력하세요.")
        pw.focus();
        return false;
    }
    //비밀번호와 아이디 비교
    else if(pw.value == uid.value){
        alert("아이디와 동일한 비밀번호를 사용할 수 없습니다.")
        pw.focus();
        return false;
    }
    
    //비밀번호 확인
    if(cpw.value !== pw.value){
        alert("비밀번호와 동일하지 않습니다.")
        cpw.focus();
        return false;
    }

    //메일주소 확인
    if(mail.value.length == 0){
        alert("메일주소를 입력하세요.")
        mail.focus();
        return false;
    }

    else if(mail.value.indexOf("@") == -1 || mail.value.indexOf(".") == -1 || mail.value.length <=5){
        alert("잘못된 이메일 형식입니다.")
        mail.focus();
        return false;
    }

    //이름 확인 = 한글과 영어만 가능하도록
    if(uname.value == ""){
        alert("이름을 입력하세요.")
        uname.focus();
        return false;
    }
    
    else if(!checkKorEng(uname.value)){
        alert("한글, 영어만 입력하세요.")
        uname.focus();
        return false;
    }

    //생일 확인
    if(year.value == ""){
        alert("년도를 입력하세요.")
        year.focus();
        return false;
    }

    else if(!(year.value >=1900 && year.value <= 2050)){
        alert("년도를 정확하게 입력해주세요.")
        year.focus();
        return false;
    }

    //관심분야 확인
    if(!checkedHobby(hobby)){
        alert("관심분야를 체크하세요.")
        hobby.focus();
        return false;
    }

    //자기소개 확인
    if(me.value.length <= 10){
        alert("자기소개는 최소 10글자를 입력해주세요.")
        me.focus();
        return false;
    }
}

// 문자열이 영어, 숫자인지 확인하는 메서드 
function checkEngNumber(value){
    var count = 0;

    for(var i=0; i<value.length; i++){
        if((value.charCodeAt(i)>=65 && value.charCodeAt(i)<=90) || (value.charCodeAt(i)>=97 && value.charCodeAt(i)<=122) || (value.charCodeAt(i)>=48 && value.charCodeAt(i)<=57)){
            count += 1;
        }
    }

    //카운트 수와 문자의 길이가 같다면 true
    if(count === (value.length)){
        return true;
    } else{
        return false;
    }
}

//영어, 한글인지(가~힣) 확인
function checkKorEng(value){
    var count = 0;

    for(var i=0; i<value.length; i++){
        console.log(value.charCodeAt(i));
        if((value.charCodeAt(i)>=65 && value.charCodeAt(i)<=90) || (value.charCodeAt(i)>=97 && value.charCodeAt(i)<=122) || (value.charCodeAt(i)>=44032 && value.charCodeAt(i)<=55203)){
            count += 1;
        }
    }

    if(count === (value.length)){
        return true;
    } else{
        return false;
    }
}

//관심분야 체크 확인
function checkedHobby(arr){
    for(var i=0; i<arr.length; i++){
        if(arr[i].checked == true){
            return true;
        }
    }
    return false;
}
</script>

<body>
<br>
<div align="center">

</div>
<br><br>
<form id="userinfoForm" action="JoinCheck.jsp" method="post" onsubmit="return Validation();">
    <table text-align="center" align="center" border="1" width="800" height="600" cellspacing="0">
        <tr>
            <td bgcolor="#48dbfb" align="center" colspan="2" height="50"> <b>회원 기본 정보</b> </td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center" width="150">아이디:</td>
            <td bgcolor="white"> <input type="text" size="20" name="uid" id="uid" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력 </td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">비밀번호:</td>
            <td bgcolor="white"> <input type="password" size="20" name="pw" id="pw" minlength="4" maxlength="12"> 4~12자의 영문 대소문자의 숫자로만 입력</td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">비밀번호확인:</td>
            <td bgcolor="white"><input type="password" size="20" name="cpw" id="cpw"></td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">메일주소:</td>
            <td bgcolor="white"><input type="email" size="30" name="mail" id="mail"> 예) id@domain.com</td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">이름:</td>
            <td bgcolor="white"><input type="text" size="30" name="uname" id="uname"></td>
        </tr>
        <tr>
            <td bgcolor="#48dbfb" align="center" colspan="2" height="50"><B>개인 신상 정보</B></td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">주민등록번호:</td>
            <td bgcolor="white"><input maxlength="13" type="text" size="30" name="num">예) 1234561234567</td>
        </tr>
        <tr>
            <td bgcolor="#c8d6e5" align="center">생일:</td>
            <td bgcolor="white">
                <input type="text" size="8" name="year" id="year">년
                <select name="month" 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="day" 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>
            <td bgcolor="#c8d6e5" align="center">관심분야:</td>
            <td bgcolor="white">
                <input type="checkbox" name="hobby" value="computer">컴퓨터&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="net">인터넷&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="travel">여행&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="movie">영화감상&nbsp;&nbsp;
                <input type="checkbox" name="hobby" value="music">음악감상&nbsp;&nbsp;
            </td>
        </tr>
        <tr height="100">
            <td bgcolor="#c8d6e5" align="center" rowspan="2">자기소개:</td>
            <td bgcolor="white">
                <textarea rows="10" cols="75" name="me" id="me"> </textarea>
            </td>
        </tr>
    </table>
    <br>
    <div align="center">
        <input type="submit" width="30" id="btn" value="전송">
        <input type="reset" onclick="alert('초기화 했습니다.')" value="다시 입력">
        </div>
    </form>
</body>
</html>

 

 

📝 BeanTest.java

 

필드와 Get, Set을 가지고 있는 자바 클래스다.

📝 소스코드

더보기 
package test;
public class BeanTest{
	private String uid;
	private String pw;
	private String mail;
	private String uname;
	private String num; //주민번호
	private String year;
	private String month;
	private String day;
	
	public String getUid() {
		return uid;
	}
	public void setUid(String uid) {
		this.uid = uid;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public String getMail() {
		return mail;
	}
	public void setMail(String mail) {
		this.mail = mail;
	}
	public String getUname() {
		return uname;
	}
	public void setUname(String uname) {
		this.uname = uname;
	}
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getYear() {
		return year;
	}
	public void setYear(String year) {
		this.year = year;
	}
	public String getMonth() {
		return month;
	}
	public void setMonth(String month) {
		this.month = month;
	}
	public String getDay() {
		return day;
	}
	public void setDay(String day) {
		this.day = day;
	}
	

}

 

 

📝 JoinCheck.jsp ( 빈즈 액션태그 x )

⦁ 순서

1. 회원가입 페이지에서 입력한 정보를 자바 클래스 필드에 set 메서드로 저장한다.

<%@page import="test.BeanTest"%>
<%
//액션 대체 방법 (스크립트릿)
BeanTest mybean = (BeanTest) request.getAttribute("mybean");
if(mybean == null) {
    mybean = new BeanTest();
    request.setAttribute("mybean", mybean);
}

mybean.setUid(request.getParameter("uid"));
mybean.setPw(request.getParameter("pw"));
mybean.setMail(request.getParameter("mail"));
mybean.setUname(request.getParameter("uname"));
mybean.setNum(request.getParameter("num"));
mybean.setYear(request.getParameter("year"));
mybean.setMonth(request.getParameter("month"));
mybean.setDay(request.getParameter("day"));
%>

 

2. 자바 클래스의 get 메서드를 통해 값을 가져와서 화면에 보여준다.

<table>
	<tr>
		<td>아이디 :</td>
		<td><%=mybean.getUid()%></td>		
	</tr>
	<tr>
		<td>비밀번호 :</td>
		<td><%=mybean.getPw()%></td>		
	</tr>
	<tr>
		<td>메일주소 :</td>
		<td><%=mybean.getMail()%></td>		
	</tr>
	<tr>
		<td>이름 :</td>
		<td><%=mybean.getUname()%></td>		
	</tr>
	<tr>
		<td>주민등록번호 :</td>
		<td><%=mybean.getNum()%></td>		
	</tr>
	<tr>
		<td>생일 :</td>
		<td><%=mybean.getYear()%>년 <%=mybean.getMonth()%>월 <%=mybean.getDay()%>일</td>		
	</tr>
</table>

 

🧾 전체 소스코드

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="test.BeanTest"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Check</title>
</head>
<body>

<%
//액션 대체 방법 (스크립트릿)
BeanTest mybean = (BeanTest) request.getAttribute("mybean");
if(mybean == null) {
    mybean = new BeanTest();
    request.setAttribute("mybean", mybean);
}

mybean.setUid(request.getParameter("uid"));
mybean.setPw(request.getParameter("pw"));
mybean.setMail(request.getParameter("mail"));
mybean.setUname(request.getParameter("uname"));
mybean.setNum(request.getParameter("num"));
mybean.setYear(request.getParameter("year"));
mybean.setMonth(request.getParameter("month"));
mybean.setDay(request.getParameter("day"));
%>

<center>
<h3>Join Check</h3>
<hr/>
<table>
	<tr>
		<td>아이디 :</td>
		<td><%=mybean.getUid()%></td>		
	</tr>
	<tr>
		<td>비밀번호 :</td>
		<td><%=mybean.getPw()%></td>		
	</tr>
	<tr>
		<td>메일주소 :</td>
		<td><%=mybean.getMail()%></td>		
	</tr>
	<tr>
		<td>이름 :</td>
		<td><%=mybean.getUname()%></td>		
	</tr>
	<tr>
		<td>주민등록번호 :</td>
		<td><%=mybean.getNum()%></td>		
	</tr>
	<tr>
		<td>생일 :</td>
		<td><%=mybean.getYear()%>년 <%=mybean.getMonth()%>월 <%=mybean.getDay()%>일</td>		
	</tr>
</table>
</center>
</body>

</html>

 

 

📝 JoinCheck.jsp ( 빈즈 액션태그 o )

인코딩 한글 깨짐은 구글에 검색하세요 !

 

⦁ useBean 액션 형식

<jsp:useBean id="beantest" class="test.BeanTest" scope="page"/>

 

⦁ useBean 속성 목록

속성 설명
id 빈즈 클래스 인스턴스명으로 사용할 변수
class 빈즈 클래스 클래스명으로 패키지 경로를 포함
scope 빈즈 클래스 범위로 page, request, session, application 중 선택

 

⦁ useBean 빈즈값 설정

//액션 태그 get, set 방법
<jsp:setProperty name="beantest" property="uid"/>
<jsp:getProperty name="beantest" property="uid"/>
속성 설명
name 빈즈 클래스 인스턴스명이다. (위에서 id 값에 설정한 변수명)
property 속성 값이다. 빈즈 클래스의 setUid 메서드와 대응한다.
"*"을 지정하면 모든 set메서드에 자동으로 대응된다.

 

📝 소스코드

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<jsp:useBean id="beantest" class="test.BeanTest" scope="page"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Check</title>
</head>
<body>

#액션태그 사용
<jsp:setProperty name="beantest" property="uid"/>
<jsp:setProperty name="beantest" property="pw"/>
<jsp:setProperty name="beantest" property="mail"/>
<jsp:setProperty name="beantest" property="uname"/>
<jsp:setProperty name="beantest" property="num"/>
<jsp:setProperty name="beantest" property="year"/>
<jsp:setProperty name="beantest" property="month"/>
<jsp:setProperty name="beantest" property="day"/>

<center>
<h3>Join Check</h3>
<hr/>
<table>
	<tr>
		<td>아이디 :</td>
		<td><jsp:getProperty name="beantest" property="uid"/></td>		
	</tr>
	<tr>
		<td>비밀번호 :</td>
		<td><jsp:getProperty name="beantest" property="pw"/></td>		
	</tr>
	<tr>
		<td>메일주소 :</td>
		<td><jsp:getProperty name="beantest" property="mail"/></td>		
	</tr>
	<tr>
		<td>이름 :</td>
		<td><jsp:getProperty name="beantest" property="uname"/></td>		
	</tr>
	<tr>
		<td>주민등록번호 :</td>
		<td><jsp:getProperty name="beantest" property="num"/></td>		
	</tr>
	<tr>
		<td>생일 :</td>
		<td>
			<jsp:getProperty name="beantest" property="year"/>년 
			<jsp:getProperty name="beantest" property="month"/>월 
			<jsp:getProperty name="beantest" property="day"/>일 
		</td>		
	</tr>
</table>
</center>
</body>

</html>

 

 

 

 

참고 문헌 :