소개

이번 강좌에서는 새로운 문서 타입을 생성한 후 해당 문서 타입에 속성(Properties)을 추가하고, 이를 Umbraco 페이지 필드를 사용하여 템플릿에 추가한 후 이러한 문서 타입을 바탕으로 새로운 페이지를 만들어 웹 페이지로 보여주는 일련의 과정을 설명하도록 하겠습니다.

 

따라하기

Step 1: Document Type 만들기

1. [백오피스]-[Settings]-[Document Types]을 열고 새로운 문서 타입을 생성하려면, 문서 타입에 마우스 오른쪽 버튼클릭 후 [Create] 버튼을 클릭합니다. 아래 그림과 같이 [MyBlog]란 이름으로 문서 타입을 생성합니다.

062311_1302_15Docum1.png

 

2. [MyBlog] 문서 타입을 선택 후 [Generic properties] 탭을 선택하면 페이지 필드로 사용될 기본적으로 제공되는 속성이 따로 지정되어져 있지 않습니다.

062311_1302_15Docum2.png

 

3. 새로운 페이지 필드를 생성하기 전에 특정 카테고리로 관리하기 위한 탭을 생성하겠습니다. [MyBlog] 문서 타입에 [Tabs]탭에서 "MyBlogProperties"란 이름으로 아래 그림과 같이 새로운 탭을 하나 생성합니다. 생성 후 반드시 저장 아이콘을 클릭합니다.

062311_1302_15Docum3.png

 

4. [MyBlogProperties] 탭을 생성 후 [Generic properties] 탭을 선택한 후 속성 추가 링크를 클릭하면 아래 그림과 같이 새로운 속성을 추가할 수 있는 입력 화면이 나타납니다. 아래 그림의 [BlogTitle] 속성 추가를 위한 4가지 항목을 입력 또는 선택 후 저장 아이콘을 클릭합니다.

062311_1302_15Docum4.png

 

5. 아래 그림은 [BlogTags] 속성을 입력하는 화면입니다.

062311_1302_15Docum5.png

 

6. 최종적으로 [MyBlog] 문서 타입에 3개의 속성을 아래와 같이 추가합니다.

062311_1302_15Docum6.png

  • BlogTitle, Type : TextString
  • BlogTags, Type : Tags
  • BodyText, Type : Richtext editor

 

Step 2: 템플릿 만들기

1. [Settings]-[템플릿]-[MyBlog] 템플릿을 선택 후 [Umbraco 페이지 필드 삽입] 아이콘을 클릭하여 [필드 선택] 드롭다운리스트를 열어보면, 아래 그림처럼 앞서 문서 타입에서 추가한 3개의 속성이 목록으로 나열됨을 알 수 있습니다. 이처럼, 문서 타입에서의 속성은 Umbraco 페이지 필드를 사용하여 원하는 부분에 해당 데이터를 출력할 수 있습니다.

062311_1302_15Docum7.png

 

2. 3개의 Umbraco 태그를 추가하여 아래와 같은 식으로 blogTitle, bodyText, blogTags 속성이 추가되도록 설정합니다.

062311_1302_15Docum8.png

 

Step 3: 새로운 페이지(Page) 만들기

1. 앞서 만든 문서 타입 유형을 따르는 페이지를 생성합니다. 아래 그림과 같이 [컨텐츠]에 마우스 오른쪽 버튼을 클릭하여 [생성(Create)] 메뉴를 클릭하여 "Blog website"란 이름의 페이지를 "MyBlog" 문서 타입 유형으로 생성합니다.

062311_1302_15Docum9.png

 

2. [MyBlog] 타입으로 문서를 생성하면 아래 그림과 같이 3개의 항목이 입력되는 폼이 나타납니다. 간단히 데이터 입력 후 [저장 및 출판] 아이콘을 클릭합니다.

062311_1302_15Docum10.png

 

3. 새롭게 생성된 [Blog website]의 [속성] 탭을 살펴보면 문서 유형이 [Textpage]가 아닌 [MyBlog]로 선택된 것을 알 수 있고, 템플릿도 [MyBlog]로 선택되어 있습니다. 현재 페이지를 출력하려면, [저장 및 출판] 아이콘 옆에 있는 [미리 보기] 아이콘을 클릭합니다.

062311_1302_15Docum11.png

 

4. 앞서 생성된 3개의 속성을 가지는 문서 타입과 템플릿 그리고 이를 사용한 페이지를 만들어 웹으로 정상적으로 출력됨을 확인할 수 있습니다.

062311_1302_15Docum12.png

 

 

마무리

아~ 이제는 조금 감이 잡히고 있는 듯 합니다.

기존에 생성된 [Textpage] 문서 타입이 아닌 우리가 만든 새로운 문서 타입을 만들어서 적용해 보았습니다. 하지만, 약간 아쉬운 것은 기존 메뉴에 등록된 것이 아닌 새로운 웹 사이트 형태로 하나의 페이지만을 표현해 본 것입니다.

다음 시간에는 이어서 새로운 문서 타입을 적용하는 페이지는 기존 웹 사이트의 하위로 생성하는 방법에 대해서도 고민해 보는 시간을 갖도록 하겠습니다.

 

끝.




관련글



관련 동영상 참고 자료

  1. Umbraco 개발 환경 구축
  2. Umbraco 설치
  3. 사용자 모드와 관리자 모드(백오피스)
  4. 새로운 페이지(Page) 만들기
  5. 한글 언어팩(Languages) 적용하기
  6. 콘텐트 페이지 편집, 삭제, 메뉴 정렬 등 소개
  7. 미디어 파일 관리
  8. 사용자(User) 관리
  9. 스타일 추가 및 변경
  10. 템플릿(Templates)과 마스터페이지(MasterPages)
  11. Umbraco 페이지 필드(태그(Tags))
  12. 문서 타입(Document Types)
  13. 문서 타입(Document Types)에 속성 추가
  14. 부모 문서 타입(Document Types) 사용하기
  15. 문서 타입(Document Types) 내보내기 및 가져오기
  16. 문서 타입(Document Types) 자식 노드 허용
  17. 기본 매크로(Macros) 사용하기
  18. 새로운 매크로(Macro) 만들기
  19. 매크로(Macro)에 파라미터 전달
  20. 사진 갤러리(Gallery) 만들기 1
  21. 사진 갤러리(Gallery) 만들기 2 : XSLT 사용하기
  22. 사진 갤러리(Gallery) 만들기 3 : jQuery 슬라이드 쇼 플러그인 적용
  23. 회원(Members) 관리
  24. 사전(Dictionaries)
  25. 패키지(Packages)
  26. HTML 레벨의 스킨 파일 적용 1
  27. HTML 레벨의 스킨 파일 적용 2 : 상단 메뉴
  28. HTML 레벨의 스킨 파일 적용 3 : 서브 메뉴와 사이트 맵
  29. HTML 레벨의 스킨 파일 적용 4 : 서브 타이틀
  30. 배포 : Umbraco CMS를 원격 서버에서 실행




profile

박용준(redplus at redplus.net)
.NET 개발/강의 프리랜서, MVP, MCT
데브렉(http://www.devlec.com) 전임 강사
닷넷코리아(http://www.dotnetkorea.com) 사이트 운영