XE 오픈 세미나(2014 05) - 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 예제
○ 최소길이:

룰셋 XML 예제
○ :최대길이

룰셋 XML 예제
○ 최소길이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

○ $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

○ 내용 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/mys
ql/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 속성
○ 관리자 초기 페이지를 나타내는 속성

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

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

● executeQueryArray()
○ 쿼리 실행 함수
○ 결과는 array로 반환
■ 결과가 없어도 빈 array 반환
○ 쿼리 ID는 모듈명.쿼리ID 형식으로 지정

● 쿼리 파라미터

● tpl/List.html 파일 생성
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

● moduleModel::getSkins()
○ 해당 폴더의 skins 폴더를 조사해 스킨 목록을 반환
● layoutModel::getLayoutList()
○ 레이아웃 목록을 반환

● myboard.admin.controller.php 파일 수정
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

관리자 메뉴에 추가

● conf/module.xml 파일 수정
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 모듈을 참고해보세요
● 모듈 삭제

XE 오픈 세미나(2014 05) - XE 모듈 강의 - 달리기

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à XE 오픈 세미나(2014 05) - XE 모듈 강의 - 달리기

Similaire à XE 오픈 세미나(2014 05) - XE 모듈 강의 - 달리기 (15)

Plus de XpressEngine

Plus de XpressEngine (20)

XE 오픈 세미나(2014 05) - XE 모듈 강의 - 달리기