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

 

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

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

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

 

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

[디자인관리 》 전문가 환경설정 》 네비게이션 마법사] 으로 이동합니다.

[대메뉴(최상위)생성] 버튼을 클릭하고 아래와 똑같이 설정해주세요

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

 

 

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

그럼 마이페이지 밑으로 들어가는 소메뉴를 만들어보겠습니다.

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

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

 

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

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

예약접수확인 :  세부페이지 -> MYPAGE >> 내가 쓴 게시글(등록폼)

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

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

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

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

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

 

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

 

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

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

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

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

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

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

  

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

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

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

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

   수정이 완료되셨나요?

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

  

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

 

---

 

  

 

 

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

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

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

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

그러면 아래와 같은 설정 폼이 나타나면 똑같이 설정합니다.

  

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

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

 

 

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

[디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동 후 왼쪽 디자인을 클릭합니다.

좌측편에 나만의 디자인 [새로만들기] 버튼을 클릭합니다.

제목에 "마이페이지"라고 입력한 후

html 소스 입력란에 아래와 같이 입력합니다.

 

※ 입력된 HTML <table width="200" border="1">   <tr>     <td>      {GROUP_login_box}<br>      <br>      <br>      마이페이지<br>      <br>      {GROUP_left5}      <br>      <br>     </td>   </tr> </table>

  

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

  

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

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

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

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

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

+ MYPAGE -> "회원정보 수정"을 클릭합니다.

아래와 같이 왼쪽 디자인을 마이페이지를 선택 한 후 [외각디자인 저장하기]버튼을 클릭해야 합니다. 

 

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

 위와 같은 방식으로 아래 페이지의 왼쪽디자인을 선택 한 후 [외각디자인 저장하기]버튼을 클릭해주셔야 합니다.

세부페이지 -> MYPAGE >>내가 쓴 게시글(등록폼)

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

세부페이지 -> MYPAGE >> 보낸 편지함

세부페이지 -> MYPAGE >> 받은 편지함

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

  

※ "패스워드 찾기"는 팝업전용이기 때문에 상단, 왼쪽, 하단을 선택할 수 없습니다.   ※ "회원가입 약관", "회원가입 폼", "회원가입 완료" 페이지는 로그인 하기 전이기 때문에 왼쪽 디자인은 되도록이면 "메인 왼쪽디자인"을 선택 하시는 것이 좋습니다.

  

 수고하셨습니다.

 

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

여러분의 빠른 확인을 위해 아래 테스트 회원을 등록해 두었습니다. 로그인 하시면 확인 가능합니다. ^^

아이디 : aramtest 

패스워드 : 1234 

 

여러분께서 제작한 홈페이지로 가셔서 회원 가입하신 후  로그인 해봅시다.

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

- 회원정보 수정

- 예약접수 확인

- 패스워드 변경

- 내가 쓴 게시글

- 보낸 편지 함

- 받은 편지 함

- 회원탈퇴

  

여기까지 만들어보았습니다. 뿌듯하신가요? ㅎㅎㅎㅎ

 

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

 

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