EL문, 회원가입 페이지 (jsp/forward)

카테고리 없음

EL문, 회원가입 페이지 (jsp/forward)

logloglog 2021. 2. 15. 17:42

스프링MVC 모듈 >> 최프에

expression language : el

jsp : 동적인구조로 jsp를 넣어서 정적인 페이지를 내보내야하는

표현하기위해 jsp만들엇느네 자바코딩이 넘 많으면 화면구성에 저해됨

근데 넘 조잡 그래서 el문이 나왔따.

el로 사칙연산할필요가 거읭없음

어짜피 request.getParameter는 String 이기떄문에

디비에 뭔가넣을떄는 정량화된 데이터가 필요함. 매우나쁨나쁨좋음 이런걸로 스트링으로 넣으면 통계가안나옴

그래서 12345로 나누는 거임

el문에서는 산술연산보다는

삼항연산자를 많이씀.. 결과에 대한 판단을 내리는

el문은 null이 null이라고 안찍힘

1+ 사과 1사과 이런것도 안됨

그냥 el문두개 붙여놓으면 됨 어짜피 String으로 나가니까

JSP_EL 다니나믹 프젝만들기

서블렛만들거임

날씨를 받는 WeatherServlet

package com.jsp.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/weather")
public class WeatherServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		String url ="/WEB-INF/views/weather.jsp"; //리다이렉트인지포워드인지 상관없이 일단 유알엘
	
		//날씨에대한 정보가 리퀘스트에있으므로
		int weatherNum = Integer.parseInt(request.getParameter("weather"));
		
		//포워딩됏을때 해당 jsp에서 이weather값 꺼내게하고싶음
		String[] weatherArr = {"맑음","흐림","눈","비","갬"};//파라미터가 01234가 오겠따는 말임
		
		request.setAttribute("weather", weatherArr[weatherNum]);
		
		request.getRequestDispatcher(url).forward(request, response);
		//이 리퀘스트 01234도 있고 weather도 있는거임
	}

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

}

parameter는 사용자가 준거 attribute는 내가만든거

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces = "true" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>표현식</h3>
	<ul>
		<li>parameter : <%=request.getParameter("weather") %></li>
		<li>attribute : <%=request.getAttribute("weather") %></li>
		<li>null : <%=request.getAttribute("temp")%></li>
	</ul>
</body>
</html>

이제 el으로

파라미터랑 어트리뷰트랑 어케구분? 스코프를 따로줬다.

parameter는 param이란 영역이따로있다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces = "true" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>표현식</h3>
	<ul>
		<li>parameter : <%=request.getParameter("weather") %></li>
		<li>attribute : <%=request.getAttribute("weather") %></li>
		<li>null : <%=request.getAttribute("temp")%></li>
	</ul>
	<h3>Expression Language</h3>
	<ul>
		<li>parameter : ${param.weather} </li>
		<li>attribute :${weather}</li>
		<li>null : ${param.temp}</li>
	</ul>
</body>
</html>

대상은 같고 축약된거뿐임

표현으로 봤을때 차이ㅂ점 : null이 안찍힘

★유심히봐야할거는 el 문만의 스코프가있다는점. 리퀘스트가 아니고 리퀘스트스코프임.

SCOPE는 4가지! null은 안찍어 꼭 기억하자

Scope를 지정해주지않으면 자기와 맞닿은 밀접한 작은영역부터 찾아올라가기시작

즉 ${weather}라고 하면 page jsp에서 가장 가까ㅜ운 page context -> request > session> application까지 찾아간다.

즉 이 네영역중에서 weather라는 속성명으로 된 값이 하나만잇으면 속편하겠찌만 두개이상이라면?

가까운데부터 찾는다면 먼저찾은거 찍어내고 더이상찾지않은다.

이렇게해도 브라우저 안변함 왜? 리퀘스트에있는 weather가 먼저찍히니까

근데 세션에있는거찍고싶다면

즉 로긴유저같은거는 세션에만 넣고 리퀘스트에는 넣을일이없으므로

걍 스코프없이 바로 로긴유저꺼내면됨

el문의 맹점 : el문음 반드시 파라미터나 어트리뷰트에있는것만을 할수있음

덩그러니있는건못가져오고 반드시 파라미터나 어트리뷰트에있어야만함

package com.jsp.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/member/detail.do")
public class MemberDetailServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//아까 그 jsp로 포워딩할거임
		String url = "/WEB-INF/views/member/detail.jsp";
		
		request.getRequestDispatcher(url).forward(request, response);
	}

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

}

포워딩은 넘길방법은 리퀘스트에 심어서보낸수밖에

그래서 리퀘스트에서 꺼내쓰려r고 el문 쓰는거임

package com.jsp.servlet;

import java.io.IOException;
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 com.jsp.dto.MemberVO;


@WebServlet("/member/detail.do")
public class MemberDetailServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//아까 그 jsp로 포워딩할거임
		String url = "/WEB-INF/views/member/detail.jsp";
		
		//처리 (원래는 디비에서가져와야하지만)
		MemberVO memberVO = new MemberVO();
		memberVO.setId("dotmf");
		memberVO.setName("조애슬");
		memberVO.setEmail("dotmf321@naver.com");
		memberVO.setPhone("01011111111");
		
		request.setAttribute("member", memberVO);
		
		request.getRequestDispatcher(url).forward(request, response);
	}

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

}

el 문은 is get등의 메서드명을 생략가능

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


<body>

  <!-- Content Wrapper. Contains page content -->
  <div >
    <!-- Main content -->
    <section class="content register-page" style="height: 586.391px;">       
		<div class="register-box" style="min-width:450px;">         
	    	<form role="form" class="form-horizontal"  method="post">
	        	<div class="register-card-body" >
	            	<div class="row"  style="height:200px;">
						<div class="mailbox-attachments clearfix col-md-12" style="text-align: center;">							
							<div id="pictureView" style="border: 1px solid green; height: 200px; width: 140px; margin: 0 auto;"></div>														
						</div>
					</div>
					<br />
	                <div class="form-group row" >
	                  <label for="inputEmail3" class="col-sm-3 control-label text-right">아이디</label>
	
	                  <div class="col-sm-9">
	                    <input name="id" type="text" class="form-control" id="inputEmail3"  value="${member.id} " readonly>
	                  </div>
	                </div>	               
	                <div class="form-group row">
	                  <label for="inputPassword3" class="col-sm-3 control-label text-right">이  름</label>
	
	                  <div class="col-sm-9">
	                    <input name="pwd" type="text" class="form-control" id="inputPassword3" value="${member.name} " readonly>
	                  </div>
	                </div>
	                 <div class="form-group row">
	                  <label for="inputPassword3" class="col-sm-3 control-label text-right">이메일</label>
	
	                  <div class="col-sm-9">
	                    <input name="email" type="email" class="form-control" id="inputPassword3" value="${member.email} " readonly>
	                  </div>
	                </div>
	                 <div class="form-group row">
	                  <label for="inputPassword3" class="col-sm-3 control-label text-right">전화번호</label>
	                  <div class="col-sm-9">   
	                  	<input name="phone" type="text" class="form-control" id="inputPassword3" value="${member.phone} " readonly>	                
	                  </div>                  
	                </div>               
	              </div>  
		          <div class="card-footer" >
		          		<div class="row">
			          		
			          		
			          		<div class="col-sm-3 text-center">
			          			<button type="button" id="modifyBtn" class="btn btn-warning ">수 정</button>
			          		</div>
		          		
			          		<div class="col-sm-3 text-center">
			          			<button type="button" id="deleteBtn" class="btn btn-danger" >삭 제</button>
			          		</div>
			          		<div class="col-sm-3 text-center">
			          			<button type="button" id="stopBtn" class="btn btn-info" >정 지</button>
			          		</div>
			          	
			          		<div class="col-sm-3 text-center">
			            		<button type="button" id="listBtn" onclick="CloseWindow();" class="btn btn-primary pull-right">닫 기</button>
			            	</div>
		          	    </div>  	
		          </div>
	      	  </form>
      	  </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

</body>