이제 진짜진짜진짜 본격적인 소스 구현을 시작하기에 앞서,
폴더 구조를 구축해두고 로그인 소스를 home.jsp에서 빼내어 별도의 로그인 화면을 만들고 header.jsp 를 만들어서 붙여줄 예정이다.
진작에 처음부터 따로 만들었으면 몸이 편했겠으나 나는 어리석은 닝겐....
1. 폴더 구조 만들기
css파일, js파일, 배경화면 등에 쓰일 이미지 파일을 담을 폴더들을 만들어줬다.
위치는 scr > main > webapp > resources 아래에 뒀다.
화면들 역시 폴더를 만들어서 각 폴더 안에서 관리하겠다.
src >main > webapp > WEB-INF > views 아래에 'admin', 'guest', 'note' 폴더를 각각 생성해줬다.
로그인 실패화면인 fail.jsp, 화면의 헤더로 쓰일 header.jsp, 그리고 홈화면은 아마도 범용으로 쓸 것이므로 따로 폴더에 안 넣고 내버려뒀다.
그러면 대충 폴더 구조는 아래와 같아진다.
2. 상단 메뉴바 구현 + 로그인 화면 분리
이제 저번에 대충 만들어둔 로그인 기능을 뽑아서 별도의 화면으로 만들고,
상단 메뉴바에 심은 링크를 통해 로그인 화면으로 넘어가는 구조로 바꿔주겠다.
일단 home.jsp 에서 로그인 입력란을 뽑아내고 body 에 아래와 같은 코드만 남겨둔다.
<jsp:include page="/WEB-INF/views/header.jsp" />
<div id="main">
<h3>main!!</h3>
</div>
이제 header.jsp 를 구현할 차례인데....
css를 드럽게 못하는 관계로 우리의 친구 w3schools.com 에서 공개한 소스를 그대로 가져다 썼다.
(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push)
내가 한 것이라곤 아주 약간만 내가 보고 수정하기 쉬운 방향으로 손봐준 정도...?ㅎㅎ...
좌측 슬라이드 내비게이션 + 상단 메뉴바가 로그인 화면을 제외하고 항상 떠있게 만들었다.
로그아웃 버튼을 구현하는건 뒤로 미루고 아래와 같이 만들었당
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My Home</title>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/home/resources/js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
//OPEN 클릭 시 사이드메뉴 펼침
$("#topBar span").on("click", function(){
$("#sideNav").attr("style", "width:250px");
$("#main").attr("style", "margin-left:250px");
});
//사이드메뉴의 X 버튼 클릭 시 사이드메뉴 접음
$("#sideNav span").on("click", function(){
$("#sideNav").attr("style", "width:0");
$("#main").attr("style", "margin-left:0");
});
//로그인 버튼 클릭 시
$("#login").on("click", function(){
var choice = confirm("관리자로 로그인하시겠습니까?");
if(choice == true){
location.href = "loginView";
}else{
return false;
}
});
});
</script>
<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 100;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
cursor : pointer;
}
#topBar {
width : 100%;
height: 40px;
background-color : black;
font-weight : bold;
}
#topBar span {
font-size : 30px;
cursor : pointer;
color : #f1f1f1;
}
#admin {
float : right;
color : #f1f1f1;
}
#admin button {
margin : 0 auto;
border : 1px solid #f1f1f1;
background-color : black;
color : #f1f1f1;
height : 40px;
width : 70px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="sideNav" class="sidenav">
<span class="closebtn">×</span>
<a href="/home">HOME</a>
<a href="#">ABOUT</a>
<a href="#">MAKINGS</a>
<a href="#">GUESTS</a>
</div>
<div id="topBar">
<span> ☰ MENU</span>
<div id="admin">
<button id="login" >LOGIN</button>
</div>
</div>
</body>
</html>
상단 메뉴바의 'LOGIN' 버튼을 클릭하면 로그인 화면으로 넘어가는 부분을 만들어줄 차례다.
WEB-INF > views > admin 폴더 아래에 adminLogin.jsp 파일을 새로 생성하고
원래 홈에 박혀있던 입력창을 긁어서 넣고 부트스트랩을 이용해서 쪼오금 옷을 입혀줬다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>My Home</title>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/home/resources/js/jquery-3.2.1.min.js"></script>
<style>
#loginDiv
{
padding : 5%;
}
#loginDiv input
{
width : 40%;
}
</style>
</head>
<body>
<form action="login" method="POST" name="loginform">
<div id="loginDiv">
<h3>관리자 로그인</h3>
<br>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">ID   </span>
<input name="id" type="text" class="form-control" aria-describedby="sizing-addon1" required style="width:40%;">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">PW</span>
<input name="pw" type="password" class="form-control" aria-describedby="sizing-addon1" required style="width:40%;">
</div>
<br>
<br>
<button class="btn btn-primary" type="submit"> Login</button>
<button class="btn btn-default" onclick="history.go(-1)">Back</button>
</div>
</form>
</body>
</html>
오랜만에 자바 소스 파일로 넘어가봤다.
AdminCtr.java 파일을 열고 jsp 를 호출하는 부분을 추가해서 아래와 같이 만들어줬다.
@Controller
public class AdminCtr {
@Autowired
private AdminSvc svc;
@RequestMapping("/loginView")
public String adminLoginView(Model model, HttpSession session) {
return "/admin/adminLogin";
}
@RequestMapping("/login")
public String adminLogin(@RequestParam("id") String id, @RequestParam("pw") String pw, HttpSession session, Model model) {
System.out.println("########################");
System.out.println("ID : " + id);
System.out.println("PW : " + pw);
System.out.println("########################");
String admin = svc.adminLogin(new AdminVO(id, pw));
if(admin != null) {
session.setAttribute("admin", admin);
return "home";
}else {
return "fail";
}
}
}
홈화면이 허전하니 배경이미지도 깔긴 깔아줘야 할 것 같다.
wallpaperswide.com 에서 그럴싸해보이는 이미지를 하나 주워왔다.
다른건 그대로고 home.jsp 의 head 부분에만 아래와 같이 css 를 추가했다.
<style>
body {
background-color: #cccccc;
background-image: url("/home/resources/img/home.jpg");
background-position : center center;
background-attachment: fixed;
background-repeat : no-repeat;
background-size : cover;
}
</style>
지금까지의 작업 결과 아래와 같은 화면들이 나온다.
