[IT 알아보기]/IT 소식

제로보드XE 각종 위젯 설치하기

이호스트ICT 2012. 3. 20. 11:17

*제로보드XE에 각종 위젯/에디터 설치해보기
 

*달력 위젯 설치 및 사용하기(달력으로 게시글의 날짜 현황을 볼 수 있는 위젯)

게시판에 현재날짜를 표시하고, 날짜별로 게시글을 보고싶다면 다음과 같은 위젯을 사용해보세요.

   

   

/var/www/html/xe/widgets에 calender를 다운로드 받아, unzip으로 압축을 풉니다.

   

확장기능-설치된 위젯으로 가보면 달력 출력이 추가되었고,

코드생성을 클릭

   

검색 -> 사이트찾기를 누르면 아래와 같이 사이트내에 게시판이나 페이지들이 검색되는데,

게시판, 모듈은 test4로 지정해주고, 코드생성을 클릭

   

코드가 생성 되었다.

코드를 복사한다음,

   

...중략

test4설정에 들어가서, 하단내용이 추가한후, 등록을 클릭

   

127.0.0.1/xe/?mid=test에 들어가보면, 2012.3.5일과 2012.3.7일에 밑줄이 그어져 있다.

   

5를 클릭해보면,

3월 5일에 작성한 글들이 보여진다(

   

7을 클릭해보면,

3월 7일에 작성한 글들이 보여진다

   

아래 위젯의 크기를 조절하고 싶다면, test4의 설정에 들어가서,

  

style="float: left; width: 200px; height: 200px;"
기존의 코드에 위의 내용만 추가해주면 됩니다.

이런식으로 픽셀을 지정해주면 된다.

참조 페이지 : http://www.treasurej.com/25370


등록후, F5눌러보면, 위젯의 크기가 변경되어 있음

   

*구글맵 추가하기

   

google_map.zip을 다운받은다음, unzip

   

확장기능-설치된 위젯에 들어가보면 google_map이 추가되어 있다

코드생성을 클릭

   

...중략

가로,세로 길이는 기본인 300으로 하겠습니다.

나머지는 기본설정으로 두고, 코드생성을 클릭

   

생성된 코드를 복사해서,

   

test4설정 하단내용에 붙여넣기

잘 모르겠으면, 일단 옆에 표내용을 복사해서 붙여넣어서 테스트해보면 알수 있음 =======>

<img class="zbxe_widget_output" style="float: left; width: 200px; height: 200px;" widget="calendar" skin="blog_calendar_list" srl="123" /> <img class="zbxe_widget_output" widget="google_map" skin="default" clock_width="300" clock_height="300" map_type="ROADMAP" zoom_size="auto" map_type_control="HORIZONTAL_BAR" navigation_control="DEFAULT" scale_control="false" overview_control="false" street_view="false" icon_display="movable_icon" inforwindow_display="false" inforwindow_content="address_info" circle_overlay="false" search_display="true" route_display="false" earth_control="false" earth_display="simple_level" earth_nav_control="auto" ballnoon_display="directly_display" ballnoon_content="address_info" />
파란색 : 아까전에 달력, 빨간색 : 구글맵

   

와우, 뭔가 추가 되었습니다.

   

서울도 잘 찾아집니다.

   

우리회사를 찾아볼까요,

   

집도 찾아봅니다,

자신의 회사에 공식홈페이지를 만들때, 찾아오시는길 같은걸 추가해준다면, 동적으로 지도를 보여줄 수 있어서 유용할거 같습니다.

   

*플래너 위젯

   

해당경로에 calendar_plannerXE123 압축풀고,

   

*게시판에 달력추가하기

코드 생성을 클릭

   

...중략

...중략

스킨을 달력형으로 바꿔주고, 대상모듈을 게시판(test4추가)후 코드생성

   

   

test4에 설정에 들어가서, 하단에 코드를 복사해서 붙여넣기후,

   

127.0.0.1/xe/?mid=test4로 들어가보면 추가됨

처음으로 등록했으니까, 등록된 일정이 없다고 나오고,

이렇게 하니까, 일정 등록이 안된다 ㅠ

   

그래서 이것을 참조,

http://planner123.raonnet.com/xe/index.php?mid=Planner123_wiki&document_srl=7322

   

*페이지에 달력추가하기

사이트맵에 들어가서, 메뉴추가를 클릭

저장

   

레이아웃 아무거나 선택해주고, 저장

   

여기서 페이지수정을 클릭

   

추가를 클릭

...중략

...중략

코드생성을 누르면,

   

이렇게 됨

저장을 클릭

   

   

내용 모두지우기를 하면, 삭제가 됨

   

*스킨추가 및 확장변수 추가하기

궁금한게 생겼다. 일정추가를 눌렀을때, 아래와 같은 메뉴는 왜 안보일까?

   

*스킨추가

문제는 스킨을 설치 안해서 인거 같음

이 문서를 참조 : http://planner123.raonnet.com/xe/index.php?mid=Planner123_wiki&document_srl=7325

   

   

   

스킨을 추가해주니까,

   

게시판설정/클래식스타일/주간별/스탠다드/플래너리스트/빅스타일/프린트스크린

스킨정보/태크리스트

윗부분에 여러가지 메뉴들이 생김

하지만 아직까지 일정추가하는 메뉴가 전혀 보이지 않는다

   

*확장변수 추가(비교해보니, 아래에 있던 텍스트랑 동일하다)

  

  

   

게시판 설정에 들어가서, 확장변수를 클릭

추가를 클릭

   

이제 아래내용을 참고하면서, 확장변수를 하나하나 추가해주기만 하면 된다.

...나머지는 생략

(아래를 참조하면서, 총 8개의 확장변수를 만들어 준다)

1) 첫번째 확장변수: 

     확장변수 이름: 제한 없음 (예: ext_plan_start  )

     입력항목 이름: 제한 없음 (예: 일정시작   )

     형식:          일자.

     필수항목:  첵크박스에 첵크

     기본값:  

     설명:        <font color=red ><b>날자는 필수, 시간은 선택항목입니다.</b></font>

   

2) 두번째 확장변수: 

     확장변수 이름: 제한 없음 (예: ext_plan_end  )

     입력항목 이름: 제한 없음 (예: 일정종료   )

     형식:          일자.

     기본값:

     설명:          선택항목: 당일로 종료되는 일정은 넣지 않아도 됩니다.

   

3) 세번째 확장변수: (Ver 1.4.0 에서 기본값을 지정할 수 있도록 수정됨: 필요시 색상코드를 입력. 값이 없으면 기본값은 투명입니다.)

     확장변수 이름: 제한 없음 (예: ext_plan_color  )

     입력항목 이름: 제한 없음 (예: 배경색상   )

     형식:          한줄 입력칸 (text)

     기본값:       #77CC00 

     설명:          선택항목: 일정배경에 하이라이트 표시

4) 네번째 확장변수: (Ver 1.2.0 에서 기본값 입력않음으로 수정됨)

     확장변수 이름: 제한 없음 (예: ext_plan_icon  )

     입력항목 이름: 제한 없음 (예: 일정확인   )

     형식:          다중 선택 (checkbox)

     기본값:      

     설명:          선택항목: 일정앞에 아이콘 표시.(일정확인, 중요도 분류등의 용도로 사용.)

   

* 참고로 V1.2.0 부터는 기본값을 입력하는대신 일반사용자는 images/icon/client폴더, 관리자는 images/icon/manager 폴더에 들어있는 이모티콘 을 전부 보여 줍니다.  또, 기존 사용자를 위해 기본값에 이름이 입력되어있는 경우는 우선적으로 기본값을 사용하게 됩니다. 기본값에서 일반사용자와 관리자 구분은  || 로 구분하여 앞쪽은 사용자용, 뒷쪽은 관리자 용입니다. 파일이름사이에 엔터나 공백이 있으면 안됩니다.  (형식:  uuuu,uuuu,uuuu,uuuu||mmmm,mmmm,mmmm    )

   

5) 다섯번째 확장변수: (기본값에 12, 24 추가함 - 년 반복을 위해 - V1.7.0)

     확장변수 이름: 제한 없음 (예: ext_plan_cycle  )

     입력항목 이름: 제한 없음 (예: 반복주기   )

     형식:          단일 선택 (select)

     기본값:      ,1,2,3,4,5,6,7,8,9,10,12,14,15,21,24,28

     설명:          선택항목: 반복일정의 주기(cycle)

   

6) 여섯번째 확장변수: (V3.3.0부터 7번 음력 같은날자 추가됨)

     확장변수 이름: 제한 없음 (예: ext_plan_unit  )

     입력항목 이름: 제한 없음 (예: 반복단위   )

     형식:          단일 선택 (select)

     기본값:      ,1.일(단위),2.월(같은날),3.월(요일차),4.월(주차/요일차),5.월(말일),6.월(말일부터 요일차),7.월(음력같은날)

     설명:          선택항목: 반복주기가 적용될 단위.<br/> (예: 일주일 = 7+일(단위), 격주=14+일(단위), 분기=3+월(같은날)... )

   

* 참고로 V1.0.0 에서 6.월(말일부터 요일차) 가 추가  되었습니다.  

   

7) 일곱번째 확장변수: 

     확장변수 이름: 제한 없음 (예: ext_plan_time  )

     입력항목 이름: 제한 없음 (예: 시작종료  )

     형식:          다중 선택 (checkbox)

     기본값:         

     설명:          선택항목: 필요시 시작과 종료 시간을 선택합니다.

   

8) 여덟번째 확장변수:  (Ver 1.0.0에서 추가) (Ver 1.6.0 에서 변경) 

     확장변수 이름: 제한 없음 (예: ext_plan_opengroup  )

     입력항목 이름: 제한 없음 (예: 공개그룹  )

     형식:          다중 선택 (checkbox)

     기본값:         

     설명:          선택사항: 일정을 공개할 그룹을 선택합니다.

    검색:       체크해 줍니다. (Ver 1.6.0 변경 부분) 

   

   

확장변수 추가완료

   

목록설정에 들어가서, 아까전에 추가해줬던 확장변수를 선택한후, 추가를 클릭하면 오른쪽으로 이동됨

   

저장을 클릭

   

127.0.0.1/xe/?mid=test4로 돌아가서, 윗부분 메뉴에서 스텐다드를 눌러주면, 달력만 보여지고,

   

오늘날짜를 클릭하고 들어가면,

   

   

에디터위에 목록추가한 내용들이 보임

   

*일정추가

다음과 같이 기입해주고, 내용을 입력해주고, 등록해주면,

   

다음과 같이 보여지고,

   

달력상에도 일정이 표기됨

   

*일정삭제

달력에서 원하는 일정을 클릭한다음,

   

오른쪽에 삭제를 클릭

   

   

*에디터 설치

   

   

   

test4 설정을 클릭, 에디터스킨을 fckplus로 저장하고(댓글도 fckplus로 변경해줘도 됨)

   

에디터가 변경됨

   

댓글 에디터는 변경하지 않았으니까, 이전 에디터로 뜸

작성자 : 기술운영부 / tech@ehostidc.co.kr

마지막 업데이트 : 2012.3.20 am11:00