수업/정리

220311 회원관리2_회원가입, ID 중복검사

jumphare 2022. 3. 11. 21:20

 *** 회원관리
 * 기능 사용
   - Connection Pool -> 커넥션 생성-서버 연결
   - 액션태그 : <jsp: useBean> , <jsp: setProperty> -> 값 저장
   - DTO, DAO 클래스  -> java resourse-src-member
   - Session -> 로그인~로그아웃까지, 섹션값 공유되므로 페이지 옮겨다녀도 로그인 풀리지 않음


+) 서버가 사용중이라는 에러가 뜬다면
작업관리자-세부정보- javaw.exe를 작업끝내기 하고 다시 실행... 
아니면 톰캣 커넥션을 껐다 켜등가.......

서버 계정 새로 연결하깅
Data Source Explorer - new- name: New Oracle(totoro) 계정 구분 위해 - 계정명/비번 바꿔주고 (save password 체크) - Test connection으로 연결 확인하고 석세스 -> finish ㄱ

DTO : 테이블 컬럼대로 변수 생성한 후 각 setter, getter 생성하기


DAO : 서버에 접근하는 메소드를 정의할 것
---- 위의 둘 DTO, DAO는 jsp파일에서 객체 불러올 때 반드시 import 해줄 것.

 

4. 회원 가입 : memberform.html --> member.jsp --> loginform.html

 - member.jsp에서 값을 받을 때, 반드시 텍스트를 인코딩시켜야 함

 - 여러 값을 가져올 때, 자바빈을 이용해 DTO에 중간저장 하면 편리하게 가져올 수 있음 (텍스트 값들)

<%
   request.setCharacterEncoding("utf-8");
%>

<jsp:useBean id="member" class="member.MemberDTO" />
<jsp:setProperty name="member" property="*" />


 - checkbox로 여러 값을 받는 경우, String[]형인 getParameterValues(String name)로 받아옴
받아온 값을 반복문을 이용해 하나의 문자열에 저장.

단, 필요 시 다시 나눠야 하니 구분자를 추가해 저장하고 String형으로 선언된 서버의 테이블로 전송할 것.

<% //checkbox 등으로 여러 값을 받는 경우 : String[]형에 저장
String[] hobby = request.getParameterValues("hobby");
//저장한 값들을 하나의 문자열로 결합할 것 (단, 필요 시 나눌 수 있도록 구분자를 사용)
String h = "";
for (String h1 : hobby) {          // 반복문이 돌아가는 동안 배열 hobby의 값을 h1에 넣음
    h += h1 + "-";                            //구분자를 추가해 배열의 값을 하나의 문자열로 저장
}
member.setHobby(h);            //하나의 문자열로 저장한 값을 DTO의 setter로 db서버에 저장할 것.
%>


5. ID 중복검사 : member.js -> idcheck.jsp || idcheck1.jsp
  I. 팝업 창 띄워 결과 출력 -> 동기적 방식 : DAO에서 select문으로 검색 후 ResultSet rs.next()=true면 중복!

   - member.js에서 유효성 검사 후, idcheck.jsp로 연결되는 팝업창을 띄움

$("#idcheck").click(function(){
  if($("#id").val()==""){
    alert("ID를 입력하세요.");
    $("#id").focus();
    return false;
  }else{
    // open("팝업창에 실행될 문서명","윈도우이름","옵션")
    var ref="idcheck.jsp?id="+$("#id").val();
    window.open(ref,"mywin","width=250,height=150");
  }
});

   - 입력받은 id 파라미터값을 가져와서 DAO의 MemberAuth(String id)의 매개변수로 보냄

<%
   String id=request.getParameter("id"); 

   MemberDAO dao=MemberDAO.getInstance();
   int result=dao.memberAuth(id);
%>

   - 사용 불가능한 ID는 아래 '닫기' 버튼 생성

중복 ID입니다. <br><br><br>
<input type=button id="close1" name="close1" value="닫기">
   $(document).ready(function(){
    $("#close1").click(function(){
      opener.$("#id").val("").focus();           //opener: 이 창을 열게 한 -> 가입폼
      window.close();
    });

   - 사용 가능한 ID일 경우 '사용' 버튼과 '다른 아이디 사용' 버튼을 생성

사용 가능한 ID입니다. <br><br><br>
<input type=button id="close2" name="close2" value="사용하기">
<input type=button id="close1" name="close1" value="다른 아이디 사용">
    $("#close2").click(function(){         //사용하기 -> 비밀번호로 포커스 넘김
      opener.$("#passwd").focus();
      window.close(); 
    });


  II.페이지 내에 결과 출력 -> 비동기적 방식 : ajax 사용해 idcheck1.jsp 파일에서 웹브라우저 출력값을 콜백함수의 매개변수로 받아 폼에 출력시키는 방식 이용

   - member.js에서 유효성 검사 후 idcheck1.jsp로 data를 보내고, 결과값을 리턴받아 memberform.html에 만들어둔 "id" 위치에 출력되도록 함

$("#idcheck").click(function(){
   if($("#id").val()==""){
      alert("ID를 입력하세요.");
      $("#id").focus();
      return false;
   }else{
      var id=$("#id").val();          //사용자가 입력한 id

      $.ajax({
         url: "idcheck1.jsp",
         type:"post",                       //get, post, put, delete
         data: {"id" : id},                 //id="id"인 태그의 value를 json형태로 보냄
         success:  function(data){   //리턴받은 값은 콜백함수의 data로 들어감
            if(data==1) {                    //1= true=중복, -1=false
               $("#myid").text("중복 ID입니다.");
               $("#id").val("").focus();
             } else {
               $("#myid").text("사용 가능한 ID입니다.");
               $("#passwd").focus();
            }
         }
      }); //ajax
   }
});//click

   - 입력받은 id 값을 memberAuth(String id)의 매개변수로 보내고 결과 받은 것을 웹브라우저에 출력함

   - success 시, 웹브라우저에 출력된 값이 콜백함수(function(data)) 로 리턴되어 memberform에 출력됨

<%
   String id=request.getParameter("id"); 

   MemberDAO dao=MemberDAO.getInstance();
   int result=dao.memberAuth(id);
%>

out.println(result);      // success:  function(data) <-출력된 result가 여기 data로 들어감