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 Symfony

Autor: Omar Yepez

Para su consideración

• Este tutorial fue desarrollado por The YepSua Team equipo de desarrollo y mantenimiento de jQuery4PHP.
• Este tutorial esta bajo las licencias Creative Commons.
• Este tutorial fue desarrollado con la ayuda de la documentación de symfony 1.4.
• Si piensas que la integración de Symfony 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

Introducción

Symfony es uno de los frameworks PHP más populares entre los usuarios y las empresas, ya que permite que los programadores sean mucho más productivos a la vez que crean código de más calidad y más fácil de mantener.
Symfony es maduro, estable, profesional y está muy bien documentado.

Descargando los recursos

• Librerías:
  • Descarga jQuery4PHP (source-showcase)
  • Descarga symfony

NOTA: Para este tutorial fue descargada la versión 1.4.9 de symfony

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 Symfony.
• Conocer básicamente la forma de trabajar con jQuery4PHP.

Pos Condiciones

• jQuery4PHP y Symfony integrados..

Instalación de Symfony

Llegado a este punto deberías tener descargado symfony y jQuery4PHP en tu disco duro.
Para instalar symfony vamos a realizar una serie de pasos con la ayuda de la línea de comandos

• Abrimos la línea de comando y nos ubicamos en el directorio raíz de nuestro servidor que en nuestro caso es C:\xampp\htdocs\

  cd C:\xampp\htdocs

• Ejecutamos el siguiente comando para crear el directorio symfony-jquery4php\lib\vendor\. Recuerda debes estar parado en el webroot de tu servidor.

  mkdir -p symfony-jquery4php\lib\vendor

• Descomprime el archivo de symfony que descargaste (en nuestro caso se llama symfony-1.4.9.zip ) en la carpeta vendor. Ten en cuenta renombrar la carpeta generada con el nombre symfony.

• Ahora nos ubicamos en la carpeta symfony-jquery4php

  cd symfony-jquery4php

• Para crear el esqueleto del proyecto ejecutamos

  lib\vendor\symfony\data\bin\symfony generate:project symfony-jquery4php

• Ahora creamos una aplicación llamada frontend

  lib\vendor\symfony\data\bin\symfony generate:app frontend

• Y creamos un modulo llamado helloworld dentro de la aplicación frontend

  lib\vendor\symfony\data\bin\symfony generate:module frontend helloworld

Ya con estos pasos tenemos nuestro proyecto symfony creado.

La estructura de directorio del proyecto symfony quedaría de la siguiente manera:

C:
|--xampp
  |--htdocs
    |--symfony-jquery4php
       |--apps
         |--frontend
           |--modules
             |--helloworld
               |--actions
               |--templates
       |--cache
       |--config
       |--data
       |--lib
       |--log
       |--plugins
       |--test
       |--web

Nota: Existen más carpetas importantes dentro del proyecto, si deseas mas información sobre esto consulta la documentación de symfony.

Ahora si accedes a la siguiente ruta en un navegador web te mostrara una página donde symfony te da las felicitaciones por haber creado un modulo nuevo.

http://localhost/symfony-jquery4php/web/index.php/helloworld/index

Si tienes tu servidor con mod-rewrite habilitado puedes acceder a por la ruta:

http://localhost/symfony-jquery4php/web/helloworld/index

Es recomendable usar mod-rewrite en proyectos con symfony

Integrando jQuery4PHP y Symfony

Ahora vamos a descomprimir la librería de jQuery4PHP en el directorio que Symfony ofrece para instalar Librerías de Terceros.

Para este tutorial descargamos el archivo source-showcase 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).

Cortamos y pegamos la carpeta YepSua que esta en la carpeta lib de jQuery4PHP, a la carpeta vendor donde instalamos symfony.

En este caso symfony cargara la librería jQuery4PHP así que no utilizaremos la clase YsJQueryAutoloader como acostumbramos.

Para que symfony cargue las clases de jQuery4PHP configuramos el archivo autoload.yml que se encuentra en el directorio symfony-jquery4php\config\autoload.yml Con el siguiente contenido:

autoload:
  jQuery4PHP:
    name: jQuery4PHP
    path: %SF_LIB_DIR%/vendor/YepSua
    recursive: on

Y eso es todo ya tenemos integrado symfony con jQuery4PHP.

Esta es la Estructura de Directorio de symfony y jQuery4PHP integrados:

C:
|--xampp
  |--htdocs
    |--symfony-jquery4php
       |--apps
         |--frontend
           |--modules
             |--helloworld
               |--actions
               |--templates
       |--cache
       |--config
       |--data
       |--lib
         |--vendor
           |--symfony
           |--YepSua\Labs\RIA\jQuery4PHP
       |--log
       |--plugins
       |--test
       |--web

Ejemplo: Hello World

Modificamos la vista y el controlador del modulo helloworld

El Controlador

Abrimos y modificamos el controlador HelloWorld symfony-jquery4php\apps\frontend\modules\helloworld\actions\actions.class.php que original mente es así:

<?php
class helloworldActions extends sfActions
{
  public function executeIndex(sfWebRequest $request)
  {
    $this->forward("default", "module");
  }
}

por este código:

<?php

class helloworldActions extends sfActions
{
  public function executeIndex(sfWebRequest $request)
  {
    $this->message = "Hello World";
  }
}

El primer action original redirecciona a la página de bienvenida del framework.
Ahora el nuevo crea una variable con el nombre message y el valor "Hello World".

Nota: Ten en cuenta que eliminamos los comentarios de la clase helloworldActions para hacer más corto este tutorial.

La Vista

Abrimos y agregamos el siguiente código a la vista indexSuccess.php symfony-jquery4php\apps\frontend\modules\helloworld\templates\indexSuccess.php).

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

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

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

Como ves la vista tiene poco código, solo el botón y el código php para el dialogo.
Esto es porque la vista está dentro de un layout symfony-jquery4php\apps\frontend\templates\layout.php

NOTA: Para mas información sobre el manejo de la vista en symfony consulta su documentación.

Ahora vamos a usar el archivo de configuración view.yml (symfony-jquery4php\apps\frontend\config\view.yml) para importar los javascripts y hojas de estilos para que jQuery4PHP funcione correctamente.

# You can find more information about this file on the symfony website:
# http://www.symfony-project.org/reference/1_4/en/13-View
default:
  http_metas:
    content-type: text/html
  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow
  stylesheets:    [main.css,yepsua/jquery-ui-1.8.6.custom.css,jquery-ui-utilities.css]
  javascripts:    [jquery.min.js,jquery-ui-1.8.6.custom.min.js]
  has_layout:     true
  layout:         layout

Lo más importante para comentar aquí es que en las claves stylesheets y javascripts configuramos las hojas de estilos y los archivos javascripts separados por una coma ",".

Solamente usamos jQuery y jQuery UI pero jQuery4PHP tiene soporte a los plugins de jQuery: jqGrid, pNotify, jLayout entre otros.

Las carpetas js y styles debes crearlas en el directorio symfony-jquery4php\web, solo copia los directorios que trae jQuery4PHP en la carpeta showcase.

NOTA: La carpeta por defecto donde symfony busca los estilos se llama css, asi que copia el contenido de la carpeta styles a la carpeta css de tu aplicación

Ahora solo tienes que acceder a la URL:

http://servidor/symfony-jquery4php/web/index.php/helloworld/index

y veras como se abre el "Hello World" al hacer click en el botón.

Conclusión

Symfony es uno de nuestro framework preferido e integrarlo con jQuery4PHP de verdad que es muy sencillo.
Esperemos les guste esta combinación.