Primera página con jQuery4PHP

  • Por
  • PHP
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:

YsJQuery::newInstance()

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.

->execute('alert("Hola mundo!")')

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
include_once('../lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
   <title>Probando jQuery 4 PHP</title>
   <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>Probando el jQuery para PHP</h1>
   
   <button type="button" id="miboton">Pulsame</button>
   <?php
   echo
   YsJQuery::newInstance()
    ->onClick()
    ->in('#miboton')
    ->execute('alert("Hola mundo!")')
   ?>
   <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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Felix

02/11/2010
No entiendo
No entiendo muy bien la funcionalidad de algo que debe funcionar del lado del cliente, como javascript (jquery, o el framework que sea) hacerlo correr del lado del servidor, salvo que lo que se quiera es cargar al servidor con un trabajo que puede realizar perfectamente el cliente, con el consiguiente ahorro de tiempo y descarga de trabajo al servidor....

midesweb

14/2/2011
eso no se ejecuta en el servidor
Hola Felix,

Efectivamente, no has entendido bien... pues resulta que, aunque programes todo en el servidor con PHP, se ejecuta en el cliente. Es lo bonito de jQuery4PHP, que lo puedes programar en el servidor con PHP (con lo cual las personas que dominan PHP lo tienen al alcance), pero se ejecuta en el cliente (como cualquier programación jQuery que hagas con Javascript).