반응형

# MVC03_11 MVC03 JSTL 적용

## JSTL 실습_반복문에서 ArrayList 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@ page import="java.util.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	MemberVO vo = new MemberVO();
	vo.setNum(1);
	vo.setId("abcde");
	vo.setName("뽀로로");
	vo.setEmail("qhqhqh@naver.com");

	List<MemberVO> list = new ArrayList<MemberVO>();
	list.add(vo);
	list.add(vo);
	list.add(vo);
	list.add(vo);
	list.add(vo);
	
	request.setAttribute("list", list);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>번호</td>
			<td>아이디</td>
			<td>이름</td>
			<td>이메일</td>
		</tr>
		<c:forEach var="vo" items="${list}">
			<tr>
				<td>${vo.num}</td>
				<td>${vo.id}</td>
				<td>${vo.name}</td>
				<td>${vo.email}</td>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

## MVC03 에 JSTL 적용1_memberList.jsp

  • 기존 코드 주석 or 제거 후 JSTL로 적용
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@ page import="java.util.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	// JSTL 사용 전.
	// ArrayList<MemberVO> list = (ArrayList<MemberVO>) request.getAttribute("list");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<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.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
<script>
	function deleteFn(num) {
		location.href="memberDelete.do?num=" + num;
	}
</script>
</head>
<body>
[MVC03 예제 - Controller + View]
<table class="table table-bordered">
	<tr>
		<td>번호</td>
		<td>아이디</td>
		<td>비밀번호</td>
		<td>이름</td>
		<td>나이</td>
		<td>이메일</td>
		<td>전화번호</td>
		<td>삭제</td>
	</tr>
	<c:forEach var="vo" items="${list}">		
		<tr>
			<td>${vo.getNum()}</td>
			<td><a href="memberContent.do?num=${vo.getNum()}">${vo.getId()}</a></td>
			<td>${vo.getPass()}</td>
			<td>${vo.getName()}</td>
			<td>${vo.getAge()}</td>
			<td>${vo.getEmail()}</td>
			<td>${vo.getPhone()}</td>
			<td><input type="button" value="삭제" class="btn btn-warning" onclick="deleteFn(${vo.getNum()})" /></td>
		</tr>
	</c:forEach>
	<tr>
		<td colspan="8" align="right"><input type="button" value="회원가입" class="btn btn-primary" onclick="location.href='member/memberRegister.html'"/></td>
	</tr>
</table>
</body>
</html>

## MVC03 에 JSTL 적용2_memberContent.jsp

  • 기존 코드 주석 or 제거 후 JSTL로 적용
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	// JSTL 사용 전
	// MemberVO vo = (MemberVO)request.getAttribute("vo");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<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.5.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js'></script>
</head>
<body>
<form action="memberUpdate.do" method="post">
<input type="hidden" name="num" value="${vo.getNum()}"/>
	<table border="1" class="table table-bordered">
	<c:if test="${vo != null}">
		<tr>
			<td colspan="2">${vo.getName()} 회원의 상세보기</td>
		</tr>
		<tr>
			<td>번호</td>
			<td>${vo.getNum()}</td>
		</tr>
		<tr>
			<td>아이디</td>
			<td>${vo.getId()}</td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td>${vo.getPass()}</td>
		</tr>
		<tr>
			<td>이름</td>
			<td>${vo.getName()}</td>
		</tr>
		<tr>
			<td>나이</td>
			<td><input type="text" name="age" value="${vo.getAge()}" /></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="text" name="email" value="${vo.getEmail()}" /></td>
		</tr>
		<tr>
			<td>전화번호</td>
			<td><input type="text" name="phone" value="${vo.getPhone()}" /></td>
		</tr>
	</c:if>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="수정하기" class="btn btn-primary" />
				<input type="reset" value="취소" class="btn btn-warning" />
				<input type="button" value="리스트" onclick="location.href='/MVC03/memberList.do'" class="btn" />
			</td>
		</tr>
	</table>
</form>
</body>
</html>
반응형
반응형

# MVC03_10 JSTL 활용하기_ArrayList

## JSTL 실습_foreach

  • 프로젝트 > WebContent > view > jstl05.jsp 생성
  • Controller 와 JSP 를 별도로 만들어야 하지만 하나의 페이지에서 실습.
  • items는 여러개의 형태를 받을 때 사용.
  • items에는 변수(var) 또는 속성이 올 수 있다.
  • 아래처럼 작업 시 str을 그대로 items에서 사용할 수 없고, setAttribute를 하여 속성으로 받아서 사용 가능하다.
str 그대로 items 에서 사용 x
<%	
    String[] str = {"사과", "바나나", "포도", "귤", "오렌지"};
%>


아래와 같이 setAttribute 진행 시 사용 가능
<%	
    String[] str = {"사과", "바나나", "포도", "귤", "오렌지"};
	request.setAttribute("str", str);
%>
  • 아래와 같이 사용 가능하다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	// Controller 에서 JSP로 데이터를 넘긴다는 가정하에 작업 수행.
	// Controller -> JSP
	String[] str = {"사과", "바나나", "포도", "귤", "오렌지"};
	request.setAttribute("str", str);	// 객체 바인딩
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:forEach var="f" items="${str}">
		${f}<br>
	</c:forEach>	
</body>
</html>

## JSTL 실습_ArrayList

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	List<String> list = new ArrayList<String>();
	list.add("Python");
	list.add("Java");
	list.add("Node.js");
	list.add("C++");
	list.add("JQuery");
	request.setAttribute("list", list);		// 객체 바인딩
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:forEach var="sw" items="${list}">
		${sw}<br>
	</c:forEach>
</body>
</html>

## JSTL 실습_객체 데이터(vo) 출력

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.bit.model.*" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	MemberVO vo = new MemberVO();
	vo.setNum(1);
	vo.setId("abcde");
	vo.setName("뽀로로");
	vo.setEmail("qhqhqh@naver.com");
	request.setAttribute("vo", vo);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>번호</td>
			<td>아이디</td>
			<td>이름</td>
			<td>이메일</td>
		</tr>
		<tr>
			<td>${vo.num}</td>
			<td>${vo.id}</td>
			<td>${vo.name}</td>
			<td>${vo.email}</td>
		</tr>
	</table>
</body>
</html>
반응형
반응형

# MVC03_08 JSTL과 EL이란 무엇인가

  • JSP는 HTML 태그와 프로그래밍적 요소(% %) 등을 섞어서 하나의 페이지를 만드는 방법이다.
  • 보통 HTML은 디자이너가 프로그래밍적 요소는 개발자가 작업하는 등 협업하는 경우가 존재. 그래서 가급적이면 디자이너를 고려해서 코딩을 해주는게 좋다.
  • 프로그래밍적인 요소를 어떻게 해야 태그적인 요소로 사용할 수 있을까? 태그적인 요소를 사용할 경우 디자이너가 받아들이기 수월하여 협업에 도움을 줄 수 있고, 빠른 개발도 가능하게 해준다.

## JSTL API

  • jar 파일 다운로드 후 프로젝트 > WebContent > WEB-INF > lib 에 추가

### JSTL 사용방법

  • 프로젝트 > WebContent > view 에 jstl01.jsp 생성
  • jstl 사용을 위해 jsp에 아래 taglib 설정. 아래 taglib uri에서 Ctrl + Space 클릭 시 다양한 태그 확인 가능.
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  • prefix core tag : if문, for문, switch문 등등 사용 위한 태그로 가장 많이 사용한다.
  • prefix fmt tag : 날짜, 통화, 시간 등의 포맷을 지정해서 작업을 위한 태그
  • prefix sql tag, xml tag 등등 존재
  • jstl 변수 선언은 아래와 같이 진행
<c:set var="cnt" value="10"/>

var 부분은 변수.
value 부분은 값.
  • jstl 출력은 EL 표기법 사용.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cnt" value="10"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	${cnt}		// EL표기법을 사용한 출력
    ${cnt * 10}
    ${cnt > 10}
</body>
</html>

## EL 표기법

${식} 으로 표시

 

# MVC03_09 JSTL Core Tag

## JSTL 실습 위한 JSP 생성_1

  • 프로젝트 > WebContent > view 에 jstl02.jsp 생성

### JSTL if문

  • JSTL if문은 아래와 같이 생성, test 부분에는 조건을 넣어준다.
<c:if test="${cnt % 2 == 0}"></c:if>

JSTL은 else를 처리하는 부분이 없어 if문을 또 사용 해야한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cnt" value="7"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:if test="${cnt % 2 == 0}">
		짝수 입니다.	
	</c:if>
	<c:if test="${cnt % 2 != 0}">
		홀수 입니다.	
	</c:if>
</body>
</html>

## JSTL 실습 위한 JSP 생성_2

  • 프로젝트 > WebContent > view 에 jstl03.jsp 생성

### JSTL Switch문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cnt" value="7"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:choose>
		<c:when test="${cnt % 2 == 0}">
			짝수 입니다.
		</c:when>
		<c:when test="${cnt % 2 != 0}">
			홀수 입니다.
		</c:when>
		<c:otherwise>
			일치하는 when 절이 없는 경우 실행된다.
		</c:otherwise>
	</c:choose>
</body>
</html>

 

 

## JSTL 실습 위한 JSP 생성_3

  • 프로젝트 > WebContent > view 에 jstl04.jsp 생성

### JSTL 반복문

  • var 부분은 변수, begin은 시작값, end는 종료값, step는 증감값
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="cnt" value="7"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<c:forEach var="i" begin="1" end="5" step="1">
		야호~<br>
	</c:forEach>
</body>
</html>

 

## 정리

  • var로 되어있으면 request.setAttribute / EL은 getAttribute로 빼내오는 것이 내부적으로 진행.
반응형
반응형

# MVC03_07 MVC 회원관리 흐름도

  • MVC03 이 Basic 이고, MVC03에서 변형된게 MVC04
  • MVC03 의 문제점은 Controller의 수가 많다는 것. (요청에 따라 다른 컨트롤러로 대응)

 

반응형

+ Recent posts