[Java] JSP 기본 태그 사용법[Java] JSP 기본 태그 사용법

728x90

이번에 일학습병행제를 마치며 외부평가를 준비하고 있다.

JSP는 사용해본적이 없어 이번 외부 평가를 준비하며 기본 내용을 정리해본다.

(단, 시간상 전부를 다루지는 못하고 시험에 활용되는 내용 위주로 정리한다.)

1. JSP란?

자카르타 서버 페이지(Jakarta Server Pages, JSP), 이전 명칭: 자바서버 페이지(JavaServer Pages)

HTML 내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 서버 사이트 스크립트 언어이다.

[참고] wikipedia

자카르타 서버 페이지 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 자카르타 서버 페이지(Jakarta Server Pages, JSP, 이전 명칭: 자바서버 페이지(영어: JavaServer Pages[1])는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지

ko.wikipedia.org

2. 기본 문법

외부평가를 준비하는 과정에서 사용한 태그 내용을 정리한다.

jsp 파일을 처음 생성하면 기본적으로 HTML과 비슷한 형태를 띄고 있다.

일반 HTML과 다른 점은 <%@ %> 지시를 사용해 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>
	
</body>
</html>

1. java class import

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

JSP 페이지에 속성을 전하는 지시자에 import="" 를 사용하여 import할 클래스의 정보를 전달한다.

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

또는 지시자를 사용해서 따로 작성해도 된다.

2. java 코드 작성하기

<%
	Class.forName("oracle.jdbc.driver.OracleDriver");
	Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "username", "password");
	
	PreparedStatement pstmt = conn.prepareStatement(query);
%>

스크립틀릿 <% %> 태그를 사용하여 자바 코드 자체를 입력할 수 있다.

3. Java 결과 값 가져오기

<tr>
    <td>제품코드</td>
    <td><%= product.getCode() %></td>
</tr>
<tr>
    <td>제조사명</td>
    <td><%= product.getVendor() %></td>
</tr>
<tr>
    <td>조회일시</td>
    <td><%= product.getDate() %></td>
</tr>

표현식 <%= %> 태그를 사용하여 변수 또는 메서드의 결과 값을 가져올 수 있다.

3. JSP 태그 정리

1. 스크립틀릿 (Scriptlet) <% %>

JSP 페이지 안에 Java 코드를 직접 삽입할 때 사용하고 Java 코드가 JSP 페이지 내에서 실행되어 클라이언트에게 HTML 형태로 응답을 보낸다.

<% 
	// Java 코드 작성 
    int num = 10; 
    out.println("The value of num is: " + num); 
%>

2. 선언 (Declaration) <%! %>

JSP 페이지에서 클래스 변수나 메서드를 선언할 때 사용한다. 스크립틀릿은 코드가 실행될 때마다 반복되지만, 선언은 페이지가 처음 로딩될 때 한 번만 처리하여 주로 클래스 레벨에서 선언할 변수나 메서드를 정의하는 데 사용한다.

<%! 
    int counter = 0; 
    public void incrementCounter() {
    	counter++; 
    } 
%>

이 변수나 메서드는 해당 JSP 페이지 내에서 사용할 수 있다.

3. 표현식 (Expression) <%= %>

Java 코드를 작성하고 그 결과를 클라이언트로 바로 출력하는 데 사용하고 표현식 안의 코드는 자동으로 out.print()로 감싸지며, 그 결과가 HTML로 출력됩된다.

<%= "Hello, World!" %> 
<%= new java.util.Date() %>

4. 지시어 (Directive) <%@ %>

JSP 페이지에 대한 설정 정보를 지정하여 페이지의 기본 설정이나 페이지 전반에 적용될 정보를 제공한다.

아래와 같은 속성을 가지고 있다.

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

페이지 지시어
- JSP 페이지에 대한 정보를 설정(페이지 인코딩, 버전, 사용하는 클래스 등)
- contentType : 페이지의 컨텐츠 타입과 문자 인코딩 설정.
- language : JSP 페이지에서 사용할 프로그래밍 언어 지정 (기본값은 java).
- import : Java 클래스를 import.
- session : 세션 사용 여부 설정 (true가 기본값).
태그 라이브러리 지시어 (Taglib Directive)
- 태그 라이브러리를 사용
- 해당 내용은 후에 자세히 알아본다.

5. 액션 태그 (Action Tags) <jsp:...>

JSP에서 내장된 기능을 활용할 때 사용한다.

jsp:include : 다른 JSP 페이지를 포함하는 데 사용한다.
jsp:forward : 요청을 다른 페이지로 전달하는 데 사용한다.
jsp:useBean : Java Bean 객체를 생성하거나 조회할 때 사용한다.

6. 주석 (Comment) <%-- --%>

주석을 작성한다. 이 주석은 HTML 코드에 영향을 미치지 않으며, 클라이언트에게는 표시되지 않는다.

<%-- This is a comment and it won't appear in the output --%>

4. JSP 사용 예제

이 부분은 외부평가 공개 자료에서 학습한 내용을 정리한다.

https://www.youtube.com/watch?v=FEhnr9tCVJc

운영체제 : Window 11
Java : JDK 1.8
Tomcat : apache-tomcat-8.0.26-windows-x64
개발도구 : eclipse

프로젝트를 생성할 때는 Dynamic Web Project를 생성해준다.

개발 당시에는 상관 없지만 후에 실행시킬 때 Tomcat이 필요하므로 Tomcat을 실행시켜준다.

실행시킬 때는 실행하려는 페이지를 선택하고 상단의 실행버튼을 눌러준다.

(예시 1)

아래는 해당 화면을 나타내는 index.html 코드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<h1>제조사명 조회</h1>
	<form action="result.jsp">
		<table border="1">
			<tr>
				<td colspan="2">제품 코드(4) 입력</td>
			</tr>
			<tr>
				<td>제품코드</td>
				<td><input type="text" name="code"></td>
			</tr>
			<tr>
				<td colspan="2"><button>확인</button></td>
			</tr>
		</table>
	</form>
</body>
</html>

<form action="result.jsp">: form 태그는 사용자 입력을 처리하는 데 사용한다. action="result.jsp"는 폼 제출 시 데이터를 result.jsp로 보낼 것을 의미한다.
<input type="text" name="code">: 사용자가 텍스트를 입력할 수 있는 입력 필드를 만든다. 이 필드의 name="code" 속성은 사용자가 입력한 데이터를 code라는 이름으로 result.jsp로 전송한다.

아래는 Form을 제출하고 난 후인 result.jsp 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="kr.ac.kopo.*"%>

<%
	UserInfo user = new UserInfo("한국인", "1004", "2019-10-31");
	ProductInfo product = new ProductInfo();
	
	String code = request.getParameter("code");
	
	product.setCode(code);
	product.find();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<h1>제품코드 조회 결과</h1>
	<hr>
	<table border="1">
		<tr>
			<td colspan="2">제조사 조회 결과</td>
		</tr>
		<tr>
			<td>제품코드</td>
			<td><%= product.getCode() %></td>
		</tr>
		<tr>
			<td>제조사명</td>
			<td><%= product.getVendor() %></td>
		</tr>
		<tr>
			<td>조회일시</td>
			<td><%= product.getDate() %></td>
		</tr>
	</table>
	<hr>
	<div>
		작성자:<%= user.getName() %> 비번:<%= user.getPassword() %> 작성일:<%= user.getDate() %>
	</div>
</body>
</html>

import="kr.ac.kopo.*": kr.ac.kopo 패키지에 있는 모든 클래스를 import하여 해당 패키지의 클래스를 JSP 페이지에서 사용하도록 한다. 여기서는 UserInfo, ProductInfo 객체를 생성하고 사용하기 위해 추가했다.
request.getParameter("code")를 사용하여 앞서 index.html에서 사용자가 폼에서 입력한 제품 코드를 가져온다.
<%= %> 태그를 사용하여 필요한 값을 불러와 출력한다.

package kr.ac.kopo;

public class UserInfo {
	private String name;
	private String password;
	private String date;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	
	public UserInfo(String name, String password, String date) {
		super();
		this.name = name;
		this.password = password;
		this.date = date;
	}
}

UserInfo 객체를 정의하는 클래스 코드이다.

해당 코드에서 정의해야할 것은 각 요소의 getter와 setter, constructor을 생성해준다.

eclipse에서 쉽게 getter, setter 생성하고 constructor 생성하기

package kr.ac.kopo;

import java.util.*;

public class ProductInfo {
	private String code;
	private String vendor;
	private Date date;
	
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
	public String getVendor() {
		return vendor;
	}
	public void setVendor(String vendor) {
		this.vendor = vendor;
	}
	public Date getDate() {
		return date;
	}
	public void setDate(Date date) {
		this.date = date;
	}
	
	public void find() {
		HashMap<String, String> map = new HashMap<>();
		
		map.put("A100", "삼성전자");
		map.put("A200", "LG전자");
		map.put("A300", "하이닉스");
		
		vendor = map.get(code);
		if(vendor == null) {
			vendor = "등록되지 않은 제품입니다!!";
		}
		date = new Date();
	}
	
}

ProductInfo 객체를 정의하는 클래스 코드이다.

(예시2)

아래는 add.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>
	<form action="add_apply.jsp">
		<table border="1">
			<tr>
				<td>아이디</td>
				<td><input type="text" name="p_id"></td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td><input type="text" name="p_pw"></td>
			</tr>
			<tr>
				<td>성명</td>
				<td><input type="text" name="c_name"></td>
			</tr>
			<tr>
				<td>이메일</td>
				<td><input type="text" name="c_email"></td>
			</tr>
			<tr>
				<td>연락처</td>
				<td><input type="text" name="c_tel"></td>
			</tr>
			<tr>
				<td colspan="2"><button>등록</button></td>
			</tr>
		</table>
	</form>
	<a href="find.jsp"><button>조회</button></a>
</body>
</html>

<form action="add_apply.jsp">: 사용자가 폼을 제출할 때 add_apply.jsp로 데이터를 전송한다.
<a href="find.jsp">: find.jsp로 이동하는 링크를 만들고 <button> 태그로 표시되며, 이를 클릭하면 find.jsp로 리디렉션된다.

아래는 add_apply.jsp 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.sql.*" %>
<%
	Class.forName("oracle.jdbc.driver.OracleDriver");

	Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "system", "1234");
	
	PreparedStatement pstmt = conn.prepareStatement("INSERT INTO CUSTOM_01 VALUES (?,?,?,?,?)");
	pstmt.setString(1, request.getParameter("p_id"));
	pstmt.setString(2, request.getParameter("p_pw"));
	pstmt.setString(3, request.getParameter("c_name"));
	pstmt.setString(4, request.getParameter("c_email"));
	pstmt.setString(5, request.getParameter("c_tel"));
	
	pstmt.execute();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<a href="add.jsp">등록화면</a>
</body>
</html>

import="java.sql.*": 데이터베이스 연결과 관련된 Java SQL 패키지를 import하여 Oracle JDBC 드라이버와 연결할 수 있도록 한다.
PreparedStatement 를 사용하여 입력받은 정보를 CUSTOM_01 테이블에 삽입한다.

아래는 find.jsp 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.sql.*" %>
<%
	Class.forName("oracle.jdbc.driver.OracleDriver");

	Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "system", "1234");
	
	Statement stmt = conn.createStatement();
	ResultSet rs = stmt.executeQuery("SELECT p_id, c_name, c_email, c_tel FROM CUSTOM_01");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<h1>회원목록조회</h1>
	<hr>
	<table border="1">
		<thead>
			<tr>
				<th>회원아이디</th>
				<th>회원이름</th>
				<th>이메일</th>
				<th>연락처</th>
			</tr>
		</thead>
		<tbody>
			<% while(rs.next()) { %>
			<tr>
				<td><%= rs.getString(1) %></td>
				<td><%= rs.getString(2) %></td>
				<td><%= rs.getString(3) %></td>
				<td><%= rs.getString(4) %></td>
			</tr>
			<% } %>
		</tbody>
	</table>
	<hr>
	<h6>HRDKOREA Copyright&copy; 2015 All rights reserved. Human Resource Development Service of Korea</h6>
</body>
</html>

<tbody>: 실제 데이터가 표시될 부분으로 while(rs.next()) 루프를 통해 데이터베이스에서 조회된 결과를 하나씩 출력한다.

여기서 주의해야할 점은 oracle의 jdbc를 사용해야하므로 src > main > webapp > WEB_INF > lib 에 jar 파일을 추가해주어야한다. 오라클 DB가 설치되어있다면 C:\oraclexe\app\oracle\product\11.2.0\server\jdbc\lib 해당 경로에 있는 jar 파일을 복사해주면 된다.

728x90

저작자표시 (새창열림)

'Language > Java' 카테고리의 다른 글

[Java] PreparedStatement 공부하기 (0)	2024.04.28
[Java] MacOS JDK 삭제 (2)	2023.11.27
[Java] Type & BigInteger (0)	2023.11.02

soo-note

[Java] JSP 기본 태그 사용법[Java] JSP 기본 태그 사용법

1. JSP란?

2. 기본 문법

1. java class import

2. java 코드 작성하기

3. Java 결과 값 가져오기

3. JSP 태그 정리

1. 스크립틀릿 (Scriptlet) <% %>

2. 선언 (Declaration) <%! %>

3. 표현식 (Expression) <%= %>

4. 지시어 (Directive) <%@ %>

5. 액션 태그 (Action Tags) <jsp:...>

6. 주석 (Comment) <%-- --%>

4. JSP 사용 예제

(예시 1)

(예시2)

'Language > Java' 카테고리의 다른 글

티스토리툴바

[Java] JSP 기본 태그 사용법[Java] JSP 기본 태그 사용법

1. JSP란?

2. 기본 문법

1. java class import

2. java 코드 작성하기

3. Java 결과 값 가져오기

3. JSP 태그 정리

1. 스크립틀릿 (Scriptlet) <% %>

2. 선언 (Declaration) <%! %>

3. 표현식 (Expression) <%= %>

4. 지시어 (Directive) <%@ %>

5. 액션 태그 (Action Tags) <jsp:...>

6. 주석 (Comment) <%-- --%>

4. JSP 사용 예제

(예시 1)

(예시2)

'Language > Java' 카테고리의 다른 글

관련글

티스토리툴바