겉바속촉
[html] 간단한 쇼핑몰 만들기 -로그인 편 본문
728x90
반응형
개념을 먼저 정리해보도록 할게요:)
session 세션이란?
사용자 정보등의 데이터를 서버나 웹컨테이너에 저장할때 사용되는 객체입니다
주로 로그인 후의 사용자 정보나 쇼핑몰의 장바구니 추가 등의 데이터 공유가 필요할때 주로 session에 저장하여 사용한다
브라우져가 종료되지 않을때 까지 지정된 데이터를 페이지 이동에 상관없이 시간을 지정하여 저장가능합니다
쿠키(cookie)는 사용자의 컴퓨터에 저장되므로 보안에 취약한데 이를 보완하여 쎄션은 서버에 저장하므로 보안에도 훨씬 뛰어납니다
자 그럼 다음과 같이
layout이라는 폴더 만들었던 것 기억나시죠?
그리고 login폴더를 하나 새로 생성해주세요:)
우리의 목표는 메뉴에 있는 login을 클릭하면
다음과 같이 폼이 뜨게 해주고 싶은 거에요
1. DAO로 가서
로그인 했을 때 ID를 이용한 name 구하는 메서드 만들기
/////////////////////////로그인했을 때 id를 이용한 name 구하기
public String getName(String id)
{
String name="";
Connection conn=null;
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select * from member where id=?";
conn=db.getConnection();
try {
pstmt=conn.prepareStatement(sql);
pstmt.setString(1, id);
rs=pstmt.executeQuery();
if(rs.next())
{
name=rs.getString("name");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return id;
}
2. loginForm.jsp 코드 작성해주기
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<form action="<%=path%>/login/loginAction.jsp" method="post">
<table class="table table-bordered" style="width: 300px;">
<caption><b style="font-size: 15pt;">세션 로그인</b></caption>
<tr>
<td colspan="2">
<input type="checkbox" name="savechk">아이디저장
<b>보안 로그인</b>
</td>
</tr>
<tr>
<th>아이디</th>
<td>
<input type="text" name="id" size="10"
autofocus="autofocus" required="required">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pass" size="10"
required="required">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='<%=path %>/index.jsp?body=member/memberForm.jsp'">
</td>
</tr>
</table>
</form>
</body>
</html>여기서 포인트는 회원가입을 누르면 memberForm이 뜨도록 onclick했을 때 경로설정해주세요:)
컴파일 해주세요
그럼 다음과 같은 폼이 뜨는 게 보이시쥬??
회원가입 누르시면 우리가 알던 그 폼이 등장해요
3. DAO로 가서 아이디와 비밀번호가 맞는 지 체크해주는 메서드 만들기
////////////////아이디와 비밀번호가 맞는지 체크
public boolean isLogin(String id, String pass)
{
boolean flag=false;
Connection conn=null;
PreparedStatement pstmt=null;
ResultSet rs=null;
String sql="select * from member where id=? and pass=?";
conn=db.getConnection();
try {
pstmt=conn.prepareStatement(sql);
pstmt.setString(1, id);
pstmt.setString(2, pass);
rs=pstmt.executeQuery();
//비밀번호가 맞는 데이터가 있으면 true 반환
if(rs.next())
flag=true;
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally {
try {
rs.close();
pstmt.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return flag;
}
4. loginAction.jsp 만들어주기
<%@page import="member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
String id=request.getParameter("id");
String pass=request.getParameter("pass");
String save=request.getParameter("savechk");
//아이디에 비번이 맞는지 확인
MemberDAO dao=new MemberDAO();
boolean flag=dao.isLogin(id, pass);
//맞으면 세션에 저장 후 로그인 메인으로 이동
if(flag)
{
//로그인중 인지를 알 수 있는 세션에 저장
session.setAttribute("loginok", "yes");
//아이디와 체크값 저장
session.setAttribute("idok", id);
//체크하면 값으로 on 안 하면 null이 저장되는 것
session.setAttribute("saveok", save);
//세션에서 유지시간
session.setMaxInactiveInterval(60*60*8); ///8시간 서버에 정보가 유지
//로그인 메인으로 이동
response.sendRedirect(path+"/index.jsp?body=login/loginMain.jsp");
}else
{%>
<script type="text/javascript">
alert("아이디와 비밀번호가 맞지 않네요");
history.back();
</script>
<%}
%>
<body>
</body>
</html>
5. loginMain.jsp 코드 작성해주기
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<%
//세션에 저장된 loginok값을 찾는다
String loginok=(String)session.getAttribute("loginok");
if(loginok==null || loginok.equals("")) //로그아웃 상태
{%>
<jsp:include page="loginForm.jsp"/>
<%}else //로그인 상태
{%>
<jsp:include page="logoutForm.jsp"/>
<%}
%>
</body>
</html>
여기서 짚고 넘어갈 부분은
로그아웃 상태 ----> loginok==null || loginok.equals("") ----> loginForm이 필요
로그인 상태 ----> 로그아웃의 나머지 경우 ----> logoutForm이 필요
6. 그럼 이제 로그아웃 상태의 폼이 필요하기 때문에 logoutForm.jsp 만들기
<%@page import="member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<%
//세션으로부터 아이디를 얻어온다
String id=(String)session.getAttribute("idok");
//아이디에 해당하는 이름을 dao로부터 얻어온다
MemberDAO dao=new MemberDAO();
String name=dao.getName(id);
%>
<br><br>
<b style="color: blue;"><%=name%>님이 로그인 하셨습니다</b>
<input type="button" value="로그아웃"
onclick="location.href='<%=path%>/login/logoutAction.jsp'"><br><br>
<hr>
<img alt="" src="<%=path%>/image/maingImg.png">
</body>
</html>
7. logoutAction.jsp 만들기
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
//로그인에 대한 세션값을 삭제
session.removeAttribute("loginok");
//로그인 메인으로 이동...항상 메인을 통해 이동하게끔 만들어 주셔야...
response.sendRedirect(path+"/index.jsp?body=login/loginMain.jsp");
%>
<body>
</body>
</html>
8. logoutForm.jsp 만들기
<%@page import="member.model.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<%
//프로젝트 경로 구하기
String path=request.getContextPath();
%>
<body>
<%
//세션으로부터 아이디를 얻어온다
String id=(String)session.getAttribute("idok");
//아이디에 해당하는 이름을 dao로부터 얻어온다
MemberDAO dao=new MemberDAO();
String name=dao.getName(id);
%>
<br><br>
<b style="color: blue;"><%=name%>님이 로그인 하셨습니다</b>
<input type="button" value="로그아웃"
onclick="location.href='<%=path%>/login/logoutAction.jsp'"><br><br>
<hr>
<img alt="" src="<%=path%>/image/profile-picture.png">
</body>
</html>
9. loginForm.jsp 추가 작성해주기
저장해둔 값들을 확인하시면서 동일하게 넣어주셔야합니다:)
그리고 <body> 부분에서
아까 작성 하셨던 부분에서 다음과 같이 내용을 추가로 작성하셔야합니다:)
saveok가 null값이라면 --> 원래 있던 input 그대로 적용시켜주기
else (=saveok가 null값이 아니라면) --> 아이디 저장 check box에 check되어 있도록 해주기
이제 잘 되었는지 확인해볼까요?
로그인 창에서 로그인 - 다시 로그아웃 - 아이디저장에 체크되어있고 아이디에 아이디값 적혀있는 지 확인
728x90
반응형
'IT일기(하반기) > HTML' 카테고리의 다른 글
| [html] JSTL(Java Servlet Standard Tag Library) (0) | 2020.06.24 |
|---|---|
| [html] 간단한 쇼핑몰 만들기 - 방명록편 (0) | 2020.06.24 |
| [html] 간단한 쇼핑몰 만들기 - 수정, 삭제편 (0) | 2020.06.23 |
| [html] 간단한 쇼핑몰 만들기 (0) | 2020.06.22 |
| [html] jquery로 eventimage만들기 (0) | 2020.06.16 |
'IT일기(하반기)/HTML' Related Articles
more
