Las estadísticas de un sitio web, como el total de visitas, el total de visitantes online, el total de páginas vistas, etc..., son datos muy importantes que cada propietario de todo sitio web debe conocer para saber el rendimiento de su proyecto. Generalmente los propietarios de sitios webs utilizan librerías externas u otros sitios webs de estadísticas para obtener informes sobre sus proyectos. Pero recurrir a terceros, a todo el mundo no le gusta, aunque sean de fuentes fiables como Google Anañytics. Por eso, en este tutorial te mostraremos cómo obtener estadísticas de una web usando PHP, jQuery y MySQL. Es decir, desarrollaremos nuestro propio sistema de estadísticas.
Antes que nada, vamos a crear un fichero PHP con el nombre de statistics.php.
// Database Structure
CREATE TABLE 'total_visitors' (
'id' int NOT NULL,
'session' text NOT NULL,
'time' int NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1
CREATE TABLE 'pageviews' (
'id' int NOT NULL,
'page' text NOT NULL,
'ip' text NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1
CREATE TABLE 'articles' (
'id' int NOT NULL,
'title' text NOT NULL,
'link' int NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1
<?php
session_start();
$_SESSION['session']=session_id();
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
function total_online()
{
$current_time=time();
$timeout = $current_time - (60);
$session_exist = mysql_query("SELECT session FROM total_visitors WHERE session='".$_SESSION['session']."'");
$session_check = mysql_num_rows($session_exist);
if($session_check==0 && $_SESSION['session']!="")
{
mysql_query("INSERT INTO total_visitors values ('','".$_SESSION['session']."','".$current_time."')");
}
else
{
$sql = mysql_query("UPDATE total_visitors SET time='".time()."' WHERE session='".$_SESSION['session']."'");
}
$select_total = mysql_query("SELECT * FROM total_visitors WHERE time>= '$timeout'");
$total_online_visitors = mysql_num_rows($select_total);
return $total_online_visitors;
}
if(isset($_POST['get_online_visitor']))
{
$total_online=total_online();
echo $total_online;
exit();
}
?>
<html>
<head>
<link href="statistics_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval(function()
{
$.ajax
({
type:'post',
url:'',
data:{
get_online_visitor:"online_visitor",
},
success:function(response) {
if(response!="")
{
$("#online_visior_val").html(response);
}
}
});
}, 10000)
});
</script>
</head>
<body>
<div id="wrapper">
<?php
// To Get Total Online Visitors
$total_online_visitors=total_online();
// To Get Total Visitors
$total_visitors = mysql_query("SELECT * FROM total_visitors");
$total_visitors = mysql_num_rows($total_visitors);
// To Insert Page View And Select Total Pageview
$user_ip=$_SERVER['REMOTE_ADDR'];
$page=$_SERVER['PHP_SELF'];
mysql_query("insert into pageviews values('','$page','$user_ip')");
$pageviews = mysql_query("SELECT * FROM pageviews");
$total_pageviews = mysql_num_rows($pageviews);
//To Get Total Articles
$articles = mysql_query("SELECT * FROM articles");
$total_articles = mysql_num_rows($articles);
?>
<div id="stat_div">
<li><p>Total Visitors</p><br><span><?php echo $total_visitors;?></span></li>
<li><p>Visitors Online</p><br><span id="online_visior_val"><?php echo $total_online_visitors;?></span></li>
<li><p>Total Pageviews</p><br><span><?php echo $total_pageviews;?></span></li>
<li><p>Total Articles</p><br><span><?php echo $total_articles;?></span></li>
</div>
</div>
</body>
</html>
Como puedes ver, para el proyecto necesitamos tres tablas: total_visitors, pageviews y articles. Obtendremos el total de visitas y el total de visitantes online de la primera tabla, el total de páginas vistas de la segunda tabla y el total de artículos publicados en la web de la tercera tabla. Los artículos que utilizamos en el proyecto es para dar más empaque al tutorial.
Para obtener el total de visitantes online vamos a crear una función llamada total_online. En dicha función obtenemos la hora actual y le quitamos 60 segundos porque para obtener los visitantes online precisos en el periodo más pequeño de tiempo (un minuto). Para ello utilizamos la función session_id() que crea una sesión para cada usuario, para saber quién está conectado a nuestro sitio.
Ahora consultamos a la base de datos y comprobamos si esa ID de sesión existe. Si la sesión no existe en la base de datos, significa que dicho usuario acaba de entrar en la web y la tenemos que insertar en la base de datos. Concretamente tendremos que insertar el ID del usuario y la fecha y hora actual en la tabla total_visitors. Si la sesión existe, significa que el usuario ya estaba en la web cuando actualizamos la hora, a la hora actual.
Ahora vamos a obtener los visitantes online totales utilizando la lógica. Seleccionamos todas las sesiones que se comprendan entre la hora actual y sesenta segundos menos de la fecha actual. Los usuarios que aparezcan, son los que están conectados ahora mismo a nuestra web.
Utilizamos una función AJAX para comprobar los visitantes online cada 10 segundos y todo el rato actualizamos el tiempo de la sesión a la hora actual.
Ahora vamos a crear un archivo CSS para personalizar nuestro desarrollo. El nombre que le daremos a este archivo es statistics_style.css.
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#A9BCF5;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#stat_div li
{
list-style-type:none;
display:inline-block;
color:#084B8A;
margin:20px;
font-weight:bold;
}
#stat_div li p
{
font-size:30px;
}
#stat_div li span
{
padding:40px;
background-color:#084B8A;
color:white;
border-radius:50%;
font-size:30px;
}
Y eso es todo, así es como se obtienen estadísticas de una web usando PHP, jQuery y MySQL. Puedes personalizar este código todo lo que quieras. Si tienes alguna duda, comunícanoslo en la zona de comentarios.
Fuente: talkerscode.com