Paso 1: Comenzando con el desarrollo.
Primero vamos a necesitar un fondo para nuestra imagen. Yo les proporciono este con el logo de Codeigniter para probar, tiene un tamaño de 400x60 a este fondo le vamos a poner ‘fondo.jpg’ ustedes pueden usar el que prefieran.
Ahora vamos a crear un archivo que se llame contador.php y vamos a colocar lo siguiente
<?php
Header("Content-type: image/png");
$im = imagecreatefromjpeg("fondo.jpg");
imagepng($im);
imagedestroy($im);
?>
Vamos a utilizar la función header para especificar que esto va a ser una imagen png, hago esto de esta manera para que se den cuenta que aunque creemos una imagen a partir de una en jpeg podemos crear una en formato png o gif como queramos. Veremos que al ejecutar nuestro script veremos la misma imagen que tenemos en la carpeta y también si revisamos la información de la imagen veremos que dice imagen png.
Paso 2: Imprimiendo el numero en la imagen.
Vamos a necesitar ahora una fuente TrueType, en San google podremos conseguir cualquier cantidad de fuentes, yo les proporciono en el archivo final una para este ejercicio que se llama 'Broken Poster Tour.ttf', para poder usar esta letra vamos a requerir primero crear un color para nuestra letra así que vamos a añadir los comandos antes vistos Imagettftext y Imagecolorallocate. Nuestro código nos va a ir quedando así:
<?php
$numero=5;
Header("Content-type: image/png");
$im = imagecreatefromjpeg("fondo.jpg");
$col = imagecolorallocate($im, 255, 255, 255);
imagettftext ($im, 35, 0, 90, 50, $col, 'Broken Poster Tour.ttf',$numero);
imagepng($im);
imagedestroy($im);
?>
Si vamos bien hasta ahora debemos tener de salida algo así:
Nota: si nos sale un error en FireFox que diga así:
No se puede Mostrar la siguiente imagen “xx” porque contiene errores
Debemos primero comentar con ‘//’ la función header, guardar y volver a ejecutar para poder ver cual es el error que tenemos.
Paso 3: Dándole un formato acorde al numero.
A partir de este paso ya no tiene nada que ver con la creación de imágenes sino mas bien con mejorar nuestro script, en este paso vamos a dar formato al texto para que tenga una longitud siempre igual y con delimitador de miles, para ello vamos a usar estas dos funciones: number_format y str_pad.
Number_format: esta función nos va a dar formato el número con separador de miles. Así va a ir quedando nuestro número:
$numero = number_format($numero, 0, '', '.');
Str_pad: rellena un texto a cierto tamaño con una cadena. Después le agregamos esta función y nos queda así:
$numero = str_pad(number_format($numero, 0, '', '.'),8,'0', STR_PAD_LEFT);
Con esto ya tenemos un número de longitud con su respectivo separador de miles con punto. El código nos debe ir quedando así:
<?php
$numero=5;
$numero = str_pad(number_format($numero, 0, '', '.'),8,'0', STR_PAD_LEFT);
Header("Content-type: image/png");
$im = imagecreatefromjpeg("fondo.jpg");
$col = imagecolorallocate($im, 255, 255, 255);
imagettftext ($im, 35, 0, 90, 50, $col, 'Broken Poster Tour.ttf',$numero);
imagepng($im);
imagedestroy($im);
?>
Paso 4: Almacenando el numero.
Ahora ya tenemos una script en php que genera contador nos falta es un lugar donde guardar el numero para que cada ves que alguien visite nuestra pagina se aumente en uno, en este ejemplo vamos a almacenar el numero en un archivo que vamos a llamar ‘contador.dat’.
Primero abrimos el archivo con Fopen donde tenemos que especificar la ruta del archivo y el modo, el modo que vamos a poner es ‘r+’, porque así vamos a poder leer y escribir a la ves nuestro archivo, eso si nuestro archivo debe existir si nos dará error.
Después leemos con fread(), devolvemos el puntero al inicio del archivo con rewind(), escribimos el nuevo total con fwrite() y cerramos la conexión fclose(). Al final nuestro script quedaría de la siguiente forma:
<?php
$archivo = "contador.dat";
$abre = Fopen($archivo, "r+");
$numero = fread($abre, Filesize($archivo));
rewind($abre);
Fwrite($abre, ++$numero);
Fclose($abre);
$numero = str_pad(number_format($numero, 0, '', '.'),8,'0', STR_PAD_LEFT);
Header("Content-type: image/png");
$im = imagecreatefromjpeg("fondo.jpg");
$col = imagecolorallocate($im, 255, 255, 255);
imagettftext ($im, 35, 0, 90, 50, $col, 'Broken Poster Tour.ttf',$numero);
imagepng($im);
imagedestroy($im);
?>
Paso 5: Evitando contar números de más.
Ya tenemos nuestro contador listo y operativo, pero ahora nos surge un problema, el contador se va a actualizar cada ves que yo refresque la pagina ¿Pero de verdad quiero yo eso? Si yo quiero saber realmente el número de personas que visiten mi página, no me va a interesar que se cambie la cantidad de visitas cada ves que cargue la página sino cuando entre una persona diferente diariamente. Para hacer esto vamos a utilizar las cookies, vamos a almacenar con la función setcookie una variable en el navegador del visitante con un tiempo de vida de 24 horas, para que así tengamos un contador más realista. Agregaremos este código:
if (!isset($_COOKIE['visita'])) //comprobamos que la cookie NO este ya puesta
{
// aqui editaremos el archivo y guardaremos el numero
setcookie("visita", "lo que sea", time()+86400); //estableceremos la cookie con una caducidad de 24h = 86400seg
}
Y el código a la final nos quedaria asi.
<?php
$archivo = "contador.dat";
$abre = Fopen($archivo, "r+");
$numero = fread($abre, Filesize($archivo));
if (!isset($_COOKIE['visita']))
{
rewind($abre);
Fwrite($abre, ++$numero);
setcookie("visita", "lo que sea" , time()+86400);
}
Fclose($abre);
$numero = str_pad(number_format($numero, 0, '', '.'),8,'0', STR_PAD_LEFT);
Header("Content-type: image/png");
$im = imagecreatefromjpeg("fondo.jpg");
$col = imagecolorallocate($im, 255, 255, 255);
imagettftext ($im, 35, 0, 90, 50, $col, 'Broken Poster Tour.ttf',$numero);
imagepng($im);
imagedestroy($im);
setcookie("TestCookie", $value);
?> Aqui esta el archivo completo con fuentes y todo.
http://www.megaupload.com/?d=ED5CV7UD
No hay comentarios:
Publicar un comentario