hw1 helloMVC

hw1-helloMVC Report

기존 로그인 양식에 회원가입 양식을 추가하고, 성공적으로 register 버튼을 눌러 가입을 마치면 사용자가 입력한 정보를 확인할 수 있도록 한다.

1. 회원가입 양식 만들기

간단한 회원가입 form을 table에 담아 깔끔하게 만든다.

<!-- /hw1-helloMVC/WebContent/view/registerForm.jsp -->

<h1>Registration Form</h1>
    <div class="ex">
        <!--
        action 속성에 submit시 form-data를 전송할 곳을 지정하고
        전송 방식은 post로 지정하여 URL에 입력정보가 나타나지 않도록 하고 header에 정보를 담아 전송한다.
        -->
	<form action="/hw1-helloMVC/doRegister" method="post">
            <table>
		<tr>
		    <th colspan="2">Enter Information Here</th>
		</tr>
		<tr>
		    <td class="category">아이디</td>
		    <td class="user-info"><input type="text" name="id" /></td>
		</tr>
		<tr>
		    <td class="category">비밀번호</td>
		    <td class="user-info"><input type="password" name="password" /></td>
		</tr>
		<tr>
		    <td class="category">이름</td>
		    <td class="user-info"><input type="text" name="name" /></td>
		</tr>
		<tr>
		    <td class="category">성별</td>
		    <td class="user-info">
                        <!-- 성별을 선택하지 않더라도 에러가 나지 않도록 default 값으로 none을 지정 -->
                        <input type="hidden" name="gender" value="none" />
		        <input type="radio" name="gender" value="male" /> 남자
			<input type="radio" name="gender" value="female" /> 여자
		    </td>
		</tr>
		<tr>
		    <td class="category">이메일</td>
		    <td class="user-info"><input type="email" name="email" /></td>
		</tr>
		<tr>
		    <td class="category"></td>
		    <td class="user-info"><input type="submit" value="register" /></td>
		</tr>
            </table>
        </form>
    </div>
</body>

결과물

2. 가입 정보를 확인하는 페이지 만들기

2-1. Create DoRegister.java

registerForm.jsp에서 전송한 데이터를 받아 Customer 객체를 생성하고 registerSuccess.jsp로 넘어간다.

/* /hw1-helloMVC/src/controller/DoRegister.java */

@WebServlet("/doRegister")
public class DoRegister extends HttpServlet {
    ...

    /**
      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
      */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /* form에서의 name 속성 값과 동일한 값을 주어 전송된 값을 저장한다. */
	String id = request.getParameter("id");
	String password = request.getParameter("password");
	String name = request.getParameter("name");
	String gender = request.getParameter("gender");
	String email = request.getParameter("email");
		
        /*
         * 가입한 고객의 정보를 parameter로 받아 객체를 생성하고,
         * addCustomer 메소드를 통해 서비스에 고객을 추가한다.
         */
	CustomerService service = (CustomerService) CustomerService.getInstance();
	Customer customer = new Customer(id, password, name, gender, email);
	service.addCustomer(customer);
		
	String page;
        /* 필수 입력 값들이 채워져있지 않다면 다시 값을 채우도록 유도 */
	if (id.isBlank() || password.isBlank() || name.isBlank()) {
		page = "/view/registerFail.jsp";
		System.out.println("Please fill in the blanks");
	}
	else {
		page = "/view/registerSuccess.jsp";
		service.addCustomer(customer);
		request.setAttribute("customer", customer);			
	}
		
	RequestDispatcher dispatcher = request.getRequestDispatcher(page);
	dispatcher.forward(request, response);
    }
}

2-2. Create registerSuccess.jsp

사용자가 입력한 정보를 확인할 수 있는 페이지를 만든다.

<!-- /hw1-helloMVC/WebContent/view/registerSuccess.jsp -->

<h1>You registered successfully.</h1>
<ul>
    <li>Id: ${customer.id}
    <li>Password: ${customer.password}
    <li>Gender: ${customer.gender}
    <li>Name: ${customer.name}
    <li>Email: ${customer.email}
</ul>
<p>
    <a href="/hw1-helloMVC/index.jsp"> go to home page </a>
</p>

결과물

2-3. Create registerFail.jsp

과제의 요구사항에는 없었으나, 필수 입력값들이 입력되어야 가입이 성공적으로 진행되도록 만들어야 한다고 생각하여 ID, 비밀번호, 이름이 입력되지 않은 경우에는 가입 실패 페이지로 이동하여 다시 가입 페이지로 돌아가 값을 채우도록 유도하였다.

<!-- /hw1-helloMVC/WebContent/view/registerFail.jsp -->

<h1>Failed to join</h1>
You have to fill in at least ID, Password and Name..
<p>
	<a href="/hw1-helloMVC/view/registerForm.jsp"> try again </a><br>
	<a href="/hw1-helloMVC/index.jsp"> go to home page </a>
</p>