Posts tagged ‘CakePHP’

AJAX en CakePHP mediante jQuery

Hace poco hemos visto cómo utilizar AJAX en un formulario con CakePHP y hemos hablado en varias ocasiones de jQuery. Ahora vamos a ver cómo utilizar jQuery a través de CakePHP.

Dean Sofer comenta en Serving up actions as AJAX with jQuery in a few simple steps (Inglés en inglés) que él no cree necesario un helper AJAX para jQuery (recordemos que el helper AJAX de CakePHP utiliza script.aculo.us) ya que un helper se utiliza para crear HTML y el javaScript debería estar lo más separado del HTML como sea posible (separación de funciones).

En este ejemplo vamos a modificar el código de nuestra aplicación de gestión de enlaces tal y como lo dejamos tras utilizar el formulario AJAX para insertar nuevos enlaces. Quitaremos todas las referencias al Helper de AJAX y le daremos la misma funcionalidad mediante jQuery.

Vamos a ver primero el controlador, explicando los cambios.

<?php
class LinksController extends AppController {

	var $name = 'Links';
	var $helpers = array('Html', 'Form', 'Javascript');
	var $components = array('RequestHandler');
	
	function add() {
		if (!empty($this->data)) {
			if ($this->Link->save($this->data)) {
				//$this->flash('Enlace añadido.','/links',3);
			}
		}
		$this->set('links', $this->Link->findAll());
		//$this->render('index', 'ajax');
		$this->render('list');
	}
	
	function index() {
		$this->set('links', $this->Link->findAll());
	}
	
}
?>
  • Eliminamos el helper de AJAX, aunque mantenemos el de JavaScript.
  • Añadimos el componente RequestHandler. Este componente identifica las peticiones vía AJAX para poder responder con el layout AJAX (por defecto vacío). Como ahora sólo vamos a hacer llamadas a add() mediante AJAX podríamos omitir este componente y realizar la llamada a la vista mediante $this->render('list','ajax'); (hemos añadido el parámetro que indica el layout a utilizar).
  • Hemos cambiado la vista a mostrar por list, que veremos a continuación.

Ahora vemos la vista principal (/app/views/links/index.ctp):

<?php
echo $javascript->link('jquery-1.3.1.min.js',false);
echo $javascript->link('jquery.form.js',false);
?>
<script type="text/javascript">
$(document).ready(function() { 
    var options = { 
        target:'#links',
		clearForm: true
    }; 
 
    $('#newLinkForm').ajaxForm(options); 
});
</script>

<h1>Enlaces disponibles</h1>
<div id="links">
<?php echo $this->element('linksList', array('links' => $links)); ?>
</div>

<h2>Añadir enlace</h2>
<?php
echo $form->create('Link', array('action' => 'add', 'id' => 'newLinkForm'));
echo $form->input('title', array('label' => 'Nombre', 'error' => __('Titulo no valido', true)));
echo $form->input('url');
echo $form->submit('Añadir',array('escape'=>false));
echo $form->end();
?>
  • Lógicamente he sustituido los links a script.aculo.us por los de jQuery. Utilizo el plugin jQuery Form Plugin que me facilita la introducción de AJAX en el formulario.
  • Añado el código JavaScript prácticamente como aparece en la página de jQuery Form Plugin. En target se le indica el div en el que se va a introducir la respuesta (en este caso el que tenga id “links”). Al final le aplicamos el método ajaxForm al formulario con id “newLinkForm”.
  • He sustituido todo el listado de links por una llamada a un elemento CakePHP pasándole unos datos ($this->element('linkslist', array('links' => $links));). Luego explicaré el por qué de este cambio.
  • La creación del formulario la hago como inicialmente mediante el helper de formularios (ya no mediante el de AJAX). Le pongo el id como parámetro.

Vamos a ver ahora el elemento al que hacíamos referencia en la vista. Lo encontraremos en /app/views/elements/linksList.ctp.

<?php foreach ($links as $link): ?>
<p>
<a href="<?php echo $link&#91;'Link'&#93;&#91;'url'&#93;; ?>"><?php echo $link&#91;'Link'&#93;&#91;'title'&#93;; ?></a></p>
<p>Añadido: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?></p>
<ul>
<?php foreach ($link&#91;'Comment'&#93; as $comment): ?>
<li><?php echo $comment&#91;'comment'&#93; . ' (' . $comment&#91;'created'&#93; . ')'; ?></li>
<?php endforeach; ?>
<li><?php echo $html->link('Añadir comentario', '/comments/add/' . $link['Link']['id']);?></li>
</ul>
<?php endforeach; ?>

Como podemos ver es exactamente el mismo código que teníamos en la página principal y que generaba el listado de enlaces. Lo que hemos hecho es crear un elemento de CakePHP, es decir, una porción reutilizable. Y la reutilizamos en la página principal y en la nueva vista que hemos creado para la respuesta AJAX, que sólo tiene que contener el listado. Vemos dicha vista (/app/views/links/list.ctp) a continuación:

<?php echo $this->element('linkslist', array('links' => $links)); ?>

Y con esto ya tenemos funcionando el formulario AJAX mediante jQuery.

1 junio 2009 at 7:21 pm 6 comentarios

Formulario AJAX en CakePHP

En esta nueva entrada dedicada a CakePHP voy a explicar cómo utilizar un poco de AJAX en nuestra aplicación. AJAX realiza peticiones al servidor en segundo plano, por lo que partes de la página se pueden ir refrescando sin tener que recargar la página entera.

Voy a utilizar el ejemplo del gestor de enlaces que ya tenía en marcha en anteriores entradas de CakePHP en Tus Ceros Y Mis Unos. En concreto voy a facilitar el agregar nuevos enlaces pasando el formulario de añadir enlace a la página principal, de forma que al completar dicho formulario se refresque en el listado sin recargar la página completa.

El ayudante (“helper”) de AJAX en CakePHP utiliza las librerías JavaScript script.aculo.us y Prototype. Nos descargamos la última versión estable de script.aculo.us (la 1.8.2 en el momento de escribir esta entrada) ya que incluye Prototype. Copiamos tanto el fichero de Prototype (en lib dentro de la carpeta de script.aculo.us) como todos los ficheros propios de script.aculo.us (en src) a la carpeta de JavaScript de nuestra aplicación CakePHP: /app/webroot/js.

Insertamos en la plantilla por defecto de nuestro sitio web (/app/views/layouts/default.thtml) una línea para que CakePHP sepa dónde insertar los scripts posteriormente. La línea es <?php echo $scripts_for_layout ?> al igual que teníamos <?php echo $content_for_layout ?> que indicaba dónde insertar el contenido:

<!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">

<head>
	<title>TCYMU CakePHP Gestión de Enlaces</title>
	<?php echo $scripts_for_layout ?>
</head>
<body>
	<h1>Tus ceros y mis unos</h1>
	<h2>Gestión de enlaces</h2>
	
	<?php echo $content_for_layout ?>
	
	<h3>TCYMU por Miguel Orbegozo</h3>
</body>
</html>

Ahora es el momento de modificar el controlador de nuestra aplicación. Primero enumero los cambios y luego muestro el código completo. Las modificaciones son las siguientes:

  1. Definimos la variable helpers con los ayudantes que se utilizan. Si no sobrescribimos la variable se incluyen el de HTML y el de formularios. Además queremos añadir el de JavaScript y el de AJAX.
    var $helpers = array('Html', 'Form', 'Javascript', 'Ajax');
  2. Modificamos la función add, ya que ahora responderá a una petición AJAX. Lo que hacemos tras insertar el contenido del formulario (exactamente igual que antes) es obtener la lista de enlaces (igual que en la función index) y mostrar la vista index, con la particularidad de que le pasamos el parámetro 'ajax' para que sepa que es una respuesta a una petición AJAX.
<?php
class LinksController extends AppController {

	var $name = 'Links';
	var $helpers = array('Html', 'Form', 'Javascript', 'Ajax');
	
	function add() {
		if (!empty($this->data)) {
			if ($this->Link->save($this->data)) {
				//$this->flash('Enlace añadido.','/links',3);
			}
		}
		$this->set('links', $this->Link->findAll());
		$this->render('index', 'ajax');
	}
	
	function index() {
		$this->set('links', $this->Link->findAll());
	}
	
}
?>

Ahora modificaremos la vista de nuestra página de inicio (/app/views/links/index.thtml). Como antes primero se enumeran los cambios para después ver el código en su totalidad.

  1. Añado las librerías JavaScript mediante el método de AjaxHelper link.
    <?php
    echo $javascript->link('prototype.js',false);
    echo $javascript->link('scriptaculous.js?load=effects',false);
    ?>

    Dos pequeños detalles. El segundo parámetro hace que se añadan en la cabecera (en $scripts_for_layout que definimos antes). Al poner scriptaculous.js?load=effects hacemos que sólo se carguen los scripts de efectos, ya que si sólo hubiéramos puesto scriptaculous carga todos los ficheros de script.aculo.us
  2. La lista de enlaces la vamos a situar en un div con un identificador determinado, ya que esta será la parte que se refresque tras la petición AJAX. Lo creamos mediante el ayudante de AJAX y sus métodos div y divEnd.
    <?php echo $ajax->div('links'); ?>
    ...
    <?php echo $ajax->divEnd('links'); ?>
  3. Sustituimos el enlace que nos llevaba a la página de añadir enlace por el formulario que aparecía en esta página.
  4. Sustituimos la creación del formulario. En lugar de utilizar el método form del ayudante de formularios utilizaremos el método form pero del ayudante de AJAX. A este método se le pasa la función del controlador, el tipo de envío (“get” o “post”) y un array de opciones en el que en update le indicamos el div que debe refrescar.
    echo $ajax->form('/add', 'post', array('update' => 'links'));
<?php
echo $javascript->link('prototype.js',false);
echo $javascript->link('scriptaculous.js?load=effects',false);
?>

<h1>Enlaces disponibles</h1>

<?php echo $ajax->div('links'); ?>
<?php foreach ($links as $link): ?>
<p>
<a href="<?php echo $link&#91;'Link'&#93;&#91;'url'&#93;; ?>"><?php echo $link&#91;'Link'&#93;&#91;'title'&#93;; ?></a></p>
<p>Añadido: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?></p>
<ul>
<?php foreach ($link&#91;'Comment'&#93; as $comment): ?>
<li><?php echo $comment&#91;'comment'&#93; . ' (' . $comment&#91;'created'&#93; . ')'; ?></li>
<?php endforeach; ?>
<li><?php echo $html->link('Añadir comentario', '/comments/add/' . $link['Link']['id']);?></li>
</ul>
<?php endforeach; ?>
<?php echo $ajax->divEnd('links'); ?>

<h2>Añadir enlace</h2>
<?php
echo $ajax->form('/add', 'post', array('update' => 'links'));
echo $form->input('title', array('label' => 'Nombre', 'error' => __('Titulo no valido', true)));
echo $form->input('url');
echo $form->submit('Añadir',array('escape'=>false));
echo $form->end();
?>

Con estos cambios ya se actualizará nuestra lista de enlaces tras rellenar el formulario y sin recargar la página. Misión cumplida.

5 mayo 2009 at 9:40 pm 4 comentarios

Herramientas CakePHP: Scaffolding y bake

En esta entrada vamos a ver un par de utilidades que nos ayudan a lanzar casi desde cero nuestra aplicación CakePHP. Me estoy refiriendo al scaffolding y a bake. Nos vamos a servir de la aplicación que desarrollamos en “Mi primera aplicación CakePHP” (parte 1 y parte 2), que era un pequeño gestor de enlaces. Empezamos con el scaffolding, que podemos traducir como andamiaje. Partimos de una instalación de CakePHP limpia en la que he configurado la conexión a la base de datos. En dicha base de datos tengo definidas las tablas para enlaces y comentarios tal como vimos en las entradas nombradas anteriormente. También tomamos los mismos modelos que teníamos entonces: comment.php y link.php. Ahora creamos un controlador vacío salvo la variable scaffold:

<?php
class LinksController extends AppController {
	var $scaffold;
}
?>

Y exactamente igual para los comentarios:

<?php
class CommentsController extends AppController {
	var $scaffold;
}
?>

Y con esto apuntamos nuestro navegador a nuestra aplicación CakePHP (por ejemplo en http://server:port/) seguido por “links” vemos el efecto de scaffolding:

Scaffolding 1

Podemos ver un listado de enlaces, además podemos añadir nuevos enlaces o comentarios o listar estos últimos. Si añadimos algún enlace y nos movemos un poco por las páginas generadas podemos notar que CakePHP ha reconocido la relación entre Link y Comment y en las páginas aparece esa relación.

Scaffolding 2

Scaffolding 3

Como vemos el scaffolding nos puede ayudar enormemente en los pasos iniciales de un proyecto, o para poder introducir datos para probar. Vamos ahora con bake. Bake es una herramienta de línea de comandos, por lo que lo más cómodo para utilizarla es tenerla en el path y por tanto la he añadido. En este caso vamos a crear una aplicación nueva a partir de nuestra base de datos ya creada. Nos situamos en la carpeta en la que queremos crear nuestra aplicación y ejecutamos cake bake appname donde appname es el nombre que queremos dar a nuestra aplicación (testbake en mi caso). CakePHP después de que le confirmemos la ruta de la aplicación procede a copiar el esqueleto de una aplicación en el lugar elegido y acto seguido nos ayuda a configurar el acceso a la base de datos. Si ahora nos situamos en una consola en el directorio raíz de nuestra aplicación (C:\Archivos de programa\Apache Software Foundation\Apache2.2\htdocs\testbake en mi caso) y ejecutamos cake bake vemos el menú de la aplicación.

Bake 1

Vemos opciones para “hornear” (traducción de bake) un proyecto (copia el esqueleto de aplicación tal como acabamos de hacer), la configuración a la base de datos (también lo acabamos de hacer), modelo, controladores y vistas. Empezamos con los modelos, por lo que selecciono la opción adecuada. Puedo ver que CakePHP ha encontrado mis tablas de base de datos. Vamos con el modelo para los enlaces. Vemos que nos pregunta si queremos incluir validación y en caso afirmativo nos aparece un listado para que seleccionemos la validación de cada campo. Después nos pregunta si queremos añadir relaciones. Si respondemos afirmativamente nos detecta la relación existente en la base de datos y nos pide confirmarla:

Bake 2

Finalmente nos pregunta si queremos crear clases de test para nuestro modelo. De momento no voy a crear clases de test. Podemos ver el modelo que ha creado:

 array('maxlength'),
		'url' => array('url')
	);

	//The Associations below have been created with all possible keys, those that are not needed can be removed
	var $hasMany = array(
			'Comment' => array('className' => 'Comment',
								'foreignKey' => 'link_id',
								'dependent' => false,
								'conditions' => '',
								'fields' => '',
								'order' => '',
								'limit' => '',
								'offset' => '',
								'exclusive' => '',
								'finderQuery' => '',
								'counterQuery' => ''
			)
	);

}
?>

Parece bastante aceptable aunque sea como punto de partida. Haremos lo mismo con el modelo de los comentarios y pasamos a los controladores. Si seleccionamos la opción de controladores y le indicamos que queremos crearlo interactivamente, lo primero que nos pregunta es si queremos hacer scaffolding. Si le decimos que sí nos creará el controlador con la variable scaffold tal como hemos visto antes. Si por el contrario le decimos que no nos irá preguntando si queremos añadir métodos comunes (index, add, etc), si vamos a usar algún Helper, Componente o Sesiones. Según lo que le indiquemos nos creará un controlador que nos servirá muy bien como punto de partida. Finalmente vamos con las vistas. Para crear vistas nos pregunta si queremos vistas creadas con scaffolding o sin él. Si es sin scaffolding nos creará el archivo de la vista en el directorio adecuado pero nada más (CakePHP no puede adivinar lo que queremos hacer) y si es con scaffolding nos creará unas vistas que igualmente no pueden ser bastante útiles como punto de partida.

<div class="comments form">
create('Comment');?>
	<fieldset>
 		<legend></legend>
	input('link_id');
		echo $form->input('comment');
	?>
	</fieldset>
end('Submit');?></div>
<div class="actions">
<ul>
	<li>link(__('List Comments', true), array('action'=>'index'));?></li>
	<li>link(__('List Links', true), array('controller'=> 'links', 'action'=>'index')); ?></li>
	<li>link(__('New Link', true), array('controller'=> 'links', 'action'=>'add')); ?></li>
</ul>
</div>

Por último indicar que una vez nos acostumbremos a bake podemos saltarnos los menús, ya que casi todas las acciones tiene un comando más directo. Por ejemplo:

  • cake bake model Link nos llevaría a crear el modelo para los enlaces.
  • cake bake controller Comments scaffold nos llevaría a la creación de un controlador para comentarios con la variable scaffold.

Como conclusión vemos que estas herramientas de CakePHP nos pueden ser muy útiles en el arranque de un nuevo proyecto, aunque después siempre tendremos que tocar todo.

12 febrero 2009 at 7:34 pm 13 comentarios

Mi primera aplicación CakePHP (2)

Continuando con lo visto en la primera parte de la entrada, vamos a solucionar algunas pequeñas pegas de nuestra aplicación.

Primero, vamos a darle nuestro propio diseño (bastante discreto eso sí) a nuestra aplicación. Para ello y como ya comentamos, creamos un layout por defecto (default.thtml) y lo situamos en /app/views/layouts. Su contenido es:


<!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">

<head>
    <?php echo $html->charset("iso-8859-1"); ?>
    <title>TCYMU CakePHP Gestión de Enlaces</title>
</head>
<body>
<h1>Tus ceros y mis unos</h1>
<h2>Gestión de enlaces</h2>
<?php echo $content_for_layout ?>
<h3>TCYMU por Miguel Orbegozo</h3>
</body>
</html>

Lo que debemos tener en cuenta es la línea con el echo $content_for_layout, que es la forma en la que le indicamos a CakePHP dónde insertar el contenido de las vistas. He utilizado también el HtmlHelper para añadir una cabecera con el charset.

Una segunda cosita que podemos solucionar, es que ahora para entrar en nuestra aplicación tenemos que añadir en la ruta del navegador /links/, para indicar que queremos ir a la acción por defecto del controlador links. Para evitar esto, debemos enrutar la ruta / a dicho controlador. Para ello debemos modificar el archivo /app/config/routes.php modificando la línea que empieza por Router::connect('/' dejándola como sigue:

Router::connect(‘/’, array(‘controller’ => ‘links’, ‘action’ => ‘index’));

Por último vamos a añadir algo más de funcionalidad, permitiendo añadir comentarios a los enlaces almacenados. Esto es una relación de uno a muchos (un enlace puede tener varios comentarios).

Para llevarlo a cabo lo primero es crear la tabla para los comentarios. Al igual que en la entrada anterior, lo haré mediante el PhpMyAdmin.

Destacamos de su estructura lo siguiente:

  • Puntos ya vistos en la primera parte: el nombre de tabla (plural del modelo), la clave primaria id y el campo created.
  • De nombre fijo es también link_id, que es el campo que relaciona un comentario con un enlace en particular.

Vamos con el nuevo modelo, el relativo a los comentarios (app/models/comment.php):

class Comment extends AppModel {
	var $name = 'Comment';

	var $belongsTo = array('Link' => array('className' => 'Link'));

	var $validate = array(
        'comment' => array(
			'rule' => array('maxLength', '200'),
            'required' => true,
			'allowEmpty' => false,
            'message' => 'Menos de 200 caracteres'
		)
    );
}

Como novedad respecto a lo visto anteriormente tenemos la variable $belongsTo, mediante la que indicamos la relación entre un comentario y un enlace (el comentario pertenece a un enlace).

También necesitamos retocar el modelo de enlace ya visto en la primera parte, añadiendo la relación con los comentarios. Se trata sólo de una línea que no precisa demasiada explicación:

var $hasMany = array('Comment' => array('className' => 'Comment'));

Vamos ya con el controlador para los comentarios (app/controllers/comments_controller.php):

class CommentsController extends AppController {

	var $name = 'Comments';

	function add($link_id = false) {
		if (!empty($this->data)) {
			if ($this->Comment->save($this->data)) {
				$this->redirect('/links/');
			}
		} else {
			$this->set('link_id', $link_id);
		}
	}
}

Es un controlador más sencillo que el visto para los enlaces, ya que este sólo define el método add. Las únicas novedades respecto al anterior son:

  • En el método add diferenciamos dos casos:
    1. El caso de recibir el formulario (!empty($this->data)) que es cuando se guarda en la base de datos el comentario.
    2. Si no estamos recibiendo el contenido del formulario es que se va a mostrar el mismo y necesitamos pasarle a la vista el identificador del enlace.
  • Tras añadir un enlace se hace una redirección ($this->redirect('/links/');).

En el controlador de los enlaces no necesitamos añadir nada, ya que al estar relacionados mediante el modelo, al hacer findAll() se recuperan de la base de datos los enlaces junto con todos sus comentarios.

Una nota respecto a findAll(), en las últimas versiones de CakePHP han deprecado findAll(), debiendo ser sustituido por find('all'), aunque no lo voy a cambiar ya que sigo utilizando la misma versión de Cake que en la primera entrada. Supongo que es lo que tiene no haber sido marcada como estable todavía.

Por último vamos con las vistas. En la vista index de los enlaces (app/views/links/index.thtml) añadimos un segundo bucle en el que recorremos los comentarios de cada enlace para mostrarlos en forma de lista. También añadimos el enlace que nos permite añadir un nuevo comentario (en este caso como último elemento de la lista anterior). Pongo el código completo, aunque sólo cambia la parte entre los <ul>.

<h3>Enlaces disponibles</h3>
<?php foreach ($links as $link): ?>

<a href="<?php echo $link&#91;'Link'&#93;&#91;'url'&#93;; ?>"><?php echo $link&#91;'Link'&#93;&#91;'title'&#93;; ?></a>

Añadido: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?>
<ul>
<?php foreach ($link&#91;'Comment'&#93; as $comment): ?>
	<li><?php echo $comment&#91;'comment'&#93; . ' (' . $comment&#91;'created'&#93; . ')'; ?></li>
<?php endforeach; ?>
	<li><?php echo $html->link('Añadir comentario', '/comments/add/' . $link['Link']['id']);?></li>
</ul>
<?php endforeach; ?>
<?php echo $html->link('Añadir enlace', '/links/add');?>

Podemos ver que en el enlace para añadir un nuevo comentario se le pasa como parámetro el identificador del enlace (recordemos que luego se lo pasamos a la vista de añadir comentario.

La vista de añadir comentario (app/views/comments/add.thtml)queda así:

Añadir comentario.
<?php
echo $form->create('Comment');
echo $form->hidden('link_id', array('value' => $link_id));
echo $form->textarea('comment', array('label' => 'Comentario'));
echo $form->submit('Añadir',array('escape'=>false));
echo $form->end();
?>

Lo único nuevo respecto a los visto en la primera entrega es la creación de un input hidden mediante $form->hidden.

Ahora si dirigimos nuestro navegador al raíz de nuestro servidor podemos ver lo siguiente:

Ya podemos ver el efecto de nuestro propio diseño y los nuevos enlaces para añadir comentario. Pulsando sobre “Añadir comentario” para uno de nuestros enlaces llegamos a la vista para añadir comentario:

Y si añadimos el comentario volvemos a nuestra página principal en la que se aprecia el comentario recién añadido.

Y con esto hemos llegado al final de la segunda entrada. Por supuesto quedaría mucho trabajo por hacer en nuestro gestor de enlaces, y puede que retome el ejemplo en futuras entradas sobre CakePHP.

Espero que os haya gustado (si es el caso un comentario no estaría mal jeje).

22 agosto 2008 at 10:50 am 27 comentarios

Mi primera aplicación CakePHP (1)

Tras hacer una presentación y ver su instalación, empezaremos a realizar una aplicación de ejemplo utilizando CakePHP. Me he decidido a empezar un gestor de enlaces al estilo de delicious o mister wong.

No voy a utilizar algunas utilidades de CakePHP como la herramienta de línea de comando bake (a la que espero dedicar una entrada en el futuro).

Lo primero que hacemos es crear una tabla en la base de datos para nuestros enlace. Para ello entramos en phpMyAdmin con el usuario que creamos en el paso de instalación y creamos una tabla. Nos queda algo así:

Hay que destacar algunas características en la tabla creada:

  • El nombre de la tabla no es negociable. Es el plural (en inglés) del modelo al que representa.
  • La clave primaria id es obligatoria. El nombre tampoco es negociable.
  • El campo created también es de nombre fijo.

En general estas limitaciones son salvables, pero si seguimos el estándar de CakePHP será todo más sencillo y ahorraremos líneas de código.

Lo primero creamos el modelo (por convención lo guardamos en app/models como link.php):

class Link extends AppModel {
	var $name = 'Link';

	var $validate = array(
        'title' => array(
            'rule' => array('maxLength', '30'),
            'allowEmpty' => false,
            'message' => 'Titulo no valido'
		),
        'url' => array(
			'rule' => 'url',
            'required' => true,
            'message' => 'Debe introducir un email correcto'
		)
    );
}

Como podemos ver, un modelo en principio es bastante sencillo. La parte que más líneas acapara es la validación, una de las facilidades que nos aporta CakePHP. En este caso, al título le damos una longitud máxima y a la url le forzamos a que sea una url 🙂 .

Ahora vamos con el controlador (igualmente por convención lo guardamos en app/controllers como links_controller.php):

class LinksController extends AppController {

	var $name = 'Links';

	function add() {
		if (!empty($this->data)) {
			if ($this->Link->save($this->data)) {
				$this->flash('Enlace añadido.','/links');
			}
		}
	}

	function index() {
		$this->set('links', $this->Link->findAll());
	}
}

El controlador probablemente sea la parte más compleja de nuestra aplicación. En este caso hemos definido dos acciones, una que hemos llamado index (acción por defecto de ese controlador) que nos mostrará todos los enlaces y add que nos permitirá añadir un enlace. Destacamos los siguientes puntos:

  • Con !empty($this->data) comprobamos si hemos recibido el formulario de añadir enlace con información.
  • Cuando se hace referencia a $this->Link, estamos haciendo referencia al modelo, y utilizamos sus métodos, tanto para guardar un nuevo enlace (save) como para recuperar los enlaces existentes (find('all')).
  • Con $this->set() le pasamos información a la vista correspondiente.
  • $this->flash() es un método bastante utilizado en CakePHP para hacer una transición a otra página tras mostrar un mensaje.

Por último necesitaremos dos vistas, una por cada acción del controlador. Ambas las pondremos en app/views/links y serán add.thtml e index.thtml. Primero vemos el index:

<h1>Enlaces disponibles</h1>
<?php foreach ($links as $link): ?>

<a href="<?php echo $link&#91;'Link'&#93;&#91;'url'&#93;; ?>"><?php echo $link&#91;'Link'&#93;&#91;'title'&#93;; ?></a>

Añadido: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?>
<?php endforeach; ?>

<?php echo $html->link('Añadir enlace', '/links/add');?>

Destacamos la utilización de $links suministrado por el controlador mediante el método set(). También la utilización del Helper html, en este caso para crear un enlace ($html->link()).

Y finalmente la vista de añadir:

Añadir
<?php
echo $form->create('Link');
echo $form->input('title');
echo $form->input('url');
echo $form->end('Agregar');
?>

Aquí destacamos la utilización del Helper de formularios, para la creación de todos los elementos del formulario.

Si ahora apuntamos nuestro navegador al proyecto CakePHP y añadimos /links/ al final de la ruta (en CakePHP una ruta /controller/action hace referencia al controlador controller método action) nos dirigimos a la acción por defecto del controlador links y obtenemos:

Destacamos algunas cosas:

  • El diseño de cabecera y pie nos lo ha colocado CakePHP. Esto lo modificaremos creando un layout en /app/views.
  • En la parte inferior nos aparece información sobre las querys ejecutadas. Esto se debe al nivel de debug que tenemos seleccionado. Mientras desarrollamos yo aconsejo no cambiarlo. Para un sitio en producción lógicamente pondremos el nivel a 0.
  • Tenemos un enlace que apunta a la acción add del controlador links (/links/add).
  • La lista de enlaces está vacía. Claro, ¡CakePHP tampoco hace magia!.

Si pinchamos en el enlace de añadir, vemos nuestro formulario de añadir:

Podemos hacer algunas pruebas de la validación que CakePHP nos aporta y que nosotros hemos indicado en el modelo (incluido el mensaje que aparece). Cuando finalmente introducimos unos valores válidos llegamos a:

Esta es la pantalla que nos ha generado el $this->flash() que vimos en el controlador. Su funcionamiento también depende del nivel de debug. En el nivel de desarrollo, el mensaje que aportamos es un enlace a la ruta también indicada en $this->flash().

Finalmente ya tenemos el listado de enlaces con contenido:

En la siguiente entrada de esta serie, continuaremos con nuestro gestor de favoritos: solucionaremos algunas pegas que han aparecido hasta ahora, añadiremos comentarios sobre los enlaces de la lista y alguna cosa más.

¡Manteneos en línea!

Actualización: Segunda parte

1 julio 2008 at 9:36 am 40 comentarios

Instalando CakePHP

En esta nueva entrada sobre CakePHP, voy a tratar sobre el tema de su instalación. Además aprovechamos que acaba de salir del horno (nunca mejor dicho) la primera candidata a estable de la versión 1.2.

Nota: Yo para esta entrada estoy utilizando una Ubuntu virtualizada sobre Virtual Box. Algunos detalles de la configuración de apache o permisos, varía según el sistema operativo utilizado. Por ello no voy a entrar en detalles. Si alguien quiere detalles extra, intentaré resolver sus dudas.

Para instalar CakePHP necesitamos tres cosas:

  • Servidor web. Lo habitual Apache (2.2.8 en el momento de escribir esta entrada).
  • PHP. Puede ser 4 ó 5. En esta entrada utilizaré la versión 5 (5.2.4-2 en particular) que es la que se recomienda actualmente.
  • Base de datos. CakePHP soporta las bases de datos más comunes, pero en esta entrada utilizaré la omnipresente MySQL (5.0.51a-3).

No necesitamos nada más, pero una herramienta para gestionar el MySQL nos vendrá bien. Yo voy a utilizar phpMyAdmin (2.11.3-1).

Antes de realizar la instalación propiamente dicha, tenemos que configurar un par de detalles en el apache:

  • Debemos asegurarnos que se puede sobrescribir las propiedades de nuestro directorio, para lo que necesitamos poner AllowOverride All.
  • Debemos habilitar el módulo rewrite de apache. No es obligatorio, pero sí recomendable.

Bien, una vez que hemos cubierto los requisitos para instalar CakePHP el siguiente paso es descargarse desde la página de CakePHP el paquete con la aplicación (cake_1.2.0.7125-rc1.zip, aunque hay otros formatos disponibles).

Descomprimimos el archivo en el directorio correspondiente al servidor web y cambiamos los permisos si es necesario. Ahora podemos lanzar nuestra primera prueba.

Las partes importantes son:

  1. Se nos pide que cambiemos la Security.salt ( sal en criptografía) para no usar la que viene por defecto. Ponemos otra cualquiera en el archivo que se nos indica y ya está.
  2. Se comprueba si el directorio tmp dentro de app tiene permisos de escritura. Es necesario, ya que en este directorio se guardan logs, caches y demás.
  3. Nos indica el mecanismo utilizado para cache de los varios que se pueden seleccionar. File está bien.
  4. Nos indica que no tenemos configurada la base de datos. Nos centramos en esta.

La solución que se nos sugiere es renombrar database.php.default en app/config a database.php. El problema es que si sólo hacemos eso, nos van a aparecer errores de conexión.

Necesitamos crear una base de datos en el MySQL y configurar a CakePHP para que la utilice.

Para lo primero utilizo phpMyAdmin. La manera más rápida y fácil es en privilegios crear un nuevo usuario con la opción de crear una base de datos con el mismo nombre y otorgar todos los privilegios.

Para lo segundo editamos el database.php visto anteriormente y damos los valores correspondientes:

class DATABASE_CONFIG {

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

Tras hacer esto podemos volver a probar…

Bueno, parece que ya tenemos CakePHP preparado para realizar la primera aplicación, aunque eso queda para una entrada futura.

12 junio 2008 at 7:23 pm 1 comentario

Presentando CakePHP

Esta es la primera entrada de algunas que dedicaré a este framework.

CakePHP es un framework libre para desarrollo web rápido con PHP. CakePHP sigue fielmente el patrón MVC, con la existencia de Modelos (generalmente asociados a una tabla o tablas de la base de datos), Controladores (encargados de la lógica del negocio) que utilizan los modelos necesarios y llaman a la Vista adecuada tras suministrarle los datos necesarios).

Existen bastantes más frameworks MVC para PHP. Quizás los más conocidos sean: Zend Framework, symfony y CodeIgniter. Una pequeña ayuda para decidirse puede ser esta comparativa de frameworks PHP ( en inglés).

Algunas de las facilidades que nos proveen estos frameworks en general y CakePHP en particular son: manejo de la sesión, caché, validación e integración de la base de datos.

Para empezar a probar CakePHP yo recomiendo (en realidad casi toda la comunidad CakePHP recomienda) utilizar la versión 1.2, a día de hoy en beta pero muy cercana a ser la estable y utilizada ampliamente en producción. Además las diferencias entre la versión 1.1 y la 1.2 son bastante sustanciales.

Como ayudas para empezar:

  • Es insustituible el manual, todavía en proceso de construcción y traducción (en versión inglesa está más completo).
  • El grupo de CakePHP-es.
  • La documentación del API.

Bueno, y con esto termino esta primera entrada sobre CakePHP. En la próxima trataré la instalación y mostraré un pequeño ejemplo.

28 mayo 2008 at 7:42 pm 5 comentarios


Mi perfil

View Miguel Orbegozo's profile on LinkedIn

Feedjit

Feeds

Otros…

BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog

Bitacoras.com

Add to Technorati Favorites