[Spring] MVC 웹페이지 구현 - Model & 회원가입 페이지

JSP에서 getAttribute로 parameter 값을 받았었는데 Spring에선 MVC패턴을 활용해 Model 클래스 addAttribute 메서드로 parameter를 받을 수 있습니다. 그리고 클라이언트에 보여줄 View로 사용할 JSP 파일에 EL(Expression Language)를 사용해 웹페이지 출력하는 실습도 진행해보겠습니다. 회원가입 페이지를 만들어 DB에 저장하는 프로젝트를 실습으로 진행하고 있는데 이번 글에선 클라이언트로부터 요청이 오면 간단한 정보를 받아 페이지를 옮겨주는 것까지 설명하겠습니다. 

1) Controller 만들기

MVC 패턴에서 Controller는 요청을 받아 DB에 접근해 데이터를 가져온 뒤 응답해주는 역할을 합니다. 따라서 중요한 기능을 하기 때문에 우선적으로 구현해보겠습니다. 

 src/main/resource에 Controller xml 파일을 생성해줍니다. 생성한 파일명은 Spring에서 찾을 수 있도록 web.xml 내 설정해둔 classpath 에 추가해줍니다. 이번 프로젝트는 회원정보를 관리하는 DB에 연동하기 때문에 member.xml도 추가했고 MVC ViewResolver가 반환해줄 URL 양식이 들어있는 mvc.xml도 추가했습니다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
 
    <!-- MVC -->
    <mvc:annotation-driven/>
    
    <mvc:default-servlet-handler/>
    
    <mvc:view-resolvers>
        <mvc:jsp 
        prefix="/WEB-INF/view/"
        suffix=".jsp"/>
    </mvc:view-resolvers>
 
    <!-- MEMBER -->
    <tx:annotation-driven transaction-manager="transactionManager"/>
    
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="oracle.jdbc.driver.OracleDriver"/>
        <property name="jdbcUrl" value="jdbc:oracle:thin:@localhost:1521:xe"/>
        <property name="user" value="c##spring"/>
        <property name="password" value="1234"/>
        <property name="maxPoolSize" value="100"/>
        <property name="maxIdleTime" value="600"/>
        <property name="idleConnectionTestPeriod" value="300"/>
    </bean>
    
    <bean id="transactionManager" 
    class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    
    <bean id="memberDao" class="spring.MemberDao">
        <constructor-arg ref="dataSource"/>
    </bean>
    
    <bean id="memberRegSvc" class="spring.MemberRegisterService">
        <constructor-arg ref="memberDao"/>
    </bean>
    
    <bean id="memberPwdSvc" class="spring.ChangePasswordService">
        <constructor-arg ref="memberDao"/>
    </bean>
 
    <!-- CONTROLLER -->
    <bean class="sample.HelloController"/>
    <bean class="controller.RegisterController">
        <property name="memberRegSvc" ref="memberRegSvc"/>
    </bean>
 
</beans>
 

자 이제 Controller 클래스를 만들어줄 차례입니다. 

@RequestMapping은 클라이언트가 요청한 value값이 match되는 메서드에서 method 방식(GET/POST, 차이는 데이터 노출/숨김)에 따라 처리해주고 return되는 String을 mvc.xml에 설정한 prefix, suffix를 앞뒤로 붙인 파일을 반환해줍니다. 

package controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
 
import spring.AlreadyExistingMemberException;
import spring.MemberRegisterService;
import spring.RegisterRequest;
 
@Controller
public class RegisterController {
    
    //약관동의 페이지
    @RequestMapping(value="/register/step1", method= RequestMethod.GET)
    public String handleStep1() {
        return "register/step1";
    }
    
    //회원정보 입력 페이지
    @RequestMapping(value="/register/step2", method=RequestMethod.POST)
    public String handleStep2(
            @RequestParam(value="agree", defaultValue="false") Boolean agree) {
            if(!agree) {
                return "register/step1";
            } 
            return "register/step2";
    }
    
    //GET방식 유입될 경우 step1으로 redirect
    @RequestMapping(value="/register/step2", method=RequestMethod.GET)
    public String handleStep2() {
        return "redirect:/register/step1";
    }
    
    private MemberRegisterService memberRegSvc;
    
    public void setMemberRegSvc(MemberRegisterService memberRegSvc) {
        this.memberRegSvc = memberRegSvc;
    }
    
    //step2 입력된 회원정보를 클래스 메서드로 실행시켜 DB에 저장
    //커맨드 객체 활용(VO)
    @RequestMapping(value="/register/step3", method=RequestMethod.POST)
    public String handleStep3(RegisterRequest regReq) {
        try {
            memberRegSvc.regist(regReq);
            return "register/step3";
        } catch(AlreadyExistingMemberException e) {
            return "register/step2";
        }
    }
    
    
    
 
}
 

step1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h2>약관</h2>
<p>약관 내용</p>
    <form action="step2" method="post">
        <label>
            <input type="checkbox" name="agree" value="true">
            약관 동의
        </label>
        <input type="submit" value="다음단계">
    </form>
    
    
</body>
</html>

step2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<h2>회원 정보 입력</h2>
    <form action="step3" method="post">
    <p>
        <label>이메일: <input type="text" name="email" id="email"></label>
    </p>    
    <p>
        <label>이름: <input type="text" name="name" id="name"></label>
    </p>    
    <p>
        <label>비밀번호: <input type="password" name="password" id="password"></label>
    </p>    
    <p>
        <label>비밀번호 확인: <input type="password" name="confirmPassword" id="confirmPassword"></label>
    </p>    
        <input type="submit" value="가입완료">
    </form>
    
    
</body>
</html>

step3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
</head>
<body>
<p><h2>회원 가입을 환영합니다.</h2></p>
<p><a href="${pageContext.request.contextPath }/main">홈 화면 이동</a></p>    
</body>
</html>