240118 join.jsp, Join.java, IDcheck.java 만들기

240118 join.jsp, Join.java, IDcheck.java 만들기

2024. 1. 18. 17:09ㆍ2023.11.21-2024.05.31

<script type="text/javascript">
	$(function() {
		$('.id-alert, .name-alert, .pw-alert').hide();
	});

	function check() {
		// $(선택자).할일();
		let id = $("#id").val();
		if (id.length < 3 || id == "") {
			$('.id-alert').show();
			$("#id").focus();

			return false;
		}
		$('.id-alert').hide();
		
		let name = $('#name').val();
		if (name.length < 3) {
			$('.name-alert').show();
			$('#name').focus();
			return false;
		}
		$('.name-alert').hide();
		
		let pw1=$('#pw1').val();
		let pw2=$('#pw2').val();
		
		if (pw1 != pw2) {
			alert("비밀번호가 일치하지 않아")
			$('#pw2').val("");
			$('#pw2').focus();
			
			return false;
		}
		$('.pw2-alert').hide();
		
		if (pw1.length < 8) {
			$('.pw-alert').show();
			$('#pw1').focus();
			return false;
		}
		$('.pw1-alert').hide();
		
		if (pw2.length < 8) {
			alert("암호는 8글자 이상 부탁해")
			$('#pw2').focus();
			return false;
		}
		$('.pw2-alert').hide();
	}

1교시

클래스 추상클래스

오버라이딩 오버로딩

var let const 호이스팅(https://velog.io/@elma98/%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EB%8C%80%EB%B9%84-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-Hoisting

회원가입에 제이쿼리 넣기

*제이쿼리?

제이쿼리(jQuery)

제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다.

제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.

또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다.

https://tcpschool.com/jquery/intro(tcp스쿨)

https://learn.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

Microsoft Ajax Content Delivery Network Assets

The Microsoft Ajax Content Delivery Network (CDN) hosts popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications.

learn.microsoft.com

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
</head>

join.jsp에 헤드 위에 넣어주기> 제이쿼리 쓸거야라고 선언이 되어있는 상태이다.

제이쿼리 쓸거야 라고 불러드리는 화면이 필요하다.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js">
	$(document).ready(function (){
		//제이쿼리 시작
		alert("제이쿼리가 동작합니다.");
	});
</script>

>제이쿼리 시작!!(외워주면 좋다)

check() 로 만들어주기

가입하기 버튼 >submit

form태그에 return check() 만들어주기

	<script type="text/javascript">
		   function check() {
	    //  alert("제이쿼리가 동작합니다.");
	      let id = $("#id").val();
	      alert(id);
	      return false;
	   }
	</script>

2교시 시험

후다닥 보고 자야지

아직 시험 안봄

	<script type="text/javascript">
		   function check() {
	    //  alert("제이쿼리가 동작합니다.");
	      let id = $("#id").val();
	      alert(id + " : " + id.length + "숫자검사 : " + isNaN(id));//Not a Number, 숫자면 거짓 문자면 참
	      return false;
	   }
	</script>

숫자, 문자 판독

아이디, 이름, 비밀번호 유효성 검사하기

<script type="text/javascript">
	function check() {
		//  alert("제이쿼리가 동작합니다.");
		// $(선택자).할일();
		let id = $("#id").val();
		//  alert(id + " : " + id.length;
		if (id.length < 3 || id == "") {
			alert("아이디는 3글자 이상 부탁해");
			$("#id").focus();

			return false;
		}
		let name = $('#name').val();
		if (name.length < 3) {
			alert("이름은 3글자 이상 부탁해")
			$('#name').focus();
			return false;
		}
		
		let pw1=$('#pw1').val();
		let pw2=$('#pw2').val();
		if (pw1 != pw2) {
			alert("비밀번호가 일치하지 않아")
			$('#pw1').focus();
			return false;
		}
		
		if (pw1.length < 8) {
			alert("암호는 8글자 이상 부탁해 쨔샤")
			$('#pw1').focus();
			return false;
		}
		
		if (pw2.length < 8) {
			alert("암호는 8글자 이상 부탁해 임마")
			return false;
		}
	}
</script>

<div class="input-group mb-2 id-alert">
	<p class="alert">아이디를 잘 생각해보자</p></div>
<div class="input-group mb-2">
	<label class="input-group-text">이름</label> <input type="text"
	id="name" name="name" class="form-control" placeholder="이름을 적어줘">
</div>

<style type="text/css">
.id-alert, .name-alert, .pw-alert {
	background-color: #9cb395;
}

.id-alert {
	background-color: #9cb395;
}

.alert {
	color: #F4EBE7;
}
</style>

암호를 확인해주세요 숨기기

</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.id-alert').hide();
});

다른 모양

//$(document).ready(function (){
	$(funcion(){
	$('.id-alert').hide();
});

	function check() {
		//  alert("제이쿼리가 동작합니다.");
		// $(선택자).할일();
		let id = $("#id").val();
		//  alert(id + " : " + id.length;
		if (id.length < 3 || id == "") {
			//alert("아이디는 3글자 이상 부탁해");
			$('.id-alert').show();
			$("#id").focus();

			return false;
		}

계속 회원가입 안되고 오류나다가 겨우 고쳤다.

최종 정리

제이쿼리 사용해서 아이디, 이름, 암호 넣어서 회원가입하기.

<script type="text/javascript">
	$(function() {
		$('.id-alert, .name-alert, .pw-alert').hide();
	});

	function check() {
		// $(선택자).할일();
		let id = $("#id").val();
		if (id.length < 3 || id == "") {
			$('.id-alert').show();
			$("#id").focus();

			return false;
		}
		$('.id-alert').hide();
		
		let name = $('#name').val();
		if (name.length < 3) {
			$('.name-alert').show();
			$('#name').focus();
			return false;
		}
		$('.name-alert').hide();
		
		let pw1=$('#pw1').val();
		let pw2=$('#pw2').val();
		
		if (pw1 != pw2) {
			alert("비밀번호가 일치하지 않아")
			$('#pw2').val("");
			$('#pw2').focus();
			
			return false;
		}
		$('.pw2-alert').hide();
		
		if (pw1.length < 8) {
			$('.pw-alert').show();
			$('#pw1').focus();
			return false;
		}
		$('.pw1-alert').hide();
		
		if (pw2.length < 8) {
			alert("암호는 8글자 이상 부탁해")
			$('#pw2').focus();
			return false;
		}
		$('.pw2-alert').hide();
	}

class 추가해서 만들기

<h1>회원가입</h1>
	<div class="mx-3 p-3 bg-light">
		<form action="./join" method="post" onsubmit="return check()">
	<div class="input-group mb-2">
		<label class="input-group-text">아이디</label> 
		<input type="text"id="id" name="id" class="form-control" placeholder="아이디를 적어줘">
		<button class="input-group-text" onclick="return idCheck()" class="btn btn-success">ID검사</button>
	</div>
	<div class="input-group mb-2 id-alert">
		<p>아이디는 3글자 이상 부탁해</p>
	</div>
	<div class="input-group mb-2">
		<label class="input-group-text">이름</label> <input type="text"
		id="name" name="name" class="form-control" placeholder="이름을 적어줘">
	</div>
	<div class="input-group mb-2 name-alert">
		<p>이름은 3글자 이상 부탁할게</p>
	</div>
	<div class="input-group mb-2 -alert">
		<label class="input-group-text">암호</label> <input
		type="password" id="pw1" name="pw1" class="form-control"
		placeholder="암호를 적어줘"> <label class=input-group-text>재입력</label>
		<input type="password" id="pw2" name="pw2" class="form-control"
		placeholder="잘 적은거 맞지?">
	<div class="input-group mb-2 pw-alert">
		<p>암호는 8글자 이상 써줘야해 고마워.</p>
	</div>
     <div class="input-group mb-3">
              
     </div>

ID 유효성 검사 코드

function idCheck(){
		//alert('id검사를 눌렀습니다.');
		let id = $('#id').val();
		if(id.length < 3){
			alert("아이디는 5글자 이상이어야 합니다.");
			$('#id').focus();
		} else {
			//AJAX = 어려운 순서 : 1페이징, 2 AJAX, 3 파일업로드 
			alert(id);
		}
		return false;
		
	
	}

버튼 만들기> 아이디 div아래에 만들어주기

*비동기통신 알아두기

AJAX 만들기 -ID검사 할 수 있게 하기

function idCheck(){
		//alert('id검사를 눌렀습니다.');
		let id = $('#id').val();
		const regExp = "/[ㄱ-ㅎ-ㅏ-ㅣ 가-힣]/g";//한글
		alert(regExp.test(id)); //한글 포함여부 검사하는 정규식
		if(id.length < 5){
			alert("아이디는 5글자 이상이어야 합니다.");
			$('#id').focus();
		} else {
			//AJAX = 어려운 순서 : 1페이징, 2 AJAX, 3 파일업로드 
			$.ajax({
				url : './idCheck',//이동할 주소
				type : 'post', // post/ get
				dataType : 'text',// 수신할 타입
				data : {'id' : id},//보낼 값
				success : function(result){//성공시
					//alert("통신에 성공했습니다.");
					
					if(result == 1){
						alert("이건 이미 있어. 다시 생각해보자");
					} else{
						alert("OK, 다음~")
						
					}
					
				},
				error : function(request, status, error){//접속불가, 문제발생 등
					alert("문제가 발생했습니다.");
					
				}
			});
		}
		return false;

IDCheck.java 서블릿(join서블릿이랑 중복된다. 외우도록하자)

package com.sukgi.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sukgi.dao.MemberDAO;
import com.sukgi.dto.MemberDTO;


@WebServlet("/idCheck")
public class IDCheck extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
    public IDCheck() {
        super();
       
    }

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String id = request.getParameter("id");
		MemberDTO dto = new MemberDTO();
		dto.setMid(id);
		
		MemberDAO dao = new MemberDAO();
		int result = dao.idCheck(dto);
		
		System.out.println("검사 요청이 들어온 ID : " + id + " / 결과는 : " + result);
		
		PrintWriter pw = response.getWriter();
		pw.print(result);

		
	}

}

MemberDAO 에 idCkeck 만들기

public int idCheck(MemberDTO dto) {
		int result=1;
		
		Connection con = db.getConnection();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "SELECT COUNT(*) FROM member WHERE mid=?";
		
		try {
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1,dto.getMid());
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				result = rs.getInt(1);
			}
		} catch (SQLException e) {
			
			e.printStackTrace();
		} finally {
			close(rs, pstmt, con);
		}
		
		return result;
	}

저작자표시

'2023.11.21-2024.05.31' 카테고리의 다른 글

240123 게시판 만들기(방문흔적 찾아가기) (1)	2024.01.23
기록 (0)	2024.01.20
쿼리2 (0)	2024.01.15
쿼리1 (0)	2024.01.15
240106 >240109복습 게시판 만들기(Detail) (0)	2024.01.09

들쑥날쑥

들쑥날쑥

태그

최근글

댓글

공지사항

아카이브

제이쿼리(jQuery)

'2023.11.21-2024.05.31' 카테고리의 다른 글

관련글

티스토리툴바