Autocompletar ajax

En la entrada semanal de nuestro blog relacionado con cakephp, vamos a hablar sobre autocompletar los campos mediante ajax, una opción que puede simplificar bastante la inserción de datos por parte de los usuarios y que a su vez resulta bastante elegante.

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.

Calendario en CakePHP 1.2

Cuando estamos desarrollando una página web, a menudo necesitamos introducir un calendario que nos permita seleccionar las fechas sin tener que escribirlas a mano.
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 [...]

Múltiples conexiones a bases de datos

En cakephp existen gran cantidad de posibilidades desconocidas que, en algunos casos, pueden resultar útiles.
Una de ellas es la posibilidad de declarar más de una conexión a base de datos, pudiendo elegir en cada momento cuál de ellas deseamos utilizar.
Puede resultar muy cómodo para organizar nuestros proyectos, para acceder a diferentes servidores de bases de [...]

Localización e internacionalización

Vamos a ver cómo realizar la internacionalización de nuestra página web. Nos fijaremos únicamente en hacer nuestra página web en varios idiomas, sin atender a otras cuestiones como puede ser el formateo de las monedas o los números.
Los pasos a realizar son los siguientes:
1. Crear tantos ficheros de idiomas como queramos tener. Estos ficheros los [...]

Nueva versión de cakephp 1.2

Cada vez estamos más cerca de la versión final del framework al que dedicamos este blog.
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 [...]

Actualizar el contenido de un select con ajax.

En esta entrada vamos a explicar como asociar dos selects mediante ajax y al modificar el elemento seleccionado en uno de ellos cambie el contenido del otro.
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 [...]

Nueva versión de cakephp disponible.

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 [...]

Sindicación de noticias

Hoy vamos a explicar cómo hacer en CakePHP 1.2 un canal de sindicación de noticias o sindicación web. Es una funcionalidad que utilizamos con mucha frecuencia en nuestros diseños web y para la que Cake nos ofrece un buen soporte.
Cake nos proporciona un helper, RSSHelper, que nos permite hacer en muy pocas líneas de código [...]

Separación de funcionalidades (similar a fachadas)

CakePHP 1.2 nos proporciona un soporte con un significado similar al de las fachadas, que nos permite:

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 [...]

Paginación con ordenación por columna y buscador

Hoy vamos a hablar de cómo introducir en nuestro diseño web la paginación en CakePHP 1.2, introduciéndole un buscador. Utilizaremos una tabla para visualizar los datos, añadiéndole la opción de ordenarla pinchando en las cabeceras.
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 [...]