El funcionamiento es sencillo, al introducir una letra en un campo de entrada se buscarán en la base de datos las coincidencias con el texto que hemos insertado, mostrándolas como una lista y dándonos la opción de elegir entre todos los resultados.

Esta opción se usa habitualmente con los listados de paises, en nuestro ejemplo utilizaremos, como en el ejemplo de actualizar un select con ajax, las provincias españolas.

En este enlace se puede comprobar el funcionamiento.

Añadirlo en nuestro proyecto es realmente sencillo, supongamos que tenemos un modelo, cuyo controlador tiene una operación y una vista asociada, que será donde queremos utilizarlo.

Para ello en la vista, añadimos este trozo de código dentro de un formulario:

 echo $form->label('provincias','Provincias');
 echo $ajax->autoComplete('nombre','autocomplete');

Añadimos un label que tendrá el texto Provincias y un campo de entrada autocomplete, este recibe como parámetros, el nombre del campo y como segundo parámetro la url donde se encuentra la función a la que se va a llamar cuando se introduzca una letra, en nuestro caso, la vamos a añadir en el mismo controlador que estamos utilizando, si no fuese así la dirección sería ‘/nombre_del_controlador/función’.

En segundo lugar, creamos la función autocomplete, dentro del controlador utilizado añadimos el siguiente código:

  function autocomplete()
  {
 	$str = trim($this->data['Provincia']['nombre']);
	$str = str_replace("á","a",$str);
	$str = str_replace("é","e",$str);
	$str = str_replace("í","i",$str);
	$str = str_replace("ó","o",$str);
	$str = str_replace("ú","u",$str);
	$str = str_replace("Á","A",$str);
	$str = str_replace("É","E",$str);
	$str = str_replace("Í","I",$str);
	$str = str_replace("Ó","O",$str);
	$str = str_replace("Ú","U",$str);
	$str = str_replace("Ñ","ñ",$str);
	$condicion = "REPLACE (REPLACE( REPLACE( REPLACE( REPLACE( REPLACE ( Provincia.nombre,'á','a'), 'é','e'),'í','i'),'ó','o'),'ú','u'),'Ñ','ñ') LIKE "$str%"";
	$this->set('provincias', Set::combine($this->Provincia->findAll($condicion,array('Provincia.nombre','Provincia.id'),'Provincia.nombre'), "{n}.Provincia.id","{n}.Provincia.nombre"));
	$this->render('autocomplete','ajax');
 }

La función es muy sencilla, realiza la búsqueda en la base de datos de todas las provincias cuyo nombre coincida con el texto introducido, pasado en $this->data con el nombre que se indica en el primer parámetro de la función autocomplete utilizada en la vista, para eso se añade en la condición la opción LIKE cadena% de sql.

Todas las opciones que añadimos anteriormente sirven para ignorar los acentos, tanto en la cadena que introducimos como en los nombres de las provincias almacenadas en la base de datos, con esto al realizar la búsqueda funcionará aunque cometamos fallos ortográficos.

Crearemos una vista para esta función, con una única línea de código, que crea una lista con todas las entradas del array.

 echo $html->nestedList($provincias);

Y por último añadiremos al css que estemos utilizando, dos clases que modificarán el aspecto del listado que hemos creado:

  div.auto_complete {
 	position :absolute;
 	width :250px;
 	background-color :white;
 	border :1px solid #888;
 	margin :0px;
 	padding :0px;
  }

 div.auto_complete ul{
	list-style: none;
	margin: 0px;
 }

 li.selected{
	background-color: #ffb;
 }

Con esto ya tendremos un campo de texto en el que al añadir texto se generará un listado con todas las entradas de la base de datos que coincidan con el texto introducido.

En este post vamos a explicar cómo hacer esto, utilizando para ello el calendario DHTML Calendar desarrollado por Dynarch. Es un calendario con licencia GNU y que cubre perfectamente todas las funcionalidades que necesitamos.

Todos los ficheros necesarios para introducir el calendario en nuestra página web, junto con la estructura como se organizan en CakePHP 1.2, pueden descargarse calendario. Lo explicaremos paso a paso.

Lo primero que tenemos que hacer es descargarnos el calendario (podemos hacerlo directamente de la página web de Dynarch, o bien mediante el enlace del párrafo anterior) y descomprimirlo en la carpeta app/webroot/js. Necesitamos también otro fichero javascript, common.js, que también meteremos en esa carpeta. En el body, incluiremos estos ficheros escribiendo:

// Calendar includes
echo $javascript->link('jscalendar-1.0/calendar.js');
echo $javascript->link('jscalendar-1.0/lang/calendar-es.js');
echo $javascript->link('common.js');
// CSS Theme
echo $html->css('../js/jscalendar-1.0/skins/aqua/theme');

Necesitamos ahora implementar un helper para que nos sea mucho más fácil la utilización de este calendario. Lo descargamos del enlace anterior y lo metemos en la carpeta app/views/helpers. Si miramos el código de este helper vemos que tenemos dos funciones, picker y flat, que nos permiten hacer que este calendario aparezca al pulsar un botón o que esté siempre visible en nuestra página.

Ya sólo nos falta introducir este calendario en nuestras páginas.

En el controlador, importamos el helper:

var $helpers = array('DatePicker');

Y en la vista mostramos el calendario:

echo $datePicker->flat('fechaCalendarioFlat', array('id'=>'fechaCalendarioFlat'));
echo $datePicker->picker('fechaCalendarioPicker', array('id'=>'fechaCalendarioPicker'));

Podemos ver una demostración del funcionamiento del calendario en este enlace.

A partir del código proporcionado, podríamos añadir muchas funcionalidades. Por ejemplo, podremos editar el código del helper, para añadirle un observador de javascript al calendario tipo flat y que al pulsar en una fecha nos lleve a otra url, o podríamos hacer que ciertas fechas especiales se coloreen de manera distinta al resto.

Puede resultar muy cómodo para organizar nuestros proyectos, para acceder a diferentes servidores de bases de datos o acceder a diferentes gestores de bases de datos.

El proceso es sencillo, en primer lugar añadiremos al archivo database.php situado en /app/config/ una nueva configuración de base de datos.
Podremos copiar la configuración por defecto, llamada default, y cambiarle el nombre.
El fichero database.php quedará así

class DATABASE_CONFIG {

	var $default = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'user',
		'password' => 'password',
		'database' => 'database',
		'prefix' => '',
	);

	var $nueva_conexion = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'user',
		'password' => 'password',
		'database' => 'database_2',
		'prefix' => '',
	);

	var $test = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'user',
		'password' => 'password',
		'database' => 'test_database_name',
		'prefix' => '',
	);
}

Con esto habremos declarado otra conexión a la base de datos llamada nueva_conexion.
Una de las opciones que tiene la configuración de la base de datos, es la de utilizar un prefijo, es decir, que todas las tablas de la configuración de la base de datos comiencen con una palabra, también puede ser utilizado para organizar las bases de datos.

Para utilizar la configuración de la base de datos que hemos creado, tendremos que añadir en el modelo desde donde queremos acceder a esas tablas la siguiente línea:

	var $useDbConfig ='nueva_conexion';

A partir de este momento, cada vez que accedamos a este modelo, cakephp utilizará las tablas existentes en la base de datos de esa conexión.

Los pasos a realizar son los siguientes:

1. Crear tantos ficheros de idiomas como queramos tener. Estos ficheros los meteremos en la carpeta /app/locale, creando una carpeta por cada idioma que tendrá por nombre el código de 3 letras del lenguaje (ISO 639-2, lista de lenguajes). Y dentro de esta carpeta, crearemos otro subdirectorio llamado LC_MESSAGES y por último, en éste, un fichero default.po.

Ejemplo para castellano y gallego:

Este fichero debe estar codificado en ISO-8859-1 y los strings no pueden tener más de 1014 caracteres. Se asocian las claves con los valores de la siguiente manera:

msgid “clave”
msgstr “valor”

Teniendo en cuenta que cada clave debe ser única.

2. Modificar el app_controller para establecer el lenguaje elegido.

uses('L10n');
class AppController extends Controller
{
   function beforeFilter() {
      $this->L10n = new L10n();
      $languages = array('es', 'gl');
      $paramLang = $this->params['plugin'];
      $lang = $this->Session->check('lang') ? $this->Session->read('lang'): 'es';
      if (isset($paramLang) && in_array($paramLang, $languages)) {
         $lang = $paramLang;
      }

      $this->Session->write('lang', $lang);
      $this->L10n->get($lang);
      Configure::write('Config.language', $lang);
   }
}

Lo que hacemos aquí es recoger el valor de la url, si existe, y si no obtenerlo de la sesión.

Recordar que el parámetro plugin de la url es el que se establece justo antes del nombre del controlador, por lo tanto las urls serán de la forma:

www.hospedaxes.com/es/controlador/accion/…
www.hospedaxes.com/gl/controlador/accion/…

3. Para usar los valores establecidos en los ficheros .po, tenemos que utilizar la función __(), al que se le pasa la clave y un booleano opcional [false si queremos que se comporte como un echo (valor por defecto), true para que devuelva únicamente una cadena].

Desde la página de cakephp se puede descargar la versión 1.2.0.7296 rc2, nueva candidata que hace que el lanzamiento de la versión definitiva se encuentre más cercano.

Como en cada actualización, corrección de bugs y pequeñas mejoras que se pueden ver en el siguiente enlace.

Podemos ver el ejemplo de funcionamiento aquí.

Un ejemplo muy claro para esta situación sería dos selects, uno con provincias y el otro con localidades, lo que queremos es que al cambiar de provincia varíe la lista de localidades y muestre las que están en la provincia seleccionada.

Lo haremos utilizando el ajaxHelper, para que no sea necesario la recarga de la página y quede más atractivo.

Lo primero que haremos será definir los modelos de provincias ,localidades y un tercer modelo en el que usaremos los selects, por ejemplo podría ser un modelo de cliente, en el que al insertar un nuevo cliente tendríamos que elegir la provincia y localidad a la que pertenece.

Modelos

Modelo de provincia.

/app/models/provincia.php

class Provincia extends AppModel
{
    var $name = 'Provincia';
}

Modelo de localidad.

/app/models/localidade.php

class Localidade extends AppModel
{
    var $name = 'localidade';
}

Modelo de cliente.

/app/models/cliente.php

class Cliente extends AppModel
{
    var $name = 'Cliente';
}

Controladores

Después de esto tendremos que definir los controladores.

Controlador de localidad.

/app/controllers/localidades_controller.php

class LocalidadesController extends AppController
{
	var $name = 'Localidades';
}

Controlador de provincia.

/app/controllers/provincias_controller.php

class ProvinciasController extends AppController
{
	var $name = 'Provincias';
}

Y por últino el controlador de clientes que será el que implementará la funcionalidad.

Controlador de cliente.

/app/controllers/clientes_controller.php

class ClientesController extends AppController
{
	var $name = 'Clientes';
	var $helpers = array('Ajax');
	var $uses = array('Cliente','Provincia','Localidade');

	function insertar()
	{
		$listadoProvincias = $this->Provincia->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
		$this->set('provincias', Set::combine($listadoProvincias, "{n}.Provincia.id","{n}.Provincia.nombre"));
		$primera_provincia = $this->Provincia->find(null,null,'nombre ASC');
		$listadoLocalidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC','conditions'=>'Localidade.provincia_id='.$primera_provincia['Provincia']['id']));
		$this->set('localidades', Set::combine($listadoLocalidades, "{n}.Localidade.id","{n}.Localidade.nombre"));

		// RESTO DE LA FUNCIONALIDAD DE INSERCIÓN DE CLIENTES
	}

	function update_select()
	{
		if (!empty($this->data['Localidade']['provincia_id']))
		{
			$provincia_id = $this->data['Localidade']['provincia_id'];
			$localidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC','conditions'=>array('provincia_id'=>$provincia_id)));
		}
		else
		{
			$localidades = $this->Localidade->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
		}
		$this->set('options', Set::combine($localidades, "{n}.Localidade.id","{n}.Localidade.nombre"));
		$this->render('/elements/update_select', 'ajax');
	}
}

Por un lado tenemos la función insertar, que será una función genérica de inserción de clientes. La parte que a nosotros nos interesa es en la que se inicializan las variables que después utilizaremos en los selects, estas deberán ser arrays en los que cada elemento tenda un identificador y su valor, para que el select pueda utilizarlos en la vista.

En la versión 1.1 de cakephp, esto se podía hacer mediante la función generateList del modelo, función que se ha eliminado en la 1.2.
Por ello ahora es necesario hacerlo en dos pasos, por un lado realizar la búsqueda con un findAll y después utilizar la función combine de la clase Set que genera un array con la estructura deseada, que será el que le pasemos a la vista.

$listadoProvincias = $this->Provincia->find('all', array('fields'=>array('id','nombre'),'order'=>'nombre ASC'));
$this->set('provincias', Set::combine($listadoProvincias, "{n}.Provincia.id","{n}.Provincia.nombre"));

La segunda función update_select, es a la que llamará el ajax para actualizar el listado de localidades a partir de un identificador de provincia.

Como se puede ver en el código, la función coge el identificador de provincia del select y envía a la vista los arrays actualizados de provincias y localidades.

Vistas

Localidades y provincias no tendrán vistas asociadas, ya que no hay ninguna operación en el controlador.

En clientes tendremos que crear la vista para la operación insertar del controlador, esta podría ser algo como esto:

/app/views/clientes/insertar.ctp

echo $form->create('Inscripcione',array('action'=>'insertar'));
echo $form->inputs(array('legend'=>'Actualizar Provincias',
		'Localidade.provincia_id' => array('label'=> 'Provincia','showEmpty'=>'false','id'=>'provincias'),
		'Alumno.localidade_id' => array('label'=> 'Localidad','showEmpty'=>'false','id'=>'localidades'),
			));
echo $form->end();

$options = array('url' => 'update_select','update' => 'localidades');
echo $ajax->observeField('provincias',$options);

La vista será muy sencilla, un formulario con dos selects, uno de localidades y otro de provincias y una llamada al ajaxHelper en la que se indica que cada vez que se modifique el valor del select provincias, se llame a la función update_select y actualice el select de localidades.

Este select se actualizará con los valores devueltos por la vista de update_select, que lo único que hace es imprimir todos los nombres de localidades devueltos por la función del controlador.

/app/views/elements/update_select.ctp
if(!empty($options)) {
  foreach($options as $k => $v) {
    echo "<option value='$k'>$v</option>";
  }
 }

En este enlace se puede ver un ejemplo de funcionamiento.

Desde hace unos días está disponible en la página de cakephp, una nueva versión, la 1.2.0.7125 RC1, de este framework de desarrollo escrito en php, del que hablamos en nuestro blog y en el que desarrollamos la gran mayoría de las webs que se crean en nuestra empresa.

Lo importante de esta noticia es que el framework ha abandonado la categoría de beta, pasando a ser una versión candidata, cada vez está más cerca el lanzamiento de la versión final.

En esta versión se eliminan gran cantidad de métodos deprecados y se corrigen multitud de errores.

A partir de ahora siempre que hablemos de funcionalidades del cakephp 1.2 nos referiremos a la versión RC1.

Cake nos proporciona un helper, RSSHelper, que nos permite hacer en muy pocas líneas de código un RSS.

Lo primero que tenemos que hacer es una función en el controlador o bien utilizar la misma función index del controlador que queramos sindicar:

Vemos que tuvimos que importar algunos helpers y componentes. Establecemos aquí ya el título, descripción y enlace del canal, y los datos que queremos sindicar.

En la capa de la vista, tenemos que definir el layout default.ctp, que estará en la carpeta views/layout/rss y será de una manera tan simple como la siguiente:

Y también definir la vista en si, que estará en nuestro caso en la carpeta views/noticias/rss y se llamará index.ctp, y que tendrá la forma:

Ya por último, lo único que tenemos que hacer es meter en la cabecera de nuestro código html, el link, para que nos ponga en la barra del navegador el enlace a nuestro rss:

Y, como vemos, esta url no sigue el formato estándar de las urls que utiliza Cake, por lo que tenemos que definir en el archivo config/routes.php una regla para ello:

Con esto ya tendríamos definido el RSS para nuestra aplicación.

• Separar los distintos tipos de funcionalidades en los controladores: podemos separar, por ejemplo, las funciones que corresponden al administrador, del resto de las funciones, simplemente iniciando el nombre de dicha función con la cadena "admin_".
• Separar por urls los distintos apartados: por ejemplo, para acceder a una función de un controlador que sea "admin_listar", tendremos que escribir la url: admin/controlador/listar. De esta forma sabemos en todo momento en qué parte de nuestro proyecto nos movemos.
• Como consecuencia y para que nuestro proyecto mucho más organizado, separaremos también las vistas en función de si estamos en la sección del administrador o en las otras secciones.
• Esto nos permitirá también realizar un tratamiento personalizado de cada sección: por ejemplo, en el beforeFilter del AppController le podemos introducir un filtro de login.

Veamos cómo realizar la configuración de todo lo comentado. En el archivo app/config/routes.php, escribimos:

En el controlador:

De esta manera podemos cambiar el layout en función de dónde nos encontremos y tenerlas estructuradas en distintas carpetas. Para ello, en el archivo cake/libs/controller/app_controller.php escribimos:

Podríamos configurar tantas secciones como queramos simplemente añadiendo más líneas en el archivo routes.php, obteniendo un código mucho más limpio y legible.

Utilizaremos para ello el Paginator Helper que viene implementado en esta nueva versión y que, como veremos, hace muchísimo más fácil esta tarea.

Empezamos con el controlador. Lo primero que tenemos que hacer es añadir dos variables:

como vemos en las opciones del array, le especificamos en la variable limit el número de elementos por página, en page la página en la que empezamos y en order la ordenación inicial. El componente RequestHandler no sería necesario si no introducimos el buscador.

El siguiente paso es crear una función de la manera siguiente:

Utilizaremos la sesión para guardar la cadena de búsqueda y no perderla cuando pulsemos en las cabeceras para la ordenación.

Y la vista sería ("admin_listar.ctp"):

Vemos aquí que es el propio Paginator Helper el que, con una simple llamada a la función sort, ya se encarga de hacer la ordenación de la columna alternando en cada click entre ascendente y descendente.

La función counter nos devuelve una cadena con la página en la que nos encontramos y el número total de páginas, en nuestro caso introducimos la cadena ' de ', entre ellas.

Y por último, las tres últimas funciones utilizadas, prev, numbers y next, nos muestran los enlaces a la página previa, a cada una de las páginas y a la página siguiente, respectivamente.

CakePHP 1.2 nos proporciona muchas más posibilidades y muchas otras opciones. Podemos obtener más información en la especificación de CakePHP 1.2 del Paginator Helper. Así como en la Bakery, en la que tenemos un artículo sobre la paginación básica y otro sobre la avanzada.