[Web] Day 4 - JSP

sue·2024년 1월 8일

📒국비학원 [Web]

목록 보기

6/21

-request.getParameter로 받은 데이터는 해당페이지에서만 사용해야지, 다른 파일로 넘겨줄 수 없음.

1. 만년달력 만들기

✏️ Test1.

💻 입력

화면1 : calendar
~~화면2 : calendar_ok~~ 없이 form - get방식이지만 자기자신을 호출할 수 있도록

넘어오는 데이터를 받아내는건 변수 = request.getParameter()가 필요함
a href="calendar.jsp?year=<%preYear %>&month=<%preMonth %>"
get방식 쓸때는 파일이름 + ? + 구분자 & 넣어서 <% %> 결과값 내기

calendar.jsp

<%@page import="java.util.Calendar"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	Calendar cal = Calendar.getInstance(); //캘린더만의 개체생성
	
	int nowYear = cal.get(Calendar.YEAR);
	int nowMonth = cal.get(Calendar.MONTH)+1;
	int nowDay = cal.get(Calendar.DAY_OF_MONTH);

	//사용자가 get방식으로 넘겨주면서 표시하고 싶은 년,월
	String strYear = request.getParameter("year");
	String strMonth = request.getParameter("month");

	//달력에 표시할 년, 월
	//처음 시작할때는 넘어오는 gP가 없어서 null이므로, 무조건 system-now로 먼저 만들어야 함
	int year = nowYear;
	int month = nowMonth;

	//2번째 실행
	if (strYear != null) {
		year = Integer.parseInt(strYear); //정수로 바꾸는 이유 : +1 , -1 해줘야하니까
	}

	if (strMonth != null) {
		month = Integer.parseInt(strMonth);
	}

	//1월 전달  - 전 년도 12월
	int preYear = year, preMonth = month - 1;
	if (preMonth < 1) {// 23.12 <- 24.01
		preYear = year - 1;
		preMonth = 12;
	}

	//12월 다음 달은 다음해 1월
	int nextYear = year, nextMonth = month + 1;
	if (nextMonth > 12) {
		nextYear = year + 1;
		nextMonth = 1;
	}
	
	
	//표시할 달력 셋팅
	//1 : 매달의 첫날은 1
	cal.set(year,month-1,1); 
	
	int startDay = 1;
	int endDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
	
	//달력만들 땐 주의 수가 필요함
	//(year년 month월 1일의 요일구하기)
	int week = cal.get(Calendar.DAY_OF_WEEK);
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>만년달력</title>

<style type="text/css">


body {
	font-size: 11pt;
}

td {
	font-size: 11pt;
}

</style>

</head>
<body>

<br/><br/>

<table align="center" width="210" cellpadding="2" cellspacing="1">
	<tr>
		<td align="center">
		<a href="calendar.jsp?year=<%=preYear %>&month=<%=preMonth %>">◀</a>
		<b>&nbsp;<%=year %>년&nbsp;&nbsp;<%=month %>월&nbsp;</b>	
		<a href="calendar.jsp?year=<%=nextYear %>&month=<%=nextMonth %>">▶</a>
		</td>
	</tr>
</table>


<table align="center" width="210" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr>
	<td bgcolor="#e6e4e6" align="center"><font color="red">일</font></td>
	<td bgcolor="#e6e4e6" align="center">월</td>
	<td bgcolor="#e6e4e6" align="center">화</td>
	<td bgcolor="#e6e4e6" align="center">수</td>
	<td bgcolor="#e6e4e6" align="center">목</td>
	<td bgcolor="#e6e4e6" align="center">금</td>
	<td bgcolor="#e6e4e6" align="center"><font color="blue">토</font></td>
</tr>

<%
	int newLine = 0;
	out.print("<tr height='20'>");
	for(int i=1; i<week; i++){
		out.print("<td bgcolor='#ffffff'>&nbsp;</td>"); //<td> 공백을 위한 td </td>
		newLine++;
	}

	for(int i=startDay;i<=endDay; i++){
		
		//일요일은 red, 토요일은 blue, 평일은 black, 오늘 color
		String fontColor = (newLine==0)?"red":(newLine==6)?"blue":"black";
		String bgColor = (nowYear==year)&&(nowMonth==month)&&(nowDay==i)?"#e6e4e6":"#ffffff"; 
		
		out.print("<td align='center' bgcolor='"+ bgColor + "'><font color='" + fontColor + "'>" + i +
				"</font></td>");
		//<td align='center' bgcolor='#e6e4e6'>
		//<font color ='black'>8(일)</font></td>
		
		newLine++;
		
		
		if(newLine==7 && i != endDay){//0~6까지가 1주니까  
			out.print("</tr><tr height='20'>"); //</tr>로 줄바꾸고 , <tr> 다시 tr열기
			newLine=0;
		}
	}

	
	
	while(newLine>0 && newLine<7){
		out.print("<td bgcolor = '#ffffff'>&nbsp;</td>");
		newLine++;
	}

	out.print("</tr>"); // 128line <tr>닫아주기
	
%>

</table>
</body>
</html>

📌 출력

주소값이랑 항상 맞게 나오는지 비교하기

▶ 누르면 다음달

◀ 누르면 전달

2.

✏️ Test2.

Redirect / Forward

: 두번째 ->를 브라우저가 하느냐 스프링 내부에서 하느냐의 차이

: [설명 잘 되어있음] 출처 https://doublesprogramming.tistory.com/63

Redirect : client는 서버안에 있는 a.jsp한테 요청했지만, 없으니까 그 결과를 담고있는 result.jsp로 바뀜 (주소가 바뀜)

ex) 서버한테 DB에 INSERT/DELETE/UPDATE/SESSION시켜줘
: client가 3번을 요청했지만 a.jsp는 없으니까 DB에 INSERT를 해서 그 결과를 Result.jsp에 넣어주고(주소바뀜) , 그 이후에 client에게 확인해봐라~

보완 취약

Forward : client가 a.jsp에 요청을 해서 안가지고 있지만, result.jsp에서 만들어서 그 만든 결과를 자기가 a.jsp가 그대로 가지고 옴. (주소가 안바뀜)

ex) servelt : 주로 forward를 씀 (redirect도 씀)

-> 클라이언트에게는 test_for로 보여지지만, 사실 result에서 이루어지고있어서 보완에 강함.

:jsp는 servelt이 없음 - redirect씀

클라이언트 컴퓨터 ㅣ Server (이 안에 .jsp / result.jsp - file이 만들어져있음)

<onclick="this.form.action='test1_red.jsp'">

this.form.action라고 원래는 안씀. 지금은 아래랑 주소가 달라서 이렇게 쓴거임

서버 -> request -> 클라이언트
클라이언트 -> response -> 서버

💻 입력

test1.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>


<form action="" method="post">

이름 : <input type="text" name="name"><br/>

<input type="submit" value="리다이렉트"
	onclick="this.form.action='test1_red.jsp'">
	
<input type="submit" value="포워드"
	onclick="this.form.action='test1_for.jsp'">

</form>



</body>
</html>

test1_red

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	
	String name = request.getParameter("name");
	
	//리다이렉트(위에 받은 name을 "result.jsp"로 가라고 클라이언트한테 돌아가서 말함)
	//길이 꺾여버린건 name이 null값임 (주소바뀜)
	response.sendRedirect("result.jsp");
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

이름: <%=name %>

</body>
</html>

test1_for

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String name = request.getParameter("name");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

이름: <%=name %>
<jsp:forward page="result.jsp"/>

</body>
</html>

result

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String name = request.getParameter("name");
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

리다이렉트 또는 포워드 페이지<br/>
이름: <%=name %>

</body>
</html>

3. ⭐ SESSION - 게시판 만들기

✏️ Test3.

로그인/로그아웃 처리 = session 이용

session : 공통으로 사용하는 저장공간으로, [하나의 프로젝트 안에서만] 다른 폴더에서도 가능함

ex) 페이지가 바뀌었을 때, 닉네임 계속 나오는거 - (session공간에 있는 닉네임 불러오는 것)

align은 가로를 기준으로
valign은 세로를 기준 (top / middle / buttom)

-로그인을 하면 일반적으로 main창으로 돌아감
근데 login_ok에서 머물러있음

-> 그래서 session에 redirect 를 해야함
(데이터가 바꼈으니까)

session안에서 찾는 코딩

login_ok 다녀오면 Id가 생기니까 null값에서 벗어남

💻 입력

login.jsp

<%@page import="java.util.Calendar"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userId = (String)session.getAttribute("userId");
	
	
	//session.setMaxInactiveInterval(30*60); //30분
	//session.setMaxInactiveInterval(5);//5초
	
	Calendar cal = Calendar.getInstance(); //캘린더만의 개체생성
	
	int nowYear = cal.get(Calendar.YEAR);
	int nowMonth = cal.get(Calendar.MONTH)+1;
	int nowDay = cal.get(Calendar.DAY_OF_MONTH);

	//사용자가 get방식으로 넘겨주면서 표시하고 싶은 년,월
	String strYear = request.getParameter("year");
	String strMonth = request.getParameter("month");

	//달력에 표시할 년, 월
	//처음 시작할때는 넘어오는 gP가 없어서 null이므로, 무조건 system-now로 먼저 만들어야 함
	int year = nowYear;
	int month = nowMonth;

	//2번째 실행
	if (strYear != null) {
		year = Integer.parseInt(strYear); //정수로 바꾸는 이유 : +1 , -1 해줘야하니까
	}

	if (strMonth != null) {
		month = Integer.parseInt(strMonth);
	}

	//1월 전달  - 전 년도 12월
	int preYear = year, preMonth = month - 1;
	if (preMonth < 1) {// 23.12 <- 24.01
		preYear = year - 1;
		preMonth = 12;
	}

	//12월 다음 달은 다음해 1월
	int nextYear = year, nextMonth = month + 1;
	if (nextMonth > 12) {
		nextYear = year + 1;
		nextMonth = 1;
	}
	
	
	//표시할 달력 셋팅
	//1 : 매달의 첫날은 1
	cal.set(year,month-1,1); 
	
	int startDay = 1;
	int endDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH);
	
	//달력만들 땐 주의 수가 필요함
	//(year년 month월 1일의 요일구하기)
	int week = cal.get(Calendar.DAY_OF_WEEK);
	
	
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>로그인</title>

<style type="text/css">


body {
	font-size: 11pt;
}

td {
	font-size: 11pt;
}

</style>



<script type="text/javascript">

	function sendIt() {
		
		let f = document.myForm;
		
		if(!f.userId.value){
			alert("아이디 입력!");
			f.userId.focus();
			return;
		}
		
		if(!f.userPwd.value){
			alert("패스워드 입력!");
			f.userPwd.focus();
			return;
		}
		
		f.submit();
	}

</script>


</head>
<body>

<br/>

<table border="1" width="600" align="center" style="font-size: 9pt;">
<tr height="20">
	<td colspan="2" align="right">
	| 게시판 |
	<%if(userId==null){%>
	일정관리
	<%}else{ %>
	<a href="schedule.jsp">일정관리</a> 
	<%} %>
	|
	</td>
</tr>	

<tr height="400">
	<td width="200" valign="top">
	<%if(userId==null){%>
	<form action="login_ok.jsp" method="post" name="myForm">
		아이디: <input type="text" name="userId" size="10"/><br/>
		패스워드: <input type="password" name="userPwd" size="10"/><br/>
		<input type="button" value="로그인" onclick="sendIt();"/>
	</form>
		<%}else{ %>
		<b><%=userId %></b>님 안녕하세요<br/>
		<a href="logout.jsp">로그아웃</a>
		<%} %>
	</td>
	<td valign="middle" align="center">
	<%if(userId==null){%>
	<b>로그인하면 새로운 세상이 보입니다. </b>
	<%}else{ %>
	
	<!-- ************************************ -->
	
<table align="center" width="210" cellpadding="2" cellspacing="1">
	<tr>
		<td align="center">
		<a href="login.jsp">
		<img alt = "today" src="../jsp3/image/today.png" align="left"/></a>
		<a href="login.jsp?year=<%=preYear %>&month=<%=preMonth %>">◀</a>
		<b>&nbsp;<%=year %>년&nbsp;&nbsp;<%=month %>월&nbsp;</b>	
		<a href="login.jsp?year=<%=nextYear %>&month=<%=nextMonth %>">▶</a>
		</td>
	</tr>
</table>


<table align="center" width="210" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr>
	<td bgcolor="#e6e4e6" align="center"><font color="red">일</font></td>
	<td bgcolor="#e6e4e6" align="center">월</td>
	<td bgcolor="#e6e4e6" align="center">화</td>
	<td bgcolor="#e6e4e6" align="center">수</td>
	<td bgcolor="#e6e4e6" align="center">목</td>
	<td bgcolor="#e6e4e6" align="center">금</td>
	<td bgcolor="#e6e4e6" align="center"><font color="blue">토</font></td>
</tr>
 
<%
	int newLine = 0;
	out.print("<tr height='20'>");
	for(int i=1; i<week; i++){
		out.print("<td bgcolor='#ffffff'>&nbsp;</td>"); //<td> 공백을 위한 td </td>
		newLine++;
	}

	for(int i=startDay;i<=endDay; i++){
		
		//일요일은 red, 토요일은 blue, 평일은 black, 오늘 color
		String fontColor = (newLine==0)?"red":(newLine==6)?"blue":"black";
		String bgColor = (nowYear==year)&&(nowMonth==month)&&(nowDay==i)?"#e6e4e6":"#ffffff"; 
		
		out.print("<td align='center' bgcolor='"+ bgColor + "'><font color='" + fontColor + "'>" + i +
				"</font></td>");
		//<td align='center' bgcolor='#e6e4e6'>
		//<font color ='black'>8(일)</font></td>
		
		newLine++;
		
		
		if(newLine==7 && i != endDay){//0~6까지가 1주니까  
			out.print("</tr><tr height='20'>"); //</tr>로 줄바꾸고 , <tr> 다시 tr열기
			newLine=0;
		}
	}

	
	
	while(newLine>0 && newLine<7){
		out.print("<td bgcolor = '#ffffff'>&nbsp;</td>");
		newLine++;
	}

	out.print("</tr>"); // 128line <tr>닫아주기
	
%>

</table>
	<%} %>
	</td>
</tr>
</table>


</body>
</html>

로그인 전

로그인 후

login_ok.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
	
	if(userId.equals("suzi") && userPwd.equals("a123")){
		session.setAttribute("userId", userId); //"만든 변수", 수지가 들어가있는 6번 line - userId
		
		response.sendRedirect("login.jsp");
		
	}
		
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

아이디나 패스워드가 틀립니다<br/>
<a href="login.jsp">다시 로그인!</a>

</body>
</html>

schedule.jsp

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String id = session.getId(); //세션모습 불러오기
	int sTime = session.getMaxInactiveInterval(); //세션 시간
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

일정관리<br/>
세션 ID: <%=id %><br/>
세션 유휴시간: <%=sTime %>초<br/>

</body>
</html>

세션 기간 정해주고싶으면 -> login.jsp에 가서 : destroy를 지나게 되면 session이 삭제됨

자동로그아웃됨

logout.jsp

logout이나 login_ok는 밑에 html안써도 됨

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	session.removeAttribute("userId");//suzi삭제
	session.invalidate(); //userId 변수 삭제 - 이것만 써도됨 그럼 자연스레 변수도 삭제 됨
	
	//세션 내용 변경됐음 -> redirect시켜야함 (로그인창으로 돌아가게끔)
	response.sendRedirect("login.jsp");
%>

4.

✏️ Test4.

② session으로 가지고 오는법
③ 데이터를 넘기는 3가지 방법
:idden으로 숨겨서 가지고오는 법

데이터를 그대로 가지고오는거 getParameter
: 그래서 hidden으로 숨겨서 데이터 getParameter로 4개 다 잘 넘어오게 하기

ex1

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="ex2.jsp" method="post">
이름: <input type="text" name="userName" size="10"/><br/>
생일: <input type="text" name="userBirth" size="10"/><br/>
<input type="submit" value="다음"/><br/>
</form>



</body>
</html>

ex2

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userName = request.getParameter("userName");
	String userBirth = request.getParameter("userBirth");
	
	//ex1꺼를 session으로 ex3에 띄움
	session.setAttribute("userName", userName);
	session.setAttribute("userBirth", userBirth);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="ex3.jsp" method="post">
아이디: <input type="text" name="userId" size="10"/><br/>
패스워드: <input type="password" name="userPwd" size="10"/><br/>

<input type="hidden" name="userName" value="<%=userName%>"/>
<input type="hidden" name="userBirth" value="<%=userBirth%>"/>

<input type="submit" value="가입"/><br/>
</form>

</body>
</html>

ex3

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//String userName = (String)session.getAttribute("userName");
	//String userBirth = (String)session.getAttribute("userBirth");
	String userName = request.getParameter("userName"); // 2에서 받아서 주석
	String userBirth = request.getParameter("userBirth");
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
%>

<!-- 
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userName = (String)session.getAttribute("UserName");
	String userBirth = (String)session.getAttribute("UserBirth");
	
	//넘어오는 데이터 처리
	//String userName = request.getParameter("userName");
	//String userBirth = request.getParameter("userBirth");
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
%> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

이름: <%=userName %></br/>
생일: <%=userBirth %></br/>
아이디: <%=userId %></br/>
비밀번호: <%=userPwd %></br/>

</body>
</html>

그래서 ex1 -> ex2로 추가작업 진행함

5.[총 접속자 수] 보기

✏️ Test5.

💻 입력

<%@ page contentType="text/html; charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	int n = 0;
	
	String count = (String)application.getAttribute("count");
	
	if(count!=null){
		n = Integer.parseInt(count);
	}
	
	n++;
	
	application.setAttribute("count", Integer.toString(n));
	
	String realPath = application.getRealPath("/"); //제일 상단의 프로젝트 이름 가르키는 것
	application.log("접속사IP: "+request.getRemoteAddr());
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

총 접속자 수 : <%=n %><br/>
웹서버 실제경로: <%=realPath %>

</body>
</html>

sue

이전 포스트

[Web] Day 3 - JSP

다음 포스트

[Web] Day 4 - JSP

📒국비학원 [Web]

1. 만년달력 만들기

2.

Redirect / Forward

3. ⭐ SESSION - 게시판 만들기

4.

5.[총 접속자 수] 보기

[Web] Day 3 - JSP

[Web] Day 5 - JSP

0개의 댓글