Welcome to Abdul Malik Ikhsan's Blog

Zend Framework : ZendX_JQuery, View Helper untuk mengintegrasikan jQuery dan ZF

Posted in Javascript, Tutorial PHP, Zend Framework by samsonasik on August 1, 2010

ZendX merupakan Zend Framework Extensions Library , dibuat untuk meningkatkan kemampuan Zend Library itu sendiri secara lebih spesifik untuk kebutuhan-kebutuhan yang spesifik pula. Seperti halnya Zend_Dojo yang telah ada sebelumnya, ZenX_JQuery_View_Helper digunakan untuk mengintegrasikan jQuery dengan Zend Framework. ZendX_JQuery ini secara default mengimplementasikan Data Mashup,  di mana resource-resouce yang dibutuhkan ( dalam hal ini library jQuery) dipanggil secara outsource. Kita tidak perlu menginclude secara manual library jQuery-nya, karena otomatis akan dipanggil secara mashup, dalam kasus ini dari googleapis.

Berikut contoh kode programnya.
Pertama, kita set Helper untuk View dari Bootstrap.php

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
 function _initView()
 {
 $view = new Zend_View();
 $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');

 $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
 $viewRenderer->setView($view);
 Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
 }
}

Setelah itu, kita tinggal panggil  di layout :

<html>
<head><title>JQuery and ZF Integration</title>
<?php echo $this->jQuery(); ?>
</head>
<body>
<?php echo $this->layout()->content; ?>
</body>
</html>

Ok, kalau sudah, kita bisa panggil di View :

<?php echo $this->ajaxLink("Show me something",
 $this->baseUrl()."/partialrenderer/loadhello",
 array('update' => '#content'));?>

Kalau di view source, akan tergenerate secara otomatis javascript seperti di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {
    $('a.ajaxLink1').click(function() { $.get('/zftutwordpress/public/partialrenderer/loadhello', {}, function(data, textStatus) { $('#content').html(data); }, 'html');return false; });
});
//-->
</script>

Lalu bagaimana jika tidak tersedia jaringan internet ? Kita bisa setlocalpath-nya dengan cara mengubah kode programnya menjadi seperti di bawah ini :

<html>
<head><title>JQuery and ZF Integration</title>
<?php echo $this->jQuery()->setLocalPath(path/to/jquery.js); ?>
</head>
<body>
<?php echo $this->layout()->content; ?>
</body>
</html>

This article contained copyrighted material licensed under various creative commons licenses unless otherwise noted:
Photo :
1. http://www.lgeoresearch.com/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=/img/MashupHandshake.jpg&w=150&h=150&zc=1&q=100
Articles :
1. http://framework.zend.com/manual/en/
2. http://code.google.com/p/zendx/

4 Responses

Subscribe to comments with RSS.

  1. saya said, on August 19, 2010 at 6:35 am

    Hi, topik yang menarik..

    ada yang saya binun nih,
    /zftutwordpress/public/partialrenderer/loadhello
    isinya opo toh?

  2. samsonasik said, on August 19, 2010 at 8:43 am

    partialrenderer : controllernya
    loadhello : actionnya 🙂

  3. saya said, on August 28, 2010 at 9:12 am

    oh gitu, kenapa controllernya pake nama yang agak susah seperti itu ya? dan lagian sejauh yg saya tahu ada metode pemanggilan partial dari view, jadi pas liat di atas, saya pikir ada partial view gitu. sbg contoh dari view yang manggil partial :

    partial(‘partial.phtml’, array(‘from’ => ‘Team Framework’,’subject’ => ‘view partials’)); ?>

    dan anda tidak memberikan sedikit clue berupa code yang menyatakan bahwa itu controllernya namanya anu semisal :

    <?php
    /*
    * File : /application/controller/PartialrendererController.php
    */

    require_once 'Zend/Controller/Action.php';

    class PartialrendererController extends Zend_Controller_Action
    {
    public function indexAction()
    {
    //…
    }

    public function loadhelloAction()
    {
    //…
    }

    }

    dan bagi pemula spt saya, sangat membantu kalo dikasi nama file beserta lokasinya seperti misalkan spt ini:

    Ok, kalau sudah, kita bisa panggil di View (/application/views/scripts/partialrenderer/loadhello.phtml) :

    atau di awal code cukup dimasukkan
    // file : /partialrenderer/loadhello.phtml

    jadi lebih memudahkan pemirsa hehehe..
    tapi kalo sangat jelas nanti ga ada yang nanya ya.. hihihi..

    ok.. thks, teruskan..berbagi demi kecerdasan bangsa.

  4. samsonasik said, on August 28, 2010 at 8:39 pm

    hehehe, terima kasih atas tanggapannya,dari tanggapan anda, itu bisa melengkapi kekurangan posting-an saya, sekali lagi, terima kasih. 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: