2024.07.03 JSP 프로그래밍 기본 JSP 기초 문법

Java

2024.07.03 JSP 프로그래밍 기본 JSP 기초 문법

정훈5 2024. 7. 3. 10:51

💡 학습 목표

- JSP 페이지에서 사용할 수 있는 기초 문법을 익힌다.
- 다양한 JSP 태그와 표현식을 이해한다.
- 간단한 JSP 페이지를 작성하여 동적인 웹 콘텐츠를 생성할 수 있다.

JSP는 기본적으로 HTML 문서 안에 자바 언어를 삽입해 사용할 수 있도록 설계 되어 있습니다.

그래서 실제로 대부분의 변수 선언, 메서드 선언, 로직 등은 자바 언어로 작성할 수 있습니다.

하지만 HTML 사이에 자바 코드를 끼워 넣을 때 필요한 문법이 몇가지 있습니다.

💡 JSP 기초 문법에 종류

- JSP 지시어, Directive
- 스크립트릿(Scriptlet)
- 선언부(Declaration)
- 표현부(Expession)
- JSP 액션 태그

JSP 지시어, Directive

<%@ xxxx…. %> JSP 디렉티브는 JSP 페이지의 전반적인 속성을 설정합니다.

주로 페이지 속성, import 등을 지정합니다.

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

스크립트릿(Scriptlet)

Java 코드를 HTML 중간에 삽입할 때 사용한다.

<% ... %> 태그 사이에 Java 코드를 작성한다 (코드 실행 영역에 해당)

<% 
    String greeting = "Hello, JSP!";
    out.println(greeting);
%>

선언부(Declaration)

JSP 페이지에서 변수를 선언하거나 메서드를 정의할 때 사용한다.

<%! ... %> 태그를 사용한다.

<%! 
    private String greeting = "Hello, JSP!";
    
    public String getGreeting() {
        return greeting;
    }
%>

표현식(Expression)

값을 출력할 때 사용하며, Java 표현식을 평가한 결과를 HTML로 출력한다.

<%= ... %> 태그를 사용한다.

<%
    String greeting = "Hello, 길동!";
%>
<p>Greeting: <%= greeting %></p>

JSP 액션 태그(Action Tags)

JSP 페이지에서 자바빈즈(Beans)를 사용하거나 다른 JSP 페이지를 포함시키는 등의 작업을 수행할 때 사용됩니다.

// 자바빈즈를 생성하거나 찾을 때 사용합니다.
<jsp:useBean id="myBean" class="com.example.MyBean" scope="session" />

// 자바빈즈의 속성 값을 설정할 때 사용합니다.
<jsp:setProperty name="myBean" property="username" value="JohnDoe" />

// 자바빈즈의 속성 값을 가져올 때 사용합니다.
<p>Username: <jsp:getProperty name="myBean" property="username" /></p>

// 다른 JSP 페이지를 포함시킬 때 사용합니다. 
<jsp:include page="header.jsp" />

// 다른 JSP 페이지로 요청을 포워드할 때 사용합니다.
<jsp:forward page="nextPage.jsp" />

... 등

💡 자바빈즈(JavaBeans)란?

재사용 가능한 객체
자바빈즈는 재사용 가능하도록 설계된 Java 객체입니다.
특정 규약이 적용된 객체
자바빈즈는 캡슐화, 기본 생성자, 직렬화 등의 규약을 따릅니다.
- 캡슐화(Encapsulation)
  필드는 private으로 선언하고, 접근자 메서드(getter)와 설정자 메서드(setter)를 통해 접근합니다.
- 기본 생성자(Default Constructor)
  자바빈즈 클래스는 기본 생성자를 반드시 가져야 합니다.
- 직렬화(Serialization)
  자바빈즈는 Serializable 인터페이스를 구현하여 직렬화할 수 있습니다.
데이터 저장, 연산 및 전송
자바빈즈는 애플리케이션에서 데이터를 저장하고, 연산을 수행하며,
다른 컴포넌트나 시스템으로 데이터를 전송하는 데 도움을 줍니다.

정리

동일한 클래스를 여러 곳에서 인스턴스화 해서 사용가능하며 스코프(scope) 내에서 재사용될 수 있습니다.

세션 스코프(scope)에서 생성된 자바빈즈 객체는 세션 내내 동일한 객체로 유지될 수 있습니다.

자바빈즈와 스코프

page: 현재 페이지에서만 사용 가능 (기본값)
request: 하나의 요청 동안 사용 가능
session: 세션 동안 사용 가능
application: 애플리케이션 전체에서 사용 가능 </aside>

코드 실습 1 - 인사말 생성기

class_jsp_v01 폴더

views 폴더 -- greet2.jsp 생성

webapp 폴더 -- example.jsp 생성, greet_from_page.html 생성, greet.jsp 생성

1. HTML 폼 만들기

2. greet.jsp 작성하기

3. 결과 및 테스트

greet_from_page.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<h1>인사말 생성기</h1>
	<!-- 절대 경로 : / -->
	<!-- 상대 경로 : views/greet2.jsp --> <!-- 내 기준에서 찾아가는 방법 -->
	<form action="greet.jsp" method="POST">
		<label for="name">당신의 이름을 입력하세요: </label>
		<input type="text" id="name" name="name" required="required">
		<!-- required="required" : null 값 방지하려고 -->
		<!-- name="name" : 키 - 값 -->
		
	<button type="submit">서버로 제출</button>
	</form>
	
</body>
</html>

greet.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <!-- JSP 페이지의 설정을 정의하는 JSP 지시자  -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>인사말을 완성 하였습니다.</h1>
	
	<%
		// 자바 실행 코드
		// request 객체에서 값 추출하기
		
		String name = request.getParameter("name");
		
		if(name == null || name.trim().isEmpty()){
			out.println("<p> 앗! 당신에 이름을 먼저 입력해주세요 </p>");
		} else {
			out.println("<p> 반가워," +name +"! 나의 JSP Site 잘 왔어 환영~~" +"</p>");
		}
	%>
	
	<!-- 다시 이전페이지로 또는 (특정 페이지로 이동)처리를 만들고 싶다면  -->
	<a href="greet_from_page.html">Back</a>
	
</body>
</html>

코드 실습 2 - 간단한 계산기

1. HTML 폼 만들기

2. calculate.jsp 작성하기

3. 결과 및 테스트

class_jsp_v01 폴더

calculator_form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
	<style>
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container{
            width: 300px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        form{
            display: flex;
            flex-direction: column;
        }
        label{
            margin-bottom: 10px;
        }

        input[type="number"] {
            height: 30px;
            border: 1px solid #bababa;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        input[type="submit"] {
                height: 40px;
                border-radius: 5px;
                border: 0;
                background-color: #45a049;
                color: #fff;
        }
        input[type="submit"]:hover{
            background-color: #1c5a1f;
        }
    </style>

</head>
<body>

	<div class="container">
		<h1>간단한 계산기</h1>
		<form action="calculate.jsp" method="POST">
		<label for="num1">첫번째 숫자를 입력하세요</label>
		<input type="number" id="num1" name = "num1" required="required" value="10">
		
		<label for="num2">두번째 숫자를 입력하세요</label>
		<input type="number" id="num2" name = "num2" required="required" value="20">
		
		<input type="submit" value="계산 요청하기">
		
		</form>
	</div>

</body>
</html>

calculate.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>
	
	<h1>계산 결과</h1>
	<!-- HTML 주석 입니다.  -->
	<%-- JSP 주석 입니다. --%>
	<%
		// form에서 데이터 추출
		
		String num1Str = request.getParameter("num1");
		String num2Str = request.getParameter("num2");
	
		// 방어적 코드 작성
		
		if( num1Str != null && num2Str != null ){
			
			try{
				int num1 = Integer.parseInt(num1Str);
				int num2 = Integer.parseInt(num2Str);
				
				int result = num1+ num2;
				out.println("<p> " +num1 + "와" +num2 +"의 합은" +result +"</p>");
				
				out.println("<p> 두 수의 합은 : "+result +" </p>");
			} catch(NumberFormatException e) {
				out.print("<p>다시 입력해 주세요.</p>");
			}
		
			
		} else {
			out.println("두 숫자를 모두 입력해주세요.");
		}
		
		
		// 계산에 결과를 스트림을 통해 내려주기
		
		
	%>
	<a href="calculator_form.html">돌아가기</a>
</body>
</html>

'Java' 카테고리의 다른 글

2024.07.03 JSP 프로그래밍 기본 JSP 기본 태그 (스크립트릿, 선언, 표현식) (0)	2024.07.03
2024.07.03 JSP 프로그래밍 기본 JSP 주석과 지시자 (미완) (0)	2024.07.03
2024.07.03 JSP 프로그래밍 기본 JSP 라이프사이클 (0)	2024.07.03
2024.07.03 JSP 프로그래밍 기본 JSP(Java Server Pages)란? (0)	2024.07.03
2024.07.03 dynamic Web Project의 web.xml 오류 해결 (0)	2024.07.03

현재글2024.07.03 JSP 프로그래밍 기본 JSP 기초 문법

정훈5

sprint tool suite, Eclipse 설치 및 설정, java, corretto JDK17, 변수(variable), 데이터 타입(Data Type) (문자형), 데이터 타입(Data Type) (정수형), 데이터 타입(Data Type) (논리형), 이클립스 폰트 설정, Tomcat, Eclipse 설정, 데이터 타입(Data Type) (실수형), lombok, Light shot 설치, AndroidStudio, Jakarta, Flutter, Widget, 데이터 타입(Data Type), corretto JDK 17,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

정훈5