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 comments