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 Kohana 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 Kohana que es un framework para aplicaciones web para PHP5 que implementa el patrón de Modelo Vista Controlador Jerárquico (HMVC). Sus principales objetivos se basan en ser seguro, ligero, y fácil de utilizar.

• Características de Kohana:
  • Extremadamente seguro
  • Extremadamente ligero
  • Mínima curva de aprendizaje
  • Utiliza el patrón MVC
  • Compatibilidad UTF-8 100%
  • Arquitectura Loosely coupled
  • Extremadamente sencilla de extender

Descargando los recursos

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

NOTA: Para este tutorial fue descargada la versión 3.0.8 de Kohana

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

Pos Condiciones

• jQuery4PHP y Kohana integrados.

Instalación de Kohana:

Llegado a este punto deberías tener descargada las fuentes de Kohana.
Para instalar Kohana simplemente se descomprime el archivo que descargaste (en nuestro caso se llama kohana-3.0.8.zip )
en el directorio raíz de nuestro servidor web.

CONSEJO: El directorio que descomprimió renómbrelo como kohana-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.

La estructura de directorio de Kohana en nuestro servidor web sería algo más o menos parecido a la siguiente.

C:
|--xampp
  |-- htdocs
    |--kohana-jquery4php
      |--application
      |--modules
      |--system

Para mas información sobre la Estructura de Directorio de Kohana consulta su documentación en línea de Kohana.

Ahora que tenemos instalado Kohana en nuestro servidor, podemos acceder a la siguiente url en un navegador web:

http://localhost/kohana-jquery4php/

Esta URL muestra una página que da información básica sobre nuestro servidor web y los requerimientos obligatorios y opcionales que Kohana necesita para funcionar.

NOTA: Si la página te muestra algún error en los requerimientos obligatorios consulta la documentación en línea de Kohana.

Ahora solo tenemos que borrar o renombrar el archivo llamado install.php que está en el directorio raíz de nuestra aplicación C:\xampp\htdocs\kohana-jquery4php\install.php para poder acceder al controlador Welcome que trae Kohana de ejemplo.

Accedemos a la ruta

http://localhost/kohana-jquery4php/index.php/welcome

Y nos debería mostrar el famoso Hello World.

NOTA: Si tienes habilitado el modulo mod_rewrite en tu servidor web puedes acceder a la ruta:

http://localhost/kohana-jquery4php/welcome

Ahora se puede ver el Hello World con una URL mas amigable.
Ten presente que para que funcione correctamente el mod_rewrite debes tener un archivo .htaccess bien configurado.
Kohana ya trae un archivo llamado example.htaccess solo renómbralo por .htaccess y deberia funcionar.

NOTA: Seguiremos el tutorial basados en la url amigable con el mod_rewrite: http://localhost/kohana-jquery4php/welcome

Integrando jQuery4PHP y Kohana

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

Creamos una carpeta llamada vendor en el directorio C:\xampp\htdocs\kohana-jquery4php\application y descomprimimos el código fuente de jQuery4PHP.

Para este tutorial descargamos el archivo source-showcase con la ultima versión de jQuuery4PHP.
Este archivo contiene el código fuente de jQuery4PHP (carpeta lib ) como todas 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\kohana-jquery4php\application\vendor

Y eso es todo ya tenemos integrado Kohana con jQuery4PHP.

Estructura de Directorio de Kohana y jQuery4PHP integrados:

C:
|--xampp
  |--htdocs
    |--kohana-jquery4php
      |--application
        |--vendor
          |--YepSua\Labs\RIA\jQuery4PHP
      |--modules
      |--system

Ejemplo: Hello World 2.0

Vamos a cambiar el ejemplo que trae Kohana en su instalación para que nos muestre el Hello World en un UI Dialog al hacer click en un botón.

El Controlador

Cambiamos el controlador welcome (kohana-jquery4php\application\classes\controller\welcome.php) que originalmente es así:

<?php
defined('SYSPATH') or die('No direct script access.');
class Controller_Welcome extends Controller {
  public function action_index() {
    $this->request->response = 'hello, world!';
  }
}
// End Welcome

por este código:

<?php
defined('SYSPATH') or die('No direct script access.');
class Controller_Welcome extends Controller_Template {
  public $template = 'welcome';
  public function __construct(Kohana_Request $request) {
    parent::__construct($request);
    if ($path = Kohana::find_file('vendor', 'YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader')) {
      require_once $path;
      YsJQueryAutoloader::register();
    }
  }
  public function action_index() {
    // Adding variables to the object that will be displayed in the view
    $this->template->title = "Welcome to Kohana and jQuery4PHP Inegration!";
    $this->template->heading = "Enjoy";
    $this->template->content = "Hello World";
  }
}
// End Welcome

Vamos a comentar los cambios pero para mayor información consulta la documentación de Kohana.

De arriba a abajo:

1. Primero nuestra clase Controller_Welcome ahora hereda de Controller_Template.
   Esto es porque nuestro nuevo controlador llamara a una vista que renderizará toda la información.
2. Agregamos un atributo llamado $template con el valor 'welcome'. Este es el nombre de la vista que más adelante vamos a crear.
3. Agregamos la función __construct(): Aquí es donde cargamos la librería jQuery4PHP mediante la ayuda del metodo estatico Kohana::find_file. Cargamos todas la clases necesarias para que jQuery4PHP funcione mediante el objeto YsJQueryAutoloader::register();
4. Cambiamos el código del metodo action_index. Agregamos los atributos title, heading, content a la vista.

La Vista

Ahora es el momento de crear la vista welcome.php en el directorio kohana-jquery4php\application\classes\views\

La Vista welcome (kohana-jquery4php\application\classes\views\welcome.php) debe quedar así:

NOTA: Para información mas detallada de las vistas consulta la documentación de Kohana.

<html>
  <head>
    <title><?php echo $title; ?></title>
    <link rel="pingback" href="http://api.jquery.com/xmlrpc.php" />
    <link rel="stylesheet" type="text/css" href="/kohana-jquery4php/styles/examples.css" />

    <!-- jQuery - jQueryUI  -->
    <link rel="stylesheet" type="text/css" href="/kohana-jquery4php/styles/yepsua/jquery-ui-1.8.6.custom.css" />
    <link rel="stylesheet" type="text/css" href="/kohana-jquery4php/styles/jquery-ui-utilities.css" />
    <script type="text/javascript" src="/kohana-jquery4php/js/jquery.min.js"></script>
    <script type="text/javascript" src="/kohana-jquery4php/js/jquery-ui-1.8.6.custom.min.js"></script>
    <!-- jQuery - jQueryUI  -->

  </head>
  <body>
    <h1><?php echo $heading; ?></h1>

    <input type="button" id="test" value="Click" />

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

    <?php
    echo
    YsJQuery::newInstance()->onClick()->in('#test')->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 showcase de jQuery4PHP.

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

Ahora solo tienes que acceder a la URL:

http://localhost/kohana-jquery4php/index.php/welcome

ó

http://localhost/kohana-jquery4php/welcome

Y veras como se abre el Hello World al presionar el botón.

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 en linea de ZF.
• Si piensas que la integración de Kohana 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

jQuer4PHP te brinda la forma de crear aplicaciones enriquecidas fácilmente y su integración con Kohana sin duda alguna te darán las bases para desarrollar aplicaciones robustas con una agradable Interfaz de Usuario gracias al poder de jQuery y sus plugins