XE 모듈 개발 - 걸음마부터 날기까지 - 달리기

XE 모듈 개발 걸음마부터 날기까지 - 달리기

5월 XE 오픈 세미나

달리기

XE 모듈 개발걸음마부터 날기까지



소개

신승엽 (난다날아)NHN Entertainment

● SocialXE 개발● XE Core 개발

(2011.7 ~ 2013.6)



이 강의는...

● 걸음마 - 개발환경 구축, XE 설치● 걷기 - XE 모듈 개념, 간단한 모듈 개발● 달리기 - 개발한 모듈 발전 시키기

(룰셋, 에디터, 쿼리, 자체 관리자 페이지)

● 날기 - 고급 주제



룰셋

● XE에서 입력값 검증 방법○ 필터와 룰셋

● 필터: 클라이언트 사이드 검증만 가능● 룰셋: 서버&클라이언트 사이드 체크 가능



룰셋 - 이점

● 보안 향상○ 클라이언트&서버 사이드 검증

● 유연함○ 값에 따라 검증 방법을 다르게 할 수 있는 유연함

● 접근성 향상○ 자바스크립트 불가능 환경에서도 검증 가능



룰셋 - 작동 원리

● 룰셋XML > 자바스크립트 필터: 클라이언트 사이드 검증

● 룰셋 XML > PHP 코드: 서버 사이드 검증



● 서버 사이드 검증은 모듈로 제어가 넘어가기 전에 수행

룰셋 - 작동 원리



룰셋 XML

● 각 모듈 폴더 아래 ruleset 폴더에 위치



룰셋 XML 예제

● <ruleset>: 룰셋 최상위 노드



룰셋 XML 예제

● <cumstomrules>: 커스텀 룰들



룰셋 XML 예제

● <rule>: 커스텀 룰 정의



룰셋 XML 예제

● <rule>의 name: 룰 이름. <field>의 rule 속성에 사용



룰셋 XML 예제

● <rule>의 type: 룰 형식○ regex, enum, expr



룰셋 XML 예제

● <rule>의 test: 규칙



룰셋 XML 예제

● regex 타입○ 정규식 검사



룰셋 XML 예제

● enum 타입○ 주어진 목록 중 하나의 값만 가능○ 기본 구분자는 콤마(,)

■ delim 속성으로 변경 가능



룰셋 XML 예제

● expr 타입○ 산술식 연산○ $$: 필드의 값 의미○ <, >, &는 <, >, &로 사용해야 함

■ XML에서 특별한 의미를 가지는 문자이기 때문



룰셋 XML 예제

● <message>: 해당 룰을 만족하지 않을 때 표시할 메시지 내용○ %s로 필드 이름을 사용할 수 있음



룰셋 XML 예제

● 생략 가능● 기본 메시지: %s의 값이 올바르지 않습니다.



룰셋 XML 예제

● <fields>: 검증을 수행할 필드들



룰셋 XML 예제

● <field>: 각 필드에 대한 정의



룰셋 XML 예제

● <field>의 name: 필드 이름○ <input name=”phone” />○ ?phone=...&other_field=...



룰셋 XML 예제

● <field>의 required: 필수 여부○ %s 값은 필수입니다.



룰셋 XML 예제

● <field>의 rule: 적용할 룰



룰셋 XML 예제

● 미리 정의된 룰이름 의미

email 메일 주소

userid 사용자 아이디 형식

url URL 형식

alpha 영문자

alpha_number 영문자로 시작하는 영문자 및 숫자, 언더스코어

number 정수 숫자



룰셋 XML 예제

● <field>의 length: 길이 규칙○ %s의 글자 수를 맞추어 주세요.○ 최소길이:최대길이



룰셋 XML 예제

● <field>의 length: 길이 규칙○ 최소길이:



룰셋 XML 예제

● <field>의 length: 길이 규칙○ :최대길이



룰셋 XML 예제

● <field>의 length: 길이 규칙○ 최소길이b:최대길이b - byte 단위



룰셋 XML 예제

● <field>의 default: 기본 값○ 필드가 필수가 아닐 경우 값이 없을 때 기본 값을 지정 가능



룰셋 XML 예제

● <field>의 equalto: 특정 필드와 값이 동일한지 검증○ %s이(가) 잘못되었습니다.



룰셋 XML 예제

● <field>의 modifier: 검증 후 결과나 입력 값을 변경할 수 있는 기능○ 현재 사용 가능한 값은 not 뿐○ not: 검사 결과를 반대로 적용



룰셋 XML 예제

● <title>: 메시지에 표시될 필드 이름



룰셋 XML 예제

● <title>: 메시지에 표시될 필드 이름● 생략 가능● 생략할 경우 언어 변수에 name 속성과 동일한 값이 있을 경우 언어 변수 값 사용



룰셋 XML 예제

● <if>: 특정 조건에 따라 field 속성을 변경



룰셋 XML 예제

● <if>의 test: 조건○ 조건에서 사용하는 필드명은 반드시 $를 앞에 붙여야 함



룰셋 XML 예제

● <if>의 attr: 변경할 속성 명



룰셋 XML 예제

● <if>의 value: 변경할 속성 값



나의 게시판 - 글쓰기 룰셋 적용

● ruleset/write.xml 파일 생성

https://gist.github.com/flyskyko/3eeeaea1ffe7acd291bd/737497c3f891d2661eff38aca63fdb26e4946223






● conf/module.xml 수정○ <action>에 ruleset 속성 추가○ 값은 룰셋 XML 파일명

https://gist.github.com/flyskyko/19eebce5aa13e0b71209/eddb79bfb2c1b5cf51a65f2e95dc9b5229acfb8a#file-module-xml-L28






● skins/default/Write.html 수정

https://gist.github.com/flyskyko/e6e0eecf3cd49a10dfcc/198711d3423967fa0931abc749b44bacb2205a07






● skins/default/Write.html 수정○ $XE_VALIDATOR_MESSAGE

■ 룰셋 검증이나 실행 오류 메시지가 담겨 있음○ $XE_VALIDATOR_MESSAGE_TYPE

■ 오류 타입○ $XE_VALIDATOR_ID

■ 한 페이지에 여러 폼이 존재할 경우 구별을 위해 사용

■ <input type=”hidden” name=”xe_validator_id” …>



이런 현상 방지를 위해 xe_validator_id 사용



● 템플릿 핸들러가 <form>에 자동으로 error_return_url이라는 hidden input을 추가○ 템플릿에서 직접 지정할 수도 있음

● 룰셋 검증이나 실행 오류 시 XE는 앞서 살펴본 변수에 값을 세팅한 후 error_return_url로 redirect





● 룰셋 XML 생성● <action>에 ruleset 속성 추가

○ module.xml● 간단한 HTML 마크업 추가



나의 게시판 - 클라이언트 사이드 검증


https://gist.github.com/flyskyko/e6e0eecf3cd49a10dfcc/5362fb55d45ac8c5ed53c3228e084d775426c2a8#file-write-html-L7





나의 게시판 - 클라이언트 사이드 검증

● <form>에 ruleset 속성 추가



나의 게시판 - 에디터 붙이기

● documentItem을 이용● 직접 editor 모듈 사용




● myboard.view.php 수정

https://gist.github.com/flyskyko/20e3243b16a380f2a848/6c5b3a53d47aa9dca0926f2737288ef8b471acdf#file-myboard-view-php-L29







https://gist.github.com/flyskyko/e6e0eecf3cd49a10dfcc/1b6a5164a94b4f60cc70e6934147fab313785a47






● skins/default/Write.html 수정○ 내용 HTML을 담을 input 필요

■ content_key_name■ documentItem을 이용했을 때 기본값은 content

○ 파일 첨부 시 발급되는 고유번호를 담을 input 필요■ primary_key_name■ documentItem을 이용했을 때 기본값은

document_srl




● myboard.controller.php 수정○ 파일 첨부 시 자동 발급되는 document_srl을 처리

https://gist.github.com/flyskyko/e9a8b0d121eaac6da226/18c2ffcf57b8491bc228f79f11867964058140ac#file-myboard-controller-php-L16






● documentItem::getEditor()를 이용하면 손 쉽게 에디터 적용 가능



에디터 들여다 보기

에디터 설정- 각 모듈별

- 문서, 댓글 별

editorModel::getModuleEditor()

editorModel::getEditor()

파일 모듈

Document 모듈

설정

primary_key_name

document_srl

upload_target_srl

content_key_name

content

에디터 마크업

각 모듈별업로드 설정



에디터 들여다 보기

● editorModel::getModuleEditor()○ 각 모듈별 && 문서/댓글 별 설정을 불러와 에디터 마크업 반환

● editorModel::getEditor()○ 에디터 설정을 직접 지정하여 에디터 마크업 반환



에디터 설정

● primary_key_name○ 에디터를 적용할 대상 데이터의 고유번호 필드 이름

■ 문서를 예를 들면 document_srl이 됨○ <input type=”hidden” name=”primary_key_name값”>○ 파일 업로드 시 파일 모듈의 자동 발급된

upload_target_srl 값이 세팅 됨■ 파일과 대상 데이터를 연결시켜주는 역할



에디터 설정

● content_key_name○ 에디터에서 작성된 결과 HTML을 담을 <input> 이름○ <input type=”hidden” name=”content_key_name값”>○ 해당 <input>에 내용을 미리 넣어두면 에디터 시작 시 표시 됨

○ 에디터에서 편집된 내용이 <input>의 값으로 세팅 됨



에디터 설정

● editor_sequence○ 한 페이지에 에디터 여러개를 사용할 경우 구별하기 위하여 사용

○ upload_target_srl이 설정되어 있을 경우 upload_target_srl이 사용 됨

● allow_fileupload○ 파일 업로드 허용 여부



에디터 설정

● content_style○ 문서 스타일 지정

● content_font○ 기본 폰트 지정

● content_font_size○ 기본 폰트 크기 지정



에디터 설정

● enable_autosave○ 자동 저장 사용 여부

● enable_default_component○ 에디터 기본 콤포넌트(글꼴, 크기 등) 사용 여부

● enable_component○ 에디터 확장 콤포넌트(유튜브 동영상 등) 사용 여부



에디터 설정

● disable_html○ HTML 편집 제한 여부

● height○ 에디터 높이

● skin○ 에디터 스킨

● colorset○ 에디터 스킨 컬러셋



에디터 설정

● manual_start○ 자바스크립트에 의한 에디터 초기화 자동 시작 여부



쿼리

● XE에서 쿼리는 XML을 이용하여 추상화 시켜 표현

● 쿼리 XML 덕에 여러 DBMS 지원 가능○ XML 정보를 이용하는 DB 클래스만 작성

● 각 DBMS 만의 기능은 사용 불가○ DB 클래스를 통해 코드 상에서 직접 쿼리 가능



쿼리 XML 예제 - select




● <query>: 최상 위 노드




● <query>의 id: 쿼리 id○ 파일 명과 동일해야 함




● <query>의 select: 쿼리 타입○ select, insert, delete, insert-select




● <table>: 테이블을 나타내는 노드




● <table>의 name: 테이블 이름




● <column>: 컬럼을 나타내는 노드




● <column>의 name: 컬럼 이름




● <condition>: where 절 조건을 나타내는 노드




● <condition>의 operation: 연산자○ equal, more, excess, less, below, like_tail,

like_prefix, like, notlike_tail, notlike_prefix, notlike, in, notin, or, xor, not, notequal, between, null, notnull




● <condition>의 column: 컬럼 이름




● <condition>의 default: 조건의 기본 값○ default 속성이 없는 condition은 var 값이 파라미터에 없으면 쿼리에서 제외 됨




● <condition>의 var: 쿼리 파라미터의 사용할 변수 이름




● <condition>의 pipe: 조건을 이어 붙일 때 사용할 연산자




● <group>: 여러 조건을 ()로 묶을 때 사용




● <navigation>: 쿼리 결과를 페이지에 따라 보여줄 때 사용




● <index>: 정렬 기준을 나타내는 노드● <list_count>: 한 페이지에 나타낼 row 수● <page_count>: 한 페이지에 나타낼 페이지네이션 페이지 개수

● <page>: 페이지



쿼리 XML 예제 - insert




● <column>의 var: 해당 컬럼의 값




● <column>의 notnull: 파라미터에 값이 없으면 에러




● <column>의 filter: 값에 대한 검증을 함



쿼리 XML 예제 - delete



더 많은 쿼리 예제

● XE tests에 더 많은 쿼리 예제가 있습니다○ https://github.com/xpressengine/xe-

core/tree/master/tests/classes/db/db/xml_query/mysql/data

https://github.com/xpressengine/xe-core/tree/master/tests/classes/db/db/xml_query/mysql/data






쿼리 고급 기능

● table join● insert-select● sub query● index hint● click count



모듈 목록 화면 만들기

● conf/module.xml 수정

https://gist.github.com/flyskyko/19eebce5aa13e0b71209/d14311b948a141c15b3c8939b62814e56837a067#file-module-xml-L23






● admin_index 속성○ 관리자 초기 페이지를 나타내는 속성




● admin_index 속성○ 관리자 초기 페이지를 나타내는 속성




● queries/getMyboardList.xml 생성https://gist.github.com/flyskyko/671884bf6d3d194d1d02/65960cb58fbefbc1c5aa8130fd7768aecaa251e2

https://gist.github.com/flyskyko/671884bf6d3d194d1d02/65960cb58fbefbc1c5aa8130fd7768aecaa251e2

https://gist.github.com/flyskyko/671884bf6d3d194d1d02/65960cb58fbefbc1c5aa8130fd7768aecaa251e2






● myboard.admin.view.php 파일 생성https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/e2c945329cb0f7f0b8828589d74dbe82a4189d08

https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/e2c945329cb0f7f0b8828589d74dbe82a4189d08

https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/e2c945329cb0f7f0b8828589d74dbe82a4189d08








● executeQueryArray()○ 쿼리 실행 함수○ 결과는 array로 반환

■ 결과가 없어도 빈 array 반환○ 쿼리 ID는 모듈명.쿼리ID 형식으로 지정




● 쿼리 파라미터




● tpl/List.html 파일 생성https://gist.github.com/flyskyko/ca693faa6413c156d9c3/43d2a9ae9fbbdaf9e5db4054c2dc3857c2ef5a65

https://gist.github.com/flyskyko/ca693faa6413c156d9c3/43d2a9ae9fbbdaf9e5db4054c2dc3857c2ef5a65

https://gist.github.com/flyskyko/ca693faa6413c156d9c3/43d2a9ae9fbbdaf9e5db4054c2dc3857c2ef5a65








모듈 추가(수정) 화면 만들기

● conif/module.xml 파일 수정

https://gist.github.com/flyskyko/19eebce5aa13e0b71209/1c78be8d312247c1b29fc22da9dbbd459654ced5






● myboard.admin.view.php 파일 수정https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/3eb15bbb568b92892cef71c4e8535424185b80aa#file-myboard-admin-view-php-L49

https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/3eb15bbb568b92892cef71c4e8535424185b80aa#file-myboard-admin-view-php-L49

https://gist.github.com/flyskyko/bf01869b2ca20eeb2059/3eb15bbb568b92892cef71c4e8535424185b80aa#file-myboard-admin-view-php-L49






● moduleModel::getSkins()○ 해당 폴더의 skins 폴더를 조사해 스킨 목록을 반환

● layoutModel::getLayoutList()○ 레이아웃 목록을 반환




● myboard.admin.controller.php 파일 수정https://gist.github.com/flyskyko/b85488d4585f9d27585b/cf794ab3aa5f7ed761216467aadbd9e49b64fd74#file-myboard-admin-controller-php-L24

https://gist.github.com/flyskyko/b85488d4585f9d27585b/cf794ab3aa5f7ed761216467aadbd9e49b64fd74#file-myboard-admin-controller-php-L24








● moduleController::insert(update)Module()○ 모듈 생성, 수정 메소드




● tpl/Insert.html 파일 생성https://gist.github.com/flyskyko/9359751990c21239c77a/da4f5de1e548ab1567b8506d95deebc1258c90e6

https://gist.github.com/flyskyko/9359751990c21239c77a/da4f5de1e548ab1567b8506d95deebc1258c90e6

https://gist.github.com/flyskyko/9359751990c21239c77a/da4f5de1e548ab1567b8506d95deebc1258c90e6








관리자 메뉴에 추가




● conf/module.xml 파일 수정https://gist.github.com/flyskyko/19eebce5aa13e0b71209/b196d0ea1e287448e3c811a627fde8f1a1a15f83

https://gist.github.com/flyskyko/19eebce5aa13e0b71209/b196d0ea1e287448e3c811a627fde8f1a1a15f83

https://gist.github.com/flyskyko/19eebce5aa13e0b71209/b196d0ea1e287448e3c811a627fde8f1a1a15f83






● <menu>: 관리자 메뉴를 나타내는 노드● name: <action>에서 사용할 이름● <title>: 화면에 표시될 이름




● <action>의 menu_name○ 해당 액션이 속한 메뉴 명

● <action>의 menu_index○ 해당 메뉴의 초기 액션 표시






정리

● 룰셋○ xml 하나로 클라이언트&서버 사이드 검증

● 에디터○ primary_key_name, content_key_name

● 쿼리○ xml로 추상화○ executeQuery(), executeQueryArray()

● 관리자 페이지○ 모듈의 생성, 수정○ 관리자 메뉴 추가



한번 해보세요

● 관리자 페이지○ 상세 설정 페이지○ 스킨 설정○ 에디터 설정 등○ board 모듈을 참고해보세요

● 모듈 삭제

Technology

XE 모듈 개발 - 걸음마부터 날기까지 - 달리기