Using jQuery and jQuery ui with Zend Framework

talkin' jquery ui

Image by "Cowboy" Ben Alman via Flickr

.

For those jQuery fanatics like me wants to jQuery enabled in their Zend framework application, zf provides view and form helpers through it ‘extras’ library, also it is handy to enable.

At Bootstrap class add the following initialization method like below:

/**
* init jquery view helper, enable jquery, jqueryui, jquery ui css
*/

protected function _initJquery() {

$this->bootstrap('view');
$view = $this->getResource('view'); //get the view object

//add the jquery view helper path into your project
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");

//jquery lib includes here (default loads from google CDN)
$view->jQuery()->enable()//enable jquery ; ->setCdnSsl(true) if need to load from ssl location
     ->setVersion('1.5')//jQuery version, automatically 1.5 = 1.5.latest
     ->setUiVersion('1.8')//jQuery UI version, automatically 1.8 = 1.8.latest
     ->addStylesheet('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css')//add the css
     ->uiEnable();//enable ui

}

At the <head> section of your document or at layout.html, to enable jQuery at your each pages just echo like below:

<?php

echo $this->jQuery();

?>

So you will have jQuery and jQuery ui files added into your document section like as always:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Cheers!

N.B: in order to use ZendX library under extras/library/ZendX, the ZendX directory path should be in your php include_path or alternatively can SymLink the ZendX directory under your /application/library/

.

Setting up your development with Zend Framework

.

In general, Zend Framework is an object oriented web application framework for PHP 5. Zend Framework is often called a ‘component library’, because it has many loosely coupled components that you can use more or less independently. It also provides advanced Model-View-Controller implementation.

In order to setup the development environment with Zend framework we will go through the below procedures:

1. Download and Install

Download the latest version of Zend Framework and extract the contents into your desired location or can have a checkout copy from the Subversion repository.

Some extensions may be required such as GD, iconv etc. (Zend Framework will notify you if any required while your application runs, so don’t worry about that now). If you are much interested about those extensions required can read more here

2. Creating your project using zf Command Line Tool

Before creating your project you need to know the use of zf command line tool. Here we go

In your Zend Framework installation is a bin/ subdirectory

for *nix =  zf.sh and for Windows = zf.bat . Track the absolute path to that script.

On Unix-like systems, you may want to use your shell’s alias functionality:

$ alias zf =path/to/ZendFramework/bin/zf.sh

If you have problems setting up the zf command-line tool, please refer to the manual.

Now from the terminal or command prompt, execute following command

$ zf create project projectname projectpath

This will create your basic project director structure i.e. directory for controllers, models, views etc.

3. Add Zend Framework to your include_path

Now either choose a) or b) to make available the zf components to your project. I like b)

a)     Add Zend Framework installation path to your php include_path

b)    Symlinking path/to/ZendFramework/library/Zend inside your path/to/projectname/library/ with this command

$ ln -s path/to/ZendFramework/library/Zend path/to/projectname/library/

If you are planning to use jQuery later you may Symlink the ZendX directory found under extras/library inside your project library as:

$ ln -s path/to/ZendFramework/extras/library/ZendX path/to/projectname/library/

So you will have alias to above Zend directories inside your project library sub directory. All you are doing is just making Zend Framework available to your project. You may follow identical practice for multiple zf projects.

4. Bootstrap-ing

Bootstrap class defines what resources and components to initialize. Zend framework runs the Bootstrap.php(can be found just under each application dir) file before loading any modules or applications. So we can put all sort of initialization tasks there.

As an example, we put doc type initializer inside the class as below:

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap {
protected function _initDoctype() {
$this->bootstrap('view');
$view = $this->getResource('view');
//doc type
$view->doctype('XHTML1_STRICT'); // doc type to xhtml strict
$view->headMeta()->appendHttpEquiv('Content-type', 'text/html;charset=utf-8') //utf-8 enabled
->appendName('description', 'my zf project');
}
}

5. Configuration

The default configuration file can be found under /application/configs/application.ini

It looks like below:

; application/configs/application.ini
[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0
includePaths.library = APPLICATION_PATH "/../library"
bootstrap.path = APPLICATION_PATH "/Bootstrap.php"
bootstrap.class = "Bootstrap"
appnamespace = "Application"
resources.frontController.controllerDirectory = APPLICATION_PATH "/controllers"
resources.frontController.params.displayExceptions = 0
[staging : production]
[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1
[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

You can update the file as per your requirements. As for an example, lets add database connection credential at [production] section, so the zf connects the database automatically using the config provided as below

;DB connection credentials
resources.db.adapter = "PDO_MYSQL" //pdo adpter for mysql
resources.db.params.host = "localhost"
resources.db.params.username = "root"
resources.db.params.password = "root"
resources.db.params.dbname = "test_database"

So you will have your database connected with your zf project.

6. Creating action controllers, views as well

Run the following command using zf cli tool to create controller each time:

$ zf create controller name

Now you will have a controller class created inside your controller directory and a view subdirectory (same name) created with default index view file named index.phtml inside your views directory.

To create action method under that controller class simple run the command:

$zf create action name controllername

By this you will have the view file with the same name created automatically for that action method too.

You may follow up the changes appearing each time at that controller class by opening it.

Up to now you suppose to be able to browse your project by visiting url like http://localhost/projectname/public/

7. Creating views (optional)

Run the following command using zf cli tool to create view file explicitly for a controller/action each time:

$ zf create view controllername actionname

8. Creating virtual host (optional)

Assuming you are using Apache web server, at your working httpd.conf define a vhost by adding the below snippet (replace myzfproject with your project name, also the path):

<VirtualHost *:80>
ServerName www.myzfproject.com
DocumentRoot /path/to/ myzfproject /public
SetEnv APPLICATION_ENV "development"
<Directory /path/to/ myzfproject /public>
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>

Using SetEnv APPLICATION_ENV “development” line you are setting the environment variable for zf application, resulting the zf will pick configurations from [development] section from application.ini. Drop this line for having “production” config by default.

Add an entry at the end of your hosts file regarding the value in ServerName :

127.0.0.1 www.myzfproject.com

Location of hosts file:

On *nix: /etc/hosts On Windows: C:\WINDOWS\system32\drivers\etc\hosts

Restart your web server and you are likely to drive.

Visit http://framework.zend.com for more information

Both Zend Developer Zone and the Wiki have links to ZF tutorials and articles. Consider subscribing to the fw-general mailing list but especially the SVN commit list