시작
1. cookit site에 필요한 개별적인
html페이지가 주어진 상태에서 시작한다.
2.기본적인 html,jquary,javascript,
json,jsp의 개념을 적용하면서, 개별적인
html 사이트를 유기적으로 이어보는 것에
중점을 두는 예제이다.
-주어진 html 파일 
-> 시작은 모든 파일을 jsp로 먼저 바꾸어주는 것으로 시작한다. java기반으로
필요한 기능을 추가하기 위해서이다.
1. eclipse에서 모든 파일을 넣는다.
2. 각 html파일에 두 가지를 선언해준다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8"); %>
3.그리고 저장!을 먼저해주고 (한국어가 깨지기 쉽기때문) 그리고나서
이름을 jsp로 바꿔준다.
eg) login.html->login.jsp
4. 각 파일을 열어서 마우스 오른쪽 버튼 클릭-> open with ->jsp editor로 열어준다.
5.(해도되고, 안해도 되는 것) 가끔 jquary 구문을 쓸 때가 있어서, 쓴이의 경우,
jquary 구문을 모두 추가해놓고, 나중에쓰지 않을 때, 빼는 편이다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
include - 영역 넣기
하나의 jsp 파일에서 모든 코드를 짜는 경우 보다는
영역이나 역할별로 나눠서 작업하는 경우가 많은데,
가장 흔하게 나누는게 header, footer 등이 있다.
문법:
- 정적인 방식: <%@ include file="관련 URL" %>
- 동적인 방식: <jsp:include page="relativeURL" />
[CODE] header/footer를 받아오는 파일: login.jsp에 보면,
<body> 시작 부분에
<!--header-->
<%@ include file="header_span.jsp" %>
<body>끝 부분에
<!--footer-->
<%@ include file="footer_span.jsp" %>
를 넣어주면, 다른 파일에서도 간단하게 공통된 부분을 가져올 수 있다.
[CODE] footer_span.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<footer>
<div class="wrapper">
<div class="footer-left">
<div class="footer-logo"></div>
<div class="copyright">© COOKIT ALL RIGHTS RESERVED</div>
</div>
<div class="footer-center">
<ul class="footer-nav">
<li class="first-list">이용약관</li>
<li class="green">개인정보처리 방침</li>
<li>법적고지</li>
<li>사업자정보 확인</li>
</ul>
<ul class="footer-info">
<li class="first-list">씨제이제일제당(주)</li>
<li>대표이사 : 손경식,강신호,신현재</li>
<li>사업자등록번호 : 104-86-09535</li>
<li class="first-list">주소 : 서울 중구 동호로 330 CJ제일제당 센터 (우) 04560</li>
<li>통신판매업신고 중구 제 07767호</li>
<li class="first-list">개인정보보호책임자 : 조영민</li>
<li>이메일 : cjon@cj.net</li>
<li>호스팅제공자 : CJ올리브네트웍스㈜</li>
</ul>
<div id="check">고객님은 안전거래를 위해 현금등으로 결제시 LG U+ 전자 결제의 매매보호(에스크로) 서비스를 이용하실 수 있습니다. <span class="check">가입 사실 확인</span></div>
</div>
<div class="footer-right">
<div id="shortcut">
<span>CJ그룹계열사 바로가기</span>
<div class="shortcut"></div>
</div>
<div class="call">고객행복센터 1668-1920</div>
<div class="inquery">1:1 문의</div>
</div>
</div>
</footer>
</body>
</html>
사이트들을 보면, 보통 이 부분들은 공통적이다. [CODE] header/footer를 받아오는 파일: login.jsp
<body>
<!-- header 부분 -->
<%@ include file="header_span.jsp" %>
<!-- header 부분 -->
<section>
<h1>로그인</h1>
<article id="category">
<ul>
<li class="selected">회원 로그인</li>
<li>비회원 주문조회</li>
</ul>
</article>
<form action="dologin.jsp" name="login" method="post">
<div class="id">
<input type="hidden" id="nickName" name="nickName">
<input type="text" name="id" id="myId" size="30" placeholder="CJ ONE 통합아이디 6~20자">
</div>
<div class="pw">
<input type="text" name="pw" id="myPw" size="45" placeholder="비밀번호 영문, 특수문자, 숫자혼합 8~12자">
</div>
<div id="save">
<div class="save"></div>
<span>아이디 저장</span>
</div>
<div id="find">
<span>아이디 찾기</span> <span class="separator">|</span> <span>비밀번호 찾기</span>
</div>
<button type="button" onclick="loginBtn()">로그인</button>
</form>
<ul class="login-icons">
<li class="phone"></li>
<li class="kakao"></li>
<li class="naver"></li>
<li class="facebook"></li>
</ul>
<div class="sign-up-info">
<h3>CJ ONE 통합회원이 아니신가요?</h3>
<p>CJ ONE 통합회원으로 가입하시면 CJ제일제당의 다양한 서비스(COOKIT, CJ THE MARKET, CJ제일제당 홈페이지)를 이용하실 수 있습니다.</p>
<div class="sign-up">CJ ONE 통합회원 신규가입하기 <div class="arrow"> </div></div>
</div>
</section>
<!-- footer 부분 -->
<%@ include file="footer_span.jsp" %>
<!-- footer 부분 -->
</body>login-page
login.jsp form 부분
code 해석 하기:
1. <form action="dologin.jsp" name="login" method="post">
action : form안에 들어가는 info를 넘겨주는 page
name : login.submit() <- function을 사용하게 될텐데,
login<-이 부분에 form의 name이 들어간다.
method: "get" vs "post" 방식이 있는데, 설명은 아래의 링크를 통해 대신한다.
get은 정보 보안이 안된다. post는 정보 보안이 된다고 보면 된다.
2.<input type="hidden" id="nickName" name="nickName">
input에 type="hidden"으로 만들어주면,
web상에는 안보이지만, form에 태워서 보내고 싶은 정보를 태워서 보낼 수 있다.
여기서는 nickName을 hidden으로 login할 때 정보를 같이 보내주려한다.
3.<input type="text" name="id" id="myId" size="30"
placeholder="CJ ONE 통합아이디 6~20자">
<input type="text" name="pw" id="myPw" size="45"
placeholder="비밀번호 영문, 특수문자, 숫자혼합 8~12자">
name 경우 session에 저장할 때 사용하고 id는 function내에서 사용하기위해 지정해준다.
placeholder경우 처음 아무것도 입력되지 않은 곳에 글자를 채워준다.
4. <button type="button" onclick="loginBtn()">로그인</button>
head부분에 loginBtn()에 관한 function을 만들어 줄 것이다.
✔type이 submit이 되어버리면 바로 페이지로 넘어가버려서,
button으로 type을 해주고 onclick을 만들어줘서,
function 내에서, 기능을 추가해주려한다.
<form action="dologin.jsp" name="login" method="post">
<div class="id">
<input type="hidden" id="nickName" name="nickName">
<input type="text" name="id" id="myId" size="30" placeholder="CJ ONE 통합아이디 6~20자">
</div>
<div class="pw">
<input type="text" name="pw" id="myPw" size="45" placeholder="비밀번호 영문, 특수문자, 숫자혼합 8~12자">
</div>
<div id="save">
<div class="save"></div>
<span>아이디 저장</span>
</div>
<div id="find">
<span>아이디 찾기</span> <span class="separator">|</span> <span>비밀번호 찾기</span>
</div>
<button type="button" onclick="loginBtn()">로그인</button>
</form>login.jsp - loginBtn() function part
1. my_version와 other_version 두 가지 버전을 올린 이유는
변수 선언 위치에 대해 생각해보기 위해서다.
my_version: check=0이 success:function(data) 내에서 선언되고 있다.
여기서 check는 global variable이 된다.
만약 check=0 앞에 let check=0이라고 하는 순간 success:function(data) 내에서
사용하는 local variable이 된다.
따라서 let check=0이라고 한다면,
if ( check == 0 ) {
alert("ID 또는 PW가 일치하지 않습니다. 다시 로그인해주세요.");
$("#myPw").val("");
$("#myId").val("").focus();
return false;
}
이 부분에서, check라는 변수의 값을 사용하지 못하게 된다.
왜냐하면, success:function(data) 밖으로 나왔기 때문이다.
반면,
other_version: let check 를 function loginBtn() 바로 밑에서
선언했으므로 check를 어디에서나 사용가능하게 되었다. 따라서 success:function(data) 안에서도
사용가능하다.
version 1(My_version)
<script>
function loginBtn(){
let id=$("#myId").val(); //<input type=text> 경우 value값은 입력 된 값이다.
let pw=$("#myPw").val();
if(id.length<1 ||pw.length<1){ //id라는 string의 length를 가져와서
//비밀번호와 아이디가 하나도 입력되지 않았을 때를 비교해준다.
alert("아이디와 비밀번호를 입력해주세요");
$("#myId").val("").focus(); //myId 부분으로가서 value값 비워주고 거기에 focus 맞춰주기
$("#myPw").val("");
return; //아래 ajax를 돌게하지 않기 위해, return 시킨다.
}
$.ajax({
url:"js/member.json",
type:"post",
dataType:"json",
success:function(data){
check=0
//let,var 없으면 자바스크립트내 global variable이 된다.
for(let i=0;i<data.length;i++){
//json 파일의 data 길이만큼 로그인 정보를 비교해준다.
if(data[i].id==id&&data[i].pw==pw){
alert("로그인을 성공하셨습니다.");
$("#nickName").val(data[i].nickName);
check=1;
//
login.submit(); // [name값].submit();
return; //success function 끝내기
}
}//for 문 끝
},//success function
error:function(){
alert("Error");
} //ajax error function
}); //ajax function
if ( check == 0 ) {
alert("ID 또는 PW가 일치하지 않습니다. 다시 로그인해주세요.");
$("#myPw").val("");
$("#myId").val("").focus();
return false;
} // 위에서 ajax function에서 로그인하지 못하면, check=0에서 1로
//update되지 못해서 check=0값을 그대로 가지게 되면서
// if(check==0)구문 안으로 들어가게 된다.
}
</script>version 2 (other_version)
<script>
function loginBtn() {
let id = $("#myId").val();
let pw = $("#myPw").val();
let check = 0;
if ( $("#myId").val().length < 1 || $("#myPw").val().length < 1 ) {
alert("ID 또는 PW를 입력해주세요");
$("#myId").val("").focus();
$("#myPw").val("");
return false;
}
$.ajax({
url:"js/member.json",
type:"post",
data:{"id":id,"pw":pw},
dataType:"json",
success:function(data) {
for ( let i = 0; i < data.length; i++ ) {
if ( data[i].id == id && data[i].pw == pw ) {
alert('로그인되었습니다');
$("#nickName").val(data[i].nickName);
login.submit();
check = 1;
} else {
alert("ID 또는 PW가 일치하지 않습니다. 다시 로그인해주세요.");
$("#myId").val("").focus();
$("#myPw").val("");
return false;
}
}
},
error:function() {
alert("Error");
}
});
}
</script>
가끔져요
퍼가요~