적용버전 : XpressEngine 공통 회원을 위한 특별한 모듈

회원을 위한 특별한 모듈

로그인, 회원가입, 회원정보보기를 위한 페이지 구성

"콘텐츠를 보여주세요!" 에서 $content 변수에 대한 이해를 도왔습니다. 결론적으로 $content 변수는 모듈관리에서 생성한 페이지, 외부페이지, 게시판 등을 불러와 출력하는 역할을 하면서도 XE가 별도로 시키는 일에 대해서도 아주 잘 처리하는 변수 기능을 겸하고 있지요. 따라서 $content내용 변수라 부릅니다.

XE가 별도로 시키는 일 가운데 특히 로그인, 회원가입, 회원정보보기는 아주 중요한 일입니다. 웹사이트에 방문한 손님에게 회원가입을 위한 양식을 보여주거나, 회원에게는 로그인 할 수 있는 로그인 폼을 보여 주어야 합니다. 그리고 개인정보를 수정하거나 작성글 보기 등의 부가적인 서비스를 제공하기도 합니다. 이렇게 중요한 일들을 XE는 $content 변수에게 자주 시키곤 한답니다. 일을 시키는 방법은 무척 간단합니다. 아래와 같이 {getUrl()} 안에 해야할 일을 적어주면 됩니다.

<a href="{getUrl('해야 할 일','로그인 폼을 보여줘!')}">로그인</a>

<a href="{getUrl('act','dispMemberLoginForm')}">로그인</a>
<a href="{getUrl('act','dispMemberSignUpForm')}">회원가입</a>
<a href="{getUrl('act','dispMemberLogout')}">로그아웃</a>
<a href="{getUrl('act','dispMemberInfo')}">회원정보보기</a>
<a href="{getUrl('act','dispMemberFindAccount')}">아이디/비밀번호 찾기</a>

이것은 XE의 특별한 장점이면서도 또한 단점이 될 수 있습니다. 왜냐하면 XE는 회원을 위한 별도의 페이지를 만들어 두지 않았습니다. 로그인, 회원가입, 회원정보보기 등은 모두 member 모듈의 회원기본스킨(default)에서 불러와 사용하는데 위에 적은데로 일을 시키면 아무데서나(?) 로그인 폼을 보여주기도 하고, 게시판 등에서 회원가입을 받으려고도 합니다. 정확히 말하자면 현재 페이지에서 시키는 일을 다 하려고 합니다.

이러한 이유로 XE 공식 홈페이지나 패밀리 사이트들을 확인해 보면 회원을 위한 별도의 모듈 페이지를 만들지 않거나 또는 페이지에서 위젯과 모듈에만 의존해 사이트를 구성하려는 경향이 많습니다. 이러한 방법은 일반적인 웹사이트 운영방식과는 많이 다르고 까페, 블로그에 더 가깝습니다. 만약 어떤 위젯에서 작은 오류가 발생하게 되면 위젯만으로 채워진 페이지 모듈 전체에 걸쳐 아무것도 출력되지 않는 결과를 가져옵니다.

우리가 원하는 것은 아래와 같이 회원을 위한 특별한 공간, 회원관리 페이지의 구성입니다. 즉 로그인, 회원가입을 할 때와 로그인 후에 보여줄 서브메뉴의 구성은 달라야 하겠지요?

image

image


1. member_page 만들기

XE 시작하기 > 페이지와 외부페이지 만들기 문서를 참고하셔서 외부페이지 생성을 이용해 member_page 모듈을 하나 만듭니다. 이때 불러오는 외부 문서는 member_page.html 이라고 이름을 지어주고 문서 안에는 아무것도 없도록 합니다. 쉽게 말해 빈문서를 불러오는 것이지요. 이렇게 생성된 외부페이지(member_page) 모듈은 메뉴에 연결하지 않습니다. 그냥 혼자서 놀도록 내버려 둡니다...^^

메뉴에 회원관리를 추가한 후 생성한 member_page를 연결하게 되면 메뉴에 회원관리 항목이 보이게 되서 결코 보기에 좋지 않습니다. 그룹제한 보기설정을 해 두어도 관리자에게는 항상 보이기 때문에 무척 불편합니다. 따라서 메뉴를 구성하고 연결하지 않는 것입니다. 그냥 혼자 놀도록 내버려 두는 것이 최고로 좋습니다...^^


2. 링크 수정하기

member_page 모듈은 어떻게 사용할까요? 혼자 놀고 있는 아이는 큰 소리로 불러야 합니다. 그리고 이렇게 이야기 해야겠지요?
"집에 가서 손씻고 밥먹어야지!"

이것을 XE에게 링크로 이야기하면 이렇게 됩니다.

<a href="{getUrl('누구를 불러요?','혼자 놀고 있는 member_page를 불러!','해야 할 일','손씻고 밥먹어야지!')}">로그인</a>

<a href="{getUrl('mid','member_page','act','dispMemberLoginForm')}">로그인</a>

그런데 XE가 버전이 올라가면서 'mid' 앞에 빈 홑따옴표를 한쌍 넣어야 원하는 member_page 모듈로 잘(?) 이동합니다.
따라서 'mid' 앞에 '', 를(빈칸 없이 홑따옴표 한쌍과 콤마) 추가합니다.

<a href="{getUrl('','mid','member_page','act','dispMemberLoginForm')}">로그인</a>

member_page에서 일할 링크들은 모두 각각 이런 방법으로 이동할 모듈의 이름과 해야할 일을 정리하여 수정해 줍니다.


3. 레이아웃에서 조건구문을 이용해 서브메뉴 구분하기

XE의 기본 레이아웃 xe_official 처럼(또는 스쿨처럼) 레이아웃 안에 서브메뉴 출력을 위해 리스트(UL) 목록을 구성한 경우 {$content}에 member_page 모듈이 들어오게 되면 조건구문을 이용해 위와 같은 서브메뉴를 보여주어야 합니다. 이때도 서브 메뉴는 XE 메뉴트리에 등록되어 있지 않은 것들이고 스마트 헤더 로그인과 같은 방법입니다.

<div class="lnb">
   <h2>1차 메뉴의 제목</h2>
   <ul class="locNav" loop="$main_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
      <li>선택된 1차 메뉴의 서브메뉴(2차) 목록</li>
   </ul>
</div>

XE의 기본 서브메뉴 lnb(Local Navigation Bar)의 DIV loop를 간단히 적어 보았습니다. 이것을 다음과 같이 수정합니다.

<!--@if($mid=='member_page')--> ※ 만약 mid가 member_page이면 아래 내가 적어 놓은 서브메뉴를 보여주고
<div class="lnb">
   <h2>회원관리</h2>
   <ul class="locNav">
   <!--@if($is_logged)-->
      <li><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
      <li><a href="{getUrl('mid','member_page','act','dispMemberInfo')}">회원정보</a></li>
   <!--@else-->
      <li><a href="{getUrl('mid','member_page','act','dispMemberLoginForm')}">로그인</a></li>
      <li><a href="{getUrl('mid','member_page','act','dispMemberSignUpForm')}">회원가입</a></li>
      <li><a href="{getUrl('mid','member_page','act','dispMemberFindAccount')}">아이디/비밀번호 찾기</a></li>
      ※ 여기서는 'mid' 앞에 '',(홑따옴표)가 필요없다. 왜냐하면 다른 페이지로 이동할 필요가 없기 때문이다.
   <!--@end-->
   </ul>
</div>
<!--@else--> ※ mid가 member_page가 아니면 원래의 서브메뉴를 보여줘!
<div class="lnb">
   <h2>1차 메뉴의 제목</h2>
   <ul class="locNav" loop="$main_menu->list=>$key1,$val1" cond="$val1['selected'] && $val1['list']">
      <li>선택된 1차 메뉴의 서브메뉴(2차) 목록</li>
   </ul>
</div>
<!--@end-->

추가된 메뉴 리스트에 선택된 CSS를 표현하려면 다음과 같이 class 속성을 더해주는 조건문을 추가합니다.

※ 회원정보 li 에는...(로그아웃에는 필요없다.)
<li <!--@if($mid=='member_page')-->class="active"<!--@end-->>
※ 로그인, 회원가입, 아이디/비밀번호 찾기 li 에는...
<li <!--@if($act=='dispMemberLoginForm')-->class="active"<!--@end-->>

4. member_page.html 의 수정

회원관리의 기본설정 옵션에는 로그인 후 이동할 URL, 로그아웃 후 이동할 URL 등을 입력하여 사용할 수 있습니다. 로그인 후 이동할 URL 입력란에 /xe/ 만 입력하면 로그인 후에 메인 페이지로 이동하고 /xe/freeboard 또는 /xe/?mid=freeboard 라고 입력하면 해당 모듈 페이지로 이동을 하게 되지요. 만약 아무것도 설정하지 않으면 현재 페이지를 그대로 유지합니다.

image

이러한 설정은 무척 편리합니다. 현재의 모듈 페이지에서 로그인, 회원가입을 실행하고 완료되면 현재 페이지를 유지하거나 또는 다른 페이지로 이동 할 수 있기 때문이죠. 하지만 member_page 모듈에서 현재 페이지를 유지하게 되면 아무것도 표시되지 않게 됩니다. 왜냐하면 member_page.html은 빈문서이고 member_page 모듈에서 해야 할 일(action)이 끝나게 되면 원래의 외부페이지(member_page.html) 문서를 불러오기 때문입니다. 이해가 되시나요? 제가 일부러 member_page.html을 빈문서로 만든 이유도 이러한 개념을 이해시켜 드리고자 처음부터 완성하지 않았습니다.

정리해 보면 member_page 모듈은 외부문서를 불러오도록 설정해 두었지만, XE가 모듈을 불러서 해야 할 일(action)을 시킨 경우에는 {$content} 내용 변수 안에서 먼저 시킨 일을 완료하고 난 후에 비로서 자신의 일(member_page.html)을 하게 됩니다.

image

member_page 모듈에서는 회원정보수정, 비밀번호 변경 등의 모든 링크가 member_page&act=해야 할 일로 작동하게 되지만 돌아가기 버튼을 클릭하게 되면 자신의 원래 설정대로 member_page.html 문서를 불러오게 되고 따라서 빈문서에는 아무것도 없기 때문에 표시할 내용이 없게 됩니다.

따라서 member_page.html 문서에는 다음과 같이 페이지 이동 스크립트만 넣어두고 member_page 모듈이 자신을 부를때에는 자동으로 페이지를 벗어날 수 있도록 하면 회원을 위한 특별한 공간은 완성 됩니다. 물론 위의 회원관리 기본설정 옵션은 member_page 모듈과는 별도로 항상 잘 작동합니다.

<script type="text/javascript">
<!--
   location.replace('/xe/');
//-->
</script>

TIP - 로그인 후 이동할 URL 입력란에 게시물의 주소(document_srl)를 입력하여 사용할 수 있습니다. 예) /xe/73