Login 기능을 구현해보자
HTML, CSS, JS로 만들어내는 Login도 아직 잘 못하지만,
어쩌다 보니 JSP를 접목시켜서 원하는 page로 이동시킬 수 있는 login기능을 만들게 됐다.
[ A. actionTestForm.jsp ]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
.col-sm-4{
text-align : center;
margin : 30px;
padding: 30px;
width : 330px;
height : 350px;
word-break:break-all;
border : 2px solid lightblue;
border-radius : 10px;
}
</style>
<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>
<div class="container">
<div class="col-sm-4">
<form action="login.jsp">
<div class="form-group"><b>아이디</b> <input class="form-control" type="text" name="id"></div>
<div class="form-group"><b>암호</b> <input class="form-control" type="password" name="pw"></div>
<br>
<div class="form-group"><input type="radio" value="user" name="people" checked> 사용자 <input type="radio" value="manager" name="people"> 관리자</div>
<div class="form-group"><input type="submit" value="로그인" class="btn btn-primary" style="float:right"> </div>
</form>
</div>
</div>
</body>
</html>
사용자가 웹 사이트에 접속해서 아이디와 비밀번호를 입력할 수 있게 했다. bootstrap을 멋있게 사용하고 싶지만 아직 한참 알아가야 하는 단계인듯하다.
이 코드에서 내가 중점적으로 만들어 본 것은 사용자와 관리자의 구분이다. 정보를 입력한 뒤 사용자를 클릭하고 로그인을 하게 되면 사용자 페이지로, 관리자를 클릭하면 관리자 페이지로 옮겨주고 싶었기 때문이다.
<input type="radio" value="user" name="people" checked> 사용자
<input type="radio" value="manager" name="people"> 관리자
이 코드를 구현하면서 input type을 radio값으로 주면서 하나만 선택할 수 있게 했고, name을 people로 함으로써 다음 form으로 넘어가는 페이지에서 param 값으로 받아낼 수 있도록 했다.
[ B. login.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>
<% String id = request.getParameter("id");%>
<% String pw = request.getParameter("pw");%>
<% String people = request.getParameter("people");%>
<%
if(people.equals("user")){
%> <jsp:forward page="user.jsp"></jsp:forward>
<%
}else if(people.equals("manager")){
%> <jsp:forward page="manager.jsp"></jsp:forward>
<%
}else{
%>
<script> alert("다시 선택해주세요."); </script>
<%
}
%>
</body>
</html>코딩하고 보니 가독성이 상당히 떨어진다.
일단, 코드를 보면
<% String people = request.getParameter("people");%>
를 사용해서 name이 people로 넘어오는 parameter값을 변수 people에 넣어줬다.
그 변수의 값이 user인지 manager인지에 따라서
<jsp:forward page="user.jsp"></jsp:forward>
<jsp:forward page="manager.jsp"></jsp:forward>
if값에 결과값으로 해당 페이지에 갈 수 있도록 코딩했다.
[ C. manager.jsp와 D. user.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>
<h1>${param.people }로 로그인 성공</h1>
${param.id }님 환영합니다.
</body>
</html><%@ 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>
<h1>${param.people }로 로그인 성공</h1>
${param.id }님 환영합니다.
</body>
</html>이렇게 보면 두 코드는 완벽히 똑같다. 하지만 굳이 왜 나눠놓은 것일까?
현재는 기본적으로 출력한 결과값이 단순해서 이렇게 똑같지만 만약 관리자와 사용자의 권한을 다르게 주고 값을 다르게 보여주고 싶으면 많은 부분이 달라지는 점에 있기 때문이다.
오늘은 <jsp:forward>를 통해서 간단한 로그인을 구현해봤다.
아직 많이 부족하고, 점점 알아가다 보면 앞서 배웠던 것을 잊어버리곤 한다.
아쉬운 부분이 많지만 조금 더 열심히 하면 되겠지.