form을 활용한 아이디와 비번 입력 받기(select,date,다중선택,checkbox)

JAVA/웹 프로그래밍 - 서블릿 2020. 10. 30. 22:31

html 파일을 하나 만들도록 한다.

html 문서는 WebContent에서 만든다. 이름은 FormTest이라 하자.

내용은 다음과 같이 적도록 하자.

FormTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Test</title>
</head>

<body>
	<form method="post" action="Form">
	
	<div>
		<label>ID </label><input name="id" type="text"><br>
	</div>
	
	<div>
		<label>PASSWORD </label><input name="password" type="password">
	</div>
	
	<div>
		<input type="checkbox" name="save"><label>ID저장 여부 </label>
	</div>
	
	<div>
		<input type="checkbox" name="inotice" value="전화"><label>전화수신 동의여부 </label>
	</div>
	
	<div>
		<input type="submit" value="전송">
	</div>
	
	</form>
</body>

</html>

한 번 실행해보자.

전송 버튼을 클릭했을 때, 에러가 발생함을 알 수 있다.

그 이유는 이에 대한 처리는 Form이라는 서블릿에서 처리를 해야 하는데, 우리는 아직 만들지 않았기 때문이다.

Form이라는 서블릿을 만들어보자.

Java Resources의 하위 폴더의 src의 패키지 com.iot.web을 선택하고 우클릭해서 new를 선택하고 Servlet을 선택한다.

설대 finish를 클릭하지 말고 next를 차근차근 눌러줘야 한다.

클래스 명은 Form이라고 적는다. 그리고 next를 선택하고 URL mappings에서도 /Form이라고 잘 적혀있다.

next를 선택하자.

Constructors form superclass를 체크 해제한다.

doPost와 doGet을 모두 체크 해제한다. 그리고 service를 체크한다.

즉, service함수만 체크되어 있어야 한다.

doPost와 doGet함수는 아직 필요가 없어서 선택을 안한 것이다.

그리고 finish를 선택한다. 그리고 주석처리된 문장을 모두 제거한다.

Form.java 서블릿 내용

package com.iot.web;

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;

@WebServlet("/Form")
public class Form extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, 
			HttpServletResponse response) throws ServletException, IOException 
	{
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		request.setCharacterEncoding("UTF-8");
		
		PrintWriter out = response.getWriter();
		
		//	FormTest.html의 태그의 name으로 찾는다.
		String id = request.getParameter("id");;
		String password = request.getParameter("password");
		String save = request.getParameter("save");
		String inotice = request.getParameter("inotice");
		
		out.println("id : " +id +"<br>");
		out.println("password : " +password +"<br>");
		out.println("save : " +save +"<br>");
		out.println("inotice : " +inotice +"<br>");
	}
}

그리고, FormTest.html을 실행해서 한 번 그 결과를 보도록 하자.

id 저장 여부를 체크하면 "on"이라고 나오고 체크 하지 않으면 null이라고 나오고

전화수신 동의 여부를 체크하면 "전화"라고 나오고 체크하지 않으면 null 이라고 뜬다.

즉, 체크 박스는 선택이 되면 value값으로 저장이 되며, 체크가 안 되어있으면 null 값으로 저장이 된다.

이에 대한 예외 처리는 서블릿에서 처리를 할 수 있다. 그런데 지금은 하지 않도록 한다.

이번애는 select 폼 테그를 추가해보자.

FormTest.html에서 select 태그를 추가한다.

추가할 부분은

<div><input type="submit" value="전송"></div> 바로 윗 줄에 추가한다.

아래의 문장을 추가해보자.

추가할 문장

<div>
	<label>직업선택</label>>
		<select name="job">
			<option>회사원</option>
			<option>학생</option>
			<option>기타</option>
		</select>
	</div>

html에 내용이 추가가 되었다면, Form.java 에서 이에 대한 정보를 처리해야 한다.

Form.java 에 추가할 내용은 다음과 같다.

아래의 문장은 맨 마지막 줄에 추가한다.

//	FormTest.html의 태그의 name으로 찾는다.
		String id = request.getParameter("id");;
		String password = request.getParameter("password");
		String save = request.getParameter("save");
		String inotice = request.getParameter("inotice");
		String job = request.getParameter("job");
		
		out.println("id : " +id +"<br>");
		out.println("password : " +password +"<br>");
		out.println("save : " +save +"<br>");
		out.println("inotice : " +inotice +"<br>");
		out.println("job : " +job +"<br>");

추가하면 다음과 같다.

그리고 FormTest.html을 실행해서 그 결과를 확인해보자.

이번에는 좋아하는 음식과 같이 여러 개를 선택할 수 있는 다중 선택 태그를 추가해보자.

당연히 추가할 곳은 FormTest.html 이다.

아래의 내용을 추가해보자.

추가할 부분은 전송 버튼 위쪽이다.

즉, <div><input type="submit" value="전송"></div> 문장 바로 위에 추가하자.

아래의 내용에 multiple이라고 적혀 있는 태그가 다중 선택 태그이다.

<div>
	<label>성별</label>>
		<select name="s">
			<option value="1">남</option>
			<option value="2">여</option>
		</select>
	</div>
	
	<div>
	<label>좋아하는 음식</label>>
		<select name="food" multiple size="5">
			<option>치킨</option>
			<option>피자</option>
			<option>탕수육</option>
			<option>짜장면</option>
		</select>
	</div>

그리고, 이에 대한 처리는 서블릿에서 처리를 해야 하는데, 다중 선택이므로 변수에 담을 수 없다.

여러 개의 데이터가 들어올 수 있기 때문이다. 그래서 배열을 이용한다.

파일의 전체 내용을 올리겠다.

Form.java

package com.iot.web;

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;

@WebServlet("/Form")
public class Form extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, 
			HttpServletResponse response) throws ServletException, IOException 
	{
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		request.setCharacterEncoding("UTF-8");
		
		PrintWriter out = response.getWriter();
		
		//	FormTest.html의 태그의 name으로 찾는다.
		String id = request.getParameter("id");;
		String password = request.getParameter("password");
		String save = request.getParameter("save");
		String inotice = request.getParameter("inotice");
		String job = request.getParameter("job");
		String s = request.getParameter("s");
		//int s_int = Integer.parseInt("s");
		String[] food = request.getParameterValues("food");	//	다중선택이므로 배열로 받는다.
		
		out.println("id : " +id +"<br>");
		out.println("password : " +password +"<br>");
		out.println("save : " +save +"<br>");
		out.println("inotice : " +inotice +"<br>");
		out.println("job : " +job +"<br>");
		out.println("s : " +s +"<br>");
		//out.println("s_int : " +s_int +"<br>");
		
		for (int i = 0; i < food.length; i++)
		{
			out.println("food : " +food[i] +"<br>");
		}
	}
}

실행하고 나서, 다중 선택을 할 시에 CTRL 키를 누르고 선택하면 된다.

그리고 마지막으로 FormTest.html에 date를 추가해보자.

이번에도 전송 버튼 위에 추가를 하면 된다.

추가할 문장은 아래와 같다.

추가할 문장

<div>
		<label>생년월일</label>>
		<input type="date" name="date">
	</div>

마찬가지로 Form.java에서 이에 대한 처리가 필요하다.

아래의 내용은 Form.java의 전체 문장이므로 복사해서 붙여넣기를 하자.

Form.java 전체 내용

package com.iot.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Form")
public class Form extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, 
			HttpServletResponse response) throws ServletException, IOException 
	{
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		
		request.setCharacterEncoding("UTF-8");
		
		PrintWriter out = response.getWriter();
		
		//	FormTest.html의 태그의 name으로 찾는다.
		String id = request.getParameter("id");;
		String password = request.getParameter("password");
		String save = request.getParameter("save");
		String inotice = request.getParameter("inotice");
		String job = request.getParameter("job");
		String s = request.getParameter("s");
		//int s_int = Integer.parseInt("s");
		String[] food = request.getParameterValues("food");	//	다중선택이므로 배열로 받는다.
		
		String date = request.getParameter("date");
		Date d = new Date();
		SimpleDateFormat old_date_format = new SimpleDateFormat("yyyy-MM-dd");
		SimpleDateFormat new_date_format = new SimpleDateFormat("yyyy년MM월dd일");
		
		try 
		{
			d = old_date_format.parse(date);
		} 
		catch (ParseException e) 
		{
			e.printStackTrace();
		}
		
		String new_date = new_date_format.format(d);
		
		out.println("id : " +id +"<br>");
		out.println("password : " +password +"<br>");
		out.println("save : " +save +"<br>");
		out.println("inotice : " +inotice +"<br>");
		out.println("job : " +job +"<br>");
		out.println("s : " +s +"<br>");
		//out.println("s_int : " +s_int +"<br>");
		
		for (int i = 0; i < food.length; i++)
		{
			out.println("food : " +food[i] +"<br>");
		}
		
		out.println("생년월일 : " +date +"<br>");
		out.println("생년월일 : " +new_date +"<br>");
	}
}

html을 실행해서 그 결과를 보자.

아래는 지금까지 한 모든 내용이 있는 파일이다.

'JAVA > 웹 프로그래밍 - 서블릿' 카테고리의 다른 글

Filter (0)	2020.10.30
form 과 나머지 input 태그 더 살펴보기 (0)	2020.10.30
form과 textArea & 한글 깨짐 해결 (0)	2020.10.30
form 형태로 전달하기 (0)	2020.10.30
구구단의 원하는 단을 입력해서 출력하기 (0)	2020.10.29

ABOUT ME

Design Design

'JAVA > 웹 프로그래밍 - 서블릿' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JAVA > 웹 프로그래밍 - 서블릿' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바