Crescendo Code

4월 21일 (금) - [ 이클립스와 JSP 환경 설정 ] 본문

KIC 백엔드 수업

4월 21일 (금) - [ 이클립스와 JSP 환경 설정 ]

Crecok 2023. 4. 21. 17:47
반응형

참고 자료 : 파일질라 - Java - 강의 - chapter 02 웹 프로그래밍 기초.pdf / chapter 03 jsp로 시작하는 웹 프로그래밍.pdf

◆ 도메인

 

▶ DNS ( Domain Name System ) : IP 주소를 도메인 주소로 변환해주는 시스템

- nslookup : DNS 서버에 질의하여, 도메인의 정보를 조회 하는 명령어이다. ( 명령 프롬프트에서 실행 )

 

 

Q. naver.com의 IP Address 얻기

 

 

ex : www.naver.com  

com 네트워크 - naver 네트워크 - www 네트워크 : 별개의 영역이 존재

- 역순으로 해석한다. ( 패키지 이름과 연관이 있음 - 도메인과 똑같이 매칭되어 작성 )

 

com / org / net - 미국 주 정부에서 관리

naver (구매) - www (네트워크) or 호스트 설정

 

ex : https://tomcat.apache.org

www 대신 tomcat(호스트) 가 들어간 것. 설정 가능

 

 

▶ 웹 브라우저가 하는 일

1. 서버에 URL 요청

2. 렌더링

 

▶ HTTP 요청 방식

1. Get : URL + 데이터

2. Post : URL + Header (데이터 포함)

 

▶ 웹 페이지 종류

1. 정적 웹 페이지 : 요청할 때 마다 동일한 페이지 ( HTML )

2. 동적 웹 페이지 : 요청할 때 마다 다른 페이지 ( 웹 프로그램 - 라이브러리로 추가 되기도 한다 )

 

▶ 웹 프로그램 ( 웹 프로그램의 종류 / 기본 언어 / 플랫폼 / 기타로 분류 )

 

웹 프로그램 종류 기본언어 플랫폼 기타
JSP / Servlet Java 모든 WAS (프로그램) / 구형
PHP PHP 모든 Apache / 구형
Python Python 모든 자체 / 최신
JS JS 모든 자체 / 최신
ASP.net Window용 언어 Window IIS

- Servlet : 자바의 클래스 파일을 이용해 웹 프로그램을 제작 ( 이전 )

- JSP ( Java Server Pages ) : Servlet의 발전형

- Servlet / Java 둘 다 실행하기 위해선 WAS가 있어야 한다.

 

▶ WAS 종류 ( apache - tomcat / resin / OC4J ... )

 

 

◆ JSP 구성

- 파일 확장자 : jsp

- Java 언어를 이용해 동적 웹사이트 제작

 

▶ JSP 페이지 내부

1. Directive : 문서 전체에 대한 규정 ( 필수 ) - page, include, taglib로 구성

    - contentType / pageEncoding 우선 이해

2. 스크립트 (프로그램) 요소 : 선언부 / 자바 소스 / 출력 부분으로 구성

    - 선언부 : 메서드 선언

    - Scriptlet : 자바 소스 - <% ~ 자바 소스 ~ %>

    - Expression : 출력 부분

 

Visual Studio Code + apache-tomcat

Eclipse + apache-tomcat

 

배포 ( Deployment ) : 개발환경 → 서비스 환경

개발환경 : Window + JDK + apache-tomcat + Eclipse

서비스 환경 : Linux(Unix) + JDK + apache-tomcat

 

- apache-tomcat 다운로드 ( 버전 9.0.74 )

 

다운받은 압축 파일을 C:\Java 폴더로 이동

 

cmd에서 apache-tomcat 실행

 

- VS code에 작성 후 브라우저에 http://localhost:8080/파일이름.확장자 로 접속

 

▶ ( test.jsp ) 'Hello JSP' 출력

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello JSP
</body>
</html>

- JSP : HTML / CSS / JS 를 출력한다.

- Java에 관련된 소스코드가 보여서는 안된다.

 

 

▶ 위 예제에서 contentType을 "text/plain"으로 바꾸면 평문으로 출력된다.

 

 

Q. ( test.jsp ) 'Hello JSP' 를 apache-tomcat 프로그램과 HTML 문서에 각각 출력

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello JSP
    System.out.println( "Hello JSP" );
    <%
    // console.log - 디버깅
    // document.write - 출력
    
    System.out.println( "Hello JSP" ); // 디버깅
    out.println( "Hello JSP" ); // html 출력
    %>
</body>
</html>

좌 : html 문서 출력 / 우 : apache-tomcat 프로그램 출력 (콘솔)

 

 

Q. ( test2.jsp ) 'Hello JSP' 를 줄바꿈을 적용하여 두 번 출력하기

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<%
    out.println( "Hello JSP<br />" );
    out.println( "Hello JSP<br />" );
%>
</body>
</html>

- 출력하는 내용 부분은 HTML 코드로 작성된다. ( br 적용 확인 )

 

 

Q. 처음부터 끝까지 out.println으로 묶어도 된다.

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
out.println( "<!DOCTYPE html>" );
out.println( "<html lang='en'>" );
out.println( "<head>" );
out.println( "<meta charset='UTF-8'>" );
out.println( "<meta http-equiv='X-UA-Compatible' content='IE=edge'>" );
out.println( "<meta name='viewport' content='width=device-width, initial-scale=1.0'>" );
out.println( "<title>Document</title>" );
out.println( "</head>" );
out.println( "<body>" );
out.println( "Hello JSP<br />" );
out.println( "Hello JSP<br />" );
out.println( "Hello JSP<br />" );
out.println( "</body>" );
out.println( "</html>" );
%>

Java 코드를 잘못 작성했을 때 오류 메시지에 나와있는 행으로 대략적인 오류 위치를 파악 가능

- Java 오류 : 오류 메시지에서 오류 지정 행을 따라 오류 수정

- HTML 오류 : 개발자 모드, 요소로 들어가서 오류 파악 후 수정

 

 

Q. 구구단 ( 2단 ~ 9단 ) 출력 프로그램 만들기

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<%
	out.println( "<table width='800' border='1' style='text-align:center'>" );
	for ( int i=1; i<=9; i++ ) {
		out.println( "<tr>" );
		for ( int j=1; j<=9; j++ ) {
			if ( i == 1 && j == 1 ) {
				out.print( "<td></td>" );
			} else if ( i == 1 ) {
				out.print( "<td> X" + j + "</td>");
			} else if ( j == 1 ) {
				out.print( "<td>" + i + "단</td>" );
			} else {
				out.print( "<td>" + i + "X" + j + "=" + (i*j) + "</td>" );
			}
		}
		out.print( "</tr>" );
	}
	out.print( "</table>" );
%>
</body>
</html>

- print, println은 개발자 모드에서의 차이가 있다. 

 

 

 

Q. ( test4.jsp ) 기본 API인 Date를 사용해서 날짜와 시간 출력 - java.util.Date 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ page import="java.util.Date" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<%
    // 자바에서 제공하는 기본 API 사용 가능
    // java.util.Date data = new java.util.Date();
    Date date = new Date();
    out.println( data.toLocaleString() );
%>
</body>
</html>

 

 

Q. ( calendar1.jsp ) 달력 만들기

<%@ page language="java"
	contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ page import="java.util.Calendar" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<%
	Calendar nDay = Calendar.getInstance();
    
	int year = nDay.get( Calendar.YEAR );
	int month = nDay.get( Calendar.MONTH ) + 1;

	Calendar sDay = Calendar.getInstance();
	Calendar eDay = Calendar.getInstance();
     
	sDay.set( year, month-1, 1 );
	eDay.set( year, month, 1-1 );
     
	int startDayOfWeek = sDay.get( Calendar.DAY_OF_WEEK );
	int endDyaOfWeek = eDay.get( Calendar.DAY_OF_WEEK );
	int endDay = 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>" );
     
	out.println( "<tr>" );
	for( int i=1 ; i<startDayOfWeek ; i++ ) {
		out.println( "<td></td>" );
	}
     
	for( int i=1, n=startDayOfWeek ; i<=endDay ; i++, n++ ) {
		if( n % 7 == 1 ) out.println( "<tr>" );

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

 

 

Q. ( calendar2.jsp ) 달력 만들기 2 ( 배경색 일요일 - Red, 토요일 - Blue, 오늘 날짜 - Bold )

<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.util.Calendar" %>
<html>
<head><title>달력</title></head>
<body>
<%
	Calendar nDay = Calendar.getInstance();

	int year = nDay.get( Calendar.YEAR );
	int month = nDay.get( Calendar.MONTH ) + 1;
	
	Calendar sDay = Calendar.getInstance();
	Calendar eDay = Calendar.getInstance();
	
	sDay.set( year, month-1, 1 );
	eDay.set( year, month, 1-1 );
	
	int startDayOfWeek = sDay.get( Calendar.DAY_OF_WEEK );
	int endDayOfWeek = eDay.get( Calendar.DAY_OF_WEEK );
	int endDay = eDay.get( Calendar.DATE );
	int toDay = nDay.get( Calendar.DATE );
	
	out.println( "<table width='800' border='1'>" );
	out.println( "<tr style='text-align:center'>" );
	out.println( "<td colspan='7'>" + year + "년 " + month + "월</td>" );
	out.println( "</tr>" );
	out.println( "<tr style='text-align:center'>" );
	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>" );
	
	out.println( "<tr>" );
	for( int i=1; i<startDayOfWeek; i++ ) {
		out.println( "<td></td>" );
	}
	for ( int i=1, n=startDayOfWeek; i<=endDay; i++, n++ ) {
		if( n%7 == 1 ) {
			out.println( "<tr>" );
			if( toDay == n ) {
				out.println( "<td bgcolor='red'>" + "여기" + i + "</td>" );
			} else {
				out.println( "<td bgcolor='red'>" + i + "</td>" );
			}
		} else if( n%7 == 0 ) {
			if( toDay == n ) {
				out.println( "<td bgcolor='blue'>" + "여기" + i + "</td>" );
			} else {
				out.println( "<td bgcolor='blue'>" + i + "</td>" );
			}
			out.println( "</tr>" );
		} else {
			if( toDay == i ) {
				out.println( "<td><b>" + i + "</b></td>" );
			} else {
				out.println( "<td>" + i + "</td>" );
			}
		}
	}
	for( int i=endDayOfWeek; i<=6; i++ ) {
		out.println( "<td></td>" );
	}
	out.println( "</tr>" );
	out.println( "</table>" );
%>
</body>
</html>

 

 

이클립스에서 JSP 프로그래밍을 위한 환경 설정하기

 

1. 이클립스 실행 → 새 워크스페이스 경로 ( jsp-workspace 폴더 ) 설정

2. Window - Preferences - Web - CSS / HTML / JSP File 인코딩 전부 UTF-8로 변경 + 폰트 변경

3. 하단의 New Server 클릭 ( WAS의 종류가 목록에 뜬다 )

4. New Server 에서 Apache-tomcat 9.0 설치 (버전에 맞는걸로)

New Server

 

- Apache Tomcat 경로 지정 및 설치

다운로드 받은 파일 실행

 

 

Q. (JSPEx01) 새 프로젝트 만들기

- 실행 브라우저 지정

- 실행시 run as - run on server  - tomcat 클릭 후 실행

 

 

Q. 위의 달력 예제를 webapp 경로로 복사해서 실행해보기

webapp 폴더를 사용한다.

 

▶ JSP만이 사용하는 특수 기호들

<%@

<%!

<%

<%=

 

▶ JSP에서 사용되는 기본 객체 ( out / request / response / session / applicaion ... )

- 인스턴스화를 하지 않음 ( 이미 인스턴스화 되어 있음 - ex : out )

 

System.out.println - System.out이 static이라 접근 가능

out.println - 이미 인스턴스화 되어있는 out

 

request 예제

<%@ 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( request.getRemoteAddr() + "<br />" );
		out.println( request.getContextPath() + "<br />" );
		out.println( request.getRequestURI() + "<br />" );
		out.println( request.getRequestURL() + "<br />" );
		
		out.println( request.getServerName() + "<br />" );
		out.println( request.getServerPort() + "<br />" );
%>
</body>
</html>

 

예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Enumeration" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
	Enumeration headerEnum = request.getHeaderNames();
	while( headerEnum.hasMoreElements()) {
		String headerName = (String)headerEnum.nextElement();
		String headerValue = request.getHeader(headerName);
%>
<%= headerName %> + <%= headerValue %><br>
<%
	}
%>
</body>
</html>

 

 

Q. 데이터 전송 예제

 

1. request.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을 이용할 땐 post 방식 -->
<form action="request_ok.jsp" method="post">
		데이터 <input type="text" name="data1" /><br />
		데이터 <input type="text" name="data2" /><br />
		<br />
		<input type="submit" value="전송" /><br />
</form>
<br />

<!-- 순수하게 링크를 이용할 땐 get 방식 -->
<a href="request_ok.jsp?data1=값1&data2=값2">전송</a>

</body>
</html>

 

1. request_ok.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding( "utf-8" );
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
		out.println( "data1 : " + request.getParameter( "data1" ) + "<br />" );
		out.println( "data2 : " + request.getParameter( "data2" ) + "<br />" );
%>
</body>
</html>

 

 

Q. gugudan.jsp에서 시작단과 끝단을 입력하면 gugudan_ok.jsp에서 테이블 형식으로 결과 출력

 

1. gugudan.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 action="gugudan_ok.jsp" method="post">
시작단 <input type="text" name="startdan" />
~
끝단 <input type="text" name="enddan" />
<input type="submit" value="구구단 출력" />
</form>

</body>
</html>

 

2. gugudan_ok.jsp

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

	String strStartdan = request.getParameter( "startdan" );
	String strEnddan = request.getParameter( "enddan" );
	
	// System.out.println( strStartdan );
	// System.out.println( strEnddan );
	
	int iStartdan = Integer.parseInt( strStartdan );
	int iEnddan = Integer.parseInt( strEnddan );
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 구구단 출력 -->
<%
	out.println( "<table width='800' border='1'>" );
	for ( int i=iStartdan; i<=iEnddan; i++) {
		out.println( "<tr>" );
		for ( int j=1; j<=9; j++ ) {
			out.println( "<td>" + i + "X" + j + "=" + (i*j) + "</td>" );
		}
		out.println( "</tr>" );
	}
	out.println( "</table>" );
%>
</body>
</html>

 

 

Q. 위 예제를 처리부와 출력부를 분할해서 재작성 ( gugudan_ok2.jsp )

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

	String strStartdan = request.getParameter( "startdan" );
	String strEnddan = request.getParameter( "enddan" );
	
	// System.out.println( strStartdan );
	// System.out.println( strEnddan );
	
	int iStartdan = Integer.parseInt( strStartdan );
	int iEnddan = Integer.parseInt( strEnddan );
	
	StringBuilder sbHtml = new StringBuilder();
	sbHtml.append("<table width='800' border='1'>" );
	for ( int i=iStartdan; i<=iEnddan; i++) {
		sbHtml.append( "<tr>" );
		for ( int j=1; j<=9; j++ ) {
			sbHtml.append( "<td>" + i + "X" + j + "=" + (i*j) + "</td>" );
		}
		sbHtml.append( "</tr>" );
	}
	sbHtml.append( "</table>" );
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 구구단 출력 -->
<%=sbHtml.toString() %>

</body>
</html>

 

 

 

과제 

1. 입력 박스에 년도와 월을 입력하면 다른 창에 그 년도와 달에 해당하는 달력을 다른 창에 출력 시키기

2. 입력 박스에 년도와 월을 입력했을 때 그 결과 창이 같은 창 아래에 출력되게 만들기

    - 초기 값의 유무 / if문을 통해 구현할 수 있는지 고민해보기

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

'KIC 백엔드 수업' 카테고리의 다른 글

4월 26일 (수) - [ 게시판 : 최신글 new, 조회수 증가, 이모티콘 게시판, 페이징 기법 ]  (0) 2023.04.26
4월 24일 (월) - []  (0) 2023.04.25
4월 20일 (목) - [ Lombok, Chart ]  (0) 2023.04.20
4월 19일 (수) - [ 메시지 / 이메일 전송 ]  (0) 2023.04.19
4월 18일 (화) - []  (0) 2023.04.18
'KIC 백엔드 수업' Related Articles more
Comments