로그인
회원 인증을 받았다면 받은 회원정보를 session에 저장한다.
session : 내장 객체 (HttpSession타입)
setAttribute(String key, Object value) => 세션에 저장할 때 사용
Object getAttribute(key) => 세션에 저장된 값을 꺼낼 때 사용
session 로그인은 기본 30분 유지 된다.
setAttribute
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="user.domain.*"%>
<!-- 예외 발생시 예외 처리함 -->
<%@ page errorPage="/error/errorAlert.jsp" %>
<%@ include file="/include/function.jsp" %>
<% request.setCharacterEncoding("UTF-8"); %>
<%
String userid = request.getParameter("userid");
String pwd = request.getParameter("pwd");
if(userid==null||pwd==null||userid.trim().isEmpty()||pwd.trim().isEmpty()){
goUrl("잘못 들어온 경로 입니다.","../index.jsp",out);
return;
}
//out.println(userid+"/"+pwd);
%>
<jsp:useBean id="userDao" class="user.persistence.UserDAO" scope="session"/>
<%
UserVO loginUser=userDao.loginCheck(userid,pwd);
/*
1) 아이디와 비밀번호가 일치하면 해당 회원정보를 DB에서 가져와서 UserVO에 담아서 반환해줌
2) 불일치 하면 사용자 정의 예외 (NotUserException)를 발생시킴
*/
if(loginUser!=null){
//out.println("<h1>로그인 성공</h1>");
//회원 인증을 받았다면 인증받은 회원정보를 session에 저장한다.
session.setAttribute("loginUser", loginUser);
response.sendRedirect("../index.jsp");
return;
}
%>top.jsp
<%
//세션에 저장된 loginUser가 있는지 꺼내보자
UserVO loginUser=(UserVO)session.getAttribute("loginUser");
%>
<%
if(loginUser==null){
%>
<li class="nav-item">
<a class="nav-link" href="/MyWeb/login/signin.jsp">SignIn</a>
</li>
<% }else{%>
<li class="nav-item bg-primary">
<a class="nav-link" href="#"><%=loginUser.getUserid()%>님 로그인 중</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/MyWeb/login/logout.jsp">Logout</a>
</li>
<% }%>로그아웃
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//로그아웃 처리 방법
//1) 세션에서 특정 변수를 제거하는 방법
session.removeAttribute("loginUser");
//2) 세션에 저장된 모든 세션변수를 제거하는 방법 ==> 권장
session.invalidate();
response.sendRedirect("../index.jsp");
%>세션
세션이란 일정 시간 동안(디폴트 30분) 같은 사용자(정확히 말하면 같은 브라우저)로 부터 들어오는
일련의 요구들 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다.
예를 들어서 쇼핑몰에서 장바구니를 구현할 때 매우 유용하게 사용될 수 있다. 즉 쇼핑몰에서 사용자가
상품을 주문할 때마다 그 사용자에 대한 상품을 세션으로 저장해 두면 나중에 한 번에 구매한 물품을
세션에 저장된 정보에서 볼러올 수 있는 것입니다.
서블릿에서 세션은 HttpSession 인터페이스로 표현된다. 실제로 HttpSession 인터페이스를 임플리먼츠하는
클래스는 서블릿 컨테이너(엔진)에의해 만들어 지며, 서블릿에서 세션 객체를 얻고자 할 경우에는
HttpServletRequest의 getSession(true); 메소드에 얻을 수 있다. 얻어진 세션 객체는 유일한 ID값
(세션아이디)을 부여받으므로써 각각의 클라이언트를 구별한다.
나의 session key는 browser가 저장
server는 session 내장객체에서 보관
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
<h1>session에 저장된 모든 정보를 꺼내봅시다.</h1>
<h2 class="text-danger">JSESSIONID: <%=session.getId() %></h2>
<%
//session : HttpSession타입의 내장객체
/*서블릿에서 세션을 얻으려면
HttpSession session = request.getSession();
*/
Enumeration <String> en = session.getAttributeNames();
//세션의 키값들만 반환함
while(en.hasMoreElements()){
String key=en.nextElement();
Object val=session.getAttribute(key);
%>
<h2><%=key %> : <%=val %></h2>
<%
}
%>
</div>
<jsp:include page="/foot.jsp"/>관리자
관리자만 가능해야 하는 경우 상단에
<%@ include file="login/adminCheckModule.jsp"%>를 넣어두면
일반회원 접근 불가능
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="user.domain.*" %>
<%-- 로그인 여부를 체크하는 모듈. 회원들만 사용하는 페이지에 이 모듈을 include한다.--%>
<%-- <%@ include file="/login/loginCheck.jsp" %>--%>
<%
UserVO member = (UserVO)session.getAttribute("loginUser");
String ctdx = request.getContextPath(); // -> /MyWeb
if(member==null){
%>
<script>
alert("로그인해야 이용할 수 있음");
location.href="<%=ctdx %>/login/signin.jsp";
</script>
<%
return;
}
if(member.getMstate()!=2){
%>
<script>
alert("관리자가 아님");
location.href="<%=ctdx %>/index.jsp";
</script>
<%
}
%>
<h1>관리자 페이지</h1> ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery
event 제거
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding : 3em;
}
ul li{
border: 1px solid steelblue;
margin : 10px;
width: 50%;
list-style : none;
}
ul{
padding:10px;
}
ul li.select{
background-color: #eeeeee;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//1) 메뉴 항목(li)를 클릭하면 해당 메뉴를
//id가 result인 곳에 "회원가입을 선택하셨군요"
//1- 일반 이벤트 등록
// 선택자.on('이벤트종류',핸들러함수)
//2- 단축 이벤트 등록
// 선택자.click(핸들러 함수)
$(".menu li").on('click',function(){
$('#result').html("<h3>"+$(this).text()+"을 선택</h3>");
})
//이벤트를 제거하는 방법
/*
- off()
- off('이벤트')
*/
//문제2 #btn1을 클릭하면 메뉴에 적용되었던 click 이벤트를 모두 제거
//#result 깨끗하게
$("#btn1").click(function(){
$('.menu li').off('click');
$('#result').html('');
})
//문제3 #btn2를 클릭하면 "안녕하세요" 알람창을 띄우기
//단 한 번만
$("#btn2").one('click',function(){
alert("안녕하세요");
})
})
</script>
</head>
<body>
<h1>jQuery event</h1>
<button id="btn1"> 이벤트 제거(off)</button>
<button id="btn2"> 클릭 한 번(one)</button>
<ul class="menu">
<li>회원가입</li>
<li>로그인</li>
<li class="select">MyPage</li>
<li>Board</li>
<li>Cart</li>
</ul>
<p></p>
<div id="result"></div>
</body>
</html>이벤트 버블링
href태그에 값만 가져오고 싶은데 링크로 연결되는 것
=> 이벤트가 여러개 일어나는 것
1) a 링크를 클릭했을 때 href로 이동하는 것을 막는 방법 1
2) 핸들러에 이벤트 객체를 매개변수로 받는다
e.preventDefault() 함수를 호출 ==> 이벤트의 기본동작을 중지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(()=>{
//문제 1 #test1을 클릭하면 "구글로 이동"이라는 텍스트의
//글자색을 흰색 배경색을 maroon으로 변경
//1) a 링크를 클릭했을 때 href로 이동하는 것을 막는 방법1
$('#test1').click(function(){
$('#test1').css({"background-color":"maroon","color":"white"});
//alert($(this).attr("href"));
return false;
/*
return false를 주면
e.prevetDefault() 와
e.stopPropagation()을 함께 적용한 효과
*/
})
//2) 핸들러에 이벤트 객체를 매개변수로 받는다
//e.preventDefault() 함수를 호출 ==> 이벤트의 기본동작을 중지
$('#test2').click(function(e){
var str=$(this).attr('href');
$('#preview').html("<h3>"+str+"</h3>");
e.preventDefault();
//이벤트 버블링을 막는 방법 =>
e.stopPropagation();
})
//문제2 썸네일 이미지를 클릭하면 큰 이미지를 #preview인 곳에 보여주기
$('a[href^="images"]').click(function(){
var str=$(this).attr("href");
//alert(str);
$("#preview").html("<image src="+str+"></image>");
return false;
})
//문제3 #panel을 클릭하면 해당 div의 배경색을 노랑색으로
$("#panel").click(function(){
$(this).css("background-color","yellow");
})
//문제4 h1을 클릭하면 해당 div의 배경색을 하늘색
$("h1").click(function(e){
$(this).css("background-color","skyblue");
e.stopPropagation();
})
})
</script>
</head>
<body>
<div id="panel">
<h1><a id="test1" href="http://www.google.com">구글 이동</a></h1>
<h1><a id="test2" href="http://www.naver.com">네이버 이동</a></h1>
<a href="images/photo18.jpg"><img src="images/photo18_thum.jpg" alt=""></a>
<p></p>
<div id="preview">
</div>
<button id="b1">클릭1 - function 익명함수 사용</button>
<button id="b2">클릭2</button>
<script>
$('#b1').click(function(){
//this ==> 이벤트 소스
$(this).css("background-color","coral");
})
$('#b2').click((e)=>{
//화살표 함수를 쓸때는 this 사용을 주의하자.
// ==> this는 window 객체가 된다.
//$(this).css("background-color","green");
//이 때는 event객체의 currentTarget을 이용
$(e.currentTarget).css("background-color","green");
})
</script>
</div>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 67일차 - JSP 파일업로드, 파일다운로드, war배포, el표현식 jQuery pageXY, clientXY, dragdrop (0) | 2020.07.17 |
|---|---|
| 국비지원 66일차 - JSP cookie, 아이디 저장, 파일업로드 jQuery trigger, mouseover 특징, 위치값 (0) | 2020.07.16 |
| 국비지원 64일차 - JSP 페이징 처리, jQuery DOM삭제 (0) | 2020.07.14 |
| 국비지원 63일차 - JSP POST방식, 모듈화, jQuery 요소추가, tab실습 (0) | 2020.07.13 |
| 국비지원 62일차 - Bean scope , 우편번호검색, jQuery DOM 탐색 메소드, 실습 (0) | 2020.07.10 |