ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 15. JSP와 구성요소 + 연습
      개발자 수업/JSP 2021. 12. 7. 12:23

      1. JSP - 자바 웹 기술의 최종 진화
          1)                 서블릿                                                     JSP
              ------------------------------------------------------------------------------------------------------------
              자바 코드 안에서 전체 HTML 페이지 생성          HTML 코드 안에서 필요한 부분만 자바 코드를 스크립트 형태로 추가
              변수 선언 및 초기화가 반드시 선행되어야 함                      내장 객체 제공하여 즉시 사용
                      컨트롤러(controller)                         처리된 결과를 보여주는 뷰(View) 만들 때 사용함
          
      2. JSP 구성 요소
          1) HTML 태그, CSS, JS 코드
          2) JSP 기본 태그
          3) JSP 액션 태그
          
      3. JSP 페이지 구성 요소
          1) 디렉티브 태그 (Directive Tag)
          2) 스크립트 요소 (Scripting Element) : 주석문, 스크립트릿(Scriptlet), 표현식, 선언식
          3) 표현 언어 (Expression Language, EL)
          4) 내장 객체 (내장 변수)
          5) 액션 태그 (Action Tag)

      4. 디렉티브 태그의 종류
          1) 페이지 (Page Directive Tag) : JSP 페이지의 전반적인 정보 설정시 사용
              - 이클립스에서 자동으로 생성된 페이지 디렉티브 태그
                  <%@ page language="java" contentType="text/html; charset=UTF-8"
                      pageEncoding="UTF-8"%>
              - 속성
                  - import : 페이지에서 사용할 자바 패키지와 클래스를 지정함
                  - errorPage : 해당 페이지에서 에러가 발생했을 때 에러 발생 여부를 보여줄 페이지를 지정함
                  - isErrorPage : 해당 페이지가 에러를 처리할지 여부를 지정함
                  - trimDirectiveWhitespaces : 지시어 선언으로 공백을 제거할지 여부를 지정함
                  - buffer : 출력 버퍼의 크기 지정함
                  - autoFlush : 출력 버퍼가 모두 채워졌을 때 자동으로 비울지 결정함

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	String str1 = "JSP";
	String str2 = "안녕하세요.";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HelloJSP</title>
</head>
<body>
	<h2>반가워요 <%=str1 %></h2>
	<p>
		<%
			out.println(str2 + str1 + "입니다.");
		%>
	</p>
</body>
</html>

      <%@page import="java.text.SimpleDateFormat"%> <!-- 필요항 외부 클래스 임포트 -->
<%@page import="java.util.Date"%>
<%@page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - import 속성</title>
</head>
<body>
	<%
		Date today = new Date();
		SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
		String todayStr = dateFormat.format(today);
		out.println("오늘 날짜 : " + todayStr);
	%>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - errorPage, isErrorPage 속성</title>
</head>
<body>
	<%
		try {
			int myAge = Integer.parseInt(request.getParameter("age")) + 10;	//에러 발생
			out.println("내년 당신의 나이는 " + myAge + "입니다.");				//실행되지 않음
		} catch(Exception e) {
			out.println("예외 발생: 매개변수 age가 null입니다.");
		}
	%>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isErrorPage="true"%>	
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - errorPage, isErrorPage 속성</title>
</head>
<body>
	<img alt="에러이미지" src="../image/error.jpg">
	<h2>서비스 중 일시적인 오류가 발생했습니다.</h2>
	<h1>잠시 후 다시 시도해 주세요</h1>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    errorPage="IsErrorPage.jsp"
    trimDirectiveWhitespaces="false"%> 	<!-- 에러 페이지 지정  : 에러 발생시 직접 처리 않고 지정한 페이지를 웹 브라우저가 출력함 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - errorPage, isErrorPage 속성</title>
</head>
<body>
	<%
			int myAge = Integer.parseInt(request.getParameter("age")) + 10;	//에러 발생
			out.println("내년 당신의 나이는 " + myAge + "입니다.");				//실행되지 않음
	%>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - trimDirectiveWhitespaces 속성</title>
</head>
<body>
	<h2>page 지시어로 생긴 불필요한 공백 제거</h2>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" buffer="1kb" autoFlush="false"%>	<!-- 버퍼 설정 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - buffer, autoFlush</title>
</head>
<body>
	<%
		for(int i=1; i<=100; i++){
			out.print("abcdefgh12345");
		}
	%>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" buffer="8kb" autoFlush="true"%>	<!-- 버퍼 설정 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>page 지시어 - buffer, autoFlush</title>
</head>
<body>
	<%
		for(int i=1; i<=100; i++){
			out.print("abcdefgh12345");
		}
	%>
</body>
</html>

          2) 인클루드 (Include Directive Tag) : 공통으로 사용하는 JSP 페이지를 다른 JSP 페이지에 추가할 때 사용
              - 재사용성이 높음
              - JSP 페이지 유지관리가 쉬움

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>airpodsImage</title>
</head>
<body>
	<img alt="이미지" src="../image/airpods.png">
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>include 지시어</title>
</head>
<body>
	<h1>안녕하세요. 에어팟 세일입니다.</h1><br>
	<%@ include file="airpodsImage.jsp" %><br>
	<h1>안녕하세요. 에어팟 선물하세요.</h1><br>
</body>
</html>

       

      <%@page import="java.time.LocalDateTime"%>
<%@page import="java.time.LocalDate"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>include</title>
</head>
<body>
	<%
		LocalDate today = LocalDate.now();		//오늘 날짜
		LocalDateTime tomorrow = LocalDateTime.now().plusDays(1);	//내일 날짜
	%>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includeFile.jsp" %>	<!-- 다른 JSP 파일 포함 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>include 지시어</title>
</head>
<body>
	<%
		out.println("오늘 날짜 : " + today);
		out.println("<br>");
		out.println("내일 날짜 : " + tomorrow);
	%>
</body>
</html>


          3) 태그라이브 (Taglib Directive Tag) : 개발자나 프레임워크에서 제공하는 태그 사용시 사용
              - EL(표현 언어)에서 자바 클래스의 메서드를 호출
              - JSTL(JSP 표준 태그 라이브러리)을 사용하기 위한 지시어

      5. 스크립트 요소 (Scripting Element)
          1) 의미
              - JSP 페이지에서 여러 가지 동적인 처리를 제공하는 기능
              - <% %> 기호 안에 자바 코드로 구현함
              - <% %> 기호를 스크립트릿(Scriptlet)이라고 부름
          2) 종류
              - 선언문(declaration tag)
                  - JSP 페이지에서 사용하는 멤버 변수나 메소드를 선언할 때 사용
                  - 선언문 안의 멤버는 서블릿 변환시 서블릿 클래스의 멤버로 변환됨
                  - 형식 : <%! 멤버변수 or 멤버 메서드 %>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%! 
	String name = "에어팟 프로";
	public String getName() {return name;}
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>선언문 테스트</title>
</head>
<body>
	<h1>언제 써보나 <%=name %>!!</h1>
</body>
</html>


              - 스크립트릿(Scriptlet tag)
                  - JSP에서 자바 코드를 작성할 때 사용 --> EL
                  - 주로 초기 웹 페이지에서 동적인 기능을 구현하기 위해서 사용됨
                  - 형식 : <% 자바 코드 %>
              - 표현식(Expression tag)
                  - JSP에서 변수의 값을 출력할 때 사용
                  - 형식 : <%= 값 or 자바 변수 or 자바 식 %>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%! 
	String name = "이순신";
	public String getName() {return name;}
%>
<%
	String age = request.getParameter("age");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>스크립트릿 테스트</title>
</head>
<body>
	<h1>안녕하세요 <%=name %>님</h1>
	<h1>나이는 <%=age %>살입니다.</h1>
</body>
</html>

       

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%!
	public int add(int num1, int num2) {
		return num1 + num2;
	}
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Insert title here</title>
</head>
<body>
	<%
		int result = add(10, 20);
	%>
	덧셈 결과 1 : <%=result %><br>
	덧셈 결과 2 : <%=add(30, 40) %>
</body>
</html>



      6. JSP 주석문
          1) HTML 주석
          2) 자바 주석
          3) JSP 주석

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String age = "10";
	//
	/* 자바 코드에 대한 주석문 */
	
%>
<!DOCTYPE html>
<!-- HTML 주석문입니다. -->
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>주석문 테스트</title>
</head>
<body>
	<h1>주석문 테스트입니다.</h1>
	<%-- <%=Integer.parseInt(age) + 10 %> --%>	<!-- JSP 페이지에 대한 주석문 -->
</body>
</html>

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인</title>
</head>
<body>
	<form name="frmLogin" method="post" action="result.jsp" enctype="utf-8">
	 	아이디 : <input type="text" name="user_id"><br>
	 	비밀번호 : <input type="password" name="user_pw"><br>
	 	<input type="submit" value="로그인">
	 	<input type="reset" value="다시 입력">
	</form>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>결과 출력</title>
</head>
<body>
	<h1>결과 출력</h1>
	<%
		request.setCharacterEncoding("utf-8");
		String user_id = request.getParameter("user_id");
		String user_pw = request.getParameter("user_pw");
	%>
	<h1>아이디 : <%=user_id %></h1>
	<h1>비밀번호 : <%=user_pw %></h1>
</body>
</html>

       

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인</title>
</head>
<body>
	<form name="frmLogin" method="post" action="result2.jsp" enctype="utf-8">
	 	아이디 : <input type="text" name="user_id"><br>
	 	비밀번호 : <input type="password" name="user_pw"><br>
	 	<input type="submit" value="로그인">
	 	<input type="reset" value="다시 입력">
	</form>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- 
	로그인 창에서 먼저 ID를 정상적으로 입력 --> 환영합니다. ezenac님!
			  ID를 입력하지 않고 전송한 경우 --> 아이디를 입력하세요.
			                             로그인하기
 --%>
 <%
 	request.setCharacterEncoding("utf-8");
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
 %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>결과 출력</title>
</head>
<body>
	<%		
		if(user_id == null || user_id.length() == 0) {
	%>
			아이디를 입력하세요.<br>
			<a href='login.html'>로그인 하기</a>
	<%	
		} else {
	%>		
			<h1>환영합니다. <%=user_id %> 님!</h1>
	<%	
		}
	%>
</body>
</html>

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>로그인</title>
</head>
<body>
	<form name="frmLogin" method="post" action="result3.jsp" enctype="utf-8">
	 	아이디 : <input type="text" name="user_id"><br>
	 	비밀번호 : <input type="password" name="user_pw"><br>
	 	<input type="submit" value="로그인">
	 	<input type="reset" value="다시 입력">
	</form>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
 	request.setCharacterEncoding("utf-8");
	String user_id = request.getParameter("user_id");
	String user_pw = request.getParameter("user_pw");
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>결과 출력</title>
</head>
<body>
	<%		
		if(user_id == null || user_id.length() == 0) {
	%>
			아이디를 입력하세요.<br>
			<a href='login.html'>로그인 하기</a>
	<%	
		} else {
			if(user_id.equals("admin")) {
	%>
				<h1>관리자로 로그인 했습니다.</h1>
				<form action="#">
					<input type="button" value="회원정보 삭제하기">
					<input type="button" value="회원정보 수정하기">
				</form>
	<%
			} else {
	%>
				<h1>환영합니다. <%=user_id %> 님!</h1>
	<%
			}
		}	
	%>		
</body>
</html>

      <!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>시험점수입력</title>
</head>
<body>
	<form method="get" action="scoreTest.jsp">
		시험점수 : <input type="text" name="score"><br>
		<input type="submit" value="변환하기">
	</form>
</body>
</html>
      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	int score = Integer.parseInt(request.getParameter("score"));
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>학점 출력</title>
</head>
<body>
	<h1>시험점수 : <%=score %></h1><br>
	<%
		if(score>=90){
	%>
			<h1>A학점입니다.</h1>
	<%
		} else if(score>=80 && score<90){
	%>
			<h1>B학점입니다.</h1>
	<%
		} else if(score>=70 && score<80){
	%>
			<h1>C학점입니다.</h1>
	<%
		} else if(score>=60 && score<70){
	%>
			<h1>D학점입니다.</h1>
	<%
		} else {
	%>
			<h1>F학점입니다.</h1>
	<%
		}
	%>
	<br>
	<a href="scoreTest.html">시험점수 입력</a>
</body>
</html>

      <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>이미지 리스트</title>
	<style type="text/css">
		.lst_type {
			overflow: hidden;
			width: 80%;
			padding: 0 10px 10px;
			margin: 0 auto;
		}
		.lst_type li {
			overflow: hidden;
			clear: both;
			margin: 10px 0 0;
			color: #2d2c2d;
		}
	</style>
</head>
<body>
	<ul class="lst_type">
		<li>
			<span style="margin-left:50px">이미지</span>
			<span>이미지 이름</span>
			<span>선택하기</span>
		</li>
		<%
			for(int i=0; i<10; i++) {
		%>
				<li>
					<a href="#" style="margin-left: 50px"><img alt="이미지" src="image/airpods.png" width="90" height="90"></a>
					<a href="#"><strong>이미지 이름 : 에어팟 프로<%=i %></strong></a>
					<a href="#"><input name="chk<%=i %>" type="checkbox"></a>
				</li>
		<%
			}
		%>
	</ul>
</body>
</html>

       

      저작자표시 비영리 변경금지

      '개발자 수업 > JSP' 카테고리의 다른 글

      17. Cookie  (0) 2021.12.08
      16. JSP 내장 객체(내장 변수)  (0) 2021.12.07
      14. 서블릿 관련 Listener API  (0) 2021.12.06
      13. 필터 API  (0) 2021.12.06
      12. 서블릿 스코프, URL 패턴  (0) 2021.12.06

      관련글 관련글 더보기

      댓글

    티스토리툴바