https://intheham.tistory.com/48
Servlet과 JSP를 활용한 회원가입 폼
0. /Servers/server.xml 수정 - 한글이 계속 깨질 경우 한글 안 깨지게 server.xml에 추가 URIEncoding = "UTF-8" -- jsp의 pageEncoding 과 값 맞추기 (UTF-8 이나 EUC-KR 중 하나로 통일) - Servlet의 doGet()에 추가 request.setCha
intheham.tistory.com
0. 다양한 양식이 포함된 회원가입 폼 (Join.java)
이름이 중복일 땐,
Servlet 생성 창에서 Next> 를 눌러
Name: 에서 값을 바꿔주고
URL mapping 에서
경로를 다르게 수정해줌.
(1) index.jsp에서 '회원가입2' 링크를 누르면 /test/Join으로 경로설정된 Join.java 로 get 방식으로 감.
<a href="/webApp2/test/Join">회원가입2</a><br/>
(2) doGet() -- 회원가입 폼으로 페이지 이동시킴. (join.jsp)
(3) join.jsp -- 폼 양식을 작성하고 submit 하면 /test/Join으로 경로설정된 Join.java 로 post 방식으로 감.
(4) doPost() -- 입력한 값을 변수에 담아 결과페이지(res.jsp)에 보냄
String phone = request.getParameter("phone");
// getParameterValues(): 체크박스처럼 입력값이 여러개인 값들을 읽음.
String[] ch = request.getParameterValues("ch"); // 값 여러개 읽어오기 (체크박스)
(5) res.jsp -- 결과를 사용자에게 보여줌
<%
// request.getAttribute의 반환값이 object 타입이어서 String[]로 다운캐스팅
String[] ch = (String[])request.getAttribute("ch");
for(int i = 0; i < ch.length; i++){
out.print(ch[i]+", ");
}
%>
- 스크립트릿. jsp에서 자바 작성하는 영역. 보통 이렇게 안함.
▼ Join (servlet) -- (2), (4)
//이름이 Join인 Servlet이 2개 있어서 이름 수정 (서블릿 생성할 때 next에서)
@WebServlet(name = "Join2", urlPatterns = { "/test/Join" })
public class Join extends HttpServlet {
private static final long serialVersionUID = 1L;
public Join() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// join 폼 줌 (jsp 는 webApp2를 /로 표시)
RequestDispatcher dis = request.getRequestDispatcher("/test/join.jsp");
dis.forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String phone = request.getParameter("phone");
// getParameterValues(): 체크박스처럼 입력값이 여러개인 값들을 읽음.
String[] ch = request.getParameterValues("ch"); // 값 여러개 읽어오기 (체크박스)
String ra = request.getParameter("ra"); // 라디오
String sel = request.getParameter("sel"); // 콤보 박스
String txt = request.getParameter("txt"); // textarea
String h = request.getParameter("h"); // hidden
// VO 있으면 VO에 한 번에 담기 편할텐데~~
request.setAttribute("id", id);
request.setAttribute("pwd", pwd);
request.setAttribute("phone", phone);
request.setAttribute("ch", ch);
request.setAttribute("ra", ra);
request.setAttribute("sel", sel);
request.setAttribute("txt", txt);
request.setAttribute("h", h);
RequestDispatcher dis = request.getRequestDispatcher("/test/res.jsp");
dis.forward(request, response);
}
}
▼ join.jsp -- (3)
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>폼 양식</h3>
<form action="/webApp2/test/Join" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd"><br/>
phone:<input type="number" name="phone"><br/>
체크박스:<input type="checkbox" name="ch" value="1" checked>오렌지
<input type="checkbox" name="ch" value="2">키위
<input type="checkbox" name="ch" value="3">사과
<input type="checkbox" name="ch" value="4">배<br/>
라디오버튼:<input type="radio" name="ra" value="f" checked>여성복
<input type="radio" name="ra" value="m">남성복
<input type="radio" name="ra" value="c">아동복<br/>
콤보박스:
<select name="sel">
<option value="a">1학년</option>
<option value="b">2학년</option>
<option value="c">3학년</option>
<option value="d">4학년</option>
</select><br/>
여러줄입력:<textarea name="txt" rows="5" cols="40">가입인사를 적어주세요.</textarea><br/>
<input type="hidden" name="h" value="asdf">
<input type="button" value="일반버튼" onclick="javascript:alert('아차차~')"">
<input type="reset" value="초기화">
<input type="submit" value="데이터전송">
</form>
</body>
</html>
▼ res.jsp -- (5)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>${id }님 정보</h3>
id: ${id }<br/>
pwd: ${pwd }<br/>
phone: ${phone }<br/>
<!-- 스크립트릿.jsp에서 자바 작성하는 영역. 보통 이렇게 안함. -->
과일: <%
// request.getAttribute의 반환값이 object 타입이어서 String[]로 다운캐스팅
String[] ch = (String[])request.getAttribute("ch");
for(int i = 0; i < ch.length; i++){
out.print(ch[i]+", ");
}
%>
<br/>
옷: ${ra }<br/>
학년: ${sel }<br/>
가입인사: ${txt }<br/>
hidden: ${h }<br/>
</body>
</html>1. DB연결 없이 로그인 (Login.java)
* 로그인 예
1) 로그인 폼 : get 방식 요청으로 처리
/test/Login으로 get 요청이 가면 login.jsp로 이동
2) 폼에 작성한 id, pwd 확인하여 로그인 처리 : post 방식 요청으로 처리
(1) index.jsp에서 '로그인' 링크를 누르면 Login.java 로 get 방식으로 감.
<a href = "/webApp2/test/Login">로그인</a><br/>
(2) doGet() -- 로그인 폼을 보여주는 페이지로 이동 (login.jsp)
(3) login.jsp -- 폼 양식을 작성하고 submit 하면 Login.java 로 post 방식으로 감.
(4) doPost() -- 입력한 값을 변수에 담아 값을 비교하고 비교한 결과값을 결과페이지(result.jsp)에 보냄
(5) res.jsp -- 결과를 사용자에게 보여주고 index.jsp로 이동
▼ Login (servlet) -- (2), (4)
@WebServlet("/test/Login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
public Login() {
super();
}
// get 요청
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 로그인 폼을 뷰페이지로 줌
RequestDispatcher dis = request.getRequestDispatcher("/test/login.jsp");
dis.forward(request, response);
}
// post 요청
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 로그인을 처리 -> 결과 뷰페이지로 로그인 성공, 실패 출력
String id1 = "aaa"; // 원래는 DB에서 값비교해야 하지만 어려우니까 값 지정
String pwd1 = "111";
// 폼에 입력한 값을 파라메터로 읽어와서 변수에 담기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
// id, pwd 비교 -- db 연결 없이 값만 비교
String str = "";
if(id.equals(id1)) {
if(pwd.equals(pwd1)) {
str = "로그인 성공";
} else {
str = "패스워드 불일치";
}
} else {
str = "없는 아이디";
}
// 결과값 담아서 결과페이지로 이동
request.setAttribute("str", str); //뷰페이지에 전달
RequestDispatcher dis = request.getRequestDispatcher("/test/result.jsp");
dis.forward(request, response);
}
}
▼ login.jsp -- (3)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>로그인폼</h3>
<form action="/webApp2/test/Login" method="post">
<table border="1">
<tr><th>ID</th><td><input type="text" name="id"></td></tr>
<tr><th>PWD</th><td><input type="password" name="pwd"></td></tr>
<tr><th>LOGIN</th><td><input type="submit" value="LOGIN"></td></tr>
</table>
</form>
</body>
</html>
▼ result.jsp -- (5)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>${str }</h3>
<a href = "/webApp2/index.jsp">index로 이동</a>
</body>
</html>
0. 총 결과
Join.java
더보기
package servlettest;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
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
*/
//이름이 Join인 Servlet이 2개 있어서 이름 수정 (서블릿 생성할 때 next에서)
@WebServlet(name = "Join2", urlPatterns = { "/test/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 {
// TODO Auto-generated method stub
// join 폼 줌 -- jsp 는 webApp2 == /
RequestDispatcher dis = request.getRequestDispatcher("/test/join.jsp");
dis.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String phone = request.getParameter("phone");
// getParameterValues(): 체크박스처럼 입력값이 여러개인 값들을 읽음.
String[] ch = request.getParameterValues("ch"); // 값 여러개 읽어오기 (체크박스)
String ra = request.getParameter("ra"); // 라디오
String sel = request.getParameter("sel"); // 콤보 박스
String txt = request.getParameter("txt"); // textarea
String h = request.getParameter("h"); // hidden
// VO 있으면 VO에 한 번에 담기 편할텐데~~
request.setAttribute("id", id);
request.setAttribute("pwd", pwd);
request.setAttribute("phone", phone);
request.setAttribute("ch", ch);
request.setAttribute("ra", ra);
request.setAttribute("sel", sel);
request.setAttribute("txt", txt);
request.setAttribute("h", h);
RequestDispatcher dis = request.getRequestDispatcher("/test/res.jsp");
dis.forward(request, response);
}
}Login.java
더보기
package servlettest;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
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 Login
*/
@WebServlet("/test/Login")
public class Login extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Login() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
// get 요청
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// 로그인 폼을 뷰페이지로 줌
RequestDispatcher dis = request.getRequestDispatcher("/test/login.jsp");
dis.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
// post 요청
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
// 로그인을 처리 -> 결과 뷰페이지로 로그인 성공, 실패 출력
String id1 = "aaa"; // 원래는 DB에서 값비교해야 하지만 어려우니까 값 지정
String pwd1 = "111";
// 폼에 입력한 값을 파라메터로 읽어와서 변수에 담기
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
// id, pwd 비교
String str = "";
if(id.equals(id1)) {
if(pwd.equals(pwd1)) {
str = "로그인 성공";
} else {
str = "패스워드 불일치";
}
} else {
str = "없는 아이디";
}
// 결과값 담아서 결과페이지로 이동
request.setAttribute("str", str); //뷰페이지에 전달
RequestDispatcher dis = request.getRequestDispatcher("/test/result.jsp");
dis.forward(request, response);
}
}index.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>webApp2</h3>
<a href="/webApp2/Join">회원가입</a><br/>
<!-- 5. 회원가입2 -->
<a href="/webApp2/test/Join">회원가입2</a><br/>
<!-- 4. 로그인 -- /test/Login에 get방식 요청 -->
<a href = "/webApp2/test/Login">로그인</a><br/>
<!-- 3. id 검색 -->
<form action="/webApp2/MyInfo" method="post">
검색할 id:<input type="text" name="id">
<input type="submit" value = "검색">
</form><br/>
</body>
</html>join.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>폼 양식</h3>
<form action="/webApp2/test/Join" method="post">
id:<input type="text" name="id"><br/>
pwd:<input type="password" name="pwd"><br/>
phone:<input type="number" name="phone"><br/>
체크박스:<input type="checkbox" name="ch" value="1" checked>오렌지
<input type="checkbox" name="ch" value="2">키위
<input type="checkbox" name="ch" value="3">사과
<input type="checkbox" name="ch" value="4">배<br/>
라디오버튼:<input type="radio" name="ra" value="f" checked>여성복
<input type="radio" name="ra" value="m">남성복
<input type="radio" name="ra" value="c">아동복<br/>
콤보박스:
<select name="sel">
<option value="a">1학년</option>
<option value="b">2학년</option>
<option value="c">3학년</option>
<option value="d">4학년</option>
</select><br/>
여러줄입력:<textarea name="txt" rows="5" cols="40">가입인사를 적어주세요.</textarea><br/>
<input type="hidden" name="h" value="asdf">
<input type="button" value="일반버튼" onclick="javascript:alert('아차차~')"">
<input type="reset" value="초기화">
<input type="submit" value="데이터전송">
</form>
</body>
</html>res.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>${id }님 정보</h3>
id: ${id }<br/>
pwd: ${pwd }<br/>
phone: ${phone }<br/>
<!-- 스크립트릿.jsp에서 자바 작성하는 영역. 보통 이렇게 안함. -->
과일: <%
// request.getAttribute의 반환값이 object 타입이어서 String[]로 다운캐스팅
String[] ch = (String[])request.getAttribute("ch");
for(int i = 0; i < ch.length; i++){
out.print(ch[i]+", ");
}
%> <br/>
옷: ${ra }<br/>
학년: ${sel }<br/>
가입인사: ${txt }<br/>
hidden: ${h }<br/>
</body>
</html>login.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>로그인폼</h3>
<form action="/webApp2/test/Login" method="post">
<table border="1">
<tr>
<th>ID</th>
<td><input type="text" name="id"></td>
</tr>
<tr>
<th>PWD</th>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<th>LOGIN</th>
<td><input type="submit" value="LOGIN"></td>
</tr>
</table>
</form>
</body>
</html>result.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>${str }</h3>
<a href = "/webApp2/index.jsp">index로 이동</a>
</body>
</html>