[프로젝트] 인스타그램(3) - 회원가입 구현하기
다른 페이지
https://sjj02055.github.io/projects/instagram_1/ https://sjj02055.github.io/projects/instagram_2/
실행 환경
Intellij, Oracle
사용 Tools
SpringBoot, Thymeleaf, Lombok, json-simple, JPA
인스타그램 - 회원가입
@Slf4j
@Controller
@RequestMapping("/member")
@RequiredArgsConstructor
public class MemberController {
private final MemberService memberService;
@GetMapping("/create")
public String createMember(Model model){
model.addAttribute("createForm", new createForm());
return "member/createMember";
}
@PostMapping("/create")
public String saveMember(@Valid @ModelAttribute createForm form, BindingResult bindingResult){
if(bindingResult.hasErrors()){
log.info("bindingresult= {}",bindingResult);
return "member/createMember";
}
if(!form.getRepass().equals(form.getPassword())){
bindingResult.reject("notEqual","비밀번호가 다릅니다.");
return "member/createMember";
}
Member member = new Member();
member.setNickname(form.getNickname());
member.setDay(form.getDay());
member.setMonth(form.getMonth());
member.setName(form.getName());
member.setPassword(form.getPassword());
member.setUserId(form.getUserId());
member.setYear(form.getYear());
memberService.join(member);
return "redirect:/";
}
}
도메인의 Member는 이미 구현해 뒀으니 Getmapping과 Postmapping만 써서 회원가입 바로 구현해 버리자
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>회원가입</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/6461f38ad9.js" crossorigin="anonymous"></script>
<title>join us</title>
<style>
.text {
color: royalblue;
}
.field-error{
border-color: #dc3545;
color: #dc3545;
}
input::placeholder {
text-align: left;
}
</style>
</head>
<body style="background-color: #eeeeee">
<div id="joinus">
<h3 class="text-center text-white pt-5"></h3>
<div class="container">
<div id="joinus-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<a th:href="@{/member/login}"><h3 class="text-center text"><i class="fas fa-walking"></i>홍스타</h3></a>
<form role="form" id="login-form" action="/member/create" method="post" th:object="${createForm}">
<div th:if="${#fields.hasGlobalErrors()}">
<p class="field-error" th:each="err : ${#fields.globalErrors()}"
th:text="${err}">전체 오류 메시지</p>
</div>
<div class="form-group">
<label for="nickname" class="text">닉네임</label><br>
<input type="text" id="nickname" th:field="*{nickname}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{nickname}"></div>
</div>
<div class="form-group">
<label for="userId" class="text">아이디</label><br>
<input type="text" id="userId" th:field="*{userId}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{userId}"></div>
</div>
<div class="form-group">
<label for="password" class="text">비밀번호</label><br>
<input type="password" id="password" th:field="*{password}" placeholder="****" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{password}"></div>
</div>
<div class="form-group">
<label for="repass" class="text">비밀번호확인</label><br>
<input type="password" id="repass" th:field="*{repass}" placeholder="****" class="form-control">
</div>
<div class="form-group">
<label for="name" class="text">이름</label><br>
<input type="text" id="name" th:field="*{name}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{name}"></div>
</div>
<br>
<div class="col text-center">
<input type="submit" name="submit" class="btn btn-primary" value="회원가입">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
후기
회원가입까지 됐으니까 본격적으로 시작해보자.