JSP - Parameter 파라미터 전송하기

프로그래밍/JSP 2021. 10. 12.

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터 전송</h3>
<div>
	<p>GET 방식으로 전송</p>
	<p>
		<a href="ex07_ok.jsp?name=hong&age=20">확인</a>
	</p>
</div>
<hr>

<div>
	<p>POST 방식으로 전송
	<form action="ex07_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<button type="submit">등록하기</button>
		</p>
	</form>
</div>

</body>
</html>

<%@page import="java.net.URLDecoder"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.util.Enumeration"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>클라이언트로 부터 요청(request) 받은 정보</h3>

<%
	out.print("<p>method : " + request.getMethod()+"</p>");
	out.print("<p>QueryString(GET 방식 파라미터) : " + request.getQueryString()+"</p>");
	out.print("<hr>");
	
	out.print("<p>[request로 넘어온 데이터(header 영역)] ...</p>");
	Enumeration<String> e = request.getHeaderNames(); // 모든 헤더 이름
	while(e.hasMoreElements()) {
		String key = e.nextElement();
		String value = request.getHeader(key); // 이름에 해당하는 해더 값 반환 받기
		out.print("<p>"+key+":"+value+"</p>");
	}
	out.print("<hr>");
	
	out.print("<p>[request로 넘어온 데이터(body 영역)] ...</p>");
	InputStream is = request.getInputStream(); // 클라이언트가 보낸 정보를 읽기 위한 입력 스트림
	byte[] b = new byte[1024];
	int size;
	String str;
	
	while((size = is.read(b))!=-1) {
		str = new String(b, 0, size); // byte 배열을 String 로 변환
		out.print("<p>디코딩하지 않는 경우:"+str+"</p>");
		
		str = URLDecoder.decode(str, "utf-8");
		out.print("<p>디코딩한 경우:"+str+"</p>");
	}
%>
</body>
</html>

GET 방식으로 보냈을때의 정보들과

POST방식으로 보냈을때의 여러 정보들을 확인 할 수 있다.

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터를 getParameter()로 받기</h3>

<div>
	<form action="ex08_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>패스워드 : <input type="password" name="pwd"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<input type="radio" name="gender" value="M" checked="checked"> 남자
			<input type="radio" name="gender" value="F"> 여자
		</p>
		<p>
			좋아하는 과목 : 
			<input type="checkbox" name="subject" value="자바"> 자바
			<input type="checkbox" name="subject" value="스프링"> 스프링
			<input type="checkbox" name="subject" value="오라클"> 오라클
			<input type="checkbox" name="subject" value="서블릿"> 서블릿
			<input type="checkbox" name="subject" value="웹"> 웹
		</p>
		<p>
			<button type="submit">보내기</button>
		</p>
	</form>
</div>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	// POST 방식으로 넘어온 데이터의 인코딩 설정(파라미터를 받기 전에 설정 해야 함.)
	request.setCharacterEncoding("utf-8");
	// 첫줄에 무조건 넣으면 됨
	
	// getParameter()는 GET 또는 POST로 넘어온 파라미터를 받을 수 있으면 String을 반환한다.
	// getParameter() 넘어온 문자열 길이가 0이면 ""을 반환한다.
	
	String name = request.getParameter("name");
	String pwd = request.getParameter("pwd");
	String age = request.getParameter("age");
	String gender = request.getParameter("gender");
	
	String city = request.getParameter("city");
	// 존재하지 않는 파라미터 받는 경우는 null임
	
	
	// 파라미터가 동일한 이름으로 넘어오는 경우 getParameter()는 첫번째 것만 받을 수 있다.
	String subject = request.getParameter("subject");

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>서버에서 넘겨 받은 파라미터 </h3>

<p>이름 : <%= name %></p>
<p>패스워드 : <%= pwd %></p>
<p>나이 : <%= age %></p>
<p>성별 : <%= gender %></p>
<p>출신도 : <%= city %></p>
<p>좋아하는 과목 : <%= subject %></p>
</body>
</html>

결과를 보기위한 jsp 파일에서는 항상 파라미터를 확인해야하니

request.setCharacterEncoding("utf-8"); 를 꼭 자바 코드에 넣어야 한다.

POST 전송 방식 사용에 필요하나 GET 방식으로 한다고 해도 코드가 있다고 오류가 뜨거나 나쁜건 없다.

하지만 반대로 없으면 문제가 생긴다.

단순하게 값이 하나일 경우에는 request.getParameter(); 메소드로 받으면 된다.

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터를 getParameterValues()로 받기</h3>

<div>
	<form action="ex09_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>패스워드 : <input type="password" name="pwd"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<input type="radio" name="gender" value="M" checked="checked"> 남자
			<input type="radio" name="gender" value="F"> 여자
		</p>
		<p>
			좋아하는 과목 : 
			<input type="checkbox" name="subject" value="자바"> 자바
			<input type="checkbox" name="subject" value="스프링"> 스프링
			<input type="checkbox" name="subject" value="오라클"> 오라클
			<input type="checkbox" name="subject" value="서블릿"> 서블릿
			<input type="checkbox" name="subject" value="웹"> 웹
		</p>
		<p>
			<button type="submit">보내기</button>
		</p>
	</form>
</div>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");

	// getParameterValues() 메소드는 파라미터의 값을 String[] 으로 반환한다.
	// 동일한 이름의 파라미터나 <select> 등에서 multiple 속성을 가진 요소는 반드시 파라미터를 
	// getParameterValues() 메소드로 받아야 한다.
	
	String name = request.getParameterValues("name")[0];
	String pwd = request.getParameterValues("name")[0];
	String age = request.getParameterValues("name")[0];
	String gender = request.getParameterValues("gender")[0];
	
	// checkbox나 radio는 선택한 항목이 하나도 없으면 getParameter(), getParameterValues()는 null 반환함.
	
	String [] ss = request.getParameterValues("subject");
	String subject = "";
	if(ss != null){
		for(String s:ss) {
			subject += s + "  ";
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>서버에서 넘겨 받은 파라미터</h3>

<p>이름 : <%= name %></p>
<p>패스워드 : <%= pwd %></p>
<p>나이 : <%= age %></p>
<p>성별 : <%= gender %></p>
<p>좋아하는 과목 : <%= subject %></p>

</body>
</html>

하지만 받아야 할 파라미터가 여러개일 경우에는 getParameterValues() 메소드를 써야한다.

그리고 받아온 값(파라미터) 들을 처리하기 위해서 배열과 for문으로 처리해야 한다.

배열에 담아서 변수 하나에 다 담는다고 생각하면 된다.

그리고 그걸 HTML 구역에서 출력.

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터를 getParameterMap()로 받기</h3>

<div>
	<form action="ex10_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>패스워드 : <input type="password" name="pwd"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<input type="radio" name="gender" value="M" checked="checked"> 남자
			<input type="radio" name="gender" value="F"> 여자
		</p>
		<p>
			좋아하는 과목 : 
			<input type="checkbox" name="subject" value="자바"> 자바
			<input type="checkbox" name="subject" value="스프링"> 스프링
			<input type="checkbox" name="subject" value="오라클"> 오라클
			<input type="checkbox" name="subject" value="서블릿"> 서블릿
			<input type="checkbox" name="subject" value="웹"> 웹
		</p>
		<p>
			<button type="submit">보내기</button>
		</p>
	</form>
</div>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터를 getParameterMap()로 받기</h3>

<div>
	<form action="ex10_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>패스워드 : <input type="password" name="pwd"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<input type="radio" name="gender" value="M" checked="checked"> 남자
			<input type="radio" name="gender" value="F"> 여자
		</p>
		<p>
			좋아하는 과목 : 
			<input type="checkbox" name="subject" value="자바"> 자바
			<input type="checkbox" name="subject" value="스프링"> 스프링
			<input type="checkbox" name="subject" value="오라클"> 오라클
			<input type="checkbox" name="subject" value="서블릿"> 서블릿
			<input type="checkbox" name="subject" value="웹"> 웹
		</p>
		<p>
			<button type="submit">보내기</button>
		</p>
	</form>
</div>

</body>
</html>

다른 방법으로 Map방식으로 처리도 가능하지만 잘 사용하지 않는다.

<%@ page contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>파라미터 모든 이름 확인 getParameterNames()</h3>

<div>
	<form action="ex11_ok.jsp" method="post">
		<p>이름 : <input type="text" name="name"></p>
		<p>패스워드 : <input type="password" name="pwd"></p>
		<p>나이 : <input type="text" name="age"></p>
		<p>
			<input type="radio" name="gender" value="M" checked="checked"> 남자
			<input type="radio" name="gender" value="F"> 여자
		</p>
		<p>
			좋아하는 과목 : 
			<input type="checkbox" name="subject" value="자바"> 자바
			<input type="checkbox" name="subject" value="스프링"> 스프링
			<input type="checkbox" name="subject" value="오라클"> 오라클
			<input type="checkbox" name="subject" value="서블릿"> 서블릿
			<input type="checkbox" name="subject" value="웹"> 웹
		</p>
		<p>
			<button type="submit">보내기</button>
		</p>
	</form>
</div>

</body>
</html>

<%@page import="java.util.Enumeration"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");

	// 서버로 전송된 파라미터 이름
	Enumeration<String> e = request.getParameterNames();
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<%
	while(e.hasMoreElements()) {
		String name = e.nextElement(); // 파라미터 이름
		String []ss = request.getParameterValues(name);
		for(String s : ss) {
			out.print("<p>" + name + " : " + s +"</p>");
		}
	}

%>

</body>
</html>

Enumeration<String> e = request.getParameterNames();

를 통해서 서버로 전송되는 모든 파라미터들의 이름을 알 수 있다.

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>폼 예제</h3>

<form method='post' action="ex12_ok.jsp">
	<p>이름 : <input type='text' name='name'></p>
	<p>학번 : <input type='text' name='studentId'></p>
	<p>성별 :
		남자 <input  type='radio' name='gender' value='M' checked="checked">
		여자 <input type='radio' name='gender' value='F'>
	</p>
	<p>좋아하는 과목 :
		<input type="text" name="subject">
		<input type="text" name="subject">
		<input type="text" name="subject">
	</p>
	<p>출신도 :
		<select name="city">
			<option value="">::선택::</option>
			<option value="서울">서울</option>
			<option value="경기">경기</option>
			<option value="인천">인천</option>
			<option value="기타">기타</option>
		</select>
	</p>
	<p>취미 :
		<select name="hobby" multiple="multiple" size="5">
			<option value="운동">운동하기</option>
			<option value="영화">영화보기</option>
			<option value="등산">등산가기</option>
			<option value="여행">여행하기</option>
			<option value="게임">게임하기</option>
		</select>
	</p>
	<p>
		<button type="submit">등록하기</button>
	</p>
</form>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");

	String name = request.getParameter("name");
	String studentId = request.getParameter("studentId");
	String gender = request.getParameter("gender");
	String[] ss = request.getParameterValues("subject");
	String subject = "";
	for(String s:ss){
		if(s.length()!=0) {
			subject+=s+" ";
		}
	}
	String city = request.getParameter("city");
	String[] hh = request.getParameterValues("hobby");
	String hobby = "";
	if(hh!= null){
		for(String h:hh){
			hobby+=h+" ";
		}
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<p>이름 : <%=name%></p>
<p>학번 : <%=studentId%></p>
<p>성별 : <%=gender%></p>
<p>좋아하는 과목 : <%=subject%></p>
<p>출신도 : <%=city%></p>
<p>취미 : <%=hobby%></p>

</body>
</html>

getParameter()와 getParameterValues() 를 활용해서 파라미터가 한개인 것 여러개인 것 들을 처리한 모습이다.

다른 예제들

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.selectField {
	border: 1px solid #999;
	padding: 4px 5px;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

.boxTA {
    border:1px solid #999;
    height:150px;
    padding:3px 5px;
    border-radius:4px;
    background-color:#fff;
	resize : none;
	vertical-align: baseline;
}

textarea:focus, input:focus {
	outline: none;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.container {
    width: 400px;
    margin: 30px auto;
}

.note-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.note-table th, .note-table td {
	padding: 7px 0;
}

.left {
	text-align: left;
	padding-left: 7px;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
	padding-right: 7px;
}
</style>

<script type="text/javascript">
function itemAdd() {
	var f = document.noteForm;
	var item = f.itemLeft;
	
	item[item.length] = new Option("김자바", "kim"); // text, value
	item[item.length] = new Option("스프링", "spring"); 
	item[item.length] = new Option("서블릿", "servlet"); 
	item[item.length] = new Option("오라클", "oracle"); 
	item[item.length] = new Option("이자바", "lee"); 
	item[item.length] = new Option("홍자바", "hong"); 
	item[item.length] = new Option("나대한", "na"); 
}
window.onload = () => itemAdd();

// 선택된 option을 좌 또는 우로 이동
function itemMove(pos) {
	var f = document.noteForm;
	var source, target;
	
	if(pos==="left") { // right -> left
		source = f.itemRight;
		target = f.itemLeft;
	} else { // left -> right
		source = f.itemLeft;
		target = f.itemRight;
	}
	
	var len = source.length;
	for(var i=0; i<len; i++) {
		if( source.options[i].selected ) { // 선택된 항목만
			target[target.length] = 
				new Option(source.options[i].text, source.options[i].value);
			source[i] = null; // 삭제
			i--;
			len--;
		}
	}
}

// 모든 option을 좌 또는 우로 이동
function itemAllMove(pos) {
	var f = document.noteForm;
	var source, target;
	
	if(pos==="left") { // right -> left
		source = f.itemRight;
		target = f.itemLeft;
	} else { // left -> right
		source = f.itemLeft;
		target = f.itemRight;
	}
	
	var len = source.length;
	for(var i=0; i<len; i++) {
		target[target.length] = 
			new Option(source.options[0].text, source.options[0].value);
		source[0] = null; // 삭제
	}
}

function sendOk() {
	var f = document.noteForm;
	
	if( f.itemRight.length === 0 ) {
		alert("받는 사람을 먼저 추가 하세요...");
		f.itemRight.focus();
		return;
	}
	if(! f.msg.value.trim() ) {
		alert("메시지를 입력하세요...");
		f.msg.focus();
		return;
	}
	// select 요소는 서버로 전송하기 위해서 반드시 항목들이 선택되어 있어야 한다.
	for(var i=0; i < f.itemRight.length; i++) {
		f.itemRight[i].selected = true; // select 항목 선택
	}
	
	f.action = "note_ok.jsp";
	f.submit();
}
</script>

</head>
<body>

<div class="container">

	<div class="title">
	   <h3><span>|</span> 쪽지 보내기</h3>
	</div>

	<form name="noteForm" method="post">
	<table class="note-table">
		<tr>
		    <td width="150"><span>친구목록</span></td>
		    <td width="100">&nbsp;</td>
		    <td width="150"><span>받는사람</span></td>
		</tr>
		
		<tr>
		    <td class="left">
		        <select name="itemLeft" multiple="multiple" class="selectField" style="width:130px; height:120px;"></select>
		    </td>
		    <td class="center">
			    <button type="button" class="btn" onclick="itemMove('right');" style="display:block; width:80px;"> &gt; </button>
			    <button type="button" class="btn" onclick="itemAllMove('right');" style="display:block;width:80px;"> &gt;&gt; </button>
			    <button type="button" class="btn" onclick="itemMove('left');" style="display:block;width:80px;"> &lt; </button>
			    <button type="button" class="btn" onclick="itemAllMove('left');" style="display:block;width:80px;"> &lt;&lt; </button>
		    </td>
		    <td class="left">
		        <select name="itemRight" multiple="multiple" class="selectField" style="width:130px; height:120px;">
		        </select>
		    </td>
		</tr>
		<tr>
		    <td colspan="3">
		       <span>메시지</span>
		    </td>
		</tr>
		<tr>
		    <td colspan="3" class="left">
		        <textarea name="msg" class="boxTA" style="height:60px; width: 98%;"></textarea>
		    </td>
		</tr>
	</table>
	
	<table class="note-table">
		<tr>
		    <td class="right">
		        <button type="button" class="btn" onclick="sendOk();"> 쪽지보내기 </button>
		    </td>
		</tr>
	</table>
	</form> 

</div>

</body>
</html>

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");
	
	String[] ss = request.getParameterValues("itemRight");
	String receiver = "";
	if(ss != null) {
		for(String s : ss) {
			receiver += s + ",  ";
		}
	}
	String msg = request.getParameter("msg");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<p> 받는 사람 : <%= receiver %>
<p> 메시지 ...</p>
<div style="white-space: pre;"><%=msg%></div>

</body>
</html>

쪽지 보내기 / 메세지 보내기 파라미터

<%@page import="java.util.Calendar"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");

	// 처음 실행하는 경우에는 name, content가 넘어오는 것이 없으므로 null이 된다.
	String name = request.getParameter("name");
	if(name == null) name = "";
	String content = request.getParameter("content");
	if(content == null) content = "";
	
	// HTML 태그와 엔터를 변환
	content = content.replaceAll("&", "&amp;")
					.replaceAll("\"", "&quot;")
					.replaceAll("'", "&apos;")
					.replaceAll(">", "&gt;")
					.replaceAll("<", "&lt;")
					.replaceAll("\n", "<br>")
					.replaceAll("\\s", "&nbsp;"); // \\s는 공백, 탭, 엔터

	Calendar now = Calendar.getInstance();
	String regDate = String.format("%tF %tT", now, now);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>study</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}

.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.boxTA {
    border:1px solid #999;
    height:150px;
    padding:3px 5px;
    border-radius:4px;
    background-color:#fff;
	resize : none;
	vertical-align: baseline;
}

textarea:focus, input:focus {
	outline: none;
}

.table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.table th, .table td {
	padding: 7px 0;
}

.table-border tr {
	border-bottom: 1px solid #ccc; 
}
.table-border tr:first-child {
	border-top: 2px solid #ccc;
}

.guest-container {
	margin: 30px auto;
	width: 600px;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.table-form tr > td:first-child {
	width: 100px;
	text-align: center;
	background: #eee;
}
.table-form tr > td:nth-child(2) {
	padding-left: 10px;
}

.table-form input[type=text], .table-form input[type=file], .table-form textarea {
	width: 96%;
}
.table-form textarea {
	height: 70px;
}

.right {
	text-align: right;
	padding-right: 10px;
}

.guest-list {
	table-layout:fixed;
	word-break:break-all;
	margin-top: 15px;
}
.guest-list tr:nth-child(2n+1) {
	border: 1px solid #ccc;
	background: #eee;
}

.guest-list td {
	padding-left: 7px;
	padding-right: 7px;
}

.paginate {
	clear: both;
	text-align: center;
	white-space: nowrap;
	font-size: 14px;	
}
.paginate a {
	border: 1px solid #ccc;
	color: #000;
	font-weight: 600;
	text-decoration: none;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}
.paginate a:hover, .paginate a:active {
	color: #6771ff;
}
.paginate span {
	border: 1px solid #e28d8d;
	color: #000;
	font-weight: 600;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}
.paginate :first-child {
	margin-left: 0;
}
</style>

<script type="text/javascript">
function sendGuest() {
	var f = document.guestForm;
	
	if( ! f.name.value.trim() ) {
		alert("이름을 입력하세요");
		f.name.focus();
		return false;
	}
	
	if( ! f.content.value.trim() ) {
		alert("내용을 입력하세요");
		f.content.focus();
		return false;
	}
	
	return true;
}

function deleteGuest(num) {
	if( confirm("게시글을 삭제 하시겠습니까 ? ") ) {
		alert("삭제 Ok...");
	}
}

</script>

</head>

<body>

<div class="guest-container">
	<div class="title">
	    <h3><span>|</span> 방명록</h3>
	</div>
	
	<form name="guestForm" action="guest.jsp" method="post" onsubmit="return sendGuest();">
		<table class="table table-border table-form">
			<tr> 
				<td>작성자</td>
				<td> 
					<input type="text" name="name" maxlength="20" class="boxTF">
				</td>
			</tr>
	  
			<tr> 
				<td valign="top">내&nbsp;&nbsp;&nbsp;용</td>
				<td valign="top"> 
					<textarea name="content" class="boxTA"></textarea>
				</td>
			</tr>
		</table>
	
		<table class="table">
			<tr> 
				<td class="right">
					<button type="submit" class="btn">등록하기</button>
					<button type="reset" class="btn">다시입력</button>	  
				</td>
			</tr>
		</table>
	</form>
	
	<% if(content.length() != 0) { %>
		<table class="table guest-list">
			<tr>
				<td width="50%">
					<span style="font-weight: 600"><%= name %></span>
				</td>
				<td width="50%" align="right">
					<%= regDate %> | <a href="javascript:deleteGuest(1);">삭제</a>
				</td>
			</tr>
			<tr>
				<td colspan="2"><%= content %></td>
			</tr>
		</table>
	<% } %>
</div>

</body>
</html>

방명록의 파라미터 전송

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
	request.setCharacterEncoding("utf-8");

	int rows = 10;
	String srows = request.getParameter("rows");
	if(srows != null) {
		rows = Integer.parseInt(srows);
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
	margin: 0; padding: 0;
    box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: "Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif;
}

a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
a:active, a:hover {
	text-decoration: underline;
	color: #F28011;
}

.btn {
	color: #333;
	border: 1px solid #333;
	background-color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
	background-color: #e6e6e6;
	border-color: #adadad;
	color:#333;
}
.boxTF {
	border: 1px solid #999;
	padding: 5px 5px;
	background-color: #fff;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
.selectField {
	border: 1px solid #999;
	padding: 4px 5px;
	border-radius: 4px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}

.table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.table th, .table td {
	padding: 10px 0;
}

.table-border tr {
	border-bottom: 1px solid #ccc; 
}
.table-border thead tr:first-child {
	border-top: 2px solid #ccc;
}

.board {
	margin: 30px auto;
	width: 700px;
}

.title {
	width:100%;
	font-size: 16px;
	font-weight: bold;
	padding: 13px 0;
}

.board input[type=checkbox]{
	vertical-align: middle;
}

.table-list thead tr:first-child{
	background: #eee;
}
.table-list td {
	text-align: center;
}

.table-list td:nth-child(6n+3) {
	text-align: left;
	padding-left: 5px; 
}

.table-list tbody tr:hover {
	background: #efffef;
}

.table-list .chk {
	width: 40px;
	color: #787878;
}
.table-list .num {
	width: 60px;
	color: #787878;
}
.table-list .subject {
	color: #787878;
}

.table-list .name {
	width: 100px;
	color: #787878;
}
.table-list .date {
	width: 100px;
	color: #787878;
}
.table-list .hit {
	width: 70px;
	color: #787878;
}

.paginate {
	clear: both;
	text-align: center;
	white-space: nowrap;
	font-size: 14px;	
}
.paginate a {
	border: 1px solid #ccc;
	color: #000;
	font-weight: 600;
	text-decoration: none;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}
.paginate a:hover, .paginate a:active {
	color: #6771ff;
}
.paginate span {
	border: 1px solid #e28d8d;
	color: #000;
	font-weight: 600;
	padding: 3px 7px;
	margin-left: 3px;
	vertical-align: middle;
}
.paginate :first-child {
	margin-left: 0;
}
</style>

<script type="text/javascript">
function check() {
	var f = document.listForm;
	
	// checkbox 이름이 nums 인 요소가 한개도 없는 경우 
	if( f.nums === undefined ) { // if(! f.nums) {
		return;
	}
	
	// checkbox 이름이 nums 인 요소가 한개인 경우 
	if( f.nums.length === undefined ) { // if(! f.nums.length) {
		f.nums.checked = f.chkAll.checked;
		return;
	}
	
	// checkbox 이름이 nums 인 요소가 두개 이상인 경우 
	//    동일한 이름의 요소가 두개 이상인 경우에만 length 속성이 존재한다.
	// checked 속성 : checkbox, radio 버튼을 선택/해제하거나 선택 유무를 true/false로 반환
	for(var i = 0; i < f.nums.length; i++) {
		f.nums[i].checked = f.chkAll.checked;
	}
}
	
function deleteList() {
	var f = document.listForm;
	var cnt = 0;
	
	if( ! f.nums ) {
		return;
	}
	
	if( f.nums.length ) {
		// nums가 여러개인 경우
		for(var i=0; i<f.nums.length; i++) {
			if(f.nums[i].checked) {
				cnt++;
			}
		}
	} else {
		// nums가 하나인 경우
		if(f.nums.checked) {
			cnt++;
		}
	}
	
	if(cnt === 0) {
		alert("삭제할 게시물을 먼저 선택하세요");
		return;
	}
	
	if( confirm("선택한 게시글을 삭제하시겠습니까 ? ") ) {
		f.action = "delete.jsp";
		f.submit();
	}
}

function changeList() {
	var rows = document.getElementById("rows").value;
	var url = "list.jsp?rows="+rows;
	// GET 방식으로 파라미터 전송
	location.href = url
}

</script>

</head>
<body>

<div class="board">

	<div class="title">
	    <h3><span>|</span> 게시판</h3>
	</div>

	<form name="listForm" method="post">
	<table class="table">
	   <tr>
		  <td align="left" width="50%">
		  	<button type="button" class="btn" onclick="deleteList();">삭제</button>
		  </td>
		  <td align="right">
			 <select name="rows" id="rows" class="selectField" onchange="changeList();">
				   <option value="5"  <%= rows==5?"selected='selected'":"" %>>5개씩 출력</option>
				   <option value="10" <%= rows==10?"selected='selected'":"" %>>10개씩 출력</option>
				   <option value="20" <%= rows==20?"selected='selected'":"" %>>20개씩 출력</option>
				   <option value="30" <%= rows==30?"selected='selected'":"" %>>30개씩 출력</option>
				   <option value="50" <%= rows==50?"selected='selected'":"" %>>50개씩 출력</option>
			 </select>
		  </td>
	   </tr>
	</table>

	<table class="table table-border table-list">
	<thead>
		<tr> 
			<th class="chk">
				<input type="checkbox" name="chkAll" id="chkAll" onclick="check();">        
			</th>
			<th class="num">번호</th>
			<th class="subject">제목</th>
			<th class="name">작성자</th>
			<th class="date">작성일</th>
			<th class="hit">조회수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="nums" value="3"></td> 
			<td>3</td>
			<td>
				<a href="">HTML 강좌...</a>
			</td>
			<td>홍길동</td>
			<td>2021-03-10</td>
			<td>1</td>
		</tr>

		<tr>
			<td><input type="checkbox" name="nums" value="2"></td> 
			<td>2</td>
			<td>
				<a href="">CSS 강좌...</a>
			</td>
			<td>스타일</td>
			<td>2021-03-03</td>
			<td>1</td>
		</tr>

		<tr> 
			<td><input type="checkbox" name="nums" value="1"></td> 
			<td>1</td>
			<td>
				<a href="">자바 강좌...</a>
			</td>
			<td>김자바</td>
			<td>2021-01-10</td>
			<td>1</td>
		</tr>
	</tbody>
	</table>
	</form>
	
	<table class="table">
		<tr height="50">
			<td align="center">
				<div class="paginate">
					<span>1</span>
					<a href="#">2</a>
					<a href="#">3</a>
				</div>
			</td>
	   </tr>
	</table>

	<table class="table">
		<tr height="45">
			<td width="100">
				<button type="button" class="btn">새로고침</button>
			</td>
			<td align="center">
				<form name="searchForm" action="" method="post">
					<select name="condition" class="selectField">
						<option value="all">제목+내용</option>
						<option value="name">작성자</option>
						<option value="regDate">등록일</option>
						<option value="subject">제목</option>
						<option value="content">내용</option>
					</select>
					<input type="text" name="keyword" value="" class="boxTF">
					<button type="button" class="btn">검색</button>
				</form>
			</td>
			<td align="right" width="100">
				<button type="button" class="btn">글올리기</button>
			</td>
		</tr>
	</table>
</div>

</body>
</html>

게시판의 삭제할 항목을 전송해주는 파라미터

파라미터전송방법.txt

0.00MB

저작자표시

'프로그래밍 > JSP' 카테고리의 다른 글

JSP - 게시판 페이징 paging (0)	2021.10.18
JSP - EL / JSTL (0)	2021.10.15
JSP - 달력 (0)	2021.10.14
JSP - 전송 방식의 차이 (GET / POST) (0)	2021.10.11
JSP - 기초(1) (0)	2021.10.10

ABOUT ME

'프로그래밍 > JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바