-
JSP - EL / JSTL프로그래밍/JSP 2021. 10. 15.반응형
이런식으로 표현하는걸 EL이라고 함.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>EL</h3> <p>사칙 연산</p> <p> ${3+5} <!-- 8 : Long형 --></p> <p> ${3+"5"} <!-- 8 --></p> <p> {3+null} = 0 <!-- 3+0=3 : null은 0 --></p> <p> ${10 / 5} <!-- 2.0 : Double형 --></p> <p> ${13 / 5} <!-- 2.6 --></p> <p> ${13 mod 5} <!-- 3 --></p> <p> ${13 % 5} <!-- 3 --></p> <p> EL에서는 "A" + "B" 처럼 문자열 결합을 하면 에러가 발생함</p> <hr> <p>비교 논리 연산</p> <p> 3==4 : ${3==4}, ${3 eq 4} </p> <p> 3!=4 : ${3!=4}, {3 ne 4}도 false임 </p> <p> 3 lt 4 : ${3 lt 4 }, ${3 < 4 }</p> <p> 3 gt 4 : ${3 gt 4 }, ${3 > 4 }</p> <p> 3 le 4 : ${3 le 4 }, ${3 <= 4 }</p> <p> 3 ge 4 : ${3 ge 4 }, ${3 >= 4 }</p> <p>${empty name } <!-- 속성 이름에 name이 없으므로 true --></p> <p>${10%2==0 ? "짝수" : "홀수" }</p> <p>기타 연산</p> <p>문자열 결합 : +=, ${"서울" += "경기" }</p> <p>세미콜론 연산자 - a,b에서 a는 출력 안되고 b만 출력</p> <p> ${1+2; 2+5 } 결과는 7</p> <p>할당 연산자 : 할당연산 자체도 출력</p> <p>${a=10 } ${a } 결과는 10 10</p> <p>${a=10; a } - 결과는 10</p> </body> </html>기본적인 EL 구문 다양한 연산이 가능함
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>EL 내장 객체</h3> <p>pageContext : 현재 페이지의 설정 정보</p> <p>ContextPath : <%= request.getContextPath() %></p> <p>ContextPath : ${pageContext.request.contextPath }</p> <!-- 암기 --> <hr> <p>header : 요청 헤더 정보</p> <p>User-Agent : ${header["user-agent"] }</p> </body> </html>그리고 내장객체를 이용해서 ContextPath를 알아 낼 수 있음.
무엇보다 EL을 활용하면 다른 파일로 부터 받아온 변수를 그냥 이름만 쓰는거로 표현이 가능함.
package ch10.user; public class User { private String name; private int age; private String tel; private String subject; public User() { } public User(String name, int age, String tel) { this.name = name; this.age = age; this.tel = tel; } 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; } public String getTel() { return tel; } public void setTel(String tel) { this.tel = tel; } public String getSubject() { return subject; } public void setSubject(String subject) { this.subject = subject; } }<%@page import="ch10.user.User"%> <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% request.setCharacterEncoding("utf-8"); User dto = new User("홍길동", 10, "010-1111-1111"); request.setAttribute("vo", dto); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <jsp:forward page="ex03_ok.jsp"> <jsp:param value="서울" name="city"/> </jsp:forward> </body> </html><%@page import="ch10.user.User"%> <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% request.setCharacterEncoding("utf-8"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <!-- EL의 주 사용 목적은 request, pageContext, session 등에서 설정한 속성attribute을 출력하기 위해서 사용 --> <h3>EL을 사용하지 않는 경우</h3> <% request.setCharacterEncoding("utf-8"); User vv = (User)request.getAttribute("vo"); String city = request.getParameter("city"); %> <!-- 필드의 값이 null인 경우 null로 출력됨 --> <p><%= vv.getName() %>, <%= vv.getAge() %>, <%= vv.getTel() %>, <%=vv.getSubject() %></p> <p><%= city %></p> <hr> <h3>EL을 사용하는 경우</h3> <p> ${vo.name }, ${vo.age }, ${vo.tel }, ${vo.subject }</p> <!-- 파라미터는 param 이라는 EL 내장 객체를 사용 --> <p>${param.city }</p> </body> </html>자바 파일에 변수를 선언하고 게터 세터로 가져오고 수정 할 수 있게 만들고
첫번째 jsp 파일에서 자바에서 작성한 변수들을 가져오기 위해서 자바코드로 객체를 만든다.
그리고 객체에 값을넣어준다.(홍길동, 10 , 전번) 그리고 이걸 request로 속성에 저장 한다.
vo라는 이름에 위에 데이터를 넣은 객체를 넣는다.
그러면 request 속성안에 vo라는게 생기고 vo 안에는 아까 입력한 데이터들이 있다.
그리고 HTML 부분에는 포워딩을한다.
포워딩은 결과 페이지를 이 파일 하나에서 끝내지 않고 다른 파일로 넘긴다는 뜻
(변수나 객체들도 같이 넘김)
그리고 넘기면서 jsp param(파라미터 / 변수) 에 다시 city라는 이름에 서울 이라는 값을 넣어준다.
그리고 마지막 세번째 jsp파일이 이제 결과창이 되는데 여기서는 기존에 받아왔던 값들을 출력만 하면 된다.
한글 깨질 수 있으니까 <% request.setCharacterEncoding("utf-8"); %> 꼭 써준다.
그리고 이제 받아온 변수들을 HTML 구문에 <%= 표현식으로 사용 하면되는데 이때 EL 을 사용하게 되면
<%= 표현식을 사용하지 않아도 출력이 된다.
<%=city %> 이게 EL로 표현하면 ${param.city} 가 된다.
아까 입력했던 vo 객체는 가져오기 위해서는 여기서 User 객체(아까 자바에서 만든 import도 해야함)를 또 만들고
request의 .getAttribute를 사용해서 가져와야하는데 다운 캐스팅도 해야한다 (User)
그리고 city의 값도 가져오려면 리퀘스트의 겟파라미터로 가져와야 사용이 가능함.
이제 User의 객체를 만들었으면 자바에서 하듯이 <%= vv.getName() %> 이렇게 이름을 가져 올 수 있다.
하지만 EL 구문을 사용하면 위의 과정이 필요없이 그냥 바로 ${vo.name}을 하면 출력이 됨.
JSTL은 내가 만드는 태그를 의미함.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <% request.setCharacterEncoding("utf-8"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <!-- form 태그에서 action 생략하면 자기 자신의 주소가 주소가 됨 --> <form method="post"> <p> <input type="text" name="num" placeholder="숫자" required="required" pattern="\d+"> <button type="submit">check</button> </p> </form> <!-- c:if 태그는 조건이 참일 경우만 실행하며, else 구문은 존재 안함 --> <c:if test="${not empty param.num }"> <p> ${param.num } : ${param.num % 2 == 0 ? "짝수" : "홀수" } </p> </c:if> <hr> <c:if test="${not empty param.num }"> <p> <c:if test="${param.num%2==0 }"> 짝수 </c:if> <c:if test="${param.num%2==1 }"> 홀수 </c:if> </p> </c:if> <hr> </body> </html>커스텀 태그를 사용하기위해 WEB-INF/lib/에 커스텀 태그 파일을 넣는다.
그리고 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
이렇게 맨위에 추가를 해줘서 커스텀 태그를 적용 시킨다.
그리고나면 커스텀 태그인 <c: 를 사용 할 수 있다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>c:forEach - 반복 구문</h3> <form action="" method="post"> <p> <input type="text" name="num" placeholder="숫자" required="required" pattern="\d+"> <button type="submit">check</button> </p> </form> <hr> <c:if test="${not empty param.num }"> <p> ${param.num } 단</p> <c:forEach var="n" begin="1" end="9" step="1"> <!-- step은 증가분임 생략하면 1임 --> ${param.num } * ${n } = ${param.num * n }<br> </c:forEach> </c:if> </body> </html>
forEach를 사용하면 var로 변수지정 begin으로 시작점 지정 end로 끝나는 지점 설정 step으로 몇씩 증가할지 지정
해서 forEach 안에 있는 내용을 반복 시킬 수 있다.
for문과 비슷하다.
<%@page import="java.util.ArrayList"%> <%@page import="ch10.user.User"%> <%@page import="java.util.List"%> <%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <% request.setCharacterEncoding("utf-8"); List<User> list = new ArrayList<User>(); list.add(new User("홍길동", 20, "010-1111-1111")); list.add(new User("김자바", 21, "010-2222-1111")); list.add(new User("오라클", 19, "010-3333-1111")); list.add(new User("서블릿", 17, "010-4444-1111")); list.add(new User("너자바", 15, "010-5555-1111")); request.setAttribute("list", list); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <jsp:forward page="ex07_ok.jsp"/> </body> </html><%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <% request.setCharacterEncoding("utf-8"); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>forEach</h3> <p>forEach와 EL을 이용한 출력</p> <c:forEach var="vo" items="${list }"> <p>${vo.name } | ${vo.age } | ${vo.tel }</p> </c:forEach> <hr> <p>반복 상태 확인</p> <!-- index= 0부터 순서, count = 1부터 순서, first 처음이면 true, last 마지막이면 true --> <c:forEach var="vo" items="${list }" varStatus="status"> <p> ${vo.name } | ${vo.age } | ${vo.tel } | ${status.index } | ${status.count } | ${status.first } | ${status.last } </p> </c:forEach> </body> </html>이번에는 리스트를 만들어서 리스트에 값들을 넣고 포워딩해서 다른 파일에서 결과를 본다.
forEach 옵션에 items를 사용해서 여기다 EL구문을 통해 ${list} 아까 만든 리스트 객체를 넣어주고
forEach 구문 안에서 출력 하면 된다.
반응형'프로그래밍 > JSP' 카테고리의 다른 글
JSP - 커스텀 태그 만들기 (0) 2021.11.11 JSP - 게시판 페이징 paging (0) 2021.10.18 JSP - 달력 (0) 2021.10.14 JSP - Parameter 파라미터 전송하기 (0) 2021.10.12 JSP - 전송 방식의 차이 (GET / POST) (0) 2021.10.11
