부트스트랩 회원가입 폼 예제다.
PDO(PHP Data Object) Class 와 연계하여 회원가입 처리를 하는 입력 폼, jQuery 코드다.
registerForm.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>회원가입</title>
<!-- Bootstrap -->
<link href="../plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- Custom style -->
<link rel="stylesheet" href="../plugin/bootstrap/css/style.css" media="screen" title="no title" charset="utf-8">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../config/js/join.js"></script>
</head>
<body>
<article class="container">
<div class="page-header">
<div class="col-md-6 col-md-offset-3">
<h3>회원가입 Form</h3>
</div>
</div>
<div class="col-sm-6 col-md-offset-3">
<form role="form">
<div class="form-group">
<label for="inputName">성명</label>
<input type="text" class="form-control" id="inputName" placeholder="이름을 입력해 주세요">
</div>
<div class="form-group">
<label for="InputEmail">이메일 주소</label>
<input type="email" class="form-control" id="InputEmail" placeholder="이메일 주소를 입력해주세요">
</div>
<div class="form-group">
<label for="inputPassword">비밀번호</label>
<input type="password" class="form-control" id="inputPassword" placeholder="비밀번호를 입력해주세요">
</div>
<div class="form-group">
<label for="inputPasswordCheck">비밀번호 확인</label>
<input type="password" class="form-control" id="inputPasswordCheck" placeholder="비밀번호 확인을 위해 다시한번 입력 해 주세요">
</div>
<div class="form-group">
<label for="inputMobile">휴대폰 번호</label>
<input type="tel" class="form-control" id="inputMobile" placeholder="휴대폰번호를 입력해 주세요">
</div>
<div class="form-group">
<label for="inputtelNO">사무실 번호</label>
<input type="tel" class="form-control" id="inputtelNO" placeholder="사무실번호를 입력해 주세요">
</div>
<div class="form-group">
<label>약관 동의</label>
<div data-toggle="buttons">
<label class="btn btn-primary active">
<span class="fa fa-check"></span>
<input id="agree" type="checkbox" autocomplete="off" checked>
</label>
<a href="#">이용약관</a>에 동의합니다.
</div>
</div>
<div class="form-group text-center">
<button type="submit" id="join-submit" class="btn btn-primary">
회원가입<i class="fa fa-check spaceLeft"></i>
</button>
<button type="submit" class="btn btn-warning">
가입취소<i class="fa fa-times spaceLeft"></i>
</button>
</div>
</form>
</div>
</article>
</body>
</html>
|
join.js
$(function(){
// 회원 가입 처리
$('#join-submit').click(function(e){
e.preventDefault();
if($("#inputName").val() ==''){
alert('이름을 입력하세요');
$("#inputName").focus();
return false;
}
var email = $('#InputEmail').val();
if(email == ''){
alert('이메일을 입력하세요');
$("#InputEmail").focus();
return false;
} else {
var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailRegex.test(email)) {
alert('이메일 주소가 유효하지 않습니다. ex)abc@gmail.com');
$("#inputEmail").focus();
return false;
}
}
if($("#inputPassword").val() ==''){
alert('비밀번호를 입력하세요');
$("#inputPassword").focus();
return false;
}
if($("#inputPasswordCheck").val() ==''){
alert('비밀번호를 다시 한번 더 입력하세요');
$("#inputPasswordCheck").focus();
return false;
}
if($("#inputPassword").val()!== $("#inputPasswordCheck").val()){
alert('비밀번호를 둘다 동일하게 입력하세요');
return false;
}
if($("#inputMobile").val() ==''){
alert('휴대폰 번호를 입력하세요');
$("#inputMobile").focus();
return false;
}
if($("#agree").is(":checked") == false){
alert('약관에 동의하셔야 합니다');
return false;
}
$.ajax({
url: 'register.php',
type: 'POST',
data: {
name:$("#inputName").val(),
userID:$('#InputEmail').val(),
email:$('#InputEmail').val(),
password:$('#inputPassword').val(),
telNO:$("#inputtelNO").val(),
mobileNO:$("#inputMobile").val()
},
dataType: "json",
success: function (response) {
if(response.result == 1){
alert('가입 완료');
location.replace('../index.php'); // 화면 갱신
} else if(response.result == 0){
alert('이미 가입된 아이디입니다');
} else if(response.result == -2){
alert('입력된 값이 없습니다');
} else {
alert('등록중에 에러가 발생했습니다');
}
},
error: function(jqXHR, textStatus, errorThrown){
alert("arjax error : " + textStatus + "\n" + errorThrown);
}
});
});
}); |
register.php
<?php
extract($_POST);
if (isset($_POST)) {
require_once '../config/config.php';
$c = new MemberClass();
// 동일한 userID(email) 등록되어 있는지 체크
if ($c->isUserExisted($userID)) {
echo '{"result":"0"}'; // echo json_encode(array('result' => '0')); 과 동일
} else {
// 회원 등록
$user = $c->storeUser($userID, $name, $email, $password, $telNO, $mobileNO);
if ($user) {// 사용자 등록 성공
if (!isset($_SESSION)) {
session_start();
}
$_SESSION['userID'] = $user['userID'];
$_SESSION['admin'] = $user['admin'];
echo json_encode(array('result' => '1'));
} else {
// 회원 등록 실패
echo json_encode(array('result' => '-1'));
}
}
} else {// 입력받은 데이터에 문제가 있을 경우
echo json_encode(array('result' => '-2'));
}
?> |
코드는 100% 동작되는 코드다. 모두 테스트를 하고 올린 코드들이다.
PDO Class 는 http://link2me.tistory.com/1401 에 올려져 있다.
안드로이드 회원가입 처리 코드 예제는 https://link2me.tistory.com/1405 를 참조하시라.
