Zend Framework + jQuery



Hosting barato
VN:F [1.9.20_1166]
Rating: 10.0/10 (2 votes cast)

¿Qué es jQuery?

jQuery es una librería de javascript que facilita el desarrollo de código javascript para distintos tipos de navegador (desarrollo transversal), así como facilitar las animaciones, gestiones de eventos y las interacciones a través de ajax del desarrollo web.

Es decir, nos encontramos frente a un framework de javascript, que vamos a ver cómo interactúa y se integra con Zend Framework.

En el presente artículo nos centraremos en hacer una pequeña demo sobre las interacciones a través de ajax que nos facilitará el desarrollo futuro de nuestros portales.

Instalación de jQuery

Su instalación es muy sencilla, pero antes de instalar, como es lógico, debemos descargarnos la última versión de jQuery que podemos hacer desde aquí.

Una vez descargado lo instalaremos en el directorio “js” de nuestro proyecto que se encuentra en /biblioteca/public/js/ como podemos ver en la siguiente imagen:

Instalación de jQuery en Zend Framework

Llamar a jQuery desde Zend Framework

Una vez ya instalado, nos queda incluirlo en nuestro código para poder luego utilizar todas sus funcionalidades, para ello, la inclusión de archivos javascript, si recordáis se hace desde el controlador. Para nuestro ejemplo, haremos la llamada desde el controlador que inicia la aplicación “IndexController”, quedando el código de la siguiente manera:

<?php

class IndexController extends Zend_Controller_Action
{

    public function init(){

        /* Initialize action controller here */
    }

    public function indexAction(){
    	//Título de la vista
    	$this->view->title = "Mis Libros";
    	//Añadimos el título a la vista
		$this->view->headTitle($this->view->title, 'PREPEND');
		//Añadimos la llamada a la librería jQuery
		$this->view->headScript()->appendFile($this->view->baseUrl() . "/js/jquery-1.4.2.min.js");
		//Creamos el modelo, para la consulta de libros
		$libros = new Model_DbTable_Libros();
		//Devolvemos a la vista todos los libros
		$this->view->libros = $libros->fetchAll();
    }
}
?>

Una vez instalado, si nos vamos al código fuente podemos ver cómo está la llamada a jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="Cache-Control" content="no-cache" >
		<title>Mis Libros - Biblioteca</title>

		<script type="text/javascript" src="http://biblioteca.localhost:8080/js/jquery-1.4.2.min.js"></script>
		<link href="http://biblioteca.localhost:8080/css/biblioteca.css" media="screen" rel="stylesheet" type="text/css" >
	</head>
..................
..................
..................

Ejemplo de envío de votaciones

Vamos a hacer una pequeña demo del uso de la librería jQuery en el que vamos a enviar la votación dada a un libro de nuestra biblioteca y para la que devolveremos un mensaje de gracias. Está claro que una vez recibida la votación luego se podría insertar en una tabla de nuestra BBDD la votación recibida, hacer alguna estimación, como la media de la votación y devolverla a la página origen. Pero lo más importante, es la de demostrar la comunicación entre el cliente y el servidor a través de la librería jQuery.

Para ello, en nuestra demo, modififcaremos el arhcivo “index.phtml” del controlador “IndexController” de la siguiente manera:

<p><a href="<?php echo $this->url(array('controller'=>'libro','action'=>'anyadir'));?>">A&ntilde;adir nuevo libro</a></p>
<table>
	<tr>
		<th>T&iacute;tulo</th>
		<th>Autor</th>
		<th>Favorito</th>
		<th>&nbsp;</th>
	</tr>
	<?php foreach($this->libros as $libro) : ?>
	<tr>
		<td><?php echo htmlentities($this->escape($libro->titulo)) ;?></td>
		<td><?php echo htmlentities($this->escape($libro->autor)); ?></td>
		<td  id = "<?php echo 'rating' . $libro->id ?>"><a id = "<?php echo $libro->id .'_1' ?>" href = "#">1</a> <a id = "<?php echo $libro->id.'_2' ?>" href = "#">2</a> <a id = "<?php echo $libro->id.'_3' ?>" href = "#">3</a> <a id = "<?php echo $libro->id.'_4' ?>" href = "#">4</a> <a id = "<?php echo $libro->id.'_5' ?>" href = "#">5</a></td>
		<td>
			<a href="<?php echo $this->url(array('controller'=>'libro', 'action'=>'editar', 'id'=>$libro->id));?>">Editar</a>
			<a href="<?php echo $this->url(array('controller'=>'libro',	'action'=>'borrar', 'id'=>$libro->id));?>">Borrar</a>
		</td>
	</tr>
	<?php endforeach; ?>
</table>
<script language = "javascript">
	$("a").click(function(){
		var libro = this.id.substring(0, this.id.indexOf("_"));
		var voto = this.id.substring(this.id.indexOf("_") + 1, this.id.length);
		alert("libro: " + libro + " voto: " + voto);

		//Tratamos la devolución a través de json
		$.post("<?php echo $this->url(array('controller'=>'index', 'action'=>'votacion'));?>", {libro: libro, voto: voto}, function(data){
			document.getElementById("rating" + libro).innerHTML = "Media: " + data.media + " Total: " +  data.total;
			console.log(data);
		}, "json");

		//Tratamos el resultado a través de la devolución de un XML
		$.post("<?php echo $this->url(array('controller'=>'index', 'action'=>'votacion'));?>", {libro: libro, voto: voto}, function(data){
			//alert(data);
			var media = data.substring(data.indexOf("<average>") + 9, data.indexOf("</average>"));
			var total = data.substring(data.indexOf("<count>") + 7, data.indexOf("</count>"));
			//document.getElementById("rating" + libro).innerHTML = "Media: " + media + " Total: " +  total;
			console.log(data);
		}, "text");
	});
</script>

De manera que visualmente tenemos la siguiente vista, a partir del código anterior:

Página Principal de la biblioteca

Para aquellos libros para los que no se ha producido ninguna votación, tenemos la posibilidad de votar de 1 a 5.

Nuestra idea es la siguiente, hacer clic sobre un número de la votación, que este dato junto con el identificador del libro viaje al servidor, se hagan las operaciones que se hayan definido, y se responda. Esa respuesta, es tratada por la vista, y nos muestra la información obtenida.

Envío de información y tratamiento de respuesta (Browser)

El envío de información lo haremos por POST, y lo haremos a partir del clic sobre una de las votaciones, para lo que tenemos:

$("a").click(function(){
//Realizamos las operaciones oportunas una vez capturado el clic sobre el enlace
}

Una vez capturado el clic sobre el enlace, haremos el envío por POST a través de la siguiente sentencia:

$.post(url donde enviamos la información, {variable1: valor1, variable2: valor2, …, variableN: valorN}, function(data){
   //Tratamos el valor recibido a trav&eacute;s de “data” para poder realizar as operaciones que queramos en ese momento.
}, "text");

Con “text” le indicamos el tipo de dato que vamos a recibir. Con “text” podemos tratar texto, y por tanto, recibir un XML. En teoría, si pusiéramos “xml” sería equivalente, el problema es que no he conseguido recibir la información en formato XML.

Si en lugar de “text”, ponemos “json” la respuesta será recibida en formato json, por lo que su extracción será de manera distinta a si fuera texto o un XML. Esto se puede ver en el código añadido con anterioridad.

$.post(url donde enviamos la información, {variable1: valor1, variable2: valor2, …, variableN: valorN}, function(data){
   //Tratamos el valor recibido a trav&eacute;s de “data” para poder realizar as operaciones que queramos en ese momento.
}, "json");

Si en lugar de “text”, ponemos “json” la respuesta será recibida en formato json, por lo que su extracción será de manera distinta a si fuera texto o un XML. Esto se puede ver en el código añadido con anterioridad.

Recepción de información, tratamiento de la misma y envío de respuesta (Servidor)

A nivel de servidor, deberemos realizar varias tareas. Primero, vamos a crear una clase propia, tratada en el artículo Añadir librería propia a Zend Framework. Y en dicha librería, vamos a tratar en el método write, por ejemplo, el voto recibido, y el resultado generado.

Class ZendExt_Application_Resource_Votacion {
	//TODO - Insert your code here
	private $libro;
	private $voto;

	function __construct($libro, $voto) {
		$this->libro = $libro;
		$this->voto = $voto;
		//Zend_Debug::dump("ZendExt_Application_Resource_Prueba CONSTRUIDO " . APPLICATION_PATH, date('D, d M Y H:i:s'), $echo = true);
	}

	/**
	 *
	 */
	function __destruct() {
		//Zend_Debug::dump("ZendExt_Application_Resource_Prueba DESTRUIDO " . APPLICATION_PATH, date('D, d M Y H:i:s'), $echo = true);
	}

	public function write(){
		//Procesamos voto, realizamos operaciones, consultamos BBDD, actualizamos, etc.
		$div = rand(0, $this->voto);
		if ($div == 0)
			$div = 1;
		$average = round($this->voto / $div, 2);
		$count = rand(intval($average), 100);

		//Devolvemos le resultado en formato como json en formato array. Debemos quitar estas l&iacute;neas de  c&oacute;digo si queremos devolver por text o xml.
		$json = array("libro"=>$this->libro, "media"=>$average, "total"=>$count);
		return json_encode($json);

		//Devolvemos el resultado a la página desde la que se ha recibido la votación, una vez realizados los cálculos anteriores. Debemos quitar estas l&iacute;neas de c&oacute;digo si queremos devolver por json
		$xml = "<?xml version="1.0" encoding="UTF-8" standalone="yes"?>";
		$xml .= "<rating><average>".$average."</average><count>".$count."</count></rating>";
		return $xml;
	}
}
?>

Se han definido dos tipos de salida, una con la variable $json, para enviar el resultado en formato json, y otra con la variable $xml, para tratar el resultado en formato texto o xml.

Además, nos haría falta, añadir unas líneas de código en nuestro IndexController, ya que vamos a añadir un action que será “votacionAction” si lo que devolvemos es a través de json.

public function votacionAction(){
    	if ($this->getRequest()->isPost()){	//POST
    		//Añadimos las siguientes dos líneas para que al devolver el resultado, no nos devuelva
    		//todo el código de la página que lo contiene más el resultado
    		$this->_helper->layout->disableLayout();
			$this->_helper->viewRenderer->setNoRender();

	    	//Recuperación de los valores
	    	$libro = $_POST["libro"];
	    	$voto = $_POST["voto"];
	    	//Definimos cómo será la cabecera de la información que vamos a enviar al servidor en este momento
		header('Content-Type: text/json; charset=UTF-8');
		header("Cache-Control: no-cache, must-revalidate");

	    	$gestVoto = new ZendExt_Application_Resource_Votacion($libro, $voto);
	    	//Procesamos voto
	    	echo $gestVoto->write();

	 }else{	//GET
		//No hacemos nada
    	}

    }

Pero si devolviéramos en formato texto o xml, sería de la siguiente manera:

public function votacionAction(){
    	if ($this->getRequest()->isPost()){	//POST
    		//Añadimos las siguientes dos líneas para que al devolver el resultado, no nos devuelva
    		//todo el código de la página que lo contiene más el resultado
    		$this->_helper->layout->disableLayout();
			$this->_helper->viewRenderer->setNoRender();

	    	//Recuperación de los valores
	    	$libro = $_POST["libro"];
	    	$voto = $_POST["voto"];
	    	//Definimos cómo será la cabecera de la información que vamos a enviar al servidor en este momento
		header('Content-Type: text/xml; charset=UTF-8');
		header("Cache-Control: no-cache, must-revalidate");

	    	$gestVoto = new ZendExt_Application_Resource_Votacion($libro, $voto);
	    	//Procesamos voto
	    	echo $gestVoto->write();

	 }else{	//GET
		//No hacemos nada
    	}

    }

Una vez hecho clic sobre un voto y tratado este en el servidor, según se ha desarrollado, se devuelve el total y la media, para escribirlas en pantalla en lugar de la posibilidad de votar. De manera que quedaría de así:

Visualización de resultado a través de jQuery

Antes de finalizar, dejar claro que no es objetivo de esta demo, tanto el tratamiento del voto, como el impedir que se vote más de una vez por parte de un mismo usuario. Lo que se ha tratado de demostrar es:

• Envío de información al servidor
• Tratamiento de la información y respuesta
• Recepción de la información y tratamiento de la misma en función de la respuesta obtenida.

¡¡¡Pues esto es todo por el momento!!!

¡¡¡Cualquier duda o consulta, me la podéis hacer llegar en cualquier momento!!!

Zend Framework + jQuery, 10.0 out of 10 based on 2 ratings
Comparte y disfruta:

Si te ha gustado este artículo, te puede interesar ...



Hosting barato

One comment

Escribe un comentario


nueve × = 63

Puede usar HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>