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

6
3538

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($accion){
$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

6 COMENTARIOS

  1. hola. estuve viendo el script del tablero dinamico. hay un codigo (wordpress)comments.php y dentro de ese codigo llama a un require(‘../script/tablero_registro.php’). parece que el script no se encuentra. utliza una clase que se llama wordpress. tengo entendido que el wordpress es un administrador de blogger. a lo k voy es k que hace esa funcion y falta un archivo tablero_registro.php. me podria enviar ese ejemplo a micorreo. le estaria agradecido.

  2. Hola edwin, debo corregir alli, el archivo al que debes llamar es funciones.php, eso de script/tablero_registro.php no va simplemente. Saludos!!!

  3. ufff hace rato que no pasaba directo por el sitio, siempre lo leo desde mi feedreader, buenas jesus ahora que tengo un tiempito voy a robarte el codigo para implementarlo y ver que sale, cualquier cosa te aviso.

    gracias por el ejemplo!

  4. Hola Giovanny. Tienes toda la razón. Ese script para saber la ubicación mediante IP nos es del todo correcto. Si lo había notado. Pero como tu haz hecho, se puede implementar cualquier otro sistema para saber la ubicación del visitante.

    Saludos

  5. este script la verdad me parecio interezante y util para monitorear los accesos a mi sitio web de mis visitantes solo un pequeño detalle ¿como hago para cambiar esos numeros ip y en lugar de eso muestre el nombre del pais, tal y como lo tienes en el tablero espia de esta pagina? intente cambiar esa funcion getRealIP por otra que muestra el pais pero sale con errores una y otra vez, si pudieran ayudarme pues ya se me acabaron las ideas para solucionar ese problema

    de todas formas mil gracias por compartir tus brillantes conocimientos 😀

Comments are closed.