concrete5 블록에서 ajax를 구현해 보았습니다.

concrete5(홈페이지 작성·운용 소프트, CMS)의 커스터마이즈 방법입니다. 이번에는 블록(concrete5의 콘텐츠 단위)에서 ajax 처리를 해 보았습니다.

이번에는 QUICKNEM 에서 사용하고 있는 NEM(XEM)과 일본 엔의 환율을 ajax로 표시하는 블록을 예로 들어 보겠습니다.



※이번은, 블록을 만드는 or커스터마이즈 한 적이 있는 사람을 위한 기사입니다.

블록 controller.php에서 ajax 용 엔드 포인트 만들기

다음과 같이 합니다.

// action_XXXで、リクエストを受けるURLを設定する。
public function action_getprice(){
    $data = $this->getPrice();
    // jsonデータを返す
    $this->app->make('helper/ajax')->sendResult($data);
}

// データベースからデータを取ってくる処理
// データは連想配列で返す
protected function getPrice() {
    $db = Database::getActiveConnection();
    $price = $db->fetchAssoc("SELECT vwap, inserted FROM ounziwCryptoPrice ORDER BY inserted DESC", array());
    return $price;
}

블록 view.js에서 ajax 실행

concrete5에서는 jQuery가 포함되어 있으므로 jQuery로 데이터를 검색합니다. (vue.js 등을 사용하는 경우에는 js 읽기 설정이 필요합니다.)

$(document).ready(function(){
    jQuery.ajax({
        url: $('span.xemratio').data('url'),
        dataType: 'json',
        type: 'post',
        success: function(response) {
            $('span.xemratio').text(response.vwap);
            $('span.xemdate').text(response.inserted);
        }
    });
    return false;
});

덧붙여서 view.php는 아래와 같이 하고 있습니다.

<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<p>
    1XEM = <span data-url="<?php echo $view->action('getprice')?>" class="xemratio"></span> 円(レート取得日時: <span class="xemdate"></span>)
</p>

이렇게 하면 ajax에서 데이터를 검색할 수 있었습니다.