XE3 A 부터 Z 까지 (3)컴포넌트 제작

오승훈@akasima

XEHub

목차• TODO list 플러그인 기능 정의• 모듈 컴포넌트 제작• CRUD 제작

• Document 패키지• 상세 설정 페이지• Q&A

https://github.com/akasima/openseminar_todo_list

예제코드

TODO list?

• /settings/menu 에서 메뉴 아이템 추가할 수 있음• 문서 CRUD(create, read, update, delete) 기능 제공

컴포넌트

• Module : 사이트 메뉴 편집에서 추가할 수 있음 , 모듈은 어떤 동작을 구체화 하지않은 기능요소• Theme : 사이트 레이아웃 구성• Skin : 테마의 컨텐츠 영역 구성• UIObject : HTML 세트• DynamicField : 사용자 정의 필드• Widget : 위젯 ( 제작중 )

컴포넌트 종류

ComponentInterface

• http://api.xpressengine.io/master/Xpressengine/Plugin/ComponentInterface.html

• XE3 에서 동작하는 요소로 만들기 위해 따라야하는 인터페이스• 컴포넌트는 패키지에의해 처리되는 규칙을 갖는 요소를 말한다 .

컴포넌트 ID

• 모든 컴포넌트를 구분 짓기위한 아이디• 아이디 작성 방식은 각 컴포넌트 메뉴얼 참고

• 플러그인은 여러개의 컴포넌트로 이루어짐• 플러그인은 배포 단위

• boot(), activate(), install(), uninstall() 등이 있음• 컴포넌트는 기능 요소들이며 어떤 목적을 위해서 동작함

• 모듈 : 메뉴에 추가할 수 있음• 스킨 : 설정을 통해서 출력 모양을 변경할 수 있음

플러그인 - 컴포넌트

• 테마 + 스킨을 포함한 하나의 플러그인을 배포할 수 있음• A 테마 , A 보드 스킨 , A 에드온을 배포할 필요 없음• 여러 기능을 포함한 하나의 플러그인으로 여러 이슈를 처리할 수 있음

XE1 과 다른점

TODO List Module 컴포넌트 제작

Module 컴포넌트• http://api.xpressengine.io/master/Xpressengi

ne/Module/AbstractModule.html

• AbstractModule:isRouteAble() 에 따라 메뉴 생성할 때 사용 여부 결정

AbstractModule (1)

• createMenuForm()

• 메뉴 생성할 때 폼 출력 처리• 메뉴 생성할 때 특별한 처리가 없다면 빈 문자열 반환

• storeMenu()

• 메뉴 생성될 때 호출 됨

AbstractModule (2)

• editMenuForm()

• 메뉴 수정할 때 폼 출력 처리• 메뉴 수정할 때 특별한 처리가 없다면 빈 문자열 반환

• updateMenu()

• 메뉴 생성 , 수정될 때 호출 됨

AbstractModule (3)

• summary()

• 메뉴 삭제할 때 컴포넌트 요약 정보 메시지 출력• 메뉴 삭제할 때 특별한 처리가 없다면 빈 문자열 반환

• deleteMenu()

• 메뉴 삭제될 때 호출 됨

TodoList Module 컴포넌트• src/Modules/TodoList.php 추가

• 추상 메소드 구현• createMenuForm(), updateMenuForm(),

summary() 에 빈 문자열 반환 처리

composer.json 수정• 추가한 스킨이 load 될 수 있도록 component 지정"extra": { "xpressengine": { "title": "Todo list 플러그인 ", "component": { "module/openseminar_todo_list@todoList": { "class": "OpenSeminar\\TodoList\\Modules\\TodoList", "name": "Todo list 모듈 ", "description": "", "screenshot" : [] } } }},

메뉴 생성• 사이트 메뉴 편집에서 메뉴 아이템 추가

• 플러그인이 활성화 되었는지 확인하세요 .

• 추가된 Module 컴포넌트로 메뉴 추가• 추가된 메뉴는 테마에서 출력되지만 클릭하면 오류 발생

• 해당 모듈에서 동작할 인스턴스 라우트를 등록해야함

인스턴스 라우트 등록• src/Modules/TodoList.php

• registerInstanceRoute() 추가 (Code1-1)

• boot() 에 메소드 실행 하도록 처리 (Code1-2)

• 컴포넌트의 메소드가 static 으로 작성되는것에 주의하세요 .

• src/Skins/DefaultSkin.php

• 기본 스킨 추가• views/defaultSkin/index.blade.php 추가

• src/UserController.php 추가

CRUD (create, read, update, delete)

Document 패키지• https://xpressengine.gitbooks.io/xpressengine

-manual/content/ko/service-document.html

• DocumentHandler 를 통해서 사용• Model 을 사용할 때에도

DocumentHandler::getModel() 사용 권장• 설정에 따른 Division, Revision 지원• 인터셉트 할 수 있음

인스턴스 아이디• 메뉴 등록할 때 생성된 아이디

• Module 컴포넌트는 인스턴스 라우트를 등록해서 사용함• 인스턴스 아이디는 문서를 저장할 때 사용됨

• UserController.php

• 인스턴스 아이디를 갖기 위한 코드 추가 (Code2-1)

리스트 보기• /src/UserController.php (Code3-1)

• index() 에 추가• Document 모델을 이용해서 문서 획득

• /views/defaultSkin/index.blade.php (Code3-2)

• $paginate 를 이용해서 리스트 , 페이징 처리

문서 등록 폼• src/Modules/TodoList.php

• registerInstanceRoute() 에 create, store 라우트 추가 (Code4-1)

• /views/defaultSkin/index.blade.php 추가 (Code4-2)

• 리스트 페이지에서 문서 등록폼으로 링크 제공• /src/UserController.php (Code4-3)

• create() 메소드 추가• 로그인 한 회원만 글 작성할 수 있도록 함

• /views/defaultSkin/create.blade.php 추가• 폼 추가 및 에디터 사용• csrf_token

• /src/Skins/DefaultSkin.php

• bootstrap 추가 (Code4-4)

에디터• https://xpressengine.gitbooks.io/xpressengine-manual/content/ko/compo

nent-editor.html

• 에디터 설정을 추가해야 함• 에디터는 인스턴스 단위로 설정 제공• 메뉴 생성할 때 에디터 설정이 추가 될 수 있도록 해야함• 별도의 설정이 없다면 textarea 제공

• src/Modules/TodoList.php 수정• storeMenu() 에 에디터 기본 설정 코드 추가 (Code4-4)

• 기본으로 제공되는 CkEditor 사용• 에디터를 사용하면 글을 등록할 때 에디터에서 기본으로 제공하는 파일 , 태그를 처리할 수 있도록 코드를 추가해야함

문서 등록• /src/UserController.php (Code4-5)

• store() 메소드 추가• validation 처리• XeDocument::add()

• 파일 , 태그 처리• 트랜젝션 처리• redirect() 사용으로 페이지 이동 처리

문서 보기• src/Modules/TodoList.php

• registerInstanceRoute() 에 show 라우트 추가 (Code5-1)

• views/defaultSkin/index.php

• 제목에 문서 보기 링크 (Code5-2)

• /src/UserController.php (Code5-3)

• show() 메소드 추가• views/defaultSkin/show.php 추가

문서 수정 폼• src/Modules/TodoList.php

• registerInstanceRoute() 에 edit, update 라우트 추가 (Code6-1)

• /views/defaultSkin/show.blade.php 추가 (Code6-2)

• 문서 볼 때 수정 버튼 추가• /src/UserController.php (Code6-3)

• update() 메소드 추가• 글 등록한 본인만 수정할 수 있도록 함

• /views/defaultSkin/edit.blade.php 추가

문서 업데이트• /src/UserController.php (Code6-4)

• update() 메소드 추가• XeDocument::put()

• Document 모델을 넘겨줘야 함• 트랜젝션 처리• redirect() 사용으로 페이지 이동 처리

문서 삭제• src/Modules/TodoList.php

• registerInstanceRoute() 에 destroy 라우트 추가 (Code7-1)

• views/defaultSkin/show.blade.php• 삭제 링크 추가 (Code7-2)

• /src/UserController.php (Code7-3)• destroy() 메소드 추가

컴포넌트 상세설정

상세설정• 생성된 메뉴 정보 수정할 때 ‘상세설정’ 버튼을 제공할 수 있음• Module 컴포넌트는 인스턴스에 따라 설정을 제공할 수 있음

라우트 추가 및 버튼 생성• /src/Modules/TodoList.php

• registerSettingsRoute() 추가 (Code8-1)• boot() 에 메소드 실행 하도록 추가 (Code8-2)

• /src/Modules/TodoList.php 에 getInstanceSettingURI 등록 (Code8-3)

• AbstarctModule 에서 제공하는 인페이스• 사이트 메뉴 편집에서 ‘상세 설정’ 버튼 제공됨

설정 사용• 사용자 페이지에 todo list 제목을 설정 할 수 있게 설정 추가• src/SettingsController.php 추가• src/Skins/SettingsSkin.php 추가• views/settingsSkin/

edit.blade.php 추가

기본 설정 사용• /src/

UserController.php

• index() 설정 가져오는 코드 사용 (Code8-4)

• /views/defaultSkin/index.blade.php

• 등록할 설정을 추력하도록 수정(Code8-5)

감사합니다 .Q&A