📚 Study/JSP & Servlet
JSP & Servlet :: EL과 JSTL 실습
bono-hye
2023. 12. 21. 23:16
# Test3.jsp
- 기존 데이터 수신 방식과 EL 활용한 데이터 수신 방식 비교
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%
/* setAttribute() 로 넘긴 데이터 수신 실습을 위한 코드 추가 */
request.setAttribute("result", "EL 테스트 및 관찰");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test3.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>EL 관련 실습</h1>
<hr>
</div>
<div>
<form method="post">
정수1 <input type="text" name="su1" class="txt" /><br>
정수2 <input type="text" name="su2" class="txt" /><br>
<br>
<button type="submit" class="bnt">결과 확인</button>
</form>
</div>
<div>
<h2>폼 데이터 수신</h2>
[폼의 데이터를 수신하는 방법 1]
<h3><%=request.getParameter("su1") %></h3>
[폼의 데이터를 수신하는 방법 2]
<h3>${param.su2 }</h3>
</div>
<br><br>
<div>
<h2>폼의 데이터를 받아 연산 수행</h2>
[폼의 데이터를 받아 연산을 수행하는 방법 1]
<%
String s1 = request.getParameter("su1");
String s2 = request.getParameter("su2");
int s=0;
if(s1!=null && s2!=null)
{
s = Integer.parseInt(s1) + Integer.parseInt(s2);
}
%>
<h3>합 : <%=s %></h3>
[폼의 데이터를 받아 연산을 수행하는 방법 2]
<h3>합 : ${param.su1 + param.su2 }</h3>
</div>
<br><br>
<div>
<h2>setAttribute() 로 넘긴 데이터 수신</h2>
[setAttribute() 로 넘긴 데이터를 수신하는 방법1]
<h3><%=(String)request.getAttribute("result") %></h3>
[setAttribute() 로 넘긴 데이터를 수신하는 방법2]
<h3>${result }</h3>
</div>
</body>
</html>➰체크할 내용➰
1. form 태그 action 속성 생략
- 전송하는 데이터의 수신처는 자기 자신!
2. EL 로 데이터 수신
- 받아오는 값이 없을 경우(초기화면일 경우)에는 null를 나타내지 않는다. 아무것도 보여주지 않음!!
수신할 값이 있을 경우에만 값을 출력해준다!
- param."name" 이렇게 하면 파라미터 수신 알아서!
- request.getParameter("name") 방식으로 수신하면 문자열로 불러와지니까 형 변환 해줘야 하는데
EL 은 필요한 캐스팅도 알아서 자동으로 수행
완전 굳굳👍
# JSTL 코어(Core) if문 실습 - Test4.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test4.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) if문 실습</h1>
<hr>
</div>
<div>
<form method="post">
정수
<input type="text" name="su" class="txt"/>
<br><br>
<button type="submit" class="btn">결과 확인</button>
</form>
</div>
<br><br>
<div>
<c:if test="${!empty param.su }">
<c:if test="${param.su % 2 == 0 }">
<h2>${param.su } : 짝수</h2>
</c:if>
<c:if test="${param.su % 2 != 0 }">
<h2>${param.su } : 홀수</h2>
</c:if>
</c:if>
</div>
</body>
</html>➰체크할 내용➰
1. JSTL Core if문
- test="" : 조건식 지정
- JSTL Core if에는 if는 있지만 else는 없다!!
# JSTL 코어(Core) 반복문 실습 - Test5.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test5.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) forEach문 실습</h1>
<hr>
</div>
<div>
<table class="table">
<!-- JSTL 코어(Core) 반복문 -->
<c:forEach var="a" begin="1" end="9" step="1">
<tr>
<c:forEach var="b" begin="1" end="9" step="1">
<td style="width: 20px;">
${a*b }
</td>
</c:forEach>
</c:forEach>
</table>
</div>
</body>
</html>➰체크할 내용➰
1. JSTL Core 반복문
- <c:forEach var="변수" begin="시작값" end="끝값" step="증가값"> </c:forEach>
# JSTL 코어(Core) 반복문 실습 - Test6.jsp
<%@page import="com.test.MyData"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%
// Test6.jsp
//-- 사용자 정의 데이터타입을 취하는 자료구조 생성
List<MyData> lists = new ArrayList<MyData>();
MyData ob = new MyData("홍길동", 15);
lists.add(ob);
ob = new MyData("둘리", 23);
lists.add(ob);
ob = new MyData("도우너", 24);
lists.add(ob);
ob = new MyData("또치", 16);
lists.add(ob);
ob = new MyData("고길동", 8);
lists.add(ob);
ob = new MyData("희동이", 17);
lists.add(ob);
request.setAttribute("lists", lists);
%>
<jsp:forward page="Test6_result.jsp"></jsp:forward># MyData.java
package com.test;
public class MyData
{
// 주요 속성 구성
private String name;
private int age;
// default 생성자 형태의 사용자 정의 생성자 // 아래 생성자 정의하면 디폴트 생성자 생성 안되니까 정의함.
public MyData()
{
}
// 매개변수 2개 사용자 정의 생성자
public MyData(String name, int age)
{
this.name = name;
this.age = age;
}
// getter / setter 구성
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public int getAge()
{
return age;
}
public void setAge(int age)
{
this.age = age;
}
}
# JSTL 코어(Core) set문 실습 - Test7.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test7.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) set문 실습</h1>
<h2>지수승 구하기</h2>
<hr>
</div>
<div>
<!-- 수신처는 자기 자신~!!! -->
<form method="post">
정수1
<input type="text" name="su1" class="txt" /><br>
정수2
<input type="text" name="su2" class="txt" /><br><br>
<button type="submit" class="btn">결과 확인</button>
</form>
</div>
<div>
<c:if test="${!empty param.su1 }">
<c:set var="result" value="1"></c:set>
<c:forEach var="a" begin="1" end="${param.su2 }" step="1">
<c:set var="result" value="${result * param.su1 }"></c:set>
<p>${param.su1 } ^ ${a } = ${result }</p>
</c:forEach>
</c:if>
</div>
</body>
</html>➰체크할 내용➰
1. <c:set>
- JSP 의 setAttribute() 와 같은 역할을 수행한다.
- page / request / session / application : 범위의 변수(속성)을 설정한다. (scope 속성이 생략될 경우 기본 값은 page)
2. <c:remove>
- JSP 의 removeAttribute() 와 같은 역할을 수행한다.
- page / request / session / application : 범위의 변수(속성)을 제거한다. (scope 속성이 생략될 경우 기본 값은 page)
3. <c:set var="변수" value="값"></c:set>
- 변수의 값을 지정(set)하는 구문
- 해당 스코프에 지정된 변수가 존재하지 않을 경우 : 변수를 새로 선언하여 초기화 하는 기능 수행
- 해당 스코프에 이미 지정된 변수가 존재하는 경우 : 그 변수의 값을 다시 초기화하는(덮어쓰기) 효과 적용
# JSTL 코어(Core) 를 활용한 구구단 출력 - Gugudan.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gugudan.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSP 코어(Core)를 활용한 구구단 출력</h1>
<hr>
</div>
<div>
<form method="post">
원하는 단 입력
<input type="text" name="dan" class="txt"/>
<br><br>
<button type="submit" class="btn">결과 확인</button>
</form>
</div>
<div>
<c:if test="${!empty param.dan }">
<h2>📜${param.dan }단의 구구단 출력 결과 확인</h2>
<c:set var="result" value="1"></c:set>
<c:forEach var="n" begin="1" end="9" step="1">
<c:set var="result" value = "${param.dan *n}"></c:set>
<p>${param.dan } * ${n } = ${result }</p>
</c:forEach>
</c:if>
</div>
<div>
<%-- 다른 방법으로 풀어본 것~! --%>
<c:if test="${!empty param.dan }">
<c:forEach var="n" begin="1" end="9" step="1">
<p>${param.dan } * ${n } = ${param.dan * n }</p>
</c:forEach>
</c:if>
</div>
</body>
</html>
# JSTL 코어(Core) choose문 실습 - Test8.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test8.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) choose문 실습</h1>
<h2>배수 확인하기</h2>
<hr>
</div>
<div>
<form action="" method="post">
정수
<input type="text" name="su" class="txt">
<br><br>
<button type="submit" class="btn">결과 확인</button>
</form>
</div>
<br>
<div>
<c:if test="${!empty param.su }">
<c:choose>
<c:when test="${param.su % 12 == 0 }">
<p>${param.su }은(는) 3과 4의 배수</p>
</c:when>
<c:when test="${param.su % 3 == 0 }">
<p>${param.su }은(는) 3의 배수</p>
</c:when>
<c:when test="${param.su % 4 ==0 }">
<p>${param.su }은(는) 4의 배수</p>
</c:when>
<c:otherwise>
<p>${param.su }은(는) 3 또는 4의 배수가 아님!</p>
</c:otherwise>
</c:choose>
</c:if>
</div>
</body>
</html>➰체크할 내용➰
1. <c:choose></c:choose> <c:otherwise></c:otherwise>
- JSTL Core 에서 if ~ else 를 대신하여 사용할 수 있는 구문
# JSTL 코어(Core) import문 실습 - Test9.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test9.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) import문 실습</h1>
<hr>
</div>
<!-- 변수 지정 -->
<c:set var="url" value="Gugudan.jsp"></c:set>
<!-- import 를 수행 -->
<c:import url="${url }" var="impt">
<%-- import 를 수행하며 해당 페이지가 필요로하는 파라미터 넘기기 --%>
<c:param name="dan" value="5"></c:param>
</c:import>
<!-- 결과 화면 출력 -->
<c:out value="${impt }"></c:out>
<!-- 결과 화면 출력 과정에서 HTML 코드를 그대로 출력하도록 처리하는 구문 -->
<!-- 『escapeXml』 속성의 기본값(default)은 true 로 설정되어 있다. -->
<br><br>
<!-- 결과 화면 출력 -->
<c:out value="${impt }" escapeXml="false"></c:out>
</body>
</html>➰체크할 내용➰
1. <c:import>
- URL 처리에 관여, URL 을 활용하여 다른 자원의 결과를 삽입할 때 사용한다.
2. escapeXml="true / false"
- true : 결과 화면 출력 과정에서 HTML 코드를 그대로 출력하도록 처리, 속성을 지정하지 않을 경우 기본값은 true
- false : HTML 코드가 적용된 화면을 출력
# JSTL 코어(Core) 를 활용한 실습 - 5명의 데이터 입력
# MemberInsertForm.jsp - 사용자가 만나는 페이지(입력 폼)
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%
String nameStr = request.getParameter("name");
String telStr = request.getParameter("tel");
String addrStr = request.getParameter("addr");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MemberInsertForm.jsp</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h2>JSTL 코어(Core)를 활용한 회원 정보 입력</h2>
<hr>
</div>
<div>
<form action="MemberInsert.jsp" method="post">
<!-- (이름, 전화번호, 주소) * 5명 분 -->
<!-- → submit 액션 처리 -->
<table class="table">
<tr>
<th>이름</th><th>전화번호</th><th>주소</th>
</tr>
<tr>
<td>
<c:forEach var="a" begin="1" end="5" step="1">
<input type="text" name="name${a }"/>
</c:forEach>
</td>
<td>
<c:set var="i" value="1"></c:set>
<c:forEach var="a" begin="1" end="5" step="1">
<input type="text" name="tel${i}"/>
<c:set var="i" value="${i+1 }"></c:set>
</c:forEach>
</td>
<td>
<c:forEach var="a" begin="1" end="5" step="1">
<input type="text" name="addr${a }"/>
</c:forEach>
</td>
</tr>
<tr>
<td colspan="3">
<button type="submit" class='btn' style="width: 100%">입력</button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html># MemberInsert.jsp - 데이터 받아와서 MemberList.jsp로 넘겨주는 페이지
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.test.MemberDTO"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<%
// MemberInsert.jsp
// 5명 분 데이터 수신 → 객체 구성 → 자료구조 구성 → setAttribute()
// MemberDTO
// → MemberList.jsp 에서 출력
List<MemberDTO> lists = new ArrayList<MemberDTO>();
for (int i=1; i<=5; i++)
{
MemberDTO ob = new MemberDTO( request.getParameter("name"+i)
, request.getParameter("tel"+i)
, request.getParameter("addr"+i));
lists.add(ob);
}
request.setAttribute("lists", lists);
//RequestDispatcher 써도 되구~
%>
<jsp:forward page="MemberList.jsp"></jsp:forward>
# MemberList.jsp - 넘겨받은 데이터 출력하는 페이지
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<h1>JSTL 코어(Core) 문제 해결</h1>
<h2>회원 명단 출력</h2>
<hr>
</div>
<div>
<!-- 5명의 이름, 전화번호, 주소 출력 -->
<table class="table">
<tr>
<th>이름</th>
<th>전화번호</th>
<th>주소</th>
</tr>
<c:forEach var="dto" items="${lists }" >
<tr>
<td style="text-align: center;">${dto.name }</td>
<td style="text-align: center;">${dto.tel }</td>
<td style="text-align: center;">${dto.addr }</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
