JSP
JSP 무작정 해보기 - 로그아웃 페이지, 메인 페이지 틀 잡기
3년안에 내집 마련
2019. 11. 5. 18:46
반응형
이번 시간에는 로그아웃을 수행하는 페이지와 기본적인 메인 페이지 틀을 잡아 보도록 하겠다.
Logoutaction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "user.userDAO" %>
<%@ page import = "java.io.PrintWriter" %>
<% request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-type" content = "text/html"; charset="UTF-8">
<title>JSP 게시판</title>
</head>
<body>
<%
session.invalidate();
%>
<script>
location.href = "Main.jsp"
</script>
</body>
</html>코드가 생각 보다 간단하다
원리 또한 간단하다.
사용자가 로그아웃 버튼을 누르면 사용자로부터 세션을 빼앗은 후 Main페이지로 이동시키는 것이 끝이다.
다음과 같이 Logout이 완료되면 다음으로 메인페이지 틀을 잡아 보도록 하겠다.
Main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-type" content = "text/html"; charset="UTF-8">
<meta name = "viewport" content="width=device-width", inital-scale="1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>로그인 페이지</title>
</head>
<body>
<%
String userID = null;
if(session.getAttribute("userID") != null){
userID = (String)session.getAttribute("userID");
}
%>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type = "button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expended="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Main.jsp">jsp 연습</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<%
if(userID == null){
%>
<ul class="nav navbar-nav">
<li class="active">
<a href="Main.jsp">메인</a>
</li>
<li>
<a href="Practice.jsp">게시판</a>
</li>
<li>
<a href="tkdrms568.tistory.com">내 블로그 이동</a>
</li>
<li>
<a href="Join.jsp">회원가입</a>
</li>
<li>
<a href="Login.jsp">로그인</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Login.jsp">로그인</a></li>
<li><a href="Join.jsp">회원가입</a></li>
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li>
</ul>
</li>
</ul>
<%
} else{
%>
<ul class="nav navbar-nav">
<li class="active">
<a href="Main.jsp">메인</a>
</li>
<li>
<a href="Practice.jsp">게시판</a>
</li>
<li>
<a href="https://tkdrms568.tistory.com">내 블로그 이동</a>
</li>
<li>
<a href="Logoutaction.jsp">로그아웃</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Login.jsp">로그인</a></li>
<li><a href="Join.jsp">회원가입</a></li>
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<script src="https://code.jquery,com/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>위에 있는 코드는 Login.jsp 페이지를 가지고와 살짝 수정을 하였다.
우선 우리는 저번 시간에 세션 관리 하는 법을 배웠다.
이제 메인 페이지에서도 로그인이 되어 있는 사용자에게 보여주는 메뉴와 로그인이 되어 있지 않은 사용자에게 보여줘야 하는 메뉴가 다르기 때문에 그에 맞게 페이지가 보여지도록 작성해야 한다.
기본코드
<%
String userID = null;
if(session.getAttribute("userID") != null){
userID = (String)session.getAttribute("userID");
}
%>다음코드는 로그인 여부를 확인해주는 코드이다.
로그인 되어 있을 경우 보여줘야 하는 메뉴와 로그인이 되어있지 않을 경우 보여줘야 하는 코드가 다르기 때문에 다음 코드를 작성해서 로그인이 되어있는지 확인한다.
로그인이 되어 있지 않는 경우
<%
if(userID == null){
%>
<ul class="nav navbar-nav">
<li class="active">
<a href="Main.jsp">메인</a>
</li>
<li>
<a href="Practice.jsp">게시판</a>
</li>
<li>
<a href="tkdrms568.tistory.com">내 블로그 이동</a>
</li>
<li>
<a href="Join.jsp">회원가입</a>
</li>
<li>
<a href="Login.jsp">로그인</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">접속하기<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Login.jsp">로그인</a></li>
<li><a href="Join.jsp">회원가입</a></li>0
<li><a href="https://tkdrms568.tistory.com">내 블로그로 이동하기</a></li>
</ul>
</li>
</ul>로그인이 되어 있지 않은 경우 사용자에게 로그인을 하게 하거나 회원가입을 하게 하는 코드를 작성해 주어야 한다.
그렇기 때문에 다음과 같이 코드를 작성해 주어야 한다.
코드를 보면 <% %>코드가 있는데 html코드에서 JSP를 사용하기 위해 <%%>를 사용해준다.
로그인이 되어 있는 경우
} else{
%>
<ul class="nav navbar-nav">
<li class="active">
<a href="Main.jsp">메인</a>
</li>
<li>
<a href="Practice.jsp">게시판</a>
</li>
<li>
<a href="https://tkdrms568.tistory.com">내 블로그 이동</a>
</li>
<li>
<a href="Logoutaction.jsp">로그아웃</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class= "dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">회원관리<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="Login.jsp">로그아웃</a></li><!-- default로 적용되는 것은 로그인 -->
<li><a href="Join.jsp">회원관리</a></li><!-- dropmenu 2 -->
</ul>
</li>
</ul>
<%
}
%>다음 코드는 사용자가 로그인이 되어있는 경우이다.
로그인이 되어 있는 경우 사용자에게 로그아웃과 회원관리가 가능하도록 메뉴를 만들어 줘야한다.
반응형