36. 로그인, 회원가입 화면 만들기

UserController

@Controller
public class UserController {

    @GetMapping("/user/joinForm")
    public String joinForm(){
        return "user/joinForm";
    }

}

 

joinFrom.jsp

• index.jsp 복사해서 user 디렉토리 만들고 이름변경해서 붙여넣는다.
• bootstrap4 - Form 에서 코드 복사해서 <div class="container"> 에 넣는다.
• header.jsp, footer.jsp 연결해주기(index에 있던 경로와 달라서 ‘../’ 추가 해줘야함)
• input 받아야 할 정보(username, email, password)들에 맞게 name, placeholder 등 변경한다.
• 원래 form 태그안에 submit 버튼이 있어야하지만 js로 넘기기 위해 form태그 밖에 button 하나 만든다.

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
  <h2>Stacked form</h2>
  <form>

    <div class="form-group">
      <label for="username">username:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
    </div>

    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>


  </form>
  <button id="btn-save" class="btn btn-primary">회원가입</button>
</div>


<%@ include file="../layout/footer.jsp"%>

 

loginForm.jsp

joinForm.jsp 복사해서 같은 경로에 이름 loginForm으로 변경해서 붙인다.

id와 password로 로그인 할꺼니 그에 맞게 input태그도 변경한다.

form 태그 밖에 회원가입 버튼도 로그인 버튼으로 변경(id, button태그안에 글자 변경)한다.

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

<%@ include file="../layout/header.jsp"%>

<div class="container">
  <h2>Stacked form</h2>
  <form action="/auth/loginProc" method="post">

    <div class="form-group">
      <label for="username">username:</label>
      <input type="text" class="form-control" id="username" placeholder="Enter username" name="username">
    </div>

    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
    </div>

    <button id="btn-login" class="btn btn-primary">로그인</button>

  </form>

</div>


<%@ include file="../layout/footer.jsp"%>

 

UserController

@GetMapping("/user/loginForm")
public String loginForm(){
    return "user/loginForm";
}