1. 내용 : 회원가입을 하는 페이지이다. 주소는 API를 사용하여 우편번호와 기본 주소를 자동으로 넣게 하였다.
2. 과정 중 특이점 : 우편번호 찾기를 간단하게 구현하게 해주는 API를 찾아서 쉽게 넣을 수 있었다. 아이디 중복 체크는 이전 화면구현 때도 해봤었기 때문에 이번에도 그대로 적용하였다. 다음 번엔 validation을 적용해야겠다.
3. 화면 및 코드
1) 회원가입 화면
회원가입 화면에서는 아이디, 비밀번호, 닉네임, 성별, 생일, 휴대전화, 이메일, 주소를 받는다. 각각의 정보는 모두 required라서 입력하지 않고 회원가입 번호를 누르면 '이 입력란을 작성하세요.'라고 안내가 뜬다.
그리고 이메일같은 경우 형식을 맞추지 않았을 시에 형식을 맞추라고 안내가 뜬다.
2) JSP (전체 코드는 아래에 있는 더보기를 누르세요)
① 중복 체크
아이디를 입력한 후 중복확인을 누르면 DB에 저장된 아이디와 비교한 후 중복된 아이디가 없으면 '사용 가능한 아이디입니다.'라고 알려준다. 하지만 중복된 아이디가 있으면 '이미 사용 중인 아이디입니다. 다시 입력해주세요'라고 알려준 후 사용자가 입력한 아이디 값을 지운다.
만약 아이디 중복체크 버튼을 누르지 않고 그냥 넘어간다면 '아이디 중복체크를 해주세요.'라는 알럿창이 뜬다. 이에 대한 javascript 코드는 아래와 같다.
function checkDupId() {
let memId = $("form[name='join']").find("#memId").val();
$.ajax({
url: "<c:url value='/join/getLoginIdDup.wow'/>"
,type:"post"
,data: {memId : memId}
,success:function(code){
if(code == "ok"){
alert("사용 가능한 아이디입니다.");
//중복이 아닐 때 idDuplChk 값을 없앤다.
$("form[name='join']").find("#idDuplChk").val("");
}
else{
alert("이미 사용 중인 아이디입니다. 다시 입력해주세요.");
//중복일 때 memId 값을 없앤다.
$("form[name='join']").find("#memId").val("");
}
}
,error:function(){
alert("error");
}
});
};
$(function(){
$("input[name='memId']").on("change", function(e){
idDuplChk=$("#idDuplChk").val("ok");
});
});
$(function(){
$("#memberJoin").click(function(){
e.preventDefault();
let idDuplChk=$("#idDuplChk").val();
if(idDuplChk != ""){
alert("아이디 중복체크를 해주세요.");
return; //함수 종료
}else{
document.join.action= "memberRegist.wow";
document.join.submit(); //제출
}
});
});그리고 주소를 입력할 때는 주소입력 API를 이용하였는데 아래와 같이 모달창이 뜬다.
https://www.poesis.org/postcodify/
오픈소스 도로명주소 검색 API - Postcodify
도로명주소 우편번호 검색, 더이상 어렵게 생각하지 마세요. Postcodify“포스트코디파이”는 웹 페이지에서 도로명주소, 지번주소, 등을 편리하게 검색할 수 있도록 해주는 프로그램입니다. 6백
www.poesis.org
위의 사이트에 들어가면 쉽게 적용하는 방법이 뜬다! 정말 고마우신 분들ㅠㅠ
위에서 주소를 찾아 클릭하면 위의 사진과 같이 우편번호와 기본 주소가 자동으로 입력된다.
모든 정보를 입력한 후 회원가입을 누르면 DB에 정보가 저장된다.
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/inc/header.jsp" %>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/member/join.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<meta charset="UTF-8">
<title>회원 가입</title>
</head>
<body>
<%@include file="/WEB-INF/inc/top.jsp" %>
<div class="container">
<h3>회원 가입</h3>
<form id="join" name="join" method="post" action="memberRegist.wow" >
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th><ion-icon name="person-circle" size="large"> </ion-icon></th>
<th>아이디</th>
<td>
<input type="text" name="memId" id="memId" maxlength="50" placeholder="알파벳과 숫자로 4글자 이상"
required="required" pattern="\w{4,}" title="빈칸 없이 알파벳과 숫자로 4글자 이상 입력해주세요.">
<form:errors path="memId"/>
<button type = "button" name="dupIdCheck" class="btn btn-primary" onclick="checkDupId()"
value="checkDupId">중복확인</button>
<input type="hidden" id="idDuplChk" name="idDuplChk" value="ok">
</td>
</tr>
<tr>
<th><ion-icon name="key-outline" size="large"></ion-icon></th>
<th>비밀번호</th>
<td>
<input type="password" name="memPw" id="memPw" placeholder="알파벳과 숫자로 4글자 이상" class="form-control input-sm"
required="required" pattern="\w{4,}" title="알파벳과 숫자로 4글자 이상 입력해주세요.">
<form:errors path="memPw"/>
</td>
</tr>
<tr>
<th><ion-icon name="person-add-outline" size="large"></ion-icon></th>
<th>닉네임</th>
<td>
<input type="text" name="memName" id="memName"
class="form-control input-sm" required="required" placeholder="2글자 이상"
pattern="{2,15}" title="2글자 이상 입력해주세요."></td>
</td>
</tr>
<tr>
<th><ion-icon name="transgender-outline" size="large"></ion-icon></th>
<th>성별</th>
<td>
<input class="form-check-input" type="radio" id="memGender1" name="memGender" value="female" checked="">
<label class="form-check-label" for="memGender1"> 여자</label>
<input class="form-check-input" type="radio" id="memGender2" name="memGender" value="male">
<label class="form-check-label" for="memGender2"> 남자</label>
</td>
</tr>
<tr>
<th><ion-icon name="today-outline" size="large" ></ion-icon></th>
<th>생일</th>
<td>
<input type="date" name="memBir" id="memBir" value="1995-01-01" class="form-control input-sm">
</td>
</tr>
<tr>
<th><ion-icon name="call-outline" size="large"></ion-icon></th>
<th>휴대전화</th>
<td>
<input type="tel" name="memHp" id="memHp" placeholder="- 를 빼고 숫자만 입력해주세요."
required="required" pattern="[0-9]{10,11}" maxlength="13" class="form-control input-sm">
<form:errors path="memHp"/>
</td>
</tr>
<tr>
<th><ion-icon name="mail-open-outline" size="large"></ion-icon></th>
<th>이메일</th>
<td>
<input type="email" name="memMail" id="memMail"
required="required" placeholder="이메일" class="form-control input-sm">
<form:errors path="memMail"/>
</td>
</tr>
<tr>
<th><ion-icon name="map-outline" size="large"></ion-icon></th>
<th>주소</th>
<td>
<input type="text" name="memAddr1" id="memAddr1" class="postcodify_postcode5"required="required" value="" />
<form:errors path="memAddr1"/>
<button id="postcodify_search_button" class="btn btn-primary">검색</button><br /><br />
<input type="text" name="memAddr2" id="memAddr2" class="postcodify_address" required="required" value="" />
<form:errors path="memAddr2"/>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" id="memberJoin" class="btn btn-primary">회원가입</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<script> $(function() { $("#postcodify_search_button").postcodifyPopUp(); }); </script>
<script type="text/javascript">
function checkDupId() {
let memId = $("form[name='join']").find("#memId").val();
$.ajax({
url: "<c:url value='/join/getJoinIdDup.wow'/>"
,type:"post"
,data: {memId : memId}
,success:function(code){
if(code == "ok"){
alert("사용 가능한 아이디입니다.");
//중복이 아닐 때 idDuplChk 값을 없앤다.
$("form[name='join']").find("#idDuplChk").val("");
}
else{
alert("이미 사용 중인 아이디입니다. 다시 입력해주세요.");
//중복일 때 memId 값을 없앤다.
$("form[name='join']").find("#memId").val("");
}
}
,error:function(){
alert("error");
}
});
};
$(function(){
$("input[name='memId']").on("change", function(e){
idDuplChk=$("#idDuplChk").val("ok");
});
});
$(function(){
$("#memberJoin").click(function(){
let idDuplChk=$("#idDuplChk").val();
if(idDuplChk != ""){
alert("아이디 중복체크를 해주세요.");
return; //함수 종료
}else{
document.join.action= "memberRegist.wow";
document.join.submit(); //제출
}
});
});
</script>
</body>
</html>3) Controller
@RequestMapping("join/join.wow")
public String memberForm(@ModelAttribute("member") MemberVO member) {
return "join/join";
}
//회원 가입
@RequestMapping("join/memberRegist.wow")
public ModelAndView memberRegist(ModelAndView mav
, @ModelAttribute("member") MemberVO member
, SessionStatus sessionStatus) {
mav.setViewName("redirect:/login/login.wow");
mav.addObject("message", "joinsucess");
service.registMember(member);
sessionStatus.setComplete();
return mav;
}
//중복 확인
@RequestMapping(value = "join/getJoinIdDup.wow")
@ResponseBody
public String getLoginIdDup(String memId) {
MemberVO member = service.getMember(memId);
String code = null;
if(member == null) {
code = "ok";
}
if(member != null){
code = "isdupl";
}
return code;
}컨트롤러에서는 join에서 ajax로 보낸 join/getJoinIdDup.wow 를 받아서 아이디 값을 체크하고 중복값인지 아닌지를 확인하여 값을 돌려준다.
'SPRING > SPRING 프로젝트' 카테고리의 다른 글
| SPRING 팀 플젝 남성 전용 쇼핑몰 '초코룩' 개요 (0) | 2022.11.07 |
|---|---|
| SPRING 프로젝트 - 펀딩 사이트(7) : 페이지네이션 없이 무한스크롤 구현 (0) | 2022.09.08 |
| SPRING 프로젝트 - 펀딩 사이트 (5) : 찜하기와 공유하기 (0) | 2022.09.06 |
| SPRING 프로젝트 - 펀딩 사이트 (4) : xml 조건 정렬과 Grid (0) | 2022.09.02 |
| SPRING 프로젝트 - 펀딩 사이트 (3) : 로그인 화면 구현 (0) | 2022.08.29 |
댓글