지구정복

[JSP] 12/21 | 웹프로그래밍 개념, JSP사용하기(directive, scriptlet, declaration, expression), 구구단출력하기, 달력만들기 본문

데이터 엔지니어링 정복/JAVA & JSP

[JSP] 12/21 | 웹프로그래밍 개념, JSP사용하기(directive, scriptlet, declaration, expression), 구구단출력하기, 달력만들기

eeaarrtthh 2020. 12. 21. 18:17
728x90
반응형

배울 내용

이제 JSP / Servlet에 대해 배울 예정

html, CSS, Javascript, Java에 대한 기본내용을 알아야 한다.

jsp의 출력결과는 html, css, Javascript가 된다.

 

2. 웹 프로그래밍 기초

p36

2.1. 웹과 웹 프로그래밍

2.1.1 URL과 웹 페이지

웹 브라우저의 주소줄에 표시되는 것을 URL이라고 한다. (Uniform Resource Locator)의 약자로 주소와 같은 역할이다.

URL은 몇 개의 구성 요소로 이루어진다.

 

http://www.11st.co.kr/html/category/1.html?xzone=ctgr1^html

 

  • 프로토콜 : http이며 웹프바루어자 서버와 내용을 주고받을 때 사용할 규칙이름이다.웹페이지의 주소를 표현할 때는 http를 사용한다.
  • 서버 이름 : www.11.st.co.kr이 웹페이즈를 요청할 서버의 이름이다. 이처럼 도메인이름이나 IP주소를 입력할 수 있다.
  • 경로 : /html~1.html까지가 웹페이지의 상세 주소에 해당한다. 즉, 웹페이지마다 다른 경로를 갖는다.
  • 쿼리 문자열 : ?~끝까지가 추가로 서버에보내는 데이터에 해당한다. 같은 경로라고 하더라도 입력한 값에 따라 다른 결과를 보여줘야 할 때 쿼리 문자열을 사용한다.

 

2.1.2 웹 브라우저와 웹 서버

웹 브라우저에 URL을 입력하면 웹 서버라 불리는 프로그램이 웹 브라우저에 웹 페이지를 제공한다.

웹 브라우저가 웹 서버에 웹 페이지를 달라고 하는 것을 요청(request)라고 하고

요청한 웹 페이지를 웹 브라우저에 제공하는 것을 응답(response)라고 한다.

 

웹 브라우저와 웹 서버는 다른 컴퓨터에 위치한다.

웹 브라우저가 웹 서버에 연결하려면, 웹 서버가 실행중인 컴퓨터의 주소를 알아야 한다. 이를 IP주소라고 한다.

IP주소는 숫자로 되어있기 때문에 외우기 힘드므로 도메인 이름을 사용한다.

 

2.1.3 HTML과 HTTP

웹 서버는 URL에 해당하는 HTML문서를 전송하는데, HTML 문서를 받은 웹 브라우저는 정해진 규칙에 따라 HTML문서를 분석해서 앎자은 화면을 생성한다. 이를 렌더링이라고 해준다.

브라우저의 역할은 요청된 URL을 렌더링해준다.

 

html문서도 HTTP에 담아서 전송한다. HTTP는 HyperText Transfer Protocol의 약자로 웹 브라우저와 웹 서버가 html을 비롯해 이미지, 동영상, xml 문서 등 다양한 데이터를 주고받을 때 사용하는 일종의 규칙이다.

 

요청규칙 : 웹 브라우저가 웹 서버에 html과 같은 것을 요청할 때 사용할 데이터 구성 규칙

응답규칙 : 웹 서버가 웹 브라우저에 html과 같은 것을 전송할 때 사용할 데이터 구성 규칙

 

2.1.4 정적 자원과 동적 자원

웹 서버들이 URL의 경로와 일치하는 파일을 읽어와 응답으로 전송하기 때문에 파일이 바뀌기 전까지 웹 서버는 항상 같은 내용을 웹 브라우저에 전송한다. 이러한 고정된 결과가 출력된다고 해서 이들을 정적페이지 정적 자원이라고 한다.

반면에 시간이나 특정 조건에 따라 응답 데이터가 달라지는 자원을 동적 페이지 또는 동적 자원이라고 부른다.

 

2.1.5 웹 프로그래밍과 JSP

웹 프로그래밍이란 간단히 말하면 웹 서버가 웹 브라우저에 응답으로 전송할 데이터를 생성해주는 프로그램을 작성하는 것이다.

JSP는 JavaServer Pages의 줄임말로 동적 페이지를 작성하는데 사용되는 자바의 표준 기술로서 html 응답을 생성하는데 필요한 기능을 제공한다.

 

단순 웹 서버가 정적인 html파일이나 이미지를 제공하는 것과 달리 jsp 서버는 웹을 위한 연결, 프로그래밍 언어, 데이터베이스 연동과 같이 어플리케이션을 구현하는데 필요한 기능을 제공하고 있다. JSP를 이용해서 만든 프로그램을 실행하려면 톰캣이나 제티 또는 JBoss EAP와 같은 서버 프로그램이 필요하다. 이러한 서버 프로그램을 웹 어플리케이션 서버

(Web Application Server) 줄여서 WAS라고 한다.

이들 WAS는 웹 브라우저로부터 요청이 오면 알맞은 프로그램을 찾아 실행하고, 프로그램의 실행 결과를 응답으로 전송한다.

 

클라이언트			웹 서버
1. 브라우저	요청->		html/css/js
2. java
		<-응답(정적)
				웹 프로그래밍: 요청할때마다 응답 데이터가 달라지는 것
		<-응답(동적)


웹 프로그래밍 언어 종류
	Window Programming			Web Programming
1. MS 계열		
	- Visaul C++(C#) .net / Visual Basic .net	- ASP.net
2. 비 MS 계열(MS에서도 처리가능)
	- C / C++				- C
	- Perl					- Perl
	- Java					- JSP / Servlet : JSP / Servlet으로 Java 언어를 표현한다.
	- Python					- Python

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
공공기관, 은행권, 대기업에서 최초에 컴퓨터를 들여왔을 때 운영체제는 보통 Unix이다.
	Unix	C / C++ / Perl : 최초에 이런 언어를 사용
		Java	: 후에 Java를 사용, 따라서 보통 JSP를 사용한다.
        
java	- class(컴파일)		- Servlet 방식
	    - html 안에 java 언어사용	- JSP 방식

 

1.2 JSP 만들고 실행하기

 

먼저 톰캣을 깔고 이클립스는 아래 버전을 사용한다. '엔터프라이즈 자바 디벨로퍼'

톰캣은 최신버전을 다운받고 이클립스 워크스페이스 안에 압축을 푼다.

 

WAS 종류
- Service(운영용)		- tomcat(Linux / Unix에서 사용)
- 개발용 			- eclipse + tomcat(Ms / Mac에서 사용)

JSP 만들기
1. 확장자 .jsp
2. jsp 문법
	directive : jsp를 사용한다는 페이지 선언 구문 
		- page / include / tablib 디렉티브 3가지
	예시) <%@ page contentType="text/html; charset=utf-8" %>
	contentType		: text/html; charset=utf-8
	pageEncoding		: utf-8
	language 		: java 사용
	import			: 외부 속성 사용할 때

	declaration : 메서드 선언 / 멤버변수 선언
    	<%!
    	%>

	scriptlet : 메서드 안에 지역변수 또는 제어문 선언
	<%
		자바 소스 작성
	%>

	expression : 출력

 

ㅇ directive, scriptlet 사용하기

<!-- directive 부분 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello JSP 1<br>
<!-- scriptlet 부분 -->
<%
	//console 출력
	System.out.println("Hello JSP2");
	
	//html 출력
	out.println("<b>Hello JSP 3</b> <br>");
	
	//for문 사용
	for(int i=1; i<=3; i++) {
		out.println( "<b>for문 사용 " + i + "</b><br>" );
	}
%>
</body>
</html>

 

이번에는 jsp를 이용해서 테이블을 만들어보자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	out.println( "<table border='1' width='600'>" );
	for ( int row=1; row<=3; row++) {
		out.println( "<tr>" );
		for ( int col=1; col<=3; col++) {
			out.println( "<td> table 만들기 </td>" );
		}
		out.println( "</tr>" );
	}
	out.println( "</table>" );
%>
</body>
</html>

 

자바스크립트는 웹 브라우저에서 자바스크립트를 실행했다면 jsp는 톰캣 서버에서 실행하므로 페이지 소스보기에서

java언어가 보이지 않는다.

 

 

실습) 구구단 출력하기

아래와 같이 출력되도록 코딩해보자.

 

내 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
	out.println( "<table border='1' width='800'>");
	for( int row=0; row<10; row++ ) {
		out.println( "<tr width='300'> ");
		for( int col=0; col<10; col++ ) {
			if ( row == 0 && col == 0 ) {
				out.println( "<td>");
				out.println( "</td>");
			} else if ( row == 0 ) {
				out.println( "<td>" + col + " 단 </td>");
			} else if ( col == 0 ) {
				out.println( "<td>X" + row + "</td>");
			} else {
				out.println( "<td>" + row + " X " + col + " = " + row*col + "</td>");
			}
			
		}
		out.println( "</tr>");
	}
	out.println( "</table>");
%>

</body>
</html>

강사님 코드 1

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	table {
		border-collapse: collapse;
		width: 900px;
	} 
	table, td {
		border: 1px solid black;
	}
</style>
</head>
<body>

<%
	out.println( "<table>");
	for( int row=0; row<10; row++ ) {
		out.println( "<tr> ");
		for( int col=0; col<10; col++ ) {
			if ( row == 0 && col == 0 ) {
				out.println( "<td>");
				out.println( "</td>");
			} else if ( row == 0 ) {
				out.println( "<td>" + col + " 단 </td>");
			} else if ( col == 0 ) {
				out.println( "<td>X" + row + "</td>");
			} else {
				out.println( "<td>" + row + " X " + col + " = " + row*col + "</td>");
			}
			
		}
		out.println( "</tr>");
	}
	out.println( "</table>");
%>

</body>
</html>

강사님 코드2 : 변수 이용해서 출력하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	table {
		border-collapse: collapse;
		width: 900px;
	} 
	table, td {
		border: 1px solid black;
	}
</style>
</head>
<body>

<%
	String html =  "<table>";
	for( int row=0; row<10; row++ ) {
		html += "<tr> ";
		for( int col=0; col<10; col++ ) {
			if ( row == 0 && col == 0 ) {
				html += "<td></td>";
			} else if ( row == 0 ) {
				html += "<td>" + col + " 단 </td>";
			} else if ( col == 0 ) {
				html += "<td>X" + row + "</td>";
			} else {
				html += "<td>" + row + " X " + col + " = " + row*col + "</td>";
			}
			
		}
		html +=  "</tr>";
	}
	html += "</table>";
	
	out.println( html );
%>

</body>
</html>

 

ㅇdeclaration, expression 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- declaration 부분 -->
<%!
	public int multiply ( int a, int b ) {
		int multi = a + b;
		System.out.println( multi );
		return multi;
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	int result = multiply(10, 20);
	out.println( "결과 : " + result + "<br>" );
%>

<!-- expression 부분 -->
<%= result %>
</body>
</html>

 

 

ㅇJSP의 기본 객체

p72, 114, 132

jsp의 기본 객체
* 객체변수화 되어있는 클래스
1. request	: 요청과 관련된 클래스(가장 중요)
2. response	: 응답과 관련된 클래스
3. out		: 출력관련 클래스
4. session	: 변수 저장과 관련된 클래스
5. application	: 변수 저정과 관련된 클래스
...

request 클래스에 있는 메서드
	클라이언트 정보(브라우저 정보)
	서버 관련 정보
	요청 파라메터
		방식이 2가지이다.
		get	url뒤에 첨부돼서 전송 -> 길이 제한이 있다. 파일첨부 안됨
		post	헤더에 첨부돼서 전송 -> 길이 제한이 없다. 파일첨부 됨
	요청헤더
	쿠키
	속성 처리 가능

 

 

3.5 서버 정보 읽어오기

p72

3.5.1 클라이언트 정보 및 서버 정보 읽기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
클라이언트 ip = <%= request.getRemoteAddr() %><br>
인코딩 = <%= request.getCharacterEncoding() %><br>
컨텐트타입 = <%= request.getContentType() %><br>
전송방식 = <%= request.getProtocol() %><br>
요청 URI = <%= request.getRequestURI() %><br>
요청 URL = <%= request.getRequestURL() %><br>

<hr>
서버이름 = <%= request.getServerName() %><br>
서버포트 = <%= request.getServerPort() %><br>


</body>
</html>

 

3.5.2 요청 파라미터 처리

-form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!--  form.jsp -->

<!--  get 방식 -->
<form action = "form_ok.jsp" method = "get">
data1 <input type= "text" name="data1"><br>
data2 <input type= "text" name="data2"><br>
<input type="submit" value="전송"/>
</form>
<br><hr><br>

<a href = "form_ok.jsp?data1=value1&data2=value2"> 전송 </a>

<br><hr><br>

<!--  post 방식 -->
<form action = "form_ok.jsp" method = "post">
data1 <input type= "text" name="data1"><br>
data2 <input type= "text" name="data2"><br>
<input type="submit" value="전송"/>
</form>

</body>
</html>

-form_ok.jsp

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

	//form_ok.jsp
	out.println( "form_ok.jsp <br>" );

	String data1 = request.getParameter( "data1" );
	String data2 = request.getParameter( "data2" );
	
	out.println( "data1 : " + data1 + "<br>");
	out.println( "data2 : " + data2 + "<br>");
%>

첫 번째 전송 눌렀을 때

두 번째 전송 눌렀을 때

 

3.5.2.2 request 기본 객체의 요청 파라미터 관련 메서드

getParameter(String name)

getParameterValues(String name)

getParameterNames()

getParameterMap()

 

예제

-form1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 생성</title>
</head>
<body>

<form action="viewParameter.jsp" method="post">
이름 : <input type="text" name="name" size="10"> <br>
주소 : <input type="text" name="address" size="30"> <br>
좋아하는 동물 : 
	<input type="checkbox" name="pet" value="dog"> 강아지
	<input type="checkbox" name="pet" value="cat"> 고양이
	<input type="checkbox" name="pet" value="pig"> 돼지
<br>
<input type="submit" value="전송">
</form>

</body>
</html>

-viewParameter.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.Enumeration" %>
<%@ page import = "java.util.Map" %>
<%
	request.setCharacterEncoding( "utf-8" );
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요청 파라미터 출력</title>
</head>
<body>

<b>request.getParameter() 메서드 사용</b><br>
name 파라미터 = <%= request.getParameter("name") %><br>
address 파라미터 = <%= request.getParameter("address") %>

<p>
<b>request.getParameterValues() 메서드 사용</b><br>
<%
	String[] values = request.getParameterValues("pet");
	if ( values != null ) {
		for ( int i=0; i<values.length; i++ ) {
%>
		<%= values[i] %>
<%
		}
	}
%>

<p>
<b>request.getParameterNames() 메서드 사용</b><br>
<%
	Enumeration paramEnum = request.getParameterNames();
	while ( paramEnum.hasMoreElements() ) {
		String name = (String)paramEnum.nextElement();
%>
		<%= name %>
<%
	}
%>

<p>
<b>request.getParameterMap() 메서드 사용</b><br>
<%
	Map parameterMap = request.getParameterMap();
	String[] nameParam = (String[])parameterMap.get("name");
	if ( nameParam != null ) {
%>
name = <%= nameParam[0] %>
<%
	}
%>


</body>
</html>

-실행결과

 

 

ㅇjsp에서 자바스크립트 같이 사용하기

자바스크립트에서 입력값에 대한 검사를 하고 페이지를 넘길 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	const checkfrm1 = function() {
		//alert( 'click' );
		const data1 = document.frm.data1.value.trim();
		const data2 = document.frm.data1.value.trim();
		
		//alert( data1 + '/' + data2 );
		document.frm.submit();
	};
</script>
</head>
<body>

<!--  form.jsp -->

<!--  post 방식 -->
<form action = "form_ok.jsp" method = "post">
data1 <input type= "text" name="data1"><br>
data2 <input type= "text" name="data2"><br>
<!-- <input type="submit" value="전송"/> -->
<input type="button" value="전송" onclick="checkfrm1()" >
</form>

</body>
</html>

 

submit으로 입력값 검사하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	const checkfrm1 = function() {
		//alert( 'click' );
		const data1 = document.frm.data1.value.trim();
		const data2 = document.frm.data1.value.trim();
		
		//alert( data1 + '/' + data2 );
		document.frm.submit();
	};
	
	const checkfrm2 = function() {
		const data1 = document.frm.data1.value.trim();
		const data2 = document.frm.data1.value.trim();
		
		alert( data1 + '/' + data2 );
		
		if ( data1 == '') {
			alert('데이터 1 입력');
			return false;
		}
	};
</script>
</head>
<body>

<!--  form.jsp -->

<!--  post 방식 -->
<form action = "form_ok.jsp" method = "post" onsubmit="return checkfrm2()">
data1 <input type= "text" name="data1"><br>
data2 <input type= "text" name="data2"><br>
<input type="submit" value="전송">
<!--  <input type="button" value="전송" onclick="checkfrm2()" > -->
</form>

</body>
</html>

 

실습) 자바스크립트 함수선언해서 새로운 페이지에 구구단 출력하기

-form창

-form_ok창

 

 

코드

-gugudanForm

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	const gugudan = function() {
		let a = document.frm.startDan.value.trim();
		let b = document.frm.endDan.value.trim();
		if ( a.length >= 2 || b.length >= 2 ) {
			alert( "한 글자만 입력해주세요." );
			window.location.reload(true);
		} else if ( a > b ) {
			alert( "끝단이 시작단보다 커야됩니다." );
			window.location.reload(true);
		} else {
		a = Number( a );
		b = Number( b );
		//a = parseInt(a);
		document.frm.submit();
		}
	};
</script>

</head>
<body>

<form action="gugudanForm_ok.jsp" name="frm" method="post">

시작 단 <input type = "text" name = "startDan"> <br>
끝 단    <input type = "text" name = "endDan"> <br>
<input type = "button" value ="전송" onclick="gugudan()">

</form>

</body>
</html>

-gugudanForm_ok

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<% 
	request.setCharacterEncoding( "utf-8" );
	String startDan = request.getParameter( "startDan" );
	String endDan = request.getParameter( "endDan" );
	
	int istartDan = Integer.parseInt( startDan );
	int iendDan = Integer.parseInt( endDan );
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
	table {
		border-collapse: collapse;
		width: 900px;
	} 
	table, td {
		border: 1px solid black;
	}
</style>
</head>
<body>

<%
	out.println( "<table>");
	for( int row=istartDan-1; row<=iendDan; row++ ) {
		out.println( "<tr> ");
		for( int col=0; col<10; col++ ) {
			if ( row == istartDan-1 && col == 0 ) {
				out.println( "<td>");
				out.println( "</td>");
			} else if ( row == istartDan-1 ) {
				out.println( "<td> X" + col + "</td>");
			} else if ( col == 0 ) {
				out.println( "<td>" + row + " 단 </td>");
			} else {
				out.println( "<td>" + row + " X " + col + " = " + row*col + "</td>");
			}
			
		}
		out.println( "</tr>");
	}
	out.println( "</table>");
%>

</body>
</html>

 

ㅇimport 사용하기

 

-현재 날짜 출력하기

scriptlet에 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	java.util.Date date = new java.util.Date();
	out.println( "현재날짜 : " + date.toLocaleString() );
%>
</body>
</html>

 

contentType에 import로 사용하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page import = "java.util.Date" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	//java.util.Date date = new java.util.Date();
	Date date = new Date();
	out.println( "현재날짜 : " + date.toLocaleString() );
%>
</body>
</html>

 

실습) 2020년 12월 달력을 만들어보자.

-결과

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.Calendar" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	int year = 2020;
	int month = 12;
	
	int START_DAY_OF_WEEK = 0;
	int END_DAY_OF_WEEK = 0;
	int END_DAY = 0;
	
	Calendar sDay = Calendar.getInstance();
	Calendar eDay = Calendar.getInstance();
	
	sDay.set(year, month-1, 1 );
	eDay.set(year, month, 1-1 );
	
	START_DAY_OF_WEEK = sDay.get( Calendar.DAY_OF_WEEK );
	END_DAY_OF_WEEK  = eDay.get( Calendar.DAY_OF_WEEK );
	END_DAY = eDay.get( Calendar.DATE );
	
	out.println( "<table width='800' border='1'>" );
	out.println( "<tr>" );
	out.println( "<td colspan='7'>       "  + year + "년 " + month + "월" + "</td>");
	out.println( "</tr>" );
	
	out.println( "<tr>" );
	out.println( "<td>SU</td><td>MO</td><td>TU</td><td>WE</td><td>TH</td><td>FR</td><td>SA</td>");
	out.println( "</tr>" );

	for ( int i = 1; i<START_DAY_OF_WEEK; i++ ) {
		out.print("<td></td>");
	}
	
	for( int i=1, n=START_DAY_OF_WEEK ; i<=END_DAY ; i++, n++ ) {
		if( n % 7 == 1 ) out.println( "<tr>");
		out.print( "<td>" + i + "</td>" );
		if( n % 7 == 0 ) out.println("</tr>");
	}
        
	for( int i=END_DAY_OF_WEEK ; i<=6 ; i++ ) {
		out.println( "<td></td>" );
	}
	out.println( "</table>" );
%>

</body>
</html>

 

실습) 폼 형식으로 아래와 같이 달력 만들기

년도는 2019~2021, 월은 1월~12월

-CalendarEx2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	const calendar = function() {
		let year = document.frm.Year.value.trim();
		let month = document.frm.Month.value.trim();
		
		document.frm.submit();
	}
</script>

</head>
<body>

<form action="CalendarEx2_ok.jsp" name="frm" method="post">
&nbsp&nbsp연도  &nbsp&nbsp&nbsp&nbsp&nbsp월 <br>
<select name="Year">
	<option value="">년도선택</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
	<option value="2021">2021</option>
</select>


<select name="Month">
	<option value="">달 선택</option>
	<option value="1">1월</option>
	<option value="2">2월</option>
	<option value="3">3월</option>
	<option value="4">4월</option>
	<option value="5">5월</option>
	<option value="6">6월</option>
	<option value="7">7월</option>
	<option value="8">8월</option>
	<option value="9">9월</option>
	<option value="10">10월</option>
	<option value="11">11월</option>
	<option value="12">12월</option>
</select>

<input type="button" value="달력출력" onclick="calendar()">

</form>

</body>
</html>

-CalendarEx2_ok

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.Calendar" %>
<%
	request.setCharacterEncoding( "utf-8" );
	String strYear = request.getParameter( "Year" );
	String strMonth = request.getParameter( "Month" );
	
	int year = Integer.parseInt( strYear );
	int month = Integer.parseInt( strMonth );
 %>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	
	int START_DAY_OF_WEEK = 0;
	int END_DAY_OF_WEEK = 0;
	int END_DAY = 0;
	
	Calendar sDay = Calendar.getInstance();
	Calendar eDay = Calendar.getInstance();
	
	sDay.set(year, month-1, 1 );
	eDay.set(year, month, 1-1 );
	
	START_DAY_OF_WEEK = sDay.get( Calendar.DAY_OF_WEEK );
	END_DAY_OF_WEEK  = eDay.get( Calendar.DAY_OF_WEEK );
	END_DAY = eDay.get( Calendar.DATE );
	
	out.println( "<table width='800' border='1'>" );
	out.println( "<tr>" );
	out.println( "<td colspan='7'>       "  + year + "년 " + month + "월" + "</td>");
	out.println( "</tr>" );
	
	out.println( "<tr>" );
	out.println( "<td>SU</td><td>MO</td><td>TU</td><td>WE</td><td>TH</td><td>FR</td><td>SA</td>");
	out.println( "</tr>" );

	for ( int i = 1; i<START_DAY_OF_WEEK; i++ ) {
		out.print("<td></td>");
	}
	
	for( int i=1, n=START_DAY_OF_WEEK ; i<=END_DAY ; i++, n++ ) {
		if( n % 7 == 1 ) out.println( "<tr>");
		out.print( "<td>" + i + "</td>" );
		if( n % 7 == 0 ) out.println("</tr>");
	}
        
	for( int i=END_DAY_OF_WEEK ; i<=6 ; i++ ) {
		out.println( "<td></td>" );
	}
	out.println( "</table>" );
%>
</body>
</html>

 

실습) 하나의 jsp안에 아래와 같이 출력하기

 

-코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.Calendar" %>

<%
	request.setCharacterEncoding( "utf-8" );
 %>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	let calendar = function() {
		let strYear = parseInt( document.frm.Year.value.trim() );
		let strMonth = parseInt( document.frm.Month.value.trim() );
		
		let sDay = new Date( strYear, strMonth-1, 1 );
		let eDay = new Date( strYear, strMonth, 1-1 );
		
		let start_day_of_week = sDay.getDay()+1;
		let end_day_of_week = eDay.getDay()+1;
		let end_day = eDay.getDate();
		
		let str = '';
		
		str += "<table width='800' border='1'>" ;
		str += "<tr>";
		str += "<td colspan='7'>       "  + strYear + "년 " + strMonth + "월" + "</td>";
		str += "</tr>";
		
		str += "<tr>";
		str += "<td>SU</td><td>MO</td><td>TU</td><td>WE</td><td>TH</td><td>FR</td><td>SA</td>";
		str += "</tr>";

		for ( let i = 1; i<start_day_of_week; i++ ) {
			str += "<td></td>";
		}
		
		for( let i=1, n=start_day_of_week ; i<=end_day ; i++, n++ ) {
			if( n % 7 == 1 ) str += "<tr>";
			str += "<td>" + i + "</td>";
			if( n % 7 == 0 ) str += "</tr>";
		}
	        
		for( let i=end_day_of_week; i<=6 ; i++ ) {
			str += "<td></td>";
		}
		str += "</table>";
		
		document.getElementById('result').innerHTML = str;
		
	};
</script>

</head>
<body>

<form name="frm">
&nbsp&nbsp연도  &nbsp&nbsp&nbsp&nbsp&nbsp월 <br>
<select name="Year">
	<option value="">년도선택</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
	<option value="2021">2021</option>
</select>


<select name="Month">
	<option value="">달 선택</option>
	<option value="1">1월</option>
	<option value="2">2월</option>
	<option value="3">3월</option>
	<option value="4">4월</option>
	<option value="5">5월</option>
	<option value="6">6월</option>
	<option value="7">7월</option>
	<option value="8">8월</option>
	<option value="9">9월</option>
	<option value="10">10월</option>
	<option value="11">11월</option>
	<option value="12">12월</option>
</select>

<input type="button" value="달력출력" onclick="calendar()">

</form>
<br><br><hr>

출력<br>
<form name="frm2">
	<div id="result"></div>
</form>

</body>
</html>
728x90
반응형
저작자표시 동일조건

'데이터 엔지니어링 정복 > JAVA & JSP' 카테고리의 다른 글

[JSP] 12/23 | 게시판 만들기, 이모티콘 추가된 게시판 만들기  (0) 2020.12.23
[JSP] 12/22 | 달력출력, JDBC라이브러리 JSP에서 사용하기, 커넥션 풀 사용하기  (0) 2020.12.22
[JAVA] 12/14 | 다이얼로그 콤보박스를 이용한 우편번호 검색기만들기, Java를 이용해서 이메일보내기(파일첨부하기)  (0) 2020.12.15
[JAVA] 12/11 | Swing(사원정보가져오기, JDialog, ColorChooser, FileChooser, java파일불러온 뒤 다시 저장하기, JMeun, 각종 Layout, Event, 우편번호검색기)  (0) 2020.12.11
[JAVA] 12/10 | Swing - JSpinner, JComboBox, JList, JTable, JTree 사용하기  (0) 2020.12.10
'데이터 엔지니어링 정복/JAVA & JSP' Related Articles more
Comments