Hide navigator Hide source code
Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: strlen(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/project-web/jquery4php/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryBuilder.php on line 127

Jquery4php Y Zend Framework

Autor: Omar Yepez

Introducción

Este tutorial fue realizado para demostrar la integración de jQuery4PHP con los frameworks mas importantes para PHP. En este caso integraremos jQuery4PHP con Zend Framework.
Zend Framework (ZF) es un framework de código abierto para desarrollar aplicaciones web y servicios web con PHP 5. ZF es una implementación que usa código 100% orientado a objetos.

El principal patrocinador del proyecto Zend Framework es Zend Technologies, pero muchas empresas han contribuido con componentes o características importantes para el framework.

Descargando los recursos

• Librerías:
  • Descarga jQuery4PHP (source-showcase)
  • Descarga Zend Framework (ZF)

NOTA: Para este tutorial fue descargada la versión 1.11.10 minimal (.zip) de ZF

Pre Condiciones

• Tener instalado un servidor web con soporte a PHP 5 (En nuestro caso tenemos instalado XAMPP 1.7.4 Beta2).
• Tener nociones Básicas de Orientacion a Objetos.
• Conocer el Patrón MVC.
• Conocer básicamente la forma de trabajar con ZF.
• Conocer básicamente la forma de trabajar con jQuery4PHP.

Pos Condiciones

• jQuery4PHP y ZF integrados.

Instalación de ZF

Llegado a este punto deberías tener descargada las fuentes de ZF.

Para instalar ZF simplemente se descomprime el archivo que descargaste (en nuestro caso se llama "ZendFramework-1.11.10-minimal.zip" ) en el directorio raíz de nuestro servidor web.

CONSEJO: El directorio que descomprimió renómbrelo como zend-jquery4php, para que no tenga errores al seguir con este tutorial.

El directorio raíz de nuestro servidor es C:\xampp\htdocs\. Esta ruta varia de como hayas instalado tu servidor web y de el Sistema Operativo que se utilice.

Luego de descomprimir el archivo veras que existen varias carpetas, realmente las interesantes en nuestro caso serán los directorios:

- zend-jquery4php/bin
- zend-jquery4php/library/Zend

El directorio zend-jquery4php/bin provee una herramienta para la generación automática de aplicaciones (zf.bat, zf.php, zf.sh) entre muchas otras funcionalidades, consulta la documentación de ZF para mas información sobre esta utilidad.


El directorio zend-jquery4php/library/Zend contiene el código fuente de ZF.

Creando la aplicación

Para crear la aplicación utilizaremos la herramienta de generación automática.

Vamos a llamar a nuestra aplicación zend-jquery4php

IMPOTANTE: Para que funcione la herramienta de generación automática te recomendamos tener definido el directorio de intalación de php en la variable de entorno path del sistema operativo.

Abrimos la consola de comandos, Nos ubicamos en el directorio raíz de nuestro servidor web y ejecutamos el siguiente comando.

cd C:\xampp\htdocs\

zend-jquery4php\bin\zf create project zend-jquery4php

Ahora puedes ver que se creó en la carpeta "zend-jquery4php" la estrustura de directorio de una aplicacion de ZF, esta estructura de directorio de nuestra aplicación con ZF en nuestro servidor web debe ser algo parecido a la siguiente:

C:/
|--xampp
  |-- htdocs
    |--zend-jquery4php
      |--application
      |--docs
      |--library
        |--Zend
      |--public
      |--tests

Para mas información sobre la Estructura de Directorio de ZF consulta su documentación.

Ahora que tenemos instalado una aplicación con ZF en nuestro servidor, podemos acceder a la siguiente url en un navegador web

http://localhost/zend-jquery4php/public/

Esta URL muestra una página de bienvenida, informando que zend framework ha sido instalado satisfactoriamente.

NOTA: Si la página te muestra algún error consulta la documentación de ZF.

Integrando jQuery4PHP y Zend Framework

Ahora vamos a descomprimir la librería jQuery4PHP en el directorio
C:/xampp/htdocs/zend-jquery4php/library

Para este tutorial descargamos el archivo source-showcase (.zip) con la ultima versión de jQuery4PHP.

Este archivo contiene el código fuente de jQuery4PHP (carpeta lib ) y todos los archivos javascript y hojas de estilos para trabajar con jQuery, jQuery UI entre otros (carpeta showcase).

Pasamos la carpeta YepSua que está en la carpeta lib de jQuery4PHP al directorio
C:/xampp/htdocs/zend-jquery4php/library

Copiamos también la carpeta jquery4php-assets del directorio showcase de jQuery4PHP al directorio
C:/xampp/htdocs/zend-jquery4php/public

Y eso es todo ya tenemos integrado ZF con jQuery4PHP.

Estructura de Directorio de ZF y jQuery4PHP integrados:

  C:
  |--xampp
    |-- htdocs
      |--zend-jquery4php
        |--application
        |--docs
        |--library
          |--Zend
          |--YepSua\Labs\RIA\jQuery4PHP
        |--public
          |--js
          |--styles
        |--tests

Ejemplo: Hello World 2.0

Vamos a cambiar la página de bienvenida que trae por defecto ZF para que nos muestre un "Hello World" en un UI Dialog al presionar un botón.

El Controlador

Cambiamos el controlador "IndexController" (zend-jquery4php\application\controllers\IndexController.php) que originalmente es así:

<?php
  class IndexController extends Zend_Controller_Action
  {
    public function init()
    {
      /* Initialize action controller here */
    }
    public function indexAction()
    {
      // action body
    }
  }

por este código:

<?php
  class IndexController extends Zend_Controller_Action {

  public function init() {
    Zend_Loader::loadClass('YsJQueryAutoloader','..\library\YepSua\Labs\RIA\jQuery4PHP');
    YsJQueryAutoloader::register();
  }

  public function indexAction() {
    // action body
  }

}

Solo agregamos código en el método init() de IndexController para cargar la clase YsJQueryAutoloader.
La clase YsJQueryAutoloader carga todas las clases necesarias para que jQuery4PHP funcione correctamente mediante su método estático register().

NOTA: Para más información sobre la carga de clases en ZF consulta su documentación.

La Vista

Buscamos nuestra vista index.phtml (\zend-jquery4php\application\views\scripts\index\index.phtml) y cambiamos su código por el siguiente:

<html>
  <head>
    <title>jQuery4PHP Integration</title>
    <?php echo YsConfigAssets::includeAssets("jquery-ui") // jquery and jquery-ui (.js and .css) ?>
  </head>
  <body>

    <input type="button" id="btnOpenDialog" value="Click Here" />

    <?php echo YsUIDialog::initWidget('dlgId', 'style="display:none"'); ?>
      Hello World
    <?php echo YsUIDialog::endWidget() ?>

    <?php
    echo
    YsJQuery::newInstance()->onClick()->in('#btnOpenDialog')->execute(
        YsUIDialog::build('#dlgId')->_title("Dialog")->_width(500)
    ) ?>
  </body>
</html>

En esta vista incluimos los javascripts y hojas de estilos que están en la carpeta "jquery4php-assets" de jQuery4PHP.

Para incluir los .js y .css hemos utilizado la clase YsConfigAssets de la siguiente forma:

echo YsConfigAssets::includeAssets("jquery-ui")

Lo mas importante aqui es que esta clase lee el archivo de configuración "assets-default-config.xml" que se encuentra en la carpeta: zend-jquery4php\library\YepSua\Labs\CommonUtil

En este caso solamente usamos jQuery y jQuery UI pero jQuery4PHP tiene soporte a los plugins de jQuery: jqGrid, pNotify, jLayout entre otros y para incluirlos a todos bastaria con hacer:

echo YsConfigAssets::includeAssets("*")

Ahora solo tienes que acceder a la URL:

http://localhost/zend-jquery4php/public/

Y veras como se abre el "Hello World" en un dialogo de jqueryUI al presionar en el botón.

Para su consideración

• Este tutorial fue desarrollado por The YepSua Team equipo de desarrollo y mantenimiento de jQuery4PHP.
• Este tutorial y todos los de esta pagina web estan bajo las licencias Creative Commons.
• Este tutorial fue desarrollado con la ayuda de la documentación de ZF.
• Si piensas que la integración de Zend Framework y jQuery4PHP se puede realizar de una manera mas sencilla, no dudes en enviarnos esa informacion al correo the-team at yepsua.com
• Si estas interesado en traducir este tutorial a otro lenguaje, no dudes en enviarnos esa información al correo the-team at yepsua.com

Conclusión

Zend Framework es quizás uno de los primeros de la lista a elegir al momento de comenzar una aplicación por su estabilidad y que detras de el esta la empresa oficial de PHP: Zend Technologies.

ZF y jQuer4PHP te brinda la forma de crear aplicaciones enriquecidas fácilmente gracias al poder de jQuery y sus plugins