본문 바로가기
재밌는 IT 개발/그누보드 테마 제작기(記)

그누보드 테마 제작 15 - 회원정보 수정 페이지 개발

by 행복한 만수킴 2020. 6. 30.

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

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

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

개발 중인 테마에서의 개발 전 화면

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

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

먼저, 
Metronic Admin 템플릿의 샘플 중 어떤 걸 활용할지 찾아봐야겠습니다.

이 화면이 딱인것 같네요. Solid Background Style.. 이름이 더 멋지네요 ㅎㅎ

소스도 한 번 보겠습니다.

<!--begin::Card-->
<div class="card card-custom gutter-b example example-compact">
	<div class="card-header">
		<h3 class="card-title">Solid Background Style</h3>
		<div class="card-toolbar">
			<div class="example-tools justify-content-center">
				<span class="example-toggle" data-toggle="tooltip" title="View code"></span>
				<span class="example-copy" data-toggle="tooltip" title="Copy code"></span>
			</div>
		</div>
	</div>
	<!--begin::Form-->
	<form class="form">
		<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">Add the
					<code>.form-controller-solid</code>class on an input to have an input with solid background.</div>
				</div>
			</div>
			<div class="form-group">
				<label>Input</label>
				<input type="email" class="form-control form-control-solid" placeholder="Example input" />
			</div>
			<div class="form-group">
				<label>Select</label>
				<select class="form-control form-control-solid">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
			<div class="form-group">
				<label for="exampleTextarea">Textarea</label>
				<textarea class="form-control form-control-solid" rows="3"></textarea>
			</div>
		</div>
		<div class="card-footer">
			<button type="reset" class="btn btn-primary mr-2">Submit</button>
			<button type="reset" class="btn btn-secondary">Cancel</button>
		</div>
	</form>
	<!--end::Form-->
</div>
<!--end::Card-->

테마쪽 파일은 /theme/mt703/member/member_confirm.skin.php 이네요.
이것도 소스 좀 볼게요~

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

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

<!-- 회원 비밀번호 확인 시작 { -->
<div id="mb_confirm" class="mbskin">
    <h1><?php echo $g5['title'] ?></h1>

    <p>
        <strong>비밀번호를 한번 더 입력해주세요.</strong>
        <?php if ($url == 'member_leave.php') { ?>
        비밀번호를 입력하시면 회원탈퇴가 완료됩니다.
        <?php }else{ ?>
        회원님의 정보를 안전하게 보호하기 위해 비밀번호를 한번 더 확인합니다.
        <?php }  ?>
    </p>

    <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">

    <fieldset>
        <span class="confirm_id">회원아이디</span>
        <span id="mb_confirm_id"><?php echo $member['mb_id'] ?></span>
        <label for="confirm_mb_password" class="sound_only">비밀번호<strong>필수</strong></label>
        <input type="password" name="mb_password" id="confirm_mb_password" required class="required frm_input" size="15" maxLength="20" placeholder="비밀번호">
        <input type="submit" value="확인" id="btn_submit" class="btn_submit">
    </fieldset>

    </form>

</div>

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

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

 

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

화면을 꽉 채워버리는... 그누처럼 보여야 하는데...

col-lg, col-md, col-sm 클래스를 이용하여 장치별 사이즈를 지정해봅니다.
(첨 해보네요 ㅋ)
Bootstrap이 정말 편하긴 하네요. 
CSS를 잘 모르는 저도 Media Query를 안쓰고도 이렇게 할 수 있다는게 
정말 놀랍습니다.

bootstrap css 클래스 정의에 익숙해져가는건가?
PC에서 보여질 화면
휴대폰에서 보여질 화면


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

<?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>
<!-- } 회원 비밀번호 확인 끝 -->


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

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

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

이상한 넘의 정체

아마... 
그누 기본 테마에서는 보이지 않게 처리된 놈인데,
여기선 그누의 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 클래스를 이용하면 되겠네요. ㅎㅎㅎ

readonly 클래스 값을 정의한 코딩


<?php echo $readonly; ?>가 있는 모든 input tag에 클래스를 추가합니다.

회원정보 수정이라고 제목이 바뀌고 form-control-solid가 적용된 모습.

이제 상단에 빈 영역만 채우면 되겠습니다.

원래 페이지의 제목이 들어가야 하는 영역인데, 전체화면이다 보니 관련 코드가 없다.

역시 IF문을 이용해서 하면 되겠지요.
위에서는 REFERER을 이용했지만, 
여기서는 $w값을 이용해서 적용하겠습니다.

이번엔 $w 값을 이용하여 IF문 처리를 진행함.

이제 거의 다 왔네요.

회원정보 수정 페이지가 거의 완성되어 가는 모습.


이제 서브헤더의 제목을 변경하는 작업이 남았습니다.

서브헤더의 변경이 필요한 부분을 코딩한 모습

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

하단의 버튼이 회원가입과는 다른 모습으로 바뀌어야 한다.

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

하단 버튼을 상황에 따라 수정한 코딩.

잘 바뀐걸 확인할 수 있습니다.

하단 버튼이 상황에 맞게 잘 바뀌었다.

 

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

최종 완료된 회원정보 수정 페이지의 모습 1
최종 완료된 회원정보 수정 페이지의 모습 2

 

다음 번 작업은 포인트, 쪽지, 스크랩 페이지가 될 예정입니다.
그러고 나면,
대망의 게시판 작업에 들어가게 되네요.
아직 절반 조금 못온것 같지만,
그래도 이제는 속도가 좀 나는 것 같습니다.
이제부터는 조금 더 빠른 속도로 달려보겠습니다.

댓글2