UIUX _국비과정 0701 [모델 2 방식, JSTL]

백만두 2024. 7. 11. 09:06

2024. 7. 11. 09:06

MVC2방식으로 게시판 구성하기에 앞서

MVC란?

MVC는 Model-View-Controller의 약자로, 소프트웨어 설계 패턴 중 하나입니다. 이 패턴은 애플리케이션을 세 가지 역할로 분리하여 개발과 유지 보수를 효율적으로 수행할 수 있도록 돕습니다. Model은 데이터와 비즈니스 로직을 처리하며, View는 사용자 인터페이스를 담당하고, Controller는 Model과 View 사이의 상호작용을 관리합니다.

EL → jsp에서 기존 표현식을 대체, 자체적으로 출력기능이 있다.

(자바 서블릿에서는 사용X)

${표현식(변수, 수식, 메소드)}

영역객체에서 데이터(속성) 읽어오기

ImplicitObjMain.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    pageContext.setAttribute("scopeValue", "페이지 영역");
    request.setAttribute("scopeValue", "레퀘스트 영역");
    session.setAttribute("scopevalue", "세션 영역");
    application.setAttribute("scopevalu", "어플리케이션 영역");
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>각 영역에 지정된 속성 읽기</h3>
페이지 영역 : <%= pageContext.getAttribute("scopeValue") %>
<p>페이지 영역 : ${pageScope.scopeValue }</p>
<p>리퀘스트 영역 : ${requestScope.scopeValue }</p>
<p>세션 영역 : ${sessionScope.scopeValue }</p>
<p>어플리케이션 영역 : ${applicatioScope.scopeValue }</p>

<h3>영역 지정 없이 속성 읽기</h3>
<p>${scopeValue }</p> <!-- 최초로 발견된 영역에서 읽어온다, 작은 범위에서 큰 범위로 값을 조회 -->
</body>
</html>

파라메터 받기

FormSubmit.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>
<h2>폼값 전송하기</h2>
    <form name="frm" method="post" action="FormResult.jsp">
        이름 : <input type="text" name="name" /><br />
        성별 : <input type="radio" name="gender" value="Man" />남자
               <input type="radio" name="gender" value="Woman" />여자<br />
        학력 :
            <select name="grade">
                <option value="ele">초딩</option>
                <option value="mid">중딩</option>
                <option value="high">고딩</option>
                <option value="uni">대딩</option>
            </select><br />
        관심 사항 : 
            <input type="checkbox" name="inter" value="pol" />정치
            <input type="checkbox" name="inter" value="eco" />경제
            <input type="checkbox" name="inter" value="ent" />연예
            <input type="checkbox" name="inter" value="spo" />운동<br />
        <input type="submit" value="전송하기" />
    </form>
</body>
</html>

FormResult.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>
	<h3>EL로 폼값 받기</h3>
	<ul>
		<li>이름 : ${param.name }</li>
		<li>성별 : ${param.gender }</li>
		<li>학력 : ${param.grade }</li>
		<li>관심사항 : 
		${paramValues.inter[0] } 
		${paramValues.inter[1] }
		${paramValues.inter[2] } 
		${paramValues.inter[3] }
		</li>
	</ul>
</body>
</html>

EL에서 컬렉션 데이터 사용하기

CollectionUse.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page import="java.util.*"%>
<%@page import="common.Person"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>List 컬렉션</h2>
	<%
	List<Object> aList = new ArrayList<>();
	aList.add("청해진");
	aList.add(new Person("장보고", 22));
	pageContext.setAttribute("Ocean", aList);
	
	// aList.get(0);
	%>
	
	<ul>
	<li>0번째 요소 : ${Ocean[0] }</li> <!-- aList.get(0); -->
	<li>1번째 요소 : ${Ocean[1].name }, ${Ocean[1].age }</li> <!-- el은 값을 영역객체에서 가지고 온다 -->
	<li>2번째 요소 : ${Ocean[2] }</li> <!-- 값이 없으면 무시한다 -->
	</ul>
	

	<h2>Map 컬렉션</h2>
	<%
	Map<String, String> map = new HashMap<String, String>();
	map.put("한글", "훈민정음");
	map.put("Eng", "English");
	pageContext.setAttribute("king", map);
	
	// map.get("한글");
	%>
	
	<ul>
	 <li>영문 key : ${king["Eng"]}, ${king['Eng']}, ${king.Eng}</li> <!-- map.get("한글"); -->
     <li>한글 key : ${king["한글"]}, ${king['한글']}</li>
	</ul>

</body>
</html>

EL 연산

Operator1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    int num1 = 3;
    pageContext.setAttribute("num2", 4);
    pageContext.setAttribute("num3", "5");
    pageContext.setAttribute("num4", "8");
    %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
변수 출력 : ${num1 } <br>
영역 변수 출력 : ${num2 } <br>
변수에 값 할당 : ${num1 = 7 } <br>

${num1 + num2}<br>
${num3 / num4}<br>
${num3 div num4}<br>

<%-- ${num2 + "이십"}<br> EL은 문자열 간 '+'연산자로 결합이 되지 않는다. 오류남! --%>

num4 > num3 : ${num4 > num3}<br>
num4 > num3 : ${num4 gt num3}<br>
num4 < num3 : ${num4 lt num3}<br>
num4 == num3 : ${num4 eq num3}<br>

</body>
</html>

❗️ 자바 문법에서 선언한 변수를 그대로 사용할 수 없다.

🍀 JSTL

자바라이브러리 파일 받는 곳 : https://mvnrepository.com/

HTML코드와 잘 어울리게 코딩을 하기 위해 JSTL의 EL사용

태그 라이브러리 : Core 주로 사용, l18N 가끔 사용

Core (기본)

변수 : remove, set

흐름제어 : choose(when, otherwise), forEach, forTokens, if

if, choose 태그

if.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ 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>
	<c:set var="number" value="77" />
	<c:set var="String" value="JSP" />

	<c:if test="${number mod 2 eq 0}" var="result">
		<!-- 조건의 결과를 변수로 받는다 -->
${number}는 짝수입니다. <br>
	</c:if>

	result : ${result }
	<br>

	<h4>choose 태그로 홀짝 판단하기</h4>

	<c:choose>
		<c:when test="${number mod 2 eq 0}">
${number}는 짝수입니다.
</c:when>

		<c:otherwise>
${number}는 홀수입니다.
</c:otherwise>

	</c:choose>

	<c:choose>
		<c:when test="${number >= 90 }">
A학점
</c:when>
		<c:when test="${number ge 80 }">
B학점
</c:when>
		<c:when test="${number >= 70 }">
C학점
</c:when>
		<c:otherwise>
F학점
</c:otherwise>
	</c:choose>
</body>
</html>

반복문

ForEachNomal.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import = "java.util.*" %>
<%@ page import="common.Person"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:forEach begin="1" end="3" step="1" var="i">
		<!-- i가 1에서 시작, 3까지 돌고 1씩 증가 -->

		<p>반복 ${i}입니다.</p>
	</c:forEach>

	<table border="1">
	
	<c:forEach begin="3" end="5" var="i" varStatus="loop">
		<tr>
		<!-- loop는 변수명, 정해진 이름이 아니다 -->
			<td>count : ${loop.count }</td>
			<td>index : ${loop.index }</td>
			<td>current : ${loop.current }</td>
			<td>first : ${loop.first }</td>
			<td>last : ${loop.last }</td>
		</tr>
		</c:forEach>
		
	</table>
	
	<%
	String[] rgba= {"Red", "Green", "Blue", "Black"};
	%>
	
	<c:forEach items="<%=rgba %>" var="c">
	<span style="color:${c}">${c}</span>
	</c:forEach>
	
	<h4>List 컬렉션 사용하기</h4>
	<%
	LinkedList<Person> lists = new LinkedList<Person>();
	lists.add(new Person("맹사성", 34));
	lists.add(new Person("장영실", 99));
	lists.add(new Person("신숙수", 30));
	%>
	
	<c:set var="list" value="<%=lists%>"/>
	<c:forEach item="${lists }" var="list">
	이름 : ${list.name}, 나이: ${list.age }
	</c:forEach>
	
	<h4>Map 컬렉션 사용하기</h4>
	
	<%
	Map<String,Person> maps = new HashMap<String, Person>();
	maps.put("1st", new Person("멩사성", 34));
	maps.put("2st", new Person("장영실", 44));
	maps.put("3st", new Person("신숙주", 54));
	%>
	
	<c:set var="maps" value="<%=maps%>"/>
	<c:forEach items="${maps}" var="map">
	key => %{map.key}<br>
	Value => 이름: ${map.value.name}, 나이: ${map.value.age}
	</c:forEach>
	
</body>
</html>

내일은,,

파일 업로드기능과 다운로드 기능 구현

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

'2024_UIUX 국비 TIL' 카테고리의 다른 글

UIUX _국비과정 0703 [서블릿부터 MVC방식까지] (1)	2024.07.22
UIUX _국비과정 0702 [파일 업로드, 다운로드 기능 구현] (0)	2024.07.19
UIUX _국비과정 0628 [게시판_페이징] (0)	2024.07.10
UIUX _국비과정 0625 ~ 27 [게시판] (0)	2024.07.10
UIUX _국비과정 0624 [JSP 세션의 역할, 액션태그] (0)	2024.07.10

개발(자)되어가는 일지