국비지원 61일차 - JSP 이동방식(redirect, forward), Beans, jQuery 필터링, attr (jQuery의 setter, getter), effect

JSP 페이지 이동방식

1) redirect방식

sendRedirect()를 이용해 redirect방식으로 페이지를 이동하면
1)페이지 이동이 일어난다.
2)이 때 새로운 페이지로 서버에 새롭게 요청(request)를 보내야 응답하는 형태가 된다.
3)따라서 브라우저의 요청url은 새롭게 이동한 페이지의 url로 바뀌어 있다.
4)이동시킨 페이지와 이동한 페이지는 서로 다른 request이므로 request에 저장한 값을 기억하지 못한다.

2) forward방식
1)서버 내부에서 페이지 이동이 일어난다.
2)따라서 서버 내부에서 이동하므로 브라우저의 요청 url은 이전 url을 유지한다.
3)이동시킨 페이지와 이동한 페이지가 같은 request를 공유한다.
4)따라서 request에 저장한 값이 있으면 이동한 페이지에서 이를 사용할 수 있다.

forward액션을 Servlet에서 구현하면
RequestDispatcher disp = request.getRequestDispatcher("ex10_result.jsp");
diso.forward(request,response);

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
	String id=request.getParameter("id");
	String pwd=request.getParameter("pwd");
	out.println(id+"/"+pwd);
	
	//1) id가 redirect이면 redirect방식으로 페이지 이동 ex10_result.jsp
	//2) id가 forward이면 forward방시으로 페이지 이동 ex10_result.jsp
	if(id.equals("redirect")){
		request.setAttribute("msg", "hello jsp");
		response.sendRedirect("ex10_result.jsp");
		return;
	}else if(id.equals("forward")){
		//forward이동은 jsp에서는 forward액션을 이용
		request.setAttribute("msg", "hello jsp");
		%>
		<jsp:forward page="ex10_result.jsp"/>
		<%
	}else{
		out.println("<h1>"+id+"님 환영합니다.</h1>");
	}
%>

String => 불변성(immutable) 문자열을 조작하면 원본을 그대로두고 새로운 객체를 만든다.
//문자열 조작이나 편집을 하려면 StringBuffer나 StringBuilder를 이용
//이 클래스들은 무자열을 버퍼에 보관하여 버퍼내에서 삽입, 수정, 삭제 등의 편집을 수행한다. 
String sql2="insert into member values(member_seq.nextval,?,?,?,?,?,?,?,?,?,sysdate,DEFAULT,DEFAULT)";
+=하면 객체를 3번 생성하므로 시간이 걸린다.
StringBuffer buf
= new StringBuffer("insert into member values(member_seq.nextval")
.append(",?,?,?,?,?,?,?,?,?,sysdate,").append("DEFAULT,DEFAULT)");
String sql=buf.toString();
ps=con.prepareStatement(sql);

memberJoin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="user.domain.*, user.persistence.*"%>
<%
	//0.post방식일 때의 한글 처리
	request.setCharacterEncoding("UTF-8");
	//1.사용자가 입력한 값 받기(이름,아이디,비번,연락처,우편번호,주소..)
	String name = request.getParameter("name");
	String id = request.getParameter("userid");
	String pwd = request.getParameter("pwd");
	String post = request.getParameter("post");
	String hp1 = request.getParameter("hp1");
	String hp2 = request.getParameter("hp2");
	String hp3 = request.getParameter("hp3");
	String addr1 = request.getParameter("addr1");
	String addr2 = request.getParameter("addr2");
	//2.유효성 체크(이름,아이디,비번)
	if(name==null||id==null||pwd==null||name.trim().isEmpty()||id.trim().isEmpty()||pwd.trim().isEmpty()){
		response.sendRedirect("signup.jsp");
		return;
	}
	//3.UserVO객체 생성해서 1번 값 넣기
	UserVO user = new UserVO(0,name,id,pwd,hp1,hp2,hp3,post,addr1,addr2,null,1000,0);
	//4.UserDAO객체 생성해서 createUser()호출
	UserDAO dao = new UserDAO();
	int n = dao.createUser(user);
	//5.실행결과 메시지 보여주고 페이지 이동시키기
	String msg=(n>0)? "회원가입 성공":"회원가입 실패";
	String loc=(n>0)? "members.jsp":"javascript:history.back()";
%>
<script>
alert('<%=msg%>');
location.href='<%=loc%>';
</script>

Beans

빈즈 규약
   [1] 기본생성자가 존재해야 한다. 
   [2] 속성을 지정(private)해야 하는데 
   속성 이름은 html의 form 태그안에서
   input 태그의 name속성값과 같아야 한다.
   [3] 속성을 접근하고 꺼내올 수 있는
    setXXX/getXXX메소드를 구성한다. 
 빈즈의 종류
   [1] 비쥬얼 컴포넌트 빈즈
    - JButton, JTextField...
   [2] 데이터빈즈
    -데이터를 담아두는 객체를 만드는 클래스
    - StudentDTO, Person, Friend ...
   [3] 서비스 빈즈
    -연산이나 서비스기능 Beans 즉, Worker빈즈
    - StudentDAO, FriendApp...등 

memberJoin2.jsp
property ="*"을 입력하면 name과 property가 동일한 모든 값에 대해 입력해준다.
scope page는 요청 한 번 수행하고 버리는 것
scope session은 기능을 수행하므로 하나만 생성해도 괜찮다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<%--useBean액션을 이요해 객체를 생성--%>
<jsp:useBean id="user" class="user.domain.UserVO" scope="page"/>
<%--UserDAO user=new UserDAO()와 동일. useBean액션으로 객체를 생성할 때는 디폴트생성자를 호출한다.--%>
<jsp:setProperty name="user" property="*"/>
<%--
parameter 이름이 다르면 param="uname"을 추가해야한다.
따라서 input name과 Bean(자바객체)의 property명을 동일하게 주는 것이 좋다.
user.setName(request.getParameter("name")); 과 동일--%>
<jsp:useBean id="userDao" class="user.persistence.UserDAO" scope="session"/>
<%
	int n =userDao.createUser(user);
	String msg=(n>0)? "회원가입 성공":"실패";
	String loc=(n>0)? "members.jsp":"javascript:history.back()";
%>
<script type="text/javascript">
	alert('<%=msg%>');
	location.href='<%=loc%>';
</script>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery  필터링

filter선택자: ':'을 붙여서 형식을 걸러냄
filtering : 함수(메소드) 형식으로 걸러냄           

[1] $().first() : 선택된 요소 중 첫번째 요소를 반환
[2] $().last() : 선택된 요소 중 마지막 요소를 반환    
[3] $().eq(n) : 인덱스가 n번째 요소를 반환
[4] $().has() : 선택된 요소 중에 자손 요소를 갖는 요소를 반환
[5] $().not() : 특정 조건을 만족하지 않는 요소를 반환
[6] $().is() : 특정 조건을 만족하는 요소가 있으면 true를 반환 
[7] $().filter(): 선택된 요소 중 필터링 조건을 충족하는 요소를 반환
[8] $().slice(시작인덱스,[종료인덱스])
               :선택된 요소 중에서 시작 인덱스부터 종료 인덱스 이전까지의
                요소를 반환

<html>
<head><title>필터링</title>
<!--jQuery Google CDN-------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-------------------------------------------->
<script>
    $(function(){
        /* filter선택자: ':'을 붙여서 형식을 걸러냄
           filtering : 함수(메소드) 형식으로 걸러냄           
        */
        /*[1] $().first() : 선택된 요소 중 첫번째 요소를 반환
          [2] $().last() : 선택된 요소 중 마지막 요소를 반환    
          [3] $().eq(n) : 인덱스가 n번째 요소를 반환
          [4] $().has() : 선택된 요소 중에 자손 요소를 갖는 요소를 반환
          [5] $().not() : 특정 조건을 만족하지 않는 요소를 반환
          [6] $().is() : 특정 조건을 만족하는 요소가 있으면 true를 반환 
          [7] $().filter(): 선택된 요소 중 필터링 조건을 충족하는 요소를 반환
          [8] $().slice(시작인덱스,[종료인덱스])
                :선택된 요소 중에서 시작 인덱스부터 종료 인덱스 이전까지의
                 요소를 반환
        */
        
        //[1]id가 panel인 요소의 자식 중 첫번째p요소를 찾아서
        // 배경색을 노랑색으로 주세요=> 필터선택자로 구현
        $("#panel>p:first").css("background-color","yellow");
        $("#panel>p").first().css("border","thick dotted orange");
        //[2] div p요소 중 인덱스가 2번째 요소를 찾아
        //글자색을 blue, 크기 20pt주세요 - 필터 선택자
        $("div p:eq(2)").css({"color":"blue","font-size":"20pt"});
         /*   배경색을 라임색으로 -필터링*/
        $("div p").eq(2).css("background-color","lime");

        //[3] 클래스가 middle인 요소를 찾아서 배경색을 purple, 글색은 흰색
        $(".middle").css({"background-color":"purple","color":"white"});
        //[4] 클래스가 middle이 아닌 div요소를 찾아서 테두리 2px solid yellow
        $("div").not(".middle").css("border","2px solid yellow");
        //[5] div요소 중 p요소를 자손으로 가진 div를 선택해서
        //    글자색을 aqua 글자크기를 24pt로 주세요
        $("div").has("p").css("color","aqua").css("font-size","24pt");
    });//$()end
</script>
<style>
    body *{
        border:1px solid silver;
        padding: 5px;
        margin: 5px;
    }
</style>
</head>
<body>
    <h1>jQuery 필터링(filtering)</h1>
    <div id="panel">
       <div class="middle">div.middle</div>
       <p>p</p>
       <p>p</p>
       <p>p</p>
       <p>p</p>
       <div id="sub">
           <p>div#sub p</p>
       </div>
        
    </div>
</body>
</html>
<!--ex11selector.html-->

attr - jQuery의 setter, getter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ex11_실습.html</title>
	<style>
		body{
			font-size:18px;
		}
		span{
             width:100px;
             float:left;
             text-align: center;
             margin: 5px;
             border: 2px solid green;
             font-weight: bold;
        }
	</style> 
<!-- CDN jquery------------------------------------------------- -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- -------------------------------------------------------------------- -->
<script type="text/javascript">
//html(), text(), attr(), show(), hide(), hover(), click()
    $(function(){
        //[1]p요소는 모두 감추기
        $("p").css("display","none");
        
        //[2] span.books 를 클릭했을 때 이벤트 처리
        //    메뉴와 관련된 내용을 등장시키기
        //    다른 내용들은 감추기
        // $('#booksbutton').on('click',function(){
        //     $("p").css("display","none");
        //     $(".books").css("display","inline");
        // })
        $('#menu span').click(function(){
            $("p").css("display","none");
            var cls = $(this).attr('class');
            $('p.'+cls).css("display","inline");
        })
    });//$()end

</script>
	       
  </head>
<body>
<div id="menu">
<span class="books" id="booksbutton"> Books </span>
<span class="movies" id="moviesbutton"> Movies  </span>
<span class="music" id="musicbutton"> Music </span><br><br>
</div>
<p class="books">
Books of different subjects available at reasonable prices. Ranging from web 
development, programming languages and text books all are available at heavy discount. 
Shipping is free. Also available in stock the popular Magazines, E-books and Tutoriasl CDs at 
affordable price
</p>
<p class="movies">
Find new movie reviews & latest hollywood movie news. Includes new movie trailers, latest hollywood releases, movie showtimes, entertainment news, celebrity interviews 
etc. Also find Hollywood actress, actor, videos biography, filmography, photos, wallpapers, 
music, jokes live tv channels at your doorsteps</p>
<p class="music">
Find music videos, internet radio, music downloads and all the latest music 
news and information. We have a large collection of music and songs classified by type, 
language and region. All downloads are streamed through RealAudio. You can also watch free 
music videos, tune in to AOL Radio, and search for your favorite music artists.</p>
</body>
</html>

effect
1) show(), hide() : display 속성을 이용해서 보여주고 감추고 함
2) fadeOut(), fadeIn(): 투명도(opacity)를 이용하여 사라지고 등장
fadeToggle() : fadeOut과 fadeIn을 번갈아 가면서 실행한다.
3) slideUp(), slideDown() : 올라갔다 내려오면서 사라짐
4) animate({옵션:결과},mills,function);

<html>
<head><title>효과</title>
<!--jQuery Google CDN-------------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-------------------------------------------->
<script>
    function result(){
        $('#result').html("완료");
    }


    $(function(){
        $("#result").css("margin","10px");
        $('#fadeOut').click(function(){
            $('img').fadeOut(3000,result);
        })
        $('#fadeIn').click(function(){
            $('img').fadeIn(3000,result);
        })
        $('#fadeToggle').click(function(){
            $('img').fadeToggle(3000,result);
        })
        $('#slideUp').click(function(){
            $('img').slideUp(3000,result);
        })
        $('#slideDown').click(function(){
            $('img').slideDown(3000,result);
        })
        $('#slideToggle').click(function(){
            $('img').slideToggle(3000,result);
        })

        //animate(옵션, ,illis, [효과옵션],함수)
        $('#ani1').click(function(){
            $('img').animate({'opacity':0},2000,result);
        });
        $('#ani2').click(function(){
            $('img').animate({'opacity':1},2000,result);
        });
        $('#ani3').click(function(){
            //animate()함수를 이용해서 이미지가 왼쪽으로 이동하여 안보이도록 처리
            $('img').animate({"margin-left":-180},1000,result);
        });
        $('#ani4').click(function(){
            //animate()함수를 이용해서 이미지를 다시 등장
            $('img').animate({"margin-left":0},1000,result);
        });
        $('#ani5').click(function(){
            //toggle처럼
            $('img').animate({marginLeft:-180},2000)
                    .animate({marginLeft:0},2000);
        });
    })
</script>
</head>
<body>
    <h1>jQuery 효과(effect)</h1>
    <img src='images/a.jpg' id="img"width="150" height="180">
    <!--이미지의 가로,세로 크기가 지정되어 있어야 함-->
    <div id="result"></div>
    <button id='fadeOut'>fadeOut</button>
    <button id='fadeIn'>fadeIn</button>
    <button id='fadeToggle'>fadeToggle</button>

    <hr color="red">
    <button id='slideUp'>slideUp</button>
    <button id='slideDown'>slideDown</button>
    <button id='slideToggle'>slideToggle</button>
    
    <hr color="blue">
    <button id="ani1">animate hide</button>
    <button id="ani2">animate show</button>
    
    <hr color="orange">
    <button id="ani3">animate left</button>
    <button id="ani4">animate right</button>
    <button id="ani5">animate toggle</button>
    
    
</body>
</html>
<!--ex12effect.html-->