학원/servlet jsp

11.3일 (Servlet)

쿠룽지 2023. 11. 6. 22:16
728x90
반응형
728x90

 

 

ch05-ServletMain

src

views (folder)

gugudan.html (html file)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 입력</title>
</head>
<body>
<form action="/ch05-ServletMain/gugudan" method="get">
	단 <input type="number" name="dan" min="2" max="9"><br>
    <input type="submit" value="전송">
</form>
</body>
</html>

 

 

 

ch05-ServletMain

src/main/java

kr.web.ch01 (package)

GugudanServlet.java (javaclass)

package kr.web.ch01;

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("/gugudan")
public class GugudanServlet extends HttpServlet{
	public void doGet(HttpServletRequest request,
					  HttpServletResponse response)
							throws ServletException, IOException{
		
		//문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		//전송된 데이터를 반환
					// String-> int
		int dan = Integer.parseInt(request.getParameter("dan"));
        //request.getParameter 반환타입 String, 그래서 integer.parseint로 형변환
		
		//HTML 출력을 위한 출력 스트림을 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>구구단</title></head>");
		out.println("<body>");
		out.println(dan+"단<br>");
		out.println("----------------------<br>");
		
		for(int i=1; i<=9; i++) {
			out.println(dan + "*" + i + "=" + dan*i + "<br>");
		}
		
		out.println("");
		out.println("</body>");
		out.println("</html>");
		
		out.close();
	}
}

 

 

 

 

숫자(정수) 2개 입력 후 연산하는 form 작성

webapp

views

numForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>덧셈</title>
</head>
<body>
<h1>덧셈하기</h1>
<form action="/ch05-ServletMain/add" method="get">
	첫 번째 정수 : <input type="number" name="num1"><br>
	두 번째 정수 : <input type="number" name="num2"><br>
	<input type="submit" value="더하기">
</form>
</body>
</html>

 

 

 

src/main/java

kr.web.ch01

AddServlet

package kr.web.ch01;

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("/add")
public class AddServlet extends HttpServlet{
	@Override //재정의 확인
	public void doGet(HttpServletRequest request,
					  HttpServletResponse response)
							throws ServletException, IOException{
		//전송된 데이터 반환
									//String->int
		int num1 = Integer.parseInt(request.getParameter("num1")); //전송된 데이터 반환받기
		int num2 = Integer.parseInt(request.getParameter("num2"));
		
		//문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		//HTML 출력을 위한 출력 스트림을 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>덧셈하기</title></head>");
		out.println("<body>");
		out.printf("%d + %d = %d",num1,num2,num1+num2);
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

 

 

 

 

[ 실습 ]

숫자 1개를 넘긴 후 홀수인지 짝수인지 알아내기

 

webapp

views

numForm2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>짝수/홀수 구하기</title>
</head>
<body>
<form action="/ch05-ServletMain/numSearch" method="get">
	정수 하나 입력 : <input type="number" name="num"><br>
	<input type="submit" value="전송">
</form>
</body>
</html>

 

 

 

src/main/java

kr.web.ch01

NumServlet

package kr.web.ch01;

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("/numSearch")
public class NumServlet extends HttpServlet{
	@Override
	public void doGet(HttpServletRequest request,
						HttpServletResponse response)
							throws ServletException, IOException{
		/*
		 [실습]
		 전송된 데이터가 짝수 or 홀수 판별
		 [출력 예시]
		 짝수입니다 or 홀수입니다.
		 */
		
		int num = Integer.parseInt(request.getParameter("num"));
		
		response.setContentType("text/html;charset=utf-8");
		
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>짝수/홀수 구하기</title></head>");
		out.println("<body>");
		
		if(num % 2 == 1) {
			out.println("홀수입니다.");
		}else {
			out.println("짝수입니다.");
		}
		
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

 

 

 

webapp

views

greetingForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Greeting Form</title>
</head>
<body>
<form action="/ch05-ServletMain/greeting" method="get">
	당신의 이름은
	<input type="text" name="name"><br>
	<input type="submit" value="전송">
</form>
</body>
</html>

<!--
웹사이트 주소를 복사해서 붙여넣어보면 아래처럼 암호처리 된 상태로 복사됨
http://localhost:8080/ch05-ServletMain/greeting?name=%ED%99%8D%EA%B8%B8%EB%8F%99
인코딩 된 상태로 보내지는걸 톰캣 통해서 디코딩 된 상태로 처리
 -->

 

 

 

kr.web.ch02 < package

GreetingServlet

package kr.web.ch02;

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("/greeting")
public class GreetingServlet extends HttpServlet{
	@Override
	public void doGet(HttpServletRequest request,
					HttpServletResponse response)
				throws ServletException, IOException{
		
		//문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		//전송된 데이터 반환
        String name = request.getParameter("name");
		
		//HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		
		out.println("<html>");
		out.println("<head><title>Greeting</title></head>");
		out.println("<body>");
		out.println(name + "님의 방문을 환영합니다.");
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

 

데이터를 가져오는 방식이 get외에도 post가 있는데 변경/추가해야 하는 구문이 있음

method="get" method="post"  
doGet() doPost()
request.setCharaterEncoding("utf-8")

 

get 방식으로 처리

head에 정보를 담아 보냄 (ex-url 맨 끝에 name=홍길동 이라고 입력한 정보가 보임.)

head에 정보를 담기 때문에 크기 제한도 있음

 

post 방식으로 처리

body에 정보를 담아 보냄 (url에 관련 정보가 보이지 않음)

개인정보 보호 측면과 크기 면에서 get보다는 post 방식이 좋음

 

 

 

 

 

[실습]

views

board_write.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기</title>
</head>
<body>
<h2>글쓰기</h2>
<form action="/ch05-ServletMain/board" method="post">
	이름 : <input type="text" name="name"><br>
	제목 : <input type="text" name="title"><br>
	내용 : <textarea rows="5" cols="50" name="content"></textarea><br>
	<input type="submit" value="전송">
</form>
</body>
</html>

 

 

kr.web.ch02

BoardServlet

package kr.web.ch02;

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("/board")
public class BoardServlet extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request,
						HttpServletResponse response)
					throws ServletException, IOException{
		/*
		  [실습]
		  name,title,content 전송된 데이터를 반환 받아서 출력
		  [출력 예시]
		  이름 : 홍길동
		  제목 : 11월의 더위
		  내용 : 겨울답지 않은 겨울이네요~~
		 */
		
        response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
        
        String name = request.getParameter("name");
		String title = request.getParameter("title");
		String content = request.getParameter("content");
        
        PrintWriter out =  response.getWriter();
        
        out.println("<html>");
		out.println("<head><title>글쓰기 완료</title></head>");
		out.println("<body>");
		out.println("이름 : " + name + "<br>");
		out.println("제목 : " + title + "<br>");
		out.println("내용 : " + content + "<br>");
		out.println("</body>");
		out.println("</html>");
		out.close();
        
	}
}

 

 

 

 

 

input type=checkbox 데이터 넘기기

views

lunchForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>점심 선택</title>
</head>
<body>
<h3>오늘 점심은 무엇을 먹을까?(2개 이상 선택)</h3>
<form action="/ch05-ServletMain/todayMenu" method="post">
	<input type="checkbox" name="lunch" value="떡볶이">떡볶이
	<input type="checkbox" name="lunch" value="버섯덮밥">버섯덮밥
	<input type="checkbox" name="lunch" value="치즈김밥">치즈김밥
	<input type="checkbox" name="lunch" value="피자">피자
	<input type="submit" value="전송">
</form>
</body>
</html>

 

 

 

src/main/java

kr.web.ch02

TodayMenu

package kr.web.ch02;

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("/todayMenu")
public class TodayMenu extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request,
						HttpServletResponse response)
					throws ServletException, IOException{
		//전송된 데이터 인코딩 처리
		request.setCharacterEncoding("utf-8");
		
		//문서타입 및 캐릭터 지정
		response.setContentType("text/html;charset=utf-8");
		
		//HTML 출력을 위한 출력 스트림을 생성
		PrintWriter out = response.getWriter();
		
		out.println("<html>");
		out.println("<head><title>Lunch Menu</title></head>");
		out.println("<body>");
		out.println("<h3>오늘 점심은</h3>");
		
		//동일한 lunch로 넘겨지기 때문에 배열로 처리
		String[] values = request.getParameterValues("lunch"); //배열 메서드
		
		if(values != null) { //lunchForm에서 데이터를 전송했을 경우
			for(int i=0; i<values.length; i++) {
				out.println(values[i] + "<br>");
			}
		}else {//전송한 데이터가 없는 경우
			out.println("선택하지 않음");
		}
		
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

 

단일 값 빼내는 방법 : request.getParameter()

다중 값 빼내는 방법 : request.getParameterValues()

 

 

 

 

[실습]

views

travelForm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여행지 선택</title>
</head>
<body>
<h3>여행지를 선택하세요(2개 이상 선택)</h3>
<form action="/ch05-ServletMain/travel" method="post">
	이름 : <input type="text" name="name"><br>
	여행지 선택<br>
	<input type="checkbox" name="city" value="서울">서울
	<input type="checkbox" name="city" value="뉴욕">뉴욕
	<input type="checkbox" name="city" value="런던">런던
	<input type="checkbox" name="city" value="파리">파리
	<input type="submit" value="전송">
</form>
</body>
</html>

 

 

 

kr.web.ch02

TravelServlet

package kr.web.ch02;

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("/travel")
public class TravelServlet extends HttpServlet{
	@Override
	public void doPost(HttpServletRequest request,
			           HttpServletResponse response)
	                    throws ServletException,IOException{
		/*
		 * [실습]
		 * name,city 전송된 데이터를 받아서 출력하기
		 * [출력 예시]
		 * 이름 : 홍길동
		 * 여행지 : 서울,파리
		 */
		
		//전송된 데이터 인코딩 처리
		request.setCharacterEncoding("utf-8");
		//문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		//HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>여행지 선택</title></head>");
		out.println("<body>");
		
		String name = request.getParameter("name");
		out.println("이름 : " + name + "<br>");
		out.println("여행지 : ");
		
		String[] cities = request.getParameterValues("city");
		if(cities!=null) {
			for(int i=0;i<cities.length;i++) {
				//if(i>0) out.print(",");
				out.print(cities[i]);
				if(i<cities.length-1) out.print(",");
			}
		}else {
			out.println("집~~~~~~");
		}
		out.println("</body>");
		out.println("</html>");
		
	}
}

여행지 : 파리, 뉴욕

이런 식으로 values[i] 와 ,를 함께 출력하는 방법

 

for(int i=0; i<values.length; i++){

     out.print(values[i]);

      if(i<values.length-1)      or if(i>0) out.print(",");

 

 

 

 

 

 

위 travel form 을 js 형식으로 변형해서 처리해보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여행지 선택</title>
<script type="text/javascript">
window.onload = function(){
	let myForm = document.getElementById('myForm');
    //이벤트 연결
    myForm.onsubmit = function(){
    	let name = document.getElementById('name');
        if(name.value.trim()==''){ //이름을 입력하지 않았거나 공백만 입력했을 경우
        	alert('이름을 입력하세요');
            name.value = ''; //공백 제거
            name.focus();
            return false;
        }

        let cities = document.getElementsByClassName('cb-city');
        let num=0;
        
        //체크 유무 확인
        for(let i=0; i<cities.length; i++){
        	if(cities[i].checked){
            	num++;
            }
        }
        
        if(num<2){
			alert('여행지는 2개 이상 선택해야 합니다.');
			return false;
        }
    };
};
</script>
</head>
<body>
<h3>여행지를 선택하세요(2개 이상 선택)</h3>
<form id="myForm" action="/ch05-ServletMain/travel" method="post">
	이름 : <input type="text" name="name" id="name"><br>
	여행지 선택<br>
	<input type="checkbox" name="city" value="서울" class="cb-city">서울
	<input type="checkbox" name="city" value="뉴욕" class="cb-city">뉴욕
	<input type="checkbox" name="city" value="런던" class="cb-city">런던
	<input type="checkbox" name="city" value="파리" class="cb-city">파리
	<input type="submit" value="전송">
</form>
</body>
</html>

 

728x90
반응형
저작자표시 비영리 변경금지