IT 세상에서 살아남기

SPRING(14) 로그인 팝업창으로 만들기 본문

spring

SPRING(14) 로그인 팝업창으로 만들기

Alan__kang__morlang 2022. 1. 26. 13:25
반응형

이번 시간에는 로그인 창을 팝업으로 만들어서 관리하는 방법을 구현해보겠습니다. 

 

1. 먼저 팝업창을 띄어줄 메인 index.jsp에 만들어 주겠습니다. index.jsp 에서 팝업을 위한 script 문법을 사용하겠습니다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loginPOPUP(){
	window.open("/member/loginPopup","", "width=500, height=500, top=500, left=500");
}
</script>  <!--  새 창을 열게 만들어서 팝업이 자동으로 열리게 만들어줍니다.-->
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>메인 페이지 입니다.</h1>
<a href="${contextPath }/member/loginForm">로그인 하기</a>
<input type="button" value="로그인 창" onclick="loginPOPUP()">
</body>
</html>

이 index.jsp에서는 GettMapping으로 되어있는 <a>태그로 묶어있는 클릭창과 로그인 창을 만들어주는 button으로 구성되어 있고 button을 누르게 되면 상단의 javascript function 으로 되어 있는 기능으로 넘겨주는 onclick으로 구성되어 있습니다. ( popup의 기능에는 기본적으로 3개의 영역을 적는데 처음의 영역에는 경로를 지정하고 두번째 영역에는 팝업창의 별칭을 설정하고 세번째 영역에는 크기를 지정하는 영역입니다. )

 

2. 경로를 잡아주었다면 Controller에서 경로를 잡아주어야 합니다. (저는 기본적인 팝업창이기 때문에 회원의 controller 가 아닌 기본적으로 생성되는 homeController 에 경로를 지정해 주었습니다. )

 

package com.care.member;

import java.text.DateFormat;
import java.util.Date;
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.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public String home(Locale locale, Model model) {
		logger.info("Welcome home! The client locale is {}.", locale);
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "home";
	}
	
	@GetMapping("/index")
	public String index() {
		return "/index";
	}
	
	@GetMapping("loginPopup")
	public String loginPopup() {
		return "/loginPopup";
	}
	
}

그래서 여기에서 Getmapping으로 경로를 잡아주고 jsp 인 /loginPOPUP으로 보내줘서 정상적으로 창을 띄어 주게 됩니다. 

 

로그인 창 버튼을 클릭하면 창이 열립니다.

 

loginPOPUP 창 을 띄어준 모습입니다. 

 

3. loginPOPUP.jsp 의 코드는 하단의 코드로 되어 있고 아직 경로는 설정하지 않았습니다. 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>로그인 창입니다.</h1>
<div align="center">
	<form action="">
		<input type="text" name="userId" placeholder="input_id"> <br>
		<input type="password" name="userPw" placeholder="input_pw"> <br>
		<input type="submit" value="login">
		<input type="button" onclick="" value="회원가입">
	</form>
</div>

</body>
</html>

 

 

이렇게 기본적인 팝업창을 띄워주는 기능을 구현 해봤습니다

반응형
저작자표시 비영리 변경금지 (새창열림)

'spring' 카테고리의 다른 글

SPRING(16) 회원 관리 기능 구현_프로필 사진 등록  (0) 2022.02.01
SPRING(15) 회원 관리 기능 구현_회원가입 기능  (0) 2022.01.26
SPRING(13) 회원 관리 기능 구현_3  (0) 2022.01.25
SPRING(12) 회원 관리 기능 구현_2(데이터베이스 설계)  (0) 2022.01.25
SPRING(11) 회원 관리 기능 구현_1  (0) 2022.01.24
'spring' Related Articles more