본문 바로가기
CLASS/SERVLET

#1-2 / Front form태그 + servlet

by eungSe__ 2024. 5. 28.
✅ servlet -  데이터를 주고 받는 방식

user 사용자가 url 입력
🔽
web Abache web.xml
🔽
html or jsp or .do 사용자가 정보 입력
🔽
form or afjax (with front)
1. Form or ajax 데이터 전송 방식
2. Post,Get,Put,Delete,...  
3. name값 통일화 or 파라미터명 조율
4. javascript 전송
🔽
web.xml 작동
🔽
java 핸들링(Servlet + Class + Abascact...등)  ◀-▶  Database
🔽
결과출력

 

 

doPost : 프론트에서 request로 날라옴 (문자로)

⚡ html + java

web.xml

.html 명칭과는 무관 /프론트가 html- form action에 url-pattern만 잘 넣어주면 됨!!
servlet-name 은 아무거나 해도 무관 / servlet-class 는 진짜 내가 만든 java파일 명으로 해줘야함
 
  <!-- idcheck -->
  <servlet>
	  <servlet-name>idcheck</servlet-name>
	  <servlet-class>web.idcheck</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>idcheck</servlet-name>
  	<url-pattern>/idcheck.do</url-pattern>
  </servlet-mapping>



html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복체크 프로세서</title>
</head>
<body>
	<form id="idck_form" method="post" action="./idcheck.do">
		아이디 : <input type="text" name="mid">
		<button type="button" onclick="idcheck()">아이디 중복체크</button>
	</form>
</body>

<script type="text/javascript">
	function idcheck(){
		if(idck_form.mid.value ==""){
			alert("아이디를 입력하세요");
			f.mid.focus();
		}else{
			idck_form.submit();
		}
	}
</script>
</html>



servlet(java)

public class idcheck extends HttpServlet {
	private static final long serialVersionUID = 1L;

	PrintWriter pw = null;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		
		String mid = request.getParameter("mid"); //html의 해당 input name값과 맞춰야함
		this.pw = response.getWriter(); // static이 아니라서 this 사용 가능
		if(mid.equals("")) {
			this.pw.write("<script>"
					+ "alert('올바른 접근이 아닙니다.');"
					+ "history.go(-1);"
					+ "</script>");
		}else {
			if(mid.equals("admin")) {
				this.pw.write("<script>"
					+ "alert('해당 아이디는 사용 불가입니다.');"
					+ "history.go(-1);"
					+ "</script>");
			}else {
				this.pw.write("<script>"
					+ "alert('사용 가능한 아이디입니다.');"
					+ "location.href = 'http://naver.com';"
					+ "</script>");
			}
		}
		this.pw.close();
	}
}

 

⚡ 메일 중복 확인
 
<!-- email -->
<servlet>
     <servlet-name>emailok</servlet-name>
     <servlet-class>web.emailok</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>emailok</servlet-name>
    <url-pattern>/emailok.do</url-pattern>
</servlet-mapping>


- html file(input type="hidden" 활용)
- form태그에 enctype="application/x-www-form-urlencoded" : 사용자가 입력한 값 암호화해서 전달

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이메일 인증확인 페이지</title>
</head>
<script type="text/javascript">
	function check(){
		if(f.email1.value =="" || f.email2.value ==""){
			alert("이메일 주소를 입력해 주세요")
		}else{
			f.email.value = f.email1.value + "@" + f.email2.value;
			f.submit();
		}
	}
</script>
<body>
	<form id="f" method="post" action="./emailok.do">
		<input type="hidden" name="email" value="">
		<input type="text" name="email1">@<input type="text" name="email2">
		<input type="button" value="인증확인" onclick="check()">
	</form>
</body>
</html>

 

public class emailok extends HttpServlet {
	private static final long serialVersionUID = 1L;

	PrintWriter pw = null;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		
		String webmail = request.getParameter("email");
		String msg = "";
		if(webmail.equals("")) {
			msg = "alert('올바른 접근이 아닙니다'); history.go(-1);";
		}else {
			if(webmail.equals("apink@naver.com")) {
				msg = "alert('이미 인증된 메일입니다.'); history.go(-1);";
			}else {
				msg = "alert('인증번호 전송 완료'); location.href = 'http://naver.com';";
			}
		}
		this.pw = response.getWriter();
		this.pw.write("<script>"+msg+"</script>");
		this.pw.close();
	}

}

 

⚡ 인증번호 + 회원가입 => java 배열로 받기

-html
 
<style>
	form{width : 380px; text-align : center;}
	#securebox {border :1px solid #ccc; display:inline-block; width : 300px; height : 30px; text-align : center; background-color : #eee;box-sizing: border-box;   line-height: 28px;}
	input[type='text'] {width : 100%; height : 30px; border : 1px solid #ccc; box-sizing : border-box;margin:5px 0;}
	input[name='join'] {width : 100%; height : 40px; background-color : black; color : #fff;}
</style>
<body>
	
	<form action="./join.do" method="post" id="join_form" onsubmit="return joinhtml()" enctype="application/x-www-form-urlencoded">
		<div>
			<p>[ 간편회원가입 ]</p>
			<span id="securebox"></span> <input type="button" value="새로고침" onclick="innerSecurity()"> <br>
		</div>
		<input type="text" id="secure" placeholder="위의 보안코드 4자리 숫자를 입력하세요"><br>
		<input type="text" name="mid" id="mid" placeholder="가입하실 아이디를 입력하세요"><br>
		<input type="text" name="mpw" id="mpw" placeholder="패스워드를 입력하세요"><br>
		<input type="submit" name="join" value="회원가입">
	</form>

</body>

<script>
	innerSecurity();
	
	//새로고침
	var security = "";
	function innerSecurity() {
		security = "";
		var sb = document.getElementById("securebox"); 
		
		var f;
		for(f=0; f < 4; f++){
		    var num = Math.ceil(Math.random()*9);
		    security += num;
		}
		sb.innerHTML = security;
	}

	function joinhtml(){
		var scbox = document.getElementById("securebox").innerHTML;
		
		if(join_form.mid.value == ""){
			alert("아이디를 입력하세요");
			return false;
		}else if(join_form.mpw.value == ""){
			alert("패스워드를 입력하세요");
			return false;
		}else{
			if(scbox == join_form.secure.value){
				return;
			}else{
				alert("보안코드를 확인해주세요");
				join_form.secure.value = null;
				return false;
			}
		}
	}
</script>



-servlet(java)
printWriter : 직접 html 핸들링 할 때 사용 (alert..등 script에 들어가는 내용)

public class join extends HttpServlet {
	private static final long serialVersionUID = 1L;
	PrintWriter pw = null;
	ArrayList<String> member = null;
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		new member_box(response); //encoding 관련 class
		
		this.pw = response.getWriter();
		member = new ArrayList<String>();
		String mid = request.getParameter("mid");
		String mpass = request.getParameter("mpw");
		String msg = ""; //출력 네세지
		
		if(mid.equals("master") || mid.equals("admin")) {
			msg = "alert('해당 아이디는 사용 불가합니다'); history.go(-1);";
		}else {
			Date today = new Date();
			SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			String date = sf.format(today);
			this.member.add(mid);
			this.member.add(mpass);
			this.member.add(date);
			System.out.println(this.member);
			
		}
		this.pw.write("<script>"+ msg +"</script>");
		this.pw.close();
		
	}	

}

class member_box {
	public member_box(HttpServletResponse response) {
		response.setContentType("text/html; charset=utf-8");
	}
}


servlet class 안에 인자값을 넣은 즉시실행 class 생성시 에러!
인코딩 관련 class를(+ 즉시실행) 밖에 별도로 빼면 간결하게 사용할수 있음

 

'CLASS > SERVLET' 카테고리의 다른 글

#2-4 / double form  (0) 2024.05.29
#2-3 / html 태그별 데이터 전송  (0) 2024.05.29
#2-2 / 검색에 따른 get 전송방식  (0) 2024.05.29
#2-1 / checkbox 및 라디오 핸들링  (0) 2024.05.29
#1-1 / Servlet start,setting  (0) 2024.05.28

관련글

티스토리툴바