티스토리 뷰
SpringBoot로 게시판 만들기 실습 / 4 - 1. 로그인, 로그아웃 기능 구현하기
GrapeMilk 2020. 12. 9. 16:22실습3에서는 프로젝트에 필요한 DB와 화면(메인, 로그인, 회원가입)을 설계했습니다.
이번장에서는 설계한 메인, 로그인 화면을 구현하겠습니다
실습3에서 생각해볼 내용
- 소프트웨어의 개발 과정
- DB 설계 과정
- DTO란?
Goal
- 메인 화면 구현
- 로그인 화면 구현
오늘 구현할 화면의 폴더 구조와 실행 화면을 미리 확인해보겠습니다.
1) 프로젝트 폴더 구조 (로그인, 로그아웃 기능까지)
2) 완성된 index.jsp 실행 화면
3) 로그인 성공 후 index.jsp 화면
1. 메인 화면 구현 (index.jsp)
- 사용자가 메인화면에 접근하면 로그인 유무를 판단하여 로그인 페이지를 보여주거나, 로그인 성공 화면을 보여줍니다.
1) index.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Coronabook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div align="center">
<h3>코로나 방문자 확인서비스</h3>
<c:if test="${user == null}">
<h3>${msg}</h3>
<%@ include file="/WEB-INF/views/user/login.jsp"%>
</c:if>
<c:if test="${user != null}">
<div>
<strong>${user.username}</strong>님 환영합니다. <a
href="${root}/user/logout">로그아웃</a>
</div>
<a href="${root}/article/write">글쓰기</a>
<br>
<a href="${root}/article/list?pg=1&key=&word=">글목록</a>
<br>
<a href="${root}/user/list">회원목록</a>
</c:if>
</div>
</body>
</html>[index.jsp 코드 설명]
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
- jstl 라이브러리를 사용하기 위해서는 <taglib>를 jsp파일에 include해야 합니다. 위의 코드는 jstl의 Core Tags를 사용할 수 있도록하는 <taglib>를 include하는 코드입니다. jstl의 태그 중 Core Tags 그룹은 jstl 태그중에서 가장 많이 사용됩니다. <c:set>, <c:choose> 등의 문법이 있습니다.
<c:set var="root" value="${pageContext.request.contextPath}" />- <c:set> 태그는 property를 set하기 위해 사용하는 jstl의 태그입니다. <c:set> 태그에 var로 변수를 선언하고 value에 담긴 값을 부여합니다. 값이 부여된 var는 하나의 JavaBean 객체로서 jsp파일 안에서 사용될 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>- jsp에서 jquery와 bootstrap을 사용하기 위해 선언한 코드들입니다. jquery는 javascrip를 좀더 편리하게 쓸 수 있도록 문법을 간편화한 라이브러리입니다. bootstrap은 반응형 모바일 우선 웹사이트를 만들기 위해 가장 유명한 css 프레임워크입니다.
<body>
<div align="center">
<h3>코로나 방문자 확인서비스</h3>
<c:if test="${user == null}">
<h3>${msg}</h3>
<%@ include file="/WEB-INF/views/user/login.jsp"%>
</c:if>
<c:if test="${user != null}">
<div>
<strong>${user.username}</strong>님 환영합니다. <a
href="${root}/user/logout">로그아웃</a>
</div>
<a href="${root}/article/write">글쓰기</a>
<br>
<a href="${root}/article/list?pg=1&key=&word=">글목록</a>
<br>
<a href="${root}/user/list">회원목록</a>
</c:if>
</div>
</body>- <c:if test~> : <c:if>태그는 if문과 비슷합니다. <c:if> is a JSTL core tag JSTL 코어 tag중 하나이며 조건문을 testing하기 위해 사용됩니다. <c:if test="${condition}"> 형식으로 사용되며 위의 코드에서는 user의 값을 확인하여 조건문을 실행합니다.
- ${root} : localhost:8000/coronabook(contextPath)과 일치합니다. c:set으로 미리 선언해 두었기 때문에 해당 url부분을 ${root}와 같이 사용할 수 있습니다.
<%@ include file="/WEB-INF/views/user/login.jsp"%>- <%@ include file=~%> : include 태그는 file명으로 작성한 jsp파일의 내용을 include를 작성한 곳에 삽입합니다. 따라서 user의 값을 확인한 뒤 user가 null이면 index.jsp는 사용자가 로그인을 할 수 있도록 login화면이 구현된 login.jsp파일을 include해줍니다.
[보너스 (더 알아보기 )]
* c:if test를 위한 user값은 어디에서 올까?
* What is the difference between <jsp:include page = … > and <%@ include file = … >? [duplicate]
2. 로그인 화면 구현 (login.jsp)
- 아이디와 비밀번호를 입력하여 로그인할 수 있는 페이지입니다. index.jsp에 include되어 화면에 보여집니다.
- 아이디 저장 기능은 쿠키개념이 필요하므로 모든 프로젝트가 끝난 뒤 추가적으로 구현하겠습니다.
1) login.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="root" value="${pageContext.request.contextPath}"/>
<script type="text/javascript">
$(document).ready(function() {
$("#loginBtn").click(function() {
if($("#userid").val() == "") {
alert("아이디 입력!!!");
return;
} else if($("#userpwd").val() == "") {
alert("비밀번호 입력!!!");
return;
} else {
$("#loginform").attr("action", "${root}/user/login").submit();
}
});
$('#mvRegisterBtn').focusin(function() {
$(location).attr("href", "${root}/");
});
});
</script>
</head>
<body>
<div class="container" align="center">
<div class="col-lg-6" align="center">
<form id="loginform" method="post" action="">
<div class="form-group" align="left">
<label for="">아이디</label>
<input type="text" class="form-control" id="userid" name="userid" placeholder="">
</div>
<div class="form-group" align="left">
<label for="">비밀번호</label>
<input type="password" class="form-control" id="userpwd" name="userpwd" placeholder="" onkeydown="javascript:if(event.keyCode == 13) {login();}">
</div>
<div class="form-group form-check" align="right">
<label class="form-check-lable">
<input class="form-check-input" type="checkbox" id="idsave" name="idsave"> 아이디저장
</label>
</div>
<div class="form-group" align="center">
<button type="button" id="loginBtn" class="btn btn-warning">로그인</button>
<button type="button" id="myRegisterBtn" class="btn btn-primary">회원가입</button>
</div>
</form>
</div>
</div>
[login.jsp 코드 설명]
<script type="text/javascript">
$(document).ready(function() {
$("#loginBtn").click(function() {
if($("#userid").val() == "") {
alert("아이디 입력!!!");
return;
} else if($("#userpwd").val() == "") {
alert("비밀번호 입력!!!");
return;
} else {
$("#loginform").attr("action", "${root}/user/login").submit();
}
});
$('#mvRegisterBtn').focusin(function() {
$(location).attr("href", "${root}/");
});
});
</script>- $(document).ready(function() ~)
: ready() method는 document가 로드 된 뒤(document object가 된 뒤) .ready()안에 작성된 function을 실행할 수 있게 합니다. 즉, $(document).ready()안에 작성한 function은 해당 page Dom이 JavaScript code를 실행할 준비가 된 뒤에 실행됩니다.
- $("#loginBtn").click(function()
: loginBtn으로 ID를 준 속성을 클릭하면 function을 실행합니다. 예제에서는 '로그인'을 클릭하면 해당 function을 실행하여 아이디와 비밀번호가 입력됐는지 확인합니다.
- $("#loginform").attr("action", "${root}/user/login").submit();
: ID가 loginform인 태그에 action속성을 추가하고 "${root}/user/login"의 값을 부여합니다. 아이디와 비밀번호가 올바르게 입력됐다면, form태그의 action속성으로 인해 ${root}/user/login URL로 로그인을 요청합니다. (POST방식으로 요청할 때 데이터는 request 객체의 body에 데이터가 실려 백엔드 서버로 이동합니다.)
다음 장에서는 이어서
로그인, 로그아웃 기능을 구현하겠습니다.
'Spring > SpringBoot & AWS' 카테고리의 다른 글
| SpringBoot로 게시판 만들기 실습 / 4 - 2. 로그인, 로그아웃 기능 구현하기 (5) | 2020.12.11 |
|---|---|
| SpringBoot로 게시판 만들기 실습 / 3. DB설계, 화면설계 (0) | 2020.12.08 |
| SpringBoot로 게시판 만들기 실습 / 2. 첫 번째 JSP 실행하기 (0) | 2020.12.08 |
| SpringBoot로 게시판 만들기 실습 / 1. 개발환경 준비 및 프로젝트 생성 (0) | 2020.12.07 |
- 20200510
- 20200503
- 20200425
- 20200406
- 20201204
- 20200413
- 20200512
- 20200423
- 20200804
- 20200502
- chapter7
- 20200624
- 20200424
- 20200330
- 20200428
- 20200504
- 생활코딩리눅스
- 20200317
- 20200622
- 20200421
- 20200417
- 20200403
- 20200429
- 20200319
- 백준
- 20200427
- 20200415
- 20200420
- chapter8
- likelion
- Total
- Today
- Yesterday