회원가입 페이지를 만들어보자!
① 테이블 형식으로 깔끔하게 회원가입 틀을 만들어 주었다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function a() {
if (f.id.value.length < 6) {
alert("아이디의 길이는 6글자 이상이어야 합니다. 다시 입력하세요")
return;
}
if (f.pwd1.value.length < 5) {
alert("패스워드는 5글자 이상으로 해주세요")
return;
} else {
if (f.pwd1.value != f.pwd2.value) {
alert("패스워드가 일치하지 않습니다. 다시 입력해주세요")
return;
}
}
f.submit();
//submit() : 폼 제출 함수
}
</script>
</head>
<body>
<h3>회원가입</h3>
<form action="/webApp1/member/join" method="post" name="f">
<table border="1" cellspacing="0">
<!-- cellspacing : table 에 이중 실선 없애기 -->
<tr>
<th>ID</th>
<td><input type=text name="id"></td>
</tr>
<tr>
<th>PWD</th>
<td><input type=text name="pwd1"></td>
</tr>
<tr>
<th>PWD확인</th>
<td><input type=text name="pwd2"></td>
</tr>
<tr>
<th>Email</th>
<td><input type=text name="email"></td>
</tr>
<tr>
<th>가입</th>
<td><input type="button" value="가입" onclick="a()"></td>
</tr>
</table>
</form>
</body>
</html>
이렇게 테이블 형식으로 생성 해 주었고 이제 가입 버튼을 누르면 자신의 회원가입 정보가 뜰 수 있게 servlet을 연동 하자
② servlet 재 정의
package test;
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 join
*/
@WebServlet("/member/join")
public class join extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public join() {
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("euc-kr");
response.setCharacterEncoding("euc-kr");
response.setContentType("text/html; charset = EUC-KR");
//한글을 깨지지 않고 받아오는(응답response) encoding들
//사용자가 입력한 값을 HttpServletRequest request의 파라메터로 받아 와야한다.
//사용자는 request 하고 컴퓨터는 response 한다.
String id = request.getParameter("id"); //요청.의 파라미터로 id 받아온다
String pwd = request.getParameter("pwd1");//요청.의 파라미터로 pwd1 받아온다
String email = request.getParameter("email");//요청.의 파라미터로 email 받아온다
//응답페이지 생성 : 응답을 담당하는게 response
PrintWriter pw = response.getWriter();
//printWriter : 바이트를 문자 형태를 가지는 객체로 바꿔준다.
//getWriter(): 서블릿 컨테이너가 HTTP 요청에 대한 응답을
//생성하는 데 사용되는 출력 스트림을 반환한다.
//즉, 응답페이지에 출력할 출력 스트림.
//응답.의 출력 스트림을 문자형태로 출력하는 객체 pw 에 담아
//객체 pw에 덧붙일꺼야
pw.append("<html><body><h1>"); //html 에 형태, body 그리고 글씨크기까지도
pw.append("회원가입 완료 <br/>");
pw.append("id : " + id + "<br/>");
pw.append("pwd : " + pwd + "<br/>");
pw.append("email : " + email + "<br/>");
pw.append("</h1></body></html>"); //끝까지를 받아올껍니다
}
/**
* @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);
//post방식으로 method 를 정해 줬기 때문에 doGet에서 정의한거였음
}
}
'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - DOM (0) | 2023.03.26 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - 이미지 슬라이드 쇼 (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 이벤트(event) (0) | 2023.03.26 |
| [Javascript] 웹 페이지의 근육 심기 - 페이지 이동 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - 계산기 만들기 (0) | 2023.03.25 |
