JSP - 회원가입 페이지 만들기

로그인을 하기위해서는 회원가입이 필요하다.

회원가입 페이지를 만들어보자.

로그인페이지에서 회원가입(JOIN)을 눌렀을 때 넘어가는 페이지이다.

https://jamesyleather.tistory.com/392

로그인 페이지 만들기

https://jamesyleather.tistory.com/391 index 페이지 만들기 index 페이지를 만들기 위해 bootstrap 무료 템플릿을 사용한다. https://startbootstrap.com/templates/modern-business/ Modern Business - Full We..

jamesyleather.tistory.com

컨트롤러에서 각 페이지로 넘어갈 수 있게 설정한다.

jamesyleather.tistory.com/393

회원가입/ 아이디 찾기/ 비밀번호 찾기 페이지로 이동하기

회원가입 페이지 파일이름을 이용하여 직접 넘어가도 되지만 세션을 유지하고 다양한 정보를 지닌채 넘어가기 위해서는 컨트롤러를 통해 넘어가는 것이 바람직하다고 생각한다. package com.portfol

jamesyleather.tistory.com

그리고 회원가입 페이지를 작성한다.

해당 템플릿을 수정하여 작성하였다.

startbootstrap.com/snippets/sign-in-split

Bootstrap 4 Modern Sign In Page

A modern sign in page built with Bootstrap 4 featuring login form fields and a split screen image

startbootstrap.com

<join.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../header.jsp"%>
<html>
<head>
<meta charset="UTF-8">
<title>Join</title>

<script src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>

<style>
:root { -
	-input-padding-x: 1.5rem; -
	-input-padding-y: .75rem;
}

body {
	background-color: white;
}

.card-signin {
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card-signin .card-title {
	margin-bottom: 2rem;
	font-weight: 300;
	font-size: 1.5rem;
}

.card-signin .card-img-left {
	width: 45%;
	/* Link to your background image using in the property below! */
	background: scroll center
		url('https://i.pinimg.com/originals/d2/cf/56/d2cf56811c4a96727d4f1494ba0914d9.jpg');
	background-size: cover;
}

.card-signin .card-body {
	padding: 2rem;
}

.form-signin {
	width: 100%;
}

.form-signin .btn {
	font-size: 80%;
	border-radius: 5rem;
	letter-spacing: .1rem;
	font-weight: bold;
	padding: 1rem;
	transition: all 0.2s;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input {
	height: auto;
	border-radius: 2rem;
}

.form-label-group>input, .form-label-group>label {
	padding: var(- -input-padding-y) var(- -input-padding-x);
}

.form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: inline_block;
	width: 100%;
	margin-bottom: 0;
	/* Override default `<label>` margin */
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
	color: transparent;
}

.form-label-group input:-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-ms-input-placeholder {
	color: transparent;
}

.form-label-group input::-moz-placeholder {
	color: transparent;
}

.form-label-group input::placeholder {
	color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
	padding-top: calc(var(- -input-padding-y)+ var(- -input-padding-y)* (2/3));
	padding-bottom: calc(var(- -input-padding-y)/3);
}

.form-label-group input:not(:placeholder-shown) ~label {
	padding-top: calc(var(- -input-padding-y)/3);
	padding-bottom: calc(var(- -input-padding-y)/3);
	font-size: 12px;
	color: #777;
}
</style>

<script>
	function idcheck() {
		if (document.joinform.id.value == "") {
			alert("아이디를 입력해주세요.");
			document.joinform.id.focus();
			return false;
		}

		var url = "id_check_form?id=" + document.joinform.id.value;

		window.open(url, "_blank_1",
						"toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=500, height=300");
	}
</script>

</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-10 col-xl-9 mx-auto">
				<div class="card card-signin flex-row my-5">
					<div class="card-img-left d-none d-md-flex">
						<!-- Background image for card set in CSS! -->
					</div>
					<div class="card-body">
						<h5 class="card-title text-center">Join</h5>

						<!-- Form 시작 -->
						<form class="form-signin" id="join" action="join" method="post" name="joinform">
							<div class="form-label-group">
								<input type="text" id="id" name="id" class="form-control" placeholder="id"
									required autofocus value="${id}"> 
								<input type="hidden" name= "reid" id="reid"> <label for="id">id</label>	
							</div>

							<!-- 아이디 체크 -->
							<div class="form-label-group">
								<button
									class="btn btn-lg btn-secondary btn-block text-uppercase"
									type="button" onclick="idcheck()">ID Check</button>
							</div>

							<div class="form-label-group">
								<input type="password" id="pwd" name="pwd" class="form-control"
									placeholder="Password" required> <label for="pwd">password</label>
							</div>

							<div class="form-label-group">
								<input type="password" id="pwdcheck" name="pwdcheck" class="form-control"
									placeholder="Confirm Password" required> <label
									for="pwdcheck">Confirm password</label>
							</div>

							<hr>

							<div class="form-label-group">
								<input type="text" id="name" name="name" class="form-control" placeholder="name" required>
								<label for="name">name</label>
							</div>
							
							<!-- 문제의 input 부분 -->
							<div class="form-label-group">
								<input type="email" id="email" name="email" class="form-control" placeholder="email">
								<label for="email">email</label>
							</div>

							<hr>

							<div class="form-label-group">
								<input type="text" name="zip_code" class="form-control"
									placeholder="zip code" required /> 
									<label for="zip_code">zip code</label>
							</div>

							<div class="form-label-group">
								<button
									class="btn btn-lg btn-secondary btn-block text-uppercase"
									type="button" onclick="openZipSearch()">Search</button>
							</div>

							<div class="form-label-group">
								<input type="text" name="addr1" class="form-control"
									placeholder="addr1" readonly /> <label for="addr1">Address1</label>
							</div>

							<div class="form-label-group">
								<input type="text" name="addr2" class="form-control"
									placeholder="addr2" /> <label for="addr2">Address2</label>
							</div>
							<br>

							<div class="form-label-group">
								<input type="text" id="phone" name="phone" class="form-control" placeholder="phone" required>
								<label for="phone">phone</label>
							</div>
							
							

							<input type="button"
								class="btn btn-lg btn-primary btn-block text-uppercase"
								onclick="go_save()" value="Register"> 
								
								<a class="d-block text-center mt-2 small" href="login_form">Sign In</a>
							<hr class="my-4">
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<%@ include file="../footer.jsp"%>

그리고 중요 입력란들이 다 입력 됐는지 확인하기 위해

자바스크립트로 확인한다.

<member.js>

function go_save(){
	
	if(document.joinform.id.value==""){
		alert("아이디를 입력해주세요.");
		console.log(document.joinform.id.value);
		document.joinform.id.focus();
	} else if(document.joinform.pwd.value==""){
		alert("비밀번호를 입력해주세요.");
		document.joinform.pwd.focus();
	} else if(document.joinform.pwd.value != document.joinform.pwdcheck.value){
		alert("비밀번호가 일치하지 않습니다.");
		document.joinform.pwdcheck.focus();
	} else if(document.joinform.name.value==""){
		alert("이름을 입력해주세요.");
		document.joinform.name.focus();
	} else if(document.joinform.email.value==""){
		alert("이메일을 입력해주세요.");
		document.joinform.email.focus();
	} else if(document.joinform.zip_code.value==""){
		alert("주소를 입력해주세요.");
		document.joinform.zip_code.focus();
	} else if(document.joinform.phone.value==""){
		alert("전화번호를 입력해주세요.");
		document.joinform.phone.focus();
	} else{
		document.joinform.action="join";
		document.joinform.submit();
	}
}

그리고 아이디를 체크할 수 있는 새로운 창을 열 수 있게 버튼에 자바스크립트 함수를 적용해준다.


	function idcheck() {
		if (document.joinform.id.value == "") {
			alert("아이디를 입력해주세요.");
			document.joinform.id.focus();
			return false;
		}

		var url = "id_check_form?id=" + document.joinform.id.value;

		window.open(url, "_blank_1",
						"toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=500, height=300");
	}

jamesyleather.tistory.com/394

아이디 중복 확인

가장 먼저 User 정보를 저장할 수 있는 VO파일을 작성한다 VO파일에는 User정보가 저장되어야 하므로 데이터베이스에서 User에 관련된 컬럼을 모두 작성해야한다. package com.portfolio.biz.user.dto; import ja.

jamesyleather.tistory.com

그리고 아이디 중복확인 페이지를 작성한다.

<idcheck.jsp>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID check</title>  
<style>
:root { -
	-input-padding-x: 1.5rem; -
	-input-padding-y: .75rem;
}

body {
	background-color: white;
}

.card-signin {
	border: 0;
	border-radius: 1rem;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.card-signin .card-title {
	margin-bottom: 2rem;
	font-weight: 300;
	font-size: 1.5rem;
}

.card-signin .card-body {
	padding: 2rem;
}

.form-signin {
	width: 100%;
}

.form-signin .btn {
	font-size: 80%;
	border-radius: 5rem;
	letter-spacing: .1rem;
	font-weight: bold;
	padding: 1rem;
	transition: all 0.2s;
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input {
	height: auto;
	border-radius: 2rem;
}

.form-label-group>input, .form-label-group>label {
	padding: var(- -input-padding-y) var(- -input-padding-x);
}

.form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: inline_block;
	width: 100%;
	margin-bottom: 0;
	/* Override default `<label>` margin */
	line-height: 1.5;
	color: #495057;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
}
</style>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">

<!-- Bootstrap core JavaScript -->
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>

</head>
<body>
	<script type="text/javascript">
		function idok() {
			opener.joinform.id.value = "${id}";
			opener.joinform.reid.value = "${id}";
			self.close();
		}
		
	</script>

	<form method="post" class="form-signin" action="id_check_form" name="joinform">
		<div class="form-label-group">
			<input type="text" id="id" name="id" class="form-control" value="${id}"/>
		</div>

		<div class="form-label-group">
			<input class="btn btn-lg btn-secondary btn-block text-uppercase"
				type="submit" value="check">
		</div>

		<!-- 아이디가 존재할 때 -->
		<c:if test="${check == 1}">
			<script>
				opener.document.joinform.id.value = "";
			</script>
			${id}는 사용중인 아이디입니다.
		</c:if>

		<!-- 아이디가 존재하지 않을 때 -->
		<c:if test="${check == 0 }">
		${id}는 사용가능한 아이디입니다.
		<div class="form-label-group">
				<input class="btn btn-lg btn-secondary btn-block text-uppercase"
					type="button" value="use this ID" onclick="idok()">
			</div>
		</c:if>

	</form>

</body>
</html>

이미 있는 아이디라면 새로운 아이디를 체크할 수 있게 하고

중복되지 않은 아이디라면 그 아이디를 원래 회원가입 페이지로 아이디를 넘겨준다.

728x90

저작자표시

'포트폴리오 > JSP HTML CSS' 카테고리의 다른 글

JSP/HTML/Javascript - 사진 미리보기, 사진 썸네일 구현 (0)	2020.12.08
JSP - 관리자 로그인 페이지 (feat. bootstrap - Admin SB2) (0)	2020.12.07
JSP - 로그인 페이지 만들기 (0)	2020.11.30
JSP - index 페이지 만들기(feat. 부트스트랩) (0)	2020.11.05

가죽쟁이 개발자 도전기

JSP - 회원가입 페이지 만들기 - 1

'포트폴리오 > JSP HTML CSS' 카테고리의 다른 글

티스토리툴바

JSP - 회원가입 페이지 만들기 - 1

'포트폴리오 > JSP HTML CSS' 카테고리의 다른 글

'포트폴리오/JSP HTML CSS' Related Articles

티스토리툴바