뚜벅이 한걸음

JSP 홈페이지 만들기 - 회원가입 페이지 만들기 본문

JSP

JSP 홈페이지 만들기 - 회원가입 페이지 만들기

뚜벅뚜벅뚜벅이 2022. 5. 6. 22:54
반응형

JSP를 이용해서 홈페이지 만드는 것을 공부하고 있는데 많이 부족하지만 기록할겸 다시 공부할겸 블로그에도 올리려고한다!!

 

1. webapp에 board랑 member폴더를 만들어준다. 

 

 

memberJoin.jsp가 저장되어있는 경로

 

2. memberJoin.jsp

 

회원가입 페이지를 만들어 줄건데  memberJoin.jsp 를 만들어주고 다음과 같이 input태그등을 사용해서 만들어준다. 

마찬가지로 css는 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
<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8" %> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 페이지</title>
<link rel="stylesheet" href="memberJoin.css">
 
<body>
<h1>회원가입</h1>
 
<form name="frm">
<label ><span>아이디</span>
<input type="text" name="memberId" size="60"  value="" placeholder= " 아이디를 입력해주세요."></label>
<label ><span>비밀번호</span>
<input type="password" name="memberpwd" size="60" placeholder= " 비밀번호를 입력해주세요."></label>
<label ><span>비밀번호 확인</span>
<input type="password" name="memberpwdAgain" size="60" placeholder= " 비밀번호를 한번더 확인해주시길 바랍니다."></label>
<label><span>이름</span>
<input type="text" name="memberName" size="60" ></label>
<label><span>연락처</span>
<input type ="text" name ="memberPhone" size ="60" ></label>
<label><span>주민등록번호</span>
<input type = "text" name="memberJumin" size = "60" ></label>
<label><span>주소</span>
 <input type = "text" name = "memberAdress"size ="60"> </label>
<label><span>성별</span><!-- 라디오 버튼의 name 값이 같으면 중복 선택됨으로 같은 값으로 처리 -->
<input type="radio" name="memberGender" value="m" checked>남자
<input type="radio" name="memberGender" value="f">여자
</label>
<label><span>취미</span><!-- 중복선택이 가능한것은 name을 동일하게하고 jsp에서 배열로 받아야한다.  -->
<input type="checkbox" name="memberHobby" value = "soccer" checked>축구
<input type="checkbox" name="memberHobby" value = "basketball">농구
<input type="checkbox" name="memberHobby" value = "baseball">야구
</label><br>
<label><span>이메일</span>
<input type="email" name="memberemail" placeholder="id@email.com" size = "60px"></label><br>
<div class=wrapper><button id="bt" type="button" name= "button" value="submit"  onclick= "check();">회원가입</button></div>
 
</form>
</body>
</html>
 cs

12행: input 태그들은 form 태그로 감싸주어야한다.

사용자들이 회원가입페이지에서 정보를 입력하면 정보를 form 하나의 단위로 넘겨주기 때문이다. 

 

※ form  태그의 기능에는 action과 method가 있다.

action 을 사용하면 url이 만들어지고 method를 사용해서 어떻게 정보들을 보낼것인지 지정해줄 수있다.

method는 get과 post방식을 사용할 수있다.

get은 주소창에 정보다 다 보이고, post는 편지봉투처럼 접어서 보낸다고 이해하고있다. 주소창에 보이않는다. 

보안을 위해서는 post를 추천!

 

form 태그에는 이름을 꼭 지정해주어야하는데 이후에 name으로 form객체를 받아서 데이터로 처리하기 때문이다.

이때 form 태그의 이름은 디비 상의 이름과 동일하게 만들어주는 것이 좋다. 

 

38행: form태그의 값들을 전송하는 버튼. onclick();함수를 만들어서 값을 넘길 수 있도록 한다. 

이때 이 함수에는 유효성 검사도 포함하도록한다. 

 

 

 

3. 유효성 검사

 

유효성 검사는 회원가입을 할때 아이디나 비밀번호를 입력하지 않았을 때 "아이디를 입력해 주세요" 등의 알림창을 띄어주고 커서를 값을 입력해야하는 곳으로 이동해주는 기능을 만든다.

 

memberJoin.jsp의 head 영역에 script영역을 만들고 아래와 같이 작성해준다. 

 

3행 : form 태그의 이름인 frm을 document.frm을 이용해서 변수에 담기

4행:  value값이 있는지 없는지 체크한다.

(value값은 input태그에서 입력을 받는 값이 들어오는 곳으로 html태그에서 값을 미리 지정하지 않는다. )

화면단에서 사용자가 정보를 입력하면 그 값을 value로 받아야하기 때문이다.

6행: focus(); 로 커서를 이동시켜준다.

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
 
function check(){
    var fm =document.frm;
    if(fm.memberId.value == ""){ /
        alert("아이디를 입력하세요");
        fm.memberId.focus();// 알림이 뜨고 난 후 알림이 뜬 이유의 위치로 포인터가 뜨도록 설정
        return;
    }else if(fm.memberpwd.value==""){ //value 값이 있는지 없는지 체크
        alert("비밀번호를 입력하세요");
        fm.memberpwd.focus();
        return;
    }else if(fm.memberpwdAgain.value==""){
        alert("비밀번호가 다릅니다.");
        fm.memberpwdAgain.focus();
        return;
    }else if(fm.memberName.value==""){
        alert("이름을 입력하세요");
        fm.memberName.focus();
        return;
    }else if(fm.memberPhone.value==""){
        alert("연락처를 입력하세요");
        fm.memberPhone.focus();
        return;
    }else if(fm.memberJumin.value==""){
        alert("주민등록번호를 입력하세요");
        fm.memberJumin.focus();
        return;
    }else if(fm.memberAdress.value==""){
        alert("주소를 입력하세요");
        fm.memberAdress.focus();
        return;
    }else if(fm.memberemail.value==""){
        alert("이메일을 입력하세요");
        fm.memberemail.focus();
        return;
    }else{    // 멤버가 취미를 하나도 선택하지 않았을경우
        var chkYN = false;
        for(var i = 0; i<fm.memberHobby.length;i++){
            if(fm.memberHobby[i].checked == true){ // 하나라도 체크가 되어있다면
                chkYN = true;
                break;
            }
        }
        if (chkYN == false){
            alert("취미를 한개이상 선택해주세요");
            return;
            }
 
    }
    
   
    
    fm.action ="<%=request.getContextPath()%>/member/memberJoinAction.do";     //서블릿이 가짜 경로를 받아서 서블릿에서 처리하도록하기
    fm.method ="post";
    fm.submit();
    
    return;
    }
 
 cs
 

54행: form 태그의 action기능을 사용해서 데이터들을 넘겨준다. 

실제경로를 action으로 지정하면 보안에 문제가 생길 수있다. 따라서 물리적인 경로를 알 수없도록 가상주소를 만들어준다. 

버튼을 누르면 실행되기때문에 memberJoinAction.do 로 만들어주었다.

 

진짜경로  fm.action = "./memberJoin.jps"

가상경로  fm.action = "/member/memberJoinAction.do"

 

 

가상경로를 만들때 앞의 /member/를 적어주는 이유는 앞으로 만들어나갈 jsp 페이지가 board와 member로 구분이 되기때문이다. 

 

나는 boardController와 memberController를 따로 만들것이기 때문에 controller로 넘어가는 것들을 구분하기 위해 만들어주었다.

 

 

지금은 회원가입버튼을 누르면 아무것도 없는 하얀 화면이 나오면 성공이다. 이제 가상경로로 넘어갔을때 어떤일이 일어나는지 처리하면된다. 

반응형

'JSP' 카테고리의 다른 글

<c:foreach>에서의 varStatus 속성  (0) 2022.08.06
로그인하면 로그아웃으로 변경 JSP  (0) 2022.07.12
JSP 홈페이지 만들기 -회원가입페이지 - Controller 만들기  (0) 2022.05.09
'JSP' Related Articles more