1. build.gradle
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // thymeleaf
implementation 'org.springframework.boot:spring-boot-starter-web' // Web
implementation 'org.springframework.boot:spring-boot-starter-data-jpa' // JPA
implementation 'org.springframework.boot:spring-boot-starter-jdbc' // jdbc
runtimeOnly 'com.h2database:h2' // h2
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}
2. 파일 구조
3. templates
# templates/home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>행복한 마켓</title>
</head>
<body>
<h1>행복한 마켓</h1>
<p>회원 관리</p>
<div>
<a href="/members/new">회원 가입</a>
<a href="/members/list">회원 목록</a>
</div>
<form action="/members/search">
<fieldset>
<legend>[검색하기]</legend>
<div>
<label>아이디로 검색 : </label>
<input type="text" name="id" placeholder="아이디를 입력하세요 ...">
</div>
<div>
<label>이름으로 검색 : </label>
<input type="text" name="name" placeholder="이름을 입력하세요 ...">
</div>
<input type="submit" value="검색">
</fieldset>
</form>
</body>
</html>
# templates/members/member-list.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>회원 목록(member-list.html)</title>
<style type="text/css">
table { border-collapse: collapse; }
tr, td, th { border: 2px solid #999; }
</style>
</head>
<body>
<h1>회원 목록</h1>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<!-- forEach : <tr th:each="변수명: ${members}"> -->
<!-- [property] : 보이는 건 필드지만 getter 을 호출해서 비슷한 성질이라 프로퍼티라 부름 -->
<tr th:each="member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</body>
</html>
# templates/members/new.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 가입(new.html)</title>
</head>
<body>
<h1>회원 가입</h1>
<!-- <form action="/members/join" method="post"> -->
<form action="/members/new" method="post">
<label>이름 : </label>
<input type="text" name="name" placeholder="이름을 입력해주세요...">
<input type="submit" value="입력 완료">
</form>
</body>
</html>
# templates/members/search.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>검색 결과 (search.html))</title>
</head>
<body>
<!--
[null 처리] ====================================================
<span th:text="${member.id}"></span>
1. 조건에 null 이 아닌 경우만 조회하도록 설정
<span th:text="${member != null ? member.id : null}"></span>
2. ? 연산자 사용
? 사용하면, null 이 아닌 경우에만 해당 property 실행
<span th:text="${member ?.id}"></span>
================================================================
-->
<h1>검색 결과</h1>
<div>
<div>
<span>아이디 : </span>
<!-- <span th:text="${member.id}"></span> -->
<!-- <span th:text="${member != null ? member.id : null}"></span> -->
<span th:text="${member?.id}"></span>
</div>
<div>
<span>이름 : </span>
<!-- <span th:text="${member.name}"></span> -->
<!-- <span th:text="${member != null ? member.name : null}"></span> -->
<span th:text="${member?.name}"></span>
</div>
</div>
</body>
</html>
