아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 B코스 [초급13단] 마이페이지 만들기
2012-06-16 23:57:00
아람스쿨 조회수 2434

이제 마이페이지만 만들게 되면 정말 홈페이지라면 꼭 필요한 기능들이 대부분 다 들어 갔다고 보셔도(^^;;;) 될것 같습니다. 

 

 우리는 이전 "네비게이션 만들기" 미션을 통해 1.매니져소개, 2.매니져농장, 3. 자료실, 4커뮤니티 라는 대메뉴를 만들었습니다. 그럼  5.마이페이지를 추가 해야 하는데

보통 일반적으로 마이페이지는 대메뉴에(=상단메뉴에) 속한다기 보다는 회원정보 수정페이지에서만 별도의 메뉴가 보이게 하는경우가 많습니다.

즉 눈에 보이지 않는 대메뉴(=상단메뉴)라고 보시면 됩니다.

 

무슨말이지 모르시겠다면 그냥 따라하세요 ^^;;

[디자인관리  전문가 환경설정  네비게이션 마법사] 으로 이동하세요.

[대메뉴(최상위)생성] 버튼을 클릭 하시구요.

아래와 똑같이 설정해주세요

(주의!  출력안함으로 하셔야 하며, 접속 URL은 이전장에서 배운 세부페이지의 "회원정보 수정폼"을 선택하셔야 합니다.)

 

 

 그럼 "마이페이지"라는 대메뉴가 만들어 졌습니다.

그럼 마이페이지 밑으로 들어가는 소메뉴를 만들어 봅시다.

대메뉴를 만들때는 "출력안함"으로 설정 하였지만  소메뉴는 "출력함" 으로 설정 하셔야 합니다.

필자는 아래와 같이 소메뉴를 만들었습니다. 

 

마이페이지 소메뉴는 모두 "세부페이지"로 되어 있으며 소메뉴 추가시 아래처럼 설정하시면 됩니다.

회원정보 수정 : 세부페이지 -> MYPAGE >> 회원정보 수정폼

예약접수확인 :  세부페이지 -> MYPAGE >> [등록폼 조회] 접수 내역 목록

패스워드 변경 : 세부페이지 -> MYPAGE >> 비밀번호 변경 폼

내가 쓴 게시글 : 세부페이지 -> MYPAGE >> 내가 쓴 게시글

보낸 쪽지함 : 세부페이지 -> MYPAGE >> 보낸 쪽지함

받는 쪽지함 : 세부페이지 -> MYPAGE >> 받은 쪽지함

회원탈퇴  : 세부페이지 -> MYPAGE >> 회원탈퇴 폼 

 

아래 화면은 "예약접수확인" 설정 화면 입니다.  (참고하세요) 

이제 예약접수 내역까지 설정하고 나면 이상한 점을 발견하셨을겁니다.

바로 쪽지함 부분인데 그 부분을 지금부터 해결해 보겠습니다.

일단 [프로그램샵 > 프로그램 구매 > 프로그램 구매]으로 들어가셔서 쪽지함을 구매하셔야 합니다.

이전에 구매 방법은 다 안내드렸기때문에 요약하겠습니다.^-^

구매하실 때 위치설정 부분은 아래와 같이 마이페이지의 생성하시면 됩니다.

쪽지함을 구매하실 때는 받은 쪽지함과 보낸 쪽지함을 모두 구매하셔야 하기때문에 2개의 쪽지함을 구매해야합니다.

2개의 쪽지함을 모두 구매하셨다면 받은 쪽지함과 보낸 쪽지함으로 수정해보겠습니다.

[디자인관리 > 네비게이션 마법사]로 들어가시면 쪽지함이 생성된 것이 확인될겁니다.

그렇다면 이 쪽지함에 [메뉴수정]버튼을 클릭합니다.

설정화면이 팝업되면 아래와 같이 입력하여 받은 쪽지함과 보낸 쪽지함을 모두 수정합니다.^^

수정이 완료되셨나요?

완료되었다면 아래와 같이 받은 쪽지함과 보낸 쪽지함으로 수정된 것이 확인됩니다.

확인되었다면 나머지 회원탈퇴 폼 등을 추가하시면 됩니다.

 

  

 마이페이지에 들어갈 메뉴를 생성 했다면 홈페이지상에  왼쪽메뉴가 출력 될수 있도록 만들어 봅시다.

이전 미션중에 "왼쪽메뉴 만들기" 미션 기억나시나요?  잊어버리신 분들을 위해 다시 설명 해드리겠습니다. 따라하세요 ^^

[디자인관리 고급 디자인 관리 그룹디자인 관리]으로 이동 후 [프로그램 마법사 생성]버튼을 클릭 합니다.

프로그램 종류에서 [네비게이션 마법사]를 선택 후 [왼쪽 메뉴1단계]를 선택하세요.

그러면 아래와 같은 설정 폼이 나타납니다. 똑같이 설정 해주세요 

  

 

※ 여기서 주의 하실 점은 "메뉴 시작 지점" 입니다. 이것을 지정하지 않으면 대메뉴가 출력 되므로 꼭 선택해주세요.

 그룹디자인을 생성 했다면 {GROUP_left5}의 [미리보기]를 클릭하셔서 정상적으로 출력되는지 꼭 확인 하세요.

 

 

 {GROUP_left5}를 만드셨다면 실제 홈페이지에  적용 합시다.

[디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 이동 후 skin4를 복사해서 필요한 부분만 수정 합니다.

제목에 "마이페이지"라고 입력하시고

html 소스 입력란에 아래와 같이 입력해주세요. 

  

 

 

※ 입력된 HTML 

<!-- 상단 디자인 출력 부분 -->
<table width="960" height=80 border="1" align=center>
  <tr>
    <td align=center width=200>
     <a href="/shop_main/main_body.htm">웹디모 초간단 홈페이지</a>
    </td>
    <td align=center>
     {GROUP_navi}
    </td>
  </tr>
</table>
 
<!-- BODY 본문 디자인 출력 부분 -->
<table width="960" border="1" align=center>
<tr>
<td width=200 valign=top>
 <table width="200" border="1">
   <tr>
  <td>
   <br>
   <br>
    {GROUP_login_box}<br>
   <br> <br>

  <b>5.마이페이지</b><br>
  <br>
  {GROUP_left5}<br>
  <br>
  </td>
   </tr>
 </table>
</td>
<Td  valign=top>
  {BODY_CONTENT}
</td>
</tr>
</table>

<!-- 하단 디자인 출력 부분 -->
<table width="960" border="1" align=center>
  <tr>
    <td width="200">
      <p><br>
       <a href='/shop_main/main_body.htm'> 하단 로고</a><br>
      </p>
      </td>
    <td> <br>
      홈페이지명 : 초급미션홈피<br>
      운영자:웹돌이<br>
      이메일주소 : aaaa@naver.com<br>
      <br>
총 누적 접속수 {COUNT_TOTAL} /
이달 접속수 {COUNT_MONTH} /
오늘 접속수 {COUNT_TODAY} <br>
총 게시물 수 {BBS_TOTAL_CNT}, 새글 수 {BBS_NEW_CNT}<br>
총 회원 수 {MEM_TOTAL_CNT}, 신규 회원 수 {MEM_NEW_CNT}<br>
 


</td>
  </tr>
</table>

 

  

※ 본 솔루션은 HTML 및 DIV 표준 코딩 모두 적용 가능 합니다. 여러분의 편의에 맞게 코딩 하시기 바랍니다.

  

 여기 까지 수정 후 홈페이지 접속 후 회원으로 가입한 다음 로그인 해보세요.

그리고 회원정보 수정을 클릭 하면 먼가 좀 이상한점을 발견 할 수 있습니다.

왼쪽 메뉴를 보면 위에서 만든 메뉴가 출력되지 않고 있습니다.

 본 솔루션은 각 페이지 마다 상단, 왼쪽, 하단이 자동 선택되지 않기 때문에 꼭 개별적으로 수정해줘야 합니다.

 수정 방법은 [디자인관리 고급 디자인 관리 세부 화면 디자인] 으로 이동 하신 후

페이지분류에서  [MY PAGE] 옆에 있는 환경설정버튼을 클릭 합니다.

 

[MY PAGE] 분류 안에 있는 모든 페이지의 스킨을  "5.마이페이지"로 설정 합니다.

다시 홈페이지 접속해서 확인해 보세요. 회원정보 수정시 아래와 같이 왼쪽 메뉴가 출력되고 있음을 확인 할수 있습니다. 

 

※ "패스워드 찾기"는 팝업 전용이기 때문에 상단, 왼쪽, 하단을 선택 할수 없습니다.

※ "회원가입 약관", "회원가입 폼", "회원가입 완료" 페이지는 로그인 하기 전이기 때문에 왼쪽 디자인은 되도록이면 "메인 왼쪽디자인"을 선택 하시는것 좋습니다.

  

 수고 하셨습니다.

 

완성 화면 : http://uhkr12b.aramschool.co.kr

여러분의 빠른 확인을 위해 아래 테스트 회원을 등록해 두었습니다. 로그인 하셔서 확인 해보세요 ^^

아이디 : aramtest 

패스워드 : 1234 

 

여러분께서 제작한 홈페이지로 가셔서 회원 가입하신후  로그인 해보세요

그리고 회원 정보수정을 클릭 했을때 아래와 같이 왼쪽 메뉴가 나온다면 대성공 입니다.

- 회원정보 수정

- 예약접수 확인

- 패스워드 변경

- 내가 쓴 게시글

- 보낸 편지 함

- 받은 편지 함

- 회원탈퇴

  

여기까지 만들어보니 어떤가요? 뿌듯하신가요? ㅎㅎㅎㅎ

필자는 지면상 단순한 디자인(디자인같지도 않지만 ㅎㅎㅎ)에 간단한 html을 사용하였지만 여러분은 포토샵으로 이쁘게 꾸며서 제작하시면 정말 완벽한 홈페이지가 될꺼라 생각합니다.

 정말 고생 많으셨습니다~ ^^ 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

댓글 116개