Liberando el código de Tablero dinámico (2)

Ahora veremos la parte del servidor. Creamos el archivo conexion.php con los datos de la conexión al tu servidor MySQL, algo así:

<?php
//Configuracion de la conexion a base de datos
$bd_host = "miservidor"; 
$bd_usuario = "miusuario"; 
$bd_password = "micontraseña"; 
$bd_base = "mibasededatos"; 
$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
mysql_select_db($bd_base, $con); 
?>

Vamos con el archivo que realiza la consulta de todos los datos en la tabla tablero: consulta.php

Hacemos referencia (require) al archivo con los datos de la conexión a la base de datos MySQL (conexion.php). Obtenemos la variable GET ultfec (la variable que definimos en JavaScript), si no tiene valor entonces consultamos todos los datos de la tabla tablero caso contrario, si tiene un valor (la ultima fecha que se consultó) entonces solo se consultará la diferencia, osea todos los datos cuya fecha sea mayor a la última.

En el artículo anterior mencionamos que la respuesta que generá este archivo, consulta.php, es de formato XML. Para ello definimos las cabeceras del archivo como tal. Otra cosa mas, para que el navegador no cargue los datos de la cáche modificamos las cabeceras para indicar que ya expiró, así cargará los datos frescos. Genial!!!

Ahora usamos etiquetas propias para dar formato al contenido de la consulta como XML. Definimos <elemento></elemento> por cada dato en la tabla y <fecha>, <usuario> y <mensaje> respectivamente para los valores de los campos o columnas de la tabla tablero.

Toda esa estructura (ver ejemplo) es la que recibirá como respuesta la función consultaMensajes del archivo ajax.js que vimos en el anterior artículo.

<?php
require("conexion.php");

$UltFecha=$_GET['ultfec'];
if($UltFecha=='undefined'){
	$query = "SELECT * FROM tablero ORDER BY fecha ASC";
}else{
	$query = "SELECT * FROM tablero WHERE fecha>'$UltFecha' ORDER BY fecha ASC";
}
$lista = mysql_query($query,$con);
if (!$lista || empty($lista)) {
	end;
}
$i=1;

// no cargar de la cache del navegador.
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header( "Cache-Control: no-cache, must-revalidate" ); 
header( "Pragma: no-cache" );
header('Content-type: text/xml; charset=UTF-8', true);
echo "<?xml version="1.0" encoding="UTF-8"?>";
echo "<xml>";
while($row = mysql_fetch_array($lista)){
  echo "<elemento>";
  echo "	<fecha>".$row['fecha']."</fecha>";
  echo "	<usuario>".$row['usuario']."</usuario>";
  echo "	<mensaje>".htmlspecialchars($row['mensaje'])."</mensaje>";
  echo "</elemento>";
  $i++;
}
echo "</xml>";
?>

Ahora nos toca ver la parte del registro ó guardado en la tabla tablero.

Primero veamos el registro de los mensajes que se escribe en el formulario mensaje, ese que actua como un pequeño chat (en el artículo anterior mencionamos a la función JavaScript enviarMensaje), de esto se encarga el archivo registro.php.

Usamos los datos de la conexión del archivo conexion.php, la función getRealIP obtiene la dirección IP del visitante (ustedes pueden reeemplazar esta función por una mejor si lo desean).

Finalmente se registra los datos, y eliminamos los datos de la tabla si estos superan los 20.  

<?php
require('conexion.php');

function getRealIP(){
   
   if( $_SERVER['HTTP_X_FORWARDED_FOR'] != '' )
   {
      $client_ip =
         ( !empty($_SERVER['REMOTE_ADDR']) ) ?
            $_SERVER['REMOTE_ADDR']
            :
            ( ( !empty($_ENV['REMOTE_ADDR']) ) ?
               $_ENV['REMOTE_ADDR']
               :
               "unknown" );
   
      // los proxys van añadiendo al final de esta cabecera
      // las direcciones ip que van "ocultando". Para localizar la ip real
      // del usuario se comienza a mirar por el principio hasta encontrar
      // una dirección ip que no sea del rango privado. En caso de no
      // encontrarse ninguna se toma como valor el REMOTE_ADDR
   
      $entries = split('[, ]', $_SERVER['HTTP_X_FORWARDED_FOR']);
   
      reset($entries);
      while (list(, $entry) = each($entries))
      {
         $entry = trim($entry);
         if ( preg_match("/^([0-9]+.[0-9]+.[0-9]+.[0-9]+)/", $entry, $ip_list) )
         {
            // http://www.faqs.org/rfcs/rfc1918.html
            $private_ip = array(
                  '/^0./',
                  '/^127.0.0.1/',
                  '/^192.168..*/',
                  '/^172.((1[6-9])|(2[0-9])|(3[0-1]))..*/',
                  '/^10..*/');
   
            $found_ip = preg_replace($private_ip, $client_ip, $ip_list[1]);
   
            if ($client_ip != $found_ip)
            {
               $client_ip = $found_ip;
               break;
            }
         }
      }
   }
   else
   {
      $client_ip =
         ( !empty($_SERVER['REMOTE_ADDR']) ) ?
            $_SERVER['REMOTE_ADDR']
            :
            ( ( !empty($_ENV['REMOTE_ADDR']) ) ?
               $_ENV['REMOTE_ADDR']
               :
               "unknown" );
   }
   
   return $client_ip;
   
}

$usuario=getRealIP();
$mensaje=$_POST['mensaje'];

$query = "INSERT INTO tablero ( fecha, usuario, mensaje) VALUES (NOW(),'$usuario','$mensaje')";

mysql_query($query);

//eliminando registros si estos superarn los 10
$max=20;
$NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM tablero",$con));
if($NroRegistros>$max){
	$NroAEliminar=$NroRegistros-$max;
	mysql_query("DELETE FROM tablero ORDER BY fecha ASC LIMIT $NroAEliminar");
}
?>

Segundo, ahora deseamos que cada vez que nuestros visitantes ingresen a una página de nuestra web o vean algún post de nuestro blog se registre la página donde está. ¿Cómo hacerlo? Podemos crear un archivo que haga un proceso similar al archivo registro.php. A este archivo podemos ponerle por nombre funciones.php y contendrá las funciones getRealIP (obtiene la IP del visitante) y RegistroEnTablero (registra el enlace del post, artículo ó página que esta viendo el visitante).

 <?php
require('conexion.php');

function getRealIP(){
	//copias el mismo contenido que aparece en el archivo registro.php
}

function RegistroEnTablero($a
ccion){
	$usuario=getRealIP();
	$mensaje=$accion;

	$query = "INSERT INTO tablero ( fecha, usuario, mensaje) VALUES (NOW(),'$usuario','$mensaje')";
	
	mysql_query($query);
	//eliminando registros si estos superarn los 10
	$max=20;
	$NroRegistros=mysql_num_rows(mysql_query("SELECT * FROM tablero"));
	if($NroRegistros>$max){
		$NroAEliminar=$NroRegistros-$max;
		mysql_query("DELETE FROM tablero ORDER BY fecha ASC LIMIT $NroAEliminar");
	}
}

Ahora usemos la función RegistroEnTablero en cada página o páginas que deseemos que se registre cuando un visitante entra a dicha página. Si el contenido de tu web o blog se genera dinámicamente, simplemente coloca la función RegistroTablero en la página principal que genera el contenido. Por ejemplo, en mi caso el archivo que genera el contenido de los artículos es articulos.php, el código es solo un ejemplo.

 <?php
	//aqui contenido antes ...
	$enlaceArticulo="enlace_generado_dinamicamente_por_tu_blog";	

	require('funciones.php');
	RegistroEnTablero($enlaceArticulo);

	//aqui contenido después ...
?>

Si tu contenido lo generas con WordPress puedes usar este fragmento de código al inicio del archivo comments.php (ese archivo está en "wp-content/themes/<tu_tema>/") para registrar el enlace del post que está viendo el visitante o usuario.

 <?php
	require('funciones.php');
	$enlace = apply_filters('the_permalink', get_permalink());
	$titulo =get_the_title();

	//el contenido de enlaceArticulo se guardará en la tabla tablero
	$enlaceArticulo="<a href=".$enlace." >".$titulo."</a>";
	RegistroEnTablero($enlaceArticulo);
?>

Ahora el archivo index.php llamará a todos los archivos JavaScript que usaremos, como también a la hoja de estilos (ver hoja de estilos). El formulario para enviar mensajes (chat) tiene en su evento onsubmit la función enviarMensaje. También notará que usamos una estructura repetitiva (for) para generar 20 divs, estos serán reemplazado por los generados dinámicamente. Finalmente, registramos el mensaje "Este usuario se encuentra en esta sección. Puedes iniciar una conversacion…", para indicar que el usuario se encuentra en el tablero dinámico. El index.php quedaría algo así (lo básico):

<html>
<head>
<title>Ribosomatic » Tablero dinámico</title>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>
<script src="dom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />

</head>
<body>
  <div id="columna_principal_contenido">
	<form style="margin-left:auto;margin-right:auto;width:400px;" name="nuevo_empleado" action="" onsubmit="enviarMensaje(); return false">	  
	  <p>
	  <label>Mensaje
	  <input name="mensaje" type="text" class="caja" id="mensaje" value="" size="50" maxlength="100" />
	  <input class="boton" type="submit" name="Submit" value="Enviar" />
	  </label>
	  </p>
	</form>
					
	<div id="barra">
		<div class="c_fecha">
		  <h4 align="center">Hora</h4>
		</div>
		<div class="c_usuario">
		  <h4 align="center">IP / Usuario</h4>
		</div>
		<div class="c_mensaje">
		  <h4 align="center">Acci&oacute;n / Mensaje</h4>
		</div>
		</div>
	<div id="pagina">	
	<?php
		for($i=1;$i<=20;$i++){
			echo '<div class="cuadro_mensaje"></div>';
		}
	?>
	</div>
  </div>
<?php
	require('funciones.php');
	$enlaceArticulo="Este usuario se encuentra en esta sección. Puedes iniciar una conversacion...";
	RegistroEnTablero($enlaceArticulo);
?>
</body>
</html>

En resumen …

Podemos decir que el Tablero dinámico funciona de la siguiente manera:

• envia mensajes a través de JavaScript al archivo registro.php,
• recibe datos a través de JavaScript del archivo consulta.php,
• mediante DOM crea divs con el contenido XML que devuelve consulta.php,
• se actualiza cada 3 segundos,
• consulta los datos tabla cuyas fechas sean mayores a la última fecha devuelta por consulta.php,
• registra cada dato en la tabla tablero, en la pagina principal que genera los contenidos de los post o artículos.

Espero haber explicado bien el código, pero cualquier duda o pregunta o ayuda que necesiten, consulte con toda confianza. Trataré de responder todas sus dudas. 

[Ver código fuente listo para adaptarlo a tu blog/web] [Ver ejemplo funcionando]