2022.04.27 - [Practice] - JSP로 반응형 게시판 만들기 [2]
JSP로 반응형 게시판 만들기 [2]
저번 포스팅 다음 글입니다!! 2022.04.27 - [Practice] - JSP로 반응형 게시판 만들기!!! [1] JSP로 반응형 게시판 만들기!!! [1] 안녕하세요 준입니다!! 어제 JSP와 JQUERY로 게시판을 만들어봤는데요 2022.04.26..
puenti.tistory.com
이제는 세션 관리를 해줘야 합니다
세션은 현재 접속한 회원에 할당해 주는 아이디입니다.
그럼 이제 로그인에 성공했을때 세션아이디를 부여해주는 것으로부터 세션관리가 시작됩니다!!
session.setAttribute(user.getUserID(), user.getUserPassword());
세션값을 로그인 성공했을때와 회원가입 성공했을때 추가해줍니다!!
if (result == 1){
session.setAttribute(user.getUserID(), user.getUserPassword());
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'main.jsp'"); // 로그인이 성공하면 main.jsp로 이동한다
script.println("</script>");
}else {
session.setAttribute(user.getUserID(), user.getUserPassword());
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}이렇게 session.setAttribute(user.getUserID(), user.getUserPassword()); 추가 해줍시다!!!
그럼 세션을 줬으면 세션을 해제도 해줘야겠죠?
그 세션을 해제해주는 페이지는 바로 로그아웃 페이지에서 해줄겁니다!
logoutAction 페이지를 만들어서
<body>
<%
session.invalidate(); // 현재 이 페이지에 접속한 회원의 세션을 빼앗아서 로그아웃되게 해준다
%>
<script>
location.href = 'main.jsp';
</script>
</body>해주면 됩니다ㅎㅎㅎ
그러면 로그인이 된 회원은 이제 회원가입과 로그인 페이지에 못 들어가게 해줘야겠죠?
loginAction 페이지와 joinAction 페이지에 아래 세션 값을 추가해줍니다
String userID = null;
if(session.getAttribute("userID") != null){
userID = (String) session.getAttribute("userID");
} // 세션이 존재하는 아이디들은 세션ID값을 받게 해주자
if (userID != null){
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 로그인이 되어있습니다')");
script.println("location.href = 'main.jsp'"); // 로그인이 되어있으니 메 화면으로 돌아간다
script.println("</script>");
}이 정도까지 완료했으면 이제 어느 정도의 로그인, 회원가입, 데이터베이스 작업은 끝났다고 볼 수 있어요!
그럼 이제는 메인 페이지 구현을 해보도록 할께요!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import = "java.io.PrintWriter"%> <!-- 스크립트 문장을 실행 할 수 있게 해주자 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8">
<meta name = "viewport" content="width=device-width", initial-scale="1">
<!-- 부트스트랩은 컴퓨터, 모바일 어떤걸로 접속하더라도 해상도에 맞게 디자인을 보여주는 템플릿. 그래서 반응형 웹에 사용되는 메타 태그를 적어준다 -->
<link rel="stylesheet" href="css/bootstrap.css"> <!-- 디자인을 담당하는 css 참조 완료 -->
<title>JSP 게시판 웹사이트</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-expanded="false">
<!-- 아이콘바 3개 -->
<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">
<ul class = "nav navbar-nav">
<li class = "active"><a href="main.jsp">메인</a></li>
<li><a href="bbs.jsp">게시판</a></li>
</ul>
<%
// 접속하기는 로그인이 안될 경우만 보이게
if(userID == null) {
%>
<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>
<!-- 경로와 오타가 없음에도 a 링크 실행이 안됨 -->
</ul>
</li>
</ul>
<%
} else { //로그인 한 사람들이 보이는 화면
%>
<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 = "logoutAction.jsp">로그아웃</a></li>
</ul>
</li>
</ul>
<%
}
%>
</div>
</nav>
<!-- 네비게이션 구동, 하나의 웹사이트에서 전반적인 구성을 보여주는 역할 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 제이쿼리를 가져오기 -->
<script src="js/bootstrap.js"></script>
<!-- 부트스트랩에서 기본적으로 참조 -->
</body>
</html>이 정도까지 구현이 되었으면 기본적인 네비게이션은 세션관리를 토대로 구축이 되어있어요!
메인 페이지예요!! 저번에 한거랑 별 다를거 없어보이죠?
기능들만 구현했기 때문에 전에 한거랑 별다를게 없는게 당연해요ㅎㅎ
우측 상단에 접속하기를 누르면 로그인, 회원가입 페이지로 연결이 되요!
로그인을 누르면 아래의 메인 페이지로 연결이 되요!!
로그인 한 사람이니 접속하기가 아닌 회원관리만 보이게 해줬구
클릭하면 로그아웃만 보이는거까지 설정해줬습니다!!!
이번 포스팅에서 로그인, 회원가입 페이지를 만들고 세션관리까지 해줬습니다!
이제 반 정도 한거 같아요!!!
다음 포스팅은 메인페이지를 만들고 게시판 데이터 베이스를 구축해보도록 할께요!!
'Practice' 카테고리의 다른 글
| JSP로 반응형 게시판 만들기[6/9], 게시판 보기, 목록 기능 구현하기 (0) | 2022.04.28 |
|---|---|
| JSP로 반응형 게시판 만들기[5/9], 글 쓰기 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [4/9], DB 구축, 게시판 기능 구현 (0) | 2022.04.28 |
| JSP로 반응형 게시판 만들기 [2/9], 회원가입 양식 만들기 (0) | 2022.04.27 |
| JSP로 반응형 게시판 만들기!!! [1/9] 로그인 페이지, 회원 DB 구축 (0) | 2022.04.27 |