RedPlus 개인 블로그

시삽: 레드플러스 님 
게시판 이동:
 제목 : 5. 위젯(Widget)으로 메인에 HTML 조각 삽입하기
글번호: 254
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2011/05/31 오후 7:30:38 (2011/05/31 오후 7:30:38 수정)
조회수: 4129

 

본 강좌는 아래 경로에서 연재되고 있는 강좌입니다.

오픈소스 웹어플리케이션 사용자 Tip과 강좌 – OSSFair(http://www.sqler.com/OSS)

 

소개

웹 사이트는 웹 페이지의 집합으로 이루어집니다. 각각의 하나의 웹 페이지는 HTML의 조각들의 집합으로 이루어집니다. Orchard에서는 이와 같이 앞서 살펴본 Page와 같이 특정 영역(Zone)에 단위 HTML 조각을 입력할 수 있습니다. 이때 이 단위 조각의 HTML을 Orchard에서는 위젯(Widgets)으로 표현합니다.

 

레이어(Layer), 존(Zone) 그리고 위젯(Widget)

Orchard CMS는 하나의 페이지(Pages) 내에 레이어와 존과 위젯으로 이루어져 있습니다. 이러한 페이지가 모여서 하나의 사이트를 이룹니다.

  • 레이어 : 레이어는 하나의 페이지 전체에 대한 레이아웃을 나타냅니다. 이는 기본적으로 스킨(Skin)에 영향을 많이 받습니다.
  • 존 : 존은 하나의 영역입니다. Header 영역, Footer 영역 식으로 어떠한 콘텐츠(Widgets)가 표현될 위치입니다.
  • 위젯 : 위젯은 특정한 레이어의 특정 존에 들어갈 HTML 조각을 나타냅니다. 실제로 중요한 콘텐츠를 담고 있습니다.

 

따라하기

1. Orchard CMS를 실행 후, 최고 관리자 권한으로 대시보드로 로그인한 후 왼쪽 메뉴를 보면 [Widgets] 메뉴를 볼 수 있습니다. Widgets 메뉴를 클릭하면 아래 그림과 같이 어찌보면 복잡해 보일 수 있는 Layer와 Zone에 대한 설정 화면이 나타납니다.

image

 

2. Widgets 등록 화면을 보면, 첫번째로 Layer를 선택해야합니다. 기본적으로 제공하고 있는 레이어의 종류는 아래 그림과 같습니다.

image

 

레이어의 종류

  • Default : 모든 페이지에 기본적으로 적용되는 레이아웃 구조입니다.
  • Authenticated : 인증된 사용자에게만 특별한 구조로 보여줄 때 사용합니다.
  • Anomymous : 인증되지 않은 사용자에게만 보여지는 레이아웃을 만들 때 사용합니다.
  • Disiabled : 비활성화된 페이지를 보여줄 때 사용합니다.
  • TheHomepage : 메인 페이지인 홈페이지에서만 보여줄 레이아웃을 지정합니다.

 

3. Widget을 등록하기전에 선택해야하는 2가지인 레이어와 영역(Zone)이 있는데, 레이어에 따라서 표시되는 Zone이 조금씩 다를 수 있습니다. 각각의 레이어가 제공하는 Zone은 그 이름만 봐서도 충분히 이해가 가기 쉽게 만들어져 있고, 오른쪽에 샘플 이미지를 두어서 어느 Zone이 어디부분에 위치하는지 쉽게 알 수도 있도록 Orchard 테마(Themes)가 만들어져 있습니다. 아래 그림처럼, 메인 홈페이지(TheHomepage)의 Featured Zone(메인 콘텐츠 바로 위… 아래 그림의 오른쪽 하단의 Yellow 영역…)에 특정 HTML 코드를 삽입하고자할 때에는 Featured Zone 옆에 있는 [Add] 버튼을 클릭합니다.

image

 

4. Widget 선택 화면에서는 Orchard 기본 위젯인 4가지의 위젯이 제공됩니다. 그중에서 단연코 가장 많이 사용되는 위젯은 HTML 코드 조각을 삽입할 수 있는 [Html Widget]입니다. 이를 사용하여 내가 원하는 페이지의 원하는 레이어에 원하는 영역에 원하는 HTML을 삽입할수 있는 것입니다.

image

 

5. 앞서 [Html Widget]을 선택하면 [Add Widget] 메뉴가 나타납니다. 위젯을 등록할 위치 및 내용(HTML 조각)을 입력하는 화면이 나타납니다.

image

위젯 등록의 기본은 이렇습니다.

Orchard CMS의 하나의 페이지(Pages)에 사용되는 레이아웃(Layer)의 특정 영역(Zone)에 위젯(Widget)으로 HTML을 삽입하면 해당 위치에 필요한 HTML이 출판되는 형태입니다. Title 입력시에는 제목과 내용(HTML)이 함께 표시됩니다.

DotNetNuke와 같은 CMS에서는 위젯의 다른 표현 방법으로 컨테이너(Container)내의 HTML 모듈(Module)이라고도 표현하기도 합니다.

 

6. [Html Widget] 입력시 [Body] 항목에는 위지윅 에디터를 사용하여 아래와 같이 이미지를 첨부할 수 있는 메뉴 등도 제공합니다.

image

 

7. 이미지 첨부 메뉴를 선택시 웹 상의 이미지라던가 따로 로컬 컴퓨터에 있는 이미지를 Orchard CMS로 업로드 한 후 삽입하는 방법 중 하나를 사용할 수 있습니다.

image

위 그림은 이미지 추가 메뉴의 [Browse Media] 탭에서 이미지 관리 폴더를 원하는 이름으로 하나 만들고 이곳에 [찾아보기] 버튼을 눌러서 로컬 컴퓨터의 이미지를 업로드하는 모습을 보여드립니다. 업로드 후 [Insert] 버튼을 클릭하면 이미지가 등록됩니다.

 

8. 이미지 업로드 후 [Insert] 버튼을 눌러 이미지를 [Body] 영역에 포함한 모습입니다. 기타 추가적인 다른 내용을 입력 후 [Save] 버튼을 클릭하면, [Html Widget]이 정상적으로 저장 후 웹 페이지에 출력됩니다. 참고로, 아래 그림은 제가 과수원에서 경운기를 끌고 있는 모습을 조카가 찍어준 연출(?) 사진입니다. Orchard가 과수원이라는 의미로 찍어보았습니다…

image

 

9. [Html Widget]이 추가된 후 Widgets 메뉴의 레이어(Layer)를 살펴보면 아래 그림과 같이 [Html Widget]이 Featured 영역(Zone)에 추가된 것을 알 수 있습니다. 위젯 등록 후 필요가 없거나 할 경우에는 [Remove] 링크 버튼을 클릭하여 삭제할 수도 있습니다.

image

또한, 하나의 영역에는 한개 이상의 서로 다른 위젯을 맘껏 등록할 수 있고 이에 대한 순서를 변경할 수도 있습니다. 보여지는 순서를 변경하고할 때에는 위 그림의 등록된 [Html Widget]의 왼쪽 부분에 보이는 위로/아래로(▲/▼) 화살표 링크를 클릭하면 됩니다.

 

10. 모든 위젯 등록절차를 마친 후 메인페이지로 돌아왔을 때의 모습입니다. 메인 페이지에 제가 입력한 [Html Widget]이 정상적으로 출력됨을 알 수 있습니다. 이처럼, Orchard와 같은 CMS는 HTML 소스를 건드리지 않고, 웹에서 모든 콘텐츠를 동적으로 원하는 위치에 삽입하는 방법을 사용할 수 있습니다.

image

 

image

 

마무리

이번 시간에 살펴본 위젯 기능은 Orchard에서 페이지(Page)와 함께 제일 많이 사용하는 기능 중 하나입니다. 그도 그럴수밖에 없는 것은 어차피 웹 페이지는 하나의 페이지(URL을 포함한…)와 그 안에 들어가는 콘텐츠(HTML 조각들…)로 이루어져 있습니다. 이러한 내용을 담당하고 있는 페이지와 위젯을 자유자재로 사용한다면, 웹 기반 CMS에 대한 내용의 반을 이해한다고 보셔도 좋습니다.

제가 제시하고 보여드리는 부분이외에 본인들이 생각하는 페이지와 내용이 있다면, 현재 연습중인 소스에 반영을 해보시기 바랍니다.

이번 강좌는 여기까지 진행하도록 하겠습니다.

 

끝.

 

관련글

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 7. 미디어(이미지…) 관리 - Administrator 2011-05-31 4347
현재글 5. 위젯(Widget)으로 메인에 HTML 조각 삽입하기 - Administrator 2011-05-31 4129
다음글 4. 블로그 모듈 추가 및 아티클 작성하기 - Administrator 2011-05-31 3962
관련 페이지 리스트
numtitlenamedateview
388 C 언어에서 값 전달과 참조 전달(Call By Value and Call By Re... Administrator 2023-03-09 3570
387 병합 알고리즘 순서도 2022-10-22 5111
386 C 언어 강의: scanf를 엔터키를 기준으로 여러 행으로 값을 입력 받기 Administrator 2022-01-09 4410
385 C 언어: scanf 사용해서 표준 입력인 콘솔로부터 나이를 정수로 입력 받아 출력 Administrator 2022-01-07 3220
384 Java 코드 샘플 - Function 인터페이스로 람다 식 만들기 Administrator 2022-01-04 3119
383 C# 코드 샘플 - 널 조건부 연산자 사용하기 Administrator 2022-01-02 3156
382 C# 코드 샘플 - 널 병합 연산자와 default 키워드 Administrator 2022-01-02 3070
381 C# 코드 샘플 - 널 병합 연산자로 문자열 변수의 NULL 값 확인하기 Administrator 2022-01-02 2981
380 C# 강의 - 14세 미만 체크 메서드 구현 Administrator 2022-01-01 3035
379 C 언어 천 단위 콤마 찍기 thousands_separator.c Administrator 2021-12-30 4170
378 for 문 순서도 - for 문(for loop) 순서도(flowchart) Administrator 2021-12-28 6880
377 C 언어 코드 샘플 - 전처리기 - 조건부 컴파일 Administrator 2021-12-27 3058
376 C 언어 코드 샘플 - 전처리기 - 매크로 함수 Administrator 2021-12-27 3030
375 http-server 설치하기 - 로컬 루프백 주소로 웹페이지 실행 2021-12-27 3029
374 C 언어 코드 샘플 - N명의 학생의 점수를 입력받아 1차원 배열에 저장 후 총점 구... Administrator 2021-12-27 3085
373 Java 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 2960
372 C 언어 코드 샘플 - 두 수의 합을 구하는 함수 Administrator 2021-12-26 3004
371 C# 교과서 강좌 - LINQ - Select 확장 메서드에 익명 형식 사용하기 Administrator 2021-12-26 3122
370 C# 교과서 강의 - LINQ - Select 확장 메서드를 사용하여 새로운 형태로 ... Administrator 2021-12-26 3037
369 C 언어 코드 샘플 - static-shared - 정적(공유) 변수 사용하기 Administrator 2021-12-26 3053
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home