본 예제를 이용하여 테스트하기 위해선 웹 서버가 필요하니 참고바라며 본 예제 에서는 이러한 내용들은 포함되지 않았으니 소스코드를 참고하여 웹 서버 지원이 되는 곳에서 테스트를 해보기 바란다. 

 

회원가입 서비스를 구현하기 위해선 여러 기능들이 필요하다. 단 모든 기능들을 예제로 표현하기는 어렵기 때문에 이번 편에서는 단순하게 회원 기본정보만을 이용하여 가입 까지 구현되는 절차에 대해 배워보자. 

 

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));

 

다음 편은 회원가입 정보를 이용하여 로그인 하는방법에 대해 알아보자