Diseño y programación de un portfolio web con CakePHP
junio 22, 2011 1 comentario
Una de las secciones que más he cuidado de dejandomarcas.com v2.0 es el portfolio. Al programar con CakePHP he podido diseñar un controlador que me obtenga todos los datos de mis trabajos de forma clara y ordenada, dejando a la vista que se encargue de cómo quiero mostrarlo en pantalla.
A continuación voy a explicar cómo lo he hecho, tanto el código del controlador, como el diseño de la vista, para que si quereis montar una galería de imágenes o un portfolio personal, podais hacerlo de una forma sencilla, siempre utilizando CakePHP, así aprendemos un poquito de este maravilloso framework.
Creo el modelo -> app/models/portfolio.php
<?php
// Este es el modelo que uso para trabajar con la bd
class Portfolio extends AppModel {
// Nombre modelo
public $name = 'Portfolio';
// Nombre tabla BD
public $useTable = 'portfolio';
// Campo de ordenación por defecto
public $order = 'Portfolio.id DESC';
// Usado para la validacion de los datos de entrada dentro del panel de administracion
public $validate = array(
'nombre' => array('required' => array('rule' => 'notEmpty', 'message' => 'name can not be empty')),
'descripcion' => array('required' => array('rule' => 'notEmpty', 'message' => 'description can not be empty'))
);
}
?>
Creo el controlador -> app/controllers/home_controller.php
<?php
class HomeController extends AppController {
// Nombre controlador
public $name = 'Home';
// Modelos empleados
public $uses = array('Portfolio');
// Disposición de diseño por defecto
public $layout = 'main';
// Componentes utilizados
public $components = array('String');
// Helpers utilizados
public $helpers = array('String');
/* METODOS PUBLICOS */
// Indice de trabajos
public function index() {
// Busco todos los registros
$registers = $this->Portfolio->find("all", array("conditions" => array("Portfolio.ver" => 1)));
// Seteo el registro y los medios
$this->set('registers', $registers);
}
// Metodo para lanzar una URL del portfolio sumando uno a las visitas que ya tenia
public function getURL($id) {
// No renderizo la vista
$this->autoRender = false;
// Busco el registro correspondiente a la id recibida
$register = $this->Portfolio->find("first", array("conditions" => array("Portfolio.id" => $id)));
// Recupero la id
$this->Portfolio->id = $id;
// Sumo uno a las visitas
$visitas = $register['Portfolio']['visitas'] + 1;
// Guardo los datos
if ($this->Portfolio->saveField('visitas', $visitas)) {
// Lanzo la URL
$this->redirect($register['Portfolio']['enlace']);
}
}
}
?>
Y por último, la vista -> app/views/themed/default/home/index.ctp
<div id="bread">
<?php echo $html->image('main/blue-folder-open-document.png')?><?php echo __('latest works');?>
</div>
<?php
// Recorro los registros del controlador
foreach ($registers as $register) {
?>
<div class="project">
<div class="box">
<a href="<?php echo $html->url(array('controller' => 'home', 'action' => 'getURL', $register['Portfolio']['id'])); ?>" target="_blank">
<?php echo $html->image($register['Portfolio']['imagen'], array('alt' => __($register['Portfolio']['nombre'], true)))?>
</a>
</div>
<h2><?php echo $register['Portfolio']['nombre'];?></h2>
<p>» <?php echo utf8_encode($register['Portfolio']['descripcion']);?></p>
</div>
<?php
}
?>
Con estos tres archivos ya tengo declarado el modelo de datos que voy a utilizar junto con sus validaciones para el panel de administración, el controlador que me ayuda a declarar todos los métodos para gestionar los datos, y por último, la vista, que mostrará en pantalla los datos obtenidos.
El resultado es el que veis en http://www.dejandomarcas.com/index.php/home
¿Tenéis dudas?, pues animaros y comentar!
Heatmap nos permite ver los clicks de nuestros usuarios mediante un mapa de calor. Cuanto más azul es el color, menos clics ha habido, y cuanto más rojo, más clics ha tenido dicho enlace. Es genial como se ve el montaje en directo.
Scrollmap nos permite medir el factor de rebote. Si tenemos una página muy «larga», podemos observar qué factor de scroll ha hecho el cliente, de manera que podamos cazar al cliente que entra, echa un ojo, y se va sin hacer nada.
Confetti puede que sea de las más interesantes, ya que no solo nos permite ver los clics como Heatmap, sino que también nos lo fragmenta en enlaces referidos, sources, términos de búsqueda o keywords y un largo etc.
Overlay nos muestra un resumen del número de clics que ha tenido un enlace.
Estoy programando de nuevo mi site principal usando el framework 
Javi Garcia
Dejandomarcas 