X 개발자 문서

요약

X 와 G5

저작권

TODO LIST

1차 버젼 종료 및 배포 파일 공개

2차 버젼 작업 내용

샘플 사이트

문서

설치

배포 파일

직접 패치

사용 안내

개발환경

개발 환경 만들기

개발에 필요한 가짜 데이터 입력

업데이트 설정 및 업데이트 개발 환경 만들기

미리 선언된 상수 x/etc/constant.php

사용자 언어 - L

라이프 사이클 : Life Cycle

초기화 및 코드 흐름 - index.php

X 빌더 폴더 및 파일 구조

x/etc/config.php

코딩 가이드 라인

meta_get(), meta_set()

최상위 도메인 추가 : $_TLD_1, $_TLD_2

관리자 판별 : admin()

주의 : G5_URL 을 사용하지 말고 g::url() 을 사용 할 것.

주의 : get_list_thumbnail() 을 사용하지 말고 x::thumbnail() 을 사용 할 것.

How to create a start script ( as standalone )

How to create a standalone ( single script ) on X

A Standalone Web Script on X

Unit Test

How to Database Query

To get multiple rows

To get one row

jQuery 포함하기

테마를 select 박스로 표시하기

방문자 통계 표시

기본 HTML 헤더 출력. 레이아웃 출력 없이.

테마 만들기

샘플 테마 다운로드

테마 폴더 생성

설정파일 config.xml

설정 변수

미리보기 이미지

init.php 파일 생성

마리보기 preview.jpg 파일 생성

head.php 와 tail.php 그리고 index.php 생성

img, css 그리고 javascript 폴더 생성

menu.php 와 sidebar.php 만들기

사이트에 적용하기

메뉴 설정 및 출력하기

메뉴 출력 루틴

기본 메뉴

메뉴 URL

URL_HOME

게시판 테이블(bo_table)

추가 메뉴 설정 및 출력하기

추가 메뉴 설정

추가 메뉴 출력 코드

사이드 바 출력하기

완성형 질문

위젯 작성하기

폴더구성

반응형

작성 규칙

config.php

제목 설정

config.xml

위젯 카테고리

위젯의 사용

git 속성

CSS 와 Javascript 포함하기

기타

위젯 파일 업로드

위젯 가상 선택자

위젯 캡슐화

위젯 배포하기

공통 config.xml 설정 정보

필수 정보

id

type

version

주의 : config.xml 을 변경하고 서버에 등록시

페이지 추가하기

스킨 만들기

member skin

스킨 업데이트

모듈 만들기

배포 파일 만들기

패치

참고

테마, 위젯, 모듈 배포하기

config.xml

preview 사진

훅 : HOOK

테마에서 훅 지정으로 프로그램의 흐름을 제어하기

시작과 종료 Hook : x/etc/hook/xxxxx.begin.php, x/etc/hook/xxxxx.end.php

훅리스트 : HOOK LIST

스크립트 재작성 : Rewrite Script

방화벽

언어 글로벌 설정 ( 다국어 )

게시판

게시 글 통합 테이블 x_post_data

글 입력

사이트

G5 의 HTTP 값 인코딩

쪽지 : memo

모듈

폴더 및 파일 구성

admin_menu.php

site_menu.php

모듈 스크립트 실행 순서

init.php

주도메인 BASEDOMIN

도메인

도메인 치환 참고

도메인 포워딩 : Domain Fowarding

사이트 생성

게시판 임시 데이터 집어 넣기

레이어 팝업 창

기타

외부 소스

버젼 관리 및 업데이트

업데이트 알림

클라이언트 측 업데이트 알림 코딩 순서

서버 측 업데이트 알림 순서

업데이트 알림

간편 설치 및 업데이트

프로그램 개발

github.com 에 등록

github.com 프로젝트의 URL 을 X 사이트에 등록

설치 테스트

에러, 트러블 슈팅

기본 함수 에러

IE 에서 동작 문제

요약


본 문서는 익스텐디드 (eXtended, 이하 X) 개발자를 위한 한글 문서입니다.

본 문서를 읽기 위해서는 웹 개발에 대한 기본적인 이해가 요구됩니다.

X 와 G5


X http://extedned.kr 는 그누보드5(이하, G5) http://sir.co.kr 를 바탕으로 만들어졌습니다.

G5 를 확장하여 MVC (Model, View, Controller) 방식의 접근을 시도하였으며 사이트 빌더의 개념으로 보다 편리하게 사용 할 수 있도록 하였습니다.

저작권


X 의 라이센스는 GPL 로서 아무런 제한 없이 누구나 자유롭게 사용 할 수 있습니다.

TODO LIST


1차 버젼 종료 및 배포 파일 공개

완료.

언제, 어떤 경로로 배포를 하는지에 대한 고민이 남았다.

2차 버젼 작업 내용

샘플 사이트


http://extended.kr 를 참고하세요.

멀티 도메인

위세너 홈페이지

http://withcenter.philgo.net/ ( http://withcenter.co.kr 로 부터 포워딩 )

서브사이트 메인 페이지

http://www.philgo.net

멀티 사이트

블로그

http://blog.philgo.net/

커뮤니티

http://community.philgo.net/

http://g5x.philgo.net/

여행사

http://travel.philgo.net/

문서


‘X’ 영문 개발 가이드는 아래의 링크를 참고하십시오.

https://docs.google.com/document/d/1hLnjVW9iXdVtZLZUm3RIWFUim9DFX8XhV5STo6wPkBs/pub

‘X’ 사용자 설명서는 아래 링크를 참고하십시오.

https://docs.google.com/document/d/1hiM2OIFlCkASMOgnyBsrTVcvICZz26oIze9Cz7p9BI8/pub

설치


설치는 두가지 방법이 있습니다.

  1. 직접 패치 : G5 를 설치하고, 패치를 하는 방법
  2. 배포 파일 설치 : 이미 패치되어져 있는 배포 파일을 다운로드하여 설치하는 것

배포 파일

http://extended.kr 에서 다운로드 하시면 됩니다.

직접 패치

아래의 설치 문서를 참고하십시오.

https://docs.google.com/document/d/1B0amy6P1xdBbYIPIl58Btgnjq8jwO33NfAwGToj8wWY/pub

만약 직접 패치가 어렵다면 배포 파일을 설치하는 것이 좋습니다.

사용 안내


아래의 X 사용자 설명서를 참고하십시오.

https://docs.google.com/document/d/1hiM2OIFlCkASMOgnyBsrTVcvICZz26oIze9Cz7p9BI8/pub

개발환경


X 는 여러 컴퓨터에서 개발이 되고 있습니다.

주로 윈도우즈에서 작업을 진행하고 있으며 마지막 테스트는 리눅스에서 진행되며 실제 서비스도 리눅스에서 이루어집니다.

운영체제는 윈도우즈 7 과 8.1 에서 99 % 이상의 코딩과 테스트가 이루어집니다.

비교적 다양한 Apache, PHP, MySQL 에서 작업과 테스트가 이루어지지만, 전반적으로 PHP 는 5.2 이상에서 테스트 되었으며 MySQL 은 5 버젼 이상에서 테스트 되었습니다.

개발 환경 만들기

각 개발자 만의 개발 환경이 모두 틀릴 것입니다.

여기서 말하는 개발 환경이란 운영체제나 서버 환경을 말하는 것이 아니라 ‘X’ 를 구성하는 환경을 말합니다.

X 는 github.com 으로 부터 프로젝트를 clone 해서 개발 하거나 master.zip 을 다운로드하여 개발 할 수 있습니다. 또한 X 배포 파일을 설치하여 개발을 할 수도 있습니다.

만약 여러분이 theme 을 만들어서 배포할 계획이라면 github.com 으로 부터 프로젝트를 clone 하는 방식은 올바르지 않습니다.

물론 clone 해도 됩니다. 여러분이 github.com 을 잘 사용하고 submodule 이나 기타 git 명령에 통달해 있다면 권장합니다.

하지만 일반적으로 git 의 submodule 관리(수정 후 원본 프로젝트에 push 등)는 까다로운 편입니다.  ( 이부분에 대해서 추가 설명을 하지 않겠습니다. )

만약 여러분이 theme 을 배포하기를 원한다면 다음과 작업 하기를 추천합니다.

  1. github 의 X 프로젝트에서 master.zip 을 다운로드하거나 배포 파일을 설치
  2. github.com 에 만들 theme 프로젝트를 생성
  3. x/theme 에서 git clone 후 작업
  4. 작업이 끝나면 http://extended.kr 에 등록

개발에 필요한 가짜 데이터 입력

게시판에 임시 데이터 입력 항목 참고

업데이트 설정 및 업데이트 개발 환경 만들기

업데이트와 관련된 개발을 하기 위해서는

  1. URL_UPDATE_SERVER 상수를 수정해서 메인 서버의 위치를 잡아주어야 한다.
  2. theme 게시판에 테마를 업로드 한다.

미리 선언된 상수 x/etc/constant.php


사용자 언어 - L

사용자가 홈페이지에서 사용 할 언어입니다.

사용자가 자신의 언어를 선택하지 않으면 기본적으로 웹 브라우저의 언어를 사용합니다.

이에 따라서 한국 사람은 한국어로 미국 사람은 미국어로 홈페이지를 이용 할 수 있습니다.

미국 사람이 한국어로 홈페이지를 보고 싶다면,

회원 정보 설정에서 언어 선택을 한국어로 하면 됩니다.

L 이 가지는 값은 영문자 알파벳 두 글자입니다.

예: ko, en

라이프 사이클 : Life Cycle


G5/index.php?module=admin&action=index 와 같이 접속을 한 경우, 서브 폴더 ‘x’ 로 변경되지 않게 하기 위해서 아래와 같이 스크립트가 include 된다.

  1. G5/index.php
  2. common.php
  3. x/begin.php                      ( module, action, page 에 값이 있는가? )
  4. x/index.php
  5. ... 계속 ...

초기화 및 코드 흐름 - index.php

index.php 를 바탕으로 소스 코드의 흐름을 대략적으로 표시합니다.

  1. index.php
  2. common.php
  1. x/etc/hook/common.begin.php
  1. $in 변수 설정
  2. g5_path() 함수 재 지정
  1. config.php
  2. data/db_config.php
  3. bbs/visit_insert.inc.php
  4. extend/x.php
  1. x/begin.php
  2. x/etc/config.php
  3. x/etc/begin.php
  4. x class loads ………..
  5. x::load_site()
  1. 테마 설정
  2. 테마가 없거나 잘못 설정되었으면, default 를 사용
  3. member skin setting
  1. head.php
  1. head.sub.php
  1. x/etc/hook/body_begin.php

X 빌더 폴더 및 파일 구조


x/etc/config.php

X 빌더가 실행될 때 가장 먼저 x/etc/config.php 가 실행됩니다.

config.php 파일은 X 빌더의 기본 설정을 합니다.

한 가지 지켜야 할 규칙 중 하나는 config.php 에서 지정되어 전역으로 사용될 변수명은 반드시 언더바(_)로 시작을 해야합니다.

코딩 가이드 라인


meta_get(), meta_set()

meta_get() 과 meta_set() 은 임의 값을 저장하고 읽을 수 있습니다.

이 함수들은 주로 설정이나 TABLE 의 모자란 필드를 추가로 저장하기 위해서 사용합니다.

예를 들면 x_site_config TABLE 의 경우 필요한 최소한의 필드만 가지고 있고 나머지 값들은 meta_set() 과 meta_get() 을 통해서 관리를 합니다.

이 함수들은 서브 도메인마다 값을 따로 따로 저장 할 수도 있으며  모든 서브 도메인에서 같은 값을 저장 할 수도 있습니다.

/// 분류, 키, 값

meta_set( "category", "key", "value" );

echo meta_get( 'category', 'key' ) . "\n";

/// 분류 생략시, 자동으로 해당 웹사이트의 도메인이 적용 됨.

/// 따라서 웹 사이트 별로 값을 다르게 저장하려는 경우, 아래와 같이 분류를 생략하면 됨.

meta_set( 'key', 'value' );

echo meta_get( 'key' ) . "\n";

/// 위의 코드는 아래의 코드와 동일.

meta_set( etc::domain(), 'key', 'value' );

echo meta_get( etc::domain(), 'key' ) . "\n";

HTML FORM 으로 부터 값을 입력 받고 저장 그리고 출력하는 방법에 대해서 설명을 해 드립니다.

<form>

        <input type='text' name='key' value="<?=meta_get( 'key' )?>">

        <input type='submit'>

</form>

<?php

        /// 저장

        meta_set( 'key', $in['key'] );

        

        /// 출력        

        echo meta_get( 'key' );

?>

최상위 도메인 추가 : $_TLD_1, $_TLD_2

x/etc/config.php 파일에 저장되는 변수로서 주 도메인을 찾기 위한 것입니다.

기본적으로 .com 이나 .net 과 같이 일반 도메인과 국가 도메인이 상위 도메인으로 등록되어져 있습니다.

한국의 경우 .kr 이 등록되어져 있는데, 사실 한국에는 .co.kr, .or.kr, .go.kr 와 같이 여러가지 상위 도메인이 있습니다.

만약 이러한 상위 도메인을 추가하지 않으면 주 도메인을 제대로 못찾을 수 있습니다.

$_TLD_1 에는 맨 마지막 부분을 넣으면 됩니다.

$_TLD_2 에는 그 앞 부분을 넣으면 됩니다.

예를 들어 abc.or.kr 에서 kr 은 맨 마지막 부분으로 $_TLD_1 에 저장되어야 하며, or 은 그 앞 부분으로서 $_TLD_2 에 저장되어야 합니다.

만약 잘 알려지지 않은 새로운 도메인이 생겨났다면 또는 그 도메인을 사용한다면 $_TLD_1 에 그 도메인을 추가하면 됩니다.


관리자 판별 : admin()

관리자 인지 아닌지를 판별할 때에는 admin() 함수를 사용하면됩니다.

예제:

if ( admin() ) {

        echo “관리자입니다.”;

}

주의 : G5_URL 을 사용하지 말고 g::url() 을 사용 할 것.

g::url() 함수를 사용한다.

서브도메인이 rewriting 방식으로 되는 경우, G5_URL 은 제대로 된 파싱을 하지 못한다.

그리고 rewriting 에서 url 끝이 항상 슬래쉬(/) 로 끝나야 한다.

주의 : get_list_thumbnail() 을 사용하지 말고 x::thumbnail() 을 사용 할 것.

테이블이 존재하지 않는 경우 치명적인 에러가 발생한다.

How to create a start script ( as standalone )

Start script is a script that can run as stand alone.

<?php

include_once('../common.php');

include_once(G5_PATH.'/head.php'); // 필요에 따라 생략

include_once(G5_PATH.'/tail.php'); // 필요에 따라 생략

How to create a standalone ( single script ) on X

You can create a script that run on both of WEB and CLI.

Code like below

<?php

        if ( php_sapi_name() == 'cli' ) {

                error_reporting( E_ALL ^ E_NOTICE );

                include 'etc/x-standalone.php';

                        while (@ob_end_flush());

        }

        include_once x::dir() . '/etc/xmlrpc/xmlrpc-3.0b/lib/xmlrpc.inc';

The code above could be run on both cli and web.

and Run like below

x>php etc\service\push_to_blog.php

Example)

<?php

        error_reporting( E_ALL ^ E_NOTICE );

        include 'etc/x-standalone.php';        

        

        while (@ob_end_flush());

        //for ( $i=0; $i < 10000; $i ++ ) {

                $wr_id = g::write(

                        array(

                                'mb_id'                        => "test12",

                                'mb_name'                => "My Name",

                                'mb_email'                => "my@email.com",

                                'ca_name'                => 'ABC - CATEGORY',

                                'bo_table'                => "ms_test12_1",

                                'wr_subject'        => "Art.: $i - File Upload Test...",

                                'wr_content'        => "Content: $i<hr>This is the content<br><h1>Hello there...</h1>How are you?<br>\n\r\nTTTTT\t....How are you?<br>Later..",

                                'wr_link_1'                => "http://philgo.com",

                                'wr_link_2'                => "http://google.com",

                                'wr_homepage'        => "http://jaehosong.com",

                                'file_1'                => "C:\\tmp\\abc.png",

                                'file_2'                => "C:\\tmp\\def.gif",

                                'file_3'                => "C:\\tmp\\ghi.jpg",

                                'html'                        => 'html2',

                                )

                );

                echo "$wr_id, ";

                flush();

        //}

If you want to run the code, do below

x>php etc/test/post.php

A Standalone Web Script on X

<!doctype html>

<html>

<head>

<title>TITLE</TITLE>

<script>

var g5_url       = "<?php echo G5_URL ?>";

</script>

        <!--[if lt IE 9]>

                <script type='text/javascript' src='http://test8.work.org/g5-5.0b24/x/js/jquery-1.11.0.min.js'></script>

        <![endif]-->

        <!--[if gte IE 9]><!-->

                <script type='text/javascript' src='http://test8.work.org/g5-5.0b24/x/js/jquery-2.1.0.min.js'></script>

        <!--<![endif]-->

</head>

<body>

<?php

?>

</body>

</html>

Unit Test

Unit test scripts are saved into x/etc/test folder.

Just run like “php etc/test/post.php”

How to Database Query

To get multiple rows

Try to use db::rows() instead of the code below.

$sql = " select * from {$g5['table_name']} where mb_id = '{$member['mb_id']}' order by as_id desc ";

$result = sql_query($sql);

while ( $row = sql_fetch_array($result) ) {

}

To get one row

Try to use db::row() instead of the code below.

$sql = "SELECT * FROM multisite_config WHERE domain='$domain'";

sql_fetch( $sql );

jQuery 포함하기

jQuery 를 포함해야 할 때에는 아래와 같이 사용을 하면 됩니다.

echo javascript_jquery();

위 코드는 최신 버젼의 jQuery 를 포함하는 HTML 구문을 출력합니다.

IE 9 이하의 웹 브라우저에서는 jQuery 1.x 대 버젼을 쓰며 그 외의 경우 jQuery 2.x 대의 버젼을 씁니다.

인터넷(웹 사이트)의 속도 중에서 데이터 전달과 웹 클라이언트의 처리 속도(처리 량)에 따라서 크게 좌우된다는 것을 감안 할 때,  jQuery 를 웹 브라우저에 캐시를 하고 적당한 때에 다시 서버로 부터 전송받아야 할 필요가 있습니다. 또한 jQuery 의 높은 버젼을 사용해서 웹 클라이언트의 동작 상태를 원활하게 해 주어야 할 필요성이 있습니다.

이러한 이유로 jQuery 포함 관련 함수를 만들었으므로 적절한 때에 호출하여 사용을 하면 됩니다.

특히 테마나 시작 스크립트에 포함을 하면 좋습니다.

예를 들면 head.sub.php 에서 아래의 라인을 추가 할 수 있습니다.

<?=javascript_jquery()?>

테마를 select 박스로 표시하기

설치된 테마 중 하나를 선택해야 할 필요가 있다면 아래와 같이 코딩을 할 수 있습니다.

<select name='theme'>

        <?php

                foreach ( file::getDirs( X_DIR_THEME ) as $dir ) {

                        $path = X_DIR_THEME . "/$dir/config.xml";

                        if ( ! file_exists( $path ) ) continue;

                        $theme_config = load_config( $path );

                        if ( ! $theme_config ) continue;

                        

                        $name = $theme_config['name'][L];

                        if ( empty($name) ) continue;

                        

                        $view = explode(',', $theme_config['view']);

                        if ( ! in_array( 'pc', $view ) ) continue;

                        

                        echo "<option value='$dir'>$name</option>";

                }

        ?>

</select>

방문자 통계 표시

widget/stat-visit 위젯을 참고한다.

기본 HTML 헤더 출력. 레이아웃 출력 없이.

기본 head 의 내용을 출력하고자 한다면

를 사용하면 됩니다.

테마 만들기


테마는 사이트의 디자인과 레이아웃을 말합니다.

자유롭게 테마를 만들 수 있지만 권장하는 코딩 방식을 따르기를 바랍니다.

샘플 테마 다운로드

작업을 편하게 하기 위해서 기본 샘플 theme 을 만들어 놓았습니다.

https://github.com/withcenter/theme-sample 에서 샘플 theme 을 다운로드하여 아래의 설명과 함께 참고하시면 됩니다.

테마 폴더 생성

우선 x/theme 폴더 아래에 적당한 이름으로 테마를 만듭니다.

그리고 테마에 필요한 모든 HTML, CSS, Javascript 등은 그 테마 폴더 안에 저장을 해야 합니다.

설정파일 config.xml

설정 파일은 XML 로 되어져 있습니다.

XML 로 기록함에 따라 정보의 호환성을 높일 수 있습니다.

예를 들어  php 코드로 기록을 하면 file() 함수 또는 include() 함수를 통해서 원격(다른 서버에 있는) php 코드를 바로 실행 할 수 있습니다.

하지만 이것은 굉장히 위험한 일입니다. 단순히 변수를 지정해 놓고 활용을 한다고 해도 예기치 못한 상황이 벌어 질 수 있습니다.

XML 로 정해 놓으면 그 값을 쉽게 파싱하여 재활용 할 수 있습니다.

load_xml() 함수에 의해서 설정 파일 config.xml 은 연관 배열로 값을 로드 할 수 있습니다.

name, type, version 의 정보는 꼭 기록을 해 두어야 합니다.

다음은 config.xml 파일의 예제입니다.

<?xml version="1.0"?>

<config>

        <view>pc</view>

        <name>

                <en>Blog</en>

                <ko>블로그</ko>

        </name>

        <version>0.1</version>

</config>

위와 같이 config.xml을 저장 하였으면 테마에서는 아래와 같이 읽고 사용 할 수 있습니다.

$path = X_DIR_THEME . "/$dir/config.xml";

if ( ! file_exists($path) ) continue;

$theme_config = load_xml ( $path );

$name = $theme_config['name'][L];

L 은 미리 선언된 상수로 사용자의 언어 코드 값을 가지고 있습니다.

자세한 설명은 미리 선언된 상수를 참고하십시오.

설정 변수

$theme_config[‘short’] = 짧은 설명(255 글자 이내). HTML 입력 가능하나 권장하지 않음.

$theme_config[‘detail’] = 긴 설명. HTML 입력 가능.

미리보기 이미지

확장자는 jpg 라야 하며,

가로 400 픽셀, 세로 400 픽셀로 맞추어서

 용량을 최대한 작게 해서 저장하시기 바랍니다.

init.php 파일 생성

테마에는 init.php 파일을 만들어서 필요한 코드를 작성 하는 것으로 필요 없다면 선택적으로 만들지 않을 수도 있습니다.

한가지 특이 한 점은 이 init.php 파일은 모듈이 실행되기 전에 먼저 include 되는 것으로 module 에 영향을 줄 수도 있습니다.

마리보기 preview.jpg 파일 생성

미리보기 preview.jpg 파일이 있어야 관리자가 해당 테마를 선택하여 적용을 할 수 있습니다.

config.xml 와 마찬가지로 필수 사항입니다.

만약 테마가 완성되지 않은 상태라면 임시 preview.jpg 라도 저장을 하시면 됩니다.

미리보기 사진의 크기는 가로 600 픽셀, 세로 600 픽셀입니다.

head.php 와 tail.php 그리고 index.php 생성

G5 가 그러하듯이 X 엮시

head.php 에서 상단의 메뉴와 사이트바 등 본문 이전의 부분을 출력하며

tail.php 에서 마무리를 합니다.

theme 폴더 안에 head.php, tail.php, index.php 를 만들면 됩니다.

만약 theme 폴더에 이러한 파일들이 없으면 G5_PATH (그누보드5 설치 폴더)에 있는 head.php 와 tail.php 그리고 index.php 가 사용됩니다.

img, css 그리고 javascript 폴더 생성

css 와 javascript 파일은 각 개발자가 원하는데로 포함하고 코딩하면 됩니다.

하지만 다른 개발자와 함께 코딩의 일관성을 유지하자는 측면에서 다음과 같이 방침을 정합니다.

G5/x/theme/테마-폴더/css

G5/x/theme/테마-폴더/img

G5/x/theme/테마-폴더/js

기본적으로 생성되어야 하는 파일은 아래와 같으며 이 theme.css 와 theme.js 파일 아에 원하는 코드를 집어 넣으면 됩니다.

G5/x/theme/테마-폴더/css/theme.css

G5/x/theme/테마-폴더/js/theme.js

menu.php 와 sidebar.php 만들기

이 부분 엮시 개발자가 나름데로 코딩을 하면 되는 부분입니다.

굳이 파일 이름을 menu.php 와 sidebar.php 라고 할 필요없으며 이러한 파일을 만들 필요 조차 없습니다.

이것은 암묵적인 약속이라고 할 수 있겠습니다.

menu.php 에는 테마 상단의 메뉴를 작성하는 스크립트 파일입니다.

sidebar.php 는 왼쪽 또는 오른쪽 사이드바에 나타나는 내용을 포함하는 스크립트 파일입니다.

사이트에 적용하기

기본적으로 config.php 와 preview.php 만 있으면 관리자 페이지에서 해당 테마를 적용 할 수 있습니다.

메뉴 설정 및 출력하기

메뉴는 사이트 관리자 페이지에서 설정을 할 수 있습니다. 이것은 모든 테마에 공통적으로 적용되는 것이며 아래와 같은 비교적 일정한 코딩 루틴이 정해져 있습니다.

메뉴 출력 루틴

메뉴 출력은 간단하게 x:::menu_link() 함수를 통해서 사용 할 수 습니다.

예를 들면 아래와 같습니다.

<?=x::menu_link()?>

이렇게 하면 각 메뉴가 A 태그로 출력이 됩니다.

만약 각 메뉴에 해당하는 A 태그를 배열로 받고 싶다면, $menus = x::menu_links() 와 같이 하면 됩니다.

다음은 UL 태그와 LI 태그를 같이 사용하는 에제입니다.

<ul>

        <?="<li>" . implode( "</li><li>", x::menu_links() ) . "</li>"?>

</ul>

이와 같이 하면 UL, LI 뿐만아니라 다른 여러가지로 응용이 가능합니다.

또는 보다 섬세한 조절을 하고 싶다면 아래와 같이 하면 됩니다.

<?

        $menus = x::menus();

        foreach ( $menus as $menu ) {

                $url                = x::menu_url($menu[url]);

                $target        = x::menu_target_attr($menu['target']);

                echo "<a href='$url'$target>$menu[name]</a>";

        }

?>

이와 같이하면 A 태그를 사용하지 않고 다른 방식으로 응용이 가능합니다.

메뉴 출력 예제 1 )

이것은 그냥 아래와 같이 코딩을 할 수 있다는 것을 보여 주는 것 뿐입니다. (사실 왜 이렇게 코딩을 해야하는지에 대해서는...)

<ul id="tnb">

        <li class='menu-1'><a href='<?=site_url(etc::domain())?>'>홈</a></li>

        <?php

                $menus = x::menu_links();

                $i=1;

                foreach ( $menus as $a ) {

                        echo "<li class='menu-" . (($i ++ % 4) + 1) . "'>$a</a></li>";

                }

        ?>

</ul>

기본 메뉴

만약 메뉴가 지정되지 않았다면 “관리자 페이지에서 메뉴를 지정하세요” 와 같은 임시 메뉴가 나타난다.

 

메뉴 URL

메뉴 URL 에는 일반적인 URL 외에 지정된 키를 입력 할 수 있습니다.

URL_HOME

메인 페이지로 이동하는 URL LINK 을 뜻합니다.

서브 페이지에 들어가 있을 때, 일반적으로 ‘/’ 를 입력하거나 http://domain.com 과 같이 입력을 해도 되지만 때로는 URL_HOME 을 입력해야 할 경우가 있습니다.

예를 들면, X 를 서브 디렉토리에 설치하였으면 ‘/’ 으로 메인 페이지로 이동 되지 않습니다.

게시판 테이블(bo_table)

URL 이 아닌 게시판 테이블을 지정하면 자동으로 게시판으로 링크가 됩니다.

추가 메뉴 설정 및 출력하기

추가 메뉴란 메인 메뉴 외에 별도로 메뉴를 추가하는 것으로 최 상단에 기록되는 top menu 와 최 하단(카피라이트 부분 등)에 bottom menu 가 있습니다.

top menu 에는 top - left - menu 와 top -  right - menu 로 나뉩니다.

추가 메뉴는 메인 메뉴와는 별개로 사이트 관리자 페이지의 “일반 설정” 페이지에서 설정이 가능합니다.

추가 메뉴 설정

설정 파일에 아와 같이 써 주면,

$theme_config['menu_right']['max'] = 5;

$theme_config['menu_right']['name']  = "상단 오른쪽 메뉴";

“상단 오른쪽 메뉴”를 제목으로 총 5 개의 메뉴 입력칸이 “일반 설정” 메뉴에 나타납니다.

 각 추가 메뉴는 최대 10개 까지 지정가능합니다.

menu_top, menu_left, menu_right, menu_bottom 으로 총 4가지의 추가 메뉴를 사용 할 수 있습니다.

굳이 top, left, right, bottom 이라는 키워드에 관념을 고정시키지 말고 자유롭게 응용을 하면 됩니다.

bottom menu 에 입력을 받고 top menu 로 출력 해주려고 한다면, [‘menu_bottom’][‘name’] 에 “상단메뉴”와 같이 이름을 적어주고, 실제로 테마에서 bottom 을 top 에 출력해 주면 됩니다.

추가 메뉴 출력 코드

추가 메뉴를 출력 할 때에는 메인 메뉴를 출력하는 것과 동일하게 사용하면 됩니다.

단, 추가적으로 인자에 top, left, right, bottom 을 써 주면 됩니다.

예 1)

<?=x::menu_link( 'left' )?>

예 2)

<?="<li>" . implode( "</li><li>", x::menu_links(‘left’) ) . "</li>"?>

 또는 아래와 같이 할 수 있습니다.

예 3)

<?php

        $menus = x::menus('left');

        foreach ( $menus as $menu ) {

                $url                = x::menu_url($menu['url']);

                $target        = x::menu_target_attr($menu['target']);

                echo "<a href='$url'$target>$menu[name]</a>";

        }

?>

사이드 바 출력하기

기본 설정에는 사이드 바 표시 위치를 오른쪽, 왼쪽으로 선택하도록 되어져 있다.

따라서 모든 테마는 사이드 바를 오른쪽 또는 왼쪽에 위치 할 수 있도록 해 주어야  한다.

사이드바의 출력은 잘 해야 오른쪽, 왼쪽으로 왔다 갔다 하지 않습니다.

( 인터넷이나 컴퓨터가 느린 경우, 그리고 사이드바의 위치를 두번 이상 재조정하는 경우 홈페이지에 접속을 할 때 사이드바가 움직입니다. 이와 같은 경우 가능하면 위치 조정은 한번으로 끝내는 것이 좋습니다. 예를 들면 css 파일에 기본 위치 설정 속성을 추가하고 나중에 HTML 문서에서 따로 추가를 해서 옵션에 지정한 위치를 적용하면 안됩니다. 이같은 경우 css 파일에는 빼는 것이 좋습니다. 그리고 사이드바의 위치는 DOM 순서에서 본문보다 먼저나오면 왼쪽이 자연스럽고, 본문보다 나중에 나오면 오른쪽이 자연스럽습니다.  )

완성형 질문

각 테마별로 완성형 질문을 할 수 있습니다.

완성형 질문이란 예를 들어 홈페이지 로고를 등록하지 않은 경우, 홈페이지 로고를 등록하라고 관리자에게 알려주는 것입니다.

완성형 질문의 골격은 아래와 같습니다.

index.php 의 상단에 <? include ‘quest.php’ ?> 와 같이 하여 모든 완성형 질문의 quest.php 에 둡니다.

그리고 질문의 출력은 echo quest(“....”); 와 같이 합니다.

질문은 <a …> 태그로 감싸서 관리자 페이지를 연결합니다.

quest() 를 통해서 HTML 출력이 될 때에는 <div class=quest><div class=inner><a href=....>질문내용</a></div></div> 와 같이 출력이 됩니다.

따라서 css 파일에서 적절하게 디자인을 하면 됩니다.

예제 파일은 community_3 테마의 quest.php 를 살펴봐 주세요.

위젯 작성하기


위젯은 G5 의 스킨과 비슷한 개념이지만 훨씬 더 확장된 것입니다.

홈페이지를 겉 모양을 구성하는 것이 컨텐츠 레이아웃과 디자인이라 할 수 있는 데 이러한 것은 테마로 작성 될 수 있습니다.

회원 로그인이나 최근글 또는 각종 통계 기능 까지 위젯의 활용 범위는 다양합니다.

폴더구성

위젯은 위젯 폴더에 위젯 파일들을 저장하면 됩니다.

위젯 폴더는 아래와 같습니다.

x/widget/위젯폴더명

위젯을 구정하는 파일은 다음과 같습니다.

만약 위젯 폴더명이 abc 라면, 아래와 같습니다.

x/widget/abc/config.xml

x/widget/abc/abc.css

x/widget/abc/abc.js

x/widget/abc/abc.php

x/widget/abc/preview.jpg, preview-small.jpg, preview-large.jpg

그 외에 필요한 것은 더 추가를 하면 됩니다.

위에서 강조 표시를 한 것은 필수입니다.

preview.jpg는 600x600 픽셀이며 preview-small.jpg 는 300x300 입니다.

preview-large.jpg 는 크기에 제한이 없지만 정사각형이어야 하며 너무 큰 용량은 삼가하셔야합니다.

반응형

위젯은 반응형으로 만들어야 합니다.

반응형으로 만드는 방법은 간단합니다. 고정 크기를 주지 않으면 됩니다. 특히 너비(width)를 지정할 때 px 단위를 사용하지 말고 % 나 em 단위를 사용하십시오.

또한 CSS 의 media query 를 활용하면 좋습니다.

작성 규칙

CSS 를 포함해야 할 때에는 반드시 아래와 같이 사용해야합니다. 이것은 위젯이 여러번 호출 될 때 css 를 중복으로 로드하는 것을 막아줍니다.

include widget_css();

include widget_css( param’ ); // 는 ‘x/widget/abc/param.css 를 로드합니다.

widget_css() 함수는 해당 위젯 폴더에 있는 css 파일을 포함합니다.

인자를 생략하면 기본 css 를 로드하며 인자를 추가하면 해당 css 파일을 포함합니다.

이것은 자바스크립트도 마찬가지입니다.

include widget_javascript();

include widget_javascript( param’ ); // 는 ‘x/widget/abc/param.js 를 로드합니다.

config.php

config.php 에는 위젯을 설정하는 정보를 저장 할 수 있습니다.

config.xml 과 달리 config.php 는 실제로 PHP 스크립트로서 실행이 되는 파일입니다.

config.php 에는 PHP 코드와 함께 위젯 설정을 위한 HTML FORM 문장을 기록 할 수 있습니다.

관리자가 위젯 설정시 config.php 에 기록된 HTML FORM 문장이 위젯 설정 폼에 추가됩니다.

그리고 관리자가 폼 전송 버튼을 클릭하면  config_submit.php 가 실행되며 이 스크립트에서 적절하게 처리를 할 수 있습니다.

제목 설정

제목을 설정하기 위해서는 config.php 에서 아래와 같이 호출 하십시오.

include widget_config_subject();

제목을 저장하기 위해서는

config.xml

위젯 카테고리

category 에는 위젯의 카테고리를 입력해야합니다.

카테고리는 아래와 같다. { 와 } 사이에 있는 것은 서브 카테고리이다.

menu { top, bottom, main, sub }

forum { list, write, view, latest, hit, vote }

banner

html

user

statistics { user, access, keyword, … } /// 회원통계, 접속통계, 검색어통계 등 모든 통계

search { search-form(box), search-result-list }

login

config.xml 에 아래와 같이 기록이 되어야 한다.

        <category>

                <main>forum</main>

                <sub>latest</sub>

        </category>

최근글이나 최근 코멘트 등 최근의 글은 모두 위와 같이 카테고리가 기록되어야 한다.

클릭수가 많은 글은 sub 가 hit 로 되어야 하고, 투표가 많은 글 목록은 sub 가 vote 가 되어야 한다.

위젯의 사용

위젯은 기본적으로 아래와 같이 호출 하여 사용 할 수 있습니다.

include widget( array( 'code' => 'side', 'name' => 'sample' ) );

code 는 위젯별 고유한 값입니다.

이 값은 특별히 의미있는 값을 부여 할 필요는 없지만 한번 정해지면 바뀌어서는 안됩니다.

바뀐다고 해서 프로그램적인 에러는 발생하지는 않겠지만, 위젯에 대한 설정 값 등이 사라 질 수 있습니다.

여기서 지정하는 code 과 name 값은 위젯 스크립트 안에서 사용을 할 수 있습니다.

위젯을 사용 할 때에는 아래와 같이 연속으로 위젯을 포함 할 수 있습니다.

<?php

        include widget( array( 'code' => 'side-sample', 'name' => 'sample' ) );

        include widget( array( 'code' => 'side-post-latest', 'name' => 'post-latest' ) );

        for( $i=1; $i<=5; $i++ ) {

                include widget( array( 'code' => "side-sample-$i", 'name' => 'none' ) );

        }

?>

sample 은 기본적으로 제공되는 샘플 위젯입니다.

post-latest 는 최근 글을 목록하는 위젯입니다.

none 은 존재하지 않는 위젯으로 관리자로 접속했을 때만 보이며 설정을 통해서 위젯을 선택 할 수 있습니다.

모든 위젯은 관리자가 설정을 할 수 있으며 다른 종류의 위젯으로 변경을 할 수 있습니다.

git 속성

만약 특정 테마를 다운로드했는데, 해당 위젯이 설치되어져 있지 않다면 테마에서 에러가 날 수 있습니다.

이 때, 아래와 같이 git 속성을 추가해 주면 X 관리자가 손쉽게 위젯을 설치 할 수 있습니다.

<?php

        include widget(

                array(

                        'code'                => 'comment-line',

                        'name'                => 'comment-line',

                        'git'                => 'https://github.com/x-widget/comment-line'

                )

        );

?>

‘code’ is a uniq ID for each page.

‘name’ is widget folder name.

‘git’ is the widget’s git repository. If the widget is not installed, then the it will give a link to install the widget.

CSS 와 Javascript 포함하기

위젯 폴더에 있는 css 나 js 파일을 포함 할 때에는 아래와 같이 하면 됩니다.

widget_css();

widget_javascript();

widget_css(‘filename’);

widget_javascript(‘filename’);

위와 같이 하면 위젯이 중복 포함되더라도 그 안의 css 나 js 는 한번만 포함됩니다.

기타

위젯은

config.xml

config.php

가 있는데,

config.php 는 설정 페이지에서 자동으로 불려진다.

config.php 는 설정페이지에 HTML 폼을 추가로 보여주는 것과 설정페이지가 저장이 될 때, HTML 폼 값을 저장하는 역활을 한다.

if ( $submit ) {

        // 여기에 저장

}

else {

        // 여기에 HTML FORM 문장을 출력

}

사용하기 쉽게 미리 만들어진 HTML FORM 코드가 있다.

        include widget_config_form('title')                                // 제목이 필요한 경우,

        

        

        

        // TEXT 입력이 필요한 경우,

        include widget_config_form('text', array(

                        'name'                                => 'no',

                        'caption'                        => ln('No.', '글 갯수'),

                        'placeholder'        => ln("Insert No of Posts", "출력할 글 개 수를 입력하세요.")

                )

        );

        

        // TEXTAREA 항목이 필요한 경우,... 아래는  CSS 입력.

        include widget_config_form('textarea', array(

                'name'                                => 'css',

                'caption'                        => ln('STYLE', '스타일') . " ( CSS )",

        ));

        

        

        

        // CheckBox 입력이 필요한 경우,

        include widget_config_form('checkbox', array(

                        'name'                                => 'target',

                        'caption'                        => ln('New Window', '새 창'),

                        'comment'                => ln('Open in New Tab', '새 창으로 열기'),

                )

        );

        

        

        // 게시판 아이디 입력이 필요한 경우,

                

                include widget_config_form('forum');                        // 1개 게시판 입력. 게시판 아이디는 $widget_config['forum1'] 키 값에 저장됨.

                

                include widget_config_form('forum', array('no'=>'3')); // 3개 게시판 입력. 게시판 아이디는 $widget_config['form1'], 'forum2', 'forum3' 에 각각 저장됨.

                include widget_config_form('forum', array( 'from' => 2, 'to'=>5) );                // 게시판 아이디 'forum2' 부터 'forum5' 까지 입력을 받는다.

                

@팁 : 추가적인 설명이 필요한 경우,

----------------------------------------------------------------------------

아래와 같이 부가 설명을 출력해 주면 된다.

<?php

        include widget_config_form('textarea', array(

                'name'                                => 'html',

                'caption'                        => 'HTML',

        ));

        echo ln("Use &lt;style&gt; tag to input style (css)", "&lt;style&gt; 태그를 사용해서 CSS 를 입력 할 수 있습니다.") . '<br>';

        

?>

                

        

@예제

----------------------------------------------------------------------------

<?php

        include widget_config_form('title');

        include widget_config_form('text', 'no', ln('No.', '글 갯수'), ln("Insert No of Posts", "출력할 글 개 수를 입력하세요."));

        widget_config_extra_begin();

        echo "<div><span class='caption'>My Name</span> : <input type='text' name='my_name' value='$widget_config[my_name]'></div>";

        include widget_config_form('css');

        widget_config_extra_end();

?>

<style>

        input[type='text'] {

                width: 60%;

        }

</style>

-----------------------------------------------------------------------------

위 예제에서

        

        widget_config_extra_begin();

        ....

        widget_config_extra_end();

에서 보듯이 추가 설정으로 보여 줄 것은 widget_config_extra_begin() 과 widget_config_extra_end() 사이에 두면 된다.

그리고 직접 HTML FORM 문장을 작성 할 수 있는데, 가능한 한 미리 작성된 HTML FORM 코드를 활용 하도록 한다.

@ 디자인

만약 디자인적인 변화가 필요하다면 가능한 한 config.php 에 style 태그를 추가하여 CSS 로 설정을 한다.

@ 기본 설정

기본 값 지정이나 기본 코드의 실행은

config.php 또는 해당 위젯 스크립트에서 하면 됩니다.

-------------------------------------------------------------------------------------------

위젯 파일 업로드

to doc

---------------------

파일 업로드. 아래와 같이 하면 된다.

        include widget_config_form( 'file', array(

                'name'                                => 'icon',

                'caption'                        => ln('Icon', '아이콘'),

        ) );

        

        include widget_config_form( 'file', array(

                'name'                                => 'icon2',

                'caption'                        => ln('Second Icon', '두번째 아이콘'),

        ) );

        

        

위젯 가상 선택자

@doc 가상 선택자.

-------------------------------------------------------------

현재 위젯의 고유 ID 나 CLASS 명을 몰라서 코딩이 어려울 때가 있다.

이럴 때, ".this" 를 사용해서 현재 위젯을 선택(지정 또는 표현) 할 수 있다.

이것은 HTML 이나 CSS 등에서 사용가능한 것으로 .this 를 통해서 보다 쉽게 스타일링을 할 수 있다.

주의 할 것은 설정 FORM 의 변수명이 css 와 html 만 된다.

예제) CSS 입력에서

---------------------------------------------------------------

[code='side-post-latest'] a { color: red !important }

예제) HTML 에서 <style> 태그를 같이 사용하는 경우,

---------------------------------------------------------------

<style>

.this {

margin-bottom:1em;

}

.this img {

width:100%;

}

</style>

결과) 위와 같이 하면 실제로는 아래와 같이 웹 브라우저에 출력된다.

---------------------------------------------------------------

<style>

[code='side-post-latest'] a { color: red !important }</style>

또는

<style>

[code='side-sample-4'] {

margin-bottom:1em;

}

[code='side-sample-4'] img {

width:100%;

}

</style>

위젯 캡슐화

@예제 위젯

----------------------------------------------------------------

none

post-lastest

post-comment-latest

html_banner

@기타 사용하기 쉽도록 캡슐화 해 놓은 것.

-----------------------------------------------------------------

        include widget_config_form('banner');

        include widget_config_form('url');

        include widget_config_form('target');

        include widget_config_form('html');

        

        include widget_config_form('css');

위젯 배포하기

만약 위젯을 만들고 나서 다른 사람들이 사용 할 수 있도록 하고자 한다면

  1. github.com 에 하나의 프로젝트로 widget 을 등록합니다.
  2. 등록한 github.com 의 widget 프로젝트의 URL 을 'X' 홈페이지에 등록합니다.

이렇게 하면 다른 'X' 빌더 사용자들이 관리자 페이지에서 손쉽게 여러분의 위젯을 사용 할 수 있습니다.

나중에 변경 작업이 필요하면 등록된 widget 프로젝트를 clone 또는 submodule add 해서 변경 작업을 한 후 github 저장소에 기록을 하면 다른 사용자들이 업데이트된 파일을 설치하게 됩니다.

중요 : config.xml 을 수정 한 후 github.com 저장소에 발행하고 ‘X’ 서버에 등록을 하고자 한다면, 조금 기다렸다가 해야합니다.

github.com 에 발행하고 raw github server 에 적용이 되기 까지 약 10 분 정도가 걸리므로 주의하셔야 합니다.

참고 : config.xml

중요 : 버젼의 변경이 있는 경우, 꼭 버젼을 높여서 표기하셔야합니다.

공통 config.xml 설정 정보

필수 정보

        <id>theme gallery-4</id>

        <type>theme</type>

        <view>pc,mobile</view>

        <category>gallery</category>

        <name>

                <en>Gallery Theme No. 4 (Git version)</en>

                <ko>Gallery Theme No. 4 (Git version)</ko>

        </name>

<version>0.1</version>

        <author>JaeHo Song</author>

        <email>thruthesky</email>

        <short>

                <en>Gallery No. 1</en>

                <ko>Gallery No. 1</ko>

        </short>

id

적절한 고유값을 입력하면 된다. 이 값은 되도록 간단 명료하게 입력하되 가급적 중복이 되지 않을 것으로 정한다.

만약 중복이 된다면 다른 것으로 바꾸면 된다.

예:

<id>default-theme</id>

type

<type> 에는 widget, theme, module 의 값이 들어간다.

type=theme 이면 view 의 값이 들어가며 pc 또는 mobile 의 값이 들어간다.

version

업데이트가 많이 된 경우 가능하면 버젼을 높여주세요.

버젼에는 꼭 숫자와 점(.) 만 입력하십시오.

주의 : config.xml 을 변경하고 서버에 등록시

config.xml 을 수정하고 commit, push 하면 github.com 에 빠르게 적용이 됩니다.

하지만 ‘X’ 본 서버에는 github.com 의 저장소에 있는 config.xml 을 읽어 들이는 것이 아니라 git raw 서버에 있는 config.xml 을 읽어 들입니다.

문제는 git raw 서버에는 발행(push) 한 내용이 즉시 반영되지 않는 다는 것입니다.

따라서 수정하고 발행(push) 를 했다고 해서, 해당 git 저장소 url 을 본 서버에 등록하면 수정된 config.xml 을 제대로 읽지 못하는 경우가 발생할 수 있습니다.

따라서 github.com 에 소스를 등록하고 그 github 프로젝트 URL 을 X 본 서버에 등록할 때 약 10 분 정도 쉬었다가 해 주어야 합니다.

이것은 config.xml 이 수정된 경우 만 해당됩니다.

페이지 추가하기

<a href="<?=page('doc')?>">페이지</a>

와 같이 하면,

해당 테마 폴더 아래의 doc.php 가 로드됩니다.

스킨 만들기

X 의 스킨 경로는 G5/x/skin/ 입니다.

일반적으로 G5 에는 스킨이 G5 폴더 바로 아래 skin 폴더에 저장이 되는데, X 에서는 이를 관리하기 쉽도록 G5 폴더 아래, X 폴더가 있고 그 아래에 skin 폴더를 두었습니다.

이 때, skin 폴더의 위치만 틀릴 뿐 스킨 소스 파일 자체는 서로 호환이 됩니다.

즉, G5/skin 에 있는 스킨을 G5/x/skin 으로 복사하면 그대로 쓸 수 있으며 그 반대로 마찬가지입니다.

X 가 G5 와 스킨 폴더를 따로 따로 유지하기 위해서 G5 에 다양한 방법으로 패치를 가 합니다.

board skin 과 member skin 은 다른 스킨과 달리 lib 함수가 없습니다. 이와 같은 경우 폴더 자체를 바꾸어 주도록 패치하면 됩니다.

lib 함수가 있는 경우, lib 함수 자체를 패치해야 합니다.

주의 할 점은 X/skin 에 저장되는 모든 스킨은 반응형(Responsive)이어야 합니다.

왜냐하면 X 의 skin 에는 PC 버젼이나 Mobile 버젼의 구분이 따로 없기 때문입니다.

member skin

member skin 은 board skin 과 다르게 x/skin/member 하위에 있는 스킨만 사용가능하다.

따라서 member 스킨은 모두 x/skin/member 하위에 있어야만 가능하다.

실제로 member basic skin 이 x/skin/member/basic 에 존재한다. 또한 이것은 G5/skin/member/basic 의 것을 참조하도록 되어져 있다.

스킨 업데이트

웹 브라우저로 스킨 정보를 업데이트 하는 경우, G5/skin 의 것은 목록에 나타나지 않으므로 선택을 할 수 없다.

( 단, 소스 코드에서 G5/skin 아래의 해당 폴더 명을 적어 주면 사용 가능하다. )

모듈 만들기


x/module 에 폴더를 만듭니다.

배포 파일 만들기


배포 파일이란 X 를 설치하기 쉽도록 필요한 모든 소스 코드를 압축하여 하나의 파일로 만드는 것을 말합니다.

이 배포 파일을  홈페이지에 올려 놓으면 사용자들이 다운로드 하여 설치 할 수 있습니다.

배포 파일을 쉽게 만들기 위해서 etc/pack.php 를 준비 해 놓았습니다.

아래와 같이 실행을 하면 됩니다.

참고로 배포 파일 작성을 하는 pack.php 는 PHP 5.3 이상에서 동작합니다.

예) 배포 파일 만들기 순서

  1. 그누보드 설치
  2. git 에서 X 소스 다운로드
  3. X 의 submodule 다운로드
  4. $ php etc/patch.php
  5. $ php etc/patch.php install ( 이 부분은 pack.php 명령 전에 언제든지 실행하면 됨 )
  6. $ php etc/pack.php alpha.2014-04-10

배포 파일을 만들 때, “php etc/patch.php install” 을 하는 것은 필수입니다.

이렇게 해야지만 G5 를 설치 할 때 자동으로 X 관련 DB 테이블이 설치(적용)가 됩니다.

“php etc/patch.php install” 하는 방법은 아래와 같이 하면 됩니다.

1. G5 다운로드.

2. x 다운로드

3. “php etc/patch.php install” 실행

4. “php etc/patch.php” 실행

또는 사실....

1. G5 설치

2. “php etc/patch.php” 실행

한 다음 언제든지 “php etc/patch.php install” 을 실행해도 됩니다.

“php etc/patch.php install” 후에 반드시 그누보드를 설치 해야 합니다. 그렇지 않고 바로 “php etc/patch.php” 를 하게 되면, 에러가 발생합니다.

만약 “php etc/patch.php install” 을 하지 않고 G5 를 설치하고, 패키징을 한다면 설치를 할 때, 한글/영어 변환이 안됩니다. 즉, 이 말은 한글/영어 변환만 안될 뿐 상관없습니다.

참고로 배포 파일은 C:/tmp 에 만들어 집니다.

패치

배포 파일을 만들기 전에 먼저 패치를 해야 합니다.

특히, 설치 과정에서 영문으로 설치 할 수 있도록 한글/영문 선택 패치를 할 필요가 있으며, 필요하다면 언어 팩 패치도 같이 합니다.

참고

만약 현재 최신 버젼을 얻고자 한다면 https://github.com/withcenter/x 에서 master 파일을 다운로드 할 수 있습니다.

하지만 작업 중인 상태의 소스들이고 또 여러가지 많은 파일이 같이 다운로드 되어 권장하지 않습니다.

테마, 위젯, 모듈 배포하기


여러분이 만든 테마나 위젯, 모듈을 배포하기 원하신다면 아래의 과정을 따르면 됩니다.

  1. 테마, 위젯 또는 모듈을 제작
  2. https://github.com 에 소스 등록
  3. http://extended.kr 에 github.com 소스 URL 등록

X 배포 파일로 테마, 위젯, 모듈 작업을 한다면 git clone 방식으로 해야 할 것이며

X 패치 버젼을 git clone 하여 작업한다면 git submodule add 와 같은 방식으로 테마, 위젯, 모듈 개발 작업을 해야 할 것입니다.

config.xml

테마, 위젯, 모듈에는 config.xml 설정 파일이 있습니다.

이것은 해당 테마(위젯, 모듈)을 배포하는에 아주 중요한 정보를 제공합니다.

이 파일이 없다면, 올바른 배포가 되지 않습니다.

preview 사진

미리 보기 사진은 3 가지 종류가 있습니다.

그 중 preview.jpg 파일은 필수이며 너비 600px, 높이 600px 입니다.

그 외에 아래와 같이 두 가지 미리 보기 파일이 있으며 생략 가능합니다.

preview-small.jpg 300x300

preview-large.jpg 크기 제한없음

훅 : HOOK


훅이란 프로그램이 동작하는 중간에 특정 코드를 실행하게 하여 전반적인 흐름을 제어하는 것을 말합니다.

테마에서 훅 지정으로 프로그램의 흐름을 제어하기

이러한 훅을 테마를 만들 때 적절하게 사용을 하면 좋습니다.

x/theme/테마폴더명/init.php 에 훅을 지정하면 됩니다.

시작과 종료 Hook : x/etc/hook/xxxxx.begin.php, x/etc/hook/xxxxx.end.php

모든 G5 의 시작 스크립트는 common.php 와 tail.sub.php 를 로드합니다.

예를 들면 G5/bbs/board.php 가 그렇습니다.

만약 board.php 소스 코드의 중간에 HOOK 을 적용해야한다면 패치를 해야 하지만, 시작과 끝은 x/etc/begin.php 와 x/etc/end.php 에서 HOOK 을 적용 할 수 있습니다.

이와 같이 훅 스크립트를 만들 때, begin 과 end 부분은 따로 패치를 하지 않고 begin.php 와 end.php 에서 해결을 하면 됩니다.

common.php -> x.php -> begin.php 순서로 이동하기 때문에 begin.php 에서 훅 스크립트를 로드하고

tail.php 나 tail_sub.php 에서  end 부분의 훅 스크립트를 로드하면 됩니다.

훅리스트 : HOOK LIST

현재 hook list 를 따로 정리 해 놓지 않았습니다.

디버그 로그를 통해서 어떤 스크립트에서 어떤 hook 이 실행되는지 살펴보아야 합니다.

스크립트 재작성 : Rewrite Script


@doc

rewrite 의 경우는 훅과 틀리게 코드 전체를 다시 작성하는 것이다.

따라서 원본 스크립트에서는 그냥 return 을 해야한다.

예를 들면 g5/bbs/visit_insert.inc.php 와 같다.

rewrite 의 경우 G5 소스가 업데이트되면 같이 업데이트를 해야하므로 유심히 살펴보아야 한다.

방화벽


X 자체적으로 간단한 방화벽 체계를 만들어 놓았습니다.

x/etc/firewall.php 를 참고하십시오.

언어 글로벌 설정 ( 다국어 )


홈페이지에 여러 나라 언어를 적용 할 수 있습니다.

언어 설정은 x/etc/language 폴더에 있는

각 나라별로 php 파일을 수정하여 언어 설정을 할 수 있습니다.

예를 들면, 스크립트 소스에서 <?=lang(‘Write’)?> 와 같이 하고, 언어 설정 파일에 추가를 하면 됩니다.

주의: 언어 설정 파일에 기록을 할 때에는 동일한 코드 또는 소문자라야 합니다.

예) CODE 가 Write 라면,

“Write” 는 매치

“write” 는 매치

“wRite” 는 매치하지 않음.

x/etc/language/ko.php 파일의 예

<?php

$language_code['global settings'] = '기본 설정';

$language_code['write'] = '글 쓰기';

언어 설정은 기본적으로 x/etc/language 폴더에서 하지만 각 모듈 별 그리고 테마 별로 language 폴더를 두어서 할 수도 있습니다.

예를 들면 x/theme/default/language 나 x/etc/mall/language 와 같습니다.

언어 설정은 적용 순서는

먼저 x/etc/language 폴더의 정보가 적용되고

x/etc/모듈/language 의 것이 추가(또는 오버라이딩)되고

마지막으로 x/theme/테마/language 의 설정이 적용되는 것입니다.

따라서 x/theme/테마/language 에 언어 설정 코드가 없으면 x/etc/모듈/language 에서 찾고 모듈 언어 설정에도 해당 code 에 대한 언어 설정이 없으면 x/etc/language 의 설정을 사용하게 됩니다.

언어 설정 파일이 로드되는 위치는 라이프 사이클의 최 상단에서 적용이 되는 것으로 x/etc/language/load.php 에서 기본 언어 설정과 모듈 언어 설정을 같이 로드합니다.

게시판

게시 글 통합 테이블 x_post_data

다용도 목적으로 홈페이지에 등록되는 모든 글을 x_post_data 테이블에 모두 모아 놓았다.

글 입력

x::post_data_insert() 함수를 통해서 글을 저장 할 수 있다.

아래 파일을 참고한다.

x/etc/hook/write_comment_update.end.php

x/etc/hook/write_update.end.php

x/etc/porting/post_data.php

사이트


사이트의 기본 정보는 x_site_config 에 저장됩니다.

하지만 부가적인 정보는 x_meta 테이블에 저장이 됩니다.

x_site_config 에는 good 이라는 필드가 있는데, 이것은 관리자가 임의로 해당 사이트가 좋다고 추천 점수를 주는 것입니다.

이렇게 추천 점수를 준 후, 여러 가지 방법으로 활용을 할 수 있습니다.

예를 들면, 사이트가 여러개 있는 경우 그 중 몇 개를 추천 점수로 주고 외부에서 목록을 할 수 있도록 하는 것입니다.

참고 소스는

x/module/etc/site_list_for_philgo.php

이며, 아래와 같이 접속을 하면 됩니다.

http://www.work.org/g5-5.0b32/?module=etc&action=site_list_for_philgo&theme=n

G5 의 HTTP 값 인코딩

common.php 에서

get_magic_quotes_gpc() 이 활성화되어져 있으면 stripslashes() 통해서 un-escape 하고 mysql_real_escape_string() 으로 다시 escape 한다.

get_magic_quotes_gpc() 이 활성화되어져 있지 않으면 그냥 바로 mysql_real_escape_string() 으로 escape 한다.

문제는 escape 하지 않아야 할 내용도 모두 다 escape 해 버린다는 것이다.

예를 들면 $_POST 입력된 값들을 모두 모아서 인코딩한 다음 하나의 필드에 저장을 하고자 할 때, ( 직접적인 예를 들자면 string::scalar() 와 string::unscalar() 를 사용하는 경우 )

입력값을 그대로 DB 에 집어 넣으면 된다. 데이터가 인코딩되어서 저장되므로 이것은 SQL Injection 과도 상관이 없는 부분이다.

그런데 common.php 에서 이미 강제적으로 mysql_real_escape_string() 으로 변환이 되어져 버렸다.

config.php 에서

define('G5_ESCAPE_FUNCTION', 'mysql_real_escape_string');

를 통해서 수정이 가능하지만 왠지 꺼림칙하다.

그래서 common.php 에 아래 라인을 추가(패치)하여 필요할 때, $in 변수를 통해서 값을 사용 할 수 있도록 한다.

$in = array_merge( $_GET, $_POST );

쪽지 : memo


쪽지 전송은 다음과 같이 하면 됩니다.

        g::memo_send(

                array(

                        'from'                => 'admin',

                        'to'                        => 'admin',

                        'content'        => "This is just test ^^''; \"\"; later... "

                )

        );

모듈

폴더 및 파일 구성

admin_menu.php

최고관리자 페이지에 보여 줄 메뉴를 기록한다.

site_menu.php

각 사이트 관리자에게 보여줄 메뉴를 기록한다.

참고 : module/mall/site_menu.php

사이트 관리자 페이지에 메인 메뉴로서 하나만 등록 할 수 있으며,

서브 메뉴는 각 모듈 페이지에서 적절하게 처리를 하면 된다.

모듈 스크립트 실행 순서

먼저 module_begin 훅이 실행되고

그 다음에 init.php 가 존재하면 실행되고

모듈 스크립트가 실행되고

마지막으로 module_end 훅이 실행된다.

init.php

각 모듈에서 사용되는 관리자 페이지의 메뉴 등 … 기본 실행 코드를 넣어두면 된다.

주도메인 BASEDOMIN

주 도메인이란 www 를 제외한 기본 도메인을 말합니다.

예를 들어서 abc.com 을 말하며 www.abc.com 이나 new.abc.com 은 서브도메인입니다.

도메인

etc::domain() 은 x::domain() 의 alias 입니다.

이것은 현재 도메인을 리턴하는데, $_SERVER[‘HTTP_HOST’] 를 기반으로 합니다.

도메인 치환 참고

etc::domain() 에서 아래와 같이 주 도메인으로 접속하는 경우 www 서브도메인으로 자동 치환 하도록 했는데, 더 이상 이렇게 하지 않습니다.

한가지 주의 할 점은 서브도메인이나 “www.” 없이 주 도메인으로 만 접속한 경우 자동으로 “www.” 가 붙습니다.

예를 들면, 아래와 같습니다.

abc.domain.com -> abc.domain.com

def.domain.com -> def.domain.com

www.domain.com -> www.domain.com

domain.com -> www.domain.com

이것은 (서브)도메인을 기반으로 사이트 (메뉴, 게시판 등의) 설정을 하는데, “www.” 가 있는 것과 없는 것의 구분을 두지 않고 동일하게 적용하기 위해서입니다.

더 이상 이와 같이 하지 않으며, www 도메인도 완전한 하나의 서브도메인으로 인식을 하여 메뉴나 테마를 다르게 할 수 있습니다.

다만 원한다면 domain forwarding 을 할 수 있습니다.

도메인 포워딩 : Domain Fowarding

주 도메인의 경우 일반적으로 www 서브도메인과 같이 쓰는 경우가 일반적입니다.

하지만 기본 설정은 주 도메인과 www 서브도메인이 서로 다른 사이트가 되도록 설정되어져 있습니다.

이와 같은 경우 사이트 메뉴에서 해당 사이트의 설정에서 forward 를 www 서브도메인으로 해 주면 됩니다.

이렇게 하면, 주도메인으로 접속 할 때 자동으로 www 서브도메인으로 이동합니다.

물론 www 서브 도메인이 아닌 다른 도메인으로 이동하게 할 수도 있습니다.

@ 권장 : 주 도메인으로 접속하면 www 서브도메인으로 이동하도록 지정하기를 권장합니다.

사이트 생성

사이트 생성 직후 생성된 사이트의 관리자 페이지로 이동하는데, 이 때, 서브도메인과 쿠키가 호환되도록 해 놓으면 로그인이 유지가 되어서 관리자 페이지를 바로 볼 수 있다.

게시판 임시 데이터 집어 넣기

사이트 설치 테스트를 해야하는 경우는  빈번한 업데이트가 발생하는 경우 또는 DB 데이터를 초기화 해야하는 경우 등에 있어서 게시판의 글이 하나도 없는 경우 일일히 새로 작성을 해야 하는 경우가 있습니다.

이럴 때 편리하게 아래와 같이 하면 됩니다.

형식) php etc/test/post.php 게시판ID    도메인    글수

예제)

php etc/test/post.php default www.work.org 1000

php etc/test/post.php ms_test1_1 test1.work.org 200

php etc/test/post.php ms_test1_2 test1.work.org 200

php etc/test/post.php ms_test1_3 test1.work.org 200

php etc/test/post.php ms_test1_4 test1.work.org 200

php etc/test/post.php ms_test1_5 test1.work.org 200


레이어 팝업 창

------

default.js 에서 윈도우 크기가 조정이 되면 0.5 초 후에 콜백을 호출 한다.

아래의 코드에서 보듯이 0.5 초 단위로 끊어서 이벤트를 발생시킨다.

        var timer_resize = 0;

        $(window).resize( function() {

                if ( timer_resize ) clearTimeout( timer_resize );

                if ( typeof callback_window_resize == 'function' ) timer_resize = setTimeout( callback_window_resize, 500 );

        } );

아래와 같이 콜백 함수를 작성하면 된다.

<script>

function callback_window_resize()

{

        alert('resized ...');

}

</script>

-----------------------

실전 예:

popup_layer() 함수에서 팝업 내의 iframe 의 높이에 따라서 팝업 레이어 크기가 같이 변경이 되게 하는 방법

우선 윈도우즈(팝업 내의 iframe)의 크기가 변경이 되면, 상위 부모(레이어 팝업)으로 message 를 보낸다.

이 때, 메세지 내용은 'code': popup_layer_resize, 'height': 실제 iframe 높이 이다.

iframe 의 높이는 적절하게 변경이 되어야 하므로 아래와 같이 시간차를 두고 호출한다.

+40 은 기타 공간을 약간 포함한 것이다.

예를 들면 widget 관리자 페이지를 예로 들면,

1) module/widget/update.js 에 아래와 같이 기록되어져 있다.

---------------------------------------------------

        $('.widget-extra-button').click(function(){

                // ...

                resize_popup_layer();

        }

        window.onload = resize_popup_layer;

        function resize_popup_layer()

        {

                setTimeout( post_message_height, 300 );

                setTimeout( post_message_height, 1500 );

                setTimeout( post_message_height, 3500 );

        }

        function post_message_height()

        {

                var height = $('body').height() + 40 ;

                var data = { 'code' : 'popup_layer_resize', 'height' : height };

                parent.postMessage( data, '*' );

        }

--------------------------------------------------------

이것은 맨 처음 팝업 화면이 떴을 때와 추가 설정 버튼을 클릭할 때마다 새로운 iframe 의 크기를 부모 창으로 메세지를 보내는 것이다.

2) popup_layer() 함수로 팝업을 띄운 윈도우(부모)에서 받아서 처리를 하는 부분은 default.js 에 들어 있다.

window.addEventListener('message', message_receiver, false);

function message_receiver( e )

{

        if ( e.data.code == 'popup_layer_resize' ) {

                $('.layer_popup').css('height', e.data.height + 'px' );

                trace("popup_layer_resize: " + e.data.height + 'px');

        }

}

기타

외부 소스


http://phpseclib.sourceforge.net/

버젼 관리 및 업데이트


본 항목은 코어 개발자를 위한 것입니다.

일반 개발자는 본 항목을 보지 않아도 됩니다.

업데이트는 알림은 새로운 버젼의 업데이트가 있을 때, 웹 브라우저에 알림창을 표시하는 것입니다.

버젼은 “년도.월.일.패키징회수”로 나누어집니다.

예를 들면 “2014.03.20.5” 와 같다면 2014 년 3 월 20 일 5 번째 패키징(또는 수정)이라는 뜻입니다.

버젼 정보는 x/etc/version.php 에 기록됩니다.

업데이트 알림

업데이트가 있으면 http://extended.kr/x/etc/version.php 에 업데이트 버젼이 갱신됩니다.

X 를 설치한 사이트에서 최고 관리자가 로그인을 하면

body_begin hook 을 통해서 http://extended.kr 서버와 통신을 합니다.

업데이트가 있으면 홈페이지 상단에 업데이트가 있음을 표시합니다.

이 메세지는 최고 관리자로 로그인을 했을 때만 나타나므로 일반 사용자로 사용 할 때는 서버와 통신 자체를 하지 않습니다

클라이언트 측 업데이트 알림 코딩 순서

  1. 관리자 로그인
  2. body_begin hook 에서 iframe 으로 서버와 통신.
    이때, iframe 은 display:none 상태
  3. 업데이트가 있으면 iframe 의 display:block 으로 해 주고
    이 때, 서버로 부터 postmessage() 와 함께 출력 HTML 값이 iframe 에 뿌려진다.
  4. 업데이트가 없으면 그냥 iframe 은 계속 display:none 상태 유지.

서버 측 업데이트 알림 순서

아래의 링크로 접속이 이 있는가?

http://extended.kr/x/?module=update&action=check_submit&version=.....

그렇다면 x/etc/version.php 를 읽어서

클라이언트로 부터 넘어온 version 값과 비교해서 옛날 버젼이면

update 표시를 해 주는 자바스크립트 parent.postMessage() 로 업데이트를 알려주고,

업데이트 관련 메세지를 HTML 로 함께

클라이언트로 출력한다.

업데이트 알림

업데이트가 있음을 알리기 위해서는

http://extended.kr/x/etc/version.php 의 파일을 수정하면 됩니다.

간편 설치 및 업데이트


간편 설치(업데이트)란 웹 브라우저로 필요한 테마나 위젯, 모듈 등을 설치하는 것을 말합니다.

여러분이 만약 테마나 위젯 또는 모듈을 만들었다면 그리고 그것을 다른 사람과 공유하고 싶다면 아래와 같은 절차를 통해서 할 수 있습니다.

프로그램 개발

먼저 테마나 위젯, 모듈을 개발합니다.

개발을 할 때는 그냥 편한데로 하면 됩니다.

github.com 에 등록

여러분이 개바한 것을 다른 사람과 공유하고 싶다면 github.com 에 하나의 프로젝트로 등록해야 합니다.

이 때, config.xml 과 preview.jpg 를 올바로 작성 해야합니다.

github.com 프로젝트의 URL 을 X 사이트에 등록

여러분의 프로그램을 github.com 에 등록했으면 그 등록된 프로젝트 URL 을 복사해서 X 사이트에 등록하면 됩니다.


설치 테스트

위의 과정이 올바로 진행되었으면 관리자 페이지에서 간편하게 해당 프로그램을 설치를 할 수 있습니다.

실제로 올바로 설치가 잘 되는데, 여러분의 홈페이지에 먼저 테스트를 해 보셔야 할 것입니다.

에러, 트러블 슈팅

기본 함수 에러

undefined module() 과 같은 에러가 나는 것은 X 가 패치되지 않아 기본 함수 파일들을 로드하지 못한 경우 일 가능성이 크다.

IE 에서 동작 문제

IE 8 이하에서는 addEventListener 가 동작하지 않는다.

이에 따라서 widget admin 페이지에서 팝업창 크기가 자동 조절되지 않는다.

또한 IE 옛날 버젼에서는 jQuery 1.x 버젼이 사용되도록 했다.