cookie
사용자의 간단한 정보들은 쿠키에 저장할 수 있다. 이 때 쿠키는 클라이언트 쪽 메모리나 파일로 저장된다.
1. 쿠키 저장단계
1) 쿠키 생성 단계 (key, value)
2) 쿠키 속성 설정 단계 (유효시간, 도메인, 경로 등....)
3) 쿠키 전송 단계 => response에 쿠키를 포함시켜 클라이언트 쪽으로 전송한다.
2. 쿠키 꺼내는 단계
=> request에 포함되어 있는 쿠키를 꺼내 활용한다.
쿠키에 저장할 값들은 영문으로만 가능, 세미콜론(;), 공백문자, 콤마(,) 등도 포함되면 안됨
$로 시작하면 안 됨
한글로 저장하고 싶으면 java.net.URLEncoder.encode 이용
쿠키에는 (String, String)만 저장 가능
cookie.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*, java.text.*" %>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
<h1>Cookie Test</h1>
<%
//1 쿠키 생성
Cookie ck1 = new Cookie("visitId","Swan");
Date d= new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-mm-dd_hh:mm:ss");
String time = sdf.format(d);
//key, value 형태로 저장
Cookie ck2 = new Cookie("visitTime",time);
//2 속성 설정 (expiry, path, domain)
//유효시간 설정은 setMaxAge(초);
//쿠키를 강제로 삭제하고자 한다면 setMaxAge(0)을 준다.
ck1.setMaxAge(60*60*24*3); //3일간 유효
ck2.setMaxAge(60*60*24*7); //7일간 유효
//3 쿠키 전송
response.addCookie(ck1);
response.addCookie(ck2);
%>
<h2>쿠키 저장 완료</h2>
<h2><a href="cookieList.jsp">쿠키 목록 보러가기</a></h2>
</div>
<jsp:include page="/foot.jsp"/>cookieList
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
<h1>쿠키 목록 보기</h1>
<%
/*쿠키가 전송되면 웹브라우저는 한번 저장된 쿠키를 매번 요청이 필요할 때마다
서버에 request를 통해 전송한다. 그러면 서버는 브라우저가 전송한
쿠키를 꺼내서 필요한 작업을 수행한다.*/
Cookie[] cks = request.getCookies();
if(cks!=null){
out.println("<h2>클라이언트로 부터 넘어온 쿠키들</h2>");
for(Cookie ck : cks){
String key = ck.getName();
String val = ck.getValue();
%>
<h3><%=key%> => <%=val%> , path=<%=ck.getPath() %>, domain=<%=ck.getDomain()%></h3>
<%
}
}
%>
</div>
<jsp:include page="/foot.jsp"/>아이디 저장
쿠키를 저장한 경로와 꺼내는 경로는 같아야 한다.
경로가 다르면 꺼낼 수 없다
==> 저장할때 경로를 설정해야한다.
ck.setPath("/"); 를 해주면 프로젝트 어디서든 접근 가능하다.
쿠키 만들기
<%@ 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");
//아이디 저장 체크박스 파라미터값 받기
String chkId = request.getParameter("saveId");
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);
//saveId에 체크했다면 쿠키를 생성해서 사용자 아이디를 저장하고 유효시간을 설정한다. (7일간)
//response통해 쿠키를 전송한다.
Cookie ck = new Cookie("saveId",loginUser.getUserid());
if(chkId!=null){
//아이디 저장에 체크를 한 경우
ck.setMaxAge(60*60*24*7);
}else{
ck.setMaxAge(0);
}
response.addCookie(ck);
response.sendRedirect("../index.jsp");
return;
}
%>저장한 쿠키 통해서 저장 아이디 보여주기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- SignIn.jsp-->
<jsp:include page="/top.jsp"/>
<script>
//로그인 버튼을 클릭하면 유효성 체크 userid,pwd 입력값 체크
$(function(){
$("#btnLogin").click(function(){
if(!loginF.userid.value||!loginF.pwd.value){
alert("아이디 비밀번호 입력");
return;
}
//입력값이 올바르면 submit()되도록 처리
loginF.submit();
});
});
</script>
<%
//저장된 아이디 쿠키를 거내서 아이디 입력폼에 해당 값을 출력하자
Cookie []cks = request.getCookies();
String val="User Id";
if(cks!=null){
for(Cookie ck : cks){
String key = ck.getName();
if(key.equals("saveId")){
val = ck.getValue();
}
}
}
%>
<h1 class="text-primary text-center">SignIn</h1>
<form name="loginF" id="loginF" method="post" action="loginEnd.jsp">
<div class="row">
<div class="col-md-8 offset-md-2">
<table class="table table-bordered">
<tr>
<td>아이디</td>
<td>
<input type="text" name="userid" id="userid" value=<%=val%> placeholder="User ID" class="form-control">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td>
<input type="password" name="pwd" id="pwd" placeholder="Password" class="form-control">
</td>
</tr>
<tr>
<td colspan="2">
<label for="saveId" class="form-check-label ml-4">
<input type="checkbox" class="form-check-input" name="saveId" id="saveId">아이디 저장
</label>
<button type="button"class="btn btn-success ml-3" id="btnLogin">로그인</button>
</td>
</tr>
</table>
</div>
</div>
</form>
<jsp:include page="/foot.jsp"/>파일업로드
파일 업로드시 주의사항
1) form의 method 속성은 반드시 post로 주어야 한다.
2) post방식의 경우 인코딩방식(ectype)이 2가지가 있는데
이중 multipart / form-data 지정해야 첨부파일 데이터가 함께 서버에 전송된다.
참고> enctype
1. application / x-www-form-url-encoded : 디폴트값
=> 이 경우는 첨부된 파일의 이름만 서버에 전송된
2. multipart / form-data
=> 이 경우는 파일이름과 함께 파일 데이터가 전송된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
<h1 class="text-danger text-center m-3">파일 업로드 1</h1>
<form name="fileF" id="fileF" method="post" action="uploadEnd.jsp" enctype="multipart/form-data">
<div class="row">
<div class="col-md-10 offset-md-1">
<table class="table table-bordered">
<tr>
<td>올린이</td>
<td>
<input type="text" name="name" id="name" placeholder="글쓴이" class="form-control">
</td>
</tr>
<tr>
<td>첨부파일1</td>
<td>
<input type="file" name="filename" id="filename" class="form-control">
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" class="btn btn-success ml-3" id="btnUp">업로드</button>
</td>
</tr>
</table>
</div>
</div>
</form>
</div>
<jsp:include page="/foot.jsp"/>
MultipartRequest 를 사용해보자.
[1]다운로드: www.servlets.com/cos/ ==> zip파일 다운로드 받아 압출을 풀면 cos.jar파일 => 복사하여 C:/Tomcat 8.5/lib 아래 붙여넣기
[2]업로드할 디렉토리 지정 => /MyWeb/WebContent/Upload
[3]패키지 import : com.oreilly.*, com.oreilly.servlet.multipart.*
uploadEnd2.jsp
request객체를 mr이 가져간다.
따라서 mr.getParameter();를 사용
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.oreilly.*, com.oreilly.servlet.*"%>
<jsp:include page="/top.jsp"/>
<div class="text-left p-5">
<h1>MultipartRequest를 이용한 파일 업로드</h1>
<%
String upDir="C:\\myjava\\workspace\\MyWeb\\WebContent\\upload";
MultipartRequest mr=null;
try{
DefaultFileRenamePolicy df= new DefaultFileRenamePolicy();
mr= new MultipartRequest(request,upDir,10*1024*1024,"UTF-8",df);
//최대 업로드 용량 : 10M => 이를 초과하면 IOException이 발생함
out.println("<h2 class='text-success'>업로드 성공<h2>");
out.println(upDir+"<br>");
//1.파라미터값 얻기
//String name=request.getParameter("name")[X]
String name=mr.getParameter("name");
//2.업로드한 파일면 얻어오기
//String filename=mr.getParameter("filename");[X]
String filename = mr.getFilesystemName("filename");
//원본파일명
String originfilename = mr.getOriginalFileName("filename");
//첨부파일 크기
java.io.File f= mr.getFile("filename");
long fsize=0;
if(f!=null){
fsize=f.length();
}
//첨부파일의 컨텐트 타입
String ctype = mr.getContentType("filename");
out.println("<h2>올린이: "+name+"</h2>");
out.println("<h2>첨부파일명: "+filename+"</h2>");
out.println("<h2>원본파일명: "+originfilename+"</h2>");
out.println("<h2>파일크기: "+fsize+"bytes</h2>");
out.println("<h2>파일 컨텐트 타입: "+ctype+"</h2>");
}catch(java.io.IOException e){
out.println("<h2 class='text-danger'>파일 업로드 실패</h2>");
//파일 용량 초과 or enctype이 multipart/form-data가 아닐 때 예외 발생함
e.printStackTrace();
}
%>
</div>
<jsp:include page="/foot.jsp"/>ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery
trigger
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex23.event3</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('.btn1').click(function(){
alert("3");
//선택자.trigger('이벤트종류')
//btn1을 클릭하면 btn2의 mouseover한 효과
$('.btn2').trigger('mouseover');
})
$('.btn2').click(function(){
alert("3");
})
$('.btn2').mouseover((e)=>{
$(e.currentTarget).css("background-color","tomato");
})
$('.btn2').mouseleave((e)=>{
$(e.currentTarget).css("background-color","");
})
})
</script>
</head>
<body>
<h1>이벤트 강제 발생</h1>
<button class="btn1">버튼1을 누르면 버튼 2도 함께 누른 효과</button>
<button class="btn2">버튼2</button>
</body>
</html>mouseover 특징
mouseover이벤트는 이벤트 버블링을 적용한다.
따라서 outer내부의 inner안에 들어가도 이벤트를 발생
반면 mouseenter / mouseleave는 이벤트 버블링을 적용하지 않는다.
hover은 mouseenter와 mouseleave를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex24_event_mouseover_out</title>
<style>
.outer{
width : 200px;
height: 200px;
background-color: chartreuse;
padding: 50px;
margin: 10px;
border : 2px solid sienna;
}
.inner{
width: 100%;
height: 100%;
background-color: darkcyan;
border : 2px solid sienna;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//.outer에 mouseover시 배경색 변경
//mouseout시 배경색을 원래
// $('.outer').mouseover((e)=>{
// $(e.target).css("background-color","tomato");
// $('body').append("Mouseover: "+e.target.id+"<br>");
// })
// $('.outer').mouseout((e)=>{
// $(e.target).css("background-color","");
// })
// $('.outer').mouseenter((e)=>{
// $(e.target).css("background-color","tomato");
// $('body').append("Mouseover: "+e.target.id+"<br>");
// })
// $('.outer').mouseleave((e)=>{
// $(e.target).css("background-color","");
// })
//e.pageX : 브라우저 화면을 기준으로 한 마우스의 x 좌표값
//e.pageY : 브라우저 화면을 기준으로 한 마우스의 y 좌표값
$('.outer').hover((e)=>{$(e.currentTarget).css("background-color","tomato");
$('body').append("Mouseover: "+e.target.id+"<br>");
e.stopPropagation()
},(e)=>{$(e.currentTarget).css("background-color","");
e.stopPropagation()})
})
</script>
</head>
<body>
<div class="outer" id="a">.outer
<div class="inner" id="b">
.inner
</div>
</div>
</body>
</html>이미지 바꾸기
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>gallery1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:black;
}
#container{
width:1000px;
margin:20px auto;
}
#navi{
width:300px;
float:left;
}
#navi ul{
height:460px;
}
#navi ul li{
width:150px;
float:left;
}
#navi ul li img{
border:3px solid white;
}
#main{
width:650px;
float:right;
}
#main img{
border:3px solid white;
}
</style>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var str = $(this).attr('href');
//$('#main img').attr('src',str);
$('#main>img').before("<img src='"+str+"'>");
$('#main>img:last').slideUp(10,function(){
$(this).remove();
});
return false;
})
});
</script>
</head>
<body>
<div id="container">
<div id="navi">
<ul>
<li>
<a href="../images/photo1.jpg">
<img src="../images/photo1_thum.jpg" alt="샹제리아" />
</a>
</li>
<li><a href="../images/photo2.jpg"><img src="../images/photo2_thum.jpg" alt="장미" /></a></li>
<li><a href="../images/photo3.jpg"><img src="../images/photo3_thum.jpg" alt="바다" /></a></li>
<li><a href="../images/photo4.jpg"><img src="../images/photo4_thum.jpg" alt="문" /></a></li>
<li><a href="../images/photo5.jpg"><img src="../images/photo5_thum.jpg" alt="바다" /></a></li>
<li><a href="../images/photo6.jpg"><img src="../images/photo6_thum.jpg" alt="자양화" /></a></li>
<li><a href="../images/photo7.jpg"><img src="../images/photo7_thum.jpg" alt="하늘" /></a></li>
<li><a href="../images/photo8.jpg"><img src="../images/photo8_thum.jpg" alt="건물" /></a></li>
</ul>
</div>
<div id="main">
<img src="../images/photo1.jpg" alt="자양화" />
</div>
</div>
</body>
</html>전역위치
offset().left / offset().top
지역위치
position().left /position.top
<!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> 위치값 </title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 9pt;
}
#info {
border: 1px solid #000;
height: 30px;
margin: 50px 0 0 100px;
width: 500px;
}
#parent1 {
border: 1px solid #000;
position: absolute;
width: 500px;
height: 400px;
left: 100px;
top: 100px;
}
.myimg {
position: absolute;
width: 120px;
}
.myimg p {
position: absolute;
margin-top: 20px;
text-align: center;
width: 100%;
}
#myimg1 {
left: 50px;
top: 100px;
}
#myimg2 {
left: 150px;
top: 200px;
}
#myimg3 {
left: 180px;
top: 50px;
}
#myimg4 {
left: 350px;
top: 200px;
}
#myimg5 {
left: 50px;
top: 300px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
/*
예제2: 실행 화면처럼 클릭한 이미지의
지역 위치 값을 #info에 출력해 주세요.
*/
$(function(){
//지역위치
$('.myimg').click(function(){
//클릭한 이미지 앞에 있는 p요소의 텍스트 값을 알림창으로 출력
//alert($(this).prev().text());
var x = $(this).position().left;
var y = $(this).position().top;
$('#info').text("ID: "+$(this).attr('id')+" "+x+"/"+y);
})
//전역위치
// $('.myimg').click(function(){
// var x = $(this).offset().left;
// var y = $(this).offset().top;
// $('#info').text("ID: "+$(this).attr('id')+" "+x+"/"+y);
// })
})
</script>
</head>
<body>
<h1>지역위치값 알아내기- position().left(), position.top()</h1>
<h1>전역위치값 알아내기- offset().left(), offset.top()</h1>
<div id="info">
위치 값이 이곳에 출력될거에요.
</div>
<div id="parent1">
<div id="myimg1" class="myimg">
<p>
1
</p><img src="images/ca1.jpg">
</div>
<div id="myimg2" class="myimg">
<p>
2
</p>
<img src="images/ca1.jpg">
</div>
<div id="myimg3" class="myimg">
<p>
3
</p>
<img src="images/ca1.jpg">
</div>
<div id="myimg4" class="myimg">
<p>
4
</p>
<img src="images/ca1.jpg">
</div>
<div id="myimg5" class="myimg">
<p>
5
</p>
<img src="images/ca1.jpg">
</div>
</div>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 68일차 - JSP 제약조건, MVC구조 모델2, jQuery size, plugin (0) | 2020.07.20 |
|---|---|
| 국비지원 67일차 - JSP 파일업로드, 파일다운로드, war배포, el표현식 jQuery pageXY, clientXY, dragdrop (0) | 2020.07.17 |
| 국비지원 65일차 - JSP 로그인, 로그아웃, 세션, 관리자 jQuery event 제거, 이벤트 버블링 (0) | 2020.07.15 |
| 국비지원 64일차 - JSP 페이징 처리, jQuery DOM삭제 (0) | 2020.07.14 |
| 국비지원 63일차 - JSP POST방식, 모듈화, jQuery 요소추가, tab실습 (0) | 2020.07.13 |