Portal AJAX con el CMS PHP CodeIgniter y ExtJS

Recientemente he tenido que revisar un portal realizado con el gestor de contenidos ( CMS ) y framework PHP: CodeIgniter, como base y ExtJS como framework JavaScript para proporcionar los servicios de datos por medio del prototipo JSON. Dividiré el análisis en tres partes: Framework JavaScript, Base de datos y Aplicaciones PHP.

Framework JavaScript: Ext JS

Había encontrado algunos problemas, por ejemplo, si entramos en la web con un dominio sin las tres uves dobles, al estar configurado para el dominio con ellas, los ficheros fuente no eran bien referenciados y había errores por todas partes. Estos bugs se corrigieron fácilmente, pero hay que entender o bien por experiencia, por intuición o por inteligencia, de dónde vienen dichos problemas para poder solucionarlos.

El sistema a analizar tiene un directorio privado, sin embargo se ha de crear una lógica de roles de usuario y ficheros de acceso restringido o bien con PHP o bien con .htaccess para que ningún usuario no autorizado a una zona pueda acceder a la información privada que reside en regiones que no le pertenecen.

El primer error que encontré en el diseño de la aplicación no

estaba en la base de datos, ya que el diseño de entidad relación está correcto, dentro de lo que cabe , y he visto verdaderas barbaridades por ahí…como decía, el primer error es la propia interfaz de usuario, mirad este vídeo:

Comentarios:

Para empezar apenas hay espacio en la ventana al no poder quitarnos de encima los componentes que estorban para rellenar datos, hace falta añadir controles con los que ocultar las zonas laterales, como se hace con la zona inferior. Los botones de menú no se ocultan al pinchar sobre una opción y no se muestran mensajes de “cargando” ni información pertinente, de hecho si ocurre algún error este es ininteligible. El chat no funcionaba, aún así se está sincronizando contínuamente por lo que el ancho de banda que consume es considerable. Internamente no hay una verdadera lógica de programación para los roles de administrador representada en JavaScript, es decir, se mezclan los prototipos de todos los usuarios:usuario invitado, cliente, admin,etc. por lo que cualquier usuario que conociera las url o fuera un poco inteligente podría encontrar un mecanismo de operar con la base de datos de la web usando la ingeniería inversa y consultas en los scripts de JSON que además ya vienen en ficheros .js.

Más allá de mi opinión

Sobre si la decisión de usar Ext JS u otro framework JavaScript como JQuery la dejo a elección del programador porque realmente depende de cómo de cómodo te sientas escrbiendo las piezas del puzzle del portal, en este caso está bastante bien porque se utiliza Firebug para depurar PHP con una consola de estado de Ext JS. Aunque es un poco raro mezclar opensource con freesource, es una buena manera de construir un portal complejo, eso sí, siempre que tengamos claro qué es lo que queremos construir…

Un ejemplo de implementación

Veamos un ejemplo de cómo por medio de una vista del modelo MVC de CodeIgniter, construimos contenido JavaScript para alimentar una acción lanzada desde el portal, la bienvenida:
var Center = Ext.extend(Ext.util.Observable, {
constructor	: function(ui) {
this.ui = ui;
 
this.panel = new Ext.TabPanel({
	title		: 'Center',
        region		: 'center',
	activeTab	: 0,
	autoDestroy	: false,
	items: [
	{
	  title:'Bienvenido',
	  closable	: false,
	  bodyStyle	:'font-family:sans-serif;font-size:12px;',
	  html		:'[contenido]'
    }]
});
}
});

En [contenido] debemos colocar el contenido del componente, por ejemplo, un iframe o cualquier otro elemento html que queramos…

Por ejemplo, para añadir  una pestaña con lo que se debe mostrar de un cliente una opción es la siguiente:

MisClientes = Ext.extend(Ext.Panel,{
    // Prototype Defaults
    propA: 1,
	title: 'Mis Clientes',
	closable	: true,
	iconCls: 'icon-mis-clientes-tab',
 
    initComponent: function(){
        // Called during component initialization
this.fields =[
{name:'cliente', type:'string'},
{name:'nombre', type:'string'},
{name:'email', type:'string'}
];
this.storeGrid = new Ext.data.Store({
 reader:new Ext.data.JsonReader({
  idProperty:'cliente',
  totalProperty:'totalCount',
  root:'rows',
  fields: this.fields
 }),
proxy:new Ext.data.HttpProxy(
 {url: BASE_URL +
  'asignarEntrenador/load_clientes_asig'}),
 baseParams:{entrenador:USER_LOGGED},
 remoteSort:true
});
//...etc.

De esta forma hemos encapsulado toda la información de un cliente junto con los widgets que lo representan ,en un único objeto, sin embargo todo el trabajo no acaba ahí, hay que escribir también los prototipos de respuesta para cada una de las acciones, que devolverán otros widgets, elementos de sincronización, alimentadores de datos o datastores, etc. A partir de aquí hay que sumergirse en el mundo del framework Ext JS, y…
Para terminar con el análisis de la sección del framework JavaScript, las plantillas que este utiliza se han guardado separadas del motor PHP (framework CodeIgniter), esto es buena idea porque se puede actualizar fácilmente y además podríamos crear un subdominio para aligerar la carga de la web de forma que realizara las peticiones de todo el contenido JS en paralelo desde el navegador.

Base de datos

Hablando de la base de datos, como había comentado antes, no está nada mal, aquí vemos el diagrama de entidad/relación, los usuarios son la tabla principal del sistema y alrededor de ella se construye todo el conjunto de entidades que abordan las necesidades del cliente, el administrador ,etc.

Correcciones a aplicar sobre la base de datos: se debe modificar el campo usuario de la tabla de usuarios para que sea único, algunos tipos de datos son demasiado grandes para la información que almacenan, hay que tener en cuenta que cuando el número de usuarios crece y con esto también los datos asociados, la sinergía de nuestro servidor de base de datos depende tanto del número de transacciones como del volumen de estas y si estamos usando un framework que realiza una petición de todos los datos de un usuario para mostrarlos con datos asociados por cada prototipo de entidad, el volumen de estos datos genera un considerable tamaño de ancho de banda que puede ralentizar la aplicación. Para esto se construyen consultas que se guardan como vistas y otras consultas avanzadas como las que se pueden realizar con PL/SQL.

En principio la base de datos no necesitaba más cambios, sólo quedaba analizar si estaba preparada para la expansión, es decir, si era escalable, para probarlo, me ví en la tesitura de añadir una tabla que almacenara información relacionada con archivos compartidos entre usuarios de distintos privilegios, y en este caso no tuve ningún problema con la base de datos sino con el siguiente punto ,ya que la lógica de programación no estaba terminada, no había diferenciación fuerte entre roles y aquí fué donde me llevé la gran sorpresa de toda la jerarquía.

Framework PHP : CodeIgniter

El lector seguramente ,como programador sabrá que los tipados fuertes (objetos) siempre son adecuados para embeber información de un usuario, de modo que con una simple lectura de una propiedad de la instancia de la clase usuario->tipo sabremos qué tipo de usuario es…claro, la cosa se complica al tener que replicar la información en un framework como Ext JS, sabemos que podemos encriptar la información pero finalmente,para acometer una acción delicada debemos realizar la comprobación del nivel de privilegios de un usuario por duplicado: en el framework JS y en el framework PHP.

Llegados al punto en que la jerarquía MVC se abría ante mí, todo parecía el paraíso, hay modelos,

class Usuarios extends Model {
    public function __construct()
    {
        parent::Model(); // Call the Model constructor
		$this->table_usuarios = 'usuarios';
		$this->table_usuarios_tipo = 'usuarios_tipo';
		$this->table_session = 'dasm_sessions';
		//$this->load->library('firephp');
    }
 
	//TODO: Comprobar que es un admin
	function crear(){
//etc.

qué es eso “TODO: Comprobar que es un admin”?…sigamos analizando, hay controladores…bien!

class User extends Controller {
 
    public function __construct()
    {
        parent::Controller();
		if (function_exists('force_ssl')) force_ssl();
		$this->load->library('session'); 
 //iniciar libreria de sesiones
		$this->load->library('firephp'); //FIREBUG
		$this->firephp->log("force shhl");
    }
	public function index(){
		$this->login();
	}
 
    public function login()
    {
        if ($this->my_usession->logged_in)
        {
	 $this->firephp->log("login");
//....

es un poco extraño, -me digo para mí- , ahora es todo coser y cantar, pero no…me parece que el programador se acaba de ventilar toda la jerarquía de roles…además, no hay vistas asociadas,ni controladores en los hooks de C.I., pánico…todas las acciones se realizan por real decreto de…llamadas incoherentes dentro de ficheros javascript?…ok, he muerto, ahora he de renacer a la realidad…¿cómo arreglaríais este desastre organizativo?,

Opción básica A: operar sobre la chapuza a sabiendas de que cada vez se enredará más y más el código

Opción B sólo para los valientes: intentar arreglar toda la jerarquía de clases, añadir los hooks, la lógica de roles y rezar para que no haya ninguna incoherencia…en peores batallas hemos estado

Opción C: la gran elegida por el público y aclamada por todos los directores de proyecto solidarios con la causa del programador medio : rehacer el sistema, esta vez BIEN HECHO.

Conclusiones: ¿Cómo no habría sido un fracaso este proyecto antes de llegar a mis manos?

  • Empezando por el diseño del wireframe completo: diseñar la interfaz de usuario aplicación
  • Analizando las tareas a realizar con diagramas de casos de uso donde se vean reflejadas las acciones de cada rol de usuario
  • Construyendo el diagrama de clases en UML o en papel, me da igual pero dibujar, pintad, y luego desarrollar, eso es lo primero, proyectar lo que queremos , si queremos un pato proyectaremos un fantástico sistema de patos y eso es lo que obtendremos, si no sabemos lo que queremos, lo más probable es que el patito feo odiado por toda la familia tampoco lo quiera pagar el cliente
Y quizás, usar otra tecnología…¿Google? :’D

Otras Arquitecturas y metodologías SOA, ejercicios

Para terminar con las Arquitecturas Web vamos a dejar que Pablo García Sánchez nos cuente qué otras hay además de las que hemos visto: Otras Arquitecturas y metodologías SOA

EJERCICIO SIMPLE

  • Realizar un servicio web en Java con las operaciones:
    - String addUser(String user, String pass) que la guarde en una lista (variable de clase) y devuelva un mensaje diciendo que se ha guardado
    - boolean loginUser(String user, String pass) que compruebe que el usuario existe recorriendo la lista
    - (podemos usar dos listas de strings, HashMaps o crear una clase Usuario y guardarla en una List<Usuario>)
    - Testearlo en el navegador
  • Descargar ejercicio simple

EJERCICIO AVANZADO

  • Desarrollar dos servicios web (cada uno con su WSDL separado) utilizando JAX-WS. El primero debe recibir un XML con datos de un usuario <nombre><edad><contraseña><tel> y parsear ese XML con JDOM comprobando si hay  excepciones y guardarlo en una base de datos.
  • El segundo debe recibir un usuario y contraseña y devolver true si existe el usuario en la base de datos.
  • Finalmente crear un proceso BPEL con dos operaciones
    - Crear usuario (que ataque al primer servicio)
    - Hacer Login (que ataque al segundo) y devuelva un mensaje diciendo si los datos son correctos o no
    - Capturar Excepciones

EJERCICIO BPEL AVANZADO: descargar

fin Del Curso amigos

« Volver al Curso de Arquitectura de Servicios Web con Java y PHP

Estudio de arquitectura – Proyectos, Galerías, Información

Se utilizó el framework ZENPHP sobre un diseño de Agencia Q4 contra bases de datos de un servidor MySQL y animaciones con Flash y JavaScript en el año 2007.

Se pueden ver como se puede configurar las categorías que se deben mostrar primero, la galería de imágenes y la administración de contenidos : proyectos e información del estudio.

Algunos consejos para mejorar como arquitecto de aplicaciones web

Leyendo por Internet he encontrado a un experienciado programador llamado Jim Plush que nos habla en su blog (donde demuestra que es un fanático de todo lo Zend) sobre lo que deberíamos conocer para mejorar siendo programadores web [de php o lo que sea].

Vamos a poner estos consejos para mejorar como arquitecto de aplicaciones web en modo lista:

  • Conocer qué ofrecen las versiones de PHP 4 y 5 , conocer las mejoras de la versión 6:
    En la versión 4 existe la posibilidad de especificar en las declaraciones de las funciones y operaciones de clases, las variables por referencia o por valor, esto se hace siempre por referencia a partir de la 5, en esta además se pueden especificar partes públicas y privadas en las clases además de poder usar el patrón Singleton y autocarga de clases, la versión 6 añade Unicode para nombrar clases, variables y funciones de la tabla de símbolos, y eliminan register_globals, magic_quotes y safe_mode, y atención : paso por referencias peligroso!
  • PHP, ASP.NET y Ruby on Rails, cuándo es mejor utilizar uno u otro lenguaje y sus tecnologías directamente asociadas que implican también otra forma de pensar y actuar frente a los problemas que puedan ocasionarse…
    Si vas a construir un sitio que necesite ser escalable y muy grande (una gran red social o una tienda que vaya a sufrir muchísimos cambios) entonces es mejor utilizar RoR, en otro caso, si necesitas un lenguaje con el que construir una aplicación web puedes usar PHP o ASP, el segundo es más fácil para los que les gusta diseñar con un IDE y el primero para los que quieren tener un motor potente de un gestor de contenidos o hacerlo todo desde cero o con un framework de aplicaciones rápidas…
  • Ser capaz de realizar programas con sockets para implementar servicios (ftp, telnet, etc.)…un programa con sockets puede ser un plugin de WordPress que haga fetching (algoritmo capturador de contenidos) desde una URL, esto lo publicaré en futuro no muy lejano, mientras podéis ver un ejemplo de programación con sockets en PHP
  • Programación Orientada a Objetos: POO
    + por qué especificar un método como privado o público
    + conceptos que son útiles de conocer: interfaces, constructores, destructores, private-public-protected, herencia, polimorfismo, métodos estáticos, etc.
  • Bases de datos: conocer qué es la normalización de base de datos y como exportar/importar esquemas de bases de datos con XML (además de saber como comprimir una base de datos con ZIP o GZIP y enviarlo por mail como adjunto)…ejemplo, además es imprescindible antes de empezar a crear las tablas, hacer nuestro diagrama de E/R
  • Patrones de diseño
  • Control de código fuente (SVN, CSV, etc): esto sirve sobre todo para trabajar en equipo y mantener un control sobre los cambios que vamos realizando en nuestro código fuente (usaremos OHLOH)
  • Unit Testing o Pruebas de Unidad
  • Ser parte de la Comunidad, participar en foros, debates, ayudar a extender los conocimientos, contribuir con algún proyecto aunque sólo sea traduciéndolo a tu idioma…OsCommerce, OpenCMS, Joomla, WordPress, etc.
  • Habilidades con JavaScript, conocer los framework JS existentes (JQuery,  Prototype, MooTools, Dojo, ext,etc.) y hacer ejemplos donde arreglar los problemas de compatibilidad entre ellos…
  • Habilidades con CSS (utilizar CSS dinámico): diseñar online el esqueleto XHTML+CSS de una web
  • Conocer el modelo de caja y cómo AJAX  “encaja” perfectamente en esto :)
  • Saber qué es y como se contruye un sistema gestor de contenidos
  • Usabilidad y Arquitectura de la Información
  • Integrar las redes sociales en nuestra aplicación: login, registro, etc, con facebook, gmail, twitter, menéame, (sharethis),etc.
  • Conocer las herramientas de ayuda para el arquitecto integrables en el navegador: firebug ( y derivados ) ,selenium, etc.
  • Pasión por mejorar (ganar amigos e influenciar para generar más conocimientos que compartir)

Para los avanzados que ya han superado todos los puntos anteriores también tenemos los siguientes:

Aplicación web y tecnologías a medida

Esta aplicación web hecha a medida con la plantilla de un diseñador web muestra como se puede adaptar en poco tiempo el contenido de una página a las peticiones de un cliente y un administrador. Todo el contenido es editable: animaciones con JQuery, validaciones, objetos flash incrustables, rutas de miga de pan, direcciones (url’s) amigables (SEO) editables desde la administración, jerarquía de categorías administrable, galería de imágenes, etc.

vídeo en youtube con explicaciones sobre la imagen

El diseño corre a cargo de la empresa Agencia Q4.

Web administrable con intranet, AJAX, SEO, RSS, WYSIWYG

Ejemplo de programación, programado con plantillas DHTML y PHP con el framework zenphp.En el ejemplo se muestra la página de administración y cómo se puede ir editando el contenido, añadiendo nuevo, colocando banners, etc. de una forma sencilla y adaptada al cliente, se pueden colocar scripts en diferentes partes del sitio web así como imágenes, vídeos, animaciones, flash, cualquier cosa, todo ello conectado con las redes sociales más importantes además de funcionar a una velocidad óptima gracias a la simplificación de procesos del framework… ver vídeos con explicaciones del cliente en youtube: vídeo 1:cliente,

vídeo 2:admin

El diseño corre a cargo de la empresa Agencia Q4.

footer
jbelon © | sitemap.xml