게시판2) 회원가입 페이지
in Web Dev on Java Spring
내용이 많기 때문에 모든 부분을 다 다루기 보다는, 중요한 부분만을 다룰것이다.
- jsp와 controller 가 어떻게 정보를 주고 받는지 모르는 사람은 여기를 먼저 보고 오세요
- index 화면 구상을 아직 하지 않아서 코드로만ㅎㅎ..
- 아래 회원가입을 누르면 join 이라는 요청이 controller로 날아가게 한다. get method로 날아간다.
FRONTEND
index.jsp
<li><a href = "join">회원가입</a></li>
controller - @RequestMapping(“/join”)
@Controller
public class MemberController {
@RequestMapping("/join")
public String join() {
return "member/joinForm";
}
member/joinForm.jsp
js 파일의 위치
member/joinForm.jsp의 header에는 다음과 같은 코드가 있다.
<head> <script src="script/validation.js"></script> </head>이 js파일은 엉뚱하게
src/main/webapp/resources/script 아래에 있다.이 경로를 인식시켜주기 위해서 servlet-context에 다음과 같은 코드를 넣어준다.
<resources mapping="/script/**" location="/resources/script/" />
form의 id와 action
<form id="form" action = "join" method ="POST">
id는 js에서 validation 을 마친 후 제출할 때 사용되어진다.
var form = document.getElementById("form");
form.submit();
action 과 method는 Controller의 메쏘드와 mapping 되는 정보를 준다.
아래 함수로 mapping 된다.
@RequestMapping(value = "/join", method = RequestMethod.POST)
public String join(Member member) {
System.out.println(member);
return "index";
}
select와 for문
- 페이지 위에 페이지 jstl을 이용하기 위한 페이지 지시자를 사용해야한다.
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- 아래와 같이 forEach문과 option 을 같이 사용해 쉽게 설렉트 박스를 만들 수 있다.
- begin 과 end로 시작과 끝 값을 줄 수 있다.
<th>생년월일</th>
<td><select id ="birthyear"><!-- 1960~2000 -->
<c:forEach var="year" begin="1960" end="2000" >
<option>${year}</option>
</c:forEach>
</select>년
hidden으로 서버에 정보 넘기기
일단 ‘회원가입’ 버튼을 누르면 생년, 월,일의 정보의 유효성을 확인한다.
<input type = "hidden" id= "birth" name="birth">
- 만약 정보가 제대로 들어갔다면, js에서 생년월일을 하나의 string 으로 저장해 hidden tag의 value로 꽂아준다.
javascript
birth = birthyear.value +'-'+ birthmonth.value + "-" + birthday.value ;
document.getElementById("birth").value = birth;
//위 코드 실행 후 다음과 같이 value가 꽂힌다.
//<input type = "hidden" id= "birth" name="birth" value = 2010-03-21>
- 그 후 서버에 정보를 넘길 수 있게 form.submit()을 해준다.
javascript
var form = document.getElementById("form");
form.submit();
form. submit()의 명령을 하면, action = “join”, method = “POST”의 정보가
<form id="form" action = "join" method ="POST">
Controller 의 함수와 매치된다. contoller의 code는
@RequestMapping(value = "/join", method = RequestMethod.POST)
public String join(Member member) {
//CODE
}
BACKEND
- 매퍼 파일인 memberMapper.xml 에 다음과 같은 코드를 삽입해준다.
- 이 전 블로그 포스트 여기에 나름 친절하게 나와있어서 이 포스트에서는 간단하게 코드와 흐름만 볼 것이다.
- insert id =”join”이고, 이것이 interface의 메소드 명과 매치되고, 그 메소드의 인자 타입을 parameterType 에 적어주면 된다.
<mapper namespace="sesoc.intern.board.dao.MemberMapper">
<insert id="join" parameterType="Member">
INSERT INTO member
VALUES
(
#{userid}
,#{userpwd}
,#{username}
,#{gender}
,#{email}
,#{phone}
,#{hobby}
,#{birth}
,#{address}
)
</insert>
</mapper>
- interface
public interface MemberMapper {
public int join(Member mebmer);
}
- repository에서 interface를 이용해 member를 join 시키고 그 결과로 int를 받아 return 한다. int가 리턴되는 것은 mapper.xml 에서 코드가 실행된 후 나타난다.
public class MemberRepository {
@Autowired
SqlSession session;
public int join(Member member) {
MemberMapper mapper = session.getMapper(MemberMapper.class);
int result = mapper.join(member);
return result;
}
}
- Controller에서는 Autowired로 repository 객체를 불러서 join 작업을 해준다.
@Controller
public class MemberController {
@Autowired
MemberRepository repository;
@RequestMapping(value = "/join", method = RequestMethod.POST)
public String join(Member member) {
System.out.println(member);
int result =repository.join(member);
if(result ==1) {
System.out.println("회원가입 성공");
}else {
System.out.println("회원가입 실패");
}
return "index";
}
}
◇ Spring 게시판 포스팅 시리즈 ◇
