오늘은 로그인을 구현할 것이다.
세션을 통해 일반회원 / 관리자를 구분할 것이고, 관리자는 관리자 권한으로 전체 회원목록을 조회하거나 수정, 삭제 등이 가능하고 일반 회원은 나의 정보 수정과 회원 탈퇴가 가능하도록 만들 예정이다.
[loginView.do]
더보기
세션을 통해서 관리자는 헤더에 이렇게 표시되면서 바로 관리자 페이지로 이동하게 했고,
일반 회원은 이렇게 표시되게 하고 인덱스 페이지로 이동하게 했다.
[login.jsp]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login page</title>
<link rel="stylesheet" href="css/login.css" />
<script src="js/loginOk.js" defer></script>
</head>
<body>
<%@include file="common/header.jsp" %>
<div class="container">
<div class="inner-con">
<div class="login">
<form action="loginOk.do" method="post" id="loginForm">
<table>
<thead>
<tr>
<th>SIGN IN</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="userId" id="userId" placeholder="아이디를 입력해 주세요." /></td>
</tr>
<tr>
<td><input type="password" name="userPw" id="userPw" placeholder="비밀번호를 입력해 주세요." /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="button" value="로그인" id="loginOkBtn" /> <br />
<hr />
<a href="joinView.do">회원가입</a>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</div>
<%@include file="common/footer.jsp" %>
</body>
</html>/*login.css*/
@import url("common/reset.css");
@import url("common/header.css");
@import url("common/footer.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@500&display=swap');
.container {
width: 100%;
height: calc(100vh - 180px);
}
.inner-con {
width: 100%;
height: calc(100vh - 180px);
background-image: url("../img/ekuse2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
display: flex;
}
.login {
background: rgba(255, 255, 255, 0.5);
width: 700px;
display: flex;
align-items: center;
justify-content: center;
}
.login > form > table {
margin-left: auto;
margin-right: auto;
padding: 10px 10px;
width: 300px;
}
.login > form > table thead tr th {
color: white;
text-shadow: 1px 1px 1px gray;
font-size: 1.5em;
line-height: 80px;
font-family: 'Nunito', sans-serif;
}
.login > form > table tbody input {
width: 100%;
height: 40px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 2px 5px;
margin: 2px 0px;
font-family: 'Sunflower', sans-serif;
}
.login > form > table tfoot input {
width: 100%;
height: 40px;
border: none;
background-color: #A57C55;
color: #FFFFFF;
font-family: 'Sunflower', sans-serif;
letter-spacing: 5px;
font-size: 1em;
}
.login > form > table tfoot hr {
margin: 10px 0px;
}
.login > form > table tfoot a {
color: #9c786c;
text-shadow: 1px 1px 1px gray;
float: right;
font-family: 'Sunflower', sans-serif;
letter-spacing: 1px;
}로그인의 핵심은 세션에 따른 헤더의 변화이기 때문에 헤더의 코드도 추가한다!
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<div class="header">
<div class="nav">
<div class="top-nav">
<div class="gnb">
<ul>
<%
String sessionId=(String)session.getAttribute("sessionId");
if(sessionId==null) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="joinView.do">JOIN</a></li>
<li><a href="loginView.do">LOGIN</a></li>
<%
} else if(sessionId.equals("admin")) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="admin.do" class="a1">#관리자 페이지</a></li>
<li><a href="logout.do" class="a2">LOGOUT</a></li>
<li><a href="#"><%=sessionId %>님</a></li>
<%
} else if(sessionId!=null) {
%>
<li><a href="index.do">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="memberView.do?userId=<%=sessionId %>">MY PAGE</a></li>
<li><a href="logout.do" class="a2">LOGOUT</a></li>
<li><a href="#"><%=sessionId %>님</a></li>
<%
}
%>
</ul>
</div>
</div>
<div class="bottom-nav">
<div class="logo">
<img src="img/logo.png" alt="" />
</div>
</div>
</div>
</div>[ProjectDao - loginDo (로그인)]
자 그럼 로그인을 담당하는 로직을 작성해야 한다.
package org.project.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import org.project.dbConnect.DBConnect;
import org.project.dto.MemberDto;
//DataBase Access Object
public class ProjectDao {
//싱글톤
//클래스가 최초 한번만 메모리를 할당하고(Static) 그 메모리에 객체를 만들어 사용하는 디자인 패턴
//생성자를 외부에서 호출할 수 없도록 private 접근제한자
private static class singleton {
//정적 필드 static final => 한 번 초기값이 저장되면 변경 불가
private static final ProjectDao INSTANCE=new ProjectDao();
}
//생성자
private ProjectDao() {}
//외부 호출이 가능(public) 정적(static) 메소드
public static ProjectDao getInstance() {
return singleton.INSTANCE;
}
//로그인
public int loginDo(String userId, String userPw) {
Connection conn=null;
PreparedStatement pstm=null;
ResultSet rs=null;
String query="";
try {
conn=DBConnect.getConnection();
query="select userPw from pj_member where userId=?";
pstm=conn.prepareStatement(query);
pstm.setString(1, userId);
rs=pstm.executeQuery();
if(rs.next()) {
if(rs.getString(1).equals(userPw)){
return 1; //로그인 성공
} else {
return 0; //비밀번호 불일치
}
}
return -1; //아이디가 없음
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if(conn!=null) conn.close();
if(pstm!=null) pstm.close();
if(rs!=null) rs.close();
} catch (Exception e) {
e.printStackTrace();
} finally {}
}
return -2; //데이터베이스 오류
}
}PreparedStatement 객체를 통해서 userId를 세팅하고 쿼리문을 돌려서 해당하는 패스워드를 rs에 저장한다.
그럼 rs에는 DB안에 있던 userId의 비밀번호 값이 저장되어 있는거고 DB 안에 있던 유저 패스워드와 매개변수로 넘어온 패스워드가 일치하면 1을 리턴해서 로그인 성공, 일치하지 않으면 0을 리턴해서 로그인 실패.
그리고 rs에 아무것도 담기지 않은 null이라면 쿼리문이 틀렸거나 아이디가 없거나 해서 아무것도 담기지 않은 것이니까 -1을 리턴.
모두 아니라면 DB에 뭔가 오류가 있기에 -2를 리턴한다. 중요한건 1이 리턴되어야 성공이라는 것!
[loginOkCommend]
package org.project.commend;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.project.dao.ProjectDao;
public class LoginOkCommend implements ExcuteCommend{
@Override
public void excuteQueryCommend(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("로그인 commend");
String userId=request.getParameter("userId");
String userPw=request.getParameter("userPw");
ProjectDao dao=ProjectDao.getInstance();
HttpSession session=request.getSession();
int rs=dao.loginDo(userId, userPw);
String url="";
if(rs!=1) {
System.out.println("로그인 실패");
url="index.do";
} else if(userId.equals("admin") && userPw.equals("0713")) {
System.out.println("관리자 로그인 성공");
session.setAttribute("sessionId", userId);
url="/admin.jsp";
} else {
System.out.println("일반 회원 로그인 성공");
session.setAttribute("sessionId", userId);
url="index.do";
}
request.setAttribute("url", url);
}
}requset.getParameter 통해서 userId,userPw를 받아오고,
HttpSession session=request.getSession(); 을 통해서 세션을 생성한다.
여기에서 세션을 set해두고!
일반회원은 인덱스로 보내고 관리자는 바로 관리자 페이지로 이동시켰다.
커맨드를 컨트롤러에서 처리한다!
[admin.jsp]
관리자가 할 수 있는 기능들은 다양하겠지만 나중에 새로운 관리자 페이지를 추가하기 쉽게 Ex를 몇개 만들어 두고 일단 전체 회원 목록 조회하는 페이지를 만들었다.
이 웹 프로젝트의 핵심은 CRUD+login이니까!
여기서 CRUD란?
더보기
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.
지금까지 회원가입(Create), login을 구현했고 관리자 페이지를 통해서 회원목록 조회(Read), 회원정보 수정(Update), 회원삭제(Delete) 모두 구현할 수 있다.
다음엔 회원목록 조회를 구현할 것이다!
그럼 빠이!
'[개발 언어 & 프레임워크] > JSP' 카테고리의 다른 글
| [JSP] 5. WebProject(홈페이지 만들기) - 회원 탈퇴 구현하기 (0) | 2022.08.15 |
|---|---|
| [JSP] 4. WebProject(홈페이지 만들기) - 회원 상세 조회하기, 회원정보 수정하기 (0) | 2022.08.15 |
| [JSP] 3. WebProject(홈페이지 만들기) - 회원목록 조회하기 (0) | 2022.08.15 |
| [JSP] 1. WebProject(홈페이지 만들기) - 회원가입 구현하기 (0) | 2022.08.09 |
| [JSP] 0. WebProject(홈페이지 만들기) - index page (0) | 2022.08.07 |
