오늘은 회원정보 수정 페이지를 진행할 계획인데요.
웬지 이번 작업은 만만치 않을 것 같네요.
이유는 그누 기본 테마는 상단 메뉴와 우측사이트 영역이 존재하지만,
전 그걸 빼고 만들었었거든요.
회원정보수정 화면은 상단, 좌측 메뉴가 보여지는게 맞을 것 같다고 판단했기때문입니다.
(지난 번 Modal창도 그렇고, 걍 그누의 기본 형식을 따르는게 제일 편할 듯 하네요.)
(그럴듯하게 바꾸는건 나중에 하는게 시간이 절약될 것 같아요.)
개발중인 테마에서는 현재화면부터 확인해볼게요.
상단 메뉴와 좌측 메뉴 외에도
회원가입페이지이 좌측 메뉴도 없애버려야 하네요...
이미 만들어놓은거 뒤집을 순 없고,
어케든 개발해야겠죠? (우리에겐 IF문이 있으니까요 ^^)
우선 순서대로
"회원 비밀번호 확인" 페이지부터 개발해야겠어요~
(이것도 Modal창으로 하고 싶지만, 꾹 참아봅니다. ^^)
먼저,
Metronic Admin 템플릿의 샘플 중 어떤 걸 활용할지 찾아봐야겠습니다.
소스도 한 번 보겠습니다.
<!--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를 안쓰고도 이렇게 할 수 있다는게
정말 놀랍습니다.
이제 그누의 코드를 개발 중인 테마로 옮깁니다.
<?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"> </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"> </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가 member_confirm.php인지를 비교하여
해당 영역의 노출 여부를 코딩합니다.
이제 좌측메뉴와 상단 탑, 푸터등이 나타나게 해야 하는군요.
이건 head.php를 include하게 하면 됩니다.
(아쉬운건 어쩔 수 없이 또 /bbs/register_form.php를 건드려야 한다는거네요.)
테마 제작시에는 가능한 테마 폴더 안에서 해결해야 하는데,
이런 경우는 이럴 수 밖에 없는거죠?
다른 방법이 있다면 누가 좀 알려주시면 감사하겠습니다.
이렇게 해서 완료가 된 줄 알았는데...
부자연스러운 부분들이 있네요.
"회원가입"이라는 문구는 "회원정보 수정"으로 바뀌어야 하고
일부 input 태그들은 readonly 또는 disable로 바뀌어야 합니다.
일단 쉬워보이는 문구 수정부터 진행합니다.
찾아보니 $w 값도 있고, $g5["title"] 값으로 위의 작업들을 처리해도 되었겠네요.
(그러나 이미 만들었으니 바꾸지 않습니다. ㅎㅎ)
회원 가입이라는 문구는 $g5["title"]를 echo해서 해결합니다.
이제 required와 readonly 부분이 처리가 되어야 하는데요...
아.. 되어 있군요. 그런데 색상이 똑같아서 구분이 안됩니다.
어제 작업에서 보았던, form-control-solid 클래스를 이용하면 되겠네요. ㅎㅎㅎ
<?php echo $readonly; ?>가 있는 모든 input tag에 클래스를 추가합니다.
이제 상단에 빈 영역만 채우면 되겠습니다.
역시 IF문을 이용해서 하면 되겠지요.
위에서는 REFERER을 이용했지만,
여기서는 $w값을 이용해서 적용하겠습니다.
이제 거의 다 왔네요.
이제 서브헤더의 제목을 변경하는 작업이 남았습니다.
아... 하나 더 남았네요.
하단의 버튼이 바뀌어야 합니다.
현재는 회원가입때의 버튼이네요.
이번에도 $w를 이용하여 작업을 합니다.
잘 바뀐걸 확인할 수 있습니다.
이렇게 회원정보 수정 페이지의 작업이 완료되었습니다.
$w 변수가 있는걸 확인 못하고
$_SERVER["REFERER"]을 사용한게 조금 아쉽지만,
오늘은 별 막힘 없이 순조롭게 진행이 된 듯 하여 좀 뿌듯하네요.
다음 번 작업은 포인트, 쪽지, 스크랩 페이지가 될 예정입니다.
그러고 나면,
대망의 게시판 작업에 들어가게 되네요.
아직 절반 조금 못온것 같지만,
그래도 이제는 속도가 좀 나는 것 같습니다.
이제부터는 조금 더 빠른 속도로 달려보겠습니다.
'재밌는 IT 개발 > 그누보드 테마 제작기(記)' 카테고리의 다른 글
| 그누보드 테마 제작 17 - 스크랩 내역 페이지 개발 (4) | 2020.07.02 |
|---|---|
| 그누보드 테마 제작 16 - 포인트 내역 페이지 개발 (0) | 2020.07.01 |
| 그누보드 테마 제작 14 - 회원정보 찾기 페이지 개발 2 (0) | 2020.06.29 |
| 그누보드 테마 제작 13 - 회원정보 찾기 페이지 개발 1 (0) | 2020.06.27 |
| 그누보드 테마 제작 12 - 소셜 로그인 및 회원가입 페이지 개발 (0) | 2020.06.27 |
댓글