[Orchard 강좌] 10. 위젯(Widget) 추가 및 빙맵(BingMap) 모듈 적용하기

이 내용은 ASP.NET MVP로 활동하고 계신 박용준님이 작성하신, 오픈소스 기반 웹사이트 제작 엔진인 Orchard로 처음 웹사이트를 구축 및 개발하기 위한 시리즈 강좌입니다. 많은 도움 되시길 바랍니다.
==================================================================================================

소개

이번 시간에는 위젯(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 게시판에 팁으로 남겨주시면 저도 유용하게 사용하도록 하겠습니다…

끝.

관련글

• 0. Orchard CMS 소개
• 1. Orchard CMS 개발 환경 구축–WebPlatformInstaller 3 다운 및 설치
• 2. Orchard CMS 설치
• 3. 페이지(Pages) 추가하기
• 4. 블로그 모듈 추가 및 아티클 작성하기
• 5. 위젯(Widet)으로 메인에 HTML 조각 삽입하기
• 6. 다국어 처리 : 한글 언어팩 설치
• 7. 미디어(이미지…) 관리
• 8. 레이어(Layer) 만들기
• 9. Windows Live Writer를 사용하여 블로그 아티클 작성하기
• 10. 위젯(Widget) 추가 및 빙맵(BingMap) 모듈 적용하기
• 11. Chapters 모듈 설치 및 적용
• 12. 검색(Search) 기능 구현하기
• 13. Content Localization(컨텐트에 대한 다국어 처리)
• 14. 테마(Theme) 다운로드 및 적용
• 15. 새로운 나만의 테마(Theme) 만들기(자식 테마 만들기)
• 16. 사용자 정의 Content Type 만들기
• 17. 리스트(List)로 Content Type 그룹화
• 18. Designer Tools로 UI의 원하는 부분 변경하기
• 19. Placement.info 파일 이해하기
• 20. 리스트(List)를 위젯(Widget)으로 표현하여 요약 출력하기
• 21. Orchard 사이트 설정 변경
• 22. Orchard.exe 소개 및 사용 데모
• 23. 사용자(Users)와 역할(Roles) 관리
• 24. 초간단 모듈 제작 : HelloWorld 모듈 만들기
• 25. 추가 모듈 다운 및 적용 : FollowMe 모듈
• 26. 최근 트위터(Twitter) 목록 나열하기
• 27. 파일 필드 모듈 적용하기(파일 업로드 및 다운로드)
• 28. Orchard CMS를 원격 서버로 배포
• 29. Orchard CMS를 SQL Server R2에 설치하기
• 30. Orchard CMS 테마 시안 잡기(순수 HTML/CSS 레벨)
• 31. 페이지 추가시 “add a widget layer” 링크를 사용하여 페이지에 특화된 레이어 만들기
• 32. Command-Line Interface 사용하기