Xe3 a부터 z까지(2) 포인트 적립 플러그인 제작

XE3 A부터 Z까지 (2)
포인트 적립 플러그인 제작
1
오승훈
@akasima
XEHub

목차
• 포인트 적립 플러그인 기능 정의
• 포인트 적립
• 포인트 관리페이지 만들기
• 플러그인 개선 (ORM, Skin, Config)
• 다국어
• Q&A
2

https://github.com/akasima/openseminar_point
예제코드
3

어떤걸 만들까?
• 적립된 포인트 로그를 관리자에서 확인할 수 있어야
함
• 게시판 플러그인에 게시물을 작성하면 포인트 적립
• 게시판에 댓글 작성하면 포인트 적립
4

어떤게 필요할까?
• 적립된 포인트 로그를 관리자에서 확인할 수 있어야
함
• points, point_logs 데이터 베이스 테이블
• 게시판 플러그인에 게시물을 작성하면 포인트 적립
• 인터셉트
• 게시판에 댓글 작성하면 포인트 적립
• 인터셉트
5

데이터 베이스 테이블 만들기
6

Scheme
• http://xpressengine.github.io/laravel-korean-
docs/docs/5.0/schema/
• XE3 에서 컬럼 이름에 언더스코어(_) 를 사용하지 않
았습니다.
• created_at, updated_at 같이 Model 에서 예약어
처럼 사용되는 컬럼 이름을 createdAt, updatedAt
으로 사용합니다.
7

테이블 생성 코드 추가
• plugin.php 수정
• createTables() 메소드 추가 (Code1-1)
• install()에서 createTables() 실행 추가 (Code1-2)
• checkUpdated() 테이블이 있는지 체크하는 코드
추가 (Code1-3)
• update()에 createTables() 실행 추가 (Code1-4)
8

플러그인 설치
• 플러그인 리스트에서 활성화
• 처음 활성화할 때 플러그인 install() 동작
• 관리자에서 설치에 대한 UI를 별도로 제공하지 않
음
• 플러그인 처음 활성화 할 때 install(), update() 코
드가 모두 동작됨
9

게시판 인터셉트 추가
10

인터셉트
• https://xpressengine.gitbooks.io/xpressengine-
manual/content/ko/service-interception.html
• https://xpressengine.io/plugin/xe_aoplist
• XE1 의 trigger, 워드프레이스의 event, Laravel 의
event
• XE3의 많은 class 들이 interception proxy 로 만들어
져 사용되고 있음
• /storage/app/interception 참고
11

• app(‘xe.interception’)->proxy(Handler::class);
Handler proxy
인터셉션 proxy class
12
Handlercall
inter-
cept
inter-
cept
result

어디를 가로챌까?
• UserController.php store() 에 글 등록 코드 확인
• Handler::add() 로 글 등록하는것 확인
• board/plugin.php 확인
• bindClasses() 메소드에서 인터셉션 프록시로 처리
된 class 확인
• Handler proxy 로 처리되어 있음
13

게시판 인터셉트 생성(Code2-1)
• BoardHandler::class . '@add',
• static::getId() . '::board.add',
• function ($addFunc, array $args, UserInterface
$user, ConfigEntity $config) {
• $board = $addFunc($args, $user, $config);
14

포인트 적립 처리(Code2-2)
docs/docs/5.0/queries/
manual/content/ko/service-database.html
• XE3 에서는 XeDB 파사드를 사용합니다.
• XeDB 파사드는 DB 파사드와 동일하게 동작합니
다.
15

게시판 인터셉트 등록(Code2-3)
• 플러그인 boot() 할 때 인터셉트 등록 메소드 추가
• boot() 는 플러그인이 활성화된 상태에서만 동작됨
16

해야할 것
• 관리페이지에 메뉴 만들어서 포인트 로그 확인할 수
있도록 함
• 컨텐츠 > point 로그 메뉴 생성
• src/Controller.php 을 추가하고 플러그인 boot() 할
때 라우트 등록 해서 연결
• 관리페이지 메뉴에 추가하고 라우트 연결
18

Route, Controller
• 메뉴에 연결하기 위해 request 를
docs/docs/5.0/routing
docs/docs/5.0/controllers
manual/content/ko/controllers.html
19

관리페이지 메뉴 추가
• src/Controller.php 추가
• index() 메소드 추가
• registerSettingsMenu() 생성 (Code3-1)
• registerSettingsRoute() 생성 (Code3-2)
• boot() 에서 실행될 수 있도록 코드 추가 (Code3-3)
manual/content/ko/plugin-settings.html
20

Blade, Pagination
manual/content/ko/blade.html
docs/docs/5.0/pagination
21

포인트 로그 확인
• src/Controller.php
• point_logs 테이블에서 데이터
가져와서 pagination 처리 및
검색 처리(Code3-4)
• http://xpressengine.github.io/l
aravel-korean-
docs/docs/5.0/requests
• XePresenter 로 반환
• blade 파일 경로 설정
• views/index.blade.php 추가
22

ORM
docs/docs/5.0/eloquent
• Database/Eloquent/DynamicModel.php
• 기능을 확장하기 위해 XE3에서는 DynamicModel 사
용
• src/Models/Point.php, src/Models/PointLog.php 추가
• plugin.php 인터셉트 코드 개선 (Code4-1, Code4-2)
• Code2-1 는 주석으로 막아주세요.
24

Skin 생성
manual/content/ko/component-skin.html
• XE3 에서 content 출력은 스킨을 통해서 하는걸 원칙으
로 하고 있습니다
• 스킨을 사용해야 다른 플러그인을 통해서 출력을 바
꿀 수있습니다.
• src/Skin.php 추가
• views/skin/index.blade.php 추가
26

composer.json 수정
• 추가한 스킨이 load 될 수 있도록 component 지정
27
"extra": {
"xpressengine": {
"title": "오픈세미나 포인트 플러그인",
"component": {
"openseminar_point/skin/board@default": {
"class": "OpenSeminarPointSkin",
"name": "포인트 플러그인 스킨",
"description": "",
"screenshot" : []
}
}
}
},

Skin 사용
• Controller.php 에 Skin 사용하도록 설정 (Code5-1)
• __construt() 추가
• XePresenter::setSkinTargetId() 추가
• 스킨 사용하도록 index() 수정 (Code5-2)
28

플러그인 개선-지급 포인트 설정
29

지급 포인트 설정 추가
• XE3 config 사용해서 database
에 설정 저장
• 인터셉트에 설정을 사용하도록
코드 수정
• 관리페이지에 설정기능 추가
30

XE3 config
manual/content/ko/service-config.html
• XeConfig 파사드 사용
• registerPointConfig() 추가 (Code6-1)
• install()에 registerPointConfig() 실행 (Code6-2)
• update(), checkUpdated() 처리 (Code6-3, Code6-4)
• 인터셉트에서 설정 사용하도록 수정 (Code6-5, Code6-6)
31

설정 수정 처리
• plugin.php
• registerSettingsRoute() 에 댓글 등록 라우트 추가
(Code6-7)
• controller.php
• Controller::update() 메소드 추가 (Code6-8)
• Controller::index() 에 리턴 변경 (Code6-9)
• views/skin/index2.blade.php 참고
32

Translation
• langs/lang.php 추가
• skin/index3.blade.php 에서 사용할 다국어 추가
• 다국어 적용
• php artisan translation:import <plugin name>
• Controller.php
• Controller::index() 에서 views/skin/index3.blade.php 를 사용하도록 수정
(Code7-1)
• skin/index3.blade.php 에 다국어 사용 처리
• xe_trans(‘<nameSpace>::<itemName>’);
34

다국어 적용
• xe_trans(‘<nameSpace>::<itemName>’);
• nameSpace
• 코어 다국어 : xe
• 플러그인 다국어 : 플러그인 이름
• 없는 itemName 인 경우 itemName 을 그대로 출력
• itemName 은 의미 전달이 가능한 수준으로 작성하길 권장함
• /resources/lang/common.php
• 코어 다국어 파일
35

실습
rule, js 추가 및 frontend 다국어
36

Validation 처리
docs/docs/5.0/validation
• Controller.php
• validation rule 추가 (Code8-1)
• update() 할 때 rule 사용 (Code8-2)
• 오류 발생할 경우
/resources/views/common/base.blade.php 에서 인클
루드 된 /resources/views/common/alert.blade.php 에
서 경고 메시지 처리
37

Frontend rule
manual/content/ko/service-frontend.html
• Controller.php (Code8-3)
• Controller::index() views/skin/index4.blade.php 를 사용하도록 수정
• XeFrontend::rule 추가
• skin/index4.blade.php 참고
• 등록 form 에 `data-rule=“config"` 추가
• 등록 form 에 `data-rule-alert-type=“toast”` 추가하면 토스트 팝업 사
용 가능
38

Frontend javascript load
• assets/test.js 파일 추가
• index4.blade.php (Code8-4)
• XeFrontend::js(‘plugins/<pluginName>/assets/test
.js’)->load()
39

Frontend 다국어 사용
• skin/index4.blade.php (Code8-5)
• javascript 에서 사용할 다국어를 미리 설정
• XeFrontend::translation([‘nameSpace::itemName’
, …])
• assets/test.js 수정 (Code8-6)
• javascript
XE.Lang.trans('<nameSpace>::<itemName>')
40

Xe3 a부터 z까지(2) 포인트 적립 플러그인 제작

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Xe3 a부터 z까지(2) 포인트 적립 플러그인 제작

Similar to Xe3 a부터 z까지(2) 포인트 적립 플러그인 제작 (20)

Xe3 a부터 z까지(2) 포인트 적립 플러그인 제작