- 이번 시간에는 로그인과 회원가입을 위한 화면을 구현해보도록 하겠습니다.
- 그 전에 먼저 로그인과 회원가입 화면 역시도 메인화면에 출력되는 <nav> 태그와 Footer 부분을 포함하기 때문에 이러한 공통부문을 하나의 템플릿으로 담아서 효율적으로 관리할 수 있도록 수정하려고 합니다.
- 또한 이전시간에 미처 하지 못했던 작업이 있었는데, 바로 <script> 태그를 <body> 태그 맨 끝으로 위치시키는 작업입니다.
위처럼 하는 이유는 자바스크립트를 공부해보신 분이라면 잘 아시겠지만, 기본적으로 코드는 위에서부터 차례대로 읽히게 되는데 이럴 경우 스크립트가 가장 위에 위치하게 되면 아직 그려지지 않은 HTML 요소에 접근하는 경우가 발생하여 오류가 생길 수 있기 때문입니다.
- 설명은 여기까지 하고 본격적으로 템플릿을 만들기 위해 코드를 분할해보도록 하겠습니다.
- 우선 views 폴더 아래에 'layout' 폴더를 새로 생성하고 해당 폴더 안에 'header.jsp'와 'footer.jsp' 파일을 추가해줍니다.
- 이후 index.jsp 파일에서 아래 구문을 찾아 오려내기(Ctrl + x) 한 뒤, header.jsp 파일에 붙여넣어 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/blog">홈</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/blog/user/loginForm">로그인</a></li>
<li class="nav-item"><a class="nav-link" href="/blog/user/joinForm">회원가입</a></li>
</ul>
</div>
</nav>
<br>
- 다음으로 index.jsp 파일에서 아래 부분을 찾아 오려내기 한 뒤, footer.jsp 파일의 <body> 태그 사이에 붙여넣어 줍니다.
<div class="jumbotron text-center" style="margin-bottom: 0">
<p>Created By Skul</p>
<p>📞 010 - XXXX - XXXX</p>
<p>🏴 서울시 XX구 XX로 XX-X</p>
</div>
<br>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- 이렇게 하면 index.jsp 파일에는 몸통 부분만 남아있게 되었습니다.
- 이제 여기에 우리가 분리한 코드가 들어있는 파일을 include 하여 사용할 것인데, 그 방법은 다음과 같습니다.
- 이렇게 하면 공통된 코드를 가지고 있는 jsp 파일을 하나씩 관리하는 것이 아닌 템플릿 파일 하나만 관리함으로써 훨씬 효율적으로 작업할 수 있게 될 것입니다.
- 이제 본격적으로 로그인 화면과 회원가입 화면을 구현해보도록 할텐데 그 전에 먼저 Controller 패키지에 UserController 클래스를 생성하고 아래와 같이 구현해줍니다.
- 이후 'user' 폴더를 layout 폴더와 동일한 위치(views 폴더 아래)에 생성한 뒤 아래와 같이 jsp 파일을 추가해줍니다.
- joinForm.jsp 파일에는 index.jsp 파일에 있는 코드를 그대로 복사하여 가져온 뒤 아래와 같이 수정해줍니다.
- 여기서 <div class = "container"> 태그 사이에 있는 구문은 아래에서 확인하실 수 있습니다.
Bootstrap 4 Forms
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- 이후 결과를 출력해보면 다음과 같이 구현된 것을 확인하실 수 있습니다.
- 다만 우리는 회원가입을 위해서 필요한 정보가 username, email, password이기 때문에 코드를 일부 수정해주었습니다.
- 다음으로 로그인 화면을 구현하기 위해 joinForm.jsp 파일을 그대로 복사하여 파일명을 'loginForm.jsp'로 바꿔준 뒤, 다음과 같이 수정해주었습니다.
📌 References
GitHub - Daegwon-Kim/SpringBoot-JPA-Blog
Contribute to Daegwon-Kim/SpringBoot-JPA-Blog development by creating an account on GitHub.
github.com
'🚗 Backend Toy Project > 스프링 부트 게시판' 카테고리의 다른 글
| [스프링부트 게시판] 15. 로그인 기능 구현하기 (0) | 2022.05.10 |
|---|---|
| [스프링부트 게시판] 14. 회원가입 기능 구현하기 (0) | 2022.05.07 |
| [스프링부트 게시판] 12. 메인화면 만들기 (0) | 2022.05.05 |
| [스프링부트 게시판] 11. DELETE 테스트 (0) | 2022.05.05 |
| [스프링부트 게시판] 10. UPDATE 테스트 (0) | 2022.05.03 |