설문조사 투표하기

설문조사 투표하기

그림2)


이번엔 설문조사 투표하기를 통하여 트리거를 만들어보기로 합니다. 그리고 본 소스는 일반 자바스크립트, Jquery OOP(Object Oriented Programming), JAF(JavaScript Application Framework)를 이용한 3가지 방식으로 구현해보기로 합니다.

<form  action="./" method="post" onsubmit="return doPoll(this)"><input type="hidden" name="error_return_url" value="/xe/index.php?mid=board&document_srl=13128" /><input type="hidden" name="mid" value="board" /><input type="hidden" name="vid" value="" /><input type="hidden" name="ruleset" value="poll" />
    <input type="hidden" name="module" value="poll" />
    <input type="hidden" name="act" value="procPoll" />
    <input type="hidden" name="poll_srl" value="13124" />
    <input type="hidden" name="poll_srl_indexes" value="" />
    <input type="hidden" name="skin" value="default" />
    <input type="hidden" name="success_return_url" value="/xe/index.php?mid=board&document_srl=13128" />

... 중략

        <td colspan="3" class="poll_button">
            <div>
                <span class="btn"><input type="button" value="결과 보기" class="poll_button _poll_result _srl_13124 _skin_default" /></span>
                <span class="btn"><input type="submit" value="설문 참여" class="poll_button" /></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="lb" ><img src="http://127.0.0.1/xe/modules/poll/skins/default/images/lb.png" alt="lb" width="7" height="7" /></td>
        <td class="b"><img src="http://127.0.0.1/xe/modules/poll/skins/default/images/blank.gif" alt="blank" /></td>
        <td class="rb" ><img src="http://127.0.0.1/xe/modules/poll/skins/default/images/rb.png" alt="rb" width="7" height="7" /></td>
    </tr>
    </table>

</form>

 

 

이번 소스도 폼값에 filter를 이용한 처리 형식입니다. 하지만 우리는 이번엔 폼을 처리하기 전에 값을 입력해보기로 합니다. triggersample1.js에 아래와 같은 내용을 추가합니다.

function triggerSample_init()
{
    if(jQuery('form input:hidden[name=act][value=procPoll]').get() != '')
    {
        jQuery('form input:hidden[name=poll_srl]').each(function(i)
        {
            jQuery(this).parent().attr('id', 'triggersample_'+jQuery(this).val());
            jQuery('#triggersample_'+jQuery(this).val()+' input:submit').attr('onclick', 'triggerSample_poll('+jQuery(this).val()+'); return false;');
        });
    }
}

function triggerSample_poll(poll_srl)
{
    var triggersample = '#triggersample_'+poll_srl;
    var params = new Array();
    var poll_srl_indexes = '';
    jQuery(triggersample+' input:radio[name^=item_]').each(function(i)
    {
        if(jQuery(this).is(':checked'))
        {
            poll_srl_indexes = jQuery(this).val();
        }
    });

    if(poll_srl_indexes != '')
    {
        params['poll_srl'] = jQuery(triggersample+' input:hidden[name=poll_srl]').val();
        params['poll_srl_indexes'] = poll_srl_indexes;
        exec_xml('triggersample','triggerTriggersampleInsertPollSelect', params, function() { triggerSample_complete(triggersample); });
    }
}

function triggerSample_complete(triggersample)
{
    jQuery(triggersample).submit();
}

triggerSample_init();

 

원리는 이렇습니다. triggerSample_init(); 함수 호출을 통하여 현재 출력된 페이지에서 아래가 사용된 태그를 모두 읽어서 그 상위 태그에 고유의 ID를 부여합니다.

<input type="hidden" name="act" value="procPoll" />


또한 부여된 ID의 태그, 즉 form 태그 아래에 input submit 버튼을 통해 아래의 자바스크립트를 수행시키도록 합니다.

“triggerSample_poll(2349); return false;”


이 상태로 설문 참여를 진행하게 되면 triggerSample_poll() 함수를 호출하게 되며 함수를 처리 후 마지막으로 본래의 처리를 수행시킵니다.

jQuery(triggersample).submit();

 

/**
 * @brief 설문조사 투표시 함수 수행
 **/
function triggerTriggersampleInsertPollSelect()
{
    $obj = Context::getRequestVars();

    $output = executeQuery('poll.getPoll', $obj);
    $args->poll_srl = $obj->poll_srl_indexes;
    $args->document_srl = $output->data->upload_target_srl;
    $oDocumentModel = &getModel('document');
    $oDocument = $oDocumentModel->getDocument($args->document_srl, FALSE, FALSE);
    $args->module_srl = $oDocument->variables['module_srl'];
    $args->type = 'pollSelect';

    $this->insertTriggersample($args);
}

/**
 * @brief 정보 추가
 **/
function insertTriggersample($args = NULL)
{
    if($args == NULL)
    {
        return new Object(-1, "msg_error_occured");
    }

    // begin transaction
    $oDB = &DB::getInstance();
    $oDB->begin();

    $output = executeQuery('triggersample.insertTriggersample', $args);
    if(!$output->toBool())
    {
        $oDB->rollback();
        return new Object(-1, "msg_error_occured");
    }

    // commit
    $oDB->commit();

    return $output;
}

 

 

이번엔 Jquery OOP 형식으로 만들어보겠습니다.

var triggerSample = {
    // 기본 차단 설정
    procPoll : function(poll_srl)
    {
        var triggersample = '#triggersample_'+poll_srl;
        var params = new Array();
        var poll_srl_indexes = '';
        jQuery(triggersample+' input:radio[name^=item_]').each(function(i)
        {
            if(jQuery(this).is(':checked'))
            {
                poll_srl_indexes = jQuery(this).val();
            }
        });

        if(poll_srl_indexes != '')
        {
            params['poll_srl'] = jQuery(triggersample+' input:hidden[name=poll_srl]').val();
            params['poll_srl_indexes'] = poll_srl_indexes;
            exec_xml('triggersample','triggerTriggersampleInsertPollSelect', params, function() { triggerSample.complete(triggersample); });
        }
    },
    // 최신 버전 상태 알림
    complete : function(triggersample) {
        jQuery(triggersample).submit();
    },
    // 스크립트 로드
    ready : function() {
        jQuery('html').ready(function(){
            if(jQuery('form input:hidden[name=act][value=procPoll]').get() != '')
            {
                jQuery('form input:hidden[name=poll_srl]').each(function(i)
                {
                    jQuery(this).parent().attr('id', 'triggersample_'+jQuery(this).val());
                    jQuery('#triggersample_'+jQuery(this).val()+' input:submit').attr('onclick', 'triggerSample.procPoll('+jQuery(this).val()+'); return false;');
                });
            }
        });
    }
};

triggerSample.ready();

 

내용의 원리는 같으며 해당 내용은 triggersample 예제 모듈에 triggersample2.js 파일에 선언되어있습니다. 
(내용을 테스트해보시려면 triggersample.controller.php에서 주석문을 수정하세요.)

 


이번엔 XE의 JAF 형식으로 사용해봅니다.

var triggerSample = xe.createApp('triggersampleJS',
    {
        init : function()
        {
            if(jQuery('form input:hidden[name=act][value=procPoll]').get() != '')
            {
                jQuery('form input:hidden[name=poll_srl]').each(function(i)
                {
                    jQuery(this).parent().attr('id', 'triggersample_'+jQuery(this).val());
                    jQuery('#triggersample_'+jQuery(this).val()+' input:submit').attr('onclick', 'trigger_sample.procPoll('+jQuery(this).val()+'); return false;');
                });
            }
        },
        procPoll : function(poll_srl)
        {
            var triggersample = '#triggersample_'+poll_srl;
            var params = new Array();
            var poll_srl_indexes = '';
            jQuery(triggersample+' input:radio[name^=item_]').each(function(i)
            {
                if(jQuery(this).is(':checked'))
                {
                    poll_srl_indexes = jQuery(this).val();
                }
            });

            if(poll_srl_indexes != '')
            {
                params['poll_srl'] = jQuery(triggersample+' input:hidden[name=poll_srl]').val();
                params['poll_srl_indexes'] = poll_srl_indexes;
                exec_xml('triggersample','triggerTriggersampleInsertPollSelect', params, function() { trigger_sample.cast("COMPLETE", [triggersample]); });
            }
        },
        API_COMPLETE : function(sender, params) {
            jQuery(params[0]).submit();
        }
    });

// App 객체의 인스턴스 생성
var trigger_sample = new triggerSample();

 

관리자페이지 레이아웃 설정하기

<form  action="./" class="form" enctype="multipart/form-data" method="post">
<input type="hidden" name="error_return_url" value="/xe/index.php?module=admin&act=dispLayoutAdminModify&type=P&layout=rnq_1st&layout_srl=56" />
<input type="hidden" name="mid" value="" />
<input type="hidden" name="vid" value="" />
<input type="hidden" name="ruleset" value="updateLayout" />
<input type="hidden" name="module" value="layout" />
<input type="hidden" name="act" value="procLayoutAdminUpdate" />
<input type="hidden" name="layout_srl" value="56" />
<input type="hidden" name="layout" value="rnq_1st" />
<input type="hidden" name="_layout_type" value="P" />
<input type="hidden" name="success_return_url" value="/xe/index.php?module=admin&act=dispLayoutAdminInstanceList&type=P&layout=rnq_1st&layout_srl=56" />

... 중략
    
<div class="btnArea">
    <span class="btn medium">
        <input type="submit" value="저장" />
    </span>
</div>
</form>

 

해당 메뉴의 처리는 filter 형식이 아닌 ruleset 형식이기 때문에 사용 예제로 선정하였습니다. 위의 내용은 아래와 같은 방법으로 처리하여 트리거를 만듭니다.

var triggerSample = xe.createApp('triggersampleJS',
    {
        init : function()
        {
            jQuery('form input:hidden[value=procLayoutAdminUpdate]').parent().attr('id', 'triggersample');
            jQuery('#triggersample input:submit').attr('onclick', 'trigger_sample.procLayoutUpdate(); return false;');
        },
        procLayoutUpdate : function()
        {
            var params = new Array();
            params['layout_srl'] = jQuery('#triggersample input:[name=layout_srl]').val();
            exec_xml('triggersample','triggerTriggersampleUpdateLayout', params, function() { trigger_sample.cast("COMPLETE", [jQuery('#triggersample')]); });
        },
        API_COMPLETE : function(sender, params) {
            jQuery(params[0]).submit();
        }
    });

// App 객체의 인스턴스 생성
var trigger_sample = new triggerSample();

 

input 태그의 procLayoutAdminUpdate의 값을 판단하여 그 부모의 태그에 ID를 생성하고 submit 처리 시 스크립트 함수를 호출하도록 하였습니다.
(내용은 triggersample4.js에 있습니다.)

 

마무리

이번 4편에서는 트리거가 없는 대상에도 트리거 처리를 하는 방법에 대해서 소개해보았습니다. 분명 모든 요소를 완벽하게 처리하는 방법은 아니지만 이와 같은 응용을 통해 트리거가 없는 기능들도 어느정도의 소화가 가능하리라 생각됩니다.

 


이것으로 트리거 완전 정복하기를 마무리하나 본 예제는 다른 트리거 처리의 내용 요청이 있을 경우 사용법을 궁리하여 예제를 추가할 예정이니 구현에 어려움이 있으신 분들은 본 강좌를 통해 댓글을 남겨주시기 바랍니다.