C 스토어 SDK Document 작성년월일 : 2013.10.18 작성자및소속팀 : 정현 / SDK 개발팀
목차 1 개요... 4 1.1 CAFE24 APPLICATION SDK 란?... 4 1.2 약어및용어정리... 4 2 시스템구조... 4 2.1 SDK 구조... 4 2.2 APPLICATION 구조... 5 3 개발가이드... 6 3.1 개발흐름... 6 3.2 개발준비... 7 3.3 앱개발 ( 페이스북추천 - BOX )... 24 3.4 앱개발 ( 배너관리 )... 45 3.5 추가정보... 69 3.6 UI 가이드... 71 4 SDK CLASS... 72 4.1 상속관계... 72 4.2 FUNCTION LIBRARY... 73 5 API... 93 5.1 PRODUCT API... 93 5.2 CATEGORY API... 94 5.3 CATEGORY PRODUCT API... 95 5.4 PRODUCT OPTIONS API... 96 5.5 BASKET API... 96 6 CAFE24 OPEN API... 98 6.1 개요... 98 6.2 전체 ENDPOINT 리스트 ( 자세한내용은 6.5절참조 )... 98 6.3 API CALL... 99 6.4 API RESPONSE... 100 6.5 ENDPOINT (MAJOR VERSION 1)... 101 6.6 UPDATE LOG... 151 2
3
1 개요 1.1 Cafe24 Application SDK 란? Cafe24 Application( 이하, Application) 은 Cafe24 Application Store 시스템에서실행하는 PHP로작성된어플리케이션으로써, EC호스팅, 빌더호스팅등서비스호스팅을통해설치되며, 서비스호스팅을통해요청된어플리케이션이 Cafe24 Application Runtime 서버에서실행됩니다. Application 은간편하고쉽고, 빠른개발환경을지원하며, 매우쉽게어플리케이션을개발할수있습니다. Application 은 Runtime 환경아래에서동작하며, PHP 기반으로작성되어있습니다. 1.2 약어및용어정리 약어 / 용어 설명 SDK Cafe24 Application SDK 앱 Cafe24 Application 컨트롤러 Controller_Type_View 를상속받는클래스 ( PHP ) 뷰 브러우저화면을구성하는 tpl, html Admin 앱의데이터관리부분 ( 관리자부분 ) Front 앱의실제기능부분 ( 사용자부분 ) Seq 앱의데이터의 Sequence 번호 표 1-1 2 시스템구조 2.1 SDK 구조 Application Runtime 은크게 Server 영역과 Application 환경 / 구동, Application 실행영역으로구분되며, 여러분은 Application 실행영역에서동작하는 PHP 어플리케이션을개발할수있습니다. Application Library 는상기 Application 실행영역에서동작하는 PHP 어플리케이션을구현하기위한기본적인인터페이스라이브러리를제공합니다. 인터페이스라이브러리는컨트롤러를포함하고, 컨트롤러는서비스인터페이스 ($this- >Service), REDIS 인터페이스 ($this->redis), Storage 인터페이스 ($this->storage) 및파일업로드인터페이스 ($this->upload) 등을지원합니다. 또한다양한컨트롤러는다양한타입클래스라이브러리 (Controller_Admin, Controller_Api, Controller_Front 등 ) 를지원합니다. 4
2.2 Application 구조 2.2.1 디렉토리및파일구조 class admin api front test install public_html public_html resource assist css img js tpl application.xml Application PHP 영역관리자페이지를구성하는 Controller_Admin, Controller_AdminExec 기반인터페이스클래스 (4 SDK CLASS 참고 ) REST API 를지원하는 Controller_Api 기반인터페이스클래스사용자페이지를구성하는 Controller_Front, Controller_FrontExec 기반인터페이스클래스 Unittest_Testcase 기반단위테스트클래스 Application 설치영역설치 : EC호스팅 / 빌더호스팅스마트디자인영역개발자용스마트디자인영역 Resource 영역호스팅서비스 Code Assist 지원 Application CSS Application Image Application Java Script Application Template ( Controller_Type_View 상속클래스에서사용 ) Application Configuration File 2.2.2 Cafe24 Application 호출구조와호출방법 호출방법 ( URL, 스마트디자인 ) 호출위치 ( Class Name ) Class Resource ( ContextType ) URL /admin/index /admin/adminindex.php ( adminindex ) Controller_Admin ( Request ) /admin/indexexec /admin/adminindexexec.php ( adminindexexec ) Controller_AdminExec ( Request ) /front/sampleexec /front/frontsampleexec.php ( frontsampleexec ) Controller_FrontExec ( Request ) /app-css/ /resource/css CSS ( Resource ) /app-img/ /resource/img Image ( Resource ) /app-js/ /resource/js Javascript ( Resource ) SDE <div module="appid_sample"> /front/frontsample.php $Sample </div> 표 2-1 5
3 개발가이드 3.1 개발흐름 앱설계 앱의종류및기능을구상하고설계합니다. 앱생성 DEV CENTER 에계정을생성하여로그인한뒤앱을생성합니 다. Admin 구현 앱의 Admin 부분을구현합니다. Front 구현 앱의 Front 부분을구현합니다. 개발서버등록 앱을개발서버에등록합니다. ( Version 등록 ) 쇼핑몰테스트 쇼핑몰 ( 개발서버 ) 에앱을설치하여테스트합니다. 검증 마지막으로앱을검증합니다. C-Store 등록 검증된앱이 C-Store 에등록됩니다. 6
3.2 개발준비 3.2.1 환경설정 3.2.1.1 Eclipse Setting 1) http://www.eclipse.org/downloads/ 에서운영체제에맞는 Eclipse를설치합니다. 그림 3-1 그림 3-2 2) Help 탭의 Install New Software 로 PHP Developer Tools (PDT) SDK Feature 를설치합니다 7
그림 3-3 3) 설치후 Eclipse 재시작뒤 Window 탭의 Open Perspective 로 PHP 를활성화합 니다. 그림 3-4 4) Window 탭의 Preference 를열어 General -> Workspace -> Text file encording 을 UTF-8 로변경합니다. 8
그림 3-5 5) Window 탭의 Preference를열어 Genera->Content Types->Text->%contenttype.name.0 의 File associations 에 *.html 과 *.tpl 을추가하고 General- >Content Types->Text->HTML 의 File associations 에 *.tpl 을추가합니다. 3.2.1.2 Putty http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html 에서 SSH, Telnet 서버접속프로그램인 Putty 를설치하여 Git ( 형상관리 ) 를운용합니다. 한글사용을위해 Putty 설정의 Window -> Translation의 Remote character set 을 UTF-8로설정합니다. 3.2.2 앱생성 그림 3-6 9
http://dev.apps.cafe24.com 에로그인한뒤 + New Application 버튼을누릅니다. 그림 3-7 앱 ID 와 Type 등정보를설정한뒤저장합니다. 10
3.2.3 Remote System 그림 3-8 Eclipse 의 Window 탭의 Show View -> Other 를열어 Remote System 을활성화합 니다. 그림 3-9 11
그림 3-10 생성한앱을연결합니다. Hostname 은 " 앱아이디.app-sdk-xxx.cafe24.com" 입니다. 그림 3-11 12
그림 3-12 연결된앱의 Sftp Files->My Home 을열어 host 를인증및등록한뒤앱아이디.source 를 Create Remote Project 를합니다. User ID 는앱의 ID 입니다. 3.2.4 Hello World! 이제앱을개발하기위한환경설정이모두완료되었습니다. 개발자의첫걸음인 Hello World! 를출력해봅시다. 먼저 class/admin 에 adminhello.php 파일을만들고 Controller_Admin 인터페이스기반의클래스를생성합니다. 데이터출력을위해 SDK에서제공하는 view 함수와 assign 함수를사용합니다. 그림 3-13 파일이름과 class 명을맞춰주어야제대로동작합니다. Ex) adminhello.php, class adminhello생성이완료되었다면 resource/tpl 에 hello.tpl 파일을생성하고코드를입력합니다. 13
그림 3-14 두가지파일을생성하였다면 http:// 앱아이디.app-sdk-xxx.cafe24.com/admin/hello 을확 인하여 "Hello World!" 가정확히출력되었는지확인합니다. 그림 3-15 브라우저에컨트롤러의 Hello World! 가 assign되어출력된것을볼수있습니다. assign 함수는 view 함수전에사용되어야정상적으로동작합니다. $this->view( "hello" ) : resource/tpl/hello.tpl 의코드를뷰로구성합니다. $this->assign( "key", "value" ) : <?php echo $key;?> 로뷰 (tpl) 에서 value를출력합니다. 14
3.2.5 JS, CSS 그림 3-16 SDK 에서제공하는 importjs 함수와 importcss 함수로자바스크립트코드와 CSS 코드를 포함시킵니다. 그림 3-17 sample.css 의코드와 sample.js 코드가제대로등록된것을볼수있습니다. $this- >importjs("sample") : resource/js/sample.js 의코드를최적화하여등록합니다. $this->importcss("sample") : resource/css/sample.css 의코드를최적화하여등록합 니다. 15
3.2.6 writejs, writecss class/admin/adminhello.php class adminhello extends Controller_Admin protected function run($args) $this->importjs('sample'); $this->importcss('sample'); $this->writejs('alert("writejs 테스트입니다.")'); $this->writecss('#sample background-color : blue; '); $this->assign('hello','hello World!'); $bview = $this->view('hello'); if ( $bview!== false ) $this->setstatuscode('200'); js와 css파일을 import 시키지않고 SDK의 writejs 함수와 writecss 함수로컨트롤러부분에서직접사용가능합니다. 그림 3-18 writejs 와 writecss 가제대로동작한것을볼수있습니다. 3.2.7 Redis 데이터관리를위한 Redis를사용하여값을저장하고불러오겠습니다. class/admin 에 adminset.php 파일과 adminget.php 파일을생성하고 SDK의 Redis 객체와 get, set 함수를사용합니다. 참고사이트 : http://redis.io/ 16
class/admin/adminset.php class adminset extends Controller_Admin protected function run($args) $this->redis->set('sample', 'redis 데이터저장테스트입니다.'); $this->writejs('alert(" 저장이완료되었습니다.")'); SDK 의 Redis 객체함수인 set을사용하여 'redis 데이터저장테스트입니다 ' 라는문자열값을 'sample' 이라는키로저장합니다. 그림 3-19 동작을알림창으로확인합니다. class/admin/adminget.php class adminget extends Controller_Admin protected function run($args) $sdata = $this->redis->get('sample'); $this->assign('sampledata',$sdata); $bview = $this->view('get'); if ( $bview!== false ) $this->setstatuscode('200'); resource/tpl/get.tpl <?php echo $sampledata;?> SDK 의 Redis 객체함수인 get을사용하여 'sample' 키로값을불러와출력합니다. 17
그림 3-20 정상적으로출력되는것을확인할수있습니다. 3.2.8 스마트디자인 ( Front ) 사용자가실제로확인하는부분인 Front 부분은스마트디자인을기반으로동작합니다. 스마트디자인에데이터를출력하는방법을간단히알아보겠습니다. public_files/demo.html <div module="sampleapphgd_hello"> $hello </div> class/front/fronthello.php class fronthello extends Controller_Front protected function run($args) $this->setstatuscode('200'); $this->assign('hello', 'Hello World! - Base'); SDK에서는 div태그에 module 속성을읽어 Front를호출합니다. module= 앱아이디 _ClassName 으로작성합니다. ( 2.2.2 Cafe24 Application 호출구조와호출방법참고 ) SDK의 assign 함수를사용하여데이터를출력합니다. public_files/demo.html <div module="sampleapphgd_hello"> $hello </div> <div module="sampleapphgd_hello_3"> $hello </div> class/front/fronthello.php class fronthello extends Controller_Front protected function run($args) 18
$this->setstatuscode('200'); $iseq = $this->getsequence(); if ( $iseq!= null ) $this->assign('hello', 'Hello World! - Seq :'.$iseq); else $this->assign('hello', 'Hello World! - Base'); 스마트디자인에서 Front를호출할시 module="sampleapphgd_hello_3" 처럼모듈마지막에숫자를기입할수있습니다. 이숫자는 SDK의 getsequence 함수를사용하여값을얻을수있으며앱의데이터출력을 Seq를기준으로할경우유용하게사용됩니다. 그림 3-21 기본출력과 Seq 출력의구분을확인할수있습니다. public_files/demo.html 생략 <ul module="sampleapphgd_loop"> <li>$loop</li> <li>$loop</li> <li>$loop</li> </ul> class/front/frontloop.php class frontloop extends Controller_Front protected function run($args) $this->setstatuscode('200'); $icount = 10; for( $i = 1; $i <= $icount; $i++ ) $adata[]['loop'] = "loop-".$i; $this->loopfetch($adata); 19
SDK 의 loopfetch 함수를사용하면 2 차원배열로구성된반복적데이터를 front 에서출력 할수있습니다. demo.html 에 <li>$loop</li> 를반복적으로사용하여 loopfetch 함수가 정상적으로동작하게합니다. 그림 3-22 class/front/frontloop.php class frontloop extends Controller_Front protected function run($args) $this->setstatuscode('200'); $icount = $this->getloop(); for( $i = 1; $i <= $icount; $i++ ) $adata[]['loop'] = "loop-".$i; $this->loopfetch($adata); SDK 의 getloop 함수를사용하여반복적인구문 ( <li>$loop</li> ) 의개수를얻어올수있어반복적인데이터를출력시선택적으로사용이가능합니다. 그림 3-23 20
반복적구문이 3개이므로 3번의출력을확인할수있습니다. public_files/demo.html <!--@css(./hello.css)--> <!--@js(./hello.js)--> <div module="sampleapphgd_hello"> $hello </div> 생략 public_files/hello.css.xans-sampleapphgd-hello color : blue;.xans-sampleapphgd-hello font-size : 20px; public_files/hello.js $(document).ready(function() $('.xans-sampleapphgd-hello').click(function() alert(' js import 테스트입니다.') ); ) <!--@css( 경로 )-->, <!--@js( 경로 )--> 문법을사용하여 js 와 css 를 import 할수있습니다. 모듈이호출되면해당 div는 xans-element, xans-앱아이디, xans-앱아이디-classname 세개의클래스가추가되어해당모듈의 unique 한클래스를가지게됩니다. 이러한 unique 한클래스를 Selector로사용하면다른모듈간의 css, js 충돌을미연에방지할수있습니다. 그림 3-24 정상적으로동작한것을확인할수있습니다. 스마트디자인의좀더자세한설명은링크를참고바랍니다. 참고 : http://manual.echosting.cafe24.com/season2/index.html 21
3.2.9 환경변수 내용 참조방법 허가 호스팅서비스의 HTTP 정 $this->request->gethttpserver($sname=null); 읽기 보 앱세션 $_SESSION 읽기 / 쓰기 $this->request->getsession(); 읽기 요청파라미터 (Argments) $_REQUEST 읽기 $this->request->getargs(); 읽기 어플리케이션 ID APP_ID 읽기 $this->request->getappid(); 읽기 파일업로드 [SDKJS] 읽기 앱만료시간 APP_EXPIRE_TIME 읽기 앱만료상태 APP_EXPIRE_STATUS 읽기 표 3-1 위의표 3-1 과같이관련기능을구현할수있습니다. 세션을사용하고자한다면 PHP 문법과동일하게 $_SESSION 변수를사용하여참조하거나설정할수있으며, 클라이언트 IP 를참고하고자한다면 $this->request->gethttpserver(); 를호출하여확인할수있습니다. 파일을업로드할시 [SDKJS] 라는 SDK 고유스크립트를사용하고 Cafe24_SDK_Upload() 함수와 Cafe24_SDK_Upload_Submit() 함수를통해업로드기능을구현합니다. 파일업로드참고 : 3.4 앱개발 ( 배너관리 ), 3.4.2 Front ( 파일업로드 ) 3.2.10 단축경로 SDK 에서단축경로를제공하여사용자의편의를돕습니다. Type 실제경로 단축경로 URL http:// 앱아이디.app-sdkxxx.cafe24.com/InterfaceType/ControllerNam [link=interfacetype/controllername] ( InterfaceType 은 admin, api, front ) e Image resource/img/ [img] File 서버 /Storage/ 파일경로 / 파일이름 [file= 파일경로 / 파일이름 ] Public 서버 /Storage/public_files/ 파일경로 / 파일이름 [pfile= 파일경로 / 파일이름 ] File 표 3-2 길고복잡한전체경로를표 3-2 와같이간략하게사용가능합니다. File 의경우 Runtime 서버를통해 Storage에접근하게되고 Public File 의경우 Storage에직접접근하는차이 점이있습니다. 파일다운로드같은경우에 "[file= 파일 ]" 을사용하고 Storage 내이미지 파일의경우는 "[pfile= 파일 ]" 의단축경로를사용합니다. File이나 Public File 타입의경우는 앱생성시 Storage 를지원으로선택해야정상적으로동작합니다. 다음과같이사용될 수있습니다. 22
Tpl ( Template HTML ) <img src="[img]/move.jpg"> <img src="[pfile=sample/sample.jpg]"> <a href="[file=samplefile.txt]"> 문서다운로드 </a> <a href="[link=admin/index]"> 관리자시작페이지이동 </a> Controller $this->assign('link', '[link=admin/index]'); $this->writejs('location.href = "[link=admin/index]";'); Javascript var linkaddr = '[link=admin/index]'; location.href = linkaddr; 단축경로는스마트디자인의 <!--@css( 경로 )-->, <!--@js( 경로 )--> 문법으로파일을 import 하는경우에는동작하지않습니다. ( 스마트디자인 import 이미지경로 : 개발자용스마트디자인영역 ( public_html ) 에서사용할시 /app-img/ 이미지.jpg, EC호스팅 / 빌더호스팅스마트디자인영역 ( install/public_html ) 에서사용할시 /cstore-img/ 앱아이디 / 이미지.jpg ) 개발준비단계가모두마무리되었습니다. 이제본격적으로앱을개발하며 SDK에대해좀더자세히알아보도록하겠습니다. 23
3.3 앱개발 ( 페이스북추천 - Box ) 3.3.1 앱설계및생성 어떤종류와기능의앱을만들것인지설계합니다. 일반적으로종류는마케팅, 정보 / 편의기능으로나눌수있습니다. 종류와기능을설계하고 Admin과 Front를구분하여 UI 설계, DB 설계를하게됩니다. 페이스북플러그인을이용한앱을설계합니다. 앱설계앱이름종류기능 Admin Front DB Storage 페이스북추천 - Box 마케팅페이스북추천 - Box 는좋아요, 추천버튼이등록된페이지를리스트형식으로출력합니다. 쇼핑몰사용자간의페이스북추천을공유하여상품선택의방향을제시합니다. index 페이지에서도메인, 크기, 등플러그인에필요한값을저장하는 UI 페이스북플러그인 UI를사용 Redis 사용미사용표 3-3 앱설계가끝나면 http://dev.apps.cafe24.com 에서앱을생성하고 Eclipse 에서 Remote System 을사용해 Remote Project 를생성합니다. (3.2.2 앱생성, 3.2.3 Remote System 참고 ) 3.3.2 Admin ( 관리자 ) 데이터를저장하고앱을관리하는 Admin 부분을구현합니다. class/admin/adminindex.php class adminindex extends Controller_Admin protected function run($aargs) $this->inittemplate(); $this->setview(); private function inittemplate() $this->importjs('admin'); $this->importcss('admin'); private function setview() $bview = $this->view('index'); 24
if ($bview!==false) $this->setstatuscode('200'); resource/tpl/index.tpl <form name="fbrecommendbox" method="post" action="[link=admin/saveexec]"> <div class="section"> <div class="mtitle"> <h2> 페이스북추천 - Box 설정 </h2> </div> <div class="mboard type2 gsmall gflow"> <table border="1" summary="" id="recommendboxtable"> <caption> 페이스북추천 - Box</caption> <tbody> <tr> <th> 대표도메인 </th> <td> <input type="text" name="fb_host" class="ftext" value="" /> </td> </tr> 중략 </tbody> </table> </div> </div> <div class="mbutton"> <p> <a class="btnsubmit" href="javascript:;" id="btnsave"><span> 저장 </span> </a> </p> </div> </form> 데이터를입력하여저장할수있는컨트롤러와뷰를구현합니다. 25
그림 3-25 간단한관리자 UI가완성되었습니다. 이제입력된값을 form submit 으로데이터를전송하고전송된데이터를 Redis를사용하여저장하는코드를구현합니다. class/admin/adminsaveexec.php class adminsaveexec extends Controller_AdminExec protected function run($aargs) $bresult = $this->setfbrecommendboxdata($aargs); if ( $bresult!== true ) $this->writejs('alert(" 오류가발생했습니다.");'); $this->writejs('location.href="[link=admin/index]";'); else $this->writejs('alert(" 저장되었습니다.");'); $this->writejs('location.href="[link=admin/index]";'); private function setfbrecommendboxdata($aargs) foreach ( $aargs as $key => $value ) $bresult = $this->redis->set($key,$value); if ( $bresult!== true ) return false; return true; run함수를통해 php 코드가실행됩니다. 이때 run함수의첫번째파라미터 ( $aargs ) 에페이지로요청된데이터 ( $_REQUEST ) 가연관배열방식으로넘어옵니다. 넘어온데이터를 Redis 의 set 함수로저장합니다. index를 key로사용합니다. 26
class/admin/adminindex.php class adminindex extends Controller_Admin protected function run($aargs) // JS, CSS setting $this->inittemplate(); // Get Data $adata = $this->getdata(); $this->assign('afbdata',$adata); // view Setting $this->setview(); private function getdata() $adata = array( 'fb_host'=>'', 'fb_width'=>'', 'fb_height'=>'', 'fb_header'=>'', 'fb_target'=>'' ); foreach ( $adata as $key => $value ) $mvalue = $this->redis->get($key); // $this->redis->get('fb_host'); if ( $mvalue!== false ) $adata[$key] = $mvalue; return $adata; private function inittemplate() 생략 private function setview() 생략 Index에서저장된데이터를확인하는코드를구현합니다. Redis 객체의 get 함수로데이터를불러온뒤 assign 해줍니다. 'afbdata' 라는키로데이터를assign 하면 view 함수로호출된뷰에서 <?php $afbdata;?> 로사용할수있습니다. assign함수는 view 함수전에호출되어야정상적으로동작합니다. 27
resource/tpl/index.tpl 생략 <tr> <th> 대표도메인 </th> <td> <input type="text" name="fb_host" class="ftext" value="<?php echo $afbdata['fb_host']?>" /> </td> </tr> <tr> <th> 가로크기 </th> <td> <input type="text" name="fb_width" value="<?php echo $afbdata['fb_width']?>"/> px </td> </tr> <tr> <th> 세로크기 </th> <td> <input type="text" name="fb_height" value="<?php echo $afbdata['fb_height']?>"/> px </td> </tr> <tr> <th> 박스헤더 </th> <td> <?php $sselectfirst = $afbdata['fb_header'] === 'true'? 'checked="checked"' : ''; $sselectsecond = $afbdata['fb_header'] === 'false'? 'checked="checked"' : '';?> <label class="fchk"><input <?php echo $sselectfirst;?> type="radio" name="fb_header" value="true"> 유 </label> <label class="fchk"><input <?php echo $sselectsecond;?> type="radio" name="fb_header" value="false"> 무 </label> </td> </tr> 생략뷰로 assign 된데이터를사용하여저장과저장된데이터를출력하는 Admin 코드를구현해보았습니다. 3.3.3 REST API SDK에서제공하는 Controller_Api, Controller_Type_Rest 클래스로 REST API 를설계할수있습니다. 데이터를저장하는코드를 api로구현하면서간단히알아보도록하겠습니다. 28
class/api/apisave.php class apisave extends Controller_Api protected function get($args) return 'get'; protected function post($args) $bresult = $this->setfbrecommendboxdata($args['adata']); return $bresult; private function setfbrecommendboxdata($aargs) foreach ( $aargs as $key => $value ) $bresult = $this->redis->set($key,$value); if ( $bresult!== true ) return false; return true; protected function put($args) return 'put'; protected function delete($args) return 'delete'; POST 방식으로데이터를받아 Redis 에값을저장합니다. 첫번째파라미터로데이터를받아옵니다. ( $args ) resource/js/admin.js $(document).ready(function() var adminmethod = getadminmethod(); var adminevent = getadminevent(adminmethod); adminevent.load(); ); function getadminevent(adminmethod) return load : function() var self = this; self.submit(); 29
, submit : function() $('.btnsubmit').click(function() var sform = ('form[name=fbrecommendbox]'); // $(sform).submit(); adminmethod.ajaxsave(sform); ); function getadminmethod() return ajaxsave : function(sform) var adata = $(sform).serializearray(); var ajaxdata = ; for ( var i in adata ) var skey = adata[i]['name']; ajaxdata[skey] = adata[i]['value']; var surl = "[link=api/save]"; $.ajax( type: "post", async: true, url: surl, data: 'adata' : ajaxdata, success:function( result ) if( result.data == true ) alert( ' 저장되었습니다.'); else alert( ' 저장을실패하였습니다.'); ); API에값을 Ajax로전달하는스크립트를작성합니다. Form 데이터를 serializearray() 함수를사용하여배열화하고배열을데이터처리에맞게재구성합니다. 재구성된데이터를 jquery Ajax ( http://api.jquery.com/jquery.ajax/ ) 함수를사용하여 API에전송합니다. 30
그림 3-25 알림창으로 Api, Ajax 의정상적인동작을확인할수있습니다. 3.3.4 Front ( 사용자 ) 앱을출력하여사용자에게보여주는 Front 부분을구현합니다. class/front/frontdisplay.php class frontdisplay extends Controller_Front protected function run($args) $this->inittemplate(); $this->setstatuscode('200'); $adata = $this->getfbrecommendbox(); $sfbrecommendbox = $this->makedata( $adata ); $this->assign('fbrecommendbox', $sfbrecommendbox ); private function inittemplate() $this->importjs('front'); private function getfbrecommendbox() $adata = array( 'fb_host'=>'','fb_width'=>'','fb_height'=>'', 'fb_header'=>'','fb_target'=>'' ); foreach ( $adata as $key => $value ) $mvalue = $this->redis->get($key); if ( $mvalue!== false ) $adata[$key] = $mvalue; return $adata; 31
private function makedata( $adata ) if ( $adata['fb_host'] == '' ) $sdata = ''; else $shost = $adata['fb_host']; $sdata = '<div id="fb-root"></div>'; $sdata.= '<div class="fb-recommendations fb_iframe_widget" data-site="'.$shost.'" data-width="'.$adata['fb_width'].'" data-height="'.$adata['fb_height'].'" data-header="'.$adata['fb_header'].'" data-linktarget="'.$adata['fb_target'].'" ></div>'; return $sdata; Redis 에저장된값을불러옵니다. 불러온데이터를사용해 Html 문자열을작성하여 'fbrecommendbox' 키로 assign 해주었습니다. resource/js/front.js $(document).ready(function() (function(d, s, id) var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) return; js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/ko_kr/all.js#xfbml=1&appid="; fjs.parentnode.insertbefore(js, fjs); (document, "script", "facebook-jssdk")); ); 페이스북플러그인을사용하기위한스크립트코드를구현합니다. $this->importjs('front'); 로적용되며페이스북플러그인을동작시킵니다. public_html/demo.html <div module="devfbbox_display"> $fbrecommendbox </div> 스마트디자인으로 Front를호출하는 demo.html 을구현합니다. 32
그림 3-26 페이스북추천 - box 앱의사용자출력이제대로동작합니다. 페이스북플러그인이기때문 에추가적인 UI 설계가불필요합니다. 3.3.5 C-Store 올리기 3.3.5.1 설치파일생성 C-Store에등록되어앱사용자에게노출되는파일을생성합니다. install/public_files/skin1/skin1.html <!--@layout(/layout/basic/layout.html)--> <div module="devfbbox_display"> $fbrecommendbox </div> install/public_files/skin1/skin1_detail.html <div module="devfbbox_display"> $fbrecommendbox </div> 사용자에게노출되는설치파일은 install/public_files 경로에위치합니다. skin1.html 은실제쇼핑몰에설치되었을경우를표현하기위해 <!-- @layout(/layout/basic/layout.html)--> 문법으로 import 합니다. skin1_detail.html 에는실제앱을출력하는모듈을작성합니다. 3.3.5.2 샘플소스보기설정 C-Store는앱의 Application.xml과 resource/assist 데이터를사용하여샘플소스보기기능을제공합니다. 앱의정보에맞게 Application.xml을설정합니다. 33
그림 3-27 xml파일은 Design 탭을 Source탭으로변경하여수정합니다. Application.xml <?xml version="1.0" encoding="utf-8"?> <application> <langs support="ko" default="ko"></langs> <api use="off"> <ifs> </ifs> </api> <admin use="on" index="adminindex"> <ifs> <if class="adminindex" permission="off" desc=" 페이스북추천 - Box"></if> </ifs> <menus> </menus> </admin> <front use="on"> <ifs> <if name=" 페이스북추천 - Box" class="frontdisplay" permission="off" code-assist="on" desc=" 페이스북추천 - Box"> </if> </ifs> <review index="/[apps]/skin1/skin1.html"></review> </front> </application> 34
앱의설명이나 front class 이름, review 페이지경로등자신의앱의정보로 xml 코드를 수정해줍니다. <front><ifs><if> 의 code-assist 를 on 으로설정해야정상적으로동작 합니다. resource/assist/codehint/frontdisplay.xml <?xml version="1.0" encoding="utf-8"?> <codehint> <var value="fbrecommendbox" name=" 페이스북추천 - Box 출력 "></var> </codehint> resource/assist/sample/frontdisplay.html <div module="devfbbox_display"> $fbrecommendbox </div> resource/assist 를설정합니다. 앱을 C-Store 에올리기위한준비가끝났습니다. 이제소스를서버에커밋하여 C- Store에본격적으로등록합니다. 3.3.5.3 Git Commit SDK는버전관리 ( 형상관리 ) 시스템으로 Git를사용합니다. 간단한 Git 명령어를알아보고 Putty로서버연결을하여 Git 저장소에소스를커밋하겠습니다. Commands git add 파일 / 폴더명 Git에파일또는폴더를추가합니다. git commit 추가되거나변경된내용을확정합니다. git push 원격저장소를변경내용으로갱신합니다. git pull 로컬저장소를원격저장소에맞춰갱신합니다. 표 3-4 SDK 에서개발한앱을등록할때기본적으로알아야할간단한 Git 명령어입니다. 1인이앱개발을할시 add, commit, push 명령어만사용하면됩니다. 이제 Putty를연결하여 Git 저장소에 commit 합니다. 35
그림 3-28 Host Name 을입력하고연결타입을 SSH 로설정한뒤 Open 버튼을누릅니다. Save 버 튼으로저장을해놓으면좀더편하게사용할수있습니다. Host 정보를 registry 에등록합니다. 그림 3-29 아이디와패스워드를입력하여접속합니다. 위치를앱아이디.source 로변경합니다. 36
git add * 명령어로소스를추가하고 git commit -a 명령어로전체내용을커밋합니다. 커밋이명령어가정상적으로동작하였다면 vim 편집창이활성화됩니다. 첫번째라인에커밋한소스의 comment를입력하고저장후 vim 편집창을종료합니다. ( i로입력활성화, :wq 로저장및종료 ) Vim 참고 https://www.google.co.kr/search?q=vim, http://ko.wikipedia.org/wiki/vim 커밋이실행되고정보가출력됩니다. 커밋된정보를 push 명령어를사용하여원격저 장소를갱신합니다. push 명령어로원격저장소가갱신되어버전등록을할준비가끝났습니다. 37
3.3.5.4 Dev Center 버전등록 Dev Center http://dev.apps.cafe24.com 에서버전을등록합니다. 그림 3-30 + Version 버튼을눌러버전등록팝업을띄웁니다. 그림 3-31 버전의정보를입력한뒤 Regist 버튼을눌러등록을완료합니다. 그림 3-32 버전등록이완료되었습니다. 이제실제몰 ( 테스트서버 ) 에스마트디자인을사용하여앱 을설치합니다. 38
3.3.6 실제몰에적용 3.3.6.1 앱설치및설정 http://devsdkxx.cafe24.com/admin 실제몰 ( 테스트서버 ) 관리자접속후앱을설치합니다. 그림 3-33 전체앱목록에서앱을확인할수있습니다.( 최신순 ) 설치하기버튼을눌러설치합니 다. 그림 3-34 C 스토어 - 마이앱탭에서앱을관리합니다. 샘플소스보기버튼을누릅니다. 39
그림 3-35 Application.xml 와 resource/assit 데이터가잘작성되었는지확인합니다. 그림 3-36 전체소스복사를눌러소스를복사합니다. Install/public_files 경로의파일을복사및갱신하는부분입니다. Front 부분이수정되었을시꼭소스복사를하여갱신을해야합니다. 40
그림 3-37 앱데이터를입력하고저장합니다. 이제 front 에앱을등록합니다. 그림 3-38 3.3.6.2 스마트디자인을이용한 Front 등록디자인편집하기버튼을눌러스마트디자인에디터를실행시킵니다. 해당부분은 SDE 참고를부탁드립니다. http://manual.echosting.cafe24.com/season2/webmanual/editor/open/open.html 41
그림 3-39 그림 3-40 스마트디자인의앱폴더에설치된앱을찾아모듈코드를복사합니다. 이제쇼핑몰의 원하는위치에앱을배치합니다. 42
그림 3-41 그림 3-42 상품검색위에앱의소스를복사하고저장하였습니다. 이제실제페이지를확인합니다. 그림 3-43 페이스북추천 - Box 앱의설치가완료되었습니다. 다음은앱을업그레이드하는방법 에대해알아보겠습니다. 43
3.3.7 앱업그레이드 앱의기능을추가하거나수정할때앱의소스를변경 / 추가하게되고새로운버전을등록하여업그레이드를합니다. 소스를변경한뒤 3.3.5.3 Git Commit 과정과 3.3.5.4 Dev Center 버전등록과정을실행합니다. 그림 3-44 버전등록이정상적으로이루어지고쇼핑몰관리자의마이앱탭에서 Upgrade 버튼이활성 화된것을확인할수있습니다. 그림 3-45 Upgrade 버튼을누른후최대 1 분내에소스가적용됩니다. 44
3.4 앱개발 ( 배너관리 ) 3.4.1 앱설계및생성 배너이미지를업로드하여관리하는배너관리앱을설계합니다. 앱설계앱이름배너관리종류마케팅기능배너관리앱은배너이미지를등록하여쇼핑몰에배너서비스를편리하게등록, 사용할수있게해줍니다. Admin index 페이지에서등록된배너를리스트형식으로보여줍니다. 배너를등록하는 register 페이지와수정하는 modify 페이지를제공합니다. Front 이미지를정해진크기로출력 DB Redis 사용 Storage 사용 3.2.2 앱생성, 3.2.3 Remote System 과정을실행합니다. 앱생성시 Storage Support 와 Redis Support 값을꼭지원으로선택하여야합니다. 3.4.2 Admin ( 파일업로드 ) 배너를리스트형식으로보여주는 index의컨트롤러와뷰를생성합니다. class/admin/adminindex.php class adminindex extends Controller_Admin protected function run($args) $this->inittemplate(); $this->setview(); private function inittemplate() $this->importjs('index'); $this->importcss('index'); $this- >externalcss('http://img.echosting.cafe24.com/smartadmin/css/module.css'); $this- >externalcss('http://img.echosting.cafe24.com/smartadmin/css/myapps.css'); private function setview() $bview = $this->view(); if ($bview!==false) $this->setstatuscode('200'); 45
SDK 의 externalcss 함수를사용하여외부 CSS 를로드하였습니다. SDK 의 View 함수는파 라미터가없으면 class 이름으로 tpl 을호출합니다. Resource/tpl/index.tpl <div class="section"> <div class="mtitle"> <h2> 배너목록 </h2> </div> <div class="mctrl typeboard"> <p class="gctrlleft"> <strong class="ctrltxt"> 선택한항목을 </strong> <a href="javascript:;" class="btnctrl ebtndelete"><span> <em class="icodel"></em> 삭제 </span></a> </p> <p class="gctrlright"> <a href="[link=register]" class="btnctrlem"><span> 배너등록 </span></a> </p> </div> <div class="mboard type1"> <table border="1" summary="" class="etr"> <caption> 배너목록 </caption> <colgroup> <col class="chk" /> <col class="no" /> <col style="width:12%;" /> <col class="subject" /> <col style="width:25%;" /> <col style="width:10%;" /> </colgroup> <thead> <tr> <th scope="col" class="chk"> <input type="checkbox" name="chkall" class="chkall" /> </th> <th scope="col"> 번호 </th> <th scope="col"> 배너이미지 </th> <th scope="col"> 배너명 </th> <th scope="col"> 링크 URL</th> 46
</td> <th scope="col"> 사용여부설정 </th> </tr> </thead> <tbody class="center"> <tr> <td class="chk"> <input type="checkbox" class="chk_lists" value="" /> <td class="no"> </td> <td></td> <td class="subject"></td> <td class="left"></td> <td class="gbtn"> </td> </tr> <tr> <td colspan="6" class="nodata"> 등록내역이없습니다.</td> </tr> </tbody> </table> </div> <div class="mctrl typeboard"> <p class="gctrlleft"> <strong class="ctrltxt"> 선택한항목을 </strong> <a href="javascript:;" class="btnctrl ebtndelete"><span><em class="icodel"></em> 삭제 </span></a> </p> <p class="gctrlright"> <a href="[link=register]" class="btnctrlem"><span> 배너등록 </span></a> </div> </div> </p> 그림 3-46 47
등록된배너의리스트를출력하는 index UI 가완성되었습니다. 배너등록을위한 Register 페이지를구현합니다. class/admin/register.php class adminregister extends Controller_Admin protected function run($args) $this->inittemplate(); $this->setview(); private function inittemplate() $this->importjs('register'); $this->importcss('register'); $this->externalcss ('http://img.echosting.cafe24.com/smartadmin/css/module.css'); $this->externalcss ('http://img.echosting.cafe24.com/smartadmin/css/myapps.css'); private function setview() $bview = $this->view(); if ($bview!==false) $this->setstatuscode('200'); resource/tpl/register.tpl <form name="bannermanageform" id="bannermanageform" method="post" action="[link=registerexec]" enctype="multipart/form-data" > <div class="section"> <div class="mtitle"> <h2> 배너등록 </h2> </div> <p class="mrequired"><strong class="txtmust">*</strong> 필수입력사항 </p> <div class="mboard type2 gsmall"> <table border="1" summary=""> <caption> 배너등록 </caption> <tbody> <tr> <th scope="row"> 제목 <strong class="txtmust">*</strong></th> <td><input type="text" name="ba_name" maxlength="90" class="ftext" 48
style="width:50%;" /></td> </tr> <tr> <th scope="row"> 배너이미지 <strong class="txtmust">*</strong></th> <td> <p> <input type="file" size="55" name="ba_img" class="ffile" style="width:480px;" /> </p> <!-- <p class="gforminfo"> 선택된파일없음 </p> --> </td> </tr> <tr> <th scope="row"> 가로 <strong class="txtmust">*</strong></th> <td><input type="text" name="ba_width" class="ftext" style="width:50%;" /></td> </tr> <tr> <th scope="row"> 세로 <strong class="txtmust">*</strong></th> <td><input type="text" name="ba_height" class="ftext" style="width:50%;" /></td> </tr> <tr> <th scope="row"> 링크 URL <strong class="txtmust">*</strong></th> <td>http:// <input type="text" name="ba_link" maxlength="250" class="ftext" style="width:90%;" /></td> </tr> <tr> <th scope="row"> 링크타겟 <strong class="txtmust">*</strong></th> <td> <label class="fchk"><input type="radio" name="ba_target" id="ba_target_c" value="c" /> 새창 </label> <label class="fchk"><input type="radio" name="ba_target" id="ba_target_n" value="n" checked="checked" /> 현재창 </label> </td> </tr> </tbody> </table> </div> </div> <div class="mbutton"> <p> <a href="javascript:;" onclick="bannersubmit('bannermanageform');" 49
class="btnsubmit"><span> 저장 </span></a> <a href="[link=index]" class="btncancel"><span> 취소 </span></a> </p> </div> </form> 이제입력한값을저장페이지로전송하는스크립트를구현합니다. resource/js/register.js $(document).ready(function() var registermethod = getregistermethod(); var registerevent = getregisterevent(registermethod); registerevent.load(); ); function getregisterevent(registermethod) return load : function() var self = this; self.submit();, submit : function() $('.btnsubmit').click(function() var fname = ('bannermanageform'); registermethod.uploadsubmit(fname); ); function getregistermethod() return upload : function(fname) [SDKJS] var fcallback = function(); Cafe24_SDK_Upload( $(document.getelementbyid(fname)), 'callback':fcallback );, uploadsubmit : function(fname) var self = this; if ( self.formcheck(fname) ) [SDKJS] var fcallback = function(); Cafe24_SDK_Upload_Submit( $(document.getelementbyid(fname)), 50
'callback':fcallback ); return false;, formcheck : function ( fname ) var self = this; var form = document.getelementbyid(fname); if ( form.ba_name.value === "" ) alert( ' 제목을입력하세요.' ); form.ba_name.focus(); return false; if ( form.ba_img.value === "" ) alert( ' 이미지를선택하세요.' ); form.ba_img.focus(); return false; if ( form.ba_width.value === "" ) alert( ' 가로를입력하세요.' ); form.ba_width.focus(); return false; if ( self.numcheck(form.ba_width.value) ) alert( ' 값을정확히입력하세요.' ); form.ba_width.focus(); form.ba_width.select(); return false; if ( form.ba_height.value === "" ) alert( ' 세로를입력하세요.' ); form.ba_height.focus(); return false; if ( self.numcheck(form.ba_height.value) ) alert( ' 값을정확히입력하세요.' ); form.ba_height.focus(); form.ba_height.select(); return false; if ( form.ba_link.value === "" ) alert( ' 링크 URL을입력하세요.' ); form.ba_link.focus(); return false; return true; 51
, numcheck : function ( value ) return!/^(\- \+)?\d+(\.\d+)?$/.test($.trim( value )); SDK에서파일업로드를할때 SDK의고유문법을사용합니다. [SDKJS] 스크립트를기입후 submit 의경우에 Cafe24_SDK_Upload_Submit() 함수를사용하고그밖의이벤트의경우 ( a 태그이동 ) Cafe24_SDK_Upload() 함수를사용하여파일을업로드합니다. 배너관리앱에서는 form submit 시이미지를업로드하며 Cafe24_SDK_Upload_Submit() 함수가사용됩니다. 그림 3-47 값을입력하여데이터를전송하는 Register 페이지가완성되었습니다. 이제전송된데이터로배너를등록하는 RegisterExec 페이지를구현합니다. class/lib/libkey.php class libkey const BA_KEY = 'bannerdata'; const BA_KEY_SEQ = 'bannerdata:seq'; class/admin/adminregisterexec.php class adminregisterexec extends Controller_AdminExec protected function run($aargs) $aimginfo = $this->doupload(); $bresult = $this->addbanner($aargs, $aimginfo); if ( $bresult!== true ) $this->writejs('alert(" 오류가발생했습니다.");'); $this->writejs('location.href="[link=admin/index]";'); else $this->writejs('alert(" 등록되었습니다.");'); $this->writejs('location.href="[link=admin/index]";'); 52
private function doupload() // 업로드된파일얻음 $afile = $this->upload->uploadedfiles(); if ( empty($afile['ba_img']) == false ) $aimage = $afile['ba_img']; $ainfo = pathinfo( $aimage['filename'] ); // 업로드가능확장자지정 $simgextension = strtolower($ainfo['extension']); if (!in_array($simgextension, array('gif', 'jpg', 'jpeg', 'png', 'bmp')) ) return false; // 이미지이름암호화 $aimage['upload_name'] = md5(uniqid(rand(), true)). '.'. $simgextension; $aimage['upload_path'] = $this->getuploadpath().'image/'; $this->makeuploaddir( $aimage['upload_path'] ); // 업로드 $mresult = $this->upload- >moveuploadedfile($aimage['tmpname'], $aimage['upload_path'], $aimage['upload_name'] ); $buploadremove = $this->upload->removeuploadedfiles(); if ( $mresult == false) return false; else return $aimage; return false; private function makeuploaddir( $spath ) if ( $this->storage->is_dir( $spath) ) $this->storage->mkdir( $spath, true ); private function getuploadpath() return "public_files/". date('y'). "/".date('m'). "/". date('d'). "/"; private function addbanner($aargs, $aimginfo) 53
$adata = array(); $adata['ba_seq'] = $this->redis->incr( libkey::ba_key_seq ); $adata['ba_name'] = $aargs['ba_name']; $adata['ba_link'] = ( substr( $aargs['ba_link'], 0, 4 )!= "http" )? "http://".$aargs['ba_link] : $aargs['ba_link']; $adata['ba_target'] = $aargs['ba_target']; $adata['ba_width'] = $aargs['ba_width']; $adata['ba_height'] = $aargs['ba_height']; $adata['ba_status'] = 'N'; $adata['ba_img_path'] = $aimginfo['upload_path']; $adata['ba_img_name'] = $aimginfo['upload_name']; $sdataserial = serialize($adata); $iresult = $this->redis->rpush( libkey::ba_key, $sdataserial ); if ( $iresult > 0 ) return true; else return false; SDK에서제공하는 Upload 객체와 Storage 객체를사용하여이미지업로드를구현하고 Redis 객체를사용하여정보를저장합니다. Upload->uploadedFiles() 함수로업로드된이미지의정보를얻습니다. 얻어진정보를바탕으로이미지확장자검사를합니다. 이미지경로, 이미지이름을새롭게생성하고 Storage->is_dir() 함수로 Storage에같은경로의디렉토리가있는지확인, 없을경우 Stroage->mkdir() 함수로디렉토리를생성합니다. 디렉토리를생성한후 Upload->moveUploadedFile() 함수를사용하여 Storage 에업로드된이미지를저장합니다. 이미지업로드가완료되면업로드시생성한경로, 이름을포함하여배열을생성하고배열을 serialize 하여 Redis->rPush() 함수를사용하여 libkey::ba_key 로등록 ( 저장 ) 합니다. 54
그림 3-48 저장된배너를 index 페이지에서출력합니다. class/admin/adminindex.php class adminindex extends Controller_Admin protected function run($args) $this->inittemplate(); $abannerlist = $this->getalllist(); $this->assign('abannerlist',$abannerlist); $this->setview(); private function getalllist() $abannerlist = $this->redis->lrange(libkey::ba_key,0,-1); foreach( $abannerlist as $key=>$value) $abannerlist[$key] = unserialize($value); return array_reverse($abannerlist); SDK 의 Redis 객체함수인 lrange를사용하여해당키의저장된모든값을가져옵니다. serialize 되어저장되었기때문에 unserialize 해줍니다. array_reverse 함수를사용하여새로등록한값을최상위로출력합니다. resource/tpl/index.tpl <tbody class="center"> <?php if( count($abannerlist) > 0 ) foreach( $abannerlist as $row )?> <tr> <td class="chk"><input type="checkbox" class="chk_lists" value="<?php echo $row['ba_seq']?>" /> </td> <td class="no"><?php echo $row['ba_seq']?> </td> <td> <span class="frame"> <?php if (stripos($row['ba_img_path'], 'public_files/')===0) $row['ba_img_path'] = str_ireplace('public_files/', '', $row['ba_img_path']);?> <img src="[pfile=<?php echo 55
$row['ba_img_path'].$row['ba_img_name'];?>]" border="0" width="<?php echo $row['ba_width']?>" height="<?php echo $row['ba_height']?>" alt="<?php echo $row['ba_name']?> " /> </span> </td> <td class="subject"><a href="[link=modify]?seq=<?php echo $row['ba_seq']?>"> <?php echo $row['ba_name']?></a></td> <td class="left"><?php echo $row['ba_link']?> </td> <td class="gbtn"> <?php if ( $row['ba_status'] === 'N' )?> <a href="[link=stautsexec]?seq=<?php echo $row['ba_seq']?>&status=y" class="btnem"> <span><strong> 사용안함 </strong></span> </a> <?php else if ( $row['ba_status'] === 'Y' )?> <a href="[link=stautsexec]?seq=<?php echo $row['ba_seq']?>&status=n" class="btnem"> <span><strong> 사용함 </strong></span> </a> <?php?> </td> </tr> <?php else?> <tr> <td colspan="6" class="nodata"> 등록내역이없습니다.</td> </tr> <?php?> </tbody> assign 된데이터를테이블에입력합니다. "[pfile= 파일명 ]" 사용을위해 ba_img_path 데이터의 Public_files/ 를 str_ireplace() 함수로제거합니다. ( 3.2.9 단축경로참고 ) 56
그림 3-49 등록된배너가 index 페이지에출력되는되었습니다. 배너정보를수정하는 Modify 페이지를구현합니다. admin/class/adminmodify.php class adminmodify extends Controller_Admin protected function run($aargs) $this->inittemplate(); $abanner = $this->getbanner($aargs['seq']); list($avalue,$iindex) = $this->getvalueindex($abanner); $this->assign('abanner',$avalue); $this->setview(); private function getbanner($iseq) $aalllist = $this->redis->lrange( libkey::ba_key, 0, -1 ); $adata = array(); $icount = count($aalllist); for ( $i = 0; $i < $icount; $i++ ) $value = unserialize( $aalllist[$i] ); if ( is_array($value) ) $asect = array_intersect($value, array('ba_seq',$iseq)); if ( $iseq == $asect['ba_seq'] ) $adata[$i] = $value; break; return $adata; 57
private function getvalueindex( $arow ) if ( count( $arow ) > 0 ) $avalue = array_values($arow); $iindex = array_keys($arow); return array( $avalue[0], $iindex[0] ); return false; Redis->lRange() 함수를사용하여전체배너데이터를가져온뒤 Seq 값을기준으로수정하고자하는배너데이터를검색합니다. 검색하여얻어진데이터를 assign 하여출력합니다. resource/js/modify.js 생략 formcheck : function ( fname ) var self = this; var form = document.getelementbyid(fname); if ( form.ba_name.value === "" ) alert( ' 제목을입력하세요.' ); form.ba_name.focus(); return false; if ( form.ba_width.value === "" ) alert( ' 가로를입력하세요.' ); form.ba_width.focus(); return false; if ( self.numcheck(form.ba_width.value) ) alert( ' 값을정확히입력하세요.' ); form.ba_width.focus(); form.ba_width.select(); return false; if ( form.ba_height.value === "" ) alert( ' 세로를입력하세요.' ); form.ba_height.focus(); return false; if ( self.numcheck(form.ba_height.value) ) alert( ' 값을정확히입력하세요.' ); form.ba_height.focus(); form.ba_height.select(); return false; if ( form.ba_link.value === "" ) 58
alert( ' 링크 URL을입력하세요.' ); form.ba_link.focus(); return false; return true;, 생략 register.js 와 formcheck 함수만차이가있습니다. ( image 검사제외 ) resource/tpl/modify.tpl <form name="bannermanageform" id="bannermanageform" method="post" action="[link=modifyexec]" enctype="multipart/form-data" > <input type="hidden" name="seq" value="<?php echo $abanner['ba_seq']?>" /> <div class="section"> <div class="mtitle"> <h2> 배너수정 </h2> </div> <p class="mrequired"><strong class="txtmust">*</strong> 필수입력사항 </p> <div class="mboard type2 gsmall"> <table border="1" summary=""> <caption> 배너수정 </caption> <tbody> <tr> <th scope="row"> 제목 <strong class="txtmust">*</strong></th> <td> <input type="text" name="ba_name" maxlength="90" class="ftext" style="width:50%;" value="<?php echo $abanner['ba_name'];?>"/> </td> </tr> <tr> <th scope="row"> 배너이미지 <strong class="txtmust">*</strong></th> <td> <p> <input type="file" size="55" name="ba_img" class="ffile" style="width:480px;" /> </p> <p> <?php if (stripos($abanner['ba_img_path'], 'public_files/')===0) 59
$abanner['ba_img_path'] = str_ireplace('public_files/', '', $abanner['ba_img_path']);?> <img src="[pfile=<?php echo $abanner['ba_img_path'].$abanner['ba_img_name'];?>]" border="0" width="<?php echo $abanner['ba_width']?>" height="<?php echo $abanner['ba_height']?>" alt="<?php echo $abanner['ba_name']?> " /> </p> <!-- <p class="gforminfo"> 선택된파일없음 </p> --> </td> </tr> <tr> <th scope="row"> 가로 <strong class="txtmust">*</strong></th> <td><input type="text" name="ba_width" class="ftext" style="width:50%;" value="<?php echo $abanner['ba_width']?>"/></td> </tr> <tr> <th scope="row"> 세로 <strong class="txtmust">*</strong></th> <td><input type="text" name="ba_height" class="ftext" style="width:50%;" value="<?php echo $abanner['ba_height']?>"/> </tr> <tr> <th scope="row"> 링크 URL <strong class="txtmust">*</strong></th> <td>http:// <input type="text" name="ba_link" maxlength="250" class="ftext" style="width:90%;" value="<?php echo str_replace("http://", "", $abanner['ba_link']);?>"/> </tr> <tr> <th scope="row"> 링크타겟 <strong class="txtmust">*</strong></th> <td> <label class="fchk"><input type="radio" name="ba_target" id="ba_target_c" value="c" <?php if( $abanner['ba_target'] == 'C' ):?> checked="checked" <?php endif;?> /> 새창 </label> <label class="fchk"><input type="radio" name="ba_target" id="ba_target_n" value="n" <?php if( $abanner['ba_target'] == 'N' ):?> checked="checked" <?php endif;?> /> <label for="ba_target_n" /> 현재창 </label> </td> </tr> </tbody> 60
</div> </div> </table> <div class="mbutton"> <p> <a href="javascript:;" class="btnsubmit"><span> 수정 </span></a> <a href="[link=index]" class="btncancel"><span> 취소 </span></a> </p> </div> </form> 수정할배너의데이터를뷰에출력합니다. 값을수정하고수정된데이터를 ModifyExec에전송합니다. ModifyExec 페이지에서 Redis 에데이터를갱신합니다. admin/class/modifyexec.php class adminmodifyexec extends Controller_AdminExec protected function run($aargs) $abanner = $this->getbanner($aargs['seq']); list($avalue,$iindex) = $this->getvalueindex($abanner); $aimginfo = $this->doupload(); if( $aimginfo!== false ) $this->unlinkimg($avalue); $bresult = $this->setbanner($aargs, $aimginfo, $avalue, $iindex); if ( $bresult!== true ) $this->writejs('alert(" 오류가발생했습니다.");'); $this->writejs('location.href="[link=admin/index]";'); else $this->writejs('alert(" 수정되었습니다.");'); $this->writejs('location.href="[link=admin/modify]?seq= '.$aargs['seq'].'";'); private function setbanner($aargs, $aimginfo, $avalue, $iindex) $adata = array(); $adata = $avalue; $adata['ba_name'] = $aargs['ba_name']; $adata['ba_link'] = ( substr( $aargs['ba_link'], 0, 4 )!= "http" )? "http://".$aargs['ba_link'] : $aargs['ba_link']; $adata['ba_target'] = $aargs['ba_target']; 61
$adata['ba_width'] = $aargs['ba_width']; $adata['ba_height'] = $aargs['ba_height']; if ( $aimginfo!== false ) $adata['ba_img_path'] = $aimginfo['upload_path']; $adata['ba_img_name'] = $aimginfo['upload_name']; $sdataserial = serialize($adata); $bresult = $this->redis->lset( libkey::ba_key, $iindex, $sdataserial ); if ( $bresult!== false ) return true; else return false; private function unlinkimg( $avalue ) $this->storage->unlink( $avalue['ba_img_path']. $avalue['ba_img_name'] ); private function doupload() 생략 private function getbanner($iseq) 생략 private function getvalueindex( $arow ) 생략 private function makeuploaddir( $spath ) 생략 private function getuploadpath() 생략 수정할배너의데이터를얻어와기본값을설정합니다. 업로드된이미지가있을시이미지를업로드한뒤 Storage->unlink 함수를사용하여원래있던이미지를삭제합니다. 수정된배너정보로 Redis->lSet() 함수를사용하여 Redis에갱신합니다. 62
그림 3-50 배너의사용여부를설정하는 StatusExec 페이지를구현합니다. admin/class/statusexec.php class adminstautsexec extends Controller_AdminExec protected function run($aargs) if ( isset($aargs['seq']) ) $abanner = $this->getbanner($aargs['seq']); list($avalue,$iindex) = $this->getvalueindex($abanner); $avalue['ba_status'] = $aargs['status']; $iindex, $sdataserial ); if ( isset($iindex) ) $sdataserial = serialize($avalue); $bresult = $this->redis->lset( libkey::ba_key, ; if ( $bresult ) $this->writejs('location.href="[link=admin/index]"'); return true; $this->writejs('history.back(-1)'); return false; private function getbanner($iseq) 생략 private function getvalueindex( $arow ) 생략 63
Seq 값과 Status 값을전송받아 Redis->lSet 함수로사용여부값을갱신합니다. 갱신한뒤 [link=admin/index] 페이지로돌아갑니다. 설정된사용여부값은 Front에출력시기준으로사용됩니다. 마지막으로등록된배너를삭제하는 DeleteExec 페이지를구현합니다. resource/js/index.js $(document).ready(function() var indexmethod = getindexmethod(); var indexevent = getindexevent(indexmethod); indexevent.load(); ); function getindexevent(indexmethod) return load : function() var self = this; self.bannerdelete();, bannerdelete : function() $(".chkall").click(function() if ( this.checked ) $(".chk_lists").attr("checked", "checked"); else $(".chk_lists").removeattr("checked"); ); $(".ebtndelete").click(function() indexmethod.dodelete(); ); function getindexmethod() return dodelete : function() var seqs = []; $(".chk_lists").each(function() if ( this.checked ) seqs.push( this.value ); ); if ( seqs.length < 1 ) alert( ' 삭제하실배너을선택하셔야합니다.'); 64
return; if ( confirm(' 선택된배너를삭제합니다 ' ) ) location.href = "[link=admin/deleteexec]?seqs=" + seqs.join(","); 체크된배너들을검사합니다. 하나이상의체크를판단한후체크된배너의 Seq를 DeleteExec 페이지에전송합니다. join(",") 함수를사용하여배열값을 ", " 구분의문자열로변환합니다. Admin/class/adminDeleteExec.php class admindeleteexec extends Controller_AdminExec protected function run($aargs) $iseqs = $aargs['seqs']; if ( $iseqs ) $aseq = explode( ",", $iseqs ); foreach ( $aseq as $iseq ) $abanner = $this->getbanner($iseq); if ( count( $abanner ) > 0 ) list($avalue,$iindex) = $this- >getvalueindex($abanner); $this->storage- >unlink( $avalue['ba_img_path']. $avalue['ba_img_name'] ); if ( count( $avalue ) > 0 && isset($iindex) ) $sdataserial = serialize($avalue); $bresult = $this->redis- >lrem( libkey::ba_key, $sdataserial, 0 ); if ( $bresult ) $this->writejs("location.href='[link=admin/index]'"); return; $this->writejs('history.back(-1)'); return false; private function getbanner($iseq) 생략 65
private function getvalueindex( $arow ) 생략 삭제할배너가두개이상일때 Seq값이 ", " 구분으로전송됩니다. 전송된문자열을 explode 함수로배열화한뒤 foreach 루프문을사용합니다. storage->unlink() 함수를사용하여 Storage 에서저장된이미지를삭제합니다. Redis->lRem() 함수를사용하여해당배너를 Redis 에서삭제합니다. 세번째인자값을 0으로하면해당데이터하나만삭제합니다. 0이외의값의설명은링크를참고바랍니다. ( lrem 참고 : http://redis.io/commands/lrem ) 배너를관리하는 Admin 페이지가완성되었습니다. 이제등록된배너를출력하는 Front 를구현합니다. 3.4.3 Front ( Loopfetch ) 배너들을출력합니다. 배너전체출력과 Seq 번호로개별적인출력을구현합니다. public_html/demo.css.xans-devbanner li padding: 0 0 5px; list-style-type: none; public_html/demo.html <ul module="devbanner_display"> <!--@css(./demo.css)--> <li>$banner</li> <li>$banner</li> </ul> <ul module="devbanner_display_1"> <!--@css(./demo.css)--> <li>$banner</li> </ul> 위의코드처럼 <li>$banner</li> 를두번이상똑같이반복하여코드를구현하게되면반복된데이터를 SDK의 loopfetch 함수를사용하여 front에서사용할수있습니다. 스마트디자인에서 css를설정할수있도록 html 코드에서 <!--@css(./demo.css)--> 처럼 css를추가합니다. module="devbanner_display_x" 는 X를 SDK의 getsequence 함수를사용하여값을얻습니다. 배너의 Seq 를기입하여개별적인출력을구현합니다. admin/front/frontdisplay.php class frontdisplay extends Controller_Front public function run( $aargs ) $iseq = $this->getsequence(); if (!empty( $iseq ) ) 66
$this->bannerassign( $iseq ); else $this->loopassign(); $this->setstatuscode('200'); private function bannerassign($iseq) $arow = $this->getbanner($iseq); list($avalue,$iindex) = $this->getvalueindex($arow); $alist[] = $avalue; $shtml = ""; if ( isset( $alist[0] ) ) $shtml = $this->makehtml( $alist[0] ); $this->assign('banner', $shtml); private function loopassign() $alist = array(); $iloop = $this->getloop(); $aalllist = $this->redis->lrange( libkey::ba_key, 0, -1 ); $abannerall = array(); $icount = count($aalllist); for ( $i = 0; $i < $icount; $i++ ) $abannerall[] = unserialize( $aalllist[$i] ); foreach ( $abannerall as $k => $v ) if ( $v['ba_status'] == 'N') $alist[] = $v; $adata = $this->makeloopfetchdata( $alist ); if ($adata) if ( $iloop > 1 ) $this->loopfetch($adata); else $this->loopfetch( 'banner', $adata[0]['banner'] ); else $this->assign('banner', "<div class='bannermanage-none-info'> 등록된배너가없습니다.</div>"); public function makeloopfetchdata( $abanner ) 67
$adata = array(); if ( is_array($abanner) ) foreach( $abanner as $arow ) $adata[]['banner'] = $this->makehtml($arow); return $adata; private function makehtml( $arow ) $shtml = ""; $shtml.= '<div>'; $slink = ( substr( $arow['ba_link'], 0, 4 )!= "http" )? "http://".$arow['ba_link'] : $arow['ba_link']; $starget = ( $arow['ba_target'] == 'N' )? "" : " target='_blank' " ; $shtml.= '<a class="banner_link" href="'. $slink.'" '. $starget. ' rel="'. $arow['seq']. '" >'; if (stripos($arow['ba_img_path'], 'public_files/')===0) $arow['ba_img_path'] = str_ireplace('public_files/', '', $arow['ba_img_path']); $shtml.= '<img src="[pfile='. $arow['ba_img_path']. $arow['ba_img_name'].']" alt="'. $arow['ba_name']. '" '; $shtml.= 'width="'.$arow['ba_width'].'" height="'.$arow['ba_height'].'"/>'; $shtml.= "</a>\n"; $shtml.= "</div>\n"; return $shtml; private function getbanner($iseq) 생략 private function getvalueindex( $arow ) 생략 SDK의 getsequence 함수를사용하여 module=" 앱아이디 _ClassName_X" 의 X 값을얻어옵니다. X값의유무를판단하여배너전체를출력할지해당 Seq에배너만출력할지구분합니다. 해당 Seq의배너만출력할경우 Seq로배너데이터를 Redis 에서얻습니다. 얻은데이터를 makehtml 함수를사용하여 Html을문자열로재구성한뒤 assign 합니다. 전체를출력할경우전체배너데이터를 makehtml 함수로재구성한뒤 68
makeloopfetchdata 함수를사용하여 2차원배열로만듭니다. 배너 HTML을값으로 'banner' 를 index로구성된 2차원배열데이터는 SDK의 loopfetch 함수의인자로사용됩니다. SDK의 getloop 함수로얻은 $iloop 값은반복된 Html 코드 ( <li>$banner</li> ) 의개수를반환합니다. 이값이 1보다클때전체배너의데이터를 loopfetch 하고그렇지않을경우배너하나의데이터만 loopfetch( $this->loopfetch( 'banner', $adata[0]['banner'] ); ) 합니다. 그림 3-51 위의붉은박스가전체배너를출력한 Front 이고아래붉은박스가 1번배너를출력한모습입니다. 이제 3.3.5 C-Store 올리기, 3.3.6 실제몰에적용과정을통해앱을완성합니다. 3.5 추가정보 3.5.1 Redis 3.5.1.1 설명 Redis 는 "Remote Dictionary System" 의약자로메모리기반의 Key / Value Store 입니다. No-Sql 데이터베이스이며 In memory 데이터베이스로분류하기도합니다. 다양한데이터구조체를지원하며인스턴트그램, LINE메신져, StackOverFlow, 등여러서비스에사용되고있습니다. 모든데이터를메모리에저장하여매우빠른 Read, Write 속도가장점입니다. 69
3.5.1.2 기본명령어 In Redis In SDK SET key value $this->redis-> 키에값를저장합니다. set( "key", "value" ); GET key get( "key" ); 키에값를불러옵니다. INCR key incr( "key" ); 키에저장된정수값에 1을더해줍니다. DEL key del( "key" ); 키를삭제합니다. RPUSH key value rpush( "key", 키에값을추가합니다. "value"); LRANGE key i j lrange( "key", i, j ); 키에저장된값을구간별로불러옵니다. LINDEX key i lindex( "key", i ); 키에저장된값을인덱스별로불러옵니다. LSET key i value lset( "key", i, 키에저장된값을인덱스별로수정합 "value" ); 니다. LLEN key llen( "key" ); 키에저장된값의전체개수를불러옵니다. LREM key i value lrem( "key","value", 키에저장된값을인덱스를기준으로 i ); 삭제합니다. 표 3-5 참고사이트 : http://redis.io/commands 3.5.2 Git 3.5.2.1 설명 Git 는프로그램등의소스코드관리를위한분산버전관리시스템입니다. 빠른수행속도에중점을두고있는것이특징입니다. 최초에는 Linus Benedict Torvalds 가리눅스커널개발에이용하려고개발하였으나, 현재는널리사용되고있습니다. Git의작업폴더는모두, 전체기록과각기록을추적할수있는정보를포함하고있으며, 완전한형태의저장소입니다. 네트워크에접근하거나중앙서버에의존하지않습니다. 3.5.2.2 기본명령어 Commands git --version 현재 git의버전을확인합니다. git init 현재디렉토리에 git 저장소를생성합니다. git add 파일명 git에파일또는폴더를추가합니다. git commit 추가되거나변경된내용을확정합니다. git push 원격저장소를변경내용으로갱신합니다. git pull 로컬저장소를원격저장소에맞춰갱신합니다. Git status 커밋되지않은변경사항을조사합니다. Git diff 원격저장소와현재작업트리의차이점을보여줍니다. Git mv 파일명새파일명 기존의존재하는파일을새파일로이동합니다. 70
Git checkout --파일명 커밋하지않은파일의변경내용을취소하고이전상태로돌립 니다. svn에서 revert와동일합니다. Git branch 현재존재하는브랜치를조회합니다. Git branch 브랜치명 브랜치명의새로운브랜치를만듭니다. Git log 커밋로그들을볼수있습니다. Git revert 커밋명 기존의커밋에서변경한내용을취소해서새커밋을만듭니 다. Git clone 저장소주소 원격저장소를복제하여저장소를생성합니다. Git fetch 원격저장소에서변경사항으로원격브랜치를생성합니다. 참고사이트 : http://gitref.org/, http://www.git-scm.com/ 3.6 UI 가이드 3.6.1 표준 UI 가이드 카페24는쇼핑몰운영자들의편의를의해크로스브라우징및내부의표준을준수하고있습니다. 또한개발자분들의편의를위해따로 UI에대한고민을덜어드리기위해표준 UI/UX 가이드를제공해드리고있습니다. ( 바로가기 : http:/img.echosting.cafe24.com/guide/suio/) 71
4 SDK Class 4.1 상속관계 4.1.1 Is-a 관계 Controller_Type_ Parent_Base Controller_Type_ Rest Controller_Type_ Parent_Template Controller_ Api Controller_Type_ View Controller_Type_ Xans Controller_ Admin Controller_Type_ Exec Controller_ Front Controller_ AdminExec Controller_ FrontExec 4.1.2 Has-a 관계 ApplicationInterface Request ApplicationInterface Response Service Controller_Type_ Parent_Base Storage RedisSdk Language Upload 72
Controller_Type_ Parent_Template C_T_P_T Fetcher C_T_P_T UIPackage 4.2 Function Library 4.2.1 class Controller_Type_Parent_Base getargs mixed getargs( $sname ) URL 매개변수값을반환합니다. Parameter string $sname 반환할매개변수의값의키를입력합니다. Example [ URL ] http://cafe24.com?no=3 $ino = $this->getargs('no'); $ino -> 3 setstatuscode object setstatuscode( $istatuscode ) 현재페이지의상태값을설정합니다. Parameter integer $istatuscode 설정할상태값을입력합니다. Example $this->setstatuscode(200); StatusCode -> 200 getstatuscode 73
int getstatuscode() 현재페이지의상태값을인트형으로반환합니다. Example $istatuscode = $this->getstatuscode(); $istatuscode -> 200 setmessage object setmessage( $smessage ) HTTP 메시지를설정합니다. Parameter string $smessage 설정할 HTTP 메시지를입력합니다. Example $this->setmessage('interface Error!'); Message -> Interface Error! getmessage string getmessage() HTTP 메시지를가져옵니다. Example $this->setmessage('ok.'); $smessage = $this->getmessage(); $smessage -> 'Ok.' getinterface string getinterface() 현재페이지의 Interface 를반환합니다. Example $sinterface = $this->getinterface(); $sinterface -> 'Index' 74
getlangcode string getlangcode() 현재페이지의 Language Code 를반환합니다. Example $slangcode = $this->getlangcode(); $slangcode -> 'ko' 4.2.2 class Controller_Type_Rest get get( $args ) Rest Api 의 GET Method Parameter array $args URL 매개변수 post post( $args ) Rest Api 의 POST Method Parameter array $args URL 매개변수 put put( $args ) Rest Api 의 PUT Method Parameter array $args URL 매개변수 delete 75
delete( $args ) Rest Api 의 DELETe Method Parameter array $args URL 매개변수 4.2.3 class Controller_Type_Parent_Template assign object assign( $sassign, $mdata ) php 데이터를뷰로 fetch 합니다. Parameter string $sassign 설정할키를입력합니다. mixed $mdata fetch 할데이터를입력합니다. Example [ tpl ] <div><?php echo $title?></div> $this->assign( 'title', 'Assign Func' ); Output -> 'Assign Func' writejs object writejs( $scontent ) JavaScript 를 php 에서직접사용합니다. Parameter string $scontent 사용할 JavaScript를문자열로입력합니다. Example $this->writejs( 'alert("sdk writejs")' ); JS -> alert('sdk writejs'); writecss object writecss( $scontent ) CSS 를 php 에서직접사용합니다. 76