Spring Framework (9) - Bootstrap 설정 및 로그인, 회원가입 화면 구현

일단 여기서 부터는 스프링 시큐리티 설정을 먼저 하고 나서 작업이 되어야 한다. 여기의 작업이 선행된 다음 진행하도록 하자. 일단 부트스트랩 설정을 하기 위해서는 이 홈페이지에서 관련 내용에 대해서 일단 알아보자. 부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크라고 하는데, 간단하게 말하면 화면을 예쁘게 만들기 위해 많은 시간을 소모하지 않고 표준적이고 깔끔한 화면을 만들어주는 것이라고 보면 될 것 같다.

홈페이지에서 Compiled CSS and JS 파일을 다운로드 받고 /spring/src/main/webapp/resources/bootstrap/4.5.2 경로에 파일을 넣어준다. 버전에 따라 관리가 용이하게 하기 위해 경로를 이런식으로 만드는 것이 좋을 것 같다. 개인적으로 favicon 같은 것도 생성하면 좋을 것 같다. 나는 생성하여 /spring/src/main/webapp/resources/favicons 하에 종류별로 위치 시켰다.

이제 소스 파일만 나열한다. 화면은 부트스트랩 홈페이지의 예제 소스를 가져다 썼다.

/spring/src/main/webapp/WEB-INF/views/sign/signUp.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!doctype html>

<head>

</head>

<body>

<sec:csrfInput />

<h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>

</div>

<label for="inputEmail">Email address</label>

</div>

<label for="inputPassword">Password</label>

</div>

</form>

</body>

</html>

/spring/src/main/webapp/WEB-INF/views/sign/signIn.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!doctype html>

<head>

content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="author"

content="">

href="">

href="${pageContext.request.contextPath}/resources/favicons/apple-icon-180x180.png"

sizes="180x180">

sizes="32x32" type="image/png">

sizes="16x16" type="image/png">

content="${pageContext.request.contextPath}/resources/favicons/browserconfig.xml">

</head>

<body>

<sec:csrfInput />

<img class="mb-4" src="${pageContext.request.contextPath}/resources/favicons/favicon-96x96.png"

alt="" width="72" height="72">

<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>

</div>

<input type="email" id="inputEmail" class="form-control" name="email"

placeholder="Email address" required autofocus> <label

for="inputEmail">Email address</label>

</div>

<input type="password" id="inputPassword" class="form-control" name="password"

placeholder="Password" required> <label for="inputPassword">Password</label>

</div>

Remember me

</label>

</div>

<button class="btn btn-lg btn-primary btn-block" type="submit">Sign

In</button>

</form>

</body>

</html>

/spring/src/main/java/com/doh/yun/sign/controller/SignController.java

package com.doh.yun.sign.controller;

import java.util.Locale;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

@Controller

public class SignController {

private final Logger logger = LoggerFactory.getLogger(this.getClass());

@RequestMapping(value = "/signup", method = RequestMethod.GET)

public String signUp(Locale locale, Model model) {

return "sign/signUp";

}

@RequestMapping(value = "/signin", method = RequestMethod.GET)

public String signIn(Locale locale, Model model) {

return "sign/signIn";

}

@RequestMapping(value = "/signupprocess", method = RequestMethod.POST)

public String signUpProcess(Locale locale, Model model) {

//이메일 인증 프로세스 추가

return "home";

}

리소스 밑에 favicon만 이름에 맞춰 넣으면 정상으로 동작할 것이다. 다음은 회원가입을 구현할 것이다. 이제부터는 스프링 시큐리티에 대한 설정도 동일하게 들어가므로 스프링 시큐리티에서 다음 내용을 다룰 것이다. 회원가입에서 아이디를 이메일로 설정할 계획이고, 이메일을 발송한 후 인증이 되어야만 회원가입이 이루어지도록 구현할 계획이다.

저작자표시

'Spring' 카테고리의 다른 글

스프링 트랜잭션 관련 참조자료 (0)	2021.06.09
Spring Security (1) - 기본 설정 (0)	2021.05.19
Spring Framework (8) - Bill of Materials을 활용한 Spring Framework 버전 관리 (0)	2021.05.19
Spring Framework (7) - Logging 설정 (slf4j) (0)	2021.05.19
Spring Framework (6) - MyBatis 설정 (0)	2021.05.19

이도현의 기술블로그

Spring Framework (9) - Bootstrap 설정 및 로그인, 회원가입 화면 구현

'Spring' 카테고리의 다른 글

티스토리툴바

Spring Framework (9) - Bootstrap 설정 및 로그인, 회원가입 화면 구현

'Spring' 카테고리의 다른 글

관련글

티스토리툴바