Formularios en Zend Framework (II)



Hosting barato
VN:F [1.9.20_1166]
Rating: 0.0/10 (0 votes cast)
En el anterior post Formularios en Zend Framework I indicamos los pros y contras que he encontrado a la hora de crear los formularios.

A continuación, expondremos cómo construir los formularios de manera que sigamos el Zend Framework, pero que se ajuste un poco más a nuestras necesidades.

Recordamos que los principales motivos por los que decidimos “salirnos” de lo que marca el Zend Framework era:

  • Carga del servidor para realizar validaciones de formulario que se pueden hacer a nivel de cliente
  • Imposibilidad de crear formularios cuyos campos no sean secuenciales
  • Los “decorators” que nos permiten “customizar” los formularios y darle el estilo que queramos, en muchas ocasiones significa introducir código HTML en el código de servidor.
  • Nuestro objetivo siempre es separar claramente las capas de negocio y la de presentación, y aunque esta segunda tenga la clase “Form” en ella no es aconsejable introducir código que pertenezca a la vista

Dicho esto, pasemos a continuación a explicar cómo vamos a crear nuestros formularios a partir de ahora basándonos siempre en Zend Framework.

Como dijimos, a la hora de construir una vista, además del Controller que la sirve, es necesario tener un script con el código que presenta el formulario, y una clase Form que en su origen realizaba validaciones que se podían hacer perfectamente a nivel de navegador, pero que las han embebido en el código de la clase. Además, originariamente, aquí va todo el código que permite “customizar” las vistas, código que es preferible que se encuentre en la vista.

Para realizar la demo, nos basaremos en la modificación del código de formulario del formulario de añadir un libro a nuestra biblioteca, el cual tenéis en el post aplicación demo de Zend Framework.

Script
Nuestro script de añadir libro, inicialmente tenía el siguiente código:

<?php echo $this->form ;?>

Script (nueva versión)
Eliminaremos el código anterior, y simplemente haremos que los campos aparezcan paralelos, junto con el agrupador de campos y su nombre (el agrupador de campos, existe en Zend Framework, pero lo que no me ha sido posible ha sido darle el nombre para que salga).

El código que contendrá ahora nuestro anyadir.phtml será:

<div id = "errores"></div>
<form name = "libro" method = "post">
	<fieldset>
			<legend>Introduce los datos del libro</legend>
			<label for = "Autor" class="required">* Autor: </label>
			<input name = "autor" id = "autor" type = "text" />
			<label for = "Titulo" class="required">* T&iacute;tulo</label>
			<input type = "text" name = "titulo" id = "titulo" />
			<a href = "#" name = "añadir" id = "añadir" onClick = "javascript: sendForm();" />A&ntilde;adir</a>
	</fieldset>
</form>

Importante: Se debe sustituir el botón de envío “submit” por un enlace que haga lo mismo, ya que si no, se enviaría el formulario, y no podríamos hacer las validaciones a nivel de cliente, previo al envío del formulario.
Esta modificación, visualmente dará como resultado que nuestro formulario ahora se presente de la siguiente manera:

Formulario con campos no secuenciales

Bien, con esto, hemos conseguido poner los campos y el botón de “Añadir” en la misma línea, y les hemos rodeado con el agrupador de formularios. El diseño, no es fantástico, pero es suficiente para demostrar la nueva propuesta de construcción de formularios.

Ahora, debemos añadirle a este formulario, las validaciones que se realizarán a nivel de cliente. Las validaciones que realizaremos serán las siguientes:

  • Campos no vacíos
  • El campo autor no admite números

Javascript
Para ello, realizaremos todas estas validaciones en javascript, para lo que crearemos un archivo anyadir-libro.js en el directorio: /public/js/ de nuestro proyecto.

Proyecto con fichero de javascript para el formulario de añadir nuevo libro

Y añadiremos el siguiente c&ooacute;digo en el archivo crear-js-añadir-libro.js para realizar las validaciones indicadas anteriormente.

function deleteErrors(){
	document.getElementById("errores").innerHTML = "";
	document.getElementById("errores").style.visibility = "hidden";
}

function noNumero(valor){
	//Comprobamos si es número
	if (/^([0-9])*$/.test(valor))
		return false;
	else
		return true;
}

function addErrors(mensajes){
	eUL = document.createElement("ul");
	for (i=0; i < mensajes.length; i++){
		eLI = document.createElement("li");
		eLI.appendChild(document.createTextNode(mensajes[i]));
		eUL.appendChild(eLI);
	}
	document.getElementById("errores").appendChild(eUL);
}

function validateFields(){
	componentes = document.getElementById("libro").elements;
	error = false;
	j = 0;
	merror = new Array(2);
	for (i=0; i< componentes.length; i++){
		switch (componentes[i].name){
			case "autor" : if (componentes[i].value.length == 0){
								merror[j++] = "El campo nombre es un campo obligatorio";
								error = true;
							}else if (!noNumero(componentes[i].value)){
										error = true;
										merror[j++] = "El campo nombre no puede contener números";
							}
							break;
			case "titulo" :	if (componentes[i].value.length == 0){
								merror[j++] = "El campo titulo es un campo obligatorio";
								error = true;
							}
							break;
		}
	}
	if (error){
		addErrors(merror);
		document.getElementById("errores").style.visibility = "visible";
	}
	return (!error);
}

function sendForm(){
	deleteErrors();
	if (validateFields())
		document.getElementById("libro").submit();

Controller
Para añadir el js deberemos modificar el método anyadirAction de nuestro LibroController, además, también eliminaremos todo lo relacionado con el botón “submit”, para tener el control de cuándo se envían los datos del formulario al servidor.

	public function anyadirAction(){
		//Añadimos el título, delante del título definido por defecto para nuestra aplicación
		$this->view->headTitle("A&ntilde;adir nuevo libro", 'PREPEND');
		//Añadimos el archivo de javascript que valide los campos de la página
		$this->view->headScript()->appendFile($this->view->baseUrl() . "/js/anyadir-libro.js");
		//Instanciamos el formulario
		$form = new Form_Libro();
		//Asignamos a la vista el formulario
		$this->view->form = $form;

		if ($this->getRequest()->isPost()){ //Si se envían los datos, los recuperamos del formulario
			$formData = $this->getRequest()->getPost();
			if ($form->isValid($formData)){ //Validamos que los datos recibidos sean correctos
				//Asignamos los valores recuperados a variables
				$autor = $form->getValue('autor');
				$titulo = $form->getValue('titulo');
				//Creamos el modelo
				$libros = new Model_DbTable_Libros();
				//Insertamos el nuevo libro en nuestra BBDD
				$libros->addLibro($titulo, $autor);
				//Redireccionamos a la home, donde podremos ver el nuevo libro introducido.
				$this->_redirect('/');
			}

		}
	}

Form
Y ahora, para finalizar, eliminaremos las validaciones que hacemos a nivel de cliente de nuestra clase Form, además de la referencia que hay en &eeacute;l al botón submit, ya que esa función la controlamos desde nuestro javascript, una vez se hayan pasado todas las validaciones a nivel de cliente.

El método constructor de nuestra clase FormLibro, quedaría de la siguiente manera:

	public function __construct($options = null){
		parent::__construct($options);

		$this->setName('libro');
		$id = new Zend_Form_Element_Hidden('id');

		$autor = new Zend_Form_Element_Text('autor');
		$autor->setLabel('Autor')
		->setRequired(true)
		->addFilter('StripTags')
		->addFilter('StringTrim');

		$titulo = new Zend_Form_Element_Text('titulo');
		$titulo->setLabel('Titulo')
		->setRequired(true)
		->addFilter('StripTags')
		->addFilter('StringTrim');

		$this->addElements(array($id, $autor, $titulo));
	}

Esta clase, aunque parezca que haya perdido su utilidad, no será así, ya que nos servirá para aplicar filtros o para hacer validaciones a nivel de servidor, porque no nos interese hacer público el algoritmo de validación de cualquier dato.

Ahora, probemos un poco las modificaciones realizadas. Empecemos viendo la validación de los errores, cuando los campos están vacíos:

Validación de formulario en el navegador

Ahora, introduzcamos un autor y un libro, y validemos la inserción de datos.

Informamos en el navegador un autor y un libro

Hacemos clic sobre “Añadir” y vemos que la inserción se ha realizado con éxito.

Informar nuevo libro en formulario

Informar nuevo libro en formulario

Con todos estos cambios, hemos “sacado” la validación de campos que había en el servidor, con lo que aligeramos la carga de este, y podemos “customizar” los formularios a nuestro antojo, separando siempre la presentación del código de servidor. Pero para cerrar el tema de los formularios, nos queda cómo tratar los errores que se producen a nivel de servidor, algo que no se trató en la primera demo. Aunque dicha sea la verdad, tampoco se trató el proceso ejecutado en el servidor con éxito, ya que con cada inserción, nos íbamos a la home de la biblioteca, y ahí veíamos el libro insertado. Esto, está bien para una demo, pero para una aplicación más profesional, deberíamos informar en todo momento al usuario qué ocurre con el envío de datos en todo momento, y si ha habido algún error, indicárselo.

Todo esto lo haremos en una tercera y última entrega.

Comparte y disfruta:

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



Hosting barato