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 CodeIgniter

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 CodeIgniter.
• Si piensas que la integración de CodeIgniter 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

Este tutorial fue realizado para demostrar la integración de jQuery4PHP con los frameworks mas importantes para PHP. En este caso integraremos jQuery4PHP con CodeIgniter. CodeIgniter es un entorno de desarrollo abierto que permite crear webs dinámicas con PHP. Su principal objetivo es ayudar a que los desarrolladores, puedan realizar proyectos mucho más rápido que creando toda la estructura desde cero.

Descargando los recursos

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

NOTA: Para este tutorial fue descargada la versión 1.7.3 Stable de CodeIgniter

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

Pos Condiciones

• jQuery4PHP y CodeIgniter integrados..

Instalación de CodeIgniter

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

Para instalar CodeIgniter simplemente se descomprime el archivo que descargaste (en nuestro caso se llama CodeIgniter_1.7.3.zip ) en el directorio raíz de nuestro servidor web.

CONSEJO: El directorio que descomprimió renómbrelo como codeigniter-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 CodeIgniter en nuestro servidor web sería algo parecido a la siguiente.

C:
|--xampp
  |-- htdocs
    |--codeigniter-jquery4php
      |--system
        |--application
     |--cache
     |--codeigniter
     |--database
     |--fonts
     |--helpers
     |--language
     |--libraries
     |--logs
     |--plugins
     |--scaffolding
     |--user_guide

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

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

http://localhost/codeigniter-jquery4php

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

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

Integrando jQuery4PHP y CodeIgniter

Ahora vamos a descomprimir la librería de jQuery4PHP en el directorio C:/xampp/htdocs/codeigniter-jquery4php/system/application/libraries

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 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/codeigniter-jquery4php/system/application/libraries

Copia las carpetas js y styles del directorio showcase de jQuery4PHP al directorio C:/xampp/htdocs/codeigniter-jquery4php

Y eso es todo ya tenemos integrado CodeIgniter con jQuery4PHP.

Estructura de Directorio de CodeIgniter y jQuery4PHP integrados:

C:
|--xampp
  |-- htdocs
    |--codeigniter-jquery4php
      |--system
      |--application
      |--libraries
        |--YepSua\Labs\RIA\jQuery4PHP
      |--cache
      |--codeigniter
      |--database
      |--fonts
      |--helpers
      |--language
      |--libraries
      |--logs
      |--plugins
      |--scaffolding
      |--user_guide

Ejemplo: Hello World 2.0

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

El Controlador

Cambiamos el controlador Welcome (codeigniter-jquery4php\system\application\controllers) que originalmente es así:

<?php
class Welcome extends Controller {
  function Welcome()
  {
    parent::Controller();
  }
  function index()
  {
    $this->load->view('welcome_message');
  }
}

por este código:

<?php
class Welcome extends Controller {
  function Welcome()
  {
    parent::Controller();
  }
  function index()
  {
      $data['message'] = "Hello World";
      $this->load->view('welcome_message', $data);
  }
}

Cargando jQuery4PHP

Para cargar de manera automática todas las clases necesarias para que jQuery4PHP funcione correctamente realizamos lo siguiente:

* Creamos una clase llamada jQuery4PHP en la ruta codeigniter-jquery4php/system/application/libraries/jQuery4PHP.php con el siguiente contenido

<?php
if (!defined('BASEPATH')) exit('No direct script access allowed');
class jQuery4PHP {
  public function  __construct() {
    require_once 'YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php';
    YsJQueryAutoloader::register();
  }
}

Simplemente en el constructor de la clase incluimos el objeto YsJQueryAutoloader y llamamos a su método register() Así YsJQueryAutoloader realiza toda la autocarga de las clases necesarias de jQuery4PHP.

El siguiente paso es configurar CodeIgniter para que cargue la clase jQuery4PHP que acabamos de crear.

Abrimos el archivo de configuración autoload.php (codeigniter-jquery4php/system/application/config/autoload.php) y modificamos la línea:

$autoload['libraries'] = array();

por esta:

$autoload['libraries'] = array('jQuery4PHP');

Eso es todo, de esta forma CodeIgniter nos permite utilizar fácilmente jQuery4PHP.

NOTA: Para mas información sobre el uso de librerías de tercero en CodeIgniter consulta su documentación.

La Vista

Buscamos nuestra vista welcome_message.php (codeigniter-jquery4php/system/application/views/welcome_message.php) y cambiamos su código por el siguiente:

<html>
  <head>
    <title>jQuery4PHP Integration</title>
    <link rel="pingback" href="http://api.jquery.com/xmlrpc.php" />
    <link rel="stylesheet" type="text/css" href="/codeigniter-jquery4php/styles/examples.css" />
    <!-- jQuery - jQueryUI  -->
    <link rel="stylesheet" type="text/css" href="/codeigniter-jquery4php/styles/yepsua/jquery-ui-1.8.6.custom.css" />
    <link rel="stylesheet" type="text/css" href="/codeigniter-jquery4php/styles/jquery-ui-utilities.css" />
    <script type="text/javascript" src="/codeigniter-jquery4php/js/jquery.min.js"></script>
    <script type="text/javascript" src="/codeigniter-jquery4php/js/jquery-ui-1.8.6.custom.min.js"></script>
    <!-- jQuery - jQueryUI  -->

  </head>
  <body>

    <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)
    ) ?>

  </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/codeigniter-jquery4php/

Y veras como se abre el Dialogo con el mensaje Hello World al presionar en el botón.

Conclusión

CodeIgniter es uno de los frameworks mas usados al momento de crear aplicaciones en PHP y su integración con jQuery4PHP es realmente sencilla lo que hace que la creación de aplicaciones enriquecidas sea un juego de niños.