본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.
오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)
소개
이번 시간에는 위젯(Widget)을 하나 추가하고, 온라인 갤러리에서 추가 모듈인 빙맵 모듈을 다운로드 받아서 적용하는 방법에 대한 내용을 설명드리도록 하겠습니다.
따라하기
Step 1: [Blog Archieves] 위젯(Widget) 사용하기
1. 아래 그림과 같이 [블로그] 메뉴에 오른쪽 하단에 블로그 아카이브를 추가하려고합니다. Orchard CMS 솔루션은 블로그 아카이브 모듈이 기본적으로 탑재되어있으며 이를 원하는 위치에 위젯으로 포함을 시킬 수 있습니다.
2. 블로그 아카이브를 추가하려면 [위젯]-[현재 레이어] 항목 중 앞선 강좌에서 만들어 놓은 [BlogLayer] 선택합니다. 그런 후 [AsideSecond] 영역(Zone)에 [추가] 버튼을 클릭합니다.
3. 아래 그림과 같이 가장 많이 사용되는 [Html Widget]과 더불어 [Blog Archives] 위젯을 선택할 수 있습니다. 이를 클릭합니다.
4. [위젯 추가] 화면에서 [제목] 항목 정도를 입력한 후 [저장] 버튼을 눌러 블로그의 오른쪽 영역에 보여지게 설정합니다.
5. [Blog Archieves] 추가 완료 화면입니다.
6. 메인 페이지로 돌아와 [Blog] 메뉴를 선택하면, 아래 그림과 같이 정상적으로 블로그 아카이브가 설정되어 보여짐을 알 수 있습니다.
Step 2: 위젯(Widget) 추가하기
1. 일반적으로 위젯 선택메뉴는 기본값으로 4가지를 가집니다. 추가로 사용될 위젯을 등록하려면, 특정 모듈을 설치하고 활성화시키면 아래 4개 이외의 위젯 목록이 나타날 수 있습니다.
2. 추가적인 위젯을 사용해보기 위해서 온라인 갤러리로 이동해서 특정 위젯을 설치하도록 하겠습니다. 모듈 검색 텍스트박스에 “Bing”이라고 입력 후 [검색] 버튼을 클릭합니다.
3. 검색되어지는 결과값 중 [Bing.Maps] 모듈을 찾아서 [설치] 버튼을 눌러 빙맵 모듈을 설치합니다.
4. [Bing.Maps] 모듈이 정상적으로 설치가 되었으면, [OK] 버튼을 눌러 해당 모듈을 활성화 시킵니다.
5. 아래 그림은 Orchard CMS에 [Bing.Maps] 모듈이 설치 후 사용가능하도록 활성화가 완료된 화면입니다.
6. 아래 그림은 새롭게 설치된 모듈 앞에 [new] 표시가 된 상태를 보여줍니다.
7. 새로운 모듈도 설치했으니 이를 사용하는 페이지를 하나 만들어 보도록 하겠습니다. [대시보드]-[Page] 메뉴를 클릭한 후 아래 그림과 같이 제목과 내용을 입력합니다. 이는 사이트 주소 또는 회사 주소 등을 표시하는 용도로 사용하는 페이지를 만들어 보았습니다.
8. 상단에 메인 메뉴로 표시를 할 텍스트로 입력한 후 [지금 발행] 버튼을 눌러 현재 페이지를 하나 추가합니다.
9. 페이지 생성 후의 모습입니다. 참고로 [Address]란 이름의 페이지와 모습이 비슷한 [Address]란 이름의 레이어를 바로 만들고자할 때에는 아래 그림의 첫번째 링크인 [add a widget layer]를 클릭하면 됩니다.
10. 메인 페이지로 이동하여 [찾아 오시는 길] 메뉴를 선택 후의 모습입니다. 여기서 아래 네모박스 영역에 빙맵 지도를 표시하고자 한다면, 좀전에 설치한 빙맵 모듈에서 제공하는 위젯을 사용하면 됩니다.
11. [대시보드]-[위젯] 메뉴를 클릭한 후 [Address] 페이지 전용 레이어를 하나 더 추가하도록 하겠습니다. [새 레이어 추가] 링크를 클릭합니다.
12. [레이어 추가] 화면에서 아래 그림과 같이 2가지 사항을 입력 후 [저장] 버튼을 클릭하여 레이어를 생성합니다.
- 이름 : AddressLayer
- 레이어 룰 : url “~/Address”
13. Address 페이지의 Content 하단 영역인 [AfterContent] 영역에 [추가] 버튼을 클릭합니다.
14. [위젯 선택] 화면으로 돌아오면 4개의 항목만 있었던 위젯에 추가적으로 빙맵 위젯이 하나 등록되어져 있는 것을 알 수 있습니다. 이를 클릭합니다.
15. 빙맵 위젯은 특정 크기에 특정 좌표(위도와 경도)를 입력하여 빙맵 지도를 표시해주는 모듈입니다. 적당한 값을 입력한 후 [저장] 버튼을 클릭합니다.
16. 빙맵 위젯을 등록한 Address 페이지로 이동한 후의 모습입니다.
17. 빙맵 위젯의 [Zoom] 값을 변경하여 좀더 가까이 볼 수 있는 등 기본적인 지도의 기능을 사용할 수 있습니다. 여기서 조금 아쉽다라면, 빙맵은 영문입니다…
마무리
Orchard CMS 솔루션을 제작하는 프로젝트가 진행된 지 얼마되지 않았지만, 알게 모르게 종류별로 상당히 많은 수의 모듈들이 공개가 되었습니다.
갤러리 사이트에는 아직도 제가 사용 안해본 모듈들이 많이 있습니다. 제 강좌에서 다루지 않은 모듈 중 유용한 모듈들이 있으시다면,
OSS 게시판에 팁으로 남겨주시면 저도 유용하게 사용하도록 하겠습니다…
끝.
관련글