오픈프레임워크_Day41

OpenFrameWork 2015. 5. 12. 16:04
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
2. Directive - 지시를 내리기 위한 도구
          1) <%@ page %>
                    - import : 유일하게 중복이 가능
                    - contentType : 이 페이지에 컨텐트 타입을 지정할 수 있게 지시, 문자코드가 맞지 않을때 많이 사용
                    - errorPage : 에러가 나면 특정 에러페이지로 이동하게 해줌
                                  브라우저 마다 다르게 나올 수 있으나 에러 메세지가 
                                  나오지 않는게 중요한 포인트, 브라우저의 URL 입력 부분이 변하지 않음
                    - isErrorPage : 에러 페이지 맞는가? , 에러 원인에 대한 메세지 출력가능
                    - session
                    - isELlgnored
                    - buffer : 서버에서 클라이언트에 보내기 전에 모아 놓는 공간, 기본크기 8kb
                    - autoFlush : 자동으로 버퍼에 모여 있던 내용을 방출, 기본 true 자동으로 보내기 되어 있음
                    ...

          2) <%@ include %>
                    - 컨텐츠를 분리시킨것을 포함하라는 의미
                    - 자주 사용되는 요소들을 파일로 따로 만들어 놓은 것고 그것을 포함시킬 수 있는 기능
                    - 보통 모든 페이지에 들어가는 요소들을 사용(예 배너, 메뉴 .. 등등)

          3) <%@ taglib %>

3. Implicit Object(내장 객체,Servlet에 있는 객체들을 가져옴)
(1)~(3) 입출력 관련 기능, (1),(6)~(8) Context(웹사이트를 의미) 관련 객체(프로젝트 전반에 걸쳐 사용할 수 있는 객체)
(1),(2),(6),(7),(8)을 주소 사용
(1) request           : HttpServletRequest 를 재포장해서 바로 쓸 수 있게 해주려는 용도로 만듬
(2) response          : HttpServletResponse
(3) out               : javax.Servlet.jsp.JspWriter

(4) page              : javax.Servlet.HttpJspPage 
(5) config            : javax.Servlet.ServletConfig

(6) session           : HttpSession
(7) application       : ServletContext
(8) pageContext       : javax.servlet.jsp.PageContext

(9) exception         : java.lang.Throwable
----------------------------------- 
** Context(장소,공간) 관련 메서드(request,session,application,pageContext)
          setAttribute(변수명,값)
          getAttribute(변수명)
          removeAttribute(변수명)
          -----------------------
          pageContext.setAttribute("i",10); - 이 페이지에서만 사용가능
          pageContext.setAttribute("i",10,REQUEST_SCOPE); - Request에서 사용가능
          pageContext.setAttribute("i",10,SESSION_SCOPE); - Session에서 사용가능
----------------------------------- 
* request,session,application,pageContext 객체들의 사용범위
- request
내가 요청한 페이지 안에서만 사용가능
응답을 받을때 사라짐

- session
현재 접속한 사용자만 사용 가능
모든 범위에서 

- application
전체 사용자가 모든 범위에서 사용가능

- pageContext
한페이지에서만 사용가능
가장 범위가 작음
가장 강력한 기능
나머지 세개의 객체를 관리 가능
----------------------------------- 
* <%=%> 안에는 세미콜론 X
----------------------------------- 
*. 유효성 검사
1) 클라이언트 측 : javascript
2) 서버 측 : java

- 유효성 검사를 미리 만들어 놓으면 좋음, 별도의 파일로 따로
-----------------------------------
* html 속성 name, id
name은 자바스크립트에서 씀
id는 서버측에서 씀

그러니 꼭 둘다 적어 주는게 좋음
-----------------------------------
* Session VS Application 

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

###################################
2. 설정 및 그 밖에
-----------------------------------
* IE 에러 화면 보여주는 속성(isErrorPage 사용시)
메뉴 - 인터넷 옵션 - 고급 - "http 오류 메시지 표시" 해제
----------------------------------- 
* Eclipse 에서 실습 시작
Workspace : ~\JSP\EclipseWork
Dynamic Web Project 새로 만듬
이름 ImplicitObjectApp, Generate web.xml 체크

----------------------------------- 
* requestExam1_proc.jsp 만들때 설정



파일 생성하면 에러가 남



라이브러리 복사

/ServletApp3/WebContent/WEB-INF/lib/servlet-api.jar
/ImplicitObjectApp/WebContent/WEB-INF/lib/servlet-api.jar
----------------------------------- 
* 라운드 트립
request하고 response 하면 한번의 라운드 트립 발생

/ImplicitObjectApp/WebContent/requestExam1.html
에서는 2번 발생
----------------------------------- 
* https://jqueryui.com/
----------------------------------- 
* application은 /프로젝트 이름/WebContent/WEB-INF/web.xml 안에 저장을 하는게 좋음
-----------------------------------
* 폴더 만듬
Eclipse - Workspace : ~\JSP\EclipseWork 안에 validation 폴더 만듬
/ImplicitObjectApp/WebContent/validation 
----------------------------------- 
* Eclipse 에서 Tomcat 설정 지우는 방법
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
~\JSP\ManualWork\DirectiveApp\exam4.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<%@ page errorPage = "err/errMessage.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>예외 발생시 예외를 감춘다.</h1>
10/3 = <%=10/3%>
<br/><br/>
10/0 = <%=10/0%>
</body>
</html>
----------------------------------- 
3-2
~\JSP\ManualWork\DirectiveApp\err\errMessage.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<%@ page isErrorPage="true"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>연산 에러!!</h1>
0으로 나누려고 했습니다.
<%=exception.getMessage()%>
</body>
</html>
----------------------------------- 
3-3
~\JSP\ManualWork\DirectiveApp\inc\header.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<h1>여기는 header 부분입니다.</h1>
<%=new java.util.Date()%>
<hr/>
----------------------------------- 
3-4
~\JSP\ManualWork\DirectiveApp\inc\footer.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<hr/>
<div align="center">
     <b>여기는 footer 부분입니다.</b>
     &copy;Copyright 2015.
</div>
----------------------------------- 
3-5 
~\JSP\ManualWork\DirectiveApp\exam5.jsp

<%@ page contentType="text/html;charset=euc-kr"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%@ include file="inc/header.jsp"%>
include 지시자  예제
<%@ include file="inc/footer.jsp"%>
</body>
</html>
-----------------------------------
3-6 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/requestExam1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>requestExam1.html</title>
</head>
<body>
<form method="post" action="requestExam1_proc.jsp">
     이름 : <input type="text" name="name"/><br/><br/>
     주소 : <input type="text" name="addr"/><br/><br/>
     취미 : <br/>
     <input type="checkbox" name="hobby" value="등산"/>등산<br/>   
     <input type="checkbox" name="hobby" value="낚시"/>낚시<br/>
     <input type="checkbox" name="hobby" value="독서"/>독서<br/><br/>
     <input type="submit" value="전송"/>
</form>
</body>
</html>
-----------------------------------  
3-7 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/requestExam1_proc.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
     request.setCharacterEncoding("euc-kr");
     String name = request.getParameter("name");
     String addr = request.getParameter("addr");
     String hobby[] = request.getParameterValues("hobby");
%>
이름 : <%=name %><br/>
주소 : <%=addr%><br/>
<%
     if(hobby != null){
%>
     <ul>
     <%
          for(String s : hobby){
     %>
    
          <li><%=s %></li>
     <%         
          }//for 종료
     %>
     </ul>
<%
     }//if 종료
%>
</body>
</html>
-----------------------------------  
3-8 
requestExam1_proc.jsp 와 requestExam1.html를 합침
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/requestExam2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<% if(request.getMethod().equals("GET")){ %>
     <form method="post" action="requestExam2.jsp">
          이름 : <input type="text" name="name"/><br/><br/>
          주소 : <input type="text" name="addr"/><br/><br/>
          취미 : <br/>
          <input type="checkbox" name="hobby" value="등산"/>등산<br/>   
          <input type="checkbox" name="hobby" value="낚시"/>낚시<br/>
          <input type="checkbox" name="hobby" value="독서"/>독서<br/><br/>
          <input type="submit" value="전송"/>
     </form>
<%}else{ %>
     <%
          request.setCharacterEncoding("euc-kr");
          String name = request.getParameter("name");
          String addr = request.getParameter("addr");
          String hobby[] = request.getParameterValues("hobby");
     %>
     이름 : <%=name %><br/>
     주소 : <%=addr%><br/>
     <%
          if(hobby != null){
     %>
          <ul>
          <%
               for(String s : hobby){
          %>
         
               <li><%=s %></li>
          <%         
               }//for 종료
          %>
          </ul>
     <%
          }//if 종료
     %>
<%} %>
</body>
</html>
-----------------------------------  
3-9 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/requestExam3.jsp

<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%
     Date date = (Date)request.getAttribute("currentDate");
%>
현재 날짜는 <%=date %>입니다.<br/><br/>

<%
     request.setAttribute("currentDate", new Date());
     date = (Date)request.getAttribute("currentDate");
%>
현재 날짜는 <%=date %>입니다.<br/><br/>

<%
     request.removeAttribute("currentDate");
     date = (Date)request.getAttribute("currentDate");
%>
현재 날짜는 <%=date %>입니다.<br/><br/>
</body>
</html>
-----------------------------------  
3-10 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/requestExam.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
1. 다른 웹사이트의 페이지로 이동<br/><br/>
<%
     //response.sendRedirect("http://google.co.kr");
%>

2. 같은 웹사이트의 다른 페이지로 이동<br/><br/>
<%
     //response.sendRedirect("homework2.jsp");
%>

3. 선택에 의한 이동
<%
     //http://localhost:8080/ImplicitObjectApp/requestExam.jsp?param=abc
     String param = request.getParameter("param");
     if(param == null || param.isEmpty()){
%>
          <h2>페이지 이동을 하지 않습니다.</h2>

<%
     }else{
          response.sendRedirect("homework1.jsp");
     }
%>
</body>
</html>
-----------------------------------  
3-11 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/outExam.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Out Exam</title>
</head>
<body>
<%
int sum = 100;

//<%= 를 사용하라! 아래 코드를 되도록이면 사용하지 마라
//out.println(sum);

//out의 기능 : 출력 버퍼 제어
%>
<%=sum %>
<hr/>
<%
     int bufferSize = out.getBufferSize();
%>
현재 버퍼 크기 : <%=bufferSize %>byte<br/>

<%
     int remain = out.getRemaining();
     int usedSize = bufferSize - remain;
     double per = (double)usedSize / (double)bufferSize;
%>
현재 버퍼 사용량 : <%=per %>%<br/>
<%
     if(per<0.5){
%>
          <h2>버퍼의 크기를 줄여주세요.</h2>
<%
     }
%>
</body>
</html>
-----------------------------------  
3-12 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/sessionExam1.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>sessionExam1.jsp</title>
</head>
<body>
<h1>sessionExam1.jsp</h1>
<%
session.setAttribute("i", 10);
application.setAttribute("i", 100);
%>
</body>
</html>
-----------------------------------  
3-13 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/sessionExam2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>sessionExam2.jsp</title>
</head>
<body>
<h1>sessionExam2.jsp</h1>
저장된 세션 값 : <%=session.getAttribute("i")%>
<br/><br/>
저장된 어플리케이션 값 : <%=application.getAttribute("i")%>
</body>
</html>
-----------------------------------  
3-14 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>ImplicitObjectApp</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <context-param>
       <param-name>admin_email</param-name>
       <param-value>admin@netsong7.com</param-value>
  </context-param>
</web-app>
-----------------------------------  
3-15 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/applicationExam.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<%=application.getInitParameter("admin_email")%>
</body>
</html>
-----------------------------------  
3-16 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/pageContextExam1.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h1>pageContextExam1.jsp</h1>
<%
     pageContext.setAttribute("addr","서울시 종로구");
     pageContext.setAttribute("tel","111-1111", pageContext.SESSION_SCOPE);
%>
주소 : <%=pageContext.getAttribute("addr")%>
</body>
</html>
-----------------------------------  
3-17 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/pageContextExam2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h1>pageContextExam2.jsp</h1>
주소 : <%=pageContext.getAttribute("addr")%><br/><br/>
전화번호 : <%=session.getAttribute("tel")%><br/><br/>
전화번호 : <%=pageContext.getAttribute("tel", pageContext.SESSION_SCOPE)%><br/><br/>
</body>
</html>
-----------------------------------  
3-18 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/validation/validForm1.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
<script>
     function fnIsNull() {
          var name = document.getElementById("name").value;
          if(name == "" || name == null){
               alert("값이 비어있습니다.");
               document.getElementById("name").focus();
               return;
          }
          
          document.f.submit();
     }
</script>
</head>
<body>
<form method="post" action="validForm1_proc.jsp" name="f">
     이름 : <input type="text" name="name" id="name"/><br/><br/>
     아이디 : <input type="text" name="id"/><br/><br/>
     패스워드 : <input type="password" name="pw1"/><br/><br/>
     패스워드 확인 : <input type="password" name="pw2"/><br/><br/>
     이메일 : <input type="text" name="email"/><br/><br/>
     <input type="button" value="전송" onclick="fnIsNull()"/>
</form>
</body>
</html>
-----------------------------------  
3-19 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/validation/validForm1_proc.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<h1>입력된 내용 확인</h1>
이름 : <%=request.getParameter("name") %><br/>
아이디 : <%=request.getParameter("id") %><br/>
패스워드 : <%=request.getParameter("pw1") %><br/>
이메일 : <%=request.getParameter("email") %><br/>

</body>
</html>
-----------------------------------  
3-20 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/validation/valid_check.js

/**
* Empty Check
* obj : input type
* msg : output message
*/
function isEmpty(obj, msg) {
     if(obj.value == ""){
          alert(msg);
          obj.focus();
          return true;
     }
     return false;
}

/**
* ID Check
* obj : input type
* allow : character, number, _ 
*/
function isId(obj){
     var value = obj.value;
     
     if(value.length == 0)
          return true;
     
     value = value.toUpperCase();
     
     for(var i=0; i<value.length; i++){
          if(!((value.charAt(i)>='A' && value.charAt(i)<='Z') ||
               (value.charAt(i)>='0' && value.charAt(i)<='9') ||
               (value.charAt(i)=='_'))){
               return true;
          }
     }     
     return false;
}

/**
* Email Check
* exist : @ .
* obj : input type 
*/
function isEmail(obj) {
     var value = obj.value;
     
     if(value == ""){
          alert("값이 비었습니다.");
          return true;
     }
     
     var i = value.indexOf("@");
     if(i<0){
          return true;
     }
     
     i = value.indexOf(".");
     if(i<0){
          return true;
     }     
     return false;
}

/**
* password equal Check
* obj1 : input type
* obj2 : input type 
*/
function isEqualPass(obj1,obj2) {
     var value1 = obj1.value;
     var value2 = obj2.value;
     
     if(value1.length == 0 || value2.length == 0 )
          return true;
     
     if(value1 == value2)
          return false;
     
     return true;
}

/*
* isLength4() : 반드시 4글자 이상 입력하도록 체크
* isAlphaNum() : 문자와 숫자를 같이 사용할 수 있도록 체크
*/
-----------------------------------  
3-21 
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/validation/validForm2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>Insert title here</title>
<script src="valid_check.js"></script>
<script>
     function fnChkForm(f) {
          if(isEmpty(f.name, "이름을 입력해야합니다.")){
               return false;
          }
          
          if(isEmpty(f.id, "아이디를 입력해야합니다.")){
               return false;
          }
          
          if(isEmpty(f.email, "이메일을 입력해야합니다.")){
               return false;
          }
          
          if(isId(f.id)){
               alert("아이디를 제대로 입력하시오");
               return false;
          }
          
          if(isEmail(f.email)){
               alert("이메일을 제대로 입력하시오");
               return false;
          }
          
          if(isEqualPass(f.pw1, f.pw2)){
               alert("비밀번호를 제대로 입력하시오");
               return false;
          }
          /*
               패스워드의 길이는 반드시 4글자 이상 입력할 수 있도록 
               패스워드는 반드시 문자와 숫자를 혼용해서 사용하도록
          */
          return true;
     }
</script>
</head>
<body>
<form method="post" action="validForm1_proc.jsp" name="f" onsubmit="return fnChkForm(this)">
     이름 : <input type="text" name="name" id="name"/><br/><br/>
     아이디 : <input type="text" name="id"/><br/><br/>
     패스워드 : <input type="password" name="pw1"/><br/><br/>
     패스워드 확인 : <input type="password" name="pw2"/><br/><br/>
     이메일 : <input type="text" name="email"/><br/><br/>
     <input type="submit" value="전송"/>
</form>
</body>
</html>
-----------------------------------
###################################
4. 과제
-----------------------------------
4-1
5.22 까지 면접 자료 제출
----------------------------------- 
4-2
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/homework1.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>첫번째 과제</title>
</head>
<body>
<!-- 결과 페이지에 총점,평균,학점을 구해서 출력하시오. -->
<form>
     국어 : <input type="text" name="kor"/><br/><br/>
     수학 : <input type="text" name="mat"/><br/><br/>
     영어 : <input type="text" name="eng"/><br/><br/>
     <input type="submit" value="제출"/>
</form>
</body>
</html>
----------------------------------- 
4-3
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/homework2.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<!DOCTYPE html >
<html>
<head>
<title>두번째 과제</title>
</head>
<body>
<!--선택한 상품의 총 합계 금액 구하기-->
<form>
     다음에서 구하고자 하는 상품을 선택해 주세요.<br/>
     <input type="checkbox" name="food" value="500"/>사과<br/>
     <input type="checkbox" name="food" value="45000"/>쌀<br/>
     <input type="checkbox" name="food" value="1500"/>우유<br/>
     <input type="checkbox" name="food" value="3500"/>김치<br/>
     <input type="checkbox" name="food" value="200"/>햄<br/>
     <input type="submit" value="합계"/>
</form>
</body>
</html>
----------------------------------- 
4-4

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

4-5
Workspace : ~\JSP\EclipseWork
/ImplicitObjectApp/WebContent/validation/valid_check.js
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
-----------------------------------
###################################
6. 기타
----------------------------------- 

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


저작자표시 비영리 변경금지 (새창열림)

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day43  (0) 2015.05.14
오픈프레임워크_Day42  (0) 2015.05.13
오픈프레임워크_Day40  (0) 2015.05.11
오픈프레임워크_Day39  (0) 2015.05.08
오픈프레임워크_Day38  (0) 2015.05.07
,

티스토리툴바