유정잉

45일차 JSP [ EL언어 ] 본문

네이버 클라우드 부트캠프/복습 정리

45일차 JSP [ EL언어 ]

유정♡ 2024. 4. 24. 12:59

[ 표현 언어 ]

   - EL (Expression Language) : 웹 페이지에 표현하는데 사용되는 언어 

   - JSP 출력 부분을 쉽게 하기 위해 개발한 태그.

   - JSTL(Jsp Standard Tag Library) : 코드가 깔끔하고 가독성이 좋다 

   - 표현식 : <%="Hi"%>  →  표현언어 : ${"Hi"}

   - 문자열, 정수, 실수, boolean 값 다 가능 -> null은 공백으로 출력 됨

   - 사칙연산도 가능, div mod, & | , 삼항조건연산자, 부등호(<,>) 다 사용 가능 

   - ${empty str } : 객체가 null인지 확인하기 위한 연산자 

   - EL 언어 출력 :  ${param.id }  혹은  ${param["id"] } 

 

[ JSTL(Jsp Standard Tag Library) 태그 - Core 태그 ]

   - JSTL(Jsp Standard Tag Library) : 코드가 깔끔하고 가독성이 좋다. 

   - out, set, if, choose, forEach 가 주로 사용 됨.

   - <c:out> 데이터 출력할 때 사용하는 태그 : <c:out value="Hi"> core의 출력방식 out

   - <c:set> 변수에 값 설정

   - <c:if> 조건에 따라 처리를 달리할 때 사용 

   - <c:choose> 여러 조건에 따라 처리를 달리할 때 사용 (=else if 대신 사용하는 것)

   - <c:forEach> 반복처리를 위해 사용한다 

   - <c:import> 외부자원을 url 지정해서 가져온다 

   - <c:redirect> 지정한 경로로 이동(=강제이동)

   - <c:catch> 예외처리 

   - <c:remove> 제거  

   - <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>        항상 코드를 import 해줘야 사용할 수 있음 !!!

 

[ Scope 값 ]

page : 자바빈은 생성된 

[ EL 언어 - 기초 ]

[ el01.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<!-- 출력방식 세가지(=표현방식) -->
<%="Hi" %><br>

<% out.print("Hi"); %> <br>

${"Hi" }<br> <!-- EL언어 방식 : 문자열, 정수, 실수, boolean 값 다 넣을 수 있음 , null은 공백으로 출력 됨 -->
${10 }<br>
${4.5 }<br>
${true }<br>
${null }<br>

${3+4 }<br> <!-- EL언어 : 연산도 가능, div mod, & | , 삼항조건연산자, 부등호(>,<) 다 사용 가능 -->
${5/3 }<br>
${4 div 2 }<br>
${5 mod 2 }<br>
${5>2 }<br>
${(5>2)?5:2 }<br><br>

<%
	String str=null;
%>

${empty str }<br> <!-- 객체가 null인지 확인하기 위한 연산자 -->
${3==3 }<br>
${3 eq 3 }<br>

</body>
</html>

 

 

[ EL 언어 - 출력해보기 ]

    - ${param.id } 

    - ${param["id"] } 

[ 로그인 폼 JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<center>
   <h2>로그인폼</h2>
   <form action="Login.jsp">
      <table width="400" border="1">
         <!-- 아이디 폼 -->
         <tr height="50">
            <td width="150" align="center">아이디</td>
            <td><input type="text" name="id" id="userid"></td>
         </tr>
         <!-- 이메일 폼 -->
         <tr height="50">
            <td width="150" align="center">비밀번호</td>
            <td><input type="password" name="pwd" id="userpwd"></td>
         </tr>
      </table>
         
         <input type="submit" value="로그인">
   </form>
</center>

</body>
</html>
[ Login.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<h2>지금까지 우리가 해온 출력 방식</h2>
<%
   String id=request.getParameter("id");
   String pwd=request.getParameter("pwd");
%>
<%=id %><br>
<%=pwd %><br>

<%
	out.print("---------------------------------------");
%>

<h2>EL언어로 출력해보기</h2>
${param.id }<br>
${param["pwd"] }<br>


</body>
</html>

 

[ EL 언어 - 출력해보기 ]

[ el02.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<form action="add2.jsp">
	<input type="text" name="n1"><br>
	<input type="text" name="n2"><br>
	<input type="submit" value="전송"><br>
</form>
</body>
</html>
[ add2.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
${param.n1 } + ${param.n2 } = ${param.n1+param.n2 } <br>

${n1 } + ${n2 } = ${param.n1+param.n2 } <!-- param 안 적으면 출력 안 됨 -->
</body>
</html>

 

[ EL 언어 -  Scope 값 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<%
	pageContext.setAttribute("name", "재원");
	request.setAttribute("name", "재영");
	session.setAttribute("name", "지현");
	application.setAttribute("name", "화연");
%>
${name }<hr> <!-- 재원 출력 됨 -->

page 속성 : ${pageScope.name }<hr>  <!-- 재원 출력 됨 -->
request 속성 : ${requestScope.name }<hr>
session 속성 : ${sessionScope.name }<hr>
application 속성 : ${applicationScope.name }<hr>
</body>
</html>

 

 

[ JSTL -  Core 태그 ]

   - 항상 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> import 해주고 사용 할 수 있음 !!!

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix = "c"%>
<html>
<body>
<!-- out : 출력 방식 -->
<c:out value="Hi" /> 

<!-- set : 값 세팅 -->
<c:set var="msg" value="Hi" />
${msg } <br>

<c:set var="add" value="${10+10 }" />
${add }<br>

<c:set var="test" value="${10>5 }" />
${test }<br>

<c:set var="age" value="30" />
<c:out value="${age }" />
<c:remove var="age" />
<c:out value="${age }" />

</body>
</html>

 

[ JSTL -  Core 태그 if문 ]

[ select.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>

<form action="color.jsp">
   <select id="color" name="color">
      <option value="1">red</option>
      <option value="2">orange</option>
      <option value="3">yellow</option>
   </select>
   <input type="submit" value="전송">

</form>

</body>
</html>
[ color.jsp JSP 파일 ]

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

<body>

<c:if test="${param.color==1 }" >
	<span style="color:red;">빨강</span>
</c:if>

<c:if test="${param.color==2 }">
	<span style="color:orange;">주황</span>
</c:if>

<c:if test="${param.color==3 }">
	<span style="color:yellow;">노랑</span>
</c:if>

</body>
</html>

 

[ JSTL -  Core 태그 choose와 when ]

[ food.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>

<form action="food2.jsp">
   <select id="food" name="food">
      <option value="1">피자</option>
      <option value="2">라면</option>
      <option value="3">햄버거</option>
   </select>
   <input type="submit" value="전송">

</form>

</body>
</html>
[ food2.jsp JSP 파일 ]

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

<body>
<c:choose>
	<c:when test="${param.food==1 }">
		<span style="color:red;">피자</span>
	</c:when>
	
	<c:when test="${param.food==2 }">
		<span style="color:orange;">라면</span>
	</c:when>
	
	<c:when test="${param.food==3 }">
		<span style="color:yellow;">햄버거</span>
	</c:when>
</c:choose>
</body>
</html>

 

[ JSTL -  Core 태그 forEach ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<%
	String []movie={"파묘","쿵푸팬더","웡카"};
	pageContext.setAttribute("movie", movie);
%>
<c:forEach var="movie" items="${movie }" varStatus="status">
	${movie }<br>
	${status.index }<br>
	${status.count }<br>
</c:forEach>

</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<%
	String []movie={"파묘","쿵푸팬더","웡카"};
	pageContext.setAttribute("movie", movie);
%>
<ul>
<c:forEach var="movie" items="${movie }" varStatus="status">
	<c:choose>
		<c:when test="${status.first }">
			<li style="color:red;">${movie }</li><br>
		</c:when>
		<c:otherwise>
			<li>${movie }</li><br>
		</c:otherwise>
	</c:choose>
</c:forEach>
</ul>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<body>
<c:forEach var="cnt" begin="1" end="10" varStatus="status">
	${cnt }
	<c:if test="${not status.last }">,</c:if>
</c:forEach>

<hr>

<c:forEach var="cnt" begin="7" end="10" varStatus="status">
	${status.index }<br>
	${status.count }<br>
	${cnt }<br>
	${status.first }<br>
</c:forEach>
</body>
</html>
[ hobby.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

</head>
<body>
<form action="for3_hobby.jsp">
	<input type="checkbox" name="hobby" value="캠핑">캠핑
	<input type="checkbox" name="hobby" value="등산">등산 
	<input type="checkbox" name="hobby" value="영화">영화 
	<input type="checkbox" name="hobby" value="독서">독서
	<input type="submit" value="전송">
</form>
</body>
</html>
[ for3_hobby.jsp JSP 파일 ]

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

<body>
<c:forEach var="item" items="${paramValues.hobby } " varStatus="status" >
	${item }
	<c:if test="${not status.last }">,</c:if>
</c:forEach>

<c:redirect url="hobby.jsp">

</c:redirect>
</body>
</html>

 

[ JSTL -  Core 태그 catch 예외처리 ]

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

<body>
<c:set var="age" value="30" scope="page"></c:set>
age : <c:out value="${age }"></c:out><br>
age : ${age }<br>
<hr>

<c:catch var="errmsg">
	예외 전<br>
	<%=1/0 %>
	예외 후<br>
</c:catch>

<c:out value="${errmsg }"></c:out>

</body>
</html>

 

[ JSTL -  Core 태그 formatDate 날짜 태그 ]

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

<body>
<!-- 현재 날짜 얻는 객체 Date 활용 프로젝트시 달력&날짜 형식 사용시 주로 사용 됨 -->
<c:set var="now" value="<%=new java.util.Date() %>"></c:set>
${now }<br>
 
<fmt:formatDate value="${now }" /><br>
date : <fmt:formatDate value="${now }" type="date" /><br>
time : <fmt:formatDate value="${now }" type="time" /><br>
both : <fmt:formatDate value="${now }" type="both" /><br>

<fmt:formatDate value="${now }" pattern="yyyy년 MM월 dd일 hh시" />

</body>
</html>

 

[ DAO & DTO ]

    - DAO : Data Access Object / 싱글톤 : 오로지 한번의 객체 생성으로 메모리 효율적으로 관리 목적

    - DTO : Data Transfer Object / private로 필드 선언 & Getter Setter 생성 / Java Bean 항상 클래스명 뒤에 Bean 붙이기

[ MemberDAO DAO 클래스 ]

package bit.dao;

import java.sql.Connection;
import java.sql.SQLException;

import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

public class MemberDAO {

    private MemberDAO(){}

    private static MemberDAO INSTANCE = new MemberDAO();

    public static MemberDAO getInstance(){
        return INSTANCE;
    }

    public Connection getConnection() throws SQLException, NamingException {
        Connection conn = null;
        InitialContext init = new InitialContext();
        DataSource ds = (DataSource) init.lookup("java:comp/env/jdbc/pool");
        conn = ds.getConnection();
        return conn;
    }
}
[ MemberBean DTO 클래스 ]

package bit.dto;

public class MemberBean {
	//DAO Data Access Object
	//DTO Data Trsnsfer Object
	
	private String name;
	private String userid;
	private String pwd;
	private String email;
	private String phone;
	private String admin;

	@Override
	public String toString() {
		return name+","+userid+"";
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getUserid() {
		return userid;
	}

	public void setUserid(String userid) {
		this.userid = userid;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getPhone() {
		return phone;
	}

	public void setPhone(String phone) {
		this.phone = phone;
	}

	public String getAdmin() {
		return admin;
	}

	public void setAdmin(String admin) {
		this.admin = admin;
	}
	
}
[ MySQL member2 table 생성 ]

create table member2(
	name varchar(30),
    userid varchar(30),
    pwd varchar(30),
    email varchar(30),
    phone varchar(30),
    admin int);
[ eclipse와 MySQL DB 연동 잘 됐는지 확인하는 작업 ]

<%@page import="bit.dao.MemberDAO"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<body>
<%
	//DB랑 연동 됐는지 안 됐는지 확인 하는 작업 !
	MemberDAO dao = MemberDAO.getInstance();
	Connection conn = dao.getConnection();
	out.print("연동성공");
%>
</body>
</html>

 

여기서 Servers -> server.xml 파일에 밑에 코드로 바꾸기 

<Context docBase="A0424-2(프로젝트명)" path="/A0424-2(프로젝트명)" reloadable="true" source="org.eclipse.jst.jee.server:A0424-2(프로젝트명)"> <Resource auth="Container" driverClassName="com.mysql.cj.jdbc.Driver" name="jdbc/pool" password="00000000" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/yujung" username="root"/> </Context>

--------------

[ login.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<head>
<script type="text/javascript" src="member.js"></script>
</head>
<body>
<h2>로그인</h2>
<form action="Login2.do" method="post" name="frm">
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="userid" value="${userid }"></td>
		</tr>

		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="pwd"></td>
		</tr>
		
		<tr>
			<td colspan="2" align="center">
			<input type="submit" value="로그인" onclick="return check()">&nbsp; &nbsp;
			<input type="reset" value="취소">&nbsp;&nbsp;
			<input type="button" value="회원가입" onclick="location.href='join.jsp'"> 
			</td>
		</tr>
		
		<tr>
			<td colspan="2">${msg }</td></tr>
	</table>
</form>
</body>
</html>
[ member.js JavaScript 파일 ] 
 
function check() {
    var userid = document.frm.userid.value;
    var pwd = document.frm.pwd.value;
    
    if (userid == "") {
        alert("아이디를 입력해주세요.");
        return false;
    }
    
    if (pwd == "") {
        alert("비밀번호를 입력해주세요.");
        return false;
    }
    
    return true;
}
[ Login2.java Servlet 클래스  ]

import java.io.IOException;

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

/**
 * Servlet implementation class Login
 */

@WebServlet("/Login2.do")  
public class Login2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Login2() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		RequestDispatcher dis=request.getRequestDispatcher("login.jsp");
		dis.forward(request, response);
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		
		
	}

}
[ index.jsp JSP 파일 ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<body>
<a href="Login2.do">로그인 페이지</a>
</body>
</html>

왼 : index.jsp / 오 : login.jsp

 

[ taglibs 다운로드 ]

   1) jakarta.apache 사이트 접속 -> Ex-Jakarta에서 Taglibs 클릭 

   2) News에서 1.2.3 standard 클릭

   3) Getting the Taglibs에 download 클릭

   4) Source Code Distibutions에서 zip 클릭 후 다운로드 

 

https://jakarta.apache.org/

https://tomcat.apache.org/taglibs/

https://tomcat.apache.org/taglibs/standard/

https://tomcat.apache.org/download-taglibs.cgi

zip 클릭
taglibs-standard-1.2.5-source-release.zip
0.59MB
jstl-1.2.jar
0.40MB

 

 

톰캣 버전 10은 

https://mvnrepository.com/artifact/org.glassfish.web/jakarta.servlet.jsp.jstl/2.0.0

여기서 jar 파일 다운로드 해서 사용

jakarta.servlet.jsp.jstl-2.0.0.jar
3.53MB

728x90

'네이버 클라우드 부트캠프 > 복습 정리' 카테고리의 다른 글

50일차 스프링 [ 환경설정, 개념 ]  (0) 2024.05.01
46일차 JSP [ 게시판 만들기 ]  (0) 2024.04.25
44일차 JSP [ 커넥션풀, 마이페이지 만들기 ]  (5) 2024.04.23
43일차 JSP [ forward, cookie ]  (0) 2024.04.22
40~41일차 JSP [ 개념, Tomcat 연결 ]  (0) 2024.04.17
'네이버 클라우드 부트캠프/복습 정리' Related Articles more