Module Admin Controller for Insert/Update
모듈 입력/수정과 컨트롤러(Controller)
예제로 만들고 있는 example 모듈에서 새로운 모듈(mid)을 추가하고 수정할 수 있는 액션과 그에 따른 진행 과정을 그린 설계도이다. 모듈(module)을 추가 한다는 것은 example 모듈과 같이 기능적인 모듈을 추가한다는 것이 아니라, 앞으로 example 모듈이 생성하고 관리하는 자손(자식이라는 말은 어감이 쫌...^^) 모듈, 즉 XE코어가 인식하고 독립적으로 활용될 수 있는 모듈의 아이디(mid)와 모듈의 고유 식번 번호(module_srl)을 생성한다는 뜻이다. 이러한 백엔드 프로그램을 완성하게 되면 추후 만들고자 하는 모듈(mid)의 프론트 엔드 프로그램도 호적(?)에 등록하고 관리할 수 있는 근거가 된다.
모듈(mid)을 등록하기 위해서는 컨트롤러 파일의 도움을 받아야 한다. 이때 새로 등장하는 친구가 있다. 폼(Form) 필터(Filter)와 자바스크립트(javascript)다.(앞으로 JS라고 부른다.) 앞서 관리자 목록을 구현하기 위한 과정을 이해하였다면 아래 그림도 이해가 쉬울 것이다. 폼을 작성하여 전송(submit)하게 되면 곧바로 컨트롤러로 보내지 않는다. 우선 폼의 내용이 유효한지 검사해 본다. 이것은 폼 필터가 확인한다. 폼의 내용이 유효하고 이상이 없으면 컨트롤러에게 보내지고 컨트롤러는 함께 따라온 모듈 정보(module_info)를 확인한 후에 고유 식별번호(module_srl)가 있는지 조건으로 체크하고 없으면 새로 입력하거나 있으면 수정을 요청한다. 이때 입력과 수정은 컨트롤러 자신이 처리하는 것이 아니다. module 컨트롤러를 확장하여 부탁하는 것이다.
module 컨트롤러가 작업을 완료하면 이전의 폼 필터(Filter)가 폼의 내용을 전송하면서 자신(example)의 컨트롤러에게 부탁해 두었던 말이 있다. "컨트롤러는 일이 잘 처리 되었는지 결과를 내게 꼭 다시 알려줘야 해!" 이것이 콜백함수이다. 컨트롤러에게서 응답이 오면 성공과 실패에 대한 회신 내용을 JS에게 보내준다. 최종적으로 JS는 URL 뒤에 회신 내용과 함께 필요한 액션을 추가로 붙여 보내준다...^^
1. Insert 액션과 모듈 생성 버튼 추가
1) 모듈(mid)을 추가하는 일에 대해 함수의 이름을 module.xml 명세서에 등록한다. 앞으로 이 액션은 이런 일을 하게 될 것이라고 모듈 핸들러에게 설명하는 것이다. 모듈의 입력은 컨트롤러의 도움이 필요하기 때문에 2개의 액션을 등록한다. Insert와 관련된 일이기 때문에 머릿글을 proc로 바꾸고 타입(type)은 "controller"로 설정한다. 그러면 모듈 핸들러는 "어드민 컨트롤러에 있는 함수구나!"라고 쉽게 알 수 있다...^^
<action name="dispExampleAdminInsert" type="view" /> <action name="procExampleAdminInsert" type="controller" />
2) 모듈 생성 버튼 추가
관리자 목록을 위한 index.html 의 맨 하단에 모듈 생성을 위한 버튼을 다음과 같이 추가한다. 즉 이 버튼을 클릭하게 되면 모듈 명세서에 등록한 dispExampleAdminInsert 액션을 실행하겠다는 뜻이다. 이 액션의 함수는 어드민 뷰(View) 파일의 메소드를 가리킨다.
tpl/index.html
<!-- 모듈 생성 버튼 -->
<div class="clear">
<div class="fr">
<a href="{getUrl('act','dispExampleAdminInsert')}" class="button black strong"><span>{$lang->cmd_make}</span></a>
</div>
</div>
2. example.admin.view.php
이전에 작성했던 관리자 목록 메소드 아래에 다음의 내용을 포함하여 업로드 한다. (모듈 insert/update 화면 출력 메소드만 추가해야 한다.)
<?php
/**
* @class exampleAdminView
* @author XE스쿨 모듈 만들기 예제
* @brief example 모듈의 admin view class
**/
class exampleAdminView extends example {
/**
* @brief 모듈(mid) insert/update 화면 출력
**/
function dispExampleAdminInsert() {
// 스킨 목록을 구해옴
$oModuleModel = &getModel;('module');
$skin_list = $oModuleModel->getSkins($this->module_path);
Context::set('skin_list',$skin_list);
// 레이아웃 목록을 구해옴
$oLayoutModel = &getModel;('layout');
$layout_list = $oLayoutModel->getLayoutList();
Context::set('layout_list', $layout_list);
// 템플릿 파일 지정
$this->setTemplateFile('example_admin_insert');
}
} /* 윗 부분까지 메소드의 내용을 복사하여 관리자 목록 아래로 추가하고 업로드 한다. */
?>
module 모델(Model)의 객체와 layout 모델(Model)의 객체를 생성(참조의 방식으로 확장 또는 상속을 의미한다)하고 앞으로 생성될 example 모듈(mid)에서 사용할 스킨(example 모듈의 스킨 목록)과 레이아웃의 목록을 미리 구해 온다. 구해 온 스킨과 레이아웃의 내용은 템플릿에 보내기 전에 $skin_list 변수와 $layout_list 변수에 담아 URL 뒤에 예쁘게 세팅해서 보내는 것이다. 또한 모듈(example)의 정보가 있다면 $module_info의 내용도 함께 보내질 것이다. 이미 초기화(init)에서 모듈의 정보를 구하고 세팅해 두었다. 모듈(mid)의 입력과 수정을 위해 준비한 템플릿은 example_admin_insert.html 이다.
3. 모듈(mid) 입력/수정 폼
tpl/example_admin_insert.html : 파일 다운로드 / example_admin_insert.html
<!--%import("filter/admin_insert.xml")-->
<!--%import("js/example_admin.js")-->
<form action="./" method="post" onsubmit="return procFilter(this, admin_insert)" enctype="multipart/form-data">
<input type="hidden" name="page" value="{$page}" />
<input type="hidden" name="module_srl" value="{$module_info->module_srl}" />
<table cellspacing="0" class="rowTable">
<!-- 모듈 이름 -->
<tr>
<th scope="row"><div>{$lang->mid}</div></th>
<td>
<input type="text" name="mid" value="{$module_info->mid}" class="inputTypeText w200" />
<p>{$lang->about_mid}</p>
</td>
</tr>
<!-- 브라우저 제목 -->
<tr>
<th scope="row"><div>{$lang->browser_title}</div></th>
<td>
<input type="text" name="browser_title" value="{htmlspecialchars($module_info->browser_title)}" class="inputTypeText w400" id="browser_title"/>
<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','browser_title')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
<p>{$lang->about_browser_title}</p>
</td>
</tr>
<!-- 레이아웃 옵션 -->
<tr>
<th scope="row"><div>{$lang->layout}</div></th>
<td>
<select name="layout_srl">
<option value="0">{$lang->notuse}</option>
<!--@foreach($layout_list as $key => $val)-->
<option value="{$val->layout_srl}" <!--@if($module_info->layout_srl==$val->layout_srl)-->selected="selected"<!--@end-->>{$val->title} ({$val->layout})</option>
<!--@end-->
</select>
<p>{$lang->about_layout}</p>
</td>
</tr>
<!-- 모듈 스킨 옵션 -->
<tr>
<th scope="row"><div>{$lang->skin}</div></th>
<td>
<select name="skin">
<!--@foreach($skin_list as $key=>$val)-->
<option value="{$key}" <!--@if($module_info->skin==$key ||(!$module_info->skin && $key=='xe_form'))-->selected="selected"<!--@end-->>{$val->title}</option>
<!--@end-->
</select>
<p>{$lang->about_skin}</p>
</td>
</tr>
<!-- 관리용 설명 -->
<tr>
<th scope="row"><div>{$lang->description}</div></th>
<td>
<textarea name="description" class="inputTypeTextArea fullWidth">{htmlspecialchars($module_info->description)}</textarea>
<p>{$lang->about_description}</p>
</td>
</tr>
<!-- 모듈 상단 내용 -->
<tr>
<th scope="row"><div>{$lang->header_text}</div></th>
<td>
<textarea name="header_text" class="inputTypeTextArea fullWidth" id="header_text">{htmlspecialchars($module_info->header_text)}</textarea>
<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','header_text')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
<p>{$lang->about_header_text}</p>
</td>
</tr>
<!-- 모듈 하단 내용 -->
<tr>
<th scope="row"><div>{$lang->footer_text}</div></th>
<td>
<textarea name="footer_text" class="inputTypeTextArea fullWidth" id="footer_text">{htmlspecialchars($module_info->footer_text)}</textarea>
<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','footer_text')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
<p>{$lang->about_footer_text}</p>
</td>
</tr>
<!-- 등록 버튼 -->
<tr>
<th colspan="2" class="button">
<span class="button black strong"><input type="submit" value="{$lang->cmd_registration}" accesskey="s" /></span>
</th>
</tr>
</table>
</form>
모듈의 입력과 수정을 위한 폼(form) 파일이다. 모듈의 고유 식별 번호($module_srl)는 없는 경우 자동으로 생성될 것이고 이것은 변경이 불가능하다. 필수로 입력해야 할 내용은 모듈의 이름으로 사용될 모듈의 아이디(mid)와 브라우저 제목이다. 나머지는 모듈(mid)을 위한 스킨과 레이아웃 템플릿을 선택하는 옵션, 그리고 모듈(mid)의 상하단에 출력할 수 있는 텍스트 입력 필드가 있다.(추후에 알아본다)
폼이 작성되면 전송(submit)하게 되는데 이때 폼에 채워진 내용(this)을 검증하기 위해 procFilter() 함수가 동작한다. onsubmit="return procFilter(this, admin_insert)" 가 그것이다. admin_inset.xml은 XML 형식의 폼 검증 도구이다. 폼 검증을 위한 도구는 최상단에서 임포트(import) 형식으로 미리 불러놓게 된다. 폼 필터는 입력된 내용을 <node> 요소로 확인한 후에 이상이 없으면 컨트롤러 액션을 실행할 것이고 되돌려 받는 응답 메시지는 콜백함수(callback_func)로 처리하여 JS에게 보내진다. 따라서 최상단에 동일한 방법으로 example_admin.js 파일을 임포트 해 둔다. (JS파일은 어드민 뷰 파일에서 템플릿 형식으로 미리 설정해 둘 수 있다. 여기서는 직접 임포트하였다.)
백엔드의 스타일과 언어팩은 XE코어의 도움을 받게 된다. 따라서 특별히 추가하거나 수정할 필요는 없다. 만약 example 모듈의 프론트 엔드에 대한 내용을 만들게 되면 XE코어는 모르는 내용이기 때문에 스타일과 언어팩 작업을 해 주어야 하는 것이다. 첨부된 파일을 다운로드 받거나 위의 내용을 복사하여 tpl 폴더에 example_admin_insert.html 파일 이름으로 추가하고 업로드 하자. 그러면 모듈 생성 버튼을 클릭했을 때 추가된 템플릿 파일을 찾아 보여주게 된다.
4. 폼 필터
tpl/filter/admin_insert.xml
<filter name="admin_insert" module="example" act="procExampleAdminInsert" confirm_msg_code="confirm_submit">
<form>
<node target="mid" required="true" maxlength="40" filter="alpha_number" />
<node target="browser_title" required="true" maxlength="250" />
</form>
<response callback_func="completeAdminInsert">
<tag name="error" />
<tag name="message" />
<tag name="module" />
<tag name="act" />
<tag name="page" />
<tag name="module_srl" />
</response>
</filter>
XML 필터 파일의 유효성 검증 문법은 개발자 메뉴얼 p.55에 자세히 기술되어 있다. 여기서도 중요한 것은 폼의 입력 필드(name)에 대응하는 <node> 요소의 유효성 검증을 통과해야 한다는 것이다. 요소에 따른 속성에서 필수요소인지, 허용된 문자열의 길이는 맞는지, 문자열의 형식(알파벳 또는 숫자)을 확인해 보고 이상이 없다면 컨트롤러에게 전달되는 것이다. 컨트롤러에게 내용을 보내면서 응답 변수로 사용될 내용을 함께 포함한다. 오류가 있다면 어떤 문제인지 메시지를 보내달라고 요청하는 것이다. 최종적으로 컨트롤러에게서 응답이 오게 되면 JS에게 받은 응답의 내용을 보내주고 할 일을 끝낸다...^^ 여기서도 폼 필터의 이름(name)이 요청 함수에서 설정한 파일의 이름과 같아야 하고, tpl/filter 폴더 안에서 찾기 때문에 tpl 폴더 안에 filter 폴더를 새로 만들고 업로드 하자.
5. example.admin.controller.php
다음의 내용을 모두 포함하여 example.admin.controller.php 라는 이름의 새로운 컨트롤러 파일을 만들고 업로드 한다.
<?php
/**
* @class exampleAdminController
* @author XE스쿨 모듈 만들기 예제
* @brief example 모듈의 admin controller class
**/
class exampleAdminController extends example {
/**
* @brief 초기화
**/
function init() {
}
/**
* @brief example 모듈(mid) 추가
**/
function procExampleAdminInsert($args = null) {
// module 모듈의 model/controller 객체 생성
$oModuleController = &getController;('module');
$oModuleModel = &getModel;('module');
// request 값을 모두 받음
$args = Context::getRequestVars();
$args->module = 'example';
// module_srl이 넘어오면 원 모듈이 있는지 확인
if($args->module_srl) {
$module_info = $oModuleModel->getModuleInfoByModuleSrl($args->module_srl);
if($module_info->module_srl != $args->module_srl) unset($args->module_srl);
}
// module_srl 값의 존재여부에 따라 insert/update
if(!$args->module_srl) {
$output = $oModuleController->insertModule($args);
$msg_code = 'success_registed';
} else {
$output = $oModuleController->updateModule($args);
$msg_code = 'success_updated';
}
// 오류가 있으면 리턴
if(!$output->toBool()) return $output;
// $this객체에 add()로 변수를 등록하여 호출하여 XMLRPC로 리턴시 값을 추가함
$this->add('page',Context::get('page'));
$this->add('module_srl',$output->get('module_srl'));
$this->setMessage($msg_code);
}
}
?>
컨트롤러는 module 모델(Model)과 컨트롤러(Controller)을 확장 또는 상속 받아 내용입력을 준비한다. 이후 인자(argument)들을 URL에서 넘겨 받고 이 값들은 example 모듈의 것들이라고 맴버변수를 추가해 둔다...^^ 모듈의 식별 번호($module_srl)가 있는지 module 모델을 이용해 모듈 정보($module_info)를 조회 해 보고 존재 여부에 따라 새로 입력할 것인지 수정할 것인지를 결정하게 된다. 입력과 수정은 module 컨트롤러에게 부탁한다. 6번-7번 과정이 모두 성공적으로 끝났다고 응답이 오면 언어팩에 등록 되어 있는 성공 메시지를 변수에 같이 담고 만약 오류가 있다면 오류 메시지를 담아 보낼 것이다. 회신을 보낼 때는 $output 변수에 담고, 필요한 값들을 추가로 더해 보낸다.
6. 콜백 함수
tpl/js/example_admin.xml
/* 모듈 생성 후 */
function completeAdminInsert(ret_obj) {
var error = ret_obj['error'];
var message = ret_obj['message'];
var page = ret_obj['page'];
var module_srl = ret_obj['module_srl'];
alert(message);
var url = current_url.setQuery('act','dispExampleAdminList').setQuery('module_srl','');
if(page) url.setQuery('page',page);
location.href = url;
}
폼 필터에서 처리 결과에 대한 콜백함수를 completeAdminInsert로 지정하였다. 지정된 콜백함수는 js/example_admin.xml 파일에서 받아 처리한다. 콜백함수를 받는 JS 파일은 이미 폼 작성 파일에서 최상단에 임포트 해 두었기 때문이다. 회신 받은 내용에서 필요한 값들을 변수로 분리하고 이동할 URL을 설정한 뒤에 실행할 액션과 필요한 정보를 같이 세팅해 보낸다. 컨트롤러에서는 $module_srl의 값을 확인하고 더해 보냈지만, 목록을 보기 위해서는 특별히 $module_srl 이 필요없을 것 같아서 빼고 보냈다...^^ 더하고, 빼고, 세팅하는 것에 대해 확실히 알아두자. 최종적으로 입력/수정 과정이 모두 끝나게 되면 관리자 목록을 위한 dispExampleAdminList 액션이 실행되고 다시 한번 관리자 뷰(View) 처리 과정을 거쳐 목록을 보여주게 된다.
7. 모듈(mid) 수정을 위한 메소드 추가
1) 이미 생성된 모듈(mid)을 수정하려면 관리자 목록에서 우측에 보이는 톱니바퀴 모양의 아이콘을 클릭해야 한다. 이 설정 아이콘은 이전 과정에서 이미 dispExampleAdminInfo 액션을 링크로 설정해 두었다. 즉 아이콘을 클릭하면 act=dispExampleAdminInfo 로 XE코어에 요청하는 것과 같다. 이때 해당 모듈(mid)의 식별 번호($module_srl)도 함께 가지고 간다. 한가지 문제점은 액션의 이름이 아직 명세서에 등록 되어 있지 않다. 따라서 module.xml 파일을 열고 dispExampleAdminInfo를 위한 액션을 dispExampleAdminInsert 액션 아래에 추가하자.
<action name="dispExampleAdminInfo" type="view" />
2) example.admin.view.php 파일에서 [모듈(mid) insert/update 화면 출력] 메소드 아래에 다음과 같은 메소드를 추가하고 업로드 한다. Info 액션이 요청되면 이전에 작성해 두었던 Insert 메소드를 실행하도록 변경하는 것이다. 모듈의 정보가 있다면 새로 추가하는 폼이 아닌, 이미 해당 모듈의 정보가 채워진 폼을 보여줄 것이다. 그리고 xe_modules 테이블에 등록되어 있는 모듈의 정보($module_srl)라면 새로 입력하는 것이 아니라 수정(Update) 할 것이다.
/**
* @brief 선택된 모듈의 정보 출력은 곧바로 정보 입력으로 변경한다
**/
function dispExampleAdminInfo() {
$this->dispExampleAdminInsert();
}
8. 결과 확인
새로운 모듈(mid)을 생성하고 수정할 수 있게 된다. 수정이라는 것은 모듈의 고유 식별 번호($module_srl)가 바뀌는 것이 아니다. 모듈의 이름과 브라우저 제목 정도가 수정 되는 것이다. 그러면 삭제는 어떻게 하지...^^
