[Spring] 예제1 - 로그인, 회원가입 페이지 제작

Back-End/Spring

[Spring] 예제1 - 로그인, 회원가입 페이지 제작

09009 2023. 5. 15. 12:36

***링크 작성규칙 (임의로) ***

jsp로 forwarding할 예정일 파일은 ~Page로 파일명을 작성할 것이다.

~~redirect~~~~할 예정일 파일은~~ ~Process로 파일명을 작성할 것이다.

---------------------------

forwarding : ~Page

redirect : ~Process

---------------------------

작성할 파일 경로 규칙 (임의로)

/fin~/member/loginPage

/fin~/member/loginProcess

/fin~/board/listPage

현재 작성할 페이지에 css는 적용하지 않고 기본 html 형식으로만 일단 작성하여

추후에 css를 적용할 예정이다.

로그인 페이지 제작

1) Controller 클래스(MemberController) 생성 (아래와 같은 경로로 생성한다)

✍ MemberController.java

작성할 예정인 로그인 페이지에 대한 RequestMapping을 잡아준다.

@RequestMapping : 웹 브라우저에서 링크로 요청했을 때 실행되는 것

(메서드명은 중요하지 않다. 논리적으로 문제가 되지 않지만 이름은 똑같이 지어주는 것이 일반적이다.)

package com.ja.finalproject.member.controller;

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

@Controller
public class MemberController {
	
	@RequestMapping("member/loginPage")
	public String loginPage() {
		return "member/loginPage";
	}

}

로그인 페이지 작성

jsp 파일 생성

✍ views/member/loginPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> 로그인 페이지 </h1>
<form action = "...">
	ID : <input type="text"><br>
	PW : <input type="password"><br>
	<input type="submit" value="로그인"><br>
</form>

<a href="...">회원가입</a>
</body>
</html>

위 파일 작성 후 서버를 가동하고 웹 브라우저에 아래 주소로 요청하면

아래와 같이 로그인 페이지가 화면에 나온다.

로그인 페이지에서 회원가입 페이지로 이동하는 코드 작성

✍ views/member/loginPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> 로그인 페이지 </h1>
<form action = "...">
	ID : <input type="text"><br>
	PW : <input type="password"><br>
	<input type="submit" value="로그인"><br>
</form>

<a href="./registerPage">회원가입</a>
</body>
</html>

* 상대경로와 절대경로 *

<!-- 상대 경로 -->
<a href="./registerPage">회원가입</a> 
<!-- 절대 경로 -->
<a href="/finalproject/member/registerPage">회원가입</a>
<a href="http://localhost:8181/finalproject/member/registerPage">회원가입</a>

상대경로: 맨 마지막 것에서 뒤에 주소만 변경한다는 의미이다 (맨 마지막 슬래시)

아직 회원가입 페이지에 대한 RequestMapping을 잡아주지 않고

jsp 페이지도 작성하지 않았기 때문에 에러 화면이 출력된다.

✍ MemberController.java

회원가입 페이지에 대한 RequestMapping 잡아주고 포워딩해줘야 한다.

위의 중복된 코드 내용은 생략하도록 하겠다.

	@RequestMapping("member/registerPage")
	public String registerPage() {
		return "member/registerPage";
	}

위와 같이 @RequestMapping("member/registerPage")로 작성하면 각 메서드마다 "member/ ---"를 작성해주어야 하는데

대신 Controller 클래스 위에 RequestMapping을 잡아주면

@RequestMapping("member/*")

아래쪽의 RequestMapping은 아래와 같이 잡아주면 된다.

✍ MemberController.java

package com.ja.finalproject.member.controller;

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

@Controller
@RequestMapping("member/*")
public class MemberController {
	
	@RequestMapping("loginPage")
	public String loginPage() {
		return "member/loginPage";
	}
	
	@RequestMapping("registerPage")
	public String registerPage() {
		return "member/registerPage";
	}

}

회원가입 페이지에 대한 RequestMapping을 잡아준 후

회원가입 페이지를 작성한다.

✍ views/member/registerPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 가입</h1>
<form action="...">
	ID: <input type="text"><br>
	PW: <input type="password"><br>
	nickname: <input type="text"><br>
	gender: 
	<input type="radio">남
	<input type="radio">여 <br>
	email: <input type="text"><br>
	생년월일: <input type="date"><br>
	전화번호: <input type="text"><br>
	<button>회원가입</button>
	
</form>
<a href="./loginPage">로그인 페이지로 이동</a>
</body>
</html>

** Tip **

checkbox는 다중선택 시 주로 사용한다.

button 태그는 submit을 발동시킨다.

정리

- Controller생성

- requestMapping된 메서드 생성 : 웹 브라우저에서 링크로 요청했을 때 실행되는 것

클라이언트에서 request할 때 서버 코드에서 RequestMapping된 것이 존재해야 한다.