- 라디오버튼, 변경불가 -

최종 수정일 : 2003/10/26
성별의 경우 대개가 라디오 버튼을 이용해 정보를 받게 되는데,
(이는 보편적이기도 하고 일정한 정보를 받을 수 있다는 장점과, 무엇보다 디자인이 이쁘기 때문이죠^^)
그러나...라디오 버튼의 경우 단점이 언제나 수정이 가능하다는 것입니다.
그래서 히든값으로 숨기거나 레이어를 많이 사용하게 되는데(뭐 상대가 수정하지 못하도록 숨기는 거죠.^^;),
이를 보완해서 스크립트를 이용해 회원가입시는 물론 정보수정시에도 수정이 불가능하게 해보았습니다.

자세한 설명은 팁과 같이 말씀드리기로 하고..
그럼 한번 시작해 볼까요.^_____^



우선 저의 경우는 데이터베이스에 gender라는 값을 추가하여 정보를 입력받게 하였지만,
데이터베이스를 잘 다루지 못하는 분들이 계실거라 생각해
기존의 제로보드 필드인 aol을 이용한 설명도 함께 하겠습니다.

필드추가
필드 : gender
종류 : int(1)
NULL : not null
기본값 : 1

필드추가는 텔넷이나 phpMyAdmin등을 이용하시면 가장 무난할것 같습니다.
(필드추가에 관한 설명은 유용한 팁공유 게시판을 검색해 보세요.)

*aol을 이용해 정보를 입력받으실 분은 필드추가 부분은 생략해 주세요.


부가로 필드를 추가한뒤 언인스톨뒤 다시 설치를 하실것을 대비해서 제로보드 디렉토리에 있는 schema.sql에 필드를 추가해 주시는게 좋습니다.

                birth int(13),

이 다음에 이렇게 한가지를 추가해 주세요.

                gender int(1) not null default '1',

언인스톨뒤의 재설치시에도 따로 필드를 추가하지 않으셔도 자동으로 필드를 생성합니다.
(뭐 다들 아시는 거겠지만;;;)



이제부터는 본격적으로 들어가겠습니다.
수정이 필요한 파일은 member_join.php, member_join_ok.php, member_modfiy.php, member_modify_ok.php 까지 이렇게 4가지 입니다.

세부적으로는 그외에도 몇가지 파일을 더 수정해야 하지만(사실 좀 많습니다.ㅜㅜ),
설명이 길어지기에 위의 4가지만 수정해 보도록 하겠습니다.
이것만 수정하더라도 정보를 입력받는 것에는 아무런 지장이 없기 때문이구요.^^
나머지는 여러분이 직접 해보세요.^^


먼저 member_join.php 부터

원본을 기준으로 159번째 줄

function check_id(id) {
        if(!id) {
                alert('아이디를 입력하여 주십시요');
        } else {
                window.open('check_user_id.php?user_id='+id,'check_user_id','width=200,height=100,toolbar=no,status=no,resizable=no');
        }
}

이 부분 바로 위에 아래의 스크립트를 추가해 주세요.

<? if($group[use_jumin]) { ?>
function check_jumin2() {
        var str=document.write.jumin2.value.length;
        if(str==7)
        document.write.job.focus();
}

function input_gender() {
        var temp;
        temp=document.write.jumin2.value.substring(0,1);
        if(temp==1 || temp==3) {
                document.write.gender1.checked=true;
                document.write.gender2.checked=false;
        } else {
                if(temp==2 || temp==4) {
                        document.write.gender1.checked=false;
                        document.write.gender2.checked=true;
                } else {
                        document.write.gender1.checked=false;
                        document.write.gender2.checked=false;
                }
        }
}
<? } ?>

* 저는 이부분에 생일도 함께 입력받도록 하였지만 찾아보면 좋은팁이 많기 때문에 그 부분은 빼었습니다.

스크립트를 대략 설명드리면 check_jumin2()는 7자리의 숫자가 모두 입력되었을시 포커스를 다른곳으로 옮겨주는 스크립트입니다.
저의 경우는 성별 다음에 생일을 오게 하였고 그 다음에 직업을 오게 하였는데,
생일의 경우도 마찬가지로 자동으로 입력받기 때문에 포커스를 직업으로 옮기게 한것이구요.
뭐 이 부분은 환경에 따라 수정해서 사용 하시기 바랍니다.

input_gender()는 주민 뒷7자리중 첫번째 자리의 숫자를 감지하여 성별의 라디오 버튼으로 옮겨주는 스크립트입니다.
다만 라디오버튼의 경우 보기는 좋지만, 가입시 수정이 가능한 단점을 보완 했습니다.

설명드리면 뒤의 첫자리가 1이나 3일경우 라디오 버튼의 남자부분으로 가게 하는것이고 2이거나 4일경우는 여자로 가게 합니다.
그렇지만, 수동입력을 막기 위해 처음에는 체크가 불가능 하게 하였구요.
역시 마찬가지로 주민번호로 자동입력이 되고 나서도 수정은 불가능 합니다.

여기서 aol을 이용하시는 분이시면 input_gender()를 다음과 같이 수정해 주세요.

function input_gender() {
        var temp;
        temp=document.write.jumin2.value.substring(0,1);
        if(temp==1 || temp==3) {
                document.write.aol1.checked=true;
                document.write.aol2.checked=false;
        } else {
                if(temp==2 || temp==4) {
                        document.write.aol1.checked=false;
                        document.write.aol2.checked=true;
                } else {
                        document.write.aol1.checked=false;
                        document.write.aol2.checked=false;
                }
        }
}


여기까지 하셨으면 다음으로 이동해서 227번째줄

<? if($group[use_birth]) { ?>
    <tr align=right height=28>
        <td style=font-family:Tahoma;font-size:8pt;><b>Birthday </td>
        <td align=left> <input type=text name=birth_1 size=4 maxlength=4 style=border-color:#d8b3b3 class=input> 년
             <input type=text name=birth_2 size=2 maxlength=2 style=border-color:#d8b3b3 class=input> 월
             <input type=text name=birth_3 size=2 maxlength=2 style=border-color:#d8b3b3 class=input> 일
            <input type=checkbox value=1 checked name=open_birth> 공개
    </tr>
    <tr>
        <td colspan="5" bgcolor="#EBD9D9" align="center"><img src="images/t.gif" width="10" height="1"></td>
     </tr>
<? } ?>

이 부분 바로 위에 285번째줄에 있는 주민번호 입력부분을 옮겨 주세요.
더불어 성별 입력부분을 추가해 주시면 됩니다.

<? if($group[use_jumin]) { ?>
                <tr height="62">
                    <td valign="top" bgcolor="#EBD9D9"><img src="images/t.gif" border="0" height="8"><br>  주민등록번호</td>
                    <td>
                         <input type="text" name="jumin1" size="6" maxlength="6" class="input"> - <input type="password" name="jumin2" size="7" maxlength="7" OnKeyUp="check_jumin2();" OnChange="input_gender()" class="input"><br>
                        <img src="images/t.gif" border="0" height="4"><br> * 주민등록번호는 암호화 되어 저장이 되므로 관리자도 알 수 없습니다.<br>
                           (회원 중복가입을 막기 위한 검사 수단 으로만 사용이 됩니다.)
                    </td>
                </tr>
<? } ?>
                <tr height="30">
                    <td bgcolor="#EBD9D9">  성별</td>
                    <td>
                         <input type="radio" name="gender1" value="1<?=$member[gender1]?>" OnClick="input_gender()" OnFocus="blur()"> 남
                         <input type="radio" name="gender2" value="2<?=$member[gender2]?>" OnClick="input_gender()" OnFocus="blur()"> 여
                    </td>
                </tr>

이렇게 말이죠.
주민번호 입력 부분에서 추가해 주실것은 이벤트 제어문 두가지 입니다.
OnKeyUp="check_jumin2()" 이벤트와 OnChange="input_gender()" 이벤트 이 두가지요.
OnKeyUp="check_jumin2()"는 maxlength의 숫자가 모두 입력 되었을시에 check_jumin2()를 실행해주는 이벤트 이고
OnChange="input_gender()"는 OnKeyUp 이벤트가 실행되면서 jumin2의 내용이 변경됨을 감지해 input_gender() 를 실행해 주는 이벤트 입니다.

* OnChange="input_gender()"이벤트는 절대 빠뜨리지 마세요.

aol을 사용하시는 분들은 아래의 aol을 잘라내어 위의 성별부분에 붙여넣으시고 다음과 같이 수정하시면 됩니다.

                <tr height="30">
                    <td bgcolor="#EBD9D9">  성별</td>
                    <td>
                         <input type="radio" name="aol1" value="1<?=$member[aol1]?>" OnClick="input_gender()" OnFocus="blur()"> 남
                         <input type="radio" name="aol2" value="2<?=$member[aol2]?>" OnClick="input_gender()" OnFocus="blur()"> 여
                    </td>
                </tr>

여기까지 하셨으면 member_join.php는 끝입니다. -저장,닫기-



그럼 다음은 member_join_ok.php

85번째 줄

        $birth=mktime(0,0,0,$birth_2,$birth_3,$birth_1);

이 부분 바로 위에 다음을 추가해 주세요.

        $gender = addslashes($gender1.$gender2);

aol을 사용하시는 분들은 다음을 추가해 주세요.

        $aol = addslashes($aol1.$aol2);


그다음 아래로 내려가셔서
115번째줄
        mysql_query("insert into $member_table (level,group_no,user_id,password,name,email,homepage,icq,aol,.....open_aol) values ('$group_data[join_level]','$group_data[no]','$user_id',password('$password'),'$name','$email','$homepage','$icq','$aol',.....'$open_aol')") or error("회원 데이타 입력시 에러가 발생했습니다<br>".mysql_error());

이 부분에 이렇게 gender를 추가해 줍니다.

        mysql_query("insert into $member_table (level,group_no,user_id,password,name,email,homepage,icq,aol,.....open_aol,gender) values ('$group_data[join_level]','$group_data[no]','$user_id',password('$password'),'$name','$email','$homepage','$icq','$aol',.....'$open_aol','$gender')") or error("회원 데이타 입력시 에러가 발생했습니다<br>".mysql_error());

* 이 부분은 복사해서 붙여넣기 하지 마세요.~~;;

aol을 사용하시는 분들은 이 부분은 건드리지 않으셔도 됩니다.

여기까지 하셨으면 member_join_ok.php는 끝~
이로서 가입페이지는 모두 수정하였습니다. -저장,닫기-



그럼 정보수정 페이지로 들어가겠습니다.

먼저 member_modify.php를 여시고
21번째 줄

        $member[name] = stripslashes($member[name]);

이 다음에 다음의 소스를 추가해 주세요.

        $member[gender] = stripslashes($member[gender]);

aol을 사용하시는 분들은 다음을 추가해 주세요.

        $member[aol] = stripslashes($member[aol]);


그 다음에 100번째 줄을 보시면

</script>

이 바로 위 공백에 다음의 스크립트를 추가해 주세요.

function input_gender() {
        var checked;
        checked=document.write.gender.value.substring(0,1);
        if(checked==1) {
                document.write.gender1.checked=true;
                document.write.gender2.checked=false;
        } else {
                if(checked==2) {
                        document.write.gender1.checked=false;
                        document.write.gender2.checked=true;
                }
        }
}

aol을 사용하시는 분들은 이 부분을 이렇게 수정하시면 됩니다.

function input_gender() {
        var checked;
        checked=document.write.aol.value.substring(0,1);
        if(checked==1) {
                document.write.aol1.checked=true;
                document.write.aol2.checked=false;
        } else {
                if(checked==2) {
                        document.write.aol1.checked=false;
                        document.write.aol2.checked=true;
                }
        }
}

그럼 스크립트를 대충 설명드리겠습니다.

먼저번 member_join.php에서의 스크립트는 주민번호를 이용해서 정보를 받고 체크여부를 결정지었던 데 반해
여기서의 스크립트는 이미 입력되어 있는 성별 정보를 이용해 체크여부를 결정합니다.
다 아시다 시피 주민번호는 매우 신뢰할 수 있기 때문에 이용하기가 용이 하지만,
일단 데이터베이스에 저장이 될때에는 암호화 되어 더이상은 사용할 수 없는 점 때문이구요.

세부적인 설명은 위에 말씀드렸던 설명과 같습니다.
이미 체크가 되어있는 상태에서 절대 다른곳으로 포커스가 옮겨지지 못하도록 한 스크립트 입니다.




그럼 다음 103번줄에
<form name=write method=post action=member_modify_ok.php enctype=multipart/form-data onsubmit="return check_submit();">
<input type=hidden name=one_page value="<?=$HTTP_REFERER?>">
<input type=hidden name=page value=<?=$page?>>
<input type=hidden name=id value=<?=$id?>>
<input type=hidden name=no value=<?=$no?>>
<input type=hidden name=select_arrange value=<?=$select_arrange?>>
<input type=hidden name=desc value=<?=$desc?>>
<input type=hidden name=page_num value=<?=$page_num?>>
<input type=hidden name=keyword value="<?=$keyword?>">
<input type=hidden name=category value="<?=$category?>">
<input type=hidden name=sn value="<?=$sn?>">
<input type=hidden name=ss value="<?=$ss?>">
<input type=hidden name=sc value="<?=$sc?>">
<input type=hidden name=referer value="<?=$referer?>">

이 부분 다음에 아래의 hidden값 한가지를 더 추가해 주세요.

<input type="hidden" name="gender" value="<?=$member[gender]?>">

aol을 사용하시는 분들은 이렇게 수정해 주세요.

<input type="hidden" name="aol" value="<?=$member[aol]?>">

db에 저장되어 있는 성별의 정보를 불러오기 위해 hidden값을 사용하게 되었습니다.




그럼 좀 더 아래로 내려가셔서.. 147번째 줄

<? if($group_data[use_birth]) { ?>
    <tr height=28 align=right>
     <td style=font-family:Tahoma;font-size:8pt;><b>Birthday </td>
     <td align=left> <input type=text name=birth_1 size=4 maxlength=4 value="<?=date("Y",$member[birth])?>" style=border-color:#d8b3b3 class=input> 년
                     <input type=text name=birth_2 size=2 maxlength=2 value="<?=date("m",$member[birth])?>" style=border-color:#d8b3b3 class=input> 월
                     <input type=text name=birth_3 size=2 maxlength=2 value="<?=date("d",$member[birth])?>" style=border-color:#d8b3b3 class=input> 일
          <input type=checkbox value=1 name=open_birth <?=$check[$member[open_birth]]?>> 공개
    </tr>
    <tr>
          <td colspan="5" bgcolor="#EBD9D9" align="center"><img src="images/t.gif" width="10" height="1"></td>
    </tr>
<? } ?>

이 부분 바로 위에 다음을 추가해 주세요.

                <tr height="30">
                    <td bgcolor="#EBD9D9">  성별</td>
                    <td>
                         <input type="radio" name="gender1" value="1" OnFocus="blur()" OnClick="input_gender()" <? if($member[gender]=="1") echo "checked"; ?>> 남
                         <input type="radio" name="gender2" value="2" OnFocus="blur()" OnClick="input_gender()" <? if($member[gender]=="2") echo "checked"; ?>> 여
                    </td>
                </tr>

라디오 버튼으로 정보를 받고 나서 보여지는 페이지는 보통의 경우 text <input>으로 보여지게 하는데,
이를 역시 라디오 버튼으로 보여지게 하기 위해서 약간?의 머리를 짜내어 보았습니다.;;

aol을 사용하시는 분들은 185번째 줄의

<? if($group_data[use_aol]) { ?>
  <tr height=28 align=right>
     <td style=font-family:Tahoma;font-size:8pt;>AIM </td>
     <td align=left> <input type=text name=aol size=20 maxlength=30 value="<?=$member[aol]?>" style=border-color:#d8b3b3 class=input>
                          <input type=checkbox value=1 name=open_aol <?=$check[$member[open_aol]]?>> 공개</td>
  </tr>        <tr>
          <td colspan="5" bgcolor="#EBD9D9" align="center"><img src="images/t.gif" width="10" height="1"></td>
        </tr>
<? } ?>

이 부분을 잘라내어서 146번째 줄로 이동시키시고 다음과 같이 수정해 주세요.

                <tr height="30">
                    <td bgcolor="#EBD9D9">  성별</td>
                    <td>
                         <input type="radio" name="aol1" value="1" OnFocus="blur()" OnClick="input_gender()" <? if($member[aol]=="1") echo "checked"; ?>> 남
                         <input type="radio" name="aol2" value="2" OnFocus="blur()" OnClick="input_gender()" <? if($member[aol]=="2") echo "checked"; ?>> 여
                    </td>
                </tr>

여기까지하셨으면 member_modify.php는 끝입니다. -저장,닫기-



그럼 이제 마지막...member_modify_ok.php를 여시고

26번째 줄

        $name = addslashes($name);

이 다음에 다음의 소스를 추가해 주세요.

        $gender = addslashes($gender1.$gender2);

aol을 사용하시는 분들은 다음을 추가해 주세요.

        $aol = addslashes($aol1.$aol2);

이 부분은 수정시 정보를 데이터베이스로 옮길때 필요한 부가적인 소스입니다.


그럼 다음은 43번째 줄

        $que="update $member_table set name='$name'";

이 다음에 한가지를 추가해 주세요.

        if($gender1&&$gender2) $que.=",gender='$gender'";

aol을 이용하시는 분들은 51번째 줄의 aol을 다음과 같이 수정해 주세요.

        if($aol1&&$aol2) $que.=",aol='$aol'";

이 부분은 이미 저장되어 있는 데이터베이스의 정보를 불러오는 소스입니다.
여기까지 입니다.-저장,닫기-



이 외에 관리자 페이지나 쪽지등등.. 여러가지가 더 있지만,
원하시는 분들은 한번 시도해 보시구요.

해 보셨는데 오류가 나신다면 처음부터 다시 차근차근 밟아 보세요.
위의 소스를 먼저 그대로 받아서 처리해 보시고 성공하신다면 그 다음에 환경에 맞게 수정하는것 잊지 마시구요.^^

그럼 모두들 좋은 하루 되십쇼..^^

출처 : http://www.nzeo.com/bbs/zboard.php?id=cgi_tip&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&keyword=성별&select_arrange=headnum&desc=asc&no=4873