본문 바로가기
프로그래밍/JSTL

2021년 11월 11일 - JSTL 기초

by 철제백조 2021. 11. 11.

☆ JSTL

 

jstl-1.2.jar
0.40MB
standard.jar
0.38MB

 

 

 

 

시작에 앞서 두 파일을 lib 폴더 안에 넣어주며, 동시에 위에 다음을 선언해준다.

 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

 

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ 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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<title>Insert title here</title>
</head>
<body>

	<h2>JSTL 연산자 연습</h2>
	<!-- jstl 변수선언 -->
	<c:set var="su1" value="7"/>
	<c:set var="su2" value="4"/>

	<b>두 변수값 출력(su1:${su1},su2:${su2})</b>
	
	<table class="table table-bordered" style="width: 400px;">
		<tr>
			<th width="250">\${su1+su2}</th>
			<td>
				${su1+su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1-su2}</th>
			<td>
				${su1-su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1*su2}</th>
			<td>
				${su1*su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1/su2}</th>
			<td>
				${su1/su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1 div su2}</th>
			<td>
				${su1 div su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1%su2}</th>
			<td>
				${su1%su2}
			</td>
		</tr>
		
		<tr>
			<th width="250">\${su1 mod su2}</th>
			<td>
				${su1 mod su2}
			</td>
		</tr>
		
		<tr>
			<th>su1 1증가</th>
			<td>
				증가전 su1:<c:out value="${su1}"/><br>
				<c:set var="su1" value="${su1+1}"/>
				증가후 su1: ${su1}
			</td>
		</tr>												
	</table>

</body>
</html>

 

 

 

 

☆ JSTL fmt

 

 

 

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ 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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<title>Insert title here</title>
</head>
<body>

	<!-- 변수선언 -->
	<c:set var="name" value="송혜교"/>
	<c:set var="age" value="25"/>
	<c:set var="today" value="<%=new Date()%>"/>
	
	<!-- 변수출력1 -->
	<h2>이름: <c:out value="${name}"/></h2>

	<!-- 변수출력2 -->
	<h2>이름: ${name}</h2>
	<h2>나이: ${age}</h2>
	<h2>오늘날짜: ${today}</h2>
	
	<!-- pattern을 이용한 fmt 날짜 형식 -->
	<pre>
		<fmt:formatDate value="${today}" pattern="yyyy-MM-dd HH:mm"/>
		<fmt:formatDate value="${today}" pattern="yyyy-MM-dd a hh:mm"/>
		<fmt:formatDate value="${today}" pattern="yyyy-MM-dd HH:mm EEE"/>
		<fmt:formatDate value="${today}" pattern="yyyy-MM-dd HH:mm EEEE"/>
	</pre>
	
	<c:set var="money" value="6789000"/>
	<c:set var="num1" value="123.456789"/>
	
	<!-- jstl에서 숫자출력 양식 -->
	<pre>
		${money}
		${num1}
		
		<!-- number: 3자리마다 컴마 -->
		<fmt:formatNumber value="${money}" type="number"/>
		
		<!-- currency -->
		<fmt:formatNumber value="${money}" type="currency"/>
		
		<!-- pattern -->
		<fmt:formatNumber value="${num1}" pattern="0.00"/> <!-- 소수점 두자리 -->
		<fmt:formatNumber value="1.2" pattern="0.00"/> <!-- 0은 값이 없어도 무조건 0출력 -->
		<fmt:formatNumber value="1.2" pattern="0.##"/> <!-- #는 값이 없을 경우 출력안함 -->
				
	</pre>

</body>
</html>

 

 

 

☆ JSTL if문

 

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ 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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>
	
	<fmt:requestEncoding value="utf-8"/>
	
	<form action="ex3_jstl.jsp" method="post">
		<table class="table table-bordered">
			<tr>
				<th bgcolor="orange" width="100">이름</th>
				<td>
					<input type="text" name="irum" class="form-control"
					style="width: 120px;" value="${param.irum}">
				</td>
			</tr>

			<tr>
				<th bgcolor="orange" width="100">나이</th>
				<td>
					<input type="text" name="nai" class="form-control"
					style="width: 100px;" value="${param.nai}">
				</td>
			</tr>

			<tr>
				<th bgcolor="orange" width="100">급여</th>
				<td>
					<input type="text" name="irum" class="form-control"
					style="width: 150px;" value="${param.pay}">
				</td>
			</tr>
			
			<tr>
				<th bgcolor="orange" width="100">가고싶은<br>나라</th>
				<td>
					<input type="text" name="nara" class="form-control"
					style="width: 120px;" value="${param.nara}">
				</td>
			</tr>

			<tr>
				<td bgcolor="orange" colspan="2" align="center">
					<button type="submit" class="btn btn-success">결과확인</button>
				</td>
			</tr>
			
		</table>
	</form>
	
	<hr>
	
	<!-- 이름을 입력할 경우에만 div출력 -->
	<c:if test="${!empty param.irum}">
		<div class="alert alert-info" style="width: 400px; font-size: 1.2em;">
			이름: ${param.irum} <br>
			나이: ${param.nai}세(
			<c:if test="${param.nai>=20}">
				<span style="color: blue;">성인</span>
			</c:if>
			
			<!-- jstl if문에는 else가 없다 -->
			<c:if test="${param.nai<20}">
				<span style="color: magenta;">미성년</span>
			</c:if>			
			)<br>
			급여: <fmt:formatNumber value="${param.pay}" type="currency"/><br>
			가고싶은 나라(이유): ${param.nara}<br>
			<b style="padding-left: 30px;">
			<!-- equal은 사용불가 -->
				<c:choose>
					<c:when test="${param.nara=='프랑스'}">
						프랑스(에펠탑이 보고싶다)
					</c:when>

					<c:when test="${param.nara=='캐나다'}">
						캐나다(로키산맥이 보고싶다)
					</c:when>

					<c:when test="${param.nara=='미국'}">
						미국(뉴욕에서 쇼핑하고 싶다)
					</c:when>
					
					<c:otherwise>
						${param.nara}은 별로 관심이 없다
					</c:otherwise>
				</c:choose>
			</b>
		</div>
	</c:if>

</body>
</html>

 

 

 

☆ JSTL forEach

 

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ 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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>

	<h2>forEach문, forToken문</h2>
	<c:forEach var="a" begin="1" end="10">
		[${a}]&nbsp;
	</c:forEach>
	
	<br>
	
	<c:forEach var="a" begin="1" end="10" step="2">
		[${a}]&nbsp;
	</c:forEach>
	
	
	<%
		String [] mycolor = {"red", "cyan", "blue", "magenta", "gray", "yellow", "orange"};
	%>
	
	<c:set var="mycolor" value="<%=mycolor %>"/>
	
	<table class="table table-bordered" style="width: 300px;">
		<caption><b>전체출력</b></caption>
		<tr>
			<th>index</th>
			<th>count</th>
			<th>color</th>
		</tr>
		
		<c:forEach var="a" items="${mycolor}" varStatus="i">
			<tr align="center">
			 	<td>${i.index}</td>
			 	<td>${i.count}</td>
			 	<td bgcolor="${a}">${a}</td>
			</tr>
		</c:forEach>
	</table>


	<table class="table table-bordered" style="width: 300px;">
		<caption><b>일부만 출력</b></caption>
		<tr>
			<th>index</th>
			<th>count</th>
			<th>color</th>
		</tr>
		
		<c:forEach var="a" items="${mycolor}" begin="2" end="5" varStatus="i">
			<tr align="center">
			 	<td>${i.index}</td>	<!-- 2,3,4,5 -->
			 	<td>${i.count}</td> <!-- 1,2,3,4 -->
			 	<td bgcolor="${a}">${a}</td>
			</tr>
		</c:forEach>
	</table>
	
	<hr>
	
	<c:set var="msg" value="아이폰, 갤럭시 폴드, 모토로라, 아이패드, 맥, 그램"/>
	${msg} <br>
	
	<h2>msg값을 컴마로 구분해서 출력하기</h2>
	<c:forTokens var="s" items="${msg}" delims="," varStatus="i">
		<h3>${i.count}:${s}</h3>
	</c:forTokens>
	
	

</body>
</html>

 

 

 

☆ JSTL request 저장소, scope

 

<%@page import="java.util.ArrayList"%>
<%@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" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<%
	List<String> list = new ArrayList();
	list.add("장미");
	list.add("후리지아");
	list.add("국화");
	list.add("백합");
	list.add("안개꽃");
	
	/* request에 저장 */
	request.setAttribute("list", list);
	
	/* 세션에 id, hp 저장하기 */
	session.setAttribute("id", "angel");
	session.setAttribute("hp", "010-7777-8888");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>

	<h1>request의 list 출력</h1>
	<c:forEach var="s" items="${requestScope.list}" varStatus="i">
		${i.count}: ${s}<br>
	</c:forEach>

	<h1>request의 list 출력_request Scope는 생략가능</h1>
	<c:forEach var="s" items="${list}" varStatus="i">
		${i.count}: ${s}<br>
	</c:forEach>
	
	<h1>세션에 들어있는 아이디와 핸드폰 번호 가져오기</h1>
	아이디: ${sessionScope.id}<br>
	핸드폰: ${sessionScope.hp}<br>
	
	<h1>Token 분리해서 출력</h1>
	<c:set var="msg" value="red, green, blue, cyan, gray, margenta"/>
		<c:forTokens var="s" items="${msg}" delims="," varStatus="i">
			<h4>${i.count}: <b style="color:${s}">${s}</b></h4>
		</c:forTokens>

</body>
</html>

 

 

 

☆ JSTL use bean - DTO

 

 

 

◎ PerDto

 

package data.member;

public class PerDto {

	private String name;
	private String age;
	private String hp;
	private String addr;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAge() {
		return age;
	}
	public void setAge(String age) {
		this.age = age;
	}
	public String getHp() {
		return hp;
	}
	public void setHp(String hp) {
		this.hp = hp;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	
	
}

 

 

 

◎ ex6_jstl.jsp

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>

	<form action="ex6_jstl.jsp" method="post">
		이름: <input type="text" name="name" size="10"><br>
		나이: <input type="text" name="age" size="5"><br>
		핸드폰: <input type="text" name="age" size="5"><br>
		
		<input type="submit" value="서버전송">
	</form>

	<c:if test="${not empty param.name}">
		<jsp:useBean id="dto" class="data.member.PerDto"/>
		<!-- setter 주입 -->
		<jsp:setProperty property="*" name="dto"/>
		
		<pre>
			이름: ${dto.name}
			나이: ${dto.age}
			핸도폰: ${dto.hp}
		</pre>
	</c:if>
</body>
</html>

 

 

 

☆ 모델 2

모델2

로직처리-SERVLET(Model)

디자인,출력:Jsp,Html(View)

 

매핑주소 -> servlet -> 컨트롤러가 리턴받아서 포워드

 

board/list

 

 

 

◎ 테이블

create table mycar(num smallint auto_increment primary key,
carname varchar(20),
carprice int,
carcolor varchar(30),
carguip varchar(30))

 

 

 

◎ CarDto

package data.car;

public class CarDto {
	
	private String num;
	private String carname;
	private String carcolor;
	private String carguip;
	private int carprice;
	public String getNum() {
		return num;
	}
	public void setNum(String num) {
		this.num = num;
	}
	public String getCarname() {
		return carname;
	}
	public void setCarname(String carname) {
		this.carname = carname;
	}
	public String getCarcolor() {
		return carcolor;
	}
	public void setCarcolor(String carcolor) {
		this.carcolor = carcolor;
	}
	public String getCarguip() {
		return carguip;
	}
	public void setCarguip(String carguip) {
		this.carguip = carguip;
	}
	public int getCarprice() {
		return carprice;
	}
	public void setCarprice(int carprice) {
		this.carprice = carprice;
	}

	
	
}

 

 

 

◎ mybatis 설정

 

mybatis-3.2.2.jar
0.67MB

 

 

 

 

 

◎ mysqlserver.properties

driver = com.mysql.jdbc.Driver
url = jdbc:mysql://localhost:3306/sist?serverTimezone=Asia/Seoul
username= root
password= 1234

 

 

 

◎ SqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTDConfig 3.0//EN" "HTTP://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<properties resource="mybatis/setting/mysqlserver.properties"/>
	<typeAliases>
		<typeAlias type="data.car.CarDto" alias="cdto"/>
	</typeAliases>
	
	<environments default="development">
		<environment id="development">
			<transactionManager type="JDBC"/>
				<dataSource type="POOLED">
					<property name="driver" value="${driver}"/>
					<property name="url" value="${url}"/>
					<property name="username" value="${username}"/>
					<property name="password" value="${password}"/>										
				</dataSource>
		</environment>
	</environments>
</configuration>

 

 

 

◎ CarSql.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="car">
	<!-- 전체개수얻기 -->
	<select id="totalCountOfCar" resultType="int">
		select count(*) from mycar
	</select>
</mapper>

 

 

 

◎ ConnectionManager.java

package mybatis.setting;

import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

public class ConnectionManager {
	
	private static ConnectionManager instance;
	
	public static ConnectionManager getInstance() {
		
		if(instance==null)
			instance=new ConnectionManager();
		return instance;
	}
	
	private SqlSessionFactory sqlSessionFactory;
	
	private ConnectionManager() {
		String resource = "mybatis/setting/SqlMapConfig.xml";
		
		Reader reader;
		try {
			reader = Resources.getResourceAsReader(resource);
			sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	
	public SqlSession openSession() {
		return sqlSessionFactory.openSession(true);
	}
}

 

 

 

◎ CarDao.java

package data.car;

import org.apache.ibatis.session.SqlSession;

import mybatis.setting.ConnectionManager;

public class CarDao {

	ConnectionManager manager = ConnectionManager.getInstance();
	
	SqlSession session;
	
	private SqlSession getSession() {
		session=manager.openSession();
		return session;
	}
	
	
	///////////////////////////////////////////
	//전체개수 구하기
	public int getTotalCount() {
		int n=0;
		session= this.getSession();
		n= session.selectOne("car.totalCountOfCar");
		
		session.close();
		return n;
	}
	
}

 

 

 

◎ carstart.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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>

	<c:redirect url="samsung/list"/>

</body>
</html>

 

 

 

◎ carlist.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">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Gaegu&family=Gugi&family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Insert title here</title>
</head>
<body>

	<c:if test="">
	
	</c:if>

</body>
</html>

 

 

 

◎ ListServlet

package car.servlet;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import data.car.CarDao;


@WebServlet("/samsung/list")
public class ListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       CarDao dao = new CarDao();

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		//dao로부터 총개수 가져오기
		int totalCount = dao.getTotalCount();
		
		//request에 저장, 전달
		request.setAttribute("totalCount", totalCount);
		
		//jsp로 포워드
		RequestDispatcher rd = request.getRequestDispatcher("../car/carlist.jsp");
		rd.forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

'프로그래밍 > JSTL' 카테고리의 다른 글

2021년 10월 31일 : JSTL 사전 예습  (0) 2021.10.31

관련글

댓글

티스토리툴바