본 예제를 이용하여 테스트하기 위해선 웹 서버가 필요하니 참고바라며 본 예제 에서는 이러한 내용들은 포함되지 않았으니 소스코드를 참고하여 웹 서버 지원이 되는 곳에서 테스트를 해보기 바란다.
회원가입 서비스를 구현하기 위해선 여러 기능들이 필요하다. 단 모든 기능들을 예제로 표현하기는 어렵기 때문에 이번 편에서는 단순하게 회원 기본정보만을 이용하여 가입 까지 구현되는 절차에 대해 배워보자.
1. 회원 DB TABLE 생성 | MEMBER
회원 서비스를 이용하기 위해선 당연히 회원 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='회원테이블';
2. 회원가입 FORM 을 생성 | register.php
회원가입 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>
3. 회원가입 처리 | register-complete.php
마지막으로 입력받은 회원가입 정보를 체크 하여 최종 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));
다음 편은 회원가입 정보를 이용하여 로그인 하는방법에 대해 알아보자
Comment