본 예제를 이용하여 테스트하기 위해선 웹 서버가 필요하니 참고바라며 본 예제 에서는 이러한 내용들은 포함되지 않았으니 소스코드를 참고하여 웹 서버 지원이 되는 곳에서 테스트를 해보기 바란다.
회원가입 서비스를 구현하기 위해선 여러 기능들이 필요하다. 단 모든 기능들을 예제로 표현하기는 어렵기 때문에 이번 편에서는 단순하게 회원 기본정보만을 이용하여 가입 까지 구현되는 절차에 대해 배워보자.
회원 서비스를 이용하기 위해선 당연히 회원 DB가 있어야 하므로 간단하게 아래와 같은 쿼리문을 실행하여 TABLE 을 생성해준다.
CREATE TABLE `MEMBER` (
`PID` INT(11) NOT NULL AUTO_INCREMENT COMMENT '고유번호',
`ID` VARCHAR(30) NULL DEFAULT NULL COMMENT '아이디',
`PASSWORD` VARCHAR(50) NULL DEFAULT NULL COMMENT '비밀번호',
`NAME` VARCHAR(20) NULL DEFAULT NULL COMMENT '이름',
`HPP` VARCHAR(20) NULL DEFAULT NULL COMMENT '휴대폰번호',
`EMAIL` VARCHAR(255) NULL DEFAULT NULL COMMENT '이메일',
`GENDER` ENUM('M','F') NULL DEFAULT NULL COMMENT '성별',
`BIRTHDAY` DATE NULL DEFAULT NULL COMMENT '생년월일',
`CREATE_DT` DATETIME NULL DEFAULT NULL COMMENT '생성일',
`MOD_DT` DATETIME NULL DEFAULT NULL COMMENT '변경일',
PRIMARY KEY (`PID`) USING BTREE,
UNIQUE INDEX `ID` (`ID`) USING BTREE
)
COMMENT='회원테이블';
회원가입 FORM 은 클라이언트 부분으로 사용자의 입력데이터를 받는 부분이다. 간단하게 소스코드로 보면 아래와 같다.
<?php // register.php ?>
<!-- jquery 사용을 위한 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- 회원가입 폼 html -->
<form id="form-register" name="form-register" method="post" action="register-complete.php" onsubmit="return false;">
<h1>회원가입</h1>
<ul class="item">
<li class="title">아이디</li>
<li class="value">
<input type="text" name="id" value="" placeholder="아이디를 입력해주세요.">
</li>
</ul>
<ul class="item">
<li class="title">비밀번호</li>
<li class="value">
<input type="password" name="password" value="" placeholder="비밀번호를 입력해 주세요.">
</li>
</ul>
<ul class="item">
<li class="title">비밀번호 재확인</li>
<li class="value">
<input type="password" name="re-password" value="" placeholder="비밀번호를 다시한번 입력해 주세요.">
</li>
</ul>
<ul class="item">
<li class="title">이름</li>
<li class="value">
<input type="text" name="name" value="" placeholder="이름을 입력해 주세요.">
</li>
</ul>
<ul class="item">
<li class="title">휴대폰 번호</li>
<li class="value">
<input type="tel" name="hpp" value="" placeholder="휴대폰번호를 입력해 주세요.">
</li>
</ul>
<ul class="item">
<li class="title">이메일</li>
<li class="value">
<input type="email" name="email" value="" placeholder="이메일을 입력해 주세요.">
</li>
</ul>
<ul class="item">
<li class="title">성별</li>
<li class="value">
<label><input type="radio" name="gender" value="M"> 남성</label>
<label><input type="radio" name="gender" value="F"> 여성</label>
</li>
</ul>
<ul class="item">
<li class="title">생년월일</li>
<li class="value">
<input type="date" name="birthday" value="" placeholder="생년월일을 입력해 주세요.">
</li>
</ul>
<div class="submit"><a id="register-submit" href="#none" onclick="return false;">가입하기</a></div>
</form>
<!-- 회원가입 폼 style -->
<style>
h1{ text-align:center; }
input[type="text"]
,input[type="email"]
,input[type="tel"]
,input[type="password"]
,input[type="date"]
{line-height:30px;}
input[type="password"]{ width:300px;}
#form-register{ width:100%; max-width: 500px; margin:30px auto; }
#form-register ul{ overflow: hidden; }
#form-register ul li{ float: left; list-style:none; line-height:30px; padding:10px 0; }
#form-register ul li.title{ width:140px; text-align:center; font-weight:900; background-color:#fafafa; }
#form-register ul li.value{ margin-left:5px; }
#form-register .submit{ text-align:center; }
#form-register .submit a{ text-decoration: none; background-color:#333; color:#fff; width:100%; max-width:120px; display: inline-block; text-align:center; padding:10px 0; }
</style>
<!-- 회원가입 폼 script -->
<script>
var authSubmit = true;
$(document).on('click','#register-submit',function(){
var $form = $('#form-register');
var formData = $form.serialize();
authSubmit = false;
$.ajax({url:$form.attr('action'), data: formData, dataType:'json' , type: $form.attr('method')})
.done(function(e){
if( typeof e.msg !='undefined' && e.msg != '' ){ alert(e.msg); }
if( e.rst == 'success'){ window.location.reload(); }
})
.always(function(e){
authSubmit =true;
})
.fail(function(e){ alert('오류가 발생하였습니다.'); })
});
</script>
마지막으로 입력받은 회원가입 정보를 체크 하여 최종 DB에 업데이트를 시켜준다. (당연하겠지만 DB업데이트는 반드시 설정을 변경하여 사용해야한다.)
<?php
// DB연결설정 <!: 환경에 맞게 수정 필요>
$dbConfig = array(
'host'=>'localhost', // 호스트
'username'=>'', // DB USER 이름
'dbname'=>'', // DB명
'password'=>'', // DB 비밀번호
);
try{
$response = array('rst'=>'fail',',msg'=>'응답실패');
// 입력값 체크
if(empty($_POST['id'])){ throw new Exception("아이디를 입력해주세요."); }
if(empty($_POST['password'])){ throw new Exception("비밀번호를 입력해주세요."); }
if(empty($_POST['re-password'])){ throw new Exception("비밀번호를 재확인을 입력해주세요."); }
if(empty($_POST['name'])){ throw new Exception("이름을 입력해주세요."); }
if(empty($_POST['hpp'])){ throw new Exception("휴대폰번호를 입력해주세요."); }
if(empty($_POST['email'])){ throw new Exception("이메일을 입력해주세요."); }
if(empty($_POST['gender'])){ throw new Exception("성별을 선택해주세요."); }
if(empty($_POST['birthday'])){ throw new Exception("생년월일을 선택해주세요."); }
// 입력값 재정의
$_POST['id']= strtolower($_POST['id']); // 아이디 소문자 변경
$_POST['email'] = strtolower($_POST['email']); // 소문자로 변경
$_POST['birthday'] = @date('Y-m-d',strtotime($_POST['birthday']));
// 입력값 정규식 체크
if( !preg_match("/^[a-zA-Z0-9]*$/",$_POST['id'])){ throw new Exception("아이디는 영문 및 숫자만 입력 가능합니다.");}
if( mb_strlen($_POST['id'],"utf-8") < 4 || mb_strlen($_POST['id'],"utf-8") > 20){ throw new Exception("아이디는 4자이상 20자 이하로만 입력해주세요.");}
if( mb_strlen($_POST['password'],"utf-8") < 8 || mb_strlen($_POST['password'],"utf-8") > 20){ throw new Exception("비밀번호는 8자 이상 20자 이하로만 입력해주세요.".mb_strlen($_POST['password'],"utf-8"));}
if( $_POST['password'] != $_POST['re-password'] ){ throw new Exception("비밀번호를 입력해주세요."); }
if( mb_strlen($_POST['name'],"utf-8") < 1 ){ throw new Exception("이름은 1자이상 선택해주세요."); }
if( !preg_match('/^(010|011|016|017|018|019)-[^0][0-9]{3,4}-[0-9]{4}$/',$_POST['hpp']) ){ throw new Exception("올바른 휴대폰 번호를 입력해주세요."); }
if( $_POST['email'] != filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){ throw new Exception("이메일 형식이 올바르지 않습니다."); };
if( !in_array($_POST['gender'], array('M','F'))){ throw new Exception("성별이 올바르지 않습니다."); }
if( $_POST['birthday'] > date('Y-m-d') || $_POST['birthday'] < '1900-01-01' ){ throw new Exception("올바른 생년월일을 선택해 주세요."); }
// MYSQLI 접속
$mysqli = @new mysqli($dbConfig['host'],$dbConfig['username'],$dbConfig['password'],$dbConfig['dbname']);
if( $mysqli == false){ throw new Exception("사이트 오류가 발생하였습니다."); }
// 아이디 중복 체크
$query = "SELECT COUNT(*) AS CNT FROM MEMBER WHERE ID = '".addslashes($_POST['id'])."' ";
$resultData = new \stdClass;
if($result = $mysqli->query($query)) {
$resultData = $result->fetch_object();
$result->close();
}
else{
throw new Exception("사이트 오류가 발생하였습니다.");
}
if( $resultData->CNT > 0){ throw new Exception("이미 등록된 아이디 입니다."); }
// 계정 등록
$arrQuery = array(
"ID"=>$_POST['id'],
"PASSWORD"=>'*'.strtoupper(sha1(sha1($_POST['password'], true))),
"NAME"=>$_POST['name'],
"HPP"=>$_POST['hpp'],
"EMAIL"=>$_POST['email'],
"GENDER"=>$_POST['gender'],
"BIRTHDAY"=>$_POST['birthday'],
"CREATE_DT"=>date('Y-m-d H:i:s'),
"MOD_DT"=>date('Y-m-d H:i:s'),
);
$query = " INSERT INTO MEMBER(".implode(",", array_keys($arrQuery)).") VALUES('".implode("','",$arrQuery)."') ON DUPLICATE KEY UPDATE MOD_DT = NOW()";
$result = $mysqli->query($query);
$result->close();
$response['rst'] = 'success';
$response['msg'] = '회원가입을 축하드립니다.';
$mysqli->close();
}
catch(Exception $e){
$response['msg'] = "[".$e->getLine()."] ".$e->getMessage();
}
// 결과응답
die(json_encode($response));
다음 편은 회원가입 정보를 이용하여 로그인 하는방법에 대해 알아보자