Jquery PHP

jQuery4PHP: jQuery para PHP
Librería PHP 5 que pone a la disposición de los programadores en PHP todas las funcionalidades de
jQuery y jQueryUI.
Por Miguel Angel Alvarez
Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Vamos a presentar y realizar diversas demostraciones de uso de unas librerías que estamos seguros
gustarán a más de uno. Se trata de un paquete de clases realizadas en PHP que permiten trabajar de una
manera sencilla con el framework Javascript jQuery desde código PHP.
Seguro que hay muchos desarrolladores que tienen conocimientos de PHP pero que no gozan de soltura
en la programación con Javascript. Quizás tú seas uno de ellos y hayas oído hablar de jQuery, un
framework que permite hacer cosas realmente sorprendentes con los elementos de las webs, para
producir páginas enriquecidas del lado del cliente, comunes en lo que se ha denominado la Web 2.0.
Justamente para estas personas, que conocen PHP pero que no han trabajado con Javascript, están
dirigidas las librerías que vamos a relatar. Digamos que son un puente entre las páginas dinámicas del
servidor con PHP y las páginas dinámicas del cliente, que permitirán a los desarrolladores trabajar con
toda la potencia de jQuery, pero sin salirse de PHP y sin tener que aprender Javascript.
A lo largo de los próximos artículos veremos cómo se podrá realizar esta tarea y realizaremos varios
ejemplos sencillos que nos ayudarán a dar nuestros primeros pasos con jQuery4PHP (jQuery para
PHP).
Nota: Aprender Javascript está al alcance de cualquier persona que sepa PHP. En nuestra opinión,
Javascript es todavía más sencillo de utilizar que PHP, así que si lo deseas, no deberías tener ningún
problema en aprender el lenguaje de programación del lado del cliente. Para ello te recomendamos
accede a la sección Javascript a Fondo. Además, en DesarrolloWeb.com tenemos un completo Manual
de jQuery, que te ayudará a dominar el framework una vez tengas conocimiento de Javascript.
Personalmente prefiero programar con jQuery y PHP que utilizar las librerías jQuery4PHP, pero claro
que esto lo afirmo después de más de 10 años programando en Javascript y un par de ellos de
experiencia con jQuery. No obstante, opino que para una persona que domine PHP puede resultarle más
rápido aprender a usar estas librerías que aprender a usar Javascript y jQuery.
Hasta el momento hemos podido realizar ejemplos sencillos con jQuery4PHP sin demasiadas
complicaciones y con buenos y rápidos resultados. Ahora bien, si la cosa se complica mucho en el
futuro y se desean hacer scripts más complejos, quizás el trabajo con jQuery4PHP se convierta en algo
demasiado pesado. Es algo para lo que, sinceramente, todavia no tengo la suficiente experiencia para
afirmar que pueda ocurrir o no.
Descarga de jQuery4PHP
Las personas que deseen utilizar estas librerías tienen que empezar por la descarga de los scripts PHP
que serán necesarios de instalar en nuestro servidor. La descarga la podremos obtener desde el sitio de
jQuery4PHP:
http://jquery4php.sourceforge.net
Encontraremos un enlace para "Download" que nos llevará al sitio de SourceForge donde descargar la
última versión de las librerías.
Comprobaremos que la descarga nos ofrece ya diversos ejemplos de uso de las librerías, que nos
pueden ofrecer un vistazo rápido a las posibilidades de jQuery4PHP. Además, accediendo a la página
de inicio de las librerías tendremos también la oportunidad de ver varios ejemplos y una explicación
rápida sobre sus posibilidades.
El el próximo artículo mostraremos cómo realizar una página que utilice las librerías jQuery4PHP para
programar con jQuery desde PHP.
Primera página con jQuery4PHP

Realizamos un primer ejemplo con las librerías jQuery4PHP, para la programación en Javascript y
jQuery desde código PHP.
En el ejemplo anterior explicamos por encima qué eran las librerías jQuery4PHP y ofrecimos el link a
la página de producto donde podemos descargarlas. Ahora vamos a crear nuestro primer ejemplo, lo
más básico posible para comenzar por algo sencillo.
Queremos señalar que sobre todo estos primeros ejemplos están sacados de la propia documentación de
jQuery4PHP. Nosotros nos hemos dedicado a traducirlos y adaptarlos a nuestra propia forma de
explicar las cosas. No obstante, recomendamos acceder a la página de jQuery4PHP donde
encontraremos toda la documentación de las librerías.
Vamos a ver una receta paso por paso para realizar nuestro primer ejemplo.
Descarga de las librerías

Como habíamos dicho anteriormente, necesitamos descargar las librerías. En la descarga ya tenemos
los archivos PHP para hacer de puente con jQuery y la propia librería de jQuery que debemos también
disponer para que todo funcione.
Incluir las liberías PHP

En el código de la página PHP donde queramos utilizar jQuery4PHP tenemos que hacer un include de
las librerías jQuery4PHP. Para ello tenemos que utilizar un código como este:
<?php
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
Para que funcione bien, prestar atención a la ruta del include, que sea la correcta y que dependerá de
dónde hayáis colocado las librerías descargadas.
Incluir jQuery
Ahora tenemos que incluir el framework Javascript jQuery y para ello tenemos que utilizar la etiqueta
SCRIPT para cargar el código Javascript a las librerías de jQuery. Este "include" se suele hacer dentro
del HEAD de la página.
<head>
<title>Probando jQuery 4 PHP</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
También debemos asegurarnos que la ruta a este archivo Javascript sea la correcta (js/jquery.min.js).
Hacer un elemento, para aplicarle Javascript

Ahora vamos a colocar un poco de HTML, para colocar un elemento al que luego le aplicaremos
Javascript por medio de las librerías jQuery4PHP. Puede ser cualquier tipo de elemento. Nosotros
hemos escogido un botón.
<button type="button" id="miboton">Pulsame</button>
Por favor, fíjate que el botón tiene un atributo id="miboton", que utilizaremos más tarde para referirnos
a él.
Código PHP para generar un mensaje Hola Mundo

Ahora vamos a ver el código PHP que necesitaríamos para generar el típico mensaje de "Hola Mundo",
que se mostrará al pulsar el botón anterior.
<?php
echo
YsJQuery::newInstance()
->onClick()
->in('#miboton')
->execute('alert("Hola mundo!")')
?>
Comienza con una sentencia "echo", que es importante para que se escriba en la página el código
Javascript que PHP generará según nuestras instrucciones.
Luego seguimos haciendo una llamada a un método estático:
Con ese código creamos una nueva instancia de la clase necesaria para hacer jQuery y luego aplicamos
varios métodos para cumplir nuestros objetivos. Primero le decimos que queremos definir un evento
click.
->onClick()
Luego decimos que el evento se realizará sobre el botón y para ello hacemos una llamada al método
in() y le pasamos el selector para el botón. Ese selector se hace a través del atributo id del botón. Ese
selector se hace como en CSS, colocando una almohadilla seguida del identificador del elemento al que
queremos referirnos.
->in('#miboton')
Por último ejecutamos una sentencia Javascript para producir un mensaje en una caja de diálogo tipo
alert.
Y ya está
Con esto hemos terminado nuestro ejemplo. Quizás está bien aclarar que esto no tiene mucho todavía
de jQuery, pero de momento está bien para ir familiarizándonos sobre el modo de trabajo con
jQuery4PHP.
Habrás podido observar que el código PHP para comunicar con las librerías jQuery4PHP es un poco
particular. Realmente no tiene nada que no hayas podido conocer si trabajas con programación
orientada a objetos en PHP, pero quizás te aclararías mejor si vieses un código como este, que es más
largo, pero que utiliza una sintaxis PHP que posiblemente te sea más familiar.
<button type="button" id="boton2">Pulsame también</button>
<?php
$instancia = YsJQuery::newInstance();
$instancia->onClick();
$instancia->in('#boton2');
$instancia->execute('document.bgColor="#ff8800"');
$instancia->write();
?>
En este segundo ejemplo además tenemos una diferencia, que en vez de iniciar todo con un "echo" de
PHP, llamamos al acabar el código al método write() para escribir el Javascript generado en la página.
Nota: en la documentación recomiendan utilizar el echo al principio en vez de la llamada a write() al
final, pero no especifican el por qué.
Código completo
Puedes ver a continuación el código completo de este primer ejemplo. En realidad son dos ejemplos
muy similares que implementan dos eventos click sobre dos botones distintos.
<?php
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
</head>
<body>
<h1>Probando el jQuery para PHP</h1>
<button type="button" id="miboton">Pulsame</button>

<?php
echo
->onClick()
->in('#miboton')
?>
<br>
<br>
<button type="button" id="boton2">Pulsame también</button>
<?php
$instancia = YsJQuery::newInstance();
$instancia->onClick();
$instancia->in('#boton2');
$instancia->execute('document.bgColor="#ff8800"');
$instancia->write();
?>
</body>
</html>
Para acabar, dejamos un enlace para ver el ejemplo en marcha.
Otra manera de escribir eventos en

jQuery4PHP
En la documentación de jQuery4PHP nos ofrecen otra manera de escribir el código de eventos que
ellos llaman método estático.
Estamos ofreciendo una serie de artículos prácticos para enseñar a manejar las librerías jQuery4PHP.
En artículos anteriores ofrecimos ya una pequeña introducción a las librerías. y un primer ejemplo de
uso relatado paso por paso.
En el presente artículo vamos a trabajar todavía con ejemplos bien sencillos, pero nos introduciremos
un poco más en las interesantes posibilidades que nos ofrece jQuery. Veremos cómo desde PHP
podemos hacer cosas tan interesantes como alterar las propiedades CSS de los elementos de la página.
Además, repasaremos un método alternativo que nos ofrecen en la documentación para definir eventos
en elementos de la página, que se llama método estático.
Nota: Recordemos que para comenzar debemos incluir las librerías PHP de jQuery4PHP y la propia
librería Javascript de jQuery. Todo eso lo vimos en el artículo Primera página con jQuery4PHP.
Método estático de definir eventos con jQuery4PHP

El método estático se llama así porque se utiliza un método estático para definir el evento que
deseemos. Por tanto, existe un método estático para cada manejador de evento.
Por ejemplo, si deseamos definir un evento click, utilizaremos el método estático click(), de esta
manera:
YsJQuery::click()
A continuación tendremos que definir sobre qué elemento se asocia el evento y la función a ejecutar
cuando se produzca.
Nota: Antes (ver artículo anterior) comenzábamos todo con otro método estático:
YsJQuery::newInstance();
A partir de aquí, sobre la instancia generada, utilizábamos métodos normales para definir eventos o
ejecutar código. Pero en realidad es todo muy parecido.
Para ilustrar cómo definir eventos con método estático vamos a realizar un ejemplo sencillo, que sirve
para alterar el color de fondo de un elemento cuando pasamos el ratón por encima.
Podemos comenzar por ver ejemplo en marcha.
Durante este ejemplo aprenderemos también a invocar uno de los métodos de jQuery, css() que sirve
para alterar el valor de los atributos CSS de los elementos de la página.
echo
YsJQuery::mouseover()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->propertyName("background-color")
->value("#f99")
)
->execute();
Como se puede ver, todo comienza con un echo, igual que antes. Luego se llama al método estático
mouseover(), para definir un evento onMouseOver.
Luego se define que el evento se debe asociar al elemento con identificador "micapa". Más tarde
definimos la función a ejecutar cuando se produzca el evento, con el método handler().
El paso de cambiar un atributo CSS del elemento es especialmente interesante. Para ello utilizamos el
método estático css(). Sobre ese método tenemos que definir cosas como el elemento que queremos
actualizar, la propiedad CSS a cambiar y el nuevo valor a colocar.
Con el método estático de definición de eventos debemos acabar invocando al método execute().
Ahora podemos ver también el código del evento onMouseOut.
echo
YsJQuery::mouseout()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->value("#99f")
)
->execute()
Es exactamente igual, sólo que estamos alterando la propiedad background-color a otro valor.
Podemos ver el código completo del ejemplo
Ahora veamos el código completo de este ejemplo de jQuery4PHP.
<?php
?>

>
<html lang="es">
<head>
<style type="text/css" media="all">
#micapa{
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background-color: #99f;
}
</style>
</head>
<body>
<div id="micapa">Pasa el ratón por encima</div>
<?php
echo
YsJQuery::mouseover()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->value("#f99")
)
->execute();
echo
YsJQuery::mouseout()
->in('#micapa')
->handler(
YsJQuery::css()
->inVar("this")
->value("#99f")
)
->execute()
?>
</body>
</html>
Si lo deseas, puedes ver ejemplo en marcha.
Hay que reconocer que este segundo ejemplo todavía no ha sido muy espectacular, más aun si sabemos
que este efecto se podría haber realizado sólo con Hojas de Estilo en Cascada, con los
pseudoElementos hover.
Pero bueno, al menos hemos conocido uno de los métodos más importantes de jQuery que es el método
CSS, con el que podremos cambiar las propiedades CSS de cualquier elemento de la página.
En el próximo artículo vamos a tratar cosas un poco más interesantes, puesto que empezaremos a ver la
realización de efectos dinámicos sencillos con jQuery4PHP.
Efectos sencillos con jQuery4PHP

Vamos a realizar un ejemplo con algunos efectos sencillos que se pueden hacer en jQuery, pero
programados enteramente sobre PHP.
En este artículo vamos a empezar a ver las posibilidades de jQuery para la realización de cosas un poco
más espectaculares. El trabajo con jQuery4PHP ya lo hemos empezado a relatar en artículos anteriores
del Manual de jQuery4PHP, así que recomendamos su lectura si aun no se había realizado.
Veremos a continuación cómo realizar efectos sencillos para animación de elementos de la página.
Decimos que son sencillos porque se pueden hacer con llamadas a simples métodos de jQuery, pero si
tenemos una ligera idea sobre Javascript, podremos saber que estos efectos no tendrían nada de
sencillos si no estuviéramos utilizando un framework como jQuery.
Todos los efectos los vamos a realizar sobre una capa.
<div id="micapa">Esta capa se mueve</div>
Ahora veremos el código PHP para animarla. Comenzaremos por ver un código que se ejecutará
cuando el usuario cargue la página, sin que se tenga que pulsar ningún botón.
echo
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
"left"=>"400px",
"top"=>"40px"
))
->duration(YsJQueryConstant::SLOW)
);
Como vemos el método ejecute() nos sirve para ejecutar código directamente.
Dentro del execute() hacemos una llamada al método animate(), que será el encargado de generar esa
animación. Básicamente lo que le indicamos es que la animación se realiza sobre la capa con
id="micapa" y que se deben animar las propiedades left y top de CSS (con lo que se producirá un
movimiento de la capa por la página).
Ahora vamos a ver cómo se realizaría una animación similar, pero como respuesta a la pulsación de un
botón. Para ello definimos un evento y ejecutamos el código sólo cuando se produzca ese evento.
echo
->onClick()
->in("#miboton")
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
'fontSize'=>'28px',
'width'=>'300px'
))
);
Ahora podemos ver un par de efectos todavía más simples, pero también bastante visuales. Se
ejecutarán como respuesta al evento click sobre otros botones de la página. En este primer caso
hacemos un efecto de fundido, de opaco a transparente, con lo que haremos que desaparezca la capa
"micapa".
echo
->onClick()
->in("#ocultar")
->execute(
YsJQuery::fadeOut()
->in("#micapa")
);
Con este otro código haremos un efecto de fundido de transparente a opaco, con lo que conseguiremos
que la capa se vuelva a mostrar.
echo
->onClick()
->in("#mostrar")
->execute(
YsJQuery::fadeIn()
->in("#micapa")
);
Nota: Para entender bien estos ejemplos quizás sea necesario, o al menos sí recomendable, conocer un
poco de jQuery y para ello recomendamos acceder al Manual de jQuery, en la sección que habla de
efectos.
Para acabar, ponemos el código completo de esta práctica con jQuery4PHP.
<?php
?>

>
<html lang="es">
<head>
<style type="text/css" media="all">
#micapa{
width: 200px;
padding: 10px;
border: 1px solid #ccc;
background-color: #336;
color: #fff;
position: absolute;
top: 200px;
left: 0;
font-size: 10px;
font-family: verdana;
}
</style>
</head>
<body>
<button id="miboton">Anima de otra manera!</button>
<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostrar</button>
<div id="micapa">Esta capa se mueve</div>
<?php
echo
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
"left"=>"400px",
"top"=>"40px"
))
);
echo
->onClick()
->in("#miboton")
->execute(
YsJQuery::animate()
->in("#micapa")
->properties(array(
'fontSize'=>'28px',
'width'=>'300px'
))
);
echo
->onClick()
->in("#ocultar")
->execute(
YsJQuery::fadeOut()
->in("#micapa")
);
echo
->onClick()
->in("#mostrar")
->execute(
YsJQuery::fadeIn()
->in("#micapa")
);
?>
</body>
</html>
Puedes ver el ejemplo en marcha en una página aparte.
En el siguiente artículo vamos a hacer otra práctica interesante con jQuery4PHP, en la que veremos
cómo realizar un Ajax con PHP.

Jquery PHP

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery PHP

Uploaded by

Copyright:

Available Formats

jQuery4PHP: jQuery para PHP

Primera página con jQuery4PHP

Descarga de las librerías

Incluir las liberías PHP

Hacer un elemento, para aplicarle Javascript

Código PHP para generar un mensaje Hola Mundo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<button type="button" id="miboton">Pulsame</button>

Otra manera de escribir eventos en

Método estático de definir eventos con jQuery4PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<div id="micapa">Pasa el ratón por encima</div>

Efectos sencillos con jQuery4PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<div id="micapa">Esta capa se mueve</div>

You might also like