BackEnd/WEB

JSTL_국비_DAY57

Leo.K 2022. 5. 20. 15:46

EL : 데이터를 화면 상에 간결하게 표현할 때 사용

JSTL : 조건이나 반복의 기술을 문법을 태그 형식으로 사용한다. 모든 값의 표현은 EL로 구현한다. (Tag형식의 명령어 라이브러리) 

JSTL로 반복문 사용하기 

  1. <% %>을 사용하여 JSP파일이 실행되어 서블릿으로 변환될 때, _jspService영역에 들어가도록 변수 및 자료구조를 선언한다. 
  2. 변수 및 자료구조에 데이터를 넣는다. 
  3. 4가지 영역(pageContext, request, session, application) 중 한 곳에 데이터를 (setAttribute)저장한다. 

[속성 정보] 

JSTL문법의 모든 값의 표현법은 반드시 EL로 사용한다고 했다. EL을 사용하기 위해서는 상수를 제외한 모든 변수는 반드시 네가지 스코프영역 중 한 곳에 값을 저장해야 한다. 하지만 기본적으로 JSTL에서 사용하는 아래 표의 모든 속성에 대한 임시 변수 및 임시객체는 pageScope영역에 저장된다. 

속성 설명
var 사용할 변수명(필수:o, 기본값:x)
items Collection 객체(List, Map, Set, Array)(필수 : o)
begin 반복 시작index, 정의되지 않을 경우 기본값 0
end 반복의 끝 index, 정의되지 않을 경우 기본값은 마지막 index
step 증감값(생략하면 1이다)
varStatus(객체) 반복의 상태를 저장한다. index(0 base)와 count(1 base)의 속성을 가지고 있다. 

 

[varStatus 객체속성]

속성 리턴값 설명
index int items에 정의한 항목을 가리키는 index번호이다. 0부터 시작한다. 
컬렉션의 인덱스를 참조하기 위함
count int 현재 반복이 몇 번째인지 나타낸다. 1부터 시작한다.
반복의 횟수를 나타내기 위함
first boolean 현재 반복이 첫번째인지 여부
last boolean 현재 반복이 마지막인지 여부
current int 현재 반복의 첨자에 해당하는 값을 가져온다.

 

[EX1. JSTL Core라이브러리 사용해보기]

더보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!-- JSTL 라이브러리 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<hr>
    JSP ScriptLet이용
<hr>
<%
    for(int i=0; i<5;i++){
%>
    안녕
<%
    }
%>
 
 
<hr>
    JSTL 이용(IF문)
<hr>
<!-- 
    begin             : 시작값
    end               : 끝값
    step              : 증감값
    varStatus(객체) : 변수의 상태 저장,         index(제로베이스), count(원베이스)의 속성을 가진다. 
    이러한 임시객체나 임시 변수들은 pageScope영역에 저장되어 있다.
    JSTL에서 사용하는 모든 임시 변수, 임시 객체들은 pageContext에 저장한다.
    
    상수를 제외하고는 EL 표현식으로 사용하려면 반드시 Scope영역에 값을 저장하고 사용해야 한다.
 -->
<c:forEach begin="1" end="5" step="1" varStatus="i">
    <!-- 조건문은 else 없이 if문만 존재한다. JSTL내에 모든 값의 표현은 반드시 EL로 표현한다. -->
    <c:if test="${i.count%2==1 }">
    <font color='red'>${pageScope.i.count }  : 안녕</font><br>
    </c:if>
    
    <c:if test="${i.count%2==0 }">
    <font color='blue'>${pageScope.i.count } : 안녕</font><br>
    </c:if>
</c:forEach>
 
<hr>
    JSTL 이용(CHOOSE문)
<hr>
<c:forEach begin="1" end="5" step="1" varStatus="i">
    <c:choose>
        <c:when test="${i.count%2==1 }">
            <font color='red'>${pageScope.i.count }  : 안녕</font><br>
        </c:when>
        
        <c:otherwise>
            <font color='blue'>${pageScope.i.count } : 안녕</font><br>
        </c:otherwise>    
    </c:choose>
</c:forEach>
 
</body>
</html>
 cs

 

[EX2. JSTL로 컬렉션 출력하기]

더보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<%@page import="java.util.Properties"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Set"%>
<%@page import="java.util.HashSet"%>
<%@page import="javax.naming.ldap.HasControls"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
 
<%    /* jspService영역의 business부분에 선언된다.  */
    String [] fruit_array = {"사과", "참외", "수박", "딸기", "포도"};
 
    //List 
    List<String> sido_list = new ArrayList<String>();
    sido_list.add("서울");
    sido_list.add("경기");
    sido_list.add("인천");
    sido_list.add("대전");
    sido_list.add("강원");
    
    //Properties[주로 문자열, 텍스트 위주로 저장]
    Properties prop = new Properties();
    prop.setProperty("driver", "oracle.jdbc.driver.OracleDriver");
    prop.setProperty("url", "jdbc:oracle:thin:@localhost:1521:xe");
    prop.setProperty("user", "scott");
    prop.setProperty("pwd", "tiger");
    
    
    //Map[주로 객체 위주 저장 ]
    Map<String,String> engMap = new HashMap<String,String>();
    engMap.put("one", "하나");
    engMap.put("two", "둘");
    engMap.put("three", "셋");
    engMap.put("four", "넷");
    engMap.put("five", "다섯");
    
    //Set
    Set<String> colorSet = new HashSet<String>();
    colorSet.add("Red");
    colorSet.add("Green");
    colorSet.add("Blue");
    colorSet.add("Yellow");
    colorSet.add("Cyan");
 
    //pageContext값 넣기 -> EL표현식으로 표현하기 위함
    //    key: Scope영역에 저장할 키이름(내부에서는 이 이름으로 사용한다.)    
    //  value : 실 데이터이름(실제 값을 저장하고 있는 컬렉션의 참조 변수명)
    pageContext.setAttribute("fruit", fruit_array);
    pageContext.setAttribute("colorSet", colorSet);
    pageContext.setAttribute("sido_list", sido_list);
    pageContext.setAttribute("engMap", engMap);
    request.setAttribute("prop", prop);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
<hr>
    forEach로 Array출력하기
<hr>
    <ul>
        <!-- for(String fruit : fruit_array) 개선루프 형식 
             컬렉션 fruit의 값을 임시변수 fr에 넣는다. 
             이때 생성되는 임시변수 fr은 pageScope영역에 저장된다.
             varStatus="i"     i.index(0 base, 첨자)        i.count(1 base, 반복횟수)
             items="배열 or Collection(Set/List) or Map"
        -->
        <c:forEach var="fr" items="${fruit }" varStatus="i">
            <li>${i.index} (${i.count}) [${i.current}] : ${pageScope.fr }</li>
        </c:forEach>
    </ul>
 
 
<hr>
    forEach로 Set출력하기
<hr>
    <ul>
        <!-- for(String color : colorSet) 동일 -->
        <c:forEach var="color" items="${colorSet }" varStatus="i">
            <li>${i.index} (${i.count}) [${i.current}] : ${pageScope.colorSet }</li>
        </c:forEach>
    </ul>
    
<hr>
    forEach로 List출력하기
<hr>
    <ul>
        <!-- for(String sido : sido_list) 동일 -->
        <c:forEach var="sido" items="${sido_list }" varStatus="i">
            <li>${i.index} (${i.count}) [${i.current}] : ${pageScope.sido }</li>
        </c:forEach>
    </ul>
    
    
 
<hr>
    forEach로 Map 출력하기 
    <ul>
        <c:forEach items="${engMap }" var="word" varStatus="i">
            <li>영어로 [${word.key }]는  [${word.value }]입니다.</li>
        </c:forEach>
    </ul>
<hr>
 
 
<hr>
    forEach로 Properties 출력하기 
    <ul>
        <c:forEach items="${prop }" var="p" varStatus="i">
            <li>${p.key }의 정보는 ${p.value }입니다.</li>
        </c:forEach>
    </ul>
<hr>
</body>
</html>
 cs

 

[EX3. JSTL을 사용하여 사용자 정의 객체 VO 출력하기]

더보기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<%@page import="java.util.ArrayList"%>
<%@page import="vo.PersonVo"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
<%
    //DB와 연동할 때 이러한 구조는 반드시 동일하게 흘러간다.
    List<PersonVo> p_list = new ArrayList<PersonVo>();
    p_list.add(new PersonVo("일길동", 20, "010-1-1234"));
    p_list.add(new PersonVo("이길동", 21, "010-2-1234"));
    p_list.add(new PersonVo("삼길동", 22, "010-3-1234"));
    p_list.add(new PersonVo("사길동", 23, "010-4-1234"));
    p_list.add(new PersonVo("오길동", 24, "010-5-1234"));
    
    pageContext.setAttribute("p_list", p_list);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 
<style type="text/css">
#container{
    width: 500px;
    border: 5px dashed red;
    margin: 0 auto;
    margin-top: 100px;
}
 
td, th{
    text-align: center;
}
</style>
</head>
<body>
    <div id="container">
        <table class="table table-striped table-hover">
            <tr>
                <th>반복횟수</th>
                <th>인덱스값</th>
                <th>이름</th>
                <th>나이</th>
                <th>전화번호</th>
            </tr>
            
            <!-- 데이터 출력하는 부분 -->
            <!-- for(PersonVo vo : p_list) -->
            <c:forEach items="${p_list }" var="vo" varStatus="i">
                <tr>
                    <td>${i.count }</td>
                    <td>${i.index }</td>
                    <td>${vo.name }</td>    <!-- 실제로는 vo객체에 있는 getName()메소드를 호출한다. -->
                    <td>${vo.age }</td>
                    <td>${vo.tel }</td>
                </tr>
            </c:forEach>
        </table>
    </div>
</body>
</html>
 cs

다이나믹 웹 프로젝트로 프로젝트를 진행하고자 할 때 설정해주어야 할 설정 사항

  1. 톰캣 서버 추가 
    1. 필자의 경험에 근거해 말하자면 혹시나 서버를 추가하지 않고, 다이나믹  프로젝트를 만들어서 서블릿 파일을 만들면 에러가 난다. 상당히 큰 당황을 했지만, 서버를 그냥 단순히 추가만 하면 적용이 되긴 하지만 그렇지 안을 때도 있는데 그럴 때 해결할 수 있는 방안을 알려주겠다. 
    2. 프로젝트 우클릭 -> buildPath -> Library -> add library -> server runtime -> 서버를 선택한다.(없다면 아직 서버가 추가 되지 않은 상태이므로 서버를 추가하도록 위의 방법을 다시 시도해보면 될 것이다.)
  2. 다이나믹 웹 프로젝트 생성 
  3. java와 servlet버전 및 컴파일러 환경 설정 
  4. html, css, jsp 인코딩 환경 설정 (utf-8)
  5. jdbc드라이버 등록 -> WEB-INF 하위 lib폴더 
저작자표시

'BackEnd > WEB' 카테고리의 다른 글

DBCP_웹DB_국비_DAY59  (0) 2022.05.24
국비_DAY58  (0) 2022.05.23
EL_국비_DAY56  (0) 2022.05.19
JSP_국비_DAY55  (0) 2022.05.18
서블릿_국비_DAY54  (0) 2022.05.17
Leo.K | To become a cooler Developer
프로필사진

티스토리툴바