ID 중복 체크 방법
회원 가입 시 ID가 중복되면 로그인에서 문제가 될 수 있고 회원관리에 문제가 있으므로 ID 중복 체크를 하는 것은 필수 사항이다.
ID 중복체크는 DB에 저장된 회원 데이터 중에서 user가 입력한 ID와 같은 것이 있는지 찾는 것이다.
만일 중복된 ID가 있다면 더 이상 회원 가입을 허용해서는 안되며 다른 ID를 입력하도록 해야 한다.
대개는 ID 옆에 [중복체크] 버튼을 만들어서 새 창으로 띄워서 확인한다.
새 창을 띄우지 않고도 중복체크를 하기도 하는데 [ID중복확인] 버튼을 눌렀을 때 페이지에 미리 입력해 둔 화면에 표시되지 안는(크기가 0인) iframe에 중복 체크 경로와 ID 값을 넘겨서 체크하는 방법과, 최근에 많이 사용한 AJAX를 활용한 방법이 있다. AJAX를 활용하면 ID를 입력하는 동안에도 중복되는지 보여준다. 하지만 AJAX는 로컬에서는 활용하기 어려운 문제가 있다.
여기서는 단순하게 새 창을 띄워 확인하는 방법으로 예제를 만들어보자.
시나리오는 다음과 같다.
- 회원 가입자가 ID를 입력한다.
- ID 입력 상자 옆의 [ID중복확인] 버튼을 누른다.
- 새 창이 표시되며 입력된 ID가 중복되었는지 알려준다.
- 만일 ID를 입력하지 않고 [ID중복확인] 버튼을 누르면 에러메시지를 보여주고 중복체크 창을 열지 않는다.
- 만일 중복되었다면 사용할 수 없다고 알려주고 그 자리에서 새로운 ID를 입력할 수 있도록 한다.
- 중복되지 않은 ID라면 사용 가능하다고 알려주고 [사용하기] 버튼 또는 링크를 표시한다.
- 회원 가입 양식 내용을 입력하고 [Submit] 버튼을 눌렀을 때 만일 ID 중복체크가 제대로 되어 있지 않으면(즉, 사용가능한 ID를 입력했는지 확인하지 않았다면) 에러메시지를 보여주고 중복체크를 한 후에 [Submit]를 하도록 한다.
- 모든 사항이 정상적으로 확인되면 회원 가입이 이루어진다.
[회원 입력 폼 만들기]
<!--회원 입력폼 joinForm.php-->
<script type="text/javascript">
function openCheckId(){
var userid=document.all.userid.value;
if(userid){
url="idcheck.php?userid="+userid;
window.open(url,"chkid","width=500,height=500,menubar=no,toolbar=no");
}else{
alert("ID를 입력하세요!");
}
}
function chkForm(){
var checkid=document.all.checkid.value;
if(checkid==0){
alert("ID 중복체크를 하세요!");
return false;
}
return true;
}
</script>
<form action="join_ok.php" method="post" enctype="multipart/form-data" onSubmit="return chkForm();">
<table border="1" cellspacing="0" cellpadding="10" width="100%">
<tr>
<td align="center">ID</td>
<td>
<input type="text" size="30" name="userid">
<input type="hidden" name="checkid" value=0>
<input type="button" value="ID중복확인" onClick="openCheckId();">
</td>
</tr>
<tr>
<td align="center">PW</td>
<td><input type="password" size="30" name="userpass"></td>
</tr>
<tr>
<td align="center">Name</td>
<td><input type="text" size="20" name="username"></td>
</tr>
<tr>
<td align="center">Sex</td>
<td><input type="radio" value="m" name="usersex" checked="checked">Male <input type="radio" value="f" name="usersex">Female</td>
</tr>
<tr>
<td align="center">Age</td>
<td><input type="text" size="10" name="userage"></td>
</tr>
<tr>
<td align="center">Email</td>
<td><input type="text" size="50" name="useremail"></td>
</tr>
<tr>
<td align="center">Phone</td>
<td><input type="text" size="20" name="userphone"></td>
</tr>
<tr>
<td align="center">Photo</td>
<td><input type="file" size="50" name="userphoto"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"> <input type="reset" value="Reset"> <input type="button" value="Back" onclick="history.back()"></td>
</tr>
</table>
</form>
입력 폼에서 ID 체크를 위해서 사용된 부분은 파란색과 주황색으로 표시된 부분이다.
ID를 입력 받기 위해서는 아래와 같이 글상자를 삽입하게 된다.
<input type="text" size="30" name="userid">
그리고 그 아래에 중복체크를 했는지 여부를 확인하기 위해 감춰진 입력양식 checkid 를 만들어 두었다. 기본 값은 0으로 만일 중복체크를 정상적으로 해서 사용가능한 ID를 입력했다면 이 값이 1로 바뀌게 된다.
이 값을 바꿔주는 스크립트는 뒤에 설명할 중복 체크 페이지(새 창으로 열릴)에 포함되어 있다.
<input type="hidden" name="checkid" value=0>
그리고 중복 체크 버튼이 있다. 이 버튼을 누르면 새 창을 띄우는 스크립트 openCheckID() 를 호출한다.
<input type="button" value="ID중복확인" onClick="openCheckId();">
[ID중복확인] 버튼을 눌러서 openCheckID() 스크립트를 호출하면,
function openCheckId(){
var userid=document.all.userid.value;
if(userid){
url="idcheck.php?userid="+userid;
window.open(url,"chkid","width=500,height=500,menubar=no,toolbar=no");
}else{
alert("ID를 입력하세요!");
}
}
가 작동하는데, var userid=document.all.userid.value; 로 변수 userid 에 입력양식 userid에 입력된 값을 넣고,
만일 userid 값이 없다면 "ID를 입력하세요!" 라는 에러메시지만 보여주고 아무것도 하지 않게 되고,
userid 값이 있다면 idcheck.php?userid=입력된ID 문서를 새 창으로 연다.
[ID중복확인]을 통해서 새 창을 열었을 때 입력된 ID가 이미 존재한다면 다음과 같이 표시될 것이다.
[ID중복확인]을 통해서 새 창을 열었을 때 입력된 ID가 사용가능하다면 다음과 같이 표시될 것이다.
* 처음에 사용할 수 없다고 표시된 창에서 새로운 ID를 입력해서 중복되지 않은 경우에도 같은 화면이 표시된다.
[사용하기]를 클릭하면 회원 가입 양식에 포함된 입력양식중 hidden 처리된 checkid 의 값이 0에서 1로 바뀌게 된다.
이 부분은 idcheck.php 파일의 소스를 보면 된다.
<!--ID 체크 페이지 idcheck.php-->
<?
include("./dbcon.php");
$userid=$_GET[userid];
$sql="select * from member where userid='$userid'";
$rst=mysql_query($sql);
$cnt=mysql_num_rows($rst);
?>
<script type="text/javascript">
function useID(v){
opener.document.all.checkid.value=1;
opener.document.all.userid.value=v;
window.close();
}
function chkId(){
var userid=document.all.userid.value;
if(userid){
url="idcheck.php?userid="+userid;
location.href=url;
}else{
alert("ID를 입력하세요!");
}
}
</script>
<?if($cnt){?>
<?=$userid?>는 사용하실 수 없는 ID입니다<br />
<form>
<input type=text name="userid">
<input type=button value="ID중복확인" onClick="chkId();">
</form>
<?}else{?>
<?=$userid?>는 사용가능한 ID입니다.<br />
<a href="#" onClick="useID('<?=$userid?>');">사용하기</a> <a href="#" onClick="window.close();">닫기</a>
<?}?>
위 문서의 코드에 대한 설명은 다음과 같다.
include("./dbcon.php");
// ID를 체크하려면 DB로부터 테이블을 열어 확인해야 하므로 DB 연결 설정 파일을 불러와야 한다. 직접 써 줄 수도 있다.
$userid=$_GET[userid];
// 회원 가입 폼에서 idcheck.php?userid=입력된ID 와 같이 이 페이지를 열었으므로 userid에 입력된 값을 이와 같이 읽어 변수 $userid 에 저장한다.
$sql="select * from member where userid='$userid'";
$rst=mysql_query($sql);
$cnt=mysql_num_rows($rst);
//위와 같이 member TABLE에서 동일한 ID가 이미 존재하는지 확인한다. mysql_num_rows(); 은 select 구문에서 얻어진 DB 레코드 수를 확인하는 함수이다.
<?if($cnt){?>...
//만일 $cnt 값이 참이면(참이라는 것은 $cnt 의 값이 0이 아닌 1 이상이라는 뜻이므로) 결국 같은 ID가 존재하는 것이므로 사용할 수 없음을 알리고, 새로운 ID를 입력하도록 표시한다.
<?}else{?>...
//$cnt 값이 참이 아니면, 즉 같은 아이디를 사용하는 회원의 수가 0이면,
//사용가능하다는 표시를 하고 [사용하기] 버튼 또는 링크를 표시한다.
//이 때 [사용하기]를 클릭하면 스크립트 함수 useID('ID값') 를 호출하게 된다.
function useID(v){
opener.document.all.checkid.value=1;
opener.document.all.userid.value=v;
window.close();
}
useID('ID값') 이 호출되면 opener.document.all.checkid.value=1; 를 통해서 자신(새 창)을 호출한 부모창(opener)의 입력양식중 checkid 의 값을 1로 바꿔준다. 이 값은 ID 체크하기 전에는 0이었다. 또 opener.document.all.userid.value=v; 를 통해서 전달된 ID 값을 회원 입력 양식 창의 ID 입력 글 상자에 표시한다. 이는 사용자가 입력양식에서 입력하고 확인한 ID가 중복되어서 새 창에서 새로 입력하고 [사용하기]를 눌러 checkid 의 값을 1로 바꿔도 ID 입력 글상자의 ID는 처음 입력한 값이 그대로 남아 있지 않도록 하기 위한 조치이다.
아래 chkId() 함수는 새 창에서 검사한 ID가 이미 사용 중일 경우 창을 닫고 다시 입력폼에서 [ID중복확인]을 누르지 않아도 되도록 새 창에서 바로 확인이 가능하도록 한 것이다.
function chkId(){
var userid=document.all.userid.value;
if(userid){
url="idcheck.php?userid="+userid;
location.href=url;
}else{
alert("ID를 입력하세요!");
}
}
위 그림과 같이 회원 가입폼에서 ID를 입력하고 [ID중복확인] 버튼을 눌렀을 때, 사용할 수 없다고 나오면 그 자리에서 다른 ID를 입력하고 [ID중복확인]을 누를 수 있다.
chkId()는 이 경우에 작동한다.
이 스크립트 함수는 joinForm.php 의 함수와 같다. 다만, idcheck.php 자신을 새로 여는 것이므로 새 창으로 띄우지 않고 열기만 하는 것이다.
만일, ID중복확인 절차를 거치지 않고 가입하려고 한다면 어떻게 될까?
회원가입폼에서 ID중복확인 없이 [Submit] 버튼을 누르면 checkid 값이 0이므로 가입 처리가 되지 않고 아래와 같이 에러메시지만 보여준다.
이렇게 처리하는 것은 아래 form 태그에서 Submit이 이루어지면 onSubmit 옵션에 의해서 chkForm() 호출하고, 이 함수로부터 true 값이 반환되어야 폼의 action의 수행되어 저장할 수 있기 때문이다.
<form action="join_ok.php" method="post" enctype="multipart/form-data" onSubmit="return chkForm();">
chkForm() 함수의 내용을 간단히 설명하면 다음과 같다.
function chkForm(){
var checkid=document.all.checkid.value;
if(checkid==0){
alert("ID 중복체크를 하세요!");
return false;
}
return true;
}
var checkid=document.all.checkid.value;
// hidden 양식인 checkid의 값을 변수 checkid에 저장한다(기억시킨다).
if(checkid==0){
//만일 checkid 값이 0이면 이는 중복체크를 하지 않은 것이므로 중복체크를 하도록 안내한 후 form 에 false 값을 넘긴다(return false;).
//false 값이 넘어가면 회원가입이 성립되지 않는다. 또 return false; 가 동작하면 그 다음의 스크립트들은 모두 무시되고 실행되지 않는다.
위, if문의 조건과 다르다면 즉 checkid의 값이 0이 아니라면 회원 중복체크가 이루어진 것이므로 if(checkid==0) 조건에 걸리지 않으므로 그냥 if(){...} 구문을 건너뛰어서 return true;를 실행하게 된다.
true 값이 form에 전달되면 action 속성에 입력한 링크로 값을 보내어 회원 가입 절차가 완료된다.
* 여기서는 기본적인 ID 중복체크를 위한 하나의 방법을 보여주는 예제이므로 회원가입 시 필수 입력항목 체크 등을 처리하지 않았다. 따라서 이름 입력 여부 등을 체크 할 수 있도록 스크립트를 구성해야 할 것이다.
* 또한 DB 저장을 위한 페이지도 생략하였으므로 이는 알아서 작성하기 바란다.
작성자 : 유승열 / 작성일 : 2009.7.24
본 블로그는 페이스북 댓글을 지원합니다.
