그럼 지금까지 배운 Core 태그 라이브러리에 좀 더 익숙해지기 위해 로그인, 학점 변환, 구구단 출력 기능을 Core 태그 라이브러리를 이용해서 구현해 보겠음. 이전에 스크립트릿으로 구현했던 예제들과 결과는 같지만 구현 방법은 다름. 그럼 스크립트릿의 구현 방법과 어떻게 다른지 비교하면서 실습해 보겠음. 표준 태그 라이브러리 사용법을 금방 익힐 수 있을 것.
로그인 예제
- login.jsp
로그인창에서 id와 비밀번호를 입력한 후 로그인을 클릭할 수 있도록 login.jsp를 작성함.
<%@ 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>Insert title here</title>
</head>
<body>
<form action = "result.jsp" method = "post">
아이디 : <input type = "text" name = "user_ID"><br>
비밀번호 : <input type = "password" name = "userPw"><br>
<input type = "submit" value = "로그인">
<input type = "reset" value = "다시입력">
</form>
</body>
</html>- result.jsp
로그인창에서 id를 입력한 경우와 입력하지 않은 경우 <c:if> 태그를 이용해 각기 다른 화면을 출력하도록 설정함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- empty 연산자를 이용해 id 값이 비었는지 체크함. -->
<c:if test = "${empty param.userID }">
아이디를 입력하세요<br>
<a href = "login.jsp">로그인창</a>
</c:if>
<!-- id를 정상적으로 입력한 경우 로그인 메ㅔ시지를 출력함. -->
<c:if test = "${not empty param.userID }">
<h1>환영합니다. <c:out value = "${param.userID }"/>님.</h1>
</c:if>
</body>
</html>
id와 비밀번호를 입력한 후 로그인을 클릭함.
id를 정상적으로 입력한 경우 로그인 메시지를 출력함.
id를 입력하지 않고 로그인한 경우 다시 로그인하라는 메시지를 출력함.
이번에는 <c:if>로 이중 조건문을 구현하도록 다음과 같이 result2.jsp를 작성함. 로그인 시 admin으로 로그인하면 관리자 화면을 출력함.
- reuslt2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:if test = "${empty param.userID }">
아이디를 입력하세요.<br>
<a href = "login.jsp">로그인창</a>
</c:if>
<!-- id가 null 아님을 체크함. -->
<c:if test = "${not empty param.userID }">
<!-- id가 admin이면 관리자 화면을 출력함. -->
<c:if test = "${param.userID == 'admin' }">
<h1>관리자로 로그인 했습니다.</h1>
<form>
<input type = "button" value = "회원정보 삭제하기"/>
<input type = "button" value = "회원정보 수정하기"/>
</form>
</c:if>
<!-- id가 admin이 아니면 로그인 메시지를 출력함. -->
<c:if test = "${param.userID != 'admin' }">
<h1>환영합니다. <c:out value = "${param.userID }"/> 님. </h1>
</c:if>
</c:if>
</body>
</html>
admin으로 로그인함.
관리자 화면으로 출력함.
다른 id로 로그인 시 로그인 메시지를 출력함.
학점 변환기 예제
시험 점수를 입력하면 해당하는 학점으로 변환해 주는 프로그램을 Core 태그 라이브러리를 사용해 만들어 보겠음. 앞엣 구현했던 방법과 어떻게 다른지 비교하면서 실습하는 것이 도움이 될것.
- scoreTest.jsp
학점으로 변환할 시험 점수를 입력한 후 scoreResult.jsp로 전송함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>시험 점수를 입력해 주세요</h1>
<form method = "get" action = "scoreResult1.jsp">
시험점수 : <input type = "text" name = "score"/><br>
<input type = "submit" value = "학점변환"/>
</form>
</body>
</html>- scoreResult1.jsp
조건이 여러 개이므로 이번에는 <c:choose> 태그의 <c:when> 태그에 설정해 학점을 변환함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- param.score를 score 변수에 할댕해서 사용함. -->
<c:set var = "score" value = "${param.score }"/>
<h1>시험점수 <c:out value = "${score }"/></h1><br>
<!-- 조건이 여러 개인 경우 c:choose안의 c:when 태그를 이용해 점수를 해당하는 학점으로 변환함. -->
<c:choose>
<c:when test = "${score >= 90 && score <= 100 }">
<h1>A학점입니다.</h1>
</c:when>
<c:when test = "${score >= 80 && score <= 90 }">
<h1>B학점입니다.</h1>
</c:when>
<c:when test = "${score >= 70 && score <=80 }">
<h1>C학점입니다.</h1>
</c:when>
<c:when test = "${score >= 60 && score <= 70 }">
<h1>D학점입니다.</h1>
</c:when>
<c:otherwise>
<h1>F학점입니다.</h1>
</c:otherwise>
</c:choose>
</body>
</html>
시험 점수 입력 페이지에서 점수를 입력하고 학점변환을 클릭함.
변환된 학점을 출력함.
하지만 현재는 시험 점수가 0~100점 사이인지 유효성 검사를 하는 기능이 빠져 있으므로 학점 변화기 프로그램을 조금 수정해 보겠음.
- scoreResult2.jsp
학점 변환 시 <c:choose> 태그를 이용해 시험 점수가 0~100점 사이인지를 먼저 체크한 후 전송된 시험 점수가 유표 범위이면 그 다음에 학점을 변환하도록 다음과 같이 scoreResult2.jsp를 작성함. 만약 유효 범위를 벗어나면 새로 점수를 입력하라는 메시지를 출력함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- param.score를 score 변수에 할댕해서 사용함. -->
<c:set var = "score" value = "${param.score }"/>
<h1>시험점수 <c:out value = "${score }"/></h1><br>
<!-- c:choose 태그를 이용해 시험 점수의 유효성을 체크함. -->
<c:choose>
<c:when test = "${score >= 0 && score <= 100 }">
<c:choose>
<c:when test = "${score >= 90 && score <= 100 }">
<h1>A학점입니다.</h1>
</c:when>
<c:when test = "${score >= 80 && score <= 90 }">
<h1>B학점입니다.</h1>
</c:when>
<c:when test = "${score >= 70 && score <=80 }">
<h1>C학점입니다.</h1>
</c:when>
<c:when test = "${score >= 60 && score <= 70 }">
<h1>D학점입니다.</h1>
</c:when>
<c:otherwise>
<h1>F학점입니다.</h1>
</c:otherwise>
</c:choose>
</c:when>
<!-- 시험 점수가 범위를 벗어났으면 입력 창으로 다시 이동함. -->
<c:otherwise>
<h1>점수를 잘 못 입력했습니다. 다시 입력하세요.</h1>
<a href = "socreTest.jsp">점수 입력 창으로 이동</a>
</c:otherwise>
</c:choose>
</body>
</html>
이번에는 시험 점수의 유효 범위인 0~100을 벗어나는 값을 일부러 입력함. 그러면 점수를 잘 못 입력했으니 다시 입력하라는 메시지를 출력함.
구구단 출력 예제
이번에는 Core 태그 라이브러리를 사용한 구구단 출력 예제를 실습해 보겠음.
- gugu.jsp
구구단 입력창에서 구구단 수를 입력한 후 입력한 단수를 guguResult.jsp로 전송함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>출력할 구구단의 수를 지정해 주세요.</h1>
<form method = "get" action = "guguResult1.jsp">
출력할 구구단 : <input type = "text" name = "dan"/>
<input type = "submit" value = "구구단 출력"/>
</form>
</body>
</html>- guguResult.jsp
전송된 단수를 가져와 <c:forEach> 태그를 이용해서 tr 태그에 연속적으로 구구단을 출력하도록 작성함.
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<c:set var = "dan" value = "${param.dan }"/>
<table border = "1" width = "800" align = "center">
<tr align = "center" bgcolor = "lightgreen">
<td colspan = "2"><c:out value = "dan"/>단 출력</td>
</tr>
<!-- c:Each태그를 이용해 구구단을 출력함. -->
<c:forEach var = "i" begin = "1" end = "9" step = "1">
<tr align = "center">
<td width = "400">
<c:out value = "${dan }"/> *
<c:out value = "${i }"/>
</td>
<td width = "400">
<c:out value = "${i * dan }"/>
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
구구단 입력창에서 단수를 입력한 후 구구단 출력을 클릭함.
전송된 단수를 이용해 구구단을 출력함.
이미지 리스트 출력 예제
이번에는 여러 가지 이미지와 체크박스를 연속적으로 출력하는 프로그램을 <c:forEach> 태그를 사용해 만들어 보겠음.
- imageList.jsp
<c:forEach> 태그를 이용해 ul태그 안에 li 태그를 연속해서 출력하여 이미지를 나타냄.
<%@ page language="java" contentType="text/html; charset=UTF-8"
isELIgnored="false"
pageEncoding="UTF-8"%>
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
<%
request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul class = "list_type">
<li>
<span style = 'margin-left:50px'>이미지</span>
<span>이미지 이름</span>
<span>선택하기</span>
</li>
<!-- c:forEach 태그를 이용해 이미지와 체크박스를 연속해서 나타냄. -->
<c:forEach var = "i" begin = "1" end = "9" step = "1">
<li>
<a href = '#' style = 'margin-left:50px'>
<img src = '../image/duke.png' width = "90" height = "90" alt = ''/></a>
<a href = '#'><strong>이미지 이름 : 듀크${i }</strong></a>
<a href = '#'><input name = "chk${i }" type = "checkbox"></a>
</li>
</c:forEach>
</ul>
</body>
</html>
지금까지 Core 태그 라이브러리를 사용해 실습해 봤음. 현재 jsp 페이지는 jstl로 구현하므로 라이브러리를 사용하는 방법에 익숙해지면 실제로 개발하는 데 많은 도움이 될 것.
Hello World!