Aplicacion para gestion de contenido con tags

Este fin de semana desarrollé un prototipo de un sistema de gestión de contenido, concentrándome en las funcionalidades de agregar y quitar tags del contenido.

Aquí les dejo la aplicación para descargar y probar.

El objetivo fue evaluar que tan costoso era implementarlo en Yupp framework, y el resultado fue el siguiente:

• Aplicación: Yupp/Ajax/jQuery/MySQL
• Dedicación: 4 horas
• Funcionalidades principales: crear tags, agregar tags a varios videos (contenido), quitar una tag de un video
• Funcionalidades de soporte: obtener todas las tags existentes, obtener las tags para cada video

Lo que logré fue algo así:

A continuación les cuento un poco cómo lo hice:

Estructura de la aplicación:

• bootstrap
• apps.resman.bootstrap.Bootstrap.script.php
• controllers
• apps.resman.controllers.TagsController.class.php
• apps.resman.controllers.VideoController.class.php
• javascript
• jquery-1.6.2.min.js
• jquery.form-2.84.js
• model
• resman.model.Tag.class.php
• resources
• resman.model.resources.Video.class.php
• views
• video
• list.view.php
• app.xml

Como pueden ver, es una aplicación pequeña, con un par de controllers, un par de clases de modelo persistente, una vista y un par de archivos javascript, uno es el famoso framework javascript jQuery y el otro el plugin para gestionar formularios y poder hacer envíos por ajax, en lugar del clásico submit que nos hace tener que recargar toda la página, y hacerlo por ajax mejora enormemente la experiencia del usuario.

En el archivo de bootstrap se crean algunos videos y la etiqueta que guarda todas las etiquetas del sistema (luego explico como es esto). Como esto es una prueba y no es un gestor de contenidos completo se deben crear los videos en el bootstrap. Si fuera un gestor de contenidos completo, tendría funcionalidades para poder crear, modificar y eliminar videos y otros tipos de contenidos como archivos, links, etc.

En el bootstrap tenemos:

// Incluye clases del modelo persistente
YuppLoader::load('resman.model', 'Tag');
YuppLoader::load('resman.model.resources', 'Video');

// Crea videos de prueba
$videos = array();

$videos[] = new Video(array(
  'name'=>'La Coka Nostra - That\'s coke',
  'comment'=>'excelente!',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/HaVf_yrq6Q0" width="560"></iframe>',
  'link'=>'http://youtu.be/HaVf_yrq6Q0'
));
$videos[] = new Video(array(
  'name'=>'Snoop Dog - Vato',
  'comment'=>'hardcore',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/D_9Dfh2Hf-A" width="560"></iframe>',
  'link'=>'http://youtu.be/D_9Dfh2Hf-A'
));
$videos[] = new Video(array(
  'name'=>'Snoop Dog - Drop it like it\'s hot',
  'comment'=>'chambalala',
  'embedCode'=>'<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/LfgMC6F0FVo" width="420"></iframe>',
  'link'=>'http://youtu.be/LfgMC6F0FVo'
));

// Guarda en la base los videos de prueba
foreach ($videos as $video)
{
   $video->save();
}

// Crea la instancia global con todas las tags
$globalTags = new Tag(array('tags'=>''));
$globalTags->save();

Antes comentaba que se crea una instancia de Tag que va a guardar todas las tags que se crean en el sistema, la idea es que desde esas tags se seleccionen las tags que se le van a poner a los videos.


Las tablas que generan las clases del modelo persistente son las siguientes:

Tabla de videos con los 3 videos creados en el bootstrap:

id	name	comment	embedCode	link	class	deleted
1	La Coka Nostra - That's coke	excelente!	<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/HaVf_yrq6Q0" width="560"></iframe>	http://youtu.be/HaVf_yrq6Q0	Video	0
2	Snoop Dog - Vato	hardcore	<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/D_9Dfh2Hf-A" width="560"></iframe>	http://youtu.be/D_9Dfh2Hf-A	Video	0
3	Snoop Dog - Drop it like it's hot	chambalala	<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/LfgMC6F0FVo" width="420"></iframe>	http://youtu.be/LfgMC6F0FVo	Video	0

Tabla de tags con la tag que tiene todas las tags creadas en el sistema (la que tiene objClass y objId en NULL), y las tags creadas para cada uno de los videos. Todas las tags de cada video se guardan codificadas en la columna "tags", separadas por coma. Estas son las tags que aparecen en la captura de pantalla que puse más arriba.

id	objClass	objId	tags	class	deleted
1	NULL	NULL	papa,pepe,popo,pupu,caradura,sampatrucha	Tag	0
2	Video	1	popo,sampatrucha,pepe	Tag	0
3	Video	2	sampatrucha,caradura,pepe	Tag	0
4	Video	3	popo,sampatrucha,caradura	Tag	0

Podría repasar toda las funcionalidades, pero aquí les dejo la aplicación para descargar, donde pueden ver el código y probar de instalarla en Yupp Framework 0.4, además el código está lleno de comentarios.

La idea central era mostrar que con aproximadamente 300 líneas de código, entre PHP y Javascript, y en 4 horas, se pueden lograr funcionalidades muy interesantes, que agilizan la experiencia del usuario, y que tienen gran usabilidad.