크롬80버전 결제 이슈, 영카트5 주요패치 확인!

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

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

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

 

2949618301_1593444524.707.png

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

 

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

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

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

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

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

 

2949618301_1593444760.6117.png
 

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

2949618301_1593444846.2732.png
PC에서 보여질 화면

img.png휴대폰에서 보여질 화면

 

이제 그누의 코드를 개발 중인 테마로 옮깁니다.
<?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>
<!-- } 회원 비밀번호 확인 끝 -->

짜잔... 완료되었습니다.
(그런데 위에 이상한 넘이 떠 있네요...)
2949618301_1593444929.8623.png
회원 비밀번호 확인 페이지 완료 화면

저 위에 이상한 넘이 떠 있는거...
계속 신경쓰이네요... 뭘까요?
2949618301_1593444964.9978.png
이상한 넘의 정체

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

이제부턴 안보이겠네요 ^^
2949618301_1593445036.9096.png
로그인 중이라는 텍스트를 안보이게 처리해버림.

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

먼저 좌측 정보 영역을 없애야겠어요.
2949618301_1593445076.3942.png
좌측영역이 안보여져야 한다. 또는 없애거나...

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


2949618301_1593446299.1136.png
referer을 로그로 찍어본 결과

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

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

2949618301_1593446432.9778.png
좌측 영역이 사라진 화면

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

2949618301_1593446481.3699.png
좌측메뉴, 상단, 푸터를 위한 코딩

 

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

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

 

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

2949618301_1593446837.6167.png
회원정보 수정 페이지의 제목 부분이 수정된 모습

 

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

2949618301_1593477716.3501.png

 

 

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

2949618301_1593477759.3675.png

 

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

2949618301_1593477782.7583.png

 

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

 

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

2949618301_1593477827.6823.png

2949618301_1593477839.5489.png

 

 

 

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

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

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

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

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

 

추천1

댓글 전체

그냥 만들어놓은 회원가입페이지를 수정하는 걸로 바꾼거라 어려울건 딱히 없었어요. 단지 그누 기본 테마와 다르게 가입페이지를 만드는 바람에 헛수고를 한거지요. ^^
테마를 만들때는 기본은 그누기본테마와 같게 한 다음에
나중에 변형을 시도하는게 맞는 순서인것 같아요~
전체 5,044
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT