본문 바로가기
카테고리 없음

45/JSP/request/parameter

bopuri 2022. 11. 12. 01:17

미니 프로젝트

                        윈도우 프로젝트 - 관리자

                                                awt -> swing -> swt -> java fx

                                                * 보기좋은떡이 먹기도 좋다

                                                                        20 가치 프로그램

                                                                        + 30 디자인

                                                                        + 50 기획

                                                                        => 100

 

                        웹 프로젝트 - Java 언어를 이용한 웹 사이트 구현

                                                Java 의 확장 라이브러리

                                                => java se (x) -> java ee ( jsp / servlet, jdbc, mail... )

 

웹(앱) 프로젝트

                        풀스택

                                                                        => 디자인 기획( 스타일 가이드 )

                                                프론트엔드( 클라이언트 웹/앱(android / IOS 기술) )

                                                                        * html / css

                                                                        * javascript( ECMAScript ) -> 프레임워크( node ,vue, react ... )

                                                                        네트워크( 인터넷 - http )

                                                백엔드

                                                                        시스템( platform / os ) - Unix(Linux) / Window

                                                                        데이터베이스

                                                                        웹서버

                                                                        서버 웹 기술 - Java(JSP / Servlet), Python, Javascript(node), ...

                                                                                                => 프레임워크

 

정적 요청 - 웹서버 -html

동적 요청 - was(web application server) - 웹 프로그램 - jsp / servlet

                        jsp - apache-tomcat, jetty, jboss ...                        

                        => was(해석 장치)

 

                                                

*                                            (1.HTTP요청)                 (2.실행)

                        웹 브라우저          -->              WAS         -->               JSP                        

                                                   <--

                                          (3.HTTP응답 전송)

 

프로젝트

           wifreframe - 캡쳐화면 1장 - main화면 중심으로 편집

           구현화면 - 캡쳐화면 1장 - 메인화면 중심

 

JSP

(Java Server Pages)

동적인서버페이지 만들기

 

JSP / 비주얼스튜디오코드 에서 사용법

 

1.아파치 톰캣zip파일을 Java폴더에 넣어 압축푼다

2. 명령 프롬프트에서 Java폴더의 아파치톰캣폴더안의bin폴더를 경로로한다

3. startup.bat 으로 실행 시킨다

4. 명령프롬프트 창이 하나 더 뜨면, http://localhost:8080/ 에서 창이 뜨는지 확인한다

 

Visual Studio Code

JSP

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello JSP
</body>
</html>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %> 
=> 이 선언부는 html에서 java를 사용할수 있게 만드는 선언부이다
 
 

소스코드를 보면 jsp선언부는 was에서 해석후 적용하고 사라진다

 

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello JSP<br>
    <%
    // Java Source 가 들어가는 영역
    // => 주석

    // 출력 -> html

    // was 로그로 출력 = 디버깅용(에러출력)
    System.out.println("Hello Jsp");

    // 화면 구현을 위한 출력
    // out.println("Hello JSP");
    out.println("<b>Hello JSP</b><br>");
    out.println("<b>Hello JSP</b><br>");
    out.println("<b>Hello JSP</b><br>");
    out.println("<b>Hello JSP</b><br>");
    %>
</body>
</html>

<boby> 태그 사이에 <%   %> 태그는 java source가 들어가는 영역이다

<%   %> 태그 사이는 자바로 코딩한다

하지만 <%   %> 태그 사이에도 html 태그를 집어넣을수 있다

( 자바로 코딩하기때문에 <%   %>  태그 사이는 //이 주석, html은 <!-- --> 가 주석)

 

System.out.println("Hello Jsp"); 를 <%   %>태그 사이에넣어 출력시키면

명령프롬프트에서 출력한다

이는 디버깅용으로 사용되기때문에 웹에서 출력하려면

out.println(); 을 쓴다

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
    /*
    out.println("<!DOCTYPE html>");
    out.println("<html lang='ko'>");
    out.println("<head>");
    out.println("<meta charset='UTF-8'>");
    out.println("</head>");
    out.println("<body>");
    out.println(" Hello JSP");
    out.println("</body>");
    out.println("</html>");
    */

    StringBuilder sbHtml = new StringBuilder();
    sbHtml.append("<!DOCTYPE html>");
    sbHtml.append("<html lang='ko'>");
    sbHtml.append("<head>");
    sbHtml.append("<meta charset='UTF-8'>");
    sbHtml.append("</head>");
    sbHtml.append("<body>");
    sbHtml.append(" Hello JSP");
    sbHtml.append("</body>");
    sbHtml.append("</html>");

    out.println(sbHtml.toString());
%>

outprintln();에 html태그를 넣어 사용할수 있고

StringBuilder를 선언해 append() 안에 넣어 사용할수도 있다

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
<%
// out.println / for / if
// 구구단 출력


out.println("<table width='800' border='1'>");
for(int i=1; i<=9; 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>

JSP로 구구단문 출력

 

 

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

import 구문<br>
<%@ page import="java.util.Date" %>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%
        Date date = new Date();
        out.println(date.toLocaleString());
    %>

    <br>
    표현식(expression)
    <br>
    <%="<b>" + date.toLocaleString() + "</b>"%>
</body>
</html>

import 구문은 <%@     %> 사이에 넣는다

표현식은 <%=         %> 사이에 넣는다

 

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>

<!--  선언부  -->
<%!
    public int multiply(int a, int b){
        int result = a*b;
        return result;
    }
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 표현식-->
    <%= multiply(10, 25) %><br>
    
    <%
        int a = 10;
        int b = 25;
        int result = multiply(a, b);
        out.println(result + "<br>");
    %>
</body>
</html>

eclipse

JSP

 

- 이클립스에 JSP서버 적용

File -> switch workspace -> other

java-workspace를 jsp-workspace로 바꾼다

 

 

- JSP 기본설정

Window -> preferences -> Web -> html, css, jsp의 Encoding을 utf-8로 바꾸기

 

 

- JSP서버설정

밑의 Servers 우클릭 -> New -> server

사용할 서버 설정

(현재 아파치톰캣 9.0 사용중)

 

- 프로젝트 만드는법

프로젝트폴더쪽 우클릭 -> New -> other -> Web -> Dynamic Web Project

 

-> 프로젝트 폴더명

Target runtime은 서버로 지정한것이 자동등록된다

 

 

-  JSP 파일 만들기

프로젝트폴더 -> src폴더 -> main폴더 -> webapp폴더 우클릭 -> new -> JSP File

 

<%@ 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>
<%
	out.println("Hello JSP<br>");

	Date date = new Date();
	out.println(date.toLocaleString());
%>
<%= "Hello JSP" %><br>
</body>
</html>

eclipse

JSP

 

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

=> jsp 적용소스코드

 

이클립스에서는 명령프롬프트를 쓸 필요없이 JSP설정만 해놓는다면

우클릭 Run As -> Run on Server 를통해 자동으로 웹페이지를 열 수 있다

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클라이언트 및 서버정보</title>
</head>
<body>
	클라이언트IP = <%= request.getRemoteAddr() %><br>
	요청정보길이 = <%= request.getContentLength() %><br>
	요청정보 인코팅 = <%= request.getCharacterEncoding() %><br>
	요청정보 컨텐츠타입 = <%= request.getContentType() %><br>
	요청정보 프로토콜 = <%= request.getProtocol() %><br>
	요청정보 전송방식 = <%= request.getMethod() %><br>
	요청 URI = <%= request.getRequestURI() %><br>
	컨텍스트 경로 = <%= request.getContextPath() %><br>
	서버이름 = <%= request.getServerName() %><br>
	서버포트 = <%= request.getServerPort() %>
</body>
</html>

JSP

request

클라이언트 정보 및 서버정보

 

* (중요) 클라이언트IP = <%= request.getRemoteAddr() %>

(접속하는 클라이언트의 ip를 보여준다)

 

요청 URI = <%= request.getRequestURI() %>


컨텍스트 경로 = <%= request.getContextPath() %>

 

URI 와 URL의 차이점

예를 들어 http://opentutorials.org:3000/main?id=HTML&page=12 라고 되어있는 주소가 있다.

여기서 http://opentutorials.org:3000/main 여기까지는 URL이고(URI이기도 한)
http://opentutorials.org:3000/main?id=HTML&page=12 이 것은 URI라고 할 수 있다. (URL은 아닌)

이유는 URL은 자원의 위치를 나타내 주는 것이고 URI는 자원의 식별자

 

*쉽게말해 웹페이지에 a,b,c라는 영상이있다면

각 영상에 정확히 다가갈수 있도록 위치를 나타내 자원을 식별할수 있게 만드는 것.

 

 

 

<%@ 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 방식 전송( 데이터가 넘어가는게 보임 )
	http://localhost:8080/WebEx01/form_ok.jsp?data1=value1&data2=value2
 -->
<form action="./form_ok.jsp" method="get">
데이터1 <input type="text" name="data1"/><br>
데이터2 <input type="text" name="data2"/><br>
<br>
<input type="submit" value="데이터전송"/>
</form>

<br><br>
<!-- 
	post 방식 전송
	전송 헤더에 포함
 -->

<form action="./form_ok.jsp" method="post">
데이터1 <input type="text" name="data1"/><br>
데이터2 <input type="text" name="data2"/><br>
<br>
<input type="submit" value="데이터전송"/>
</form>

</body>
</html>

파라미터 요청 클래스

(전송하기)

 

form 태그에 action은 정보를 받을 클래스를 뜻함, method는 보낼 방식을 뜻함

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 이 메서드를 쓰면 post 방식으로 받아도 한글이 깨지지 않는다
	// get이던 post던 가리지않고 그냥 쓰는게 편함
	request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--  form_ok.jsp 
		전송받는건 get 과 post가 같지만 하나 다른게있음
		get방식은 한글출력가능
		post방식은 한글 깨짐( 따로 메서드를 추가해야 깨지지않음 )
 -->
<%
	String data1 = request.getParameter("data1");
	String data2 = request.getParameter("data2");
	out.println("data1 : " + data1 + "<br>");
	out.println("data2 : " + data2 + "<br>");
%>
</body>
</html>

파라미터 출력 클래스

(전송받기)

 

 

클라이언트가 보낸 정보는 get 방식과 post 방식이 있다

 

get 방식전송 : 데이터가 넘어가는것이 보인다( 한글깨짐 )

post 방식전송 : 데이터가 넘어가는게 보이지x ( 한글 안깨짐 )

post방식으로도 한글이 깨지지 않으려면 메서드를 추가한다

 

<%
// 이 메서드를 쓰면 post 방식으로 받아도 한글이 깨지지 않는다
// get이던 post던 가리지않고 그냥 쓰는게 편함
request.setCharacterEncoding("utf-8");
%>

 

 

 

<%@ 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>
<!-- 
	gugudan.jsp
	시작단수 끝단수
	=>
	gugudan_ok.jsp
	구구단 출력
 -->
 <form action="./gugudan_ok.jsp" method="get" />
 시작단 <input type="text" name="startdan" />
 ~
 끝단 <input type="text" name="enddan" />
 <input type="submit" value="구구단 출력"/>
 </form>
</body>
</html>

파라미터 요청클래스

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	// 이 메서드를 쓰면 post 방식으로 받아도 한글이 깨지지 않는다
	// get이던 post던 가리지않고 그냥 쓰는게 편함
	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>
</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>

파라미터 출력클래스

 

JSP로 구구단 출력하기

 

 

 

<%@ 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");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 
	gugudan.jsp
	시작단수 끝단수
	=>
	gugudan_ok.jsp
	구구단 출력
 -->
 <form action="./gugudan2.jsp" method="get" />
 시작단 <input type="text" name="startdan" />
 ~
 끝단 <input type="text" name="enddan" />
 <input type="submit" value="구구단 출력"/>
 </form>
 
 <br><hr/><br>
 
 <%
 	if(startdan == null || enddan == null){
 		out.println("입력없음");
 	}else{
 		out.println("입력있음");
 	
 
 	int iStartdan = Integer.parseInt( startdan );
	int iEnddan = Integer.parseInt( enddan );
	
	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>

요청클래스와 출력클래스를 합칠수 있음

 

 

 

<%@page import="java.util.Calendar"%>
<%@ 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>
<%
	int year= 2022;
	int month = 9;
	
	// 시작일(1일)
	Calendar startCalendar = Calendar.getInstance();
	// 마지막일
	Calendar endCalendar = Calendar.getInstance();
	
	startCalendar.set(year, month-1, 1);
	endCalendar.set(year, month, 1-1);
	
	int startDayOfWeek = startCalendar.get(Calendar.DAY_OF_WEEK);
	int endDate = endCalendar.get(Calendar.DATE);
	
	System.out.println( " SU MO TU WE TH FR SA" );
	
	for(int i=1; i<startDayOfWeek; i++) {
		System.out.print( "   " ); // 3
	}
	for(int i=1, n=startDayOfWeek; i<=endDate; i++,n++) {
		System.out.print((i<10) ? "  " + i : " " + i); // 2 / 1
		if(n%7==0) {
			System.out.println();
		}
	}
%>
</body>
</html>

예전에 만들었던 달력 소스를 <% %> 에 넣어 출력시켜보면

콘솔로그로 창이 띄워진다

system.out.print(); 는 디버깅용이라 콘솔로그, cmd에 출력된다

 

<%@ 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 = 2022;
	int month = 11;
	
	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>" );
	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.print( "<td></td>" );
	}
	
	out.println( "</tr>" );
	out.println( "</table>" );
%>
</body>
</html>

달력소스를 JSP형식으로 바꾸었다

 

 

 

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

<%
	int year = 2022;
	int month = 11;
	
	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 );
	
	StringBuilder sbHtml = new StringBuilder();
	sbHtml.append( "<table>" );
	sbHtml.append( "<tr>" );
	sbHtml.append( "<td colspan='7'>" + year + "년 " + month + "월</td>" );
	sbHtml.append( "</tr>" );
	sbHtml.append( "<tr>" );
	sbHtml.append( "<td>SU</td><td>MO</td><td>TU</td><td>WE</td><td>TH</td><td>FR</td><td>SA</td>" );
	sbHtml.append( "</tr>" );
	sbHtml.append( "<tr>" );
	for( int i=1 ; i<START_DAY_OF_WEEK ; i++ ) {
		sbHtml.append( "<td></td>" );
	}
	for( int i=1, n=START_DAY_OF_WEEK ; i<=END_DAY ; i++, n++ ) {
		if( n % 7 == 1 ) sbHtml.append( "<tr>" );
		sbHtml.append( "<td>" + i + "</td>" );
		if( n % 7 == 0 ) sbHtml.append( "</tr>" );
	}
	
	for( int i=END_DAY_OF_WEEK ; i<=6 ; i++ ) {
		sbHtml.append( "<td></td>" );
	}
	
	sbHtml.append( "</tr>" );
	sbHtml.append( "</table>" );
%>

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

</style>
</head>
<body>
<%= sbHtml.toString() %>
</body>
</html>

StringBuilder에 append시켜 출력할수 있고

head 태그 사이에 style태그를 넣어 type으로 css를 주고 css의 명령어를 실행할 수 있다

 

 

 

 

 

티스토리툴바