Servlet - 기초2 — 구나딩

1. radio, checkbox

poll.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>온라인 설문조사</title>
</head>
<body>
<form id="frm" method="get" action="./pollok.do">
<p>[가장 자신있는 개발 프로그램 언어는?]</p>
<ol>
<li><input type="radio" name="subject" value="HTML">HTML</li>
<li><input type="radio" name="subject" value="Javascript">Javascript</li>
<li><input type="radio" name="subject" value="Java">Java</li>
<li><input type="radio" name="subject" value="Servlet">Servlet</li>
<li><input type="radio" name="subject" value="Spring & boot">Spring & boot</li>
<li><input type="radio" name="subject" value="Full Stack">Full Stack</li>
</ol>
<p>[배우고 싶은 언어는?]</p>
<ul>
<li><input type="checkbox" name="etc" value="Linux Server">Linux Server</li>
<li><input type="checkbox" name="etc" value="Spring AI">Spring AI</li>
<li><input type="checkbox" name="etc" value="Vue">Vue</li>
<li><input type="checkbox" name="etc" value="Redis Database">Redis Database</li>
</ul>
<input type="button" value="설문조사 참여" onclick="pollok()">
</form>
</body>
<script>
var pollok = function(){
	var ob = document.getElementsByName("subject");
	var ea = ob.length;
	var w = 0;
	var count = 0;
	while(w < ea){
		if(ob[w].checked==true){
			count++;
		}
		w++;
	}
	if(count > 0){
		frm.submit();	//Back-end에 전송 
	}else{
		alert("설문조사에 한가지 문항에 대해 답변해주셔야 참여가 됩니다.");
	}
} 
</script>
</html>

pollok.java (servlet)

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Arrays;

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;

public class pollok extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// method="get"
	// PrintWriter : Controller에서 종료(결과값을 여기서 처리)
	// RequestDispatcher : Controller => view (jsp)에서 결과를 처리
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		
		// 동일한 name => radio : 여러개 오브젝트 중에 한가지만 선택
		// getParameter : get, post (name 전달됨 값 동일함)
		//request.getParameter : 무조건 Front-end에서 값이 이관되어야함 안넘어오면 예외처리됨 catch
		String subject = request.getParameter("subject");	//여기에 .intern(); 사용할때 try안에 넣기
		String etc[] = request.getParameterValues("etc");	//getParameterValues : 원시배열로 받기
//		ArrayList<String> etc = new ArrayList<String>(Arrays.asList(request.getParameterValues("etc"))) ;	//원시배열로 받기 때문에 클래스배열로 쓰고싶을때는 이렇게 쓰기
		PrintWriter pw = response.getWriter();
		try {
			//여기서는 view로 보내기때문에 pw가 안보임
//			pw.write("<script>"
//					+ "alert('test');"
//					+ "</script>");
			
			//값이 없으면 request.getParameter가 catch로 보내버리기때문에 필요없음 
//			if(subject.equals(null)) {
//				System.out.println("값없음");
//			}
			
			int w = 0;
			while(w < etc.length) {
//				request.setAttribute("etc"+w, etc[w]);
				w++;
			}
			request.setAttribute("etc", etc);
			System.out.println(Arrays.toString(etc));
			
			request.setAttribute("subject", subject);	//view에 출력 메소드 
			RequestDispatcher rd = request.getRequestDispatcher("./pollok.jsp");
			rd.forward(request, response);
		} catch (Exception e) {
			System.out.println(e);
			pw.write("<script>"
					+ "alert('올바른 접근이 아닙니다.');"
					+ "</script>");

		} finally {
			pw.close();
		}
	}
}

PrintWriter : Controller에서 종료(결과값을 여기서 처리)
RequestDispatcher : Controller => view (jsp)에서 결과를 처리
response.setContentType("text/html;charset=utf-8"); //아래 두줄의 줄임 표현
- response.setCharacterEncoding("utf-8");
- response.setContentType("text/html");
값 선언은 웬만하면 try안에 선언
- equals를 사용하지않고 ==를 사용하려고 intern을 사용시 intren은 무조건 값을 받아줘야해서 오류남
- 근데 try catch밖에 있을 경우 웹페이지가 망가져버리기때문에 try catch안에 선언하여 예외처리하기
radio : 동일한 name 여러개 오브젝트 중에 한가지만 선택
getParameter : get, post (name 전달됨 값 동일함)
request.getParameter : 무조건 Front-end에서 값이 이관되어야함 안넘어오면 예외처리됨 catch
- 원시배열로 받아지기 때문에 클래스배열에 넣을땐 원시배열처리

pollok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String subject = (String)request.getAttribute("subject");
    String etc[] = (String[])request.getAttribute("etc");
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설문조사 결과값</title>
</head>
<body>
선택하신 과목 : <%=subject%><br>
배우고 싶은 과목 : <%
int w = 0;
while(w < etc.length){	//Controller에서 원시배열로 값을 이관받은 데이터를 반복문으로 view에서 처리 
	out.print(etc[w]+", ");
	w++;
}
%>
</body>
</html>

request.getAttribute : 무조건 Controller에서 값이 날아와야함
- String word = request.getAttribute("abc").toString();
  - "" 만 처리
  - null처리를 못해서 다른처리가 부가적으로 필요해서 다른놈들을 쓰는것이 좋음
- String word = (String)request.getAttribute("abc");
  - null, "" 모두 처리
- String word = String.valueOf(request.getAttribute("abc"));
  - null, "" 모두 처리
- 배열로 값을 받기도 가능
  - String etc[] = request.getParameterValues("etc"); //servlet파일
  - String etc[] = (String[])request.getAttribute("etc"); //jsp파일

2. 파일 업로드

fileupload.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>첨부파일 사용하는 방법</title>
</head>
<body>

<form id="frm" method="post" action="./fileupload.do">
첨부파일 : <input type="file" name="mfile"><br>
<button type="button" onclick="upload()">파일 업로드</button>
</form>
<br><br><br>
<form id="f" method="post" action="./multi_file.do" enctype="multipart/form-data">
고객명 : <input type="text" name="mname"><br>
첨부파일 : <input type="file" name="files"><br>
첨부파일 : <input type="file" name="files"><br>
<!-- multiple : 하나의 첨부파일 오브젝트에 여러개의 파일 전송 -->
<!-- 
<input type="file" name="mfile" multiple="multiple"> 
<input type="file" name="mfile" multiple> 
multiple 사용시 javascript를 이용해 파일 최대 개수 설정 가능 
-->
<!-- 
accept=".png,.jpg,.bmp,.gif" => 확장자 설정
accept="image/*" => 이미지파일 모두 
 -->
첨부파일 : <input type="file" name="mfiles" accept="image/*" multiple>*파일 최대 5개까지 업로드 가능 <br>
<button type="button" onclick="upload2()">파일 업로드2</button>
</form>

</body>
<script>
function upload(){
	frm.submit();
}

function upload2(){
	//files(속성) : multiple에서만 사용, 여러개를 선택시 각 배열로 구분하여 설정 = split
	
	//var file = f.mfiles.files;	//form의 id이용해서 file 사용 name값 오브젝트 가져옴
	//getElementsByName : 원시배열 형태 
	//var file = document.getElementsByName("mfiles");	//file의 name을 이용하여 file 사용
	//console.log(file.length);
	
	//var file = f.mfiles.files;
	var file = document.getElementsByName("mfiles")[0].files;
    console.log(file.length); 
    
    if(file.length > 5){
    	alert("첨부파일 갯수는 최대 5개까지입니다.");
    }
	else {
			var w = 0;
			var count = 0;
			console.log(size);
			while (w < file.length) { //첨부파일 갯수만큼 반복문을 작동시켜 파일 각각의 용량 체크 
				var size = file[w].size;
				if (size > 2097152) {
					count++;
				}
				w++;
			}
			//반복문으로 파일의 각각의 사이즈를 확인한 결과 2MB이상이 있을 경우 
			if (count != 0) {
				alert("첨부파일 용량이 2MB 이상입니다.");
			}else{
				f.submit();
			}
		}
	}
</script>
</html>

첨부파일 기능이 있을 경우 : 무조건 post로만 전송
enctype="multipart/form-data" : 첨부파일을 Back-end에게 전송시 필요한 form 속성 //안쓰면 계속 오류남
multiple : 하나의 첨부파일 오브젝트에 여러개의 파일 전송

fileupload.java

package web;
//cos 사용없이 자체 라이브러리를 이용하여 설정
//cos => 파일 라이브러리 2005년에 개발됨

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

//HTML에 첨부파일 기능이 있을때만 사용 
@MultipartConfig(	//첨부파일 환경설정 
	fileSizeThreshold = 1024 * 1024 * 2,	//한개의 파일 전송 크기 : 2MB 
	maxFileSize = 1024 * 1024 * 5,			//파일 최대 크기 용량 : 5MB
	maxRequestSize = 1024 * 1024 * 100		//여러개의 첨부 파일 전체의 용량 : 100MB //multiple로 받은 총 크기
)
public class fileupload extends HttpServlet {
	private static final long serialVersionUID = 1L;
	PrintWriter pw = null;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");

		try {
			this.pw = response.getWriter();
			//Front-end에서 전송된 name값에 I/O 처리 방식
			//Part(클라이언트) <=> @MultipartConfig(서버) 연결 
			Part mfile = request.getPart("mfile");
			//파일명을 확인하는 코드 
			String filename = mfile.getSubmittedFileName();
			long filesize = mfile.getSize();	//파일 용량 크기 
//			System.out.println(filesize);
			if(filesize > 2097152) {
				this.pw.write("<script>" 
						+ "alert('파일 첨부 용량은 최대 2MB까지 입니다.');" 
						+ "history.go(-1);" 
						+ "</script>");
			}
			else {
				/*
				WEB Server에서 적용된 디렉토리에 저장 (src경로 x)
				/Users/nayeong/Documents/web_servlet/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/web/upload/
				
				WEB I/O : 웹 전용 이미지 디렉토리를 별도로 구성해야만 정상적으로 웹에서 이미지를 확인할 수 있음
				getServletContext(웹경로) + getRealPath(저장디렉토리);
				
				APP I/O : File => InputStream => OutputStream 
				*/
				String url = request.getServletContext().getRealPath("/upload/");
				System.out.println(url);
				mfile.write(url + filename);
				this.pw.write("<script>" 
						+ "alert('정상적으로 파일 업로드되었습니다.');" 
						+ "history.go(-1);" 
						+ "</script>");
			}
		} catch (Exception e) {
			this.pw.write("<script>" 
						+ "alert('올바른 접근방식이 아닙니다.');" 
						+ "history.go(-1);" 
						+ "</script>");
		} finally {
			this.pw.close();
		}
	}
}

multi_file.java

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collection;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;

//여러개의 파일을 전송하는 방식 
@MultipartConfig( 
		//아래 코드에 조건문이 없으면 용량이 오버되면 서버가 사망해버림
		//front에서 검토해주는게 좋음 그래도 back에서 체크해야함 
		//그래서 maxFileSize를 넉넉하게 잡거나 제한없이 설정함
		//아래 세줄을 무조건 쓰는것은 아니고 Front가 파일크기를 확인안해주면 욕해도됨
		//Front가 검토해주면 맥스사이즈 사용해도됨 
		fileSizeThreshold = 1024 * 1024 * 2,
//		maxFileSize = 1024 * 1024 * 5,	//해당 Max 파일 용량이 5MB 이상일 경우 Server Down
		maxRequestSize = 1024 * 1024 * 100
	)
public class multi_file extends HttpServlet {
	private static final long serialVersionUID = 1L;
	PrintWriter pw = null;
       
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		try {
			this.pw = response.getWriter();
			String mname = request.getParameter("mname");
			System.out.println(mname);
			String url = request.getServletContext().getRealPath("/upload/");
			
			//name을 따로 설정하지 않으며, 배열 클래스를 이용하여 IO값을 핸들링함 
			//Collection : 모든 name값을 다 받을 수 있음 => 프론트가 뿅감
			Collection<Part> p = request.getParts();	//여러 파일을 받을경우 getParts를 사용함 => 원시배열이 아니라 Collection을 사용, name 사용안함  
			for(Part f : p) {	//foe each 사용 
				long size = f.getSize();
//				System.out.println("test");	//html에서 파일 하나 안넣어도 인풋파일 개수만큼 반복
				String filename = f.getSubmittedFileName();
				
				
				//파일명이 있고 2MB 이하일 경우 
				//if(!filename.equals("") && size < 2097152) {	
				//if(filename != null && size < 2097152) {
				//if(!filename.equals(null) || size < 2097152) {
				if(filename != null && size < 2097152) {
					f.write(url + filename);	//조건이 맞을경우 저장 
					//flush, close 안넣음 => stream아니어서 알아서 종료 잘 함 
				}
			}
			
		}catch (Exception e) {
			this.pw.write("<script>" 
					+ "alert('올바른 접근방식이 아닙니다.');" 
					+ "history.go(-1);" 
					+ "</script>");
		}finally {
			this.pw.close();
		}
	}
}

저작자표시 비영리 변경금지 (새창열림)

1. radio, checkbox

pollok.java (servlet)

pollok.jsp

2. 파일 업로드

fileupload.html

fileupload.java

multi_file.java

티스토리툴바