1014 JSP - (FunWeb) 아이디 중복 체크

Contents

FileZilla 다운로드

FileZilla_3.61.0_win64_sponsored2-setup.exe

11.74MB

 

 

 

 

https://filezilla-project.org/

 

 

 

이클립스 수행

---

web.xml

  <!--커넥션 풀 연결 설정 -->
<resource-ref>
	<description>Funweb DB Connect</description>
	<res-ref-name>jdbc/funweb</res-ref-name>
	<res-type>javax.sql.DataSource</res-type>
	<res-auth>Container</res-auth>

</resource-ref>
<!--커넥션 풀 연결 설정 -->

 

 

 

 

context.xml 을 meta에 복붙 

---

context.xml

 

 

 

 

 

 

 

회원가입 - memberJoin() 메서드 만들기 

---

memberDAO 

//회원가입 - memberJoin()
	
	public void memberJoin(MemberDTO dto) {
		
		//1.2 디비 연결
		try {
			con = getConnection();
		//3. SQL 작성 & pstmt 객체
			sql = "insert into itwill_member(id,pw,name,birth,gender,email,addr,tel) "
					+ "values(?,?,?,?,?,?,?,?)";
			pstmt = con.prepareStatement(sql);
			
		//??
		pstmt.setString(1, dto.getId());
		pstmt.setString(2, dto.getPw());
		pstmt.setString(3, dto.getName());
		pstmt.setString(4, dto.getBirth());
		pstmt.setString(5, dto.getGender());
		pstmt.setString(6, dto.getEmail());
		pstmt.setString(7, dto.getAddr());
		pstmt.setString(8, dto.getTel());
		
		//4. SQL 실행
		int result = pstmt.executeUpdate();
		
		if(result>0) { //회원가입을 성공했다 
			System.out.println("DAO : 회원가입 성공");
			
		}
		} catch (Exception e) {
			e.printStackTrace();
		}

		
		
	}
	//회원가입 - memberJoin()

회원가입 해주는 메서드, 실행할 때 회원정보(DTO)를 받아서 사용 리턴 x 실행결과가 0 보다 클 때 메세지 출력

 

 

 

MemberJoinAction

// DAO 객체 생성 - 회원가입 메서드 호출
    MemberDAO dao = new MemberDAO();
    dao.memberJoin(dto);
    System.out.println(" M : 회원가입 성공");
    // 페이지 이동(준비)
    ActionForward forward = new ActionForward();
    forward.setPath("./Memberlogin.me");
    forward.setRedirect(true);

    /** 리턴을 해야만 컨트롤러가 이 정보를 사용할 수 있음.
     */
    return forward;

 

 

상대경로로 바꿔주기 

---

member - login.jsp 

 

 

가상주소로 바꿔준다. 

---

inc - top.jsp

 

 

글씨 크기 줄이기 (필수작업x)

---

default.css

 

 

 

 

Web에서 아이디 중복확인 하기 

---

join.jsp

<article>
        <h1>회원 가입</h1>
        <!-- 10.14 -->
        <form action="./MemberJoinAction.me"  method="post" id="join"
            name="fr" onsubmit="alert('데이터유효성체크완료')">

 

 

 <![endif]-->
 
 <!-- 10.14   -->
 <script type="text/javascript">
 	function winopen(){
 	alert('아이디 중복체크 시작');
//아이디창에 아이디가 입력여부
    if(document.fr.id.value == ""){
        alert('아이디를 입력하세요!');
        document.fr.id.focus();

        return;
 	}
    //입력된 아이디 정보
 	var inputID = document.fr.id.value;
    
   //새창 열기
 	window.open("./MemberIdCheck.me?inputID="+inputID","","width=400,height=200,top=600,left=500");
   }

<!-- 10.14 -->
    <!-- 중복체크 창 띄우기 -->
    <input type="button" value="중복체크" class="dup" onclick="winopen();"><br>

winfunction은 존재하는 게 아니고, 내가 임의로 만드는 function임.

 

 

 

아이디 중복 확인 - 작은 팝업 창 열기 

---

저 창의 크기가 300,500인 것. 

 

window.open("이동할 주소"," ","width=400,height=200,top=600,left=500");

 

 

 

 

MemberFrontController

}

else if(command.equals("/MemberIdCheck.me")) {
    System.out.println(" C : /MemberIdCheck.me 호출");
        forward = new ActionForward();
        forward.setPath("./member/idCheck.jsp");
        forward.setRedirect(false);
}

 

idCheck.jsp 생성 (중복체크)

<h1>idCheck.jsp(중복체크)</h1>

<form action="./MemberIdCheckAction.me" method="post">
    아이디 : <input type="text" name="userid" value="${param.inputId}">
    <input type="submit" value="중복확인">
</form>

 

 

 

MemberIdCheckAction() 객체 생성

---

MemberFrontController

//MemberIdCheckAction() 객체 생성
			action = new MemberIdCheckAction();
			
			try {
			forward = action.execute(request, response);
			
		}catch (Exception e) {
			e.printStackTrace();
		}
			
		}

 

MemberIdCheckAction

 

 

 

 

 

 

아이디 중복체크 - memberIdCheck(ID)

MemberDAO 

//아이디 중복체크 - memberIdCheck(ID)
public int memberIdCheck(String id) {
    int result = 0; // 0 - 중복이 아니다(아이디사용O) 1 - 중복이다(아이디사용X)

    //1.2 디비연결
    try { 
        con = getConnection();

        //3.sql & pstmt 
        sql = "select * from itwill_member where id=?";
        pstmt = con.prepareStatement(sql);

        //??
        pstmt.setString(1, id);

        //4.sql 실행
        rs = pstmt.executeQuery();

        //5.데이터처리
        if(rs.next()) {
            //회원이 있다 (중복이다)
            result = 1;
            System.out.println(" DAO : 아이디 중복 결과 ("+result+")");
        }
            //result == 0 
            System.out.println(" DAO : 아이디 중복 결과 ("+result+")");


    }catch(Exception e) {
        e.printStackTrace();

    }finally {
        closeDB();
    }



    return result;
}
//아이디 중복체크 - memberIdCheck(ID)

 

 

 

아이디 체크 메서드 호출

MemberIdCheckAction

//DB에 확인 - DAO 생성 - 체크 메서드 호출
    MemberDAO dao = new MemberDAO();
    int result = dao.memberIdCheck(userid);

    if(result ==1) {
        System.out.println(" M : 아이디 중복 O, 사용불가");
    }else {
        System.out.println(" M : 아이디 중복 X, 사용가능");
    }

    //Action 정보 -> JSP 페이지 전달 
    request.setAttribute("result", result);

    //페이지 이동(준비)
    ActionForward forward = new ActionForward();
    forward.setPath("./member/idCheck.jsp?inputID="+userid);  //받는 쪽에서 inputID라고 받고 있기 때문, 데이터를 userid라고 쓴 이유는 받아올 때는 userid 라고 썼기 떄문이다. 
    forward.setRedirect(false);  //controller로 리턴, 리턴 된 채로 3단계로 이동

    return forward;
	}

}

 

idCheck.jsp

<script type="text/javascript">
	function useID(){
		alert('아이디 사용하기');
		
		// 확인 된 아이디를 회원 가입창으로 전달 
		opener.document.fr.id.value = document.ckfr.userid.value;
		// 해당창 종료
		window.close();
		
	}
	</script>
</head>
<body>
	<h1>idCheck.jsp(중복체크)</h1>
	
	<form action="./MemberIdCheckAction.me" method="post" name="ckfr">
		아이디 : <input type="text" name="userid" value="${param.inputID}">
		<input type="submit" value="중복확인">
	</form>
	
	${requestScope.result }
	
	<c:if test="${requestScope.result != null }">
		<c:if test="${result == 0 }">
			<h3>사용 가능한 아이디입니다. <a href="javascript:useID();">사용하기</a></h3>
			<input type= "button" value="사용하기" onclick="userID();">
			//h3 안에 동작 넣는건 권장 안함. 궁극적으로는 오류를 야기할수도 있음.
		</c:if>
	
		<c:if test="${resultScope.result == 1 }">
			<h3>이미 사용중인 아이디입니다. </h3>
		</c:if>
	</c:if>

 

아이디 입력 후 -> 중복 체크 -> 다른 아이디 누르고 사용하기 눌러도

아이디 입력 창에 똑같이 변경 된 아이디로 나옴. 

 

 

 

 

login.jsp

li><a href="./MemberJoin.me">Join us</a></li>

<h1>로그인</h1>
	<form action="./MemberLoginAction.me" id="join" method="post"
		onsubmit=" alert('입력정보 체크');">
		<fieldset>
			<legend>Login Info</legend>
			<label>아 이 디 </label><input type="text" name="id"><br>
			<label>비 밀 번 호</label><input type="password" name="pass"><br>
		</fieldset>
		<div class="clear"></div>
		<div id="buttons">
			<input type="submit" value="로 그 인" class="submit"> <input
				type="button" value="회 원 가 입" class="cancel"
				onclick="location.href='./MemberJoin.me';">
		</div>
	</form>

 

 

 

 

memberFrontController

else if(command.equals("/MemberLoginAction.me")) {
			System.out.println(" C : /MemberLoginAction.me 호출");
			System.out.println(" C : 패턴2) DB 사용 O, 페이지 이동");
			
		}

 

MemberloginAction 객체 생성

---

MemberLoginAction 페이지 생성

package com.itwillbs.member.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MemberLoginAction implements Action {

	@Override
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) throws Exception {
		System.out.println(" M : MemberLoginAction_execute 호출");
		return null;
	}

}

 

memberFrontController

//MemberLoginAction 객체
			action = new MemberLoginAction();
			
			try {
				forward = action.execute(request, response);
			} catch (Exception e) {
		
				e.printStackTrace();
			}
		}

 

 

 

로그인 여부 메서드 생성

---

숙제!

 

 

 

 

 

 

 

JQuery 추가 

---

프로젝트 우클릭 -> Configure

없으면, MarketPlace 가서 Tern 설치 하면 됨.