본문 바로가기
JSP 웹프로그래밍

JSP #10 : 커스텀 태그(230109)2_1

by haheehee 2023. 1. 9.

++ 커스텀 태그(Custom Tag) ++

- 사용자 정의 태그

- 스크립트릿 사용을 줄이고 태그와 같은 형태로 프로그램 코드를 대체하거나 재활용 가능한 구조

- 외형적인 형태는 XML(HTML) 태그 구조, 서블릿 형태로 변환될 때 자바 코드로 변경되어 통합

- 커스텀 태그를 사용하기 위해서는 taglib 지시어를 사용 -> 커스텀 태그가 어디에 정의되어 있는지를 먼저 선언, 태그에 사용할 접두어를 지정해야 한다.

- 커스텀 태그 자체가 서버에서 해석되는 구조

- 많이 사용 x

- 커스텀 태그 기술로 만들어진 JSTL(JSP Standard Tag Library)이 자바 웹 개발에 필수(따로 JSTL 라이브러리 설치해 사용)

<%@ taglib tagdir="/WEB-INF/tags" prefix="m" %>

<m:printData pid="87459989" />

 

- 액션 태그나 표현 언어를 사용하더라도 조건식이나 반복문 등의 자바 코드를 제거하기 위해 사용

라이브러리 기능 접두어 URI
코어 변수지원, 흐름제어, 반복문처리, URL처리 c http://java.sun.com/jsp/jstl/core
국제화 지역, 메시지 형식, 숫자, 날짜 fmt http://java.sun.com/jsp/jstl/fmt
XML XML코어, 흐름제어, xml변환 x http://java.sun.com/jsp/jstl/xml
데이터베이스 SQL sql http://java.sun.com/jsp/jstl/sql
함수 컬렉션처리, 문자열처리 fn http://java.sun.com/jsp/jstl/functions

- 자바로 구현한 변수 선언, 조건식 ,반복문 기능등을 태그로 대체함

- 사용 전 반드시 taglib 디렉티브 태그를 선언해야 함.

               <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

  • 변수지원 : <c:set> JSP페이지에서 변수 지정
  • 변수지원 : <c:remove> 지정된 변수 제거
  • 흐름제어 : <c:if> 조건문
  • 흐름제어 : <c:choose> switch문 사용. (<c:when>, <c:otherwise> 가 서브태그)
  • 흐름제어 : <c:forEach> 반복문
  • 흐름제어: <c:forTokens> 구분자로 분리된 각각의 토큰 처리할때 사용
  • URL처리 : <c:import> URL을 이용해 다른 자원을 JSP페이지에 추가
  • URL처리 : <c:redirect> response.sendRedirect()기능 수행
  • URL처리 : <c:url> 요청 매개변수로부터 URL 생성
  • 기타 : <c:catch> 예외 처리
  • 기타 : <c:out> JspWriter에 내용 처리 후 출력

<c:set> 태그 실습

<c:set var="변수이름" value="변수값" [scope="scope속성중하나"] />

(scope : 접근범위 page,reques,session,application 중 하나)

<c:set>태그, core 라이브러리, 표현언어

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
%>
<c:set var="id" value="kim" scope="page" />
<c:set var="pwd" value="1234" scope="page" />
<c:set var="name" value="${'김자바'}" scope="page" />
<c:set var="age" value="${27}" scope="page" />
<c:set var="height" value="${170}" scope="page" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력창</title>
</head>
<body>
	<table align="center" border=1>
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>나이</b></td>
			<td width="7%"><b>키</b></td>
		</tr>
		<tr>
			<td>${id}</td> <td>${pwd}</td> <td>${name}</td> <td>${age}</td> <td>${height}</td>
		</tr>
	</table>
</body>
</html>

member1.jsp

 

core 태그 라이브러리를 사용하려면 꼭 선언해야함 -> taglib지시어 사용해서.

<c:set> 태그로 변수 선언.

표현언어로 바로 접근 

member1 출력결과

 

<c:set>태그, HashMap, ArrayList

<%@ page language="java" contentType="text/html; charset=utf-8" 
	import="java.util.*, test.customtag.*" pageEncoding="utf-8" isELIgnored="false" %>
<% request.setCharacterEncoding("UTF-8"); %>
<jsp:useBean id="membersList" class="java.util.ArrayList" />
<jsp:useBean id="membersMap" class="java.util.HashMap" />
<%
	membersMap.put("id", "chacha");
	membersMap.put("pwd", "1234");
	membersMap.put("name", "차은우");
	membersMap.put("email", "cha@chacha.cha");
	MemberBean m1 = new MemberBean("go", "1234", "고윤정", "yunjeong@gogo.com");
	MemberBean m2 = new MemberBean("lee", "1234", "이재욱", "leejae@wook.com");
	membersList.add(m1);
	membersList.add(m2);
	membersMap.put("membersList", membersList);
%>
<c:set var="membersList" value="${membersMap.membersList}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력창</title>
</head>
<body>
	<table align="center" border=1>
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>이메일</b></td>
		</tr>
		<tr align="center">
			<td>${membersMap.id}</td>
			<td>${membersMap.pwd}</td>
			<td>${membersMap.name}</td>
			<td>${membersMap.email}</td>
		</tr>
		<tr align="center">
			<td>${membersList[0].id}</td>
			<td>${membersList[0].pwd}</td>
			<td>${membersList[0].name}</td>
			<td>${membersList[0].email}</td>
		</tr>
		<tr align="center">
			<td>${membersList[1].id}</td>
			<td>${membersList[1].pwd}</td>
			<td>${membersList[1].name}</td>
			<td>${membersList[1].email}</td>
		</tr>
	</table>
</body>
</html>

member2.jsp

 

<c:set>태그 사용해 pageContext 내장 객체의 이름을 변수 contextPath에 미리 설정

각각 HashMap과 ArrayList[0], ArrayList[1]

MemberBean과 MemberDAO java파일 추가했다.

 

<c:remove> 태그 실습

<c:set var="변수이름" [scope="scope속성중하나"] />

(scope : 접근범위 page,reques,session,application 중 하나)

<c:remove>태그, core 라이브러리, 표현언어

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
%>
<c:set var="id" value="kim" scope="page" />
<c:set var="pwd" value="1234" scope="page" />
<c:set var="name" value="${'김자바'}" scope="page" />
<c:set var="age" value="${27}" scope="page" />
<c:set var="height" value="${170}" scope="page" />
<c:remove var="age" />
<c:remove var="height" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력창</title>
</head>
<body>
	<table align="center" border=1>
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>나이</b></td>
			<td width="7%"><b>키</b></td>
		</tr>
		<tr>
			<td>${id}</td> <td>${pwd}</td> <td>${name}</td> <td>${age}</td> <td>${height}</td>
		</tr>
	</table>
</body>
</html>

member3.jsp

 

<c:remove> 태그를 사용해 age와 height값을 삭제

결과

 

<c:if> 태그 실습

<c:if test="${조건식}" var="변수이름" [scope="scope속성중하나"] />
...
</c:if>

(scope : 접근범위 page,reques,session,application 중 하나)

<c:if>태그, core 라이브러리, 표현언어, 논리 연산자, 조건식

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
%>
<c:set var="id" value="kim" scope="page" />
<c:set var="pwd" value="1234" scope="page" />
<c:set var="name" value="${'김자바'}" scope="page" />
<c:set var="age" value="${27}" scope="page" />
<c:set var="height" value="${170}" scope="page" />

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>c:if태그</title>
</head>
<body>
	<c:if test="${true}">
		<h1>항상 true입니다.</h1>
	</c:if>
	
	<c:if test="${11 == 11}">
		<h1>두 값은 같습니다.</h1>
	</c:if>
	
	<c:if test="${11 != 33}">
		<h1>두 값은 같지 않습니다.</h1>
	</c:if>
	
	<c:if test="${(id=='kim') && (name=='김자바')}">
		<h1>아이디는 ${id}이고, 이름은 ${name} 입니다.</h1>
	</c:if>
	
	<c:if test="${age==27}">
		<h1>${name}의 나이는 ${age}</h1>
	</c:if>
	
	<c:if test="${height > 160}">
		<h1>${name}의 키는 160보다 큽니다. (${name}의 키 : ${height})</h1>
	</c:if>
</body>
</html>

member4.jsp

 

출력 결과

 

<c:choose> 태그 실습

<c:choose>
    <c:when test="${조건식1}">본문내용1</c:when>
    <c:when test="${조건식2}">본문내용2</c:when>
    ...
    <c:otherwise>본문내용n</c:otherwise>
</c:choose>

 

<c:choose>태그, core 라이브러리, 표현언어

...
    <c:choose>
	<c:when test='${empty name}'>
		<tr align="center">
			<td colspan=5>이름을 입력하세요!</td>
		</tr>
	</c:when>
	<c:otherwise>
		<tr align="center">
			<td>${id}</td>
			<td>${pwd}</td>
			<td>${name}</td>
			<td>${age}</td>
			<td>${height}</td>
		</tr>
	</c:otherwise>
    </c:choose>
...

member5.jsp

 

<c:set>태그의 이름부분을 주석처리한 후, 실행하면

주석처리하지 않으면

기존대로 잘 출력된다.

 

<c:forEach> 태그 실습

<c:forEach var="변수이름"
        items="반복할객체이름"
        begin="시작값" end="마지막값"
        step="증가값" varStatus="반복상태변수이름">
    ...
</c:forEach>

- JSP 페이지에서의 반복문 태그

(var : 반복 변수 이름, items : 반복할 객체 이름, begin: 반복 시작값, end : 반복 종료값, step: 반복 변수 증가시키는 값, varStatus : 반복 상태)

 

- 속성

  • index : 값int, items에서 정의한 항목을 가리키는 index번호. 0부터
  • count : 값int, 몇번째 반복인지 나타낸다. 1부터
  • first : 값boolean, 첫번째 반복인지
  • last : 값boolean, 마지막 반복인지

<c:forEach>태그, core 라이브러리, 표현언어, Arraylist, 구분자

<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	List dataList = new ArrayList();
	dataList.add("hello");
	dataList.add("world");
	dataList.add("안녕하세요?");
%>
<c:set var="list" value="<%=dataList %>" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>반복문 실습</title>
</head>
<body>
	<c:forEach var="i" begin="1" end="10" step="1" varStatus="loop">
		i = ${i} &nbsp;&nbsp;&nbsp; 반복횟수 : ${loop.count} <br>
	</c:forEach> <br>
	
	<c:forEach var="i" begin="1" end="10" step="2">
		5 * ${i} = ${5*i}<br>
	</c:forEach> <br>
	
	<c:forEach var="data" items="${list}">
		${data} <br>
	</c:forEach> <br>
	
	<c:set var="fruits" value="사과, 파인애플, 바나나, 망고, 귤" />
	<c:forTokens var="token" items="${fruits}" delims="," >
		${token} <br>
	</c:forTokens>
</body>
</html>

 

마지막 fruits예제의 경우, 구분자(",")로 나누는 형식은 

https://www.data.go.kr/에서 .csv확장자의 파일 가지고올 때 사용

 

실행결과

<c:forEach>태그, core 라이브러리, 표현언어, 회원정보 출력 #1

<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*, test.customtag.*" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	List membersList = new ArrayList();
	MemberBean m1 = new MemberBean("cha", "1234", "차은우", "cha@chacha.com");
	MemberBean m2 = new MemberBean("lee", "1234", "이창섭", "chang@sub.com");
	MemberBean m3 = new MemberBean("hwang", "1234", "황민현", "hwang@min.hyun");
	membersList.add(m1);
	membersList.add(m2);
	membersList.add(m3);
%>
<c:set var="membersList" value="<%=membersList %>" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원정보 출력</title>
</head>
<body>
	<table align="center" border=1>
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>이메일</b></td>
		</tr>
		<c:forEach var="i" begin="0" end="2" step="1">
			<tr align="center">
				<td>${membersList[i].id}</td>
				<td>${membersList[i].pwd}</td>
				<td>${membersList[i].name}</td>
				<td>${membersList[i].email}</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

일반 for문 

일반 for문 실행결과

<c:forEach>태그, core 라이브러리, 표현언어, 회원정보 출력 #2

...
<c:forEach var="member" items="${membersList}">
	<tr align="center">
		<td>${member.id}</td>
		<td>${member.pwd}</td>
		<td>${member.name}</td>
		<td>${member.email}</td>
	</tr>
</c:forEach>
...

확장 for문

확장 for문 실행결과 (위와 같음)

 

<c:redirect> 태그 실습

<c:redirect url="redirect할 URL">
	[<c:param name="매개변수이름" value="전달값" />
    ...
</c:redirect>

- url : 리다이렉트될 URL 변수

- param : request.getParameter(,,,)와 같다.         -> request객체에 저장되어 있다.

<c:redirect>태그, core 라이브러리, 표현 언어, param

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>redirect page</title>
</head>
<body>
	<c:redirect url="memberRedirect.jsp" >
		<c:param name="id" value="${'kim'}" />
		<c:param name="pwd" value="${'1234'}" />
		<c:param name="name" value="${'김자바'}" />
		<c:param name="email" value="${'kim@java.com'}" />		
	</c:redirect>
</body>
</html>

redirectTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	String name = request.getParameter("name");
	String email = request.getParameter("email");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 출력창</title>
</head>
<body>
	<table align="center" border=1>
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>이메일</b></td>
		</tr>
		<tr>
			<td><%=id %></td>
			<td><%=pwd %></td>
			<td><%=name %></td>
			<td><%=email %></td>
		</tr>
		<tr>
			<td>${param.id }</td>
			<td>${param.pwd }</td>
			<td>${param.name}</td>
			<td>${param.email}</td>
		</tr>
	</table>
</body>
</html>

memberRedirect.jsp

 

request객체로 parameter를 불러와 사용 -> <%=파라미터 변수이름 %>으로 호출가능,

${param.파라미터이름}으로 호출가능

URL창 주목!!!

redirectTest.jsp를 실행 -> memberRedirect.jsp를 불러와 실행.

리다이렉트하면서 회원 정보를 매개변수로 전달

 

<c:out> 태그 실습

<c:out value="출력값" default="기본값" [escapeXml="boolean값"] />

(value : 출력할값, default : value에 지정된 값이 없을 때 출력할 기본값,

escapeXml : escape 문자 변환 여부 기본값은 true)

<c:out>태그, core 라이브러리, 표현 언어

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원가입 창</title>
</head>
<body>
	<form method="post" action="escapeXml.jsp">
		<h1 style="text-align: center">회원가입창</h1>
		<table align="center">
			<tr>
				<td width="200"><p align="right">아이디</p></td>
				<td width="400"><input type="text" name="id"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">비밀번호</p></td>
				<td width="400"><input type="password" name="pwd"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">이름</p>	</td>
				<td width="400"><input type="text" name="name"></td>
			</tr>
			<tr>
				<td width="200"><p align="right">이메일</p></td>
				<td width="400"><input type="text" name="email"></td>
			</tr>
			<tr>
				<td width="200"></td>
				<td width="80">
					<input type="submit" value="가입하기">
					<input type="reset" value="다시입력">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

memberForm.html

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>회원등록창</title>
</head>
<body>
	<table align="center" border="1">
		<tr align="center" bgcolor="lightgreen">
			<td width="7%"><b>아이디</b></td>
			<td width="7%"><b>비밀번호</b></td>
			<td width="7%"><b>이름</b></td>
			<td width="7%"><b>이메일</b></td>
		</tr>
		<c:choose>
			<c:when test='${empty param.id}'>
				<tr align="center">
					<td colspan=5>아이디를 입력하세요!</td>
				</tr>
			</c:when>
			<c:otherwise>
				<tr align="center">
					<td><c:out value="${param.id}" /></td>
					<td><c:out value="${param.pwd}" /></td>
					<td><c:out value="${param.name}" /></td>
					<td><c:out value="${param.email}" /></td>
				</tr>
			</c:otherwise>
		</c:choose>
	</table>
</body>
</html>

escapeXml.jsp

실행결과

 

커스텀태그 - 로그인 예제 #1

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login page</title>
</head>
<body>
	<form action="result.jsp" method="post">
		아이디 : <input type="text" name="userId"><br>
		비밀번호 : <input type="password" name="userPw"><br>
		<input type="submit" value="로그인">
		<input type="reset" value="다시 입력">
	</form>
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login-result</title>
</head>
<body>
	<c:if test="${empty param.userId }">
		아이디를 입력하세요.<br>
		<a href="login.jsp">로그인창</a>
	</c:if>
	<c:if test="${not empty param.userId }">
		<h1>환영합니다. <c:out value="${param.userId }" />님!</h1>
	</c:if>
</body>
</html>

result.jsp

 

아이디를 입력하지 않고 로그인버튼을 누르면,

아이디 입력 경고 문구와 하이퍼링크가 나온다.

다시 돌아가서,

아이디와 비밀번호를 입력 후, 로그인하면,

정상적으로 창이 넘어간다.

 

커스텀태그 - 로그인 예제 #2

login2.jsp는

동일하되, <form action="result2.jsp" method="post"> 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login-result</title>
</head>
<body>
	<c:if test="${empty param.userId }">
		아이디를 입력하세요.<br>
		<a href="login2.jsp">로그인창</a>
	</c:if>
	<c:if test="${not empty param.userId }">
		<c:if test="${param.userId == 'admin' }">
			<h1>관리자로 로그인 했습니다.</h1>
			<form>
				<input type=button value="회원정보 삭제"/>
				<input type=button value="회원정보 수정"/>
			</form>
		</c:if>
		<c:if test="${param.userId !='admin' }">
			<h1>환영합니다. <c:out value="${param.userId }" />님!</h1>
		</c:if>
	</c:if>
</body>
</html>

result2.jsp

 

실행결과도 #1 실습과 동일,

추가로

'admin'을 아이디로 하여 로그인했을 때,

관리자로 로그인.

 

 

 

 

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

'JSP 웹프로그래밍' 카테고리의 다른 글

JSP #12 : Model2 방식 - 게시판(230111)  (0) 2023.01.16
JSP #11 : Model2 방식, 회원 출력, 추가, 삭제/수정(230110)  (0) 2023.01.11
JSP #9 : database와 연동 (230106)  (0) 2023.01.06
JSP : EL 자료형, 연산자, 실습(230105)Expression Language  (0) 2023.01.05
JSP #8 : 커스텀 태그 & EL & JSTL (230105)2  (0) 2023.01.05

관련글

댓글

티스토리툴바