Realizamos un primer ejemplo con las librerías jQuery4PHP, para la programación en Javascript y jQuery desde código PHP.
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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...