spring 2022/03/03(member.jsp,fragment)
th:fragment
다른 파일의 공통된 코드 부분을 가져와서 사용(ex/ header,footer,login)
header.jsp => <head th:fragment="headerFragment">
footer.jsp => <footer th:fragment="footerFragment">
login.jsp => <head th:replace="~{/member/header::headerFragment}"></head>
<div th:replace="~{/member/footer ::footerFragment}"></div>파일명 home.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
</head>
<body>
<div style="padding: 20px;">
<h3>home</h3>
<hr />
<div th:if="${session.USERID}">
<a th:href="@{/member/logout}">로그아웃</a>
<a th:href="@{/member/mypage}">마이페이지</a>
</div>
<div th:unless="${session.USERID}">
<a th:href="@{/member/login}">로그인</a>
</div>
</div>
</body>
</html>파일명 header.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="headerFragment">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title th:text="${title}"></title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}"/>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
</head>
</html>파일명 footer.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footerFragment">
<p>cotyright 2022</p>
</footer>
</html>파일명 login.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/member/header::headerFragment}"></head>
<body>
<div style="padding: 20px;">
<h3>member login</h3>
<hr />
<form th:action="@{/member/login}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">아이디 : </label>
<input type="text" placeholder="아이디" name="id"/></br>
<label style="width:75px; height: 30px; display:inline-block;">암호 : </label>
<input type="password" placeholder="암호" name="pw"/></br>
<label style="width:75px; height: 30px; display:inline-block;"></label>
<input type="submit" class="btn btn-primary" value="로그인" />
</form>
<hr />
<div th:replace="~{/member/footer ::footerFragment}"></div>
</div>
</body>
</html>파일명 select.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원목록</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}"/>
<script type="text/javascript" src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div style="padding: 20px;">
<h3>member list</h3>
<hr />
<table class="table">
<tr>
<th>아이디</th>
<th>이름</th>
<th>나이</th>
<th>버튼</th>
</tr>
<tr th:each="tmp, idx : ${list}">
<td th:text="${tmp.id}"></td>
<td th:text="${tmp.name}"></td>
<td th:text="${tmp.age}"></td>
<td>
<a th:href="@{/member/update( id=${tmp.id} )}">수정</a>
<a th:href="@{/member/delete( id=${tmp.id} )}">삭제</a>
<form th:action="@{/member/delete}" method="get">
<input type="hidden" name="id" valut="${tmp.id}" />
<input type="submit" value="삭제1">
</form>
</td>
</tr>
</table>
</div>
</body>
</html>파일명 mypage.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/member/header::headerFragment}"></head>
<body>
<div style="padding: 20px;">
<h3>mypage</h3>
<hr />
<a th:href="@{/member/mypage?menu=1}">정보수정</a>
<a th:href="@{/member/mypage?menu=2}">암호변경</a>
<a th:href="@{/member/mypage?menu=3}">회원탈퇴</a>
<hr />
<div th:if="${param.menu.toString().equals('1')}">
정보수정
<form th:action="@{/member/mypage}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">아이디 : </label>
<input type="text" th:value="${member.id}" name="id" readonly /></br>
<label style="width:75px; height: 30px; display:inline-block;">이름 : </label>
<input type="text" th:value="${member.name}" name="name" /></br>
<label style="width:75px; height: 30px; display:inline-block;">나이 : </label>
<input type="text" th:value="${member.age}" name="age" /></br>
<label style="width:75px; height: 30px; display:inline-block;"></label>
<input type="submit" class="btn btn-primary" value="수정하기" />
</form>
</div>
<div th:if="${param.menu.toString().equals('2')}">
암호변경
</div>
<div th:if="${param.menu.toString().equals('3')}">
회원탈퇴
</div>
<hr />
<div th:replace="~{/member/footer ::footerFragment}"></div>
</div>
</body>
</html>
파일명 mypage.jsp
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/member/header::headerFragment}"></head>
<body>
<div style="padding: 20px;">
<h3>mypage</h3>
<hr />
<!-- <div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
정보수정
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<form th:action="@{/member/mypage}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">아이디 : </label>
<input type="text" th:value="${mem.id}" name="id" readonly /></br>
<label style="width:75px; height: 30px; display:inline-block;">이름 : </label>
<input type="text" th:value="${mem.name}" name="name" /></br>
<label style="width:75px; height: 30px; display:inline-block;">나이 : </label>
<input type="text" th:value="${mem.age}" name="age" /></br>
<label style="width:75px; height: 30px; display:inline-block;"></label>
<input type="submit" class="btn btn-primary" value="수정하기" />
</form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
암호변경
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
암호변경 내용
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
회원탈퇴
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
회원탈퇴 내용
</div>
</div>
</div>
</div>
</div> -->
<a th:href="@{/member/mypage?menu=1}">정보수정</a>
<a th:href="@{/member/mypage?menu=2}">암호변경</a>
<a th:href="@{/member/mypage?menu=3}">회원탈퇴</a>
<a th:href="@{/member/logout}">로그아웃</a>
<hr />
<p th:text="|[ID:${session.USERID}, NAME:${session.USERNAME}] 님 로그인 |"></p>
<hr />
<div th:if="${param.menu.toString().equals('1')}">
정보수정
<form th:action="@{/member/mypage(menu=1)}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">아이디 : </label>
<input type="text" th:value="${mem.id}" name="id" readonly /></br>
<label style="width:75px; height: 30px; display:inline-block;">이름 : </label>
<input type="text" th:value="${mem.name}" name="name" /></br>
<label style="width:75px; height: 30px; display:inline-block;">나이 : </label>
<input type="text" th:value="${mem.age}" name="age" /></br>
<label style="width:75px; height: 30px; display:inline-block;"></label>
<input type="submit" class="btn btn-primary" value="정보수정" />
</form>
</div>
<div th:if="${param.menu.toString().equals('2')}">
암호변경
<form th:action="@{/member/mypage(menu=2)}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">현재암호 : </label>
<input type="password" placeholder="암호" name="pw"/></br>
<label style="width:75px; height: 30px; display:inline-block;">바꿀암호 : </label>
<input type="password" placeholder="암호" name="newPw"/></br>
<label style="width:75px; height: 30px; display:inline-block;">암호확인 : </label>
<input type="password" placeholder="암호확인" /></br>
<input type="submit" class="btn btn-primary" value="암호변경" />
</form>
</div>
<div th:if="${param.menu.toString().equals('3')}">
회원탈퇴
<form th:action="@{/member/mypage(menu=3)}" method="post">
<label style="width:75px; height: 30px; display:inline-block;">현재암호 : </label>
<input type="password" placeholder="암호" name="pw"/></br>
<input type="submit" class="btn btn-primary" value="회원탈퇴" />
</form>
</div>
<hr />
<div th:replace="~{/member/footer ::footerFragment}"></div>
</div>
</body>
</html>
당신을 한 줄로 소개해보세요