회원가입폼과 기가입여부를 체크하는 기능이 포함된 Form 예제다.
jQuery, Ajax 를 사용하여 입력 필드 체크와 휴대폰번호 및 비밀번호 유효성 검사, 이미 가입된 ID인지 여부를 체크하는 기능, 회원가입 자료 저장, 로그인 처리 기능이 포함되어 있다.
첨부파일에는 테이블 구조 SQL 까지 포함되어 있으므로 윈도우 기반 Autoset9 에서 직접 테스트해볼 수 있다.
간략하게 사용법 순서를 적어보면....
1. 테이블 구조 SQL 문을 autoset9 에서 테이블 생성한다.
members 테이블과 member_data 테이블 두개의 테이블로 나누었고 PHP에서 JOIN 으로 데이터를 처리한다.
CREATE TABLE IF NOT EXISTS `members` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`userID` varchar(50) NOT NULL DEFAULT '',
`userNM` varchar(20) NOT NULL,
`passwd` varchar(80) NOT NULL,
`salt` varchar(10) NOT NULL,
`admin` tinyint(2) NOT NULL DEFAULT '0',
`phoneSE` varchar(80) DEFAULT NULL,
`OStype` tinyint(2) NOT NULL DEFAULT '0',
`regdate` char(14) NOT NULL DEFAULT '',
`curdate` char(14) DEFAULT NULL COMMENT '최근접속',
PRIMARY KEY (`uid`),
UNIQUE KEY `userID` (`userID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
|
CREATE TABLE IF NOT EXISTS `member_data` (
`uid` int(11) NOT NULL AUTO_INCREMENT,
`relateduid` int(11) NOT NULL DEFAULT '0',
`level` int(11) NOT NULL DEFAULT '0',
`userNM` varchar(60) NOT NULL COMMENT '이름',
`email` varchar(60) NOT NULL COMMENT '메일',
`mobileNO` varchar(20) NOT NULL,
`officeNO` varchar(20) DEFAULT NULL,
`homeNO` varchar(20) DEFAULT NULL,
`home_addr1` varchar(100) DEFAULT NULL,
`home_addr2` varchar(50) DEFAULT NULL,
`office_addr1` varchar(100) DEFAULT NULL,
`office_addr2` varchar(50) DEFAULT NULL,
`sex` tinyint(2) NOT NULL DEFAULT '0',
`point` int(11) NOT NULL DEFAULT '0',
`smart` tinyint(2) NOT NULL DEFAULT '0',
`modifydate` char(14) NOT NULL DEFAULT '',
PRIMARY KEY (`uid`),
KEY `relateduid` (`relateduid`),
KEY `mobileNO` (`mobileNO`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
|
2. 회원가입 폼
- E-Mail 을 userID 로 사용하고 가입여부를 체크하는 중복체크 jQuery가 포함되어 있다.
- E-Mail 주소 유효성 체크 기능이 포함되어 있다.
- 휴대폰 번호 유효성 체크 기능이 포함되어 있다.
- 비밀번호는 영문, 숫자, 특수문자 등을 혼용하여 가입하도록 했다.
3. 회원가입 처리 로직은 직접 구현해보도록 하여 입력값이 넘어오는지 여부만 체크하는 걸 주석처리했다.
회원가입 결과를 확인할 수 있도록 내용을 수정 보완했다.
4. LoginForm.php 에서는 로그인 화면을 구현했다.
로그인 체크 jQuery 와 Ajax 처리하는 걸 추가했다.
5. 회원가입/로그인이 성공하면 index.php 에서 SESSION을 검사하여 main.php 파일로 이동하도록 했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 회원가입처리
$("form").submit(function(){
var userNM = $("input[name='userNM']");
if( userNM.val() =='') {
alert("성명을 입력하세요");
userNM.focus();
return false;
}
var email = $("input[name='email']");
if(email.val() == ''){
alert('이메일을 입력하세요');
email.focus();
return false;
} else {
var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailRegex.test(email.val())) {
alert('이메일 주소가 유효하지 않습니다. ex)abc@gmail.com');
email.focus();
return false;
}
}
var mobileNO = $("input[name='mobileNO']");
if(mobileNO.val() ==''){
alert('휴대폰 번호를 입력하세요');
mobileNO.focus();
return false;
} else if(!/^[0-9]{10,11}$/.test(mobileNO.val())){
alert("휴대폰 번호는 숫자만 10~11자리 입력하세요.");
return false;
} else if(!/^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/.test(mobileNO.val())){
alert("유효하지 않은 전화번호 입니다.");
return false;
}
var password = $("input[name='Password']");
var repassword = $("input[name='rePassword']");
if(password.val() =='') {
alert("비밀번호를 입력하세요!");
password.focus();
return false;
}
if(password.val().search(/\s/) != -1){
alert("비밀번호는 공백없이 입력해주세요.");
return false;
}
if(!/^[a-zA-Z0-9!@#$%^&*()?_~]{8,20}$/.test(password.val())){
alert("비밀번호는 숫자, 영문, 특수문자(!@$%^&*?_~ 만 허용) 조합으로 8~20자리를 사용해야 합니다.");
return false;
}
// 영문, 숫자, 특수문자 2종 이상 혼용
var chk=0;
if(password.val().search(/[0-9]/g) != -1 ) chk ++;
if(password.val().search(/[a-z]/ig) != -1 ) chk ++;
if(password.val().search(/[!@#$%^&*()?_~]/g) != -1) chk ++;
if(chk < 2){
alert("비밀번호는 숫자, 영문, 특수문자를 두가지이상 혼용하여야 합니다.");
return false;
}
// email이 아닌 userID 인 경우에는 체크하면 유용. email은 특수 허용문자에서 걸러진다.
/*
if(password.val().search(userID.val())>-1){
alert("userID가 포함된 비밀번호는 사용할 수 없습니다.");
return false;
}
*/
if(repassword.val() =='') {
alert("비밀번호를 다시 한번 더 입력하세요!");
repassword.focus();
return false;
}
if(password.val()!== repassword.val()){
alert('입력한 두 개의 비밀번호가 일치하지 않습니다');
return false;
}
});
// userID(e-mail) 가입여부 검사
$("#checkid").click(function(e){
e.preventDefault();
var email = $("input[name='email']");
if(email.val() == ''){
alert('이메일을 입력하세요');
email.focus();
return false;
} else {
var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!emailRegex.test(email.val())) {
alert('이메일 주소가 유효하지 않습니다. ex)abc@gmail.com');
email.focus();
return false;
}
}
$.ajax({
url: 'a.joinChk.php',
type: 'POST',
data: {userID:email.val()},
dataType: "json",
success: function (msg) {
//alert(msg); // 확인하고 싶으면 dataType: "text" 로 변경한 후 확인 가능
if(msg.result == 1){
alert('사용 가능합니다');
} else if(msg.result == 0){
alert('이미 가입된 아이디입니다');
email.val('');
}
},
error: function(jqXHR, textStatus, errorThrown){
alert("arjax error : " + textStatus + "\n" + errorThrown);
}
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>회원가입 Form 예제</h2>
<form method="post" action="a.register.php">
<table>
<tr>
<td style='width:100px'>이름</td>
<td><input type="text" size=37 name="userNM" value=""></td>
</tr>
<tr>
<td>E-Mail</td>
<td>
<input type="text" size=25 name="email" value="">
<input type="button" id="checkid" value="중복체크">
</td>
</tr>
<tr>
<td>휴대폰번호</td>
<td><input type="text" size=37 name="mobileNO" value=""></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" size=37 name="Password"></td>
</tr>
<tr>
<td>비밀번호(확인)</td>
<td><input type="password" size=37 name="rePassword"></td>
</tr>
<tr>
<td colspan='2' align='center'><input type="submit" value="회원가입"></td>
</tr>
</table>
</fom>
</div>
</body>
</html>
|
body {
font-family: 나눔바른고딕, NanumBarunGothic, 맑은고딕, "Malgun Gothic", 돋움, Dotum, "Apple SD Gothic Neo", sans-serif;
font-size: 12px;
color: rgb(33, 33, 33);
letter-spacing: 0.03em;
}
table {
width: 600px;
}
tr {
height: 50px;
}
input[type=text], input[type=password] {
padding: 5px 10px; /* 상하 우좌 */
margin: 3px 0; /* 상하 우좌 */
font-family: inherit; /* 폰트 상속 */
border: 1px solid #ccc; /* 999가 약간 더 진한 색 */
font-size:14pt;
box-sizing: border-box;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus, input[type=password]:focus {
border: 2px solid #555;
}
input[type=submit],input[type=button] {
margin-top: 10px;
width:100px;
height:40px;
line-height: 22px;
padding: 5px, 10px; /* 상하 우좌 */
background: #E6E6E6;
color: #000000;
font-size: 15px;
font-weight: normal;
letter-spacing: 1px;
border: none;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input[type=submit]:hover {
background-color: #FFBF00;
}
|
<?php
// 파일을 직접 실행하면 동작되지 않도록 하기 위해서
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){
@extract($_POST); // $_POST['loginID'] 라고 쓰지 않고, $loginID 라고 써도 인식되게 함
// db 접속파일 include 및 정상 로그인 여부 체크하는 함수 실행후 결과 반환처리 하면 된다.
include_once 'dbController.php'; // http://link2me.tistory.com/1478 참조
require_once 'loginClass.php';
$c = new LoginClass();
$rs = $c->isUserExisted($userID);
if($rs == '0'){
echo '{"result":"1"}';
} else {
echo '{"result":"0"}'; // echo json_encode(array('result' => '0')); 과 동일
}
}
?> |
<?php
// 파일을 직접 실행하면 동작되지 않도록 하기 위해서
if(isset($_POST) && $_SERVER['REQUEST_METHOD'] == "POST"){
@extract($_POST); // $_POST['loginID'] 라고 쓰지 않고, $loginID 라고 써도 인식되게 함
echo '<pre>';print_r($_POST);echo '</pre>';
}
?> |
LoginClass 함수 만든 예제다.
<?php
class LoginClass extends DBController {
// 회원 가입 여부 체크
public function isUserExisted($u) {
if(!isset($u) || empty($u)) {
return '-1';
} else {
$sql ="SELECT count(userID) from members WHERE userID='".$u."'";
$result = mysqli_query($this->db, $sql);
if($row = mysqli_fetch_array($result)){
return $row[0]; // 미가입이면 0 반환, 가입이면 1 반환
} else {
return -1;
}
}
}
}//end class LoginClass
?> |
직접 테스트해보고 싶은 개발자의 타이핑 노고를 덜어주고자 테스트한 파일을 첨부한다.
Last Update : 2019.04.12 첨부파일 내용 보강(초보자를 위한 배려)
ex02.zip
https://link2me.tistory.com/1481 읽어보고 첨부된 예제를 받아서 분석하고 이해하면 많은 도움이 될 것이다.
도움되신 분은 공감 팍팍 눌러주세요.
