[테마제작기(15記)] 회원정보 수정 페이지 개발

원문(출처) : 그누보드 테마 제작 15 - 회원정보 수정 페이지 개발

그누보드 기본 테마의 회원 비밀번호 확인과 회원 정보 수정 페이지

오늘은 회원정보 수정 페이지를 진행할 계획인데요.
웬지 이번 작업은 만만치 않을 것 같네요.
이유는 그누 기본 테마는 상단 메뉴와 우측사이트 영역이 존재하지만,
전 그걸 빼고 만들었었거든요.
회원정보수정 화면은 상단, 좌측 메뉴가 보여지는게 맞을 것 같다고 판단했기때문입니다.
(지난 번 Modal창도 그렇고, 걍 그누의 기본 형식을 따르는게 제일 편할 듯 하네요.)
(그럴듯하게 바꾸는건 나중에 하는게 시간이 절약될 것 같아요.)

개발중인 테마에서는 현재화면부터 확인해볼게요.
상단 메뉴와 좌측 메뉴 외에도
회원가입페이지이 좌측 메뉴도 없애버려야 하네요...

 

이미 만들어놓은거 뒤집을 순 없고,
어케든 개발해야겠죠? (우리에겐 IF문이 있으니까요 ^^)

우선 순서대로 
"회원 비밀번호 확인" 페이지부터 개발해야겠어요~
(이것도 Modal창으로 하고 싶지만, 꾹 참아봅니다. ^^)

뭐... 이 화면은 금방 끝내겠네요. 심플하네요~

col-lg, col-md, col-sm 클래스를 이용하여 장치별 사이즈를 지정해봅니다.
(첨 해보네요 ㅋ)
Bootstrap이 정말 편하긴 하네요.

 

PC에서 보여질 화면

휴대폰에서 보여질 화면

이제 그누의 코드를 개발 중인 테마로 옮깁니다.
[code]

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
//add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/style.css">', 0);
?>

<!-- 회원 비밀번호 확인 시작 { -->
<div class="row">
    <div class="col-lg-4 col-md-3 col-sm-1">&nbsp;</div>

    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact col-lg-4 col-md-6 col-sm-10">
        <div class="card-header">
            <h3 class="card-title">회원 비밀번호 확인</h3>
        </div>
        <!--begin::Form-->
        <form name="fmemberconfirm" action="<?php echo $url ?>" onsubmit="return fmemberconfirm_submit(this);" method="post">
        <input type="hidden" name="mb_id" value="<?php echo $member['mb_id'] ?>">
        <input type="hidden" name="w" value="u">
            <div class="card-body">
                <div class="form-group form-group-last">
                    <div class="alert alert-custom alert-default" role="alert">
                        <div class="alert-icon">
                            <span class="svg-icon svg-icon-primary svg-icon-xl">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Tools/Compass.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M7.07744993,12.3040451 C7.72444571,13.0716094 8.54044565,13.6920474 9.46808594,14.1079953 L5,23 L4.5,18 L7.07744993,12.3040451 Z M14.5865511,14.2597864 C15.5319561,13.9019016 16.375416,13.3366121 17.0614026,12.6194459 L19.5,18 L19,23 L14.5865511,14.2597864 Z M12,3.55271368e-14 C12.8284271,3.53749572e-14 13.5,0.671572875 13.5,1.5 L13.5,4 L10.5,4 L10.5,1.5 C10.5,0.671572875 11.1715729,3.56793164e-14 12,3.55271368e-14 Z" fill="#000000" opacity="0.3" />
                                        <path d="M12,10 C13.1045695,10 14,9.1045695 14,8 C14,6.8954305 13.1045695,6 12,6 C10.8954305,6 10,6.8954305 10,8 C10,9.1045695 10.8954305,10 12,10 Z M12,13 C9.23857625,13 7,10.7614237 7,8 C7,5.23857625 9.23857625,3 12,3 C14.7614237,3 17,5.23857625 17,8 C17,10.7614237 14.7614237,13 12,13 Z" fill="#000000" fill-rule="nonzero" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </div>
                        <div class="alert-text">
                            <code class="h6">비밀번호를 한번 더 입력해주세요.</code><br/>
                            <?php if ($url == 'member_leave.php') { ?>
                            비밀번호를 입력하시면 회원탈퇴가 완료됩니다.
                            <?php } else { ?>
                            회원님의 정보를 안전하게 보호하기 위해 비밀번호를 한번 더 확인합니다.
                            <?php }  ?>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>회원 아이디</label>
                    <input type="text" class="form-control form-control-solid" readonly value="<?php echo $member['mb_id'] ?>" />
                </div>
                <div class="form-group">
                    <label>비밀번호 (필수)</label>
                    <input type="password" name="mb_password" id="confirm_mb_password" required class="form-control" size="15" maxLength="20" placeholder="비밀번호">
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" id="btn_submit" class="btn btn-primary mr-2">확인</button>
                <button type="button" onclick="history.back();" class="btn btn-secondary">취소</button>
            </div>
        </form>
        <!--end::Form-->
    </div>
    <!--end::Card-->

    <div class="col-lg-4 col-md-3 col-sm-1">&nbsp;</div>
</div>

<script>
function fmemberconfirm_submit(f)
{
    document.getElementById("btn_submit").disabled = true;

    return true;
}
</script>
<!-- } 회원 비밀번호 확인 끝 -->
[/code]

짜잔... 완료되었습니다.
(그런데 위에 이상한 넘이 떠 있네요...)

회원 비밀번호 확인 페이지 완료 화면

저 위에 이상한 넘이 떠 있는거...
계속 신경쓰이네요... 뭘까요?

이상한 넘의 정체

아마... 
그누 기본 테마에서는 보이지 않게 처리된 놈인데,
여기선 그누의 CSS를 사용안하니 보여지는 놈이 아닌가 생각해봅니다.
(사실 이유를 찾기 귀찮아서 위와 같이 생각해버린게 아니랍니다~ ^^) 
저 코드를 찾아서 display를 none으로 해버려야겠어요.
body 밑에 있는걸로 봐서는 head.sub.php에 있겠네요.

이상한 넘을 안보이게 처리해버림.

이제부턴 안보이겠네요 ^^

로그인 중이라는 텍스트를 안보이게 처리해버림.

이제 진짜 작업이네요. 
회원 정보 수정 페이지의 개발에 들어갑니다.

먼저 좌측 정보 영역을 없애야겠어요.

좌측영역이 안보여져야 한다. 또는 없애거나...

좌측 정보 영역이 
회원가입일때는 보여지고,
아닐때는 안보여야 함으로...
$_SERVER['HTTP_REFERER'] 를 이용하면 되겠네~~~
일단 로그를 찍어보자!

referer을 로그로 찍어본 결과

REFERER가 member_confirm.php인지를 비교하여
해당 영역의 노출 여부를 코딩합니다.

HTTP_REFERER 값을 이용하여 좌측 영역의 노출 여부를 결정하는 코딩

좌측 영역이 사라진 화면

이제 좌측메뉴와 상단 탑, 푸터등이 나타나게 해야 하는군요.
이건 head.php를 include하게 하면 됩니다.
(아쉬운건 어쩔 수 없이 또 /bbs/register_form.php를 건드려야 한다는거네요.)
테마 제작시에는 가능한 테마 폴더 안에서 해결해야 하는데,
이런 경우는 이럴 수 밖에 없는거죠? 
다른 방법이 있다면 누가 좀 알려주시면 감사하겠습니다.

좌측메뉴, 상단, 푸터를 위한 코딩

이렇게 해서 완료가 된 줄 알았는데...
부자연스러운 부분들이 있네요.
"회원가입"이라는 문구는 "회원정보 수정"으로 바뀌어야 하고
일부 input 태그들은 readonly 또는 disable로 바뀌어야 합니다.

좌측메뉴, 상단, 푸터가 나타났으나 일부 부자연스러운 버그들이 발견됨.

일단 쉬워보이는 문구 수정부터 진행합니다.
찾아보니 $w 값도 있고, $g5["title"] 값으로 위의 작업들을 처리해도 되었겠네요.
(그러나 이미 만들었으니 바꾸지 않습니다. ㅎㅎ)
회원 가입이라는 문구는 $g5["title"]를 echo해서 해결합니다.

회원정보 수정 페이지의 제목 부분이 수정된 모습

이제 required와 readonly 부분이 처리가 되어야 하는데요...
아.. 되어 있군요. 그런데 색상이 똑같아서 구분이 안됩니다.
어제 작업에서 보았던, form-control-solid 클래스를 이용하면 되겠네요. ㅎㅎㅎ

아... 하나 더 남았네요. 
하단의 버튼이 바뀌어야 합니다.
현재는 회원가입때의 버튼이네요.

이번에도 $w를 이용하여 작업을 합니다.

이렇게 회원정보 수정 페이지의 작업이 완료되었습니다.
$w 변수가 있는걸 확인 못하고
$_SERVER["REFERER"]을 사용한게 조금 아쉽지만, 
오늘은 별 막힘 없이 순조롭게 진행이 된 듯 하여 좀 뿌듯하네요.

아래는 완료된 화면입니다.

이번 글이 너무 길어, 모두 저장이 안되더라구요.

그래서 중간 중간 몇몇 이야기는 삭제해버렸어요.

본 글의 모든 이야기는 아래 링크에 있습니다.

오늘도 즐거운 밤 보내세요~

원문(출처) : 그누보드 테마 제작 15 - 회원정보 수정 페이지 개발