[고급11단] 나만의 목록으로 전국 가맹점 현황 만들기

님 등급 :
이슬 : 방울 활동점수 : 점

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

미션 A코스 [고급11단] 나만의 목록으로 "전국 가맹점 현황" 만들기: 2011-12-17 09:58:25

아람스쿨 조회수 1461

map_cs3.zip [File size:197KB]

http://www.aramschool.co.kr/bbs/mission1a/1763

지난시간에 이어 나만의 목록을 활용하는 방법으로 "전국 가맹점 현황"을 만들어보도록 하겠습니다.

전국 가맹점 현황은 각 지역별로 가맹점을 등록하고, 등록된 가맹점은 지역별 검색을 통해 쉽게 찾을 수 있도록 합니다.

==> 참조사이트(http://ferbl2.1step.co.kr/shop_contents/myboard_list.htm?myboard_code=map)

매니져 농장 > 농장연혁 다음에 "전국 가맹점 현황"메뉴를 추가해보도록 하겠습니다.

[디자인관리 》 전문가 환경설정 》 네비게이션 마법사]로 이동한후 새로운 메뉴를 아래와 같이 추가합니다.

※ 새로운메뉴는 현재 경로가 없으므로 "직접 URL 입력"에 체크하고 저장합니다.

참조사이트(http://ferbl2.1step.co.kr/shop_contents/myboard_list.htm?myboard_code=map)를 클릭하여, 가맹점목록에서 첫번째 가맹점의 자세히보기 버튼을 클릭합니다.

가맹점등록시 필요한 컬럼항목은 지역, 지점명, 지점장, 핸드폰, 전화번호, FAX, 주소 등이 필요합니다.

[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]로 이동하여 나만의 목록을 추가합니다.

- 나만의목록 URL CODE : map ==> 코드가 변경될 경우 플래시파일을 수정하셔야 합니다.

- 페이지명 : 전국 가맹점현황

- 등록시 안내멘트 : 가맹점이 추가되었습니다!

- 컬럼항목 : 지점, 지역명, 지점장, 핸드폰, 전화번호, FAX, 주소

- 필수항목 : 지역, 지점명, 전화번호, 주소

- 지역 : 서울;인천;경기도;강원도;대전;대구;광주;울산;부산;충청북도;충청남도;경상북도;경상남도;전라북도;전라남도;제주도

이번에는 나만의 목록디자인을 수정해보도록 하겠습니다.

첨부된 지도플래시(map_cs3.swf)를 웹디자인 FTP에 업로드합니다.

리스트화면에서 샘플디자인을 "기본디자인"으로 선택하고 샘플디자인소스 가져오기를 클릭합니다.

복사된 소스를 아래와 같이 수정합니다.

※ 샘플디자인을 가져올때에는 반드시 TEXT모드로 체크되어 있어야 합니다.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><script>flash("/img_up/shop_pds/uhkr60/design/map_cs3.swf",210,300);</script></td>
</tr>
</table>

</td>
<td valign=top>

</div>
<br>

<table width=100% cellpadding=0 cellspacing=0 border=0>
<script>
var str = '';

for(var i =0;i<sm_numbering_arr.length;i++){
  sm_numbering = sm_numbering_arr[i]; // 넘버링
  sm_read_url = sm_read_url_arr[i]; // 링크주소
  sm_reg_date = sm_reg_date_arr[i]; // 날짜 YYYY-MM-DD HH:ii
  sm_reg_date2 = sm_reg_date2_arr[i]; // 날짜 YYYY-MM-DD
  sm_view_cnt = sm_view_cnt_arr[i]; // 조회수

  for(var n=1;n<=35;n++){ // sm_val1 ~ sm_val35
   eval("sm_val"+n+" = sm_val"+n+"_arr[i];");
   eval("sm_val"+n+"_url = sm_val"+n+"_url_arr[i];"); // 첨부파일이 있다라면.. sm_val_숫자_url 변수로 저장됩니다.
  }

  str += "<tr align=center height=25>";
  str += "<td width=80>"+sm_val1+"</td>";
  str += "<td>"+sm_val2+"</td>";
  str += "<td width=70><a href="+sm_read_url+">자세히보기</a></td>";
  str += "</tr>";
  str += "<tr><td height=1 bgcolor='#cccccc' colspan=3></td></tr>";
}
document.write(str);
</script>
</table>
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
  <td align=center>{PAGE_BLOCK}</td>
</tr>
</table>

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

읽기화면에서 샘플디자인을 기본디자인(수동지정형)으로 선택하고 샘플디자인소스 가져오기를 클릭합니다.

복사된 소스를 아래와 같이 소스를 수정합니다.

※ 읽기화면은 리스트화면에서 "상세보기"를 클릭했을때 새창으로 나타나게될 화면입니다.

<div style="padding:5 10 5 10;width:100%" >
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr><td height=2 bgcolor="#303030" colspan=10></td></tr>
</table>
<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME1}</b></td>
<td style='padding:5'> {VAL1} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME2}</b></td>
<td style='padding:5'> {VAL2} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME3}</b></td>
<td style='padding:5'> {VAL3} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME4}</b></td>
<td style='padding:5'> {VAL4} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME5}</b></td>
<td style='padding:5'> {VAL5} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME6}</b></td>
<td style='padding:5'> {VAL6} </td>
</tr>
<tr>
<td width=100 align=right style='padding:5' bgcolor='#f7f7f7'><b>{NAME7}</b></td>
<td style='padding:5'> {VAL7} </td>
</tr>

쓰기화면은 관리자가 가맹점을 등록하는 형태이므로 별도로 디자인이 필요하지 않습니다~ (Pass..)

[프로그램샵 > 프로그램 환경설정 > 맞춤 게시판 관리]에서 등록데이타를 클릭하여 가맹점을 10개 정도 등록하면 아래와 같이 리스트(목록)화면이 출력됩니다.