210511_1~4(JSP개념)

HTML_JS(Sol)/JSP(sol)

210511_1~4(JSP개념)

너굴셉 2021. 5. 11. 11:32

(5/6일 수업내용) 사전개념

1.웹사이트를 만들때 사용되는 언어 또는 구성물 : 하나의 웹문서에는 아래와 같은 구성물이 들어갈수 있다.

1) HTML : 링크,크기,색상 등을 지정 할수있는 기본틀, 웹사이트의 주축

2) CSS : 스타일 시트, 디자인을 편하게 할수있는, 한번 코딩하여 페이지에 디자인 적용(통일성) ...

3) JavaScript : 기본적 : 웹페이지에서 이벤트발생시 그것을 처리하는 언어

우리는 데이타유효성 검사에 주로 사용. 범위가 넓다 = 시각, 청각 모두 포함

4) JSP(PHP, ASP, ASP.net) : 클라이언트 요청을 받아서 데이타베이스와 연동하여

동적인 페이지를 구현할때 주로 사용.

5) SQL : 데이타베이스에서 select, insert, update, delete 할때 주로 사용

create, alter ... <---관리자

6) 데이타정보 ==가공==>정보 - 텍스트, 이미지, 사운드, 영상 ...

클라이언트 에이전트		웹서버		데이타베이스
	--요청 request-->	----연동----	-------sql------->
웹브라우저 chrome 엣지 익스플로러 파이어폭스		tomcat apache iis resin		mysql oracle mssql
	<--응답response-	----정보가공-----	<---데이터결과--	컴파일실행
정보 +html +css + js		+디자인 +jsp +java		sql

결론 : html, css, js는 웹 브라우저가 해석하는 클라이언트 스크립트 언어이고,

<==주로하는사람 웹퍼블리셔

jsp, java 등을 웹서버가 해석하는 서버 스크립트 언어이다.

<== 주로하는사람 웹프로그래머 또는 데이타베이스 응용프로그래머 라고한다.

sql은 데이타베이스가 해석한다. <== 관리: 백업,복구,권한부여,취소,객체생성...sql 개발자

일반적으로 우리가 웹사이트를 볼때 위처럼 3가지 해석을 거치게된다. 이러한 것을 3 tier 라고한다.

이것 이상의 구조를 n tier라고 말한다.

클라이언트+웹서버 =>static 서버

+DB = dynamic 서버

JSP개념

jsp는 java server pages : 톰캣이 해석하는 언어다.

<%! 선언부 %> : 전역 변수(페이지내에서 어디서든 호출가능)를 선언,

함수를 정의 하는 영역이다. <==사실은 거의 사용하지 않는다./ java에서 선언

<% 스크립릿 %> : 실제로 Jsp코딩을 하는 곳. 처리식 코딩...

<%= 출력부%>: 문자열, 변수값, 함수리턴값 등등을 출력하는 용도. ; 를 사용하지못함

처리식 코딩은 불가능하다.

<%-- jsp주석 --%> : 주석처리를 서버가 처리한다. 서버와관련된 중요한 주석

비교)  : 웹브라우저가 주석으로 처리함

비교2) //js한줄주석 /*js여러줄주석*/ : 웹브라우저가 주석으로 처리함

html , js, css 는 웹브라우저가 해석기다.

jsp동작 원리

jsp---------->servlet(java) ------------->class

코딩 자동변환/톰캣 jvm위에서실행

* 컴파일 되어서 실행되므로 실행이빠름/보안이 강해진다. ==>금융권에서 많이사용한다.

php등등은 그냥 문서 파싱 실행하는것.

* 처음에 자바에서 웹언어는 servlet이었다. servlet은 동적+디자인 표현에 약하다.

그래서 그것을 보완하려고 jsp가 만들어진것이다. jsp는 동적+디자인적용을 가미해서 탄생된것이다.

진짜 프로젝트형 개발은 : jsp + servlet +java 를 모두 사용한다.

1. jsp는 대소문자 구별이 있다.

2. jsp는 웹주소 대소문자 구별이 있다.

<%= %> 출력부

<%out.print( )%> 스크립릿 내부에서 출력문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSP 스크립트 Example</title>
</head>
<body>
<h1> Script Example1</h1>
<%!
String declaration = "Declaration";
%>
<%!
public String decMethod(){
return declaration;
}
%>
<%
String scriptlet = "Scriptlet";
String comment = "Comment";

out.print("내장객체를 이용한 출력 :" + declaration +"<p>");
%>

선언문의 출력1 : <%= declaration%><p>
선언문의 출력2 : <%= decMethod()%><p>
스크립트릿의 출력 : <%= scriptlet%><p>
<!-- JSP주석부분 -->
<!--  JSP 주석1 : <%=comment%> --><p>
<%-- JSP 주석2 : <%=comment%> --%>
<% /*주석
(여러줄주석)
*/
%>
</body>
</html>

3 .스크립릿보다 선언부가 먼저실행되어서 전역변수는 문서내 호출 순서와 관계없이 호출가능하다.

4. 지역변수는 선언이후에만 호출가능하다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DeclarationExmaple1</title>
</head>
<body>
<h1>Declaration Exmaple1</h1>
<%
String name = team +"Fighting!!!";
%>
<%!
String team = "Korea";
%>
출력되는 결과는 ? <%=name %>

</body>
</html>

5.전역변수가 초기화되어있지않으면 자동으로 0으로 초기화된다.

전역변수는 데이타형이 정수면 0으로 초기화되고, 문자열은 null로 자동초기화된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Declaration Example2</title>
</head>
<body>
<h1>Declaration Exmaple2</h1>
<%!
int one;
int two= 1;
public int plusMethod(){
return one+two;
}
String msg;
int three;

%>


one 와 two 의 합은 ? <%=plusMethod() %><p>
String msg의 값은? <%=msg %><p> <!-- 문자열은 null로 -->
int three의 값은? <%=three %><!-- 정수형은 0으로 출력된다 -->
</body>
</html>

java.util.Date () ; 직접호출해서 사용할수있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scriptlet Example2</title>
</head>
<body>
<h1> Scriptlet Example2</h1>
<%
float f =2.3f;
int i = Math.round(f);
java.util.Date date = new java.util.Date();
%>
실수 f의 반올림값은? <%=i %><p>
현재의 날짜와 시간은?<%=date.toString()%>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expression Example1</title>
</head>
<body>
<h1>Expression Example1</h1>
<%!
String name[]={"Sun","Java","JSPStudy"};
%>
<table border=1 width=200>
<% for(int i=0; i<name.length; i++) {%>
<tr><td><%=i%></td><!-- 1줄2칸의테이블이지만 인덱스갯수에따라 반복하여 3줄2칸이된다 -->
<td><%=name[i] %></td>
</tr>
<%}%>
</table>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Expression Example2</title>
</head>
<body>
<h1>Expression Example2</h1>
<%
java.util.Date date = new java.util.Date();
int hour = date.getHours();
//음영 : Date 클래스에서 getHours()메소드를 사용하여 시간(hour)값만 반환을 합니다.
int one=10;
int two=12;
%>
<%!
public int operation(int i, int j){
return i>j ? i:j ;
}
//삼항 연산자를 사용하여 두개의 매개변수 값 중에 더 큰 값을 반환 시키는 메소드 입니다.
%>
지금은 오전일까요 오후일까요?<%=(hour<12)?"오전":"오후"%><p>
one과 two 둘중에 큰 숫자는?<%= operation(one,two)%>

</body>
</html>

주석에 관한 설명

<%-- --%>

/* */

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment Example1</title>
</head>
<body>
<h1>Comment Example1</h1>
<%
String name = "Korea";
%>
<!-- 주석 부분입니다.'소스보기'에서 보이지요. -->
<%--
이부분은 JSP페이지에서만 보이고 '소스보기'를 해도 보이지 않습니다.
브라우저에 보내지 않는 문장입니다.
 --%>
 <!-- <%=name%> 주석에서도 동적인 변수 사용 -->
 <%=name/*표현식에 주석 부분입니다*/ %> Fighting!!!

</body>
</html>

폼전송원리

---------------------------------보내는쪽 : html,jsp 둘다됨

1) method="전송방식" post, get 중 하나를 기입한다.

	보안	전송량	사용예
post	강함	큼	실제로 폼전송에 거의 사용
get	약함	작음	페이지링크 할때<a> 요청페이지.jsp?키=value&key2=value2

2) action='목적지' 요청페이지 이름이 들어감. 요청페이지jsp

3) type="submit" 지정된 전송버튼을 누르면 action이 지정한곳으로 form을 전송하게 된다.

만약에 submit이 아니고 단순 button이면 js에서 submit()함수로 전송한다.

-------------------------------------------------------------------------send.jsp

</form>

-------------------------------받는쪽 : 반드시 jsp 나 servlet로 만든다

-----------------------------------------------------receive.jsp

request 객체 : client 요청 정보를 담고 있는 jsp 내장 객체

// 만약에 전송데이타에 한글이 있다면 반드시 가장먼저 인코딩해야한다

request.setCharacterEncoding("EUC-KR"); <==가장 먼저 기술해야 한다.

//name받기

String m_name = request.getParameter("m_name"); // 폼구성 요소의 이름으로 받는다.

//id받기

String m_id = request.getParameter("m_id");

//password 받기

String m_password = request.getParameter("m_password");

// 만약에 가입한다. 라면

// 연동

// sql + 변수의 insert 작성

//실행

//결과출력

디자인

<%=m_name%> 디자인<%=m_id%> 디자인 <%=m_password%>...

예제) IfExample.html,jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IfExample</title>
</head>
<body>

<h1>If-else Example</h1>

<form Method=Post Action="IfExample.jsp">
이름:<Input type="text" name="name"><p>
좋아하는 색깔 : <select name="color">
<option value="blue" selected>파란색</option>
<option value="red" >붉은색</option>
<option value="orange" >오렌지색</option>
<option value="etc" >기타</option>
</select><p>
<input type="submit" value="보내기">
</form>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>If Example</title>
</head>
<h1>If-else Example</h1>
<%!
String msg;
%>
<%
String name=request.getParameter("name");
String color=request.getParameter("color");

if(color.equals("blue")) {
	msg ="파란색";
}else if(color.equals("red")){
	msg ="붉은색";
}else if(color.equals("orange")){
	msg ="오랜지색";
}else{
	color="white";
	msg="기타색";
}
%>
<body bgcolor=<%=color%>>
<%=name%>님이 좋아하는 색깔은<%=msg%>입니다.

</body>
</html>