만들어야할 과제
1. html로 폼 만들기
조건
1)아이디가 공백이라면 alert창 띄우기,서브밋 방지
2) 비밀번호가 공백인지? O -> alert창 띄우기 ,서브밋 방지
X -> 비밀번호와 비밀번호 재확인의 value가 다른지?
O -> alert창, 서브밋 방지
X -> 서브밋!
2. 받은 요청 파라미터의 정보들을 화면에 출력하기
Register.java
package ex01;
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;
/**
* Servlet implementation class Register
*/
@WebServlet("/register")
public class Register extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Register() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//요청 인코딩
request.setCharacterEncoding("UTF-8");
//요청 파라미터
String id = request.getParameter("id");
String pw = request.getParameter("pw");
String name = request.getParameter("name");
String year = request.getParameter("year");
String month = request.getParameter("month");
String day = request.getParameter("day");
String gender = request.getParameter("gender");
String email = request.getParameter("email");
String country = request.getParameter("country");
String tel = request.getParameter("tel");
//응답 타입
response.setContentType("text/html; charset=UTF-8");
//스트림
PrintWriter out=response.getWriter();
// 응답
out.println("<!DOCTYPE html>");
out.println("<html lang=\"ko\">");
out.println("<head>");
out.println("<meta charset=\"UTF-8\">");
out.println("<title>회원가입정보</title>");
out.println("</head>");
out.println("<body>");
out.println("<ul>");
out.println("<li>아이디: " + id + "</li>");
out.println("<li>비밀번호: " + pw + "</li>");
out.println("<li>이름: " + name + "</li>");
int m = month.isEmpty() ? 0 : Integer.parseInt(month);
int d = day.isEmpty() ? 0 : Integer.parseInt(day);
out.println("<li>생년월일: " + year + "년 " + String.format("%02d", m) + "월 " + String.format("%02d", d) + "일" + "</li>");
out.println("<li>성별: " + (gender.equals("male") ? "남자" : gender.equals("female") ? "여자" : "선택안함") + "</li>");
out.println("<li>이메일: " + (email.isEmpty() ? "없음" : email) + "</li>");
out.println("<li>휴대전화: " + country + " " + tel.substring(1) + "</li>");
out.println("</body>");
out.println("</html>");
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
label {
display: block;
margin-top: 20px;
}
</style>
<script>
$(function(){
$('#frm_join').on('submit', function(event){
// 아이디 공백 체크
if($('#id').val() == ''){
alert('아이디는 필수입니다.');
$('#id').focus();
event.preventDefault(); // submit 방지
return; // 아래 코드를 할 필요 없다.
}
// 비밀번호 입력 체크
if($('#pw').val() == '' || $('#pw').val() != $('#pw2').val()){
alert('비밀번호를 확인하세요.');
event.preventDefault(); // submit 방지
return; // 아래 코드를 할 필요 없다.
}
});
});
</script>
</head>
<body>
<form id="frm_join" method="post" action="/servlet_ex/register">
<div>
<label for="id"><strong>아이디</strong></label>
<input type="text" name="id" id="id"><span>@naver.com</span>
</div>
<div>
<label for="pw"><strong>비밀번호</strong></label>
<input type="password" name="pw" id="pw">
</div>
<div>
<label for="pw2"><strong>비밀번호 재확인</strong></label>
<input type="password" id="pw2">
</div>
<div>
<label for="name"><strong>이름</strong></label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="yyyy"><strong>생년월일</strong></label>
<input type="text" name="year" id="yyyy" placeholder="년(4자)" maxlength="4" size="4">
<select name="month">
<option value="">월</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<input type="text" name="day" placeholder="일" maxlength="2" size="4">
</div>
<div>
<label for="gender"><strong>성별</strong></label>
<select name="gender" id="gender">
<option value="">성별</option>
<option value="male">남자</option>
<option value="female">여자</option>
<option value="none">선택 안함</option>
</select>
</div>
<div>
<label for="email"><strong>본인 확인 이메일</strong>(선택)</label>
<input type="text" name="email" id="email" placeholder="선택입력">
</div>
<div>
<label for="tel"><strong>휴대전화</strong></label>
<div>
<select name="country">
<option value="+233">가나 +233</option>
<option value="...">...</option>
<option value="+82" selected>대한민국 +82</option>
<option value="...">...</option>
<option value="+832">홍콩 +832</option>
</select>
</div>
<input type="text" name="tel" id="tel" placeholder="전화번호 입력" size="10">
<input type="button" value="인증번호 받기">
<div>
<input type="text" placeholder="인증번호 입력하세요" disabled>
</div>
</div>
<div style="margin-top: 20px;">
<button type="submit">가입하기</button>
</div>
</form>
</body>
</html>
'Servlet' 카테고리의 다른 글
| 02Servlet_ex>ex02 (구구단) (0) | 2023.10.01 |
|---|
