맞춤게시판을 이용해서 "교수님소개"페이지를 만들어보도록 하겠습니다.

=> 참고사이트(http://pharm.kyungwan.ac.kr/shop_contents/myboard_list.htm?myboard_code=sub2_1)

 

 

[프로그램샵 > 프로그램 추가 설치 > 프로그램 견적문의]로 이동해서 웹프로그램에 있는 맞춤게시판을 설치합니다.

※ 맞춤게시판 중에서 무료설치가 가능한 "교수소개 게시판"을 설치합니다.

설치가 완료되면 아래와 같이 "교수소개 게시판"이란 맞춤게시판이 만들어지며, 기본환경설정 버튼을 클릭합니다.

여기서 수정이 필요한 부분은 리스트화면과 읽기화면에서 교수사진의 크기를 설정해야 합니다.

기본설정을 클릭한후 아래와 같이 목록화면과 읽기화면의 썸네일크기를 각각 수정하세요.

 


  

 

맞춤게시판관리 목록에서 입력항목설정버튼( )을 클릭하고 아래와 같은 형태로 수정합니다.

① 교수명 (텍스트필드)  -  size=30 (속성)

② 교수사진 (파일첨부)

③ 직위 (텍스트필드) -  size=70 (속성)

④ 연구실 (텍스트필드) -  size=70 (속성)

⑤ 전화번호 (전화번호)

⑥ 이메일 (이메일)

⑦ 학력 (HTML편집기) - style="width:100%;height:50px" (속성)

⑧ 경력 (HTML편집기) - style="width:100%;height:50px" (속성)

⑨ 연구분야 (HTML편집기) - style="width:100%;height:50px" (속성)

⑩ 홈페이지 (텍스트필드) - size=50 (속성)

저장이 완료되면, 해당 맞춤게시판 우측의 기본디자인버튼을 클릭합니다.

 

 

스킨을 "1. 매니저소개"로 변경합니다. ( 매니저소개 하위메뉴로 추가할 예정)

페이지선택에서 "리스트화면"을 선택합니다.

편집모드를 "TEXT편집기"변경한후 샘플디자인을 "[phpx] 기본소스(앨범형)"을 선택하고 "샘플디자인 소스 가져오기"를 클릭해서 소스를 삽입한 후 수정버튼을 눌러 수정합니다.

 

교수소개게시판의 등록데이타를 클릭해서 5개이상 등록합니다.

등록이 완료된후 URL CODE를 눌러 페이지를 확인해봅시다.

교수소개페이지로 사용할 수 있도록 교수명/직위/연구실/전화번호/이메일이 출력되도록 리스트화면의 소스를 아래와 같이 수정합니다. (내용이 출력되는 부분만 수정하세요)

위의 원본소스는 다음과 같습니다 (다양한 형태로 변경해 보시기 바랍니다 ~)

<table width=300 border='0' cellpadding='0' cellspacing='0' style="border:1px solid #cccccc"> <tr align=center height=245 bgcolor="#f1f1f1"> <td><a href="{$values[read_url]}"><img src='{$values[s_v2_url]}' border=0></a></td> </tr> <tr height=100 bgcolor="#dddddd"> <td style='padding:7px 7px 7px 70px;line-height:1.5'> <b>교수명</b> : {$values[s_v1]}</a><br> <b>직위</b> : {$values[s_v3]}</a><br> <b>연구실</b> : {$values[s_v4]} ({$values[s_v4]})</a><br> <b>이메일</b> : {$values[s_v6]}</a> </td> <tr> </table><br><br>

수정후 리스트화면 페이지를 확인하면 다음과 같습니다.

 

 

 

이번에는 리스트화면에서 교수사진을 클릭시 나타나는 읽기화면을 수정해보겠습니다.

페이지선택에서 읽기화면을 클릭하고 샘플디자인을 "[PHPX]기본소스"를 선택한 후 샘플디자인소스 가져오기를 누릅니다.

읽기화면도 샘플디자인을 "[PHPX] 기본소스"를 복사해서 아래와 같이 수정합니다.(하단의 문자변환코드 이용)

<div loop="$myboard_read_row as $key => $values">     <table width="100%" border="1" cellspacing="0" cellpadding="0">       <tr>         <td>           <table width="100%" border="0" cellspacing="0" cellpadding="0">             <tr>               <td width="300" align="center" style="padding:10px 5px">                     <img src="{$s_v2_url}" style="border:5px solid #dddddd">               </td>               <td style="font-size:14px;line-height:1.5">                  <b>교수명 : {$s_v1_value}</b><br>                  직위 : {$s_v3_value}<br>                  연구실 : {$s_v4_value}<br>                  연락처 : {$s_v5_value}<br>                  E-mail : {$s_v6_value}               </td>             </tr>           </table>         </td>       </tr>       <tr>         <td style="padding:10px">         <b>학력</b><br>              {$s_t1_value}         </td>       </tr>       <tr>         <td style="padding:10px">         <b>경력</b><br>              {$s_t2_value}         </td>       </tr>       <tr>         <td style="padding:10px">         <b>연구분야</b><br>              {$s_t3_value}         </td>       </tr>     </table>    </div>

이외에 쓰기폼화면 및 패스워드확인폼은 생략하겠습니다 (관리자가 등록 및 확인)

현재 리스트화면에서 "자세히보기"를 클릭하면 새창이 아닌 현재창에서 페이지가 열리고 있습니다.

이것을 새창에서 열리도록 수정해보겠습니다.

자세히보기를 클릭했을때 읽기화면이 상단/왼쪽/하단디자인이 없이 새창으로 보여야 합니다. 이때 사용하는 내부함수는 상단/왼쪽/하단디자인을 없애는 me_popup = 1과 새창을 띄우는  javascript:popup_window('주소',가로,세로) 입니다.

위 함수들을 이용해서 리스트화면에서 자세히보기의 링크부분을 아래와 같이 수정합니다.

 

수정후 리스트화면에서 자세히보기를 클릭해보면 새창으로 열리는 것을 확인할 수 있습니다.

 

 

마지막으로 "전국 가맹점 현황"페이지를 홈페이지와 연결해보겠습니다.

[디자인관리 > 전문가 환경설정 > 네비게이션 마법사]로 이동하여 "매니저소개"의 하위메뉴로 "교수소개"을 만들고 링크를 연결합니다.

 

 

완성화면 : http://uhkr21c.aramschool.co.kr/shop_contents/myboard_list.htm?myboard_code=cp222742