개발/Servlet/JSP 게시판 만들기

[서블릿 Servlet JSP 게시판 만들기] 04. 회원가입 기능 구현 1 - JSP

Monsh 2021. 2. 10. 20:13
반응형

 

WebContent 폴더 안에 JSP File을 하나 만듭니다.

파일 이름은 임의로 정하셔도 되지만, 처음이시라면 똑같이 하시는 걸 추천 드립니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
</head>
<body>
	<h2> Sign-up </h2>
	<form action="#" name="user" method="post">
		<p> ID : <input type="text" name="id"><input type="button" value="ID Duplicate Check"></p>
		<p> Password : <input type="password" name="password"></p>
		<p> Name : <input type="text" name="name">
		<p> Phone-number : <input type="text" maxlength="4" size="4" name="tel1"> -
				   <input type="text" maxlength="4" size="4" name="tel2"> -
				   <input type="text" maxlength="4" size="4" name="tel3"> 
		</p>
		<p> Age : <input type="text" name="age"></p>
		<p> <input type="submit" value="Sign-up"></p>
	</form>	
</body>
</html>

signup.jsp의 코드는 위와 같습니다.

 

signup.jsp 우클릭 -> Run As -> Run on Server
실행 결과
새로운 JSP File 생성
파일 이름은 signup_process로 정합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign Up Process</title>
</head>
<body>
<%
	request.setCharacterEncoding("UTF-8");

	String id = request.getParameter("id");
	String password = request.getParameter("password");
	String name = request.getParameter("name");
	String tel1 = request.getParameter("tel1");
	String tel2 = request.getParameter("tel2");
	String tel3 = request.getParameter("tel3");
	String age = request.getParameter("age");
%>

<p> ID : <%=id %></p>
<p> Password : <%=password %></p>
<p> Name : <%=name %></p>
<p> Phone-number : <%=tel1 %>-<%=tel2 %>-<%=tel3 %></p>
<p> Age : <%=age %></p>
</body>
</html>

signup_process.jsp의 코드는 위와 같고,

 

signup.jsp 파일의 11번째 줄을 아래와 같이 수정합니다.

(action="#"이 action="signup_process.jsp"가 되었습니다.)

	<form action="signup_process.jsp" name="user" method="post">

signup.jsp 파일을 on Server 구동합니다.
각 텍스트 박스를 채우고, 아래에 Sign-up 버튼을 누릅니다.
결과 화면

뷰(View)는 만들었으니, 다음 글에서는 여기에 대응하는 서버 사이드(Server-side)를 구현해 보겠습니다.

반응형