Formularios en Zend Framework (y IV)

18abr/104

Formularios en Zend Framework (y IV)

Rating: 8.7/10 (3 votes cast)

Para finalizar la serie que hemos dedicado a cómo adaptar los formularios a nuestro gusto, debido a que en los objetos se suele meter código que debería estar en los archivos .css o .phtml, y eso es algo de lo que siempre hay que tratar huir, nos quedaba resolver el tema de cómo rellenar un select con distintas opciones, y que estas pudieran salir de una BBDD, es decir, que vinieran desde el servidor y no una lista de datos enorme en la parte de diseño de la vista.

Y es algo que finalmente se puede resolver de manera muy sencilla, y que vamos a ver ahora mismo ...

Bien, lo que debemos hacer es crear una variable pública, podríamos definirla privada y luego su correspondiente set and get, que nos devuelva un array con las distintas opciones en la clase Form_Libro, tal y como podemos ver a continuación:

class Form_Libro extends Zend_Form{
	public $opciones;

	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');	

		//Definimos las opciones y el valor de cada opción que tendrá nuestro select
		$this->opciones = array ('0'=>'', '1'=>'terror', '2'=>'comedia', '3'=>'policiaca'); 

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

Hemos definido una opción en blanco, como primera, pero perfectamente podríamos haber elegido cualquier otra o haber puesto el literal "selecciona una opción" de manera que llame la atención de quien rellena el formulario y seleccione una opción.

Para cada opción, se le dará posteriormente, como valor la posición en el array.

Una vez hecho esto, tenemos que capturarlo en el formulario, y construir el cuerpo del select. Para ello, editamos nuestro archivo anyadir.phtml que construye la vista de añadir un nuevo libro, y le añadimos el código necesario para construir el select, el cual, como veréis es muy poco, y se nos queda muy limpio.

<H1>A&ntilde;adir nuevo libro</H1>
<div id = "errores"></div>
<form name = "libro" id = "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" />
			<label for = "Estilo" class="required">* Estilo</label>
			<select name = "estilo" id = "estilo">
				<?php
					$total = count($this->form->opciones);
					for ($i = 0; $i < $total; $i++){
						echo "<option value = " . $i . ">" . $this->form->opciones[$i] . "</option>"."\n";
						echo "\t\t\t\t";
					}
				?>
			</select>
			<a href = "#" name = "añadir" id = "añadir" onClick = "javascript: sendForm();">A&ntilde;adir</a>
	</fieldset>
</form>

Esto hará que nuestro formulario ahora se pueda visualizar de la siguiente manera:

Formulario añadir libro con select

Si miramos el código fuente de nuestra página HTML, podemos ver código se ha creado correctamente nuestra página internamente.

<!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>A&amp;ntilde;adir nuevo libro - Biblioteca</title> 

		<script type="text/javascript" src="http://biblioteca.localhost:8080/js/anyadir-libro.js"></script> 

		<link href="http://biblioteca.localhost:8080/css/biblioteca.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="content">
			<h1></h1>
			<H1>A&ntilde;adir nuevo libro</H1>
<div id = "errores"></div>
<form name = "libro" id = "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" />
			<label for = "Estilo" class="required">* Estilo</label>
			<select name = "estilo" id = "estilo">
				<option value = 0></option>
				<option value = 1>terror</option>
				<option value = 2>comedia</option>
				<option value = 3>policiaca</option> 

			</select>
			<a href = "#" name = "a&ntilde;adir" id = "a&ntilde;adir" onClick = "javascript: sendForm();">A&ntilde;adir</a>
	</fieldset>
</form>		</div>
	</body>
</html>

Con esto, damos por finalizada nuestra adaptación de los formularios en Zend Framework, para que se ajuste a nuestras necesidades, además de evitar introducir código HTML o CSS en nuestro código de servidor.

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

¡¡¡Cualquier comentario, mejora, o ayuda sobre este tema siempre será bienvenido!!!

[ad#Google Adsense]

Comparte y disfruta:

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

Etiquetado con: Zend Framework Deja un comentario

Comentarios (4) Trackbacks (0) ( suscribirse a los comentarios de esta entrada )

Roberto
10 julio, 2010 - 08:43

VA:F [1.9.6_1107]
Rating: +1 (from 1 vote)
Lo que sería estupendo es si le añades que el COMBO sea dinámico con BD, por el resto genial!
José Carlos
10 julio, 2010 - 12:58

VN:F [1.9.6_1107]
Rating: 0 (from 0 votes)
Roberto :

UN:F [1.7.8_1020]

Rating: +1 (from 1 vote)

Lo que sería estupendo es si le añades que el COMBO sea dinámico con BD, por el resto genial!

Hola, tienes razón, pero la intención era ofrecer otra manera distinta de cómo hacer los formularios, tener mayor libertad a la hora de colocar los campos dónde y cómo queramos, así como no tener definidos los estilos en el código del servidor, y tenerlos todos en su css correspondiente.

Para hacer lo que comentas, bastaría con consultar en BBDD y rellenarlo. Hay ejemplos de cómo poder hacer las consultas en el blog, por lo que no debería ser problema rellenar el combo con las opciones que se deseen.

Gracias por tu comentario.

Salu2,

José Carlos
Santiago Ortiz
14 febrero, 2011 - 01:20

VA:F [1.9.6_1107]
Rating: 0 (from 0 votes)
Interesantes tus tutoriales pero me perdi en una parte los podrias subir algun servidor lamentablemente dejas un enlace pero esta roto
José Carlos
14 febrero, 2011 - 01:31

VN:F [1.9.6_1107]
Rating: 0 (from 0 votes)
Hola,

Tienes razón, al actualizar el diseño del blog, se perdió el contenido que daba el enlace. Ahora lo he restaurado con la última versión que tengo por lo que debería estar todo.

Salu2,

José Carlos