메인화면, 회원가입 화면, 로그인 화면

2022. 11. 6. 21:46

모든 페이지에 들어가는 navbar와 footer 만들기

모든 페이지에 navbar와 footer 가 적용되기 위해서 각각 header, footer 파일을 만든다.

header 파일에는 navbar 를 , footer 파일에는 footer 를 넣고 메인페이지 index.jsp에 header,footer 파일을 연결시켜준다.

header 위치에 <%@ include file="layout/header.jsp" %> 를 넣으면 네브바 포함 된 메인페이지
footer 위치에 <%@ include file="layout/footer.jsp" %> 를 넣으면 footer가 포함 된 메인페이지

navbar 설정

[header.jsp]

<!DOCTYPE html>
<html lang="ko">
<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">
<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>
</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="/auth/loginForm">로그인</a></li>
				<li class="nav-item"><a class="nav-link" href="/auth/joinForm">회원가입</a></li>
			</ul>
		</div>
	</nav>
	<br/>

footer 설정

[footer.jsp]

<br/>
<div class="jumbotron text-center" style="margin-bottom: 0">
		<p>🧍🏻‍♀️Created by SunnyDay</p>
		<p>📞010-1234-1234</p>
		<p>🚩서울특별시 종로구 북촌로4길 20</p>
	</div>
</body>
</html>

html을 위 → 아래로 순서대로 실행해서

script에서 해당 html의 내용을 바꿀 수 있기 때문에 마지막에 변경된게 적용되도록 하기위해

<head> 태그안에 위치했던 script를 body요소의 가장 마지막에 넣으면 자바스크립트 ajax 이용할때 에러가 남

Uncaught ReferenceError: $ is not defined

제이쿼리 라이브러리 <%@ include file="../layout/footer.jsp"%>를 못찾는다는 말??

...
<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>

[joinForm.jsp] 회원가입 페이지

...
<script src="/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

제이쿼리가 읽어지기 전에 제이쿼리 관련된 user.js 를 쓰니까 못찾는듯?

※ 이모티콘 넣었을때 한글이 깨졌다면

JSP 페이지 1번 줄에UTF-8 로 세팅하기

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

메인페이지 [index.jsp] 에 header, footer 폴더 연결

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

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

☆ layout 앞에 슬러시(/) 를 붙이면 페이지 못찾음(에러)

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

<%@ include file="layout/header.jsp" %>
	<div class="container">
		<div class="card m-2">
			<div class="card-body">
				<h4 class="card-title">제목 적는 부분</h4>
				<p class="card-text">내용 적는 부분</p>
				<a href="#" class="btn btn-primary">상세보기</a>
			</div>
		</div>
	</div>
<%@ include file="layout/footer.jsp" %>

카드가 화면을 꽉 차게 만드려면 div에 width 속성을 없애준다.

* div 속성값은 block이 기본요소라서 가로폭 화면을 꽉차게 한다.

BoardController 클래스 생성

@GetMapping({"","/"})
public String index() {
    return "index";
}

@GetMapping({"","/"}) 주소 둘 다 가능하게 하려면 {} 중괄호를 쓴다.

http://localhost:8000

http://localhost:8000/

리턴 시 /WEB-INF/views/index.jsp

* [application.yml]에 설정해둔 경로때문

spring:
  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp

만약 이런 오류가 난다면

Page directive: illegal to have multiple occurrences of 'contentType' with different values (old: [text/html; charset=UTF-8], new: [text/html; charset=UTF-8])

index.jsp 페이지의 contentType="text/html; 뒤에 공백때문에 다르다고 오류 뜬것..!!

JSP 페이지 상단 UTF-8 로 바꾸는 방법

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

jsp 페이지 만들때 자동으로 charset하고 pageEncoding이 EUC-KR ▶ UTF-8 로 바꾸기 설정

상단메뉴 window - Preperences - xml 검색 - html,css,jsp 모두 UTF-8 로 바꾸기 ▶ UTF-8 로 자동설정!

인텔리j에서 Default로 변경법

(단축키가 안맞아서 Default로 변경해줌..)

* 상단메뉴 window - Preperences - keys - Default

긴 코드 한 줄에 정렬되도록 설정하는 법

코드 라인이 길면 잘려서 밑으로 내려가서 한줄에 정렬해보기

* 상단메뉴 window - Preperences - html 검색 - html Editor - Line width 을 200 으로 설정하기

마지막에 ctrl + shift + F 하면 적용이 된다.

회원가입 페이지

네브바에서 회원가입 버튼 클릭시 /auth/joinForm 페이지로 이동

[UserController]

@Controller
public class UserController {

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

- 회원가입 뷰페이지 joinForm.jsp 생성

[joinForm]

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

<!-- ../layput 는 user보다 한 칸위의 폴더라는 뜻  -->
<%@ include file="../layout/header.jsp"%>

<div class="container">

	<form action="/action_page.php">
		<div class="form-group">
			<label for="username">UserName : </label> <input type="text" class="form-control" placeholder="Enter UserName" id="username">
		</div>
		
		<div class="form-group">
			<label for="email">Email : </label> <input type="email" class="form-control" placeholder="Enter email" id="email">
		</div>
		
		<div class="form-group">
			<label for="pwd">Password : </label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		
		<button type="submit" class="btn btn-primary">회원가입 완료</button>
	</form>

</div>

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

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

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

layout 폴더가 현재 폴더위치 위에 있어서 ../layout

로그인 페이지

로그인 버튼 클릭시 /auth/loginForm 페이지로 이동

[UserController]

@Controller
public class UserController {

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

- 로그인 뷰페이지 loginForm.jsp 생성

[loginForm]

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

<!-- ../layput 는 user보다 한 칸위의 폴더라는 뜻  -->
<%@ include file="../layout/header.jsp"%>

<div class="container">

	<form action="/action_page.php">
		<div class="form-group">
			<label for="username">UserName : </label> <input type="text" class="form-control" placeholder="Enter UserName" id="username">
		</div>
		
		<div class="form-group">
			<label for="pwd">Password : </label> <input type="password" class="form-control" placeholder="Enter password" id="password">
		</div>
		
		<div class="form-group form-check">
			<label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me
			</label>
		</div>
		<button type="submit" class="btn btn-primary">로그인 완료</button>
	</form>

</div>

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

LIST

'Spring boot | 블로그 만들기' 카테고리의 다른 글

로그인 방식 \| 세션을 이용한 로그인 (0)	2022.11.09
회원가입 \| Ajax를 사용하는 이유 , Service, Dto (0)	2022.11.06
회원삭제 테스트 \| Exception 처리 (0)	2022.11.05
회원수정 테스트 \| save()와 @Transactional 더티체킹 (1)	2022.11.05
회원가입 테스트 \| insert , Enum 사용법 (1)	2022.11.04

혼자 깨닫기 위함