XE3 A 부터 Z 까지 (1)XE3 구조와 간단한 페이지 제작

오승훈@akasima

XEHub

목차• XE3 알기• 개발 팁• 플러그인 만들기• static 페이지 만들기• 간단한 페이지 메뉴 연결• 자료실 사용• Q&A

XE3 알기

참고 문서들• https://xpressengine.gitbooks.io/xpressengine

-manual/content/ko

• http://api.xpressengine.io/master/index.html

• http://xpressengine.github.io/laravel-korean-docs/

인스톨

터미널 인스톨 웹 인스톨

동영상 : XE3 개발환경 만들기, FTP & 웹 인스톨러로 XE3 설치

PHP 5.5.9

MariaDB or MySQL 5.1

InnoDB

설치된 XE3

플러그인 alice 에서 제공되는 alice 테마

인스톨 할 때 생성된 기본 메뉴의 메뉴 아이템홈 (page 모듈 )게시판 (board 모듈 )

관리자 > 사이트 메뉴 편집

메뉴 아이템 추가메인 메뉴 수정

관리자 > 사이트 설정

관리자 > 테마 지정• 사이트 메뉴 편집 (/settings/menu) > 메인 메뉴 수정

• 메뉴로 출력되는 페이지의 테마 설정• 사이트 설정 (/settings/setting)

• 회원 페이지 , 에러 페이지 등 메뉴와 관계없이 출력되는 페이지에서 사용될 테마 설정

관리자 > 플러그인 목록

관리자 > 회원 확장 필드

실습

개발 팁

XE3 구조 및 디버깅• XE3 구조

• https://xpressengine.gitbooks.io/xpressengine-manual/content/ko/structure.html

• 디버깅• https://xpressengine.gitbooks.io/xpressengi

ne-manual/content/ko/debugging.html

dd(), dump()

• 변수 출력• object 구조를 확인하기 쉽게 출력

error trace

• /storage/logs/laravel.log

• 에러 로그는 여기에서 볼 수 있음• /config/production/app.php

• `debug` => true

• 에러를 웹 페이지에서 확인 할 수 있음

compile file error

• View(blade) 파일에서 오류가 발생한 경우 • /storage/framework/views 에 파일 확인• compile 된 파일을 확인한 후 원본 파일 수정

debugbar

• /config/production/app.php 에 provider, aliases 추가

$baseConfig = include(__DIR__.'/../app.php');

return [ …

   'providers' => array_merge(      $baseConfig['providers'],      [Barryvdh\Debugbar\ServiceProvider::class]  ),  'aliases' => array_merge(      $baseConfig['aliases'],      ['Debugbar' => Barryvdh\Debugbar\Facade::class]  )];

debugbar

설정 변경 (Laravel Config)

설정 구조• https://xpressengine.gitbooks.io/

xpressengine-manual/content/ko/configurations.html

• 기본 설정 파일• /config/*php

• 커스텀 설정 파일• /config/production/*php

설정 변경• config/production/*php 로 파일을 만들어서 설정을 수정할 수 있음• XE3 코어는 config/*php 와

config/production/*php 두개 파일을 합쳐서 사용• config/*php 파일은 코어 파일이며 임의로 수정하면 안됩니다 .

ex) 메일 설정 변경• 상황 1) 메일 발송 디버깅을 위해 파일로 변경려고 함• 처리 1) config/production/mail.php 수정

<?php return [‘driver’ => ‘log’,…]];

플러그인 만들기

명령어 사용• php artisan make:plugin <name>

<namespace> <title>

• name : 플러그인 이름 , 플러그인 디렉토리 이름 , XE3 자료실에서 중복 될 수 없음

• namespace : 작성하는 plugin 의 namcespace, 다른 플러그인들과 class 이름 중복이나 함수 이름이 중복되는 문제 방지

• title : 플러그인 목록에서 보여질 플러그인 이름

artisan command

• http://xpressengine.github.io/laravel-korean-docs/docs/5.0/artisan/

• php artisan list

• 사용할 수 있는 command 리스트• php artisan help cache:clear

• command 의 도움말

다른 사람이 만들 플러그인 가져오기• 다른 사람이 만든 플러그인을 Git 또는 FTP 로 가져와 사용할 수 있습니다 .

• plugins 디렉토리에 플러그인을 Git clone 하거나 FTP 로 업로드 합니다 .

• composer install

• composer install 해야 plugin 이 동작 가능합니다 .

실습

플러그인 만들기

artisna make:plugin

• php artisan make:plugin my_plugin “MyNameSpace” “ 나의 플러그인”

Git

• plugins 디렉토리 이동• git clone

https://github.com/akasima/openseminar_myplugin1.git

• cd openseminar_myplugin1

• composer install

FTP

• https://github.com/openseminar_myplugin_ftp 저장소에서 zip 다운로드

• FTP 로 업로드• 터미널 접속 , openseminar_myplugin_ftp 로 이동• composer install

플러그인 구조

디렉토리 구조• assets : js, css, image 등 웹에서 사용하는 자원• src : 코어에서 실행 할 파일• vendor : composer install 할 때 생성되는 디렉토리• views : blade 템플릿 파일• composer.json : 플러그인 설치 정보 및 의존성 자료 정의• plugin.php : XE3 에서 실행 시킴

composer.json

• extra : 플러그인의 컴포넌트 정보• require : 의존성 자료• PSR—4 : autoload 될 디렉토리 위치

pluing.php

• AbstractPlugin 추상 클래스 : http://api.xpressengine.io/master/Xpressengine/Plugin/AbstractPlugin.html

• boot() 메소드 보기• $this->route();

• http://mydomain/plugins/my_plugin

• 만들어진 플러그인이 제공하는 url 로 접속해서 페이지가 출력됩니다 .

Laravel route

• http://xpressengine.github.io/laravel-korean-docs/docs/5.0/routing/

• XE3 routing• https://xpressengine.io/docs/3.0/Routing• fixed, settings, instance

• XE3 Core 에서 설정한 routing 은 app/Http/routes.php 참고• route(‘asName’) : 기본적인 라이팅으로 설정 된 주소 반환• instanceRoute(‘asName’) : 인스턴스 라우팅으로 설정된 주소 반환

실습https://github.com/akasima/openseminar_myplugin1주석 Code1

static 페이지 만들기

Request

• http://xpressengine.github.io/laravel-korean-docs/docs/5.0/requests/

• XE3 에서 Xpressengine\Http\Request 사용• 모바일 유무 체크• Purifying 되지 않은 원본 요청 파라메터에 접근하는 기능

Presenter

• View, Presenter 사용할 때 결과 확인 (Code1-1)

• Presenter 를 사용해야 XE3 가 제공하는 테마등 여러 요소를 사용할 수 있다• https://xpressengine.gitbooks.io/xpressengine

-manual/content/ko/presenter.html

응답 html 구성resources/views/common/base.blade.php<html><head><body>

Theme메뉴 출력SkinPresenter 에서 지정한 blade

Frontend

• js, css 자원 등을 효율적으로 관리 (Code1-2)

• /resources/views/common/base.blade.php

• https://xpressengine.gitbooks.io/xpressengine-manual/content/ko/service-frontend.html

라우트 추가• plugin.php

• plugin 에 route 추가 (Code2)

• 첫번째 세그먼트는 사용하지 않는게 좋음• 첫번째 세그먼트를 사용한 경우 xe.php routing 에 추가

Direct Link

Direct Link 로 메뉴에서 연결• Direct Link 에서 url 을 연결해서 메뉴 영역에 페이지를 연결 시킬 수 있습니다 .

• 메뉴 아이템 추가에서 Direct Link 선택• Item Url 에 앞에서 만든 route url 입력

실습

External Page( 외부 페이지 )

파일 추가• openseminar_myplugin1/externalPage.php 추가• 출력 내용 작성• 파사드 , 헬퍼를 이용해 XE3 를 사용할 수 있습니다 .

External page

• 임의 파일을 추가하고 그 파일을 메뉴에 연결 할 수 있습니다 .

• 플러그인 관리 페이지에서 플러그인을 켭니다 .

• 이 플러그인은 기본으로 배포 되지만 플러그인이 꺼져 있습니다 .

메뉴 생성

/plugins/openseminar_myplugin1/externalPage.php

자료실 사용

자료실• 플러그인을 만들고 업로드해서 다른 사용자와 공유할 수 있습니다 .

• https://xpressengine.io/plugins

• 업로드된 자료는 관리자 검토 후 공개 됩니다 .

자료실 업로드• 자료를 업로드 하려면 zip 으로 압축해야 합니다 .

• 제작된 플러그인 안에서 파일들을 압축해야 합니다 .

자료실 업로드1. 플러그인 등록 클릭

2. Zip 파일 선택 후 업로드 클릭

내 자료 목록1. 필터 클릭

2. 내 플러그인 클릭

자료 게시 요청1. 관리 클릭

2. 게시요청 클릭

실습

플러그인 다운로드 및 삭제

명령어 사용• 자료실의 플러그인을 명령어를 통해 설치 , 업데이트 , 삭제 할 수 있습니다 .

• 설치• php artisan plugin:install <name>

• 업데이트• php artisan plugin:update <name>

• 삭제• php artisan plugin:uninstall <name>

감사합니다 .Q&A