로그인 페이지 만들어 보기

JAVA/웹 프로그래밍 - JSP 2020. 11. 4. 22:14

로그인 페이지를 html을 활용해서 만들 수 있다.

그런데 디자인이나 이런 것에 자신이 없는 경우에 가지고 와서 쓰는 것도 한 가지 방법이 된다.

w3schools.com에 접속해서 reference로 가서 Bootstrap4 Reference로 이동한다.

그리고 BS4 Forms로 이동하자.

이 곳으로 오면 여러 예제가 있는데 마음에 드는 양식 있다면, 코드 전체를 복사해서

login_form.jsp에 복사하자.

page 지시자는 기존의 내용을 갖고 있어야 한다.

그리고 적당히 name을 변경하고 필요 없는 부분은 지우도록 하자.

귀찮으면 아래의 내용을 복사 붙여넣기 하자.

login_form.jsp는 단순히 화면을 보여주고 거기에 맞게 데이터를 입력받는 공간이다.

그러면, 별도로 login.jsp 파일을 하나 더 만들어서 이 데이터들이 입력이 되면 출력을 하도록 구성해보자.

login_form.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- 
<form action=login.jsp method=post>
아이디 : <input type=text name=id><p>
패스워드: <input type=password name=password><p>
<input type=submit value="로그인"><p>
</form>
 -->
 <div class="container">
  <h2>로그인</h2>
  <form action=login.jsp method=post>
    <div class="form-group">
      <label for="id">아이디:</label>
      <input type="text" class="form-control" id="id" name="id" placeholder="아이디를 입력하세요">
    </div>
    <div class="form-group">
      <label for="pwd">패스워드:</label>
      <input type="password" class="form-control" id="pwd" name="password" placeholder="패스워드를 입력하세요">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remeber">아이디/패스워드 저장</label>
    </div>
    <button type="submit" class="btn btn-default">로그인</button>
  </form>
</div>
</body>
</html>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리</title>
</head>
<body>
<%
String id=request.getParameter("id");
String password=request.getParameter("password");
String remeber=request.getParameter("remeber");
%>
아이디 : <%=id%> <p>
패스워드 : <%=password%> <p>
저장여부 : <%=remeber%> <p>

</body>
</html>

login_form.jsp에서 실행해서 아이디, 패스워드, 저장 여부를 선택해보자.

로그인 처리 login.jsp 에서 다음과 같이 출력된다.

위의 방식에서 login.jsp는 입력된 데이터를 출력을 하고 있는데

이번에는 입력된 아이디와 패스워드가 일치하는지 확인을 하고,

로그인된 페이지(logined_page.jsp)로 이동하거나 로그인 실패 페이지(logouted_page.jsp)로 이동할 것이다.

여기서 아이디와 패스워드는 각 각 "user", "1234"로 가정하자.

그리고 로그인(아이디와 패스워드가 일치)이 되면, 세션을 활용해서 창이 닫혀도 유지가 되는 상태로 관리하자.

그리고 세션은 로그인을 했을 때, 로그인 된 상태로 창을 닫고 다시 키면 로그인 상태가 되는데
이는 프로세스가 죽지 않고 살아있기 때문이다.

반대로 로그인 유지 상태에서 웹 페이지를 여러 개를 띄웠다고 가정해보자.

이 상태에서 로그아웃을 하면 나머지 웹 페이지에서도 모두 로그아웃 되어야 한다.

이 세션을 유지하는 것과 해제하는 것은 중요하다.

이 세션의 유지는 session 객체의 setAttribute메소드를 이용해서 한다.

그리고 세션을 안전히 제거하는 메소드는 invalidate이다.

session에 관한 내용은 아래를 참고하도록 하자.

designatedroom87.tistory.com/276?category=899787

HttpSession

HttpSession에 대하여 알아보자. 우선은 ServletContext에 대해 알아보고 오자. designatedroom87.tistory.com/272?category=899787 ServletContext ServletContext의 필요 이유는 값을 기억할 필요가 있을 때 필..

designatedroom87.tistory.com

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 처리</title>
</head>
<body>

<%
//	아이디와 패스워드를 가져오기
String id=request.getParameter("id");
String password=request.getParameter("password");

//	아이디와 패스워드를 확인하는 작업이 필요(나중에 DB에서 가져와야 한다.)
if (id.equals("user") && password.equals("1234"))
{
	//	세션 만들기(저장소 만들기). 세션 발급
	session.setAttribute("id", id);	//	"id"값과 id값
	
	//	사용자 시간을 저장(60초 후에 끊을 때 사용한다.) 자동으로 해제 된다.
	session.setMaxInactiveInterval(20);	//	매개변수는 초 단위
	
	//	세션 발급이 끝나면, 페이지 이동
	//	로그인 세션을 제공하고, 로그인된 페이지로 이동
	response.sendRedirect("logined_page.jsp");
}
else
{
	//	로그인 실패시, 로그인 실패 페이지를 이동
	response.sendRedirect("logouted_page.jsp");
}
%>

<%-- 
 
<%
String id=request.getParameter("id");
String password=request.getParameter("password");
String remeber=request.getParameter("remeber");
%>
 
아이디 : <%=id%> <p>
패스워드 : <%=password%> <p>
저장여부 : <%=remeber%> <p>

--%>
</body>
</html>

그리고, login.jsp에서 로그인이 되었냐 아니냐에 따라서

로그인된 페이지로 이동하거나 로그인 실패 페이지로 이동할 것이다.

이 페이지들을 각 각 만들어보자.

logined_page.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>
</head>

<body>



<!-- 로그인이 되었는지 확인해야 한다. -->
<%if (session.getAttribute("id") != null){%>
	로그인 되었습니다.<p>

	<a href="logout.jsp">로그아웃</a>
<%}
else{
	response.sendRedirect("login_form.jsp");
}
%>

</body>

</html>

logouted_page.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>
</head>
<body>
	로그인에 실패했습니다.<p>
	<a href="login_form.jsp">로그인 하기</a>
</body>
</html>

logout.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>
</head>
<body>

<!--  -->
<%
session.invalidate();	//	세션을 완전히 제거하는 함수

//	아래의 두 문장은 세션을 해제하는 방법이다.
//	session.removeAttribute("id");
//	session.setAttribute("id", null);

response.sendRedirect("logouted_page.jsp");
%>

</body>
</html>

전체 소스 파일

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

클라이언트에 대한 정보 찾기 (0)	2020.11.04
수 입력 받아서 홀수/짝수 판단하기 (0)	2020.11.04
form과 라디오 버튼 & select 사용하기 (0)	2020.11.04
page 지시자 (0)	2020.11.04
JSP에서의 변수의 표현법을 알아보기 (0)	2020.11.04

ABOUT ME

Design Design

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JAVA > 웹 프로그래밍 - JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바