onclick으로  이벤트 진행함...

location. 적용은 1일날 공부한것임.....강제화면 변경요청시 진행해야함...

html 구문이 아니라 script에서 no값을 줄때 매개변수처럼 값을 전달했음....

삭제는 잘되었다.......

<td>
<a class="btn btn-xs btn-danger" onclick="lectureDelete(${lecture.lectureNo });">DELETE</a>
</td>

DELETE 키 누를 때 화면에 여부 확인후 값 값진행하기....

자바스크립트로 여부 문의하는 함수이다.

 

function lectureDelete(lectureNo){
var check=confirm("정말 삭제하겠습나까?");
if(check){
location.href="/lecture/delete.do?lectureNo="+lectureNo;
}
return false;
}

 

CHECK값이 TURE이면 LOCATION에 따라 간다.. 

<?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="MemberMapper">
<resultMap type="com.kh.member.model.vo.Member" id="memberResultMap">  //정보회회할때 계속 사용함
 <id     property="memberId"      column="MEMBER_ID"/>
 <!--  --><result property="memberId"      column="MEMBER_ID"/>
 <result property="memberPwd"     column="MEMBER_PWD"/>
 <result property="memberName"    column="MEMBER_NAME"/>
 <result property="memberAge"     column="MEMBER_AGE"/>
 <result property="memberEmail"   column="MEMBER_EMAIL"/>
 <result property="memberPhone"   column="MEMBER_PHONE"/>
 <result property="memberAddress" column="MEMBER_ADDRESS"/>
 <result property="memberGender"  column="MEMBER_GENDER"/>
 <result property="memberHobby"   column="MEMBER_HOBBY"/>
 <result property="enrollDate"    column="ENROLL_DATE"/>
 
</resultMap>

////////////////////////////////////////////////회원정보조회...
<insert id="insertMember">
INSERT INTO MEMBER_TBL
VALUES(#{memberId}, #{memberPwd}, #{memberName},0,null,null,#{memberAddress}, null,null,default)
</insert>

////////////////////////////////////////////////회원가입입력...


<select id="selectAllMember" resultMap="memberResultMap">
SELECT * FROM MEMBER_TBL
</select>
////////////////////////////////////////////////회원ID 정보조회...
<select id="selectOneMember" resultMap="memberResultMap">
SELECT * FROM MEMBER_TBL WHERE MEMBER_ID=#{memberId}  <!-- 여기선 $아니고 #이다.. -->  
</select>
////////////////////////////////////////////////회원로그인조회...
<select id="selectMemberLogin" resultMap="memberResultMap">
<!--session의 정보는 노출되므로 로그인시 최소정보만 가져와야 하기에 *이 아니다.  -->
SELECT MEMBER_ID,MEMBER_NAME,MEMBER_ADDRESS FROM MEMBER_TBL WHERE MEMBER_ID=#{memberId} AND MEMBER_PWD=#{memberPwd}  <!-- 여기선 $아니고 #이다.. -->  
</select>
////////////////////////////////////////////////회원삭제탈퇴...
<delete id="deleteMember">
DELETE FROM MEMBER_TBL WHERE MEMBER_ID=#{memberId}  
</delete>
<!--  Mapped Statements collection does not contain value for MemberMepper.updateMember 에러남음..... 
MemberMepper.updateMember에 대한 값이 포함되어 있지 않습니다
 --> 결국은 오타였음.........$&()%%$*(()))(^%^&())_욕이나온다....

 

////////////////////////////////////////////////회원정보수정...

<update id="updateMember">
UPDATE MEMBER_TBL SET MEMBER_PWD=#{memberPwd}, MEMBER_ADDRESS=#{memberAddress} WHERE MEMBER_ID=#{memberId}
</update>

</mapper>

1. 회원정보.전체조회.

list.jsp파일이다.

이파일에서 전체조회, 상세조회, 회원정보 수정, 회원정보탈퇴등이 모두 이루어진다.

전체조회

순서는 마찬가지.......controller는 실행요청-> serviceImpl는 jdbcTemplace- sesstion 탑재하기.-> storeLogic에선 DB처리하여 데이터 받아서 반대순으로 결과값을 전송시킨다..... 

 

상세조회

마찬가지로 화면에서 아이디값받아서 그사람상세조회를 하는 구문인데....화면에서 이름클릭시 id값까지 전달.

storeLogic처리 구문.......쿼리문 관련 정보로 틀리면 안된다......오타불가.....생각보다 많이남..

회원정보 수정

update버튼을 누르면 tot회원의 id로 동일하게 회원정보조회(코드 재사용)/ 결과값전달하여 정보수정 modify.jsp창으로 전달하고 수정할 회정정보값을 받아서 수정을 누르면 다시 modifyController의 dopost 로 간다.

회원정보 삭제

왜 getSession()....로그인 정보를 저장할 수 있을까???

세션은 클라이언트 별로 서버에 저장되는 정보/////

사용자 컴퓨터에 저장되어 사라지는 쿠기와는 다르게

보안이 필요한 데이터는 쿠키보다 세션에 저장하고 이정보는 서버가 종료되거나 유효시간이 지나면 사라진다.

1. HeepSession session=request.getSession() ...클라이언트의 요청이 있다면

서버는 클라이언트를 식별하는 session ID를 생성하고

다시 key, value를 저장하는 HttpSession을 생성한 후  session ID 쿠키를 클라이언트 에게 전송함.

 

2.  클라이언트는 서버에 요청시  session ID 쿠키를 전송하여 요청하고 서버는 이로 HttpSession을 찾는다.

3. 여기서 request의 getSession은 서버에 생성된 세션이 있다면 세션을 주고 없으면 세션을 생성후 반환함...

그래서 default가 true임....

참고로 HttpSession의 isNew()메서드로 새로운 세션인지 아닌지 안다.

getSession(false);로 하면 없으면 null을 반환함...

 

4. setAttribute 는 name, value쌍으로 객체 object를 저장해서.....세션이 유지되는 동안 저장되고 

getAttribute는 세션에 저장된 값을 조회할수 있으나 object임으로 형변환이 필요하다...

삭제는 로그아웃에서 했던 invalidate()이다....

index.jsp

main이 main이아니고 index가 index가 아닌것 같은...redirect를 다시접했으나 새로움...

화면에 출력되는 것은 없이 메인페이지로 연결되는 역

가장 기재하기 편한 위치에 인덱스가있고 인덱스를 호출하면 메인페이지가 연결된다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마이 바티스 웹</title>
</head>
<body>
<jsp:include page="/WEB-INF/views/common/menuBar.jsp"></jsp:include>
<br><br>
<div>
<img alt="마이바티스 메인이미지" src="/resources/img/mybatis.png"></div>

</body>
</html>

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

메뉴바 는 </jsp:include page=">으로 고정시켰다....클라이언트의 화면 이동요청....

페이지 마다 계속 활용되는  메뉴탑과 로그인 부분

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


    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- c: if 쓰기 위해서 해야하는 것..taglib붙여 넣기와 tablibs-standead파일 4개 붙여 넣기  -->  
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.login-area {
height : 100px;
}
.btn-login {
height : 50px;
}
.nav-area {
background : gray;
height : 50px;
}
.menu {
display : table-cell;
width : 250px;
height : 50px;
text-align : center;
vertical-align : middle;
font-size : 20px;
background : gray;
color : black;
}
.menu:hover {
background : gold;
cursor : pointer;
}
</style>
</head>
<body>
<h1 align="center">Welcome to Mybatis Web</h1>
<br>

<div class="login-area">
<c:if test="${empty sessionScope.member }">
<form action="/member/login.do" method="post">
<table align="right">
<tr>
<td>아이디 : </td>
<td><input type="text" name="userId"></td>
<td rowspan="2"><button id="" class="btn-login">로그인</button></td>
</tr>
<tr>
<td>비밀번호 : </td>
<td><input type="password" name="userPwd"></td>
</tr>
<tr>
<td colspan="3">
<a href="/member/regist.do">회원가입</a>
<a href="#">아이디/비밀번호 찾기</a>
</td>
</tr>
</table>
</form>
</c:if>
<c:if test="${not empty sessionScope.member }">
<table align="right">
<tr>
<td colspan="2"><b>${sessionScope.member.memberName }</b>님 환영합니다.</td>
</tr>
<tr>
<td>
<button onclick="memberLogout();">로그아웃</button>
</td>
</tr>
</table>
</c:if>
</div>

<div class="nav-area">
<div class="menu" onclick="goHome();">Home</div>
<div class="menu" onclick="location.href='/member/list.do'">멤버목록</div>
<div class="menu" onclick="">강좌목록</div>
<div class="menu" onclick="">게시판</div>
<div class="menu" onclick="">ETC</div>
</div>
<br><br>
<script >
function goHome(){
location.href="/index.jsp"

//결국메인으로 간다....
}
function memberLogout(){
location.href="/member/logout.do"   
}
</script>


</body>
</html>

로그인 controller

id와 pwd를 화면에서 받았서 MemberServiceImpl()-->MemberStoreLogic에서 데이터를 받아아 오면된다.

HttpSession 로그인 유지하기때문에 로그아웃시 소멸 및 데이터가 공개됨으로 공개되어도 괜찮은 정보만 받아와야 한다.

 

I. <jsp:include>

 

1. 설명

-. 서버측 include가 아닌 클라이언트측의 include라 생각하면 간단하다

즉 출력 결과만(html코드)을 include (뜻 : 포함) 한다

-. include  되는 페이지와 변수를 같이 사용할 수 없다

2. 속성

 

① page

-. 포함시키고자 하는 문서의 위치를 명시한다

-. 상대경로뿐만 아니라 절대경로도 가능하다

-. 서블릿 컨테이너에 따라 HTML 페이지는 안될 수도 있다

-. get 방식으로 파라미터를 전달 할수 없다

-. 동적으로 페이지 할당이 가능하다

        즉 <jsp:include page="<%=variable%>" flush="true"/> 가 가능하다

② flush

    -. true : 문서의 출력 결과를 항상 버퍼내에서 갱신 하라는 의미이다

 

3. 예제

 

a.jsp

...

<jsp:include page="b.jsp" flush="true"/>

...

 

a.jsp 결과에 b.jsp 가 실행된 결과가 include 된다

즉 따로따로 실행 된 후 그 결과(html)만을 가지고 include 한다

 

 

 

II. <%@ include %>

 

1. 설명

-. 서버측 include 라고 생각하면 된다

즉 소스 실행전에 include가 된다고 보자

-. 소스 실행전 포함됨으로 변수를 같이 사용할 수 있다

-. 동적으로 페이지 할당을 할 수가 없다

 

2. 속성

① file

    -. 포함될 페이지를 명시한다

 

3. 예제

 

a.jsp

...

<%@ include file="b.jsp" %>

...

b.jsp 코드자체가 a.jsp에 포함된 후 실행된다.

 

 

 

jsp:include

<jsp:include page="/xxx.jsp" />

1. 요청시간에 처리

2. 별도의 파일로 요청 처리 흐름을 이동

3. 화면 레이아웃의 일부분을 모듈화 할 때 주로 사용된다.

@include

디렉티브

1. JSP파일을 자바 소스로 변환할 때 처리

2. 현재 파일에 삽입시킴

연결된 파일을 포함해서 같이 컴파일 한다.

 

include 지시어는 다른 JSP의 소스 코드를 해당 JSP에 그대로 포함시킨다

반면에 액션 태그의 <jsp:include> 태그는 다른 JSP의 소스 코드가 아니라,

다른 JSP의 실행 결과값을 해당 JSP 페이지에 포함시킨다.

또한, include는 주로 조각난 코드를 삽입을 하고자 할때 사용되고,

<jsp:include> 액션 태그는 페이지를 모듈화할때 사용된다.

즉 템플릿 페이지를 작성할때 사용된다.

 

<!--
정적인 페이지 할 때 사용한다.>
-->
<%@ include file="/include/top.jsp" %>
<hr></hr>
index.jsp입니다.<br></br><br></br>
<hr></hr>
<%@ include file="/include/bottom.jsp" %>

=============================================================================

<%--
동적인 페이지 할 때 사용한다.

--%>

<jsp:include page="top.jsp">
<jsp:param value="ok" name="flag"/>
</jsp:include>
<hr></hr>
main.jsp....
<hr></hr>
<jsp:include page="bottom.jsp"></jsp:include>

 

name - 이동할 페이지에 전달될 파라미터의 이름 ( 표현식 사용 불가 )

value - 이동할 페이지에 전달될 파라미터의 값( 표현식 사용 가능 )

 

받는곳에서 request.getParameter("flag");로 받는다.

 

=============================================================================

 

JSP내의 Java Code를 Designer나 HTML Coder가 보기쉽고(?), 수정하기 쉽게(?) Java Code를 HTML Tag과 같은 Tag 형태로 사용할 수 있도록 한 JSP Custom Tag.

그중에 가장 많이 쓰이는 Tag인 <jsp:include /> 하지만 이 <jsp:include /> Tag의 단점은 원격지의 JSP 페이지를 include 할 수 없는데 있다.

이처럼 <jsp:include /> Tag로 할 수 없는 것을 <c:import /> Tag는 가능하게 해준다.

그럼.. 어떻게 사용하는가?

우선... 아래의 URL에서 Taglib를 다운 받는다.

http://people.apache.org/builds/jakarta-taglibs/nightly/projects/standard/

에서 JSP 버전에 맞는 Taglib 를 다운 받는다.
다운 받은 파일을 압축을 풀면... 4개의 (doc, javadoc, lib, tld) 디렉토리와, LICENSE, NOTICE, README 파일 그리고 2개의 WAR 파일이 있다.

우리가 필요한건... 다름아닌... lib 폴더 아래의 jstl.jar , standard.jar 이다.

이 두개의 jar 파일을 적용하고자 하는 JSP의 Container (WAS)의 /WEB-INF/lib/에 복사한다.

그리고는... JSP페이지에

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>을 추가하고,
<c:import />를 Tag를 사용하면 된다.

예)
<%
String url = http://xxx.xxx.xxx.xxx/naver/test.jsp;
%>
<c:import url="<%= url %>" charEncoding="EUC-KR">
<c:param name="query" value="민원" />
<c:param name="method" value="get" />
</c:import>

위와 같이 사용하면 원격지의 WEB 페이지를 include와 유사하게 사용할 수 있다.


이런거 초보는 잘까먹는다....나!!!

 

 

1. registform.jsp에서 회원가입 정보를 입력받는다.
form의 action = "/member/regist.do"값을 타고 간다.


2. 데이터는 MemberRegistController 1차 받는다.
. request.getRequestDispatcher("/WEB-INF/views/member/registForm.jsp").forward(request,response);
  -registform.jsp 폴더 주소값 대소문자 정확히구분하여 입력해야함...
. new MemberServiceImpl().registerMember(member); 으로 회원가입 정보를 보낸다.


3. MemberServiceImpl 클래스 메소드는 DB로 보낸다.
. SqlSessionTemplate --JDBTemplate 역할을 복잡한 구문없이 처리하는데. 관련정보는  "mybatis-config.xml"에 있고
 "mybatis-config.xml"이곳에 Query문을 기술한 mapper.dtd정보가 있음...
. 즉 SqlSessionTemplate(mybatis-config.xml(mapper.dtd)) 묶여 가는 것임


4. MemberStoreLogic().registerMember(session, member); db와 연결정보와 Member회원정보를 insert 후 결과 값 result로 받음.

 

5. 다시 MemberServiceImpl클래스 registerMember메소드에서 result 결과 값을 받아서 이상이 없으면 commit/rollback을 한다.

 

6.  MemberRegistController다시 돌아와서 가입완료 alert창 띄우고 PrintWriter를 닫는다.

<h3>키보드 관련 이벤트</h3>
    <p>
        keydown : 키가 눌렸을 때 <br>
        keypress : 키가 눌리는 동안 <br>
        keyup : 키에서 손을 떼었을때
    </p>

     연습 : <input type="text" id="test2"><br>
     <span id="result">0</span>

     <script>
        //keydown/ keypress / keyup
        $('#test2').on('keyup',function(){
            var cnt = $(this).val().length;
            console.log(cnt);
            $('#result').text(cnt);
         });
     </script>
 
<script>
        //keydown/ keypress / keyup
        $('#test2').on('keyup',function(){
            var cnt = $(this).val().length;
            console.log(cnt);
            $('#result').text(cnt);
         });
     </script>
    <h3>동적 글자수 세기</h3>
    <div>
        <h1 id="counter">100</h1>
        <textarea id="contents" cols="70" rows="4"></textarea>
    </div>
    <script>
        $('#contents').on('keyup',function(){
            var words=$(this).val().length;
            var remain=100-words;

            $('#counter').html(remain);
            if(remain<0) {
                $('#counter').css('color','red');
            }else if(remain<11){
                $('#counter').css('color','blue');
            }else{
                $('#counter').css('color','black');
            }
        });
    </script>

'JQUERY > 함수' 카테고리의 다른 글

hover()  (0) 2022.08.28
이벤트..mouseout. mouseover  (0) 2022.08.28
이벤트 연결함수...on.off  (0) 2022.08.28
요소 복사,삭제태그들....clone(),remove()  (0) 2022.08.28
요소추가. append, prepend, before, after  (0) 2022.08.28
 <h3>hover()함수 : enter와 leave</h3>
    <p>
        mouseenter + mouseleave
    </p>
    <h1 id="test1">hover Test !</h1>

    <script>
        $(function(){
            $('#test1').hover(
              function(){$(this).css('background','yellow')},
              function(){$(this).css('background','green')}  
            );
        });

    </script>

<head>
    <meta charset="UTF-8">
    <title>연결가능 이벤트</title>
    <script src="../RESOURCES/asset/js/jquery-3.6.0.min.js"></script>
    <style>
        .outer{
            margin: 50px;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .inner{
            margin: 25px;
            width: 150px;
            height: 150px;
            background-color: green;
            position: absolute;
        }
    </style>

</head>
<body>
    <h1>연결가능 이벤트</h1>
    <h3>마우스 관련 이벤트</h3>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <script>
        $(function(){
        /*    $('.outer').on('mouseenter',function(){
                console.log("Enter 발생!!");
            });
            $('.outer').on('mouseleave',function(){
                console.log("Leave발생!!");
            });
            */arguments
            $('.outer').on('mouseout',function(){
                console.log("out 발생!!!")
            });
            $('.outer').on('mouseover',function(){
                console.log("Over 발생!!")
            });
        });
    </script>

'JQUERY > 함수' 카테고리의 다른 글

키보드관련//글자수세기  (0) 2022.08.28
hover()  (0) 2022.08.28
이벤트 연결함수...on.off  (0) 2022.08.28
요소 복사,삭제태그들....clone(),remove()  (0) 2022.08.28
요소추가. append, prepend, before, after  (0) 2022.08.28

+ Recent posts