JSP - 회원가입 페이지 디자인

로그인 기능을 모두 구현했다. 이제 실제 사용자들이 회원가입을 통해 게시판을 이용할 수 있도록 해야한다. 알맹이를 만들기 전에 껍데기부터 구현하자. 즉, 회원가입 기능을 구현하기 전에 회원가입 페이지를 먼저 디자인 할 것이다.

WebContent 디렉토리 밑에 join.jsp 파일을 생성한다.
그리고 전에 만들었던 login.jsp 파일의 내용을 그대로 복사 & 붙여넣기한다.
내용은 하나도 건들지 않고 가운데 타이틀에 해당하는 텍스트 그리고 기존 버튼 텍스트만 "회원가입 화면", "회원가입" 으로 각각 바꿔준다.

계속해서 한 명의 회원이 가지고 있는 필드값은 ID, Password, Name, Gender, Email이기 때문에 로그인할 때 사용했던 ID와 Password 말고는 모두 새롭게 추가해주어야한다.

<div class="form-group">
		<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
</div>

위의 내용을 응용해서<div class="container"> 하위에 다음과 같이 코딩한다.

<div class="form-group">
	<input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20">
</div>
<div class="form-group">
	<input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20">
</div>
<div class="form-group">
	<input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20">
</div>
<div class="form-group" style="text-align: center;">
	<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-primary active">
			<input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자
        </label>
        <label class="btn btn-primary">
        	<input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자
        </label>
	</div>
</div>
<div class="form-group">
	<input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20">
</div>

• 기본적으로 이름과 이메일 필드는 전에 만들었던 아이디, 패스워드 양식과 똑같이 하고 placeholder 값만 바꾸면 된다.
• 성별 필드를 생성할 때, 남자 혹은 여자를 선택할 수 있도록 하기 위해 폼 태그로 toggle 버튼을 생성했다. 또한 하나만 선택해야하므로 radio 속성으로 만들었다.

이렇게해서 간단하게 회원가입 페이지 디자인이 끝났다. 한번 테스트 해보자.

우리가 코딩한 대로 디자인이 잘 되었다.