Web/JSP
JSP 게시판 만들기 3 - 회원가입 구현 및 세션관리
skrr
2021. 2. 1. 11:27
이제 로그인은 완료했고, 회원가입 폼부터 차례대로 만들어 보자. login.jsp를 복사해서 join.jsp를 만들어 준다.
(join.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--부트스트랩은 어떤device로 접속하더라도 해상도에 맞게 알아서 설정되는 탬플릿이다. -->
<meta name="viewport" content="width=device-width" , inital-scale="1">
<!--스타일시트를 참조, 주소는 css안에 부트스트랩.css-->
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<!-- 네비게이션 구현 네비게이션이라는 것은 하나의 웹사이트의 전반적인 구성을 보여주는 역할 -->
<nav class="navbar navbar-default">
<!-- header부분을 먼저 구현해 주는데 홈페이지의 로고같은것을 담는 영역이라고 할 수 있다. -->
<div class="navbar-header">
<!-- <1>웹사이트 외형 상의 제일 좌측 버튼을 생성해준다. data-target= 타겟명을 지정해주고-->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-exmaple="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 여긴 웹페이지의 로고 글자를 지정해준다. 클릭 시 main.jsp로 이동하게 해주는게 국룰 -->
<a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a>
</div>
<!-- 여기서 <1>에만든 버튼 내부의 데이터 타겟과 div id가 일치해야한다. -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- div 내부에 ul은 하나의 어떠한 리스트를 보여줄때 사용 -->
<ul class="nav navbar-nav">
<!-- 리스트 내부에 li로 원소를 구현 메인으로 이동하게만들고-->
<li><a href="main.jsp">메인</a></li>
<!-- 게시판으로 이동하게 만든다. -->
<li><a href="bbs.jsp">게시판</a></li>
</ul>
<!-- 리스트 하나 더 생성 웹페이지 화면에서 우측 부분-->
<ul class="nav navbar-nav navbar-right">
<!-- 원소를 하나 구현해 준다. 네비게이션 우측 슬라이드메뉴 구현 -->
<li class="dropdown">
<!-- 안에 a태그를 하나 삽입한다. href="#"은 링크없음을 표시한다. -->
<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 class="active" 현재 선택된 홈페이지를 의미 -->
<li><a href="login.jsp">로그인</a></li>
<li class="active"><a href="join.jsp">회원가입</a></li>
</ul>
</li>
</ul>
</div>
<!-- 네비게이션 바 구성 끝 -->
</nav>
<!-- 하나의 컨테이너처럼 감싸주는 역할 -->
<div class="container">
<div class="col-lg-4"></div>
<!-- 회원가입 폼은 위의 양식은 일치하며, 이제 내부 폼만 바꿔준다. -->
<div class="col-lg-4">
<div class="jumbotron" style="padding-top: 20px;">
<!-- 양식 삽입 post는 회원가입이나 로그인같이 어떠한 정보값을 숨기면서 보내는 메소드/ 로그인 Action페이지로 정보를보내겠다-->
<form method="post" action="joinAction.jsp">
<!-- 회원 가입에 맞게 위에 액션은 joinAction페이지로 밑에 제목은 회원가입 화면으로 변경 -->
<h3 style="text-align: center;">회원가입 화면</h3>
<div class="form-group">
<!-- 회원 가입에서도 userID or userPassword는 동일하게 가져가고, 회원가입에 필요한 나머지 속성추가 -->
<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>
<!-- userName 추가 -->
<div class="form-group">
<input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
</div>
<!-- 성별 선택 추가 -->
<div class="form-group" style="text-align: center;">
<!-- 버튼 공간을 따로 마련해준다.(남,녀) -->
<div class="btn-group" data-toggle="buttons">
<!-- 선택이 된곳에 표시를 하는 active를 설정해준다. -->
<label class="btn btn-primary active">
<input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
</label>
<label class="btn btn-primary">
<input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자
</label>
</div>
<!-- 성별 선택부분 완료 -->
</div>
<!-- email 작성부분 구현 -->
<div class="form-group">
<!-- placeholder는 아무런 입력이 없을때 띄워주는 값 -->
<input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20">
</div>
<!-- 버튼 또한 회원가입으로 value변경 -->
<input type="submit" class="btn btn-primary form-control" value="회원가입">
</form>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<!-- 애니메이션을 담당하게 될 자바스크립트 참조 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 특정홈페이지에서 제이쿼리 호출 -->
<script src="js/bootstrap.js"></script>
</body>
</html>위 처럼 만들어 주면, 이렇게 화면이 구성되게 된다.
말했듯이 DAO클래스 같은 경우에는 실제로 데이터베이스에 접근해서 데이터를 가져오거나, 데이터를 넣는 역할을 하는 데이터 접근 객체라고 했다. DAO에 회원 가입을 넣어주는 join함수를 만들어 보자.
(UserDAO.java)
package user;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class UserDAO {
//Database 접근 객체로 사용할 conn을 선언해주고,
private Connection conn;
// 정보를 담을 수 있는 객체 선언
private PreparedStatement pstmt;
private ResultSet rs;
//UserDAO를 생성자로 만들어 주고, 자동적으로 데이터베이스 연결이 이뤄지게 해주는 코드를 짠다.
public UserDAO() {
//예외 처리를 하기 위해서 try&catch 문을 쓴다.
try {
//dbURL안에 localhost라는 것은 본인 컴퓨터에 접속을 의미하고 3306포트에 연결된 BBSdb에 접속할 수 있게 해준다.
//강의랑 디비 버전을 다르게해서 뒤에 뭘더붙임 ㅇㅇ;
String dbURL = "jdbc:mysql://localhost:3306/BBS?serverTimezone=UTC";
//db에 접속하는 ID를 담는 부분
String dbID = "root";
//db에 접속하는 PW를 담는 부분
String dbPassword = "root";
//mysql에 접속할 수 있는 driver를 찾을수 있게 해주는 코드 driver라는건 mysql에 접속할 수 있도록 매개체 역할을 해주는 라이브러리이다.
//강의버전보다 한참 높은 버전의 디비를 써서 드라이버 주소가 좀다름
Class.forName("com.mysql.cj.jdbc.Driver");
//getConnection함수 내부에 dbURL에 root root 로 접속할 수 있게 해주는 데이터를 넣어 접속이 완료되면 conn객체안에 접속된 정보가 담기게 된다.
conn = DriverManager.getConnection(dbURL, dbID, dbPassword);
} catch (Exception e) {
//오류의 내용을 내부 콘솔에 띄우기 위한 함수이다.
e.printStackTrace();
}
}
//위에꺼는 실제로 mysql에 접속을 하게 해주는 부분이고, 이제 실제로 로그인을 시도하는 하나의 함수 구현 userID,userPassword를 입력 받아서 실행한다.
public int login(String userID, String userPassword) {
//이제 입력받은 userID 와 PW가 일치하는지 확인을 하기위해서 db내에서 userID 값에 대한 PW를 조회하는 쿼리를 넣어준다. *1.해킹방지를 위해 중간에 ?를 넣어놓고
String SQL = "SELECT userPassword FROM USER WHERE userID = ?";
//try,catch문으로 예외처리를 해주고
try {
//pstmt에 어떠한 정해진 sql문장을 데이터베이스에 삽입하는 형식으로 인스턴스를 가져온다.
pstmt = conn.prepareStatement(SQL);
//*2.쿼리 중 userID = ? 에 해당하는 부분에 입력받은 userID를 넣어주는 것이다. 그니까 바로 쿼리문으로 드가면 해킹틈 생기니까 setString으로 한번 거치고간다. 2말2야
pstmt.setString(1, userID);
//이렇게 db에 넣을 쿼리문 셋팅이 끝났다. 실행한 결과를 rs에다가 담아준다.
rs = pstmt.executeQuery();
//이제 결과의 존재 여부에 따른 행동을 실행시켜주는 부분을 만들어 보자, 아이디가 존재할때
if (rs.next()) {
//만약 rs에 들어있는 값과 db내부의 userPW가 일치하면 login성공
if (rs.getString(1).equals(userPassword))
//login 성공
return 1;
else
//아니면 비밀번호 미 일치 실행한다.
return 0;
}
// 아이디가 없을때
return -1;
//그 외의 예상 불가 예외는 catch로 잡아준다.
} catch (Exception e) {
//해당 예외 출력
e.printStackTrace();
}
// 데이터베이스 오류를 의미
return -2;
//로그인 시도 함수 작성 끝 loginAction Page 가자;
}
//db에 한명의 사용자를 입력받을 수 있는 회원가입 함수 (User user) - User클래스를 이용해서 만들어 질수있는 하나의 인스턴스다.
public int join(User user) {
//SQL안에 총5개의 값이 차곡차곡 들어갈 수 있는 쿼리를 작성 해 준다.
String SQL = "INSERT INTO USER VALUES (?, ?, ?, ?, ?)";
try {
//위에 작성한 SQL문장을 pstmt에 넣는 방식
pstmt = conn.prepareStatement(SQL);
//위의 쿼리문에 들어갈 각각의 데이터 삽입(index,값);
//값에는 매개변수로 넘어온 user변수에 getUserID()에다가 넣어준다는 것을 선언;
pstmt.setString(1, user.getUserID());
pstmt.setString(2, user.getUserPassword());
pstmt.setString(3, user.getUserName());
pstmt.setString(4, user.getUserGender());
pstmt.setString(5, user.getUserEmail());
//마지막으로 해당 pstmt를 실행한 결과를 반환해 준다.
return pstmt.executeUpdate();
//insert문장을 실행한 경우에는 반드시 0이상의 숫자가 반환 되기 때문에 -1이 아닌 경우에는 성공적인 회원가입이 이루어진 것이다.
}catch(Exception e) {
e.printStackTrace();
}
//데이터베이스 오류 발생
return -1;
}
}이제 접근 객체를 다 만들었으니 회원가입 페이지에 정보를 입력하게 된다면, joinAction페이지로 이동하게 될텐데, 구현 해 주도록 하자. 가자;
(joinAction.jsp)
<%@page import="user.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 우리가 만든 페이지를 사용하기 위한 임폴트 -->
<%@ page import="user.UserDAO"%>
<!-- 자바스크립트 문장을 사용하기 위해 사용 -->
<%@ page import="java.io.PrintWriter"%>
<!-- 건너오는 데이터를 UTF-8로 받기위해 가져오는것 -->
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- 현재 페이지에서만 bean이 사용가능하게 해주는태그 -->
<jsp:useBean id="user" class="user.User" scope="page" />
<!-- 회원가입에는 javaBeans에 작성된 5가지 변수를 다 박아야 하기때문에 선언해준다.-->
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPassword" />
<jsp:setProperty name="user" property="userName" />
<jsp:setProperty name="user" property="userGender" />
<jsp:setProperty name="user" property="userEmail" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Web Site</title>
</head>
<body>
<%
String userID = null;
if (session.getAttribute("userID") != null) {
userID = (String) session.getAttribute("userID");
}
if (userID != null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 로그인이 되어있습니다.')");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
//입력 안된 부분이 있을 시 회원가입 시에 사용자가 입력을 안한 모든 경우의 수를 입력해서 조건을 걸어주고,
if (user.getUserID() == null || user.getUserPassword() == null || user.getUserName() == null
|| user.getUserGender() == null || user.getUserEmail() == null) {
//PrintWriter를 이용해서
PrintWriter script = response.getWriter();
script.println("<script>");
//팝업을 띄워주고,
script.println("alert('입력이 안 된 사항이 있습니다.');");
//다시 돌려보낸다.
script.println("history.back()");
script.println("</script>");
//입력이 다 되었다면?
} else {
//UserDAO에서 만들었던 함수를 사용하기 위해서 인스턴스 생성
UserDAO userDAO = new UserDAO();
//userDAO에 있는 join함수 내의 각각의 변수들을 다입력 받아서 만들어진 user인스턴스가 join함수를 실행하도록 명령으로 넣어준것이다.
int result = userDAO.join(user);
//이 경우는 이미 해당아이디가 존재하는 경우밖에 없다. PRIMARY KEY로 userID를 줬기때문에,
if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 존재하는 아이디입니다.');");
script.println("history.back()");
script.println("</script>");
//정상적인 실행이 되었을때.
} else {
session.setAttribute("userID", user.getUserID());
PrintWriter script = response.getWriter();
script.println("<script>");
//메인페이지로 이동.
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
}
%>
</body>
</html>joinAction까지 마무리를 했다면 테스트를 해보자. 데이터를 다 입력하고, 회원가입을 누르면 main.jsp로 넘어가고,
db 테이블에 저장이 되었다면, 성공한 것이다. 이제 할 것은 세션관리인데, 세션이라는 것은 접속한 회원에게 할당 해 주는 고유의 ID이다. 우리의 웹서버는 한명의 회원을 세션ID로 구분을 할 수있는데, 로그인을 성공했을때 세션ID를 부여해주는것으로 부터 세션 관리가 시작된다고 할 수있다. loginAction페이지와 joinAction페이지의 로그인을 성공했을때 각각 세션을 부여 해주는걸 작성해 보자.
(loginAction.jsp)
<%@page import="user.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 앞서 만들었던 User.DAO의 객체를 사용하기위해 선언 -->
<%@ page import="user.UserDAO"%>
<!-- 자바스크립트 문장을 작성 하기위해 사용하는 내부라이브러리? -->
<%@ page import="java.io.PrintWriter"%>
<!-- 건너오는 모든 데이터를 UTF-8로 받기위해 가져오는것 -->
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- 한명의 회원 정보를 담는 전에만든 javaBeans를 사용한다는 것, scope로 현재 페이지에서만 사용을 선언-->
<jsp:useBean id="user" class="user.User" scope="page" />
<!-- 로그인 페이지에서 넘겨준 user정보를 받아서 한명의 사용자에 데이터에 값을 넣어주는 것 -->
<jsp:setProperty name="user" property="userID" />
<!-- 이렇게 하면 loginAction.jsp 안에 넘어온 데이터들이 그대로 담기게 된것이다! -->
<jsp:setProperty name="user" property="userPassword" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Web Site</title>
</head>
<body>
<%
//로그인을 한 회원들은 모두 세션아이디를 부여받기 때문에 로그인여부가 확인가능하다.
//로그인이 된 유저는 로그인과 회원가입페이지를 들어 갈 수없게 만드는 소스를 작성한다.
String userID = null;
//세션을 확인해서 userID에 세션이 존재하는 회원들은
if (session.getAttribute("userID") != null) {
//userID에 해당 세션ID를 넣어준다.
userID = (String) session.getAttribute("userID");
}
//이미 로그인이 된사람은 또 다시 로그인을 할수없게 막아주는 부분
if (userID != null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 로그인이 되어있습니다.')");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
//이제 넘어온 userID와 PW를 꺼내서 사용해보자. UserDAO인스턴스 생성
UserDAO userDAO = new UserDAO();
//UserDAO 에서 만들었던 public int login(userID,userPW)를 넣어주는 것을 변수 result에 담는다.
int result = userDAO.login(user.getUserID(), user.getUserPassword());
//login함수에서 return값이 1이라면
if (result == 1) {
//*1.로그인에 성공했을때 session.setAttribute로 userID라는 이름으로, 세션값으로는 getUserID 해당유저의 ID로 세션값을 넣어준다.
session.setAttribute("userID", user.getUserID());
//하나의 스크립트 문장을 넣어줄 수있도록 한다.
PrintWriter script = response.getWriter();
//println으로 접근해서 스크립트 문장을 유동적으로 실행 할 수 있게한다.
script.println("<script>");
//메인 페이지로 넘겨주는 선언을 해주고,
script.println("location.href = 'main.jsp'");
//스크립트 태그를 닫아준다.
script.println("</script>");
}
//비밀번호가 틀릴때
else if (result == 0) {
PrintWriter script = response.getWriter();
script.println("<script>");
//웹페이지에 팝업을 띄워준다.
script.println("alert('비밀번호가 틀립니다.');");
//이 전 페이지로 사용자를 다시 돌려보내는 함수이다.
script.println("history.back()");
script.println("</script>");
}
//아이디가 없을때
else if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('존재하지 않는 아이디입니다.');");
script.println("history.back()");
script.println("</script>");
}
//db연결 ㅈ같이 됬을때
else if (result == -2) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('데이터베이스 오류가 발생했습니다.');");
script.println("history.back()");
script.println("</script>");
}
%>
</body>
</html>
(joinAction.jsp)
<%@page import="user.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 우리가 만든 페이지를 사용하기 위한 임폴트 -->
<%@ page import="user.UserDAO"%>
<!-- 자바스크립트 문장을 사용하기 위해 사용 -->
<%@ page import="java.io.PrintWriter"%>
<!-- 건너오는 데이터를 UTF-8로 받기위해 가져오는것 -->
<%
request.setCharacterEncoding("UTF-8");
%>
<!-- 현재 페이지에서만 bean이 사용가능하게 해주는태그 -->
<jsp:useBean id="user" class="user.User" scope="page" />
<!-- 회원가입에는 javaBeans에 작성된 5가지 변수를 다 박아야 하기때문에 선언해준다.-->
<jsp:setProperty name="user" property="userID" />
<jsp:setProperty name="user" property="userPassword" />
<jsp:setProperty name="user" property="userName" />
<jsp:setProperty name="user" property="userGender" />
<jsp:setProperty name="user" property="userEmail" />
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Web Site</title>
</head>
<body>
<%
//로그인이 된 유저는 회원가입페이지를 들어 갈 수없게 만드는 소스를 작성한다.
String userID = null;
//세션을 확인해서 userID에 세션이 존재하는 회원들은
if (session.getAttribute("userID") != null) {
//userID에 해당 세션ID를 넣어준다.
userID = (String) session.getAttribute("userID");
}
//이미 로그인이 된사람은 또 다시 로그인을 할수없게 막아주는 부분
if (userID != null) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 로그인이 되어있습니다.')");
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
//입력 안된 부분이 있을 시 회원가입 시에 사용자가 입력을 안한 모든 경우의 수를 입력해서 조건을 걸어주고,
if (user.getUserID() == null || user.getUserPassword() == null || user.getUserName() == null
|| user.getUserGender() == null || user.getUserEmail() == null) {
//PrintWriter를 이용해서
PrintWriter script = response.getWriter();
script.println("<script>");
//팝업을 띄워주고,
script.println("alert('입력이 안 된 사항이 있습니다.');");
//다시 돌려보낸다.
script.println("history.back()");
script.println("</script>");
//입력이 다 되었다면?
} else {
//UserDAO에서 만들었던 함수를 사용하기 위해서 인스턴스 생성
UserDAO userDAO = new UserDAO();
//userDAO에 있는 join함수 내의 각각의 변수들을 다입력 받아서 만들어진 user인스턴스가 join함수를 실행하도록 명령으로 넣어준것이다.
int result = userDAO.join(user);
//이 경우는 이미 해당아이디가 존재하는 경우밖에 없다. PRIMARY KEY로 userID를 줬기때문에,
if (result == -1) {
PrintWriter script = response.getWriter();
script.println("<script>");
script.println("alert('이미 존재하는 아이디입니다.');");
script.println("history.back()");
script.println("</script>");
//정상적인 실행이 되었을때.
} else {
//*2.여기도 회원가입이 성공적으로 이루어진 해당사용자를 세션부여 해준다.
session.setAttribute("userID", user.getUserID());
PrintWriter script = response.getWriter();
script.println("<script>");
//메인페이지로 이동.
script.println("location.href = 'main.jsp'");
script.println("</script>");
}
}
%>
</body>
</html>이제 이렇게 세션을 부여 해주는 부분은 다끝났고, 다시 세션을 끊어주는 부분인 logoutAction부분을 작성해보자.
(logoutAction.jsp)
<%@page import="user.User"%>
<%@ 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">
<title>JSP Web Site</title>
</head>
<body>
<% //3.현재 logoutAction 페이지로 온 회원의 세션을 빼앗기도록 만들어서 로그아웃 시켜준다.
session.invalidate();
%>
<script>
//그 후 main.jsp로 돌려보내 주면 끝이다.
location.href= 'main.jsp';
</script>
</body>
</html>이제 한번 index페이지를 수정 해 주자.
<!-- 기본적인 웹사이트 틀을 잡아주는 부분 charset="언어" -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/custom.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<script>
//웹사이트에 처음 접속한 사람들은 index페이지가 아니라 main페이지로 이동하게 만들어 준다.
location.href = 'main.jsp';
</script>
</body>
</html>처음 접속한사람이 로그인 페이지가 아닌 메인페이지로 이동하게 만들어주고, 이제 제일 중요한 main.jsp페이지를 한번 만들어 주자.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!--Script문장을 실행 할 수 있도록 PrintWriter 라이브러리를 불러온다. -->
<%@ 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">
<!-- 참조 -->
<link rel="stylesheet" href="css/custom.css">
<title>JSP 게시판 웹 사이트</title>
</head>
<body>
<%
//로그인이 된 사람들은 로그인정보를 담을 수 있도록한다.
String userID = null;
//만약에 현재 세션이 존재한다면
if (session.getAttribute("userID") != null) {
//그 아이디값을 받아서 userID인스턴스로 관리할 수 있도록 한다.
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-expand="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">
<ul class="nav navbar-nav">
<!-- 현재 페이지가 메인이기 때문에 active를 달아주고, 현재 접속한 페이지가 메인페이지인걸 사용자에게 알려준다. -->
<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>
</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">
<!-- 해당 페이지로 이동 후 세션해지 후 main화면으로 링크 -->
<li><a href="logoutAction.jsp">로그아웃</a></li>
</ul></li>
</ul>
<%
}
%>
</div>
<!-- 이런식으로 세션 관리를 해서 회원 상태에 따라서 보여줄것과 안보여줄것을 분리 할 수있다. -->
</nav>
</body>
</html>세션 관리 같은 경우는 로그인,회원가입을 포함해서 갖갖이 보안에 있어서 중요한 요소기 때문에 잘 숙지해야 한다.