Sistema de estadísticas con Flash Remoting

Muchas veces cuando creamos un sitio web para un cliente este (en la mayoría de los casos) se preguntará si su página está siendo visitada o no?, esto se complica un poco cuando la página está hecha completamente en flash, sin embargo esto es imprescindible para la toma de decisiones con respecto a la publicidad de la página, sino ¿cómo sabemos si la publicidad actual está funcionando?. Y el poner un enlace a uno de esos servicios estadísticos, como que interfieren en nuestros diseños y además se pierde la experiencia del usuario al abrirse un página nueva ajena a nuestro sitio web. Pero no se preocupen para eso está cristalab ;)

En este tutorial explicaré cómo realizar estadísticas de visitas usando Flash Remoting, si no sabes de lo que estoy hablando por favor lee esto primero antes de continuar:

• Tutorial de instalación de Flash Remoting y AMFPHP
• Tutorial de bases de datos con flash y amfphp

Explicación:

Primero la base de datos, en este caso las visitas se irán registrando por semanas, meses y años.

Nota: La conección a la base se realiza con el servicio consultor, sí la misma que hizo Freddie®

<?php
//Clase de conexión simple y consulta a base de datos "Consultor"
//  Devuelve un recordset de una consulta a Flash
//  Facilmente extensible usando programación orientada a objetos
//  Freddie® - http://www.cristalab.com/
class Consultor{
	function Consultor(){
		$this->methodTable = array(
			"consulta" =>array (
				"description" => "Devuelve un objeto RecordSet a Flash de una consulta pasada por parametro",
				"access" => "remote",
				"arguments" => array("sql")
			)
		);
	}
	function consulta($sql){
		/*
			Los datos de la base de datos MySQl
			El nombre de usuario, el password de acceso y obviamente el nombre de la base de datos
			
			CAMBIALOS!!! a los tuyos del servidor o no funcionara
		*/
		$cons_user = "root";
		$cons_pass = "";
		$cons_db = "BASE_DE_DATOS";
		//Conecta a la base de datos
		$dbh=mysql_connect("localhost",$cons_user,$cons_pass) or die ('Error conectandose a la base de datos por: ' . mysql_error());
		//Selecciona la base de datos
		mysql_select_db ($cons_db);
		//Guarda el resultado de la consulta en un identificador (Puntero)
		$resultado=mysql_query($sql,$dbh);
		mysql_close($dbh);
		//Retorna lo obtenido
		return $resultado;
	}
}
?>

La misma clase conexion

import mx.remoting.NetServices;
import mx.remoting.Connection;
import mx.remoting.RecordSet;
import mx.remoting.NetServiceProxy;
dynamic class Conexion {
	private var conn:Connection;
	private var serv:NetServiceProxy;
	private var servSend:NetServiceProxy;
	private var padre;
	public var onConsulta:Function;
	function Conexion() {
		NetServices.setDefaultGatewayUrl("http://localhost/remoting/gateway.php");
		conn = NetServices.createGatewayConnection();
	}
	private function errorAMF(data) {
		trace("AMFPHP Error");
		trace("En la linea "+data.line);
		trace("Nivel del error: "+data.level);
		trace("------------------------------");
		trace(data.description);
		padre.traceObj(data);
	}
	public function consulta(SQL:String) {
		trace("Consultando");
		var envio:Object = new Object();
		envio.padre = this;
		envio.onStatus = this.errorAMF;
		envio.consulta_Result = function(data) {
			var rs:RecordSet = data;
			this.padre.onConsulta(rs);
		};
		servSend = conn.getService("Consultor", envio);
		servSend.consulta(SQL);
	}
	function traceObj(obj) {
		trace("TrazandoObjeto");
		for (var i in obj) {
			trace("\\t"+i+"->"+obj[i]);
		}
	}
}

En flash creamos un texto dinámico con nombre de instancia "visitas_txt" y con Flash Remoting en la librería, ponemos el siguiente codigo en un keyframe

//inicializamos los contadores para las semanas
semana1 = semana2 = semana3 = semana4 = 0;
//preparamos las fechas
mes = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
miFecha = new Date();
hoy = miFecha.getDate();
//loadVars para el registro a la base de datos
receive_lv = new LoadVars();
sender_lv = new LoadVars();
//conectamos con el servicio de consultas
import Conexion;
import mx.remoting.RecordSet;
var db:Conexion = new Conexion();
db.consulta("SELECT * FROM estadisticas"); //consultamos la tabla estadisticas
db.onConsulta = function(rs) {
	max=rs.getLength();
	if (max > 0){ // entra si hay algun registro en la base
		suma = 0;
		for (i=1;i<=max;i++){ // contamos todas las visitas registradas
			suma += Number(rs.getItemAt(max-i).week1)+Number(rs.getItemAt(max-i).week2)+Number(rs.getItemAt(max-i).week3)+Number(rs.getItemAt(max-i).week4);
		}
		var str:String = new String(suma+1);
		var mtr:Array = str.split("");
		visitas_txt.text = mtr.join(" "); //esto es para separar los números
		
		codigo = rs.getItemAt(max-1).codigo;
		lastyear = rs.getItemAt(max-1).year;
		lastmonth = rs.getItemAt(max-1).month;
		lastday = rs.getItemAt(max-1).day;
		newmonth = 0;
	}else{ // si no hay registro se toman los datos de la máquina del usuario
		lastyear = miFecha.getFullYear();
		lastmonth = mes[miFecha.getMonth()];
		lastday = hoy;
		codigo = newmonth = 1;
	}
	semana1 = rs.getItemAt(max-1).week1;
	semana2 = rs.getItemAt(max-1).week2;
	semana3 = rs.getItemAt(max-1).week3;
	semana4 = rs.getItemAt(max-1).week4;
	if (hoy == 1){ // si es un nuevo mes, comprobamos si es así
		if (lastmonth == mes[(miFecha.getMonth())-1]){
			lastday = newmonth = 1;
			semana1 = semana2 = semana3 = semana4 = 0;
			codigo++;
			if (lastmonth == "Diciembre"){ //si el último mes fue diciembre, entonces hoy es año nuevo :)
				lastyear = miFecha.getFullYear();
			}
			lastmonth = mes[miFecha.getMonth()]
		}
	}else{ //si no es un nuevo mes, etonces vemos si es un nuevo día
		lastday = hoy;
	}
	if (hoy >= 1 && hoy <= 7){
		semana1++;
	}else if(hoy >= 8 && hoy <= 14){
		semana2++;
	}else if (hoy >= 15 && hoy <= 21){
		semana3++;
	}else if (hoy >= 22 && hoy <= 31){
		semana4++;
	}
	sender_lv.year = lastyear;
	sender_lv.month = lastmonth;
	sender_lv.day = lastday;
	sender_lv.week1 = semana1;
	sender_lv.week2 = semana2;
	sender_lv.week3 = semana3;
	sender_lv.week4 = semana4;
	sender_lv.isnew = newmonth; // true || false :: ¿es un nuevo mes o no?
	sender_lv.code = codigo;
	sender_lv.sendAndLoad("pathvisitor.php", receive_lv, "POST");
	receive_lv.onLoad = function() {
		trace("NUEVA VISITA REGISTRADA");
	}
}

Pasamos los valores de flash para ingresar o modificar la tabla estadísticas en nuestra base de datos, según sea el caso

<?php
		$connection = mysql_connect("localhost", "root", "") or die ('Acceso negado a la base');
 		$db = mysql_select_db("BASE_DE_DATOS") or die ("Base de datos no valida");
		
		$code = $_POST['code'];
		$year = $_POST['year'];
		$month = $_POST['month'];
		$day = $_POST['day'];
		$week1 = $_POST['week1'];
		$week2 = $_POST['week2'];
		$week3 = $_POST['week3'];
		$week4 = $_POST['week4'];
		$isnew = $_POST['isnew'];

		if ($isnew==1){
			$Query = "INSERT into estadisticas (`codigo`, `year`, `month`, `day`, `week1`, `week2`, `week3`, `week4`) values ('$code', '$year', '$month', '$day', '$week1', '$week2', '$week3', '$week4')";
			$insertar = mysql_query($Query) or die ("no inserto");
		}else{
			$sql = "UPDATE estadisticas SET week1 = '$week1', week2 = '$week2', week3='$week3', week4='$week4', day='$day' WHERE codigo = $code";
			$result = mysql_query($sql); 
		}
?>

En archivo cubos3D.as creamos las funciones para dibujar los cubos

//creamos los movieClips para los cubos
function crearcubos(){
	var d:Number=60;
	for (l=1;l<=4;l++)
		this.createEmptyMovieClip("superior"+l, d+l);
	d +=5;
	for (l=1;l<=4;l++)
		this.createEmptyMovieClip("lateral"+l, d+l);
	d +=5;
	for (l=1;l<=4;l++)
		this.createEmptyMovieClip("frente"+l, d+l);
}
//cubos3D([posición en x inicial],[posición en y inicial], [valor1], [valor2], [valor3], [valor4]);
function cubos3D(x,yy,y,b,g,w){
	//Inicializamos los colores de cada división
	colorF1 = 0x999996; //color frontal
	colorL1 = 0x666666; //color lateral
	colorS1 = 0xDDDDDD; //color de la parte superior

	colorF2 = 0xA5BC4E;
	colorL2 = 0x738336;
	colorS2 = 0xC2CB83;

	colorF3 = 0x1B95D9;
	colorL3 = 0x126897;
	colorS3 = 0x62C0FF;

	colorF4 = 0xE48701;
	colorL4 = 0x9F5E00;
	colorS4 = 0xFEB341;
	//creamos los dichosos cubos, con los parametros recogidos
	//Primero creamos los mc de la parte superior de los cubos
	with (this.superior1) {
		lineStyle(1, colorS1, 100);
		moveTo(x+18, yy-y-13);
		beginFill(colorS1, 100)
		lineTo(x+71, yy-y-13); //linea superior
		lineTo(x+54, yy-y); //linea derecha
		lineTo(x, yy-y); //linea inferior
		lineTo(x+18, yy-y-13); //linea izquierda
	}
	if (b > 0){ // condicionamos para que solo se creen los mc necesarios
		with (this.superior2) {
			lineStyle(1, colorS2, 100);
			moveTo(x+18, yy-y-13-b);
			beginFill(colorS2, 100)
			lineTo(x+71, yy-y-13-b); //linea superior
			lineTo(x+54, yy-y-b); //linea derecha
			lineTo(x, yy-y-b); //linea inferior
			lineTo(x+18, yy-y-13-b); //linea izquierda
		}
	}
	if (g > 0){
		with (this.superior3) {
			lineStyle(1, colorS3, 100);
			moveTo(x+18, yy-y-13-b-g);
			beginFill(colorS3, 100)
			lineTo(x+71, yy-y-13-b-g); //linea superior
			lineTo(x+54, yy-y-b-g); //linea derecha
			lineTo(x, yy-y-b-g); //linea inferior
			lineTo(x+18, yy-y-13-b-g); //linea izquierda
		}
	}
	if (w > 0){
		with (this.superior4) {
			lineStyle(1, colorS4, 100);
			moveTo(x+18, yy-y-13-b-g-w);
			beginFill(colorS4, 100)
			lineTo(x+71, yy-y-13-b-g-w); //linea superior
			lineTo(x+54, yy-y-b-g-w); //linea derecha
			lineTo(x, yy-y-b-g-w); //linea inferior
			lineTo(x+18, yy-y-13-b-g-w); //linea izquierda
		}
	}
	//seguimos con la parte lateral de cada cubo
	with (this.lateral1) {
		lineStyle(1, colorL1, 100);
		moveTo(x+54, yy-y);
		beginFill(colorL1, 100)
		lineTo(x+71, yy-y-13); //linea superior
		lineTo(x+71, yy-13); //linea derecha
		lineTo(x+54, yy); //linea inferior
		lineTo(x+54, yy-y); //linea izquierda
	}
	if (b > 0){
		with (this.lateral2) {
			lineStyle(1, colorL2, 100);
			moveTo(x+54, yy-y-b);
			beginFill(colorL2, 100)
			lineTo(x+71, yy-y-13-b); //linea superior
			lineTo(x+71, yy-13-y); //linea derecha
			lineTo(x+54, yy-y); //linea inferior
			lineTo(x+54, yy-y-b); //linea izquierda
		}
	}
	if (g > 0){
		with (this.lateral3) {
			lineStyle(1, colorL3, 100);
			moveTo(x+54, yy-y-b-g);
			beginFill(colorL3, 100)
			lineTo(x+71, yy-y-13-b-g); //linea superior
			lineTo(x+71, yy-13-y-b); //linea derecha
			lineTo(x+54, yy-y-b); //linea inferior
			lineTo(x+54, yy-y-b-g); //linea izquierda
		}
	}
	if (w > 0){
		with (this.lateral4) {
			lineStyle(1, colorL4, 100);
			moveTo(x+54, yy-y-b-g-w);
			beginFill(colorL4, 100)
			lineTo(x+71, yy-y-13-b-g-w); //linea superior
			lineTo(x+71, yy-13-y-b-g); //linea derecha
			lineTo(x+54, yy-y-b-g); //linea inferior
			lineTo(x+54, yy-y-b-g-w); //linea izquierda
		}
	}
	//Y finalmente la parte frontal
	with (this.frente1) {
		lineStyle(1, colorF1, 100);
		moveTo(x, yy-y);
		beginFill(colorF1, 100)
		lineTo(x+53, yy-y); //linea superior
		lineTo(x+53, yy); //linea derecha
		lineTo(x, yy); //linea inferior
		lineTo(x, yy-y); //linea izquierda
	}
	if (b > 0){
		with (this.frente2) {
			lineStyle(1, colorF2, 100);
			moveTo(x, yy-y-b);
			beginFill(colorF2, 100)
			lineTo(x+53, yy-y-b); //linea superior
			lineTo(x+53, yy-y); //linea derecha
			lineTo(x, yy-y); //linea inferior
			lineTo(x, yy-y-b); //linea izquierda
		}
	}
	if (g > 0){
		with (this.frente3) {
			lineStyle(1, colorF3, 100);
			moveTo(x, yy-y-b-g);
			beginFill(colorF3, 100)
			lineTo(x+53, yy-y-b-g); //linea superior
			lineTo(x+53, yy-y-b); //linea derecha
			lineTo(x, yy-y-b); //linea inferior
			lineTo(x, yy-y-b-g); //linea izquierda
		}
	}
	if (w > 0){
		with (this.frente4) {
			lineStyle(1, colorF4, 100);
			moveTo(x, yy-y-b-g-w);
			beginFill(colorF4, 100)
			lineTo(x+53, yy-y-b-g-w); //linea superior
			lineTo(x+53, yy-y-b-g); //linea derecha
			lineTo(x, yy-y-b-g); //linea inferior
			lineTo(x, yy-y-b-g-w); //linea izquierda
		}
	}
}

Creamos el swf para presentar el gráfico estadístico. Debemos tener Flash Remoting en la librería

Nombres de instancia (de arriba a abajo y de izquierda a derecha respectivamente): año_txt, count6_txt, count5_txt, count4_txt, count3_txt, count2_txt, count1_txt, mes1_txt, mes2_txt, mes3_txt, mes4_txt, prev_btn, next_btn

import mx.remoting.RecordSet;
#include "cubos3D.as"
this.next_btn.enabled = false;
this.prev_btn.enabled = false;
this.next_btn._alpha = 50;
this.prev_btn._alpha = 50;
// coordenadas de inicio en x, y (de la posición de inicio del último cubo)
y0 = 252;
xx = 273;
zz = 2.035; //sale de la altura de la tabla menos la altura de un cuadrante y dividido para 100 (243.5-40)/100
bots = 0;
function kogiendo(cc,gx){
	crearcubos();
	var db:Conexion = new Conexion();
	var w1:Array = new Array();
	var w2:Array = new Array();
	var w3:Array = new Array();
	var w4:Array = new Array();
	var month:Array = new Array();
	var T:Array = new Array();
	mes1_txt.text = mes2_txt.text = mes3_txt.text = mes4_txt.text = " ";
	db.consulta("SELECT * FROM estadisticas"); //recogemos los datos de la DB
	db.onConsulta = function(rs) {
		long = rs.getLength()-cc;
		año_txt.text = rs.getItemAt(long-1).year;
		for (i=1;i<=long;i++){
			month[i] = rs.getItemAt(long-i).month;
			w1[i] = rs.getItemAt(long-i).week1;
			w2[i] = rs.getItemAt(long-i).week2;
			w3[i] = rs.getItemAt(long-i).week3;
			w4[i] = rs.getItemAt(long-i).week4;
			T[i] = Number(w1[i])+Number(w2[i])+Number(w3[i])+Number(w4[i]);
		}
		if (long > 4){ // condicionales para los botones y los meses
			nCube=4;
			prev_btn.enabled = true;
			prev_btn._alpha = 100;
			mes1_txt.text = month[4];
			mes2_txt.text = month[3];
			mes3_txt.text = month[2];
			mes4_txt.text = month[1];
		}else{
			if (long == 3){ //condicionamos para que no muestre datos que no hay
				gx -= 70;
				nCube=3;
				mes1_txt.text = month[3]; // metemos los meses
				mes2_txt.text = month[2];
				mes3_txt.text = month[1];
			}else if (long == 2){
				gx -= 140;
				nCube=2;
				mes1_txt.text = month[2];
				mes2_txt.text = month[1];
			}else if (long == 1){
				gx -= 210;
				nCube=1;
				mes1_txt.text = month[1];
			}else{
				nCube=4;
				mes1_txt.text = month[4];
				mes2_txt.text = month[3];
				mes3_txt.text = month[2];
				mes4_txt.text = month[1];
			}
			prev_btn.enabled = false;
			prev_btn._alpha = 50;
		}
		if (cc == 0){
			next_btn.enabled = false;
			next_btn._alpha = 50;
		}else{
			next_btn.enabled = true;
			next_btn._alpha = 100;
		}
		// buscamos el dato mayor en la DB (la semana en la que hubo más visitas)
		kk = 1;
		for (i=2;i<=4;i++){
			if (T[kk] < T[i]){
				kk = i;
			}
		}
		// lo dividimos para los 5 cuadrantes que tenemos
		mxy = T[kk]/5;
		//mxy = Math.round(mxy); //redondeamos el dato
		nums = mxy;
		//metemos las referencias
		count2_txt.text = nums;
		nums += mxy;
		count3_txt.text = nums;
		nums += mxy;
		count4_txt.text = nums;
		nums += mxy;
		count5_txt.text = nums;
		nums += mxy;
		count6_txt.text = nums;
		
		for (i=1;i<=nCube;i++){
			w1[i] = (((w1[i]*100)/T[kk])*zz); //pequeña formula para hacerlos proporcionales
			w2[i] = (((w2[i]*100)/T[kk])*zz);
			w3[i] = (((w3[i]*100)/T[kk])*zz);
			w4[i] = (((w4[i]*100)/T[kk])*zz);
			//cubos3D([posición inicio X],[posicion inicio Y],[semana1],[semana2],[semana3],[semana4]);
			cubos3D(gx,y0,w1[i],w2[i],w3[i],w4[i]);
			gx -= 70; //le bajamos a la posición en x (es decir se grafíca desde el último cubo al primero)
		}
	}
}
kogiendo(bots,xx);
//kogiendo([4 meses más/menos],[posición X]);
this.next_btn.onRelease = function(){
	bots -= 4;
	kogiendo(bots,xx);
}
this.prev_btn.onRelease = function(){
	bots += 4;
	kogiendo(bots,xx);
}

Luego nos quedará algo así:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo